7 dicas práticas para trapacear no design

Melhorar seus projetos com táticas em vez de talentos.

Todo desenvolvedor da web inevitavelmente se depara com situações em que precisa tomar decisões de design visual, gostem ou não.

Talvez a empresa para a qual você trabalha não tenha um designer em tempo integral e você precise implementar a IU para um novo recurso por conta própria. Ou talvez você esteja hackeando um projeto paralelo e queira que ele tenha uma aparência melhor do que yet-another-Bootstrap-site.

É fácil levantar as mãos e dizer: “Nunca serei capaz de fazer isso parecer bom, não sou um artista!” , mas acontece que há uma tonelada de truques que você pode usar para aprimorar seu trabalho que não requerem experiência em design gráfico.

Aqui estão sete ideias simples que você pode usar para melhorar seus projetos hoje .

1. Use cor e peso para criar hierarquia em vez de tamanho

Um erro comum ao estilizar o texto da IU é depender muito do tamanho da fonte para controlar sua hierarquia.

“Este texto é importante? Vamos torná-lo maior. ”

“Este texto é secundário? Vamos torná-lo menor. ”

Em vez de deixar todo o trabalho pesado apenas para o tamanho da fonte, tente usar a cor ou a espessura da fonte para fazer o mesmo trabalho .

“Este texto é importante? <✓ Vamos tornar mais ousado.

“Este texto é secundário? <✓ Vamos usar uma cor mais clara.

Tente usar duas ou três cores:

Da mesma forma, duas espessuras de fonte geralmente são suficientes para o trabalho da IU:

Fique longe de espessuras de fonte abaixo de 400 para trabalhos de IU ; eles podem funcionar para títulos grandes, mas são muito difíceis de ler em tamanhos menores. Se você está pensando em usar um peso mais leve para tirar a ênfase de algum texto, use uma cor mais clara ou um tamanho de fonte menor.

2. Não use texto cinza em fundos coloridos

Tornar o texto um cinza mais claro é uma ótima maneira de tirar a ênfase em fundos brancos, mas não fica bem em fundos coloridos.

Isso ocorre porque o efeito que vemos realmente com cinza sobre branco é o contraste reduzido .

Aproximar o texto da cor de fundo é o que realmente ajuda a criar a hierarquia , não tornando-o cinza claro.

Existem duas maneiras de reduzir o contraste ao trabalhar com fundos coloridos:

1. Reduza a opacidade do texto branco

Use texto branco e diminua a opacidade. Isso permite que a cor do plano de fundo passe um pouco, sem enfatizar o texto de uma forma que não entre em conflito com o plano de fundo.

2. Escolha uma cor com base na cor de fundo

Isso funciona melhor do que reduzir a opacidade quando o fundo é uma imagem ou padrão, ou quando reduzir a opacidade torna o texto muito opaco ou desbotado.

Escolha uma cor com o mesmo matiz do fundo, ajustando a saturação e a luminosidade até que fique bem para você.

3. Desloque suas sombras

Em vez de usar grandes valores de desfoque e dispersão para tornar as sombras das caixas mais visíveis, adicione um deslocamento vertical.

Parece muito mais natural porque simula uma fonte de luz brilhando de cima como estamos acostumados a ver no mundo real.

Isso se aplica a sombras inseridas como você pode usar em poços ou entradas de formulário também:

Se você estiver interessado em aprender mais sobre design de sombras, as Diretrizes de design de material são uma cartilha fantástica.

4. Use menos bordas

Quando você precisa criar separação entre dois elementos, tente resistir imediatamente a alcançar uma fronteira.

Embora as bordas sejam uma ótima maneira de distinguir dois elementos um do outro, elas não são a única maneira, e usar muitos deles pode deixar seu design desordenado e desordenado.

Na próxima vez que você chegar em uma fronteira, tente uma destas ideias:

1. Use uma sombra de caixa

As sombras em caixa fazem um ótimo trabalho de delinear um elemento como uma borda, mas podem ser mais sutis e atingir o mesmo objetivo sem serem tão perturbadores.

2. Use duas cores de fundo diferentes

Dar aos elementos adjacentes cores de fundo ligeiramente diferentes geralmente é tudo que você precisa para criar uma distinção entre eles. Se você já estiver usando cores de fundo diferentes, além de uma borda, tente remover a borda; você pode não precisar dele.

3. Adicione espaçamento extra

Qual a melhor maneira de criar separação entre elementos do que simplesmente aumentar a separação? Espaçar ainda mais as coisas é uma ótima maneira de criar distinção entre grupos de elementos sem a introdução de nenhuma nova IU.

5. Não expanda ícones que deveriam ser pequenos

Se estiver projetando algo que poderia usar alguns ícones grandes (como talvez a seção “recursos” de uma página de destino) , você pode instintivamente pegar um conjunto de ícones grátis como Font Awesome ou Zondicons e aumente o tamanho até que eles atendam às suas necessidades.

Afinal, são imagens vetoriais, então a qualidade não será prejudicada se você aumentar o tamanho certo?

Embora seja verdade que as imagens vetoriais não degradam em qualidade quando você aumenta seu tamanho, ícones que foram desenhados em 16–24 px nunca terão uma aparência muito profissional quando você aumentá-los para 3x ou 4x o pretendido tamanho. Faltam detalhes e sempre parecem desproporcionalmente “grossos”.

Se você só tem ícones pequenos, tente colocá-los dentro de outra forma e dar à forma uma cor de fundo:

Isso permite que você mantenha o ícone real mais próximo de seu tamanho pretendido, enquanto ainda preenche o espaço maior.

Se você tiver orçamento, também pode usar um conjunto de ícones premium projetado para ser usado em tamanhos maiores, como Heroicons ou Iconic.

6. Use bordas de destaque para adicionar cor a um design sem graça

Se você não é um designer gráfico, como adicionar aquele toque visual à sua IU que outros designs obtêm com belas fotografias ou ilustrações coloridas?

Um truque simples que pode fazer uma grande diferença é adicionar bordas coloridas de destaque a partes da interface que, de outra forma, pareceriam um pouco sem graça.

Por exemplo, ao lado de uma mensagem de alerta:

… ou para destacar itens de navegação ativos:

… ou mesmo na parte superior de todo o layout:

Não é necessário nenhum talento em design gráfico para adicionar um retângulo colorido à sua IU, e isso pode ajudar muito a tornar seu site mais “projetado”.

Tem dificuldade em escolher as cores? Tente escolher em uma paleta restrita como pesquisa de cores do Dribbble para evitar se sentir sobrecarregado com as possibilidades infinitas de um seletor de cores tradicional.

7. Nem todo botão precisa de uma cor de fundo

Quando há várias ações que um usuário pode realizar em uma página, é fácil cair na armadilha de projetar essas ações com base puramente na semântica.

Estruturas como o Bootstrap meio que incentivam isso, fornecendo um menu de estilos semânticos para escolher sempre que você adicionar um novo botão:

“Esta é uma ação positiva? Deixe o botão verde. ”

“Isso exclui dados? Deixe o botão vermelho. ”

A semântica é uma parte importante do design do botão, mas há uma dimensão mais importante que comumente é esquecida: hierarquia.

Cada ação em uma página fica em algum lugar em uma pirâmide de importância. A maioria das páginas tem apenas uma ação primária verdadeira, algumas ações secundárias menos importantes e algumas ações terciárias raramente usadas.

Ao projetar essas ações, é importante comunicar seu lugar na hierarquia.

“E as ações destrutivas, não deveriam ser sempre vermelhas?”

Não necessariamente! Se a ação destrutiva não for a ação primária na página, pode ser melhor dar a ela um tratamento de botão secundário ou terciário.

Salve o estilo grande, vermelho e negrito para quando a ação negativa realmente for a ação principal na interface, como em uma caixa de diálogo de confirmação:

Gostou desta postagem? Acabamos de lançar um livro!

A IU de refatoração reúne tudo o que sabemos sobre design e o agrupa em um pacote abrangente, incluindo um livro, screencasts, uma galeria de componentes, recursos personalizados e muito mais.

Mais de 6.000 pessoas já perceberam isso, e o feedback tem sido incrível.

Se você estiver interessado, acesse RefactoringUI.com/book para saber mais e fazer download de uma amostra.