7 dicas do Photoshop para projetar sites limpos e modernos
Design web limpo, elegante e bonito é muitas vezes uma questão de perspectiva pessoal. Eu olho centenas de sites toda semana, e vários deles se destacam para mim, mas nem todos eles são necessariamente eficazes.
Demasiadas vezes os designers reduzem o conceito, produzindo um design final que nada mais é do que texto e uma grelha. Embora esses designs mínimos tenham seu apelo estético, especialmente quando combinados com excelente tipografia, eles correm o risco de falhar.
Pareceres pessoais à parte, existem certas características de um design que permitem que ele seja rotulado como limpo ou moderno e melhore sua usabilidade e simpatia em um nível universal. Simplicidade não é uma tendência de design, mas sim um atributo de bom design.
O Photoshop nos oferece um conjunto versátil de ferramentas para criar profundidade e interesse, e nos convida a integrar detalhes sutis onde deixaríamos um espaço em branco. Você só precisa de um punhado dessas ferramentas para infundir as qualidades do design moderno em um layout. Ao dominá-los, você pode criar designs limpos que expressam a funcionalidade de forma clara e eficaz.
1. Espaço
O espaço em branco permite a separação visual de elementos de design sem o uso de caixas, linhas ou gráficos adicionais e é possivelmente o aspecto mais importante do design moderno. É essencial para a apresentação e legibilidade do conteúdo. Quando usado corretamente, o espaço em branco dá ao seu layout uma aparência limpa e elegante.
Guias e Grades estão disponíveis no Photoshop para ajudá-lo a posicionar os elementos com precisão. A grade sobrepõe todo o documento, enquanto as guias podem ser definidas manualmente. Use as diretrizes antecipadamente para definir bordas, margens e preenchimentos invisíveis usados para definir seu espaço em branco.
Crie um guia pressionando Ctrl + R (Win) ou Cmd + R (Mac) para ativar a régua e, em seguida, clique na régua superior ou esquerda para arrastar uma diretriz até a posição desejada. Aqui estão alguns atalhos adicionais para ajudar você a gerenciar guias enquanto trabalha:
- Para mover uma diretriz: Ctrl (Win) ou Cmd (Mac) e clique no guia
- Mostrar / ocultar guias: pressione Ctrl +; (Win) ou Cmd +; (Mac)
- Mostrar / ocultar a grade: pressione Ctrl + '(Win) ou Cmd +' (Mac)
Ative seus Guias inteligentes em Exibir> Mostrar> Guias inteligentes . Guias inteligentes aparecem automaticamente quando você desenha uma forma, alinha o texto ou cria uma seleção ou um slide e economiza o trabalho de configurar diretrizes para esses elementos antecipadamente.
Alinhar objetos usando guias e grades torna seu design mais fácil de digerir e dará ao resultado geral uma aparência mais polida.
2. Profundidade
Profundidade criada com luz e sombra faz com que seus elementos pareçam nítidos e reais. Os efeitos de sombra podem ser aplicados a qualquer objeto, seleção ou camada de texto, mas o truque é escolher uma cor que corresponda ao plano de fundo e renunciar ao preto padrão.
Nem todas as sombras devem estar escuras. Combine o efeito Sombra Interior com uma Sombra Reduzida branca ou clara para criar uma sensação de afundamento ou "impressão tipográfica" com texto ou campos de formulário.
3. Detalhe
Tanto a ferramenta de gradiente como os efeitos da camada de gradiente desempenham um grande papel no design limpo e moderno. Os gradientes estão presentes em todos os aspectos do estilo moderno, desde sombras e destaques até planos de fundo e botões.
Para acessar a ferramenta de gradiente, pressione Shift + G. Para criar um gradiente, clique na tela, arraste e solte. Essa ferramenta é melhor usada para grandes áreas, como planos de fundo, luzes ou sombras radiais. Ao trabalhar com elementos individuais, como seções, botões ou ícones, o efeito da camada Sobreposição de degradê é um meio mais eficiente de estabelecer estilos ou texturas de superfície. Esta ferramenta é acessada clicando duas vezes na camada do elemento e selecionando a caixa de seleção “Gradient Overlay”.
Use esse efeito para dar uma dimensão sutil aos seus botões e barras de navegação ou para imitar o estilo e a textura do papel ou dos metais.
4. Definição
Ao definir bordas e bordas em excesso, você garante que seus elementos tenham o contraste adequado.
O efeito da camada Stroke irá delinear elementos como texto ou botões, onde você precisa de um contorno igualmente ponderado em todos os lados. Usar este efeito liberará as sombras Inner e Drop para estender suas opções.
É tentador dirigir-se à ferramenta caneta para desenhar linhas retas e regras horizontais, mas se você quiser aplicar gradientes ou sombras à linha, é mais fácil usar a ferramenta Marquee de Linha Única, que é colocada discretamente atrás da Rectangular Marquee Tool. . Use a ferramenta Linha Única em uma nova camada e uma sombra projetada branca ou clara para criar linhas de realce ao longo das bordas da seção ou separadores nos quais você não pode aplicar um efeito ao próprio elemento.
5. juros
Limpo e moderno não precisa ser igual a branco, nem mínimo. O uso inteligente de textura e padrão fará com que seu design se destaque, ao mesmo tempo em que comunica estilo e marca. Use técnicas sutis, como adicionar ruído (Filter> Add Noise) ou o efeito da camada Texture Overlay em áreas de fundo ou elementos de interface para ajudar a separá-los. Quanto mais real e claro for um elemento, mais atraente será para o espectador.
6. Perspectiva
A perspectiva é a técnica mais subutilizada no design da web moderna, simplesmente porque as tendências atuais se concentram consistentemente em simetria e grades. Ao aplicar perspectiva a imagens e elementos em seu design, você pode introduzir profundidade, dimensão, modernismo e interesse ao seu design em uma etapa simples.
Perspectiva pode ser dada a qualquer forma ou imagem, escolhendo a opção "Free Transform Path" no menu do botão direito e clicando no botão "Warp" localizado na barra de opções da ferramenta.
A ilusão de perspectiva também pode ser produzida criando formas assimétricas ou quadros e usando gradientes e sombras apropriadamente para separar os objetos.
7. Legibilidade
Tipo forte é bem amado na comunidade de design e um componente ainda mais forte do design limpo. Ele pode substituir imagens e gráficos que podem complicar o design e transmitir a essência total das técnicas acima de maneira simples e direta.
Para adicionar texturas ao texto, converta sua camada de texto em um Objeto Inteligente primeiro clicando com o botão direito na camada e escolhendo “Converter em Objeto Inteligente”. Você está limitado a efeitos de camada por padrão, a menos que seu texto seja rasterizado, uma prática que você deseja evitar. mesmo ao projetar para a tela. A conversão para Objetos Inteligentes permite que você aplique filtros e outras técnicas ao texto, preservando seus recursos de edição no caso de precisar alterar o texto posteriormente.
Lembre-se de que você tem opções de rastreamento e kerning disponíveis para você ao configurar elementos de texto. Mesmo que seu texto esteja destinado a ser reproduzido em CSS, experimente o espaçamento entre linhas e letras logo no início para visualizar melhor como seu conteúdo aparecerá no espaço que você forneceu. Além disso, lembre-se de usar o texto “Crisp” ou “Sharp” para manter a definição e a clareza.
Como você apresenta seu conteúdo em design limpo é mais importante do que qualquer outro estilo, simplesmente porque há menos coisas acontecendo visualmente para distrair o espectador. Usando as dicas acima para espaçar o texto e os objetos adequadamente, adicionar definição e interesse e diferenciar o conteúdo da interface, seu design alcançará a eficácia ideal.
O que você acha dessas dicas e tem outras que usa regularmente? Por favor, compartilhe abaixo ...