O básico do design
Uma equipe de desenvolvimento pode se beneficiar bastante de conhecer do básico de design por ser tornar capaz de entender, analisar e aplicar no código o que está presente na interface recebida do ti
Os 4 princípios básicos do design
O Design apresenta alguns princípios básicos que podem te guiar na construção de telas, páginas e outros segmentos e que podem te auxiliar no entendimento de designs de interfaces que tiver contato. Esses princípios andam juntos e talvez seja até difícil de enxergar só um deles ser usado quando estiver analisando uma peça.
São guias a serem seguidos com o intuito de tornar um design mais acertivo com a intenção que você quer passar e as informações que quer comunicar.
Contraste
Em um design, é importante que quem o está vendo ou interagindo seja capaz de identificar características de maneira fluída e fácil. Aplicar um bom contraste entre os elementos é um dos meios de se alcançar esse objetivo.
O contraste pode se dar entre fontes, cores, tamanhos, formas, etc.
Por exemplo, cores diferentes sendo usadas juntas podem não se diferenciar o suficiente para que seja possível distingui-las facilmente. Ou se elementos que sejam diferentes entre si estiverem com tamanhos ou formas parecidas podem não serem entendidos corretamente.
É possível perceber no site da Rock Content que mesmo eles utilizando diversas cores, formas e tamanhos diferentes (tanto em conjunto quanto em sobreposição) ao longo da página principal, é possível facilmente distinguir e ler esses elementos de maneira flúida por manterem um bom contraste entre si.
Alinhamento
O alinhamento de elementos é um princípio que nos ajuda a organizar as informações dentro de um mesmo contexto (tela, página, aba, etc). Você provavelmente já teve que alinhar um texto em ferramentas como Word, que te apresenta as opções de alinhar a esquerda, a direita, ao centro, etc. A ideia aqui é a mesma, porém, para todos os elementos presentes.
Manter um bom alinhamento entre os elementos ajuda a manter a fluidez de leitura de um design. Sem que a pessoa precise ficar procurando as informações na tela. Também é uma ótima maneira de agrupar visualmente elementos que tenham relação entre si.
Um exemplo simples e comum presente em diversos sites é o alinhamento de elementos do header. Na Digital Ocean, por exemplo, é possível ver que o primeiro elemento no cabeçalho é a logo deles e que logo em seguida já podemos ler as diferentes seções do site. Ambas as informações estão conectadas já que pertencem as páginas de informações do site sobre a própria empresa e ambas estarem alinhadas ao mesmo eixo ajuda nesse entendimento. Já na parte mais á direita, vemos os botões de login e registro de conta. Esses botões executam ações que te levam a uma área interna do site e normalmente é usado por quem já conhece a empresa, portanto, expressam informações diferentes e o alinhamento ajuda no entendimento dessa diferença.
Proximidade
Esse princípio diz respeito ao agrupamento de elementos similares. A proximidade entre eles é usada para passar uma mensagem de que esses elementos representam um mesmo segmento. O contrário também é verdadeiro, onde elementos distantes entre si são entendidos como diferentes segmentos do desisgn.
Uma boa distribuição de elementos e seus agrupamentos em um design ajuda na fluidez da leitura e evita que a pessoa que o está vendo fique perdida por onde começar a olhar.
Por isso que espaços em brancos são muito importantes em um design. Você não precisa ocupar toda a tela de elementos e, na verdade, ao não fazer isso você ajuda o seu design a ser menos custoso para ser processado por quem estiver lendo.
Um exemplo comum desse princípio está presente em landing pages que separam setores diferentes de acordo com as informações contidas nele. Na página sobre a Criação de apps do Ionic é possível ver essas diferentes seções separadas não só fisicamente mas também em suas características visuais para ajudar na percepção dos diferentes grupos de informação presentes.
Repetição
A repetição de elementos e suas características é um artíficio importante para criação de uma identidade para um design. Isso ajuda no entendimento das diferentes partes dele serem percebidas como pertencentes ao mesmo todo.
Um site que apresenta fontes ou cores diferentes a cada página visitada, por exemplo, pode dificultar o entendimento de unidade e acabar sendo percebido como entidades completamente diferente para os usuários.
A quebra da repetição em alguns elementos também pode ser interessante, como para diferenciar serviços ou produtos distintos oferecidos por uma mesma empresa. Porém, o ideal é que essa quebra ocorra em pontos específicos mas que ainda se tenha.
Cada segmento de produto oferecido pela Stripe usa cores diferentes para se diferenciarem, porém, o padrão de layout das páginas se mantêm como forma de manter a identidade e não confudir quem está conhecendo os diversos produtos.
