Guia de web design para desenvolvedores

O autor do artigo, cuja tradução publicamos hoje, diz que criou seu primeiro site aos 14 anos, na forma de um projeto escolar. Depois, ele teve uma tarefa simples: desenvolver um site contendo algum texto, imagens e uma tabela. Geralmente, ele se relacionava com projetos escolares da seguinte maneira: no início, esquecia-os e, quando chegava o prazo, fazia-os no último momento. No entanto, naquela época não era nada disso. Ele estava particularmente interessado em como seria seu primeiro site. Então, para fazer tudo como deveria, ele fez o seu melhor. O autor do material diz que, desde os tempos antigos, ele se esforçou para garantir que o que ele faz fosse o mais atraente possível. Este desejo ainda está vivo nele. Aqui ele deseja compartilhar dicas sobre o design de páginas da web.

Desenho

Pode ser reconhecido, pode não ser reconhecido, mas as pessoas julgam qualquer coisa pela aparência. Se o que você faz parecer bom, as chances de seu projeto ganhar a confiança de outras pessoas estão aumentando, naturalmente, se a palavra “bom” puder descrever não apenas sua aparência, mas também sua funcionalidade.

Por muitos anos, criei meus próprios projetos diferentes e, durante esse período, prestei cada vez mais atenção ao desenvolvimento de minhas habilidades de design, e não apenas ao aprimoramento de minhas habilidades de programação. O código é importante, mas se você deseja criar seu próprio projeto lucrativo, precisará resolver muitos problemas, um dos quais é o design. Um desenvolvedor solitário, para conseguir algo, precisa se desenvolver de forma abrangente.

Um ótimo design não é algo que possa reunir vários gostos no Dribbble . Isso é algo que nem é notado no começo. É um equilíbrio entre absoluta simplicidade e algo de tirar o fôlego. O design pode ser uma vantagem competitiva do projeto e uma das razões do seu fracasso.

Não se trata de talento

Quando eu era mais jovem, jogava muito Minecraft. Eu olhei para o belo que os outros criam, mas quando tentei criar algo próprio, tudo acabou parecendo uma caixa. Nem beleza nem estilo. E como você pode fazer algo bonito no Minecraft?

Então eu encontrei um blogueiro de vídeo no YouTube e construí uma cópia do que ele estava construindo. Depois de algumas semanas, formei meu próprio estilo e já consegui criar algo próprio. De repente, meus projetos pararam de parecer que não estava claro o quê. O que posso dizer, ganhei até um concurso.

Na verdade, contei essa história ao fato de que o design é uma habilidade e, como no caso de outras habilidades, o design pode ser dominado.

Seleção de ferramenta

Na programação, você pode usar um bloco de notas comum e usá-lo para escrever um aplicativo que não seja de forma alguma inferior ao criado usando um IDE poderoso, embora a programação no bloco de notas possa não ser a tarefa mais agradável e provavelmente o processo de desenvolvimento demore muito mais do que com o usando as ferramentas certas. Se falamos de web design, o papel do Notepad aqui pode ser desempenhado pelo MS Paint, e espero que, como no exemplo do Notepad e da programação, muito poucos o usem para resolver problemas de design.


Ferramentas populares de web design

Aqui estão algumas ferramentas populares de web design:

• O Sketch é uma ferramenta exclusiva para MacOS. Se você traçar um paralelo com o mundo da programação na Web, será algo como React for design. Há uma sensação de que a menção de Sketch está presente em todas as vagas do designer. Essa coisa custa US $ 99 por ano.
• O Adobe XD é uma ferramenta multiplataforma gratuita que, continuando sua analogia de programação, é semelhante ao Vue. No Adobe XD, uma comunidade não é tão grande quanto no Sketch, mas dominar essa ferramenta é muito simples.
• O Adobe Photoshop é algo como uma faca suíça no mundo do design, que todo mundo conhece, e que pode ser comparado ao jQuery. Você pode usar o Adobe Photoshop por US $ 9,99 por mês.

Praticamente não há diferença se você usa Sublime ou VS Code para escrever código. O mesmo pode ser dito sobre se você escolhe React ou Vue para o desenvolvimento da interface. Isso é uma questão de gosto. O mesmo pode ser dito sobre ferramentas de designer. Cada um deles tem suas próprias vantagens e desvantagens.

Eu uso o Adobe XD. O principal motivo dessa escolha é a plataforma cruzada, como resultado, como faria se escolhesse o Sketch, não sou refém do ecossistema da Apple. Além disso, o Adobe XD é suportado pela Adobe, portanto, você pode esperar que esse projeto exista por muito tempo. E será especialmente agradável para iniciantes que, desde maio de 2018, o Adobe XD possa ser usado gratuitamente, embora com algumas restrições (embora seja improvável que interfiram com você).

Sobre o humor certo

O principal problema que tive que resolver ao entrar no mundo do web design foi desenvolver a atitude certa. Anteriormente, eu estava envolvido no processo de design do site. Eu pensei que tudo deveria ser organizado em uma certa ordem. Os elementos são colocados da esquerda para a direita e de cima para baixo. É verdade que essa abordagem é uma maneira de se tornar um péssimo designer.

As ferramentas de design fazem você trabalhar como se cada elemento tivesse um posicionamento absoluto. Após as construções claras que podem ser vistas no código do programa, as construções operadas pelo designer podem parecer desorganizadas e confusas. Mas deve ser aceito. Isso dá liberdade, a capacidade de mudar rapidamente tudo e experimentar muito. E isso é talvez o mais importante, pois o design é um processo contínuo. No design, é completamente esperado que, antes de obter um excelente resultado, você muitas vezes precise refazer tudo.

Ferramentas de aprendizagem

Ao escrever código para páginas da Web, são usados ​​elementos HTML, como div , span , campos de entrada de dados, permitindo que o navegador os transforme em algo que possa ser visto na tela. Ao trabalhar com ferramentas de design, você tem a oportunidade de se livrar da mediação e usar elementos visuais, como formas geométricas ou fragmentos de texto, diretamente.

Eu escolhi as quatro ferramentas de designer mais usadas, não é muito, então você não pode gastar muito tempo desenvolvendo essas ferramentas. De fato, o tempo é melhor gasto no design. Ou seja, entendendo rapidamente o básico, você pode começar a praticar imediatamente. Vamos falar sobre essas ferramentas usando o Adobe XD como exemplo.

▍Retângulo - Retângulos

Um retângulo é a figura geométrica mais usada no design. Ao projetar, você estará constantemente trabalhando com eles. Pense no retângulo como se fosse um elemento div HTML. Os retângulos são usados ​​no design de vários elementos da página - dos campos de texto aos contêineres.


Retângulo

OolTool Text - Etiquetas de linha única

À primeira vista, parece que trabalhar com textos é muito simples. No entanto, há um recurso, que consiste no fato de que a ferramenta para trabalhar com textos possui dois modos de operação. Um deles é projetado para criar inscrições de linha única, o segundo - para criar blocos de teste de várias linhas. Felizmente, apesar desse recurso, a ferramenta para trabalhar com textos é fácil de aprender e usar.

No primeiro modo, projetado para funcionar com inscrições de linha única, o tamanho do contêiner de texto é ajustado ao tamanho do texto contido nele. Isso é semelhante à tag span , exceto que o texto desse contêiner não será quebrado automaticamente em uma nova linha, a menos que você use explicitamente feeds de linha. A força desse modo de operação é que o tamanho do contêiner se ajusta automaticamente aos parâmetros do texto contido nele.

Para criar um fragmento de texto de uma linha, selecione a ferramenta Texto na barra de ferramentas do Adobe XD, clique onde o texto deve estar localizado e digite-o. Como regra, deve-se considerar que esse modo deve ser usado para inscrições de linha única, cuja largura pode ser selecionada automaticamente. Esses são cabeçalhos e rótulos de objetos de linha única.


Ferramenta de texto - etiquetas de linha única

OolTool Text - grandes pedaços de texto

O segundo modo da ferramenta para trabalhar com texto é usado para formar contêineres de texto de um determinado tamanho, que se comportam como uma tag p com uma determinada largura ou como uma tag p localizada em uma célula da grade. A força desse estado é que ele pode controlar o tamanho do bloco de texto. Para criar um fragmento de texto, você precisa selecionar a ferramenta Texto e a área que o fragmento deve ocupar. Na verdade, esse modo deve ser usado para fragmentos de texto de várias linhas.


Ferramenta de texto - snippets de texto com várias linhas

▍ Ferramenta Selecionar - seleção de objetos

Usando a ferramenta Selecionar, os objetos são movidos, redimensionados e copiados. Na figura abaixo, você pode ver os elementos auxiliares dessa ferramenta, como linhas rosa que ajudam a determinar a distância entre objetos e linhas azuis com as quais é conveniente alinhar objetos.


Selecionar ferramenta

LineLinha de ferramentas - linhas

Às vezes, as linhas são muito úteis, por exemplo, para separar os elementos da página. Portanto, estamos falando aqui sobre a ferramenta Linha. Do ponto de vista técnico, você pode usar a ferramenta Retângulo para a mesma coisa, mas o que você pode fazer, o elemento div HTML pode ser usado para implementar qualquer coisa.


Ferramenta de linha

Design: recomendações e truques

▍ Layout

No desenvolvimento da Web, o layout geralmente é representado pelo cabeçalho da página, menu, conteúdo da página e rodapé. Tudo isso faz parte do layout, mas o layout em si é algo mais do que a soma dessas partes. Layout é como os elementos são organizados em uma página.

Por exemplo, quando projetei a página de informações para o Sidemail , coloquei os elementos uniformemente dentro do contêiner. A figura a seguir, na parte inferior, mostra exatamente essa opção de design, que considero bem-sucedida, e na parte superior há uma opção malsucedida. Como resultado, o que aconteceu foi percebido, em comparação com outra opção, como algo mais integral, essa opção parecia mais precisa do que aquela que eu considerava malsucedida.


Exemplos de layout malsucedido e bem sucedido

▍Cores

Ao escolher as cores para o seu próximo projeto, esteja ciente de um conceito como a psicologia das cores . Para encontrar boas combinações de cores com base na cor principal, você pode usar o projeto Paletton .

Para criar uma hierarquia visual da página, use tons das cores do primeiro plano e do texto. Ao usar um plano de fundo colorido, experimente tons da cor usada para o texto.


Exemplos de trabalho com cores e texto

▍Tipografia

As fontes usadas para os diferentes rótulos afetam fortemente a percepção das páginas; portanto, tenha cuidado com a escolha. Normalmente, as fontes comerciais têm uma aparência melhor do que as encontradas no Google Fonts, mas se você está apenas começando como web designer, não deve perder dinheiro comprando fontes. Mesmo entre o que está no Google Fonts, você pode encontrar ótimas opções.

Para separar visualmente fragmentos de texto, costumo usar a técnica, que consiste no fato de que os textos das inscrições são feitos em letras maiúsculas com uma distância maior entre os caracteres. Os textos em maiúsculas são simétricos, eles parecem atraentes, no entanto, são mais difíceis de ler, portanto, não se empolgue demais com eles.


Exemplos de texto em maiúsculas

Design da página inicial (ou aterrissagem)

Eu sempre tento evitar a tentação de criar um design elegante e, em seguida, comprimo o que quero comunicar através da página. Em vez disso, enfatizo as vantagens do projeto (e não seus recursos funcionais), crio uma história a partir delas e a conto usando uma página visualmente atraente.

Depois de entender a história que quero contar através da página, geralmente começo a procurar inspiração. Uma grande fonte de inspiração para mim é o projeto land-book.com , que é um extenso catálogo de ótimos designs para designs de páginas de destino nos quais você pode votar. Outro projeto em que você pode buscar inspiração é o interfaces.pro . Permite selecionar páginas de certos tipos, por exemplo, podem ser páginas com informações sobre preços, páginas 404 ou páginas com informações sobre sites. Eu assisto tudo isso até conseguir encontrar sites suficientes de que gosto, cuja aparência corresponde às minhas idéias sobre o estilo do projeto que faço.


Página de destino

Depois de formar uma idéia geral do que preciso, chega a hora de resolver a difícil tarefa de reunir tudo. Infelizmente, não há maneiras fáceis. Para criar algo bom, você precisa experimentar muito, fazendo isso até gostar do que recebe.

Talvez você esteja se perguntando se isso é normal se o design que lhe serviu completamente uma semana atrás de repente começou a parecer não tão bom para você, mas talvez completamente inaceitável. Isso é completamente normal e, de fato, se você experimenta essas sensações, é até bom. Isso se deve ao fato de você crescer, estudar e se tornar melhor no campo do design. Como resultado, o que parecia uma tarefa assustadora ontem não parece tão complicado hoje. Tenha isso em mente e você não se sentirá como um esquilo em uma roda.

▍ Conclusões e recomendações

• A seleção cuidadosa de fontes é uma daquelas pequenas coisas que distinguem bom design de ruim.
• As imagens são importantes. Tente usar ilustrações ou fotografias apropriadas em suas páginas, pelo menos em pequenas quantidades.
• Crie uma hierarquia visual de elementos usando tons de cores. Não basta usar apenas algumas cores, uma das quais é a principal e a segunda é a cor do texto.
• Não use recipientes muito largos. Uma largura de 1.100 pixels é geralmente suficiente.
• O espaço vazio entre os elementos é um elemento de design importante.
• A história contada na página da Web deve ser construída com base no mérito do projeto, e não em seus recursos funcionais.
• Se você sentir que suas idéias estão esgotadas, procure inspiração em outros projetos.

Design de aplicativo da Web (ou painel de controle)

Como no caso do design da página de entrada, ao criar um aplicativo da Web, você não precisa se agarrar imediatamente à disposição dos elementos na página. A situação em consideração difere da anterior, pois aqui você não conta a história ao visitante. Desta vez, você está criando uma ferramenta, e seu objetivo principal é torná-la conveniente. Pegue um pedaço de papel e um lápis e desenhe um plano de trabalho para sua aplicação. Pense no que depende, como facilitar o trabalho com este aplicativo.

Se necessário, faça alguns esboços ou layouts. Explore o design de projetos concorrentes, pense no que eles não têm. Talvez você decida fazer algo que eles não têm, e isso pode se tornar a vantagem competitiva do seu projeto. Lembre-se de que, às vezes, antes de desenhar layouts e descobrir opções de design, você precisa ter tempo para pensar.

O melhor conselho que não está vinculado aos recursos específicos de vários projetos que posso dar aqui é escolher um layout de página adequado. Normalmente, os aplicativos da web usam duas abordagens para layouts de página. A escolha de um ou outro depende dos objetivos do aplicativo. Estamos falando de contêineres de largura fixa e contêineres flexíveis que preenchem a tela inteira.


Aplicação web

▍ Recipientes de largura fixa

Prefiro usar contêineres de largura fixa, pois é mais fácil para o usuário focar em uma área limitada, pois, para visualizar o que está localizado nessa área, você não precisa de movimentos oculares desnecessários. Além disso, os aplicativos que usam contêineres fixos geralmente parecem mais organizados e os novos usuários desses aplicativos são mais fáceis de navegar. Deve-se notar que tais aplicações, devido à largura limitada dos recipientes, são mais difíceis de projetar.

Aqui estão alguns exemplos de aplicativos da Web que usam contêineres fixos: Twitter , Buffer , DigitalOcean , Netlify , GitHub .

Containers Recipientes flexíveis

Contêineres flexíveis são ótimos para projetos da Web, como bate-papos, aplicativos de planilhas ou com grandes quantidades de informações apresentadas em outros formatos. Normalmente, ao projetar esses aplicativos, é importante colocar o máximo de dados possível na tela. A desvantagem dos contêineres flexíveis é o fato de que a grande quantidade de dados exibidos na tela pode confundir o usuário.

Exemplos de aplicativos que usam contêineres flexíveis incluem Slack , Intercom , Hotjar , Google Sheets , Trello , Spotify .

▍ Conclusões e recomendações

• A escolha dos contêineres certos para o conteúdo do aplicativo é importante por dois motivos. Primeiro, o layout da página dependerá disso. Em segundo lugar, para mudar para contêineres de outros tipos, será necessário um trabalho sério. Cada projeto é único e requer soluções únicas; portanto, não tenha medo de experimentar.
• Esforce-se pela simplicidade.
• Use fontes cujas etiquetas sejam fáceis de ler.
• Ao produzir grandes quantidades de dados, use uma hierarquia visual.
• Analise as decisões dos concorrentes e, encontrando falhas, não permita que elas apareçam no seu projeto ou, com base nessa análise, equipe o seu projeto com oportunidades que se tornarão suas vantagens competitivas.

Sumário

Um desenvolvedor que está acostumado a trabalhar com código em vez de imagens visuais pode achar difícil mudar para a onda do design. Mas design é algo que você pode aprender bastante. Lembre-se de que o design pode ser uma vantagem competitiva do seu projeto; portanto, preste atenção e crie sites atraentes, convenientes e agradáveis ​​de se trabalhar.

Caros leitores! Você acha que um programador solitário pode obter bons resultados de design?