O tempo passa de modo que a tua existência em minha vida se reduz a uma ínfima sombra irregular do passado.
–Tuanny Martins
O tempo passa de modo que a tua existência em minha vida se reduz a uma ínfima sombra irregular do passado.
–Tuanny Martins
Porque Deus amou o mundo tanto, que deu o seu único Filho, para que todo aquele que nele crer não morra, mas tenha a vida eterna.
João 3:16
Que a vida de vocês seja dominada pelo amor, assim como Cristo nos amou e deu a sua vida por nós, como uma oferta de perfume agradável e como um sacrifício que agrada a Deus!
Por volta das três horas da tarde, Jesus bradou em alta voz: “Eloí, Eloí.”
Alguns manuscritos dizem “Eli, Eli, lamá sabactâni?”, que significa “Meu Deus! Meu Deus! Por que me abandonaste?
Jesus, ao carregar o meu, o teu, e o pecado do mundo na cruz, foi separado de Deus. A agonia física era horrível, mas estar separado de Deus espiritualmente era pior. Porque Deus não conseguia olhar para Jesus naquela cruz sem ver o nosso pecado. Então se afastou. Porque Deus é santo, e o pecado afasta o homem dele.
Foi o que Martinho Lutero fez. Quando o grande reformador estava no leito de morte sentindo dores de cabeça que o deixaram abatido e acamado, ofereceram-lhe um medicamento para aliviar o sofrimento. Lutero recusou e explicou: “Minha melhor prescrição para a cabeça e o coração é que “Deus amou o mundo de tal maneira que deu o seu Filho unigênito, para que todo aquele que nele cré não pereça, mas tenha a vida eterna!’ E o mais importante? Nada pode nós separar desse amor.
Pois estou convencido de que nem morte nem vida, nem anjos nem demônios, nem o presente nem o futuro, nem quaisquer poderes, nem altura nem profundidade, nem qualquer outra coisa na criação será capaz de nos separar do amor de Deus que está em Cristo Jesus, nosso Senhor. Romanos 8:38
Digo-te o motivo pelo qual recusava-me repousar meus olhos nos teus: tinha medo de perder-me no oceano do teu olhar. Não obstante, perdi-me no encanto das tuas palavras. – Tuanny Martins
(…) e não esquecer que a estrutura do átomo não é vista mas sabe-se dela. Sei de muita coisa que não vi. – Clarice Lispector
No post anterior vimos uma introdução sobre Design Systems. Neste capítulo, Brad Frost conta como se inspirou na química para criar este conceito. Vamos lá!
Tudo o que conhecemos no mundo é formado por átomos, os quais são invisíveis aos nossos olhos naturais, poeticamente dito por Clarice na abertura do post. Esses átomos se agrupam formando moléculas que por sua vez se agrupam, novamente, formando organismos.
O conceito base do Atomic Design se define em:
“Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner.
Esses 5 estágios mencionados na definição são:
1. Átomos
2. Moléculas
3. Organismos
4. Templates
5. Páginas
A seguir, veremos um pequeno esboço sobre cada um deles.
Os átomos são basicamente elementos HTML como labels, inputs, buttons e outros que não podem ser quebrados pois perderiam o significado. Ou seja, átomos são estilos básicos e precisam se agrupar para então fazer sentido na interface.
As moléculas são agrupamentos de átomos os quais formam uma unidade significante. Por exemplo um menu, uma barra de pesquisa, um card. Em outras palavras, moléculas são componentes.
Os organismos compreendem um aglomerado de várias moléculas, átomos e outros organismos. Em outras palavras seções. Por exemplo, uma header é um organismo. Uma sidebar é outro.
“While some organisms might consist of different types of molecules, other organisms might consist of the same molecule repeated over and over again.
Até aqui o autor fez uma analogia embasando-se em fundamentos elementares da química para explicar o Design Systems. Agora, para fazer mais sentido para outras pessoas, como clientes, por exemplo, Brad Frost se apropriou de termos comuns à area como é o caso dos “Templates”.
Templates são esqueletos cheios de moléculas, átomos e organismos articulados que formam estruturas de conteúdo. Em outras palavras, templates são layouts/wireframes. O foco no template é mostrar a disposição dos componentes e a estrutura, não o conteúdo final. No template prevemos os tamanhos das imagens bem como a quantidade de texto e caracteres de cada bloco.
As páginas são representações reais dos templates no que tange ao conteúdo e imagens. A pergunta a ser feita nessa etapa é “Tudo parece bom e funcional como deveria?”
Se a resposta for não, volte aos organismos, moléculas e átomos para fazer as alterações necessárias.
“With actual content in place, we’re able to see if the UI components making up the page properly serve the content being poured into them.”
Um ponto interessante é que as páginas permitem algumas variações, por exemplo, uma página populada por um conteúdo do usuário, como um carrinho de compras, abre vazão para outro comportamento, o carrinho vazio. O template continua o mesmo, no entanto a página recebe uma variação a qual nos ajuda a criar sistemas mais flexíveis e resilientes. Isso é Atomic design!
Conteúdo e design andam juntos e é necessário considerá-los no momento em que estivermos criando nossas interfaces para não acontecer a temível “quebra de layout”.
Content needs to be structured and structuring alters your content, designing alters content. It’s not ‘content then design’, or ‘content or design’. It’s ‘content and design’. – Mark Boulton
No próximo capítulo, veremos Design Systems na prática. Até lá
A intenção dessa série é publicar minhas impressões e destaques do livro “Atomic design”, de Brad Frost. Meu objetivo é, além de compartilhar conhecimento, fixar o conteúdo na minha mente de bagre. :fish:
Este livro foi escrito pelo designer Brad Frost o qual criou um método dinâmico de criação de sistemas visuais que promete garantir a consistência em projetos digitais de design.
A introdução nos conta rapidamente acerca da evolução do livro e relata a página em branco, como a grande metáfora em comum entre o papiro e o pixel. As experiências na web estão intrinsecamente ligadas com a sua metáfora: a página.
From the beginning, the page metaphor provided users with a familiar language with which to navigate this brave new World Wide xWeb.
Em se tratando de webpages, pode ser complicado para muitas companhias, pensar que precisam produzir seus conteúdos e distribuí-los numa quantidade significativa de páginas distintas. Pode até ser tentador deliberar a seguinte questão “Em quanto tempo se faz 30,000 mil páginas?” e achar que o trabalho é dispendioso e inviável. Na realidade, essas 30,000 páginas poderiam ser reduzidas a 5 modelos de diferentes páginas para abrigar todo o conteúdo necessário. Ou seja, o nível de esforço de um projeto deve ser medido pelas funcionalidades e componentes e não pela quantidade de páginas. Pensando nisso, as experiências de sucesso na web/mobile estão relacionadas a um conceito que remonta aos anos da Revolução Industrial: a modularidade.
A modularidade é um conceito antigo. Desde a Revolução Industrial ele é aplicado nos modos de produção e na linha de montagem de Henry Ford o qual modificou todo o processo automobilístico, deixando-o mais rápido e eficiente.
The earliest cars and components were individually crafted, which led to many safety and maintainability nightmares. Ford broke the automobile down into its component parts and modularized the assembly process. The results spoke for themselves: more uniform, more reliable, safer cars rolled out of the factory, and in record time to boot.
Hoje, a modularidade vem sendo discutida e adaptada ao Design. Mas, se a modularidade existe há um tempão, porque a discussão só se inflamou recentemente?
Porque nunca houve na história desse Brasil uma gama incontável de devices disponíveis no mercado, cada um com suas dimensões e densidades, desafiando-nos a criarmos sistemas cada vez mais flexíveis e responsivos.
To properly address this increasingly diverse and eclectic digital landscape, we need to dramatically overhaul our perception of content and the tools we use to manage it.
Legenda: o número de novos devices em 6 meses. Por LukeW
Outro ponto que me chamou a atenção foi a experimentação proposta pela designer Samantha Warren. Ela basicamente criou um método onde explora tipografia, cores e texturas de uma forma rápida, sem muito esforço e tempo. Vale a pena fazer como exercício para praticar e experimentar diferentes – mas sutis – propostas gráficas.
Outro assunto abordado no capítulo um são os frameworks. O Bootstrap e o Foundation, dos quais eu mesma já usei, são uma mão na roda. A economia de tempo, até para quem tem noções básicas de html/css é enorme. Um tempo considerável de desenvolvimento é poupado pois esses frameworks têm uma série de componentes prontos para serem customizados. Sim, customizados, pois se o site é feito em bootstrap e não recebe a roupagem da identidade da marca, o resultado é um site estranhamente default e padrão.
O autor ressalta a importância da consistência nos projetos, a qual confere confiabilidade. Imagina você entrar em um site ou aplicativo e se deparar com mais de uma linguagem gráfica diferente? O que você pensaria? Muito provavelmente que entrou em um ambiente estranho, logo, como a marca não se manifestou de maneira persistente você, caro leitor, fica confuso e com medo de dar o próximo passo e continuar interagindo com a interface, pois pensa que é falsa. Por isso que o styleguide torna-se peça fundamental a qual nos ajuda a garantir consistência.
O Styleguide é o conjunto de todos os componentes reunidos em um único lugar: tabelas, ícones, estilos, etc. É uma ferramenta que será utilizada pelo desenvolvedor no momento em que ele estiver transformando os mockups estáticos em telas reais.
Ao longo das páginas, o autor fala sucintamente sobre a importância do styleguide nos projetos. Ele é uma parte sensível que merece toda a atenção pois também é um garantidor da consistência. Um guide completo é um conjunto dos seguintes itens:
• Linguagem de design
• Linguagem verbal
• Voz e tom
• Identidade da marca
• Patterns de interface.
Tip: Identidade da marca é um conceito mais objetivo. É como usar a cor, tipografia, texturas nos desmembramentos de uma marca, enquanto linguagem visual é mais subjetiva. É a justificativa da cor, tipografia e texturas.
No próximo post, adentraremos no capítulo 2 e entenderemos o conceito de átomos, moléculas, organismos e páginas!
Até loguinho
Broto do concreto surgiu
Com a esperança que raiou.
No meio da fenda da dor, esplendoroso, desabrochou.
Sorri criança que chora,
Sorri jovem que corre,
Sorri velho que ora,
Sorri porque da vida, o sonho é uma flor.
Uma flor serena e graciosa
Com seu hálito de frescor.
Traz à lembrança o sonho perdido e à memória
Todo o amor que restou.
Vem e desata esse nó de medo
E busca teu sonho na fenda da dor.
Corre depressa, porque não há tempo
De lamentar o tempo que passou.
– Tuanny Martins
Hoje é dia de compartilhar amor e novas esperanças para o que reserva o ano vindouro.
Paz, alegria e leveza, a casa espera ansiosamente os demais parentes.
Aquela família planeja a melhor ceia que pode:
A vovó comprou o melhor bolo da região, com recheio de chocolate, cerejas e raspas douradas para enfeitar. A tia fez creme de frango, peru, arroz com passas e legumes com maionese.
Vovô estava cansado e foi ao quarto tirar uma soneca.
Todos estavam sentados na mesa conversando descontraidamente quando de repente a campainha toca… “Ding dong, tô de casa”
É o tio! O tio e sua família chegam para ceiar. A tia acorda o vovô que se assusta com o chamado e aparece de cuecas samba canção na cozinha na frente dos convidados que se põem a rir incansavelmente.
E assim, a família continua sua ceia com essa memória eterna que será contada aos seus filhos, netos, bisnetos, trinetos e tantos quantos outros netos os próximos anos e a vida permitirem.