Abordando o processo de design do site a partir do navegador

“Um brinde aos loucos, aos desajustados, aos rebeldes, aos encrenqueiros, aos pinos redondos nos buracos quadrados… aqueles que veem as coisas de forma diferente – eles não gostam de regras… Você pode citá-los, discordar deles, glorificar ou vilipendiá-los, mas a única coisa que você não pode fazer é ignorá-los porque eles mudam as coisas…” — campanha Think Different da Apple, Steve Jobs, 1997.

Na maioria das vezes, os designers ainda estão criando maquetes estáticas de telas usando ferramentas de design tradicionais durante o processo de design do site. Mas alguns designers estão dando um salto gigante e ignorando-os, indo direto para o código, construindo e ajustando designs no navegador e testando seus designs como eles apareceriam para as pessoas em tempo real. São eles os loucos, os desajustados, os rebeldes?

Normalmente, o processo tradicional de desenvolvimento de sites envolve muitas fases, incluindo planejamento, estratégia de conteúdo, design, wireframing, prototipagem, teste, desenvolvimento, publicação e assim por diante. Mas durante a fase de design, poderia haver outra maneira de produzir designs de sites responsivos “perfeitos em pixels” e ignorar completamente as ferramentas de design?

Com a ascensão do design responsivo e a variedade de dispositivos em uso (celulares, tablets, laptops, desktops, relógios), é muito mais difícil manter tudo consistente - e com mais partes móveis a serem levadas em consideração, a abordagem para projetar sites e interfaces está mudando.

Embora não seja necessário que um designer se torne um programador especialista, uma solução é que os designers comecem a trabalhar diretamente com o código que impulsiona um site. Designers que podem manipular código com apenas um pouco de HTML e CSS serão um grande trunfo para qualquer equipe e terão uma enorme vantagem geral.

Por quê? Ao envolver um projeto de design de site responsivo com todas as suas complexidades, os designers normalmente não têm tempo para criar um design estático de um componente (digamos, um cabeçalho ou rodapé) em 10 resoluções e janelas de visualização diferentes. Mesmo projetando apenas para os dispositivos mais populares, eles ainda terão que considerar 4-5 telas com diferentes proporções, densidade de tela e dimensões de tela. Nenhuma tarefa pequena para dizer o mínimo.

Resolvendo desafios de design de sites com caneta e papel primeiro

Vamos explorar uma abordagem diferente de design de site e processo de planejamento.

A primeira fase começa com um questionário ao cliente perguntando sobre os objetivos gerais do projeto de uma perspectiva de negócios, o público-alvo, estratégias de conversão, várias expectativas de desempenho e assim por diante. Isso é feito antes que a fase de projeto real seja iniciada para entender melhor as necessidades do cliente e o projeto como um todo e para ser mais eficiente no futuro.

O próximo passo é escrever um esboço do projeto para confirmar que o resumo foi entendido. Isso é útil ao trabalhar em projetos em um nicho onde você pode não ter muita experiência ou conhecimento. Chame isso de especificação funcional, mas menos técnica.

Isso ajuda na definição de terminologias, palavras-chave e processos. Dependendo da complexidade do projeto, é uma boa ideia fazer vários cenários e fluxos de usuários – normalmente, o fluxo de integração, pesquisa e navegação em um site ou um fluxo de “adicionar ao carrinho” e checkout se for um site de comércio eletrônico.

Wireframe e Prototipagem

A prototipagem é a próxima fase no processo de design do site. Construir wireframes rápidos para falar sobre o layout da página, as funcionalidades e como as páginas do site serão exibidas em diferentes dispositivos é um bom começo. Não leva muito tempo para construir dezenas de wireframes de diferentes modelos e componentes. Um protótipo de site simples pode ser criado a partir deles e, dependendo da complexidade do projeto, ferramentas de prototipagem como InVision, Adobe XD, Balsamiq, Moqups ou Axure podem ser usadas.

Mood Boards e Inventário de Interfaces

O próximo passo é montar um quadro de humor: uma coleção de coisas que o designer, o cliente e outras partes interessadas podem gostar em outros sites – layouts, aparência, cores ou fontes, ícones, imagens e assim por diante. Isso ajudará a definir a aparência geral do site. Se o cliente tiver um guia de estilo de branding, ele deve ser considerado e incorporado ao novo design do site.

Uma vez que vários artefatos são aprovados – wireframes, protótipos, mockups, mood boards, etc. – é uma boa ideia fazer um inventário de interface.

Um inventário de interface é uma coleção abrangente dos bits e peças que compõem sua interface.

Brad Frost

Se estiver fazendo web design responsivo do zero, comece escrevendo todos os componentes e elementos dos quais o projeto será construído. Uma lista não ordenada servirá muito bem e é definitivamente melhor do que nada. Por exemplo, tabelas, botões, imagens, tipografia, mídia, formulários, navegação, componentes, etc.

Projetando no navegador

“Projetar no navegador” é um termo que se tornou popular com o surgimento do web design responsivo. A fim de minimizar as horas gastas em programas de design como o Sketch, os designers foram instados a mover a fase de design para o navegador e utilizar CSS para layout e estilo. Essa abordagem de design de site prova ser mais eficiente, pois elimina muitas etapas.

Concentrando-se no modelo HTML e testando ideias de design “no navegador” com CSS, o tempo geralmente gasto criando modelos estáticos de páginas em outras ferramentas de design, como o Sketch, pode ser economizado. É uma boa ideia para os designers obterem um bom editor de código e criarem um bom método de atualização do navegador para que possam ver as alterações em tempo real. Sublime Text e Codekit, por exemplo, são uma ótima combinação.

HTML e CSS, estruturados como são, forçam você a pensar em padrões e mantê-lo sob controle. É mais fácil pensar em modularidade ao construir componentes HTML que podem ser facilmente copiados, duplicados e preenchidos com dados dinâmicos, mantendo a mesma estrutura. Se você deseja criar uma modificação específica, deve direcionar explicitamente esse elemento ou adicionar outra classe CSS.

Quando você estilizar títulos, a menos que sejam substituídos, eles serão consistentes em todo o site. O mesmo vale para outros elementos. Esse tipo de pensamento força você a padronizar, agrupar elementos comuns, reutilizar elementos já estilizados o máximo possível e, o mais importante, manter tudo modular.

Com uma única declaração CSS, você pode alterar o preenchimento dos botões para melhores alvos de toque e testar diretamente em um celular, tablet e desktop. Isso não é feito facilmente no Photoshop ou no Sketch porque outros elementos não estão cientes uns dos outros no layout e você precisa reorganizar os objetos toda vez que redimensionar algo.

Quer experimentar um esquema de cores de cabeçalho diferente? Ao trabalhar com apenas algumas linhas de código CSS, as alterações são visíveis em todos os modelos HTML instantaneamente, em todos os dispositivos e telas. Esse tipo de flexibilidade não pode ser emulado facilmente quando você tem 20 modelos estáticos. Claro, você pode usar “símbolos” no Sketch ou no Adobe XD para componentes reutilizáveis, mas eles não são tão versáteis quanto o CSS.

Nesta fase, várias decisões técnicas precisarão ser tomadas. As perguntas que precisam ser respondidas são:

• Você vai usar um pré-processador CSS? (recomendado)
• Que tipo de grade responsiva você usará para o layout?
• As fontes que você deseja usar estão disponíveis para compra? O cliente tem orçamento para fontes web premium ou você voltará a usar fontes web gratuitas disponíveis?
• Você usará ícones multicoloridos ou de cor única? O tamanho varia em todo o site? A seguir, você está confiando em ícones personalizados ou em um pacote de ícones já existente? Quais tamanhos seus ícones precisarão acomodar?

O problema com fontes e web design responsivo

Escolher fontes para um projeto de web design responsivo pode ser um desafio. Há muitas possibilidades e tantas armadilhas. Como o design será usado no navegador, este é o melhor lugar para experimentá-los. A legibilidade da fonte pode variar com base no tamanho, peso, cores e renderização, portanto, ao experimentar as fontes diretamente no navegador, os designers podem garantir que as coisas pareçam corretas e que as expectativas desejadas sejam atendidas.

Existem muitas ferramentas online para selecionar e testar fontes e experimentar combinações de tipos. No Typetester e no Typecast, diferentes fontes de vários serviços e fundições podem ser encontradas e testadas. Ao trabalhar com um serviço de assinatura de fontes específico, como Typekit ou Fonts.com, os designers podem gerar fontes e testar diretamente em seus modelos de página. Gerar um pacote Typekit com novas fontes é simples e rápido, e você pode ver facilmente como fontes específicas afetarão o desempenho das páginas da web.

Ícones que se encaixam no estilo da marca

Se estiver desenhando ícones personalizados, o tamanho, a grade e o estilo precisarão ser definidos. Trabalhando no Illustrator, cada prancheta representaria um ícone, por exemplo. Os ícones podem ser facilmente exportados do Illustrator como SVG ou PNG, que posteriormente podem ser transformados em uma fonte de ícone com serviços como o Icomoon. Recomenda-se usar ícones vetoriais (SVG) porque os vetores são independentes da resolução, portanto, não há preocupações sobre como eles são exibidos em telas de alta definição (Retina).

Um guia de estilo e CSS para manter o processo de design do site sob controle

Mesmo se projetarmos no navegador, com dezenas de modelos e componentes, poderíamos perder a noção de onde algo é usado e de que maneira. É uma boa ideia construir um guia de estilo de todos os componentes como um repositório central. Modelos de página específicos serão criados a partir deste guia de estilo, combinando componentes e elementos de interface do usuário em páginas da web.

Os componentes da interface do usuário podem ser coisas como paginação, listagem de produtos, galeria de imagens, janelas modais, elementos de formulário etc., e são usados ​​como blocos de construção para modelos. Manter tudo em um só lugar é realmente útil quando é hora de testar a construção de um componente de interface do usuário específico.

Com CSS, é uma prática recomendada separar os estilos de componentes em arquivos separados. Por exemplo, o estilo de paginação estará em _pagination.scss , elementos de formulário em _form.scss , e todos esses arquivos serão incluídos em um único arquivo SCSS com outros arquivos (variáveis, mixin, etc.).

Embora style.scss possa ser composto de dezenas de “pequenos arquivos”, quando várias pessoas estão trabalhando no mesmo projeto, é mais fácil acompanhar as alterações (usando controle de origem ou não) se tudo estiver separado em partes menores. É importante continuar mantendo o guia de estilo depois que o projeto de design do site estiver em produção, pois a equipe precisará acompanhar todos os componentes do site.

Usando folhas de estilo – CSS modular

Do ponto de vista do desenvolvimento, existem muitas abordagens para escrever CSS modular. Os mais conhecidos são SMACSS (Scalable and Modular Architecture for CSS), BEM (Block, Element, Modifier) ​​e OOCSS (Object Oriented CSS). Há muito o que aprender, mesmo que você acabe desenvolvendo sua própria abordagem. Neste ponto, você deve ter uma boa coleção de componentes de interface do usuário e páginas da Web, que permitirão criar facilmente novas páginas da Web. Você pode copiar e colar elementos do guia de estilo e reorganizá-los conforme necessário.

Como tudo é modular, você não precisa se preocupar com design e consistência de código; mas não se esqueça de que, se você ajustar um componente de interface do usuário em todo o sistema, precisará atualizar o guia de estilo com as alterações (ou adicionar o novo componente). Para manter tudo organizado, é melhor usar algum tipo de abordagem de modelagem/automação para trabalhar em páginas da web como Gulp ou Grunt.

Qual é o próximo? Projetando no navegador

Agora você tem um repositório central de componentes de interface do usuário, cada elemento documentado e páginas da Web criadas a partir desses componentes. A partir deste ponto, é mais do que provável que os designers não precisem mais abrir suas ferramentas de design favoritas, pois a maior parte do “design” será feita diretamente no código e visualizada no navegador.

Não tem certeza de como uma mudança específica afetará o design? Agora você pode visualizar seu design em diferentes dispositivos e navegadores simultaneamente para ver como uma fonte mudou em um título ou alterar o tamanho e a cor de um botão afetará o design.

Ao usar fontes da Web personalizadas, como adicionar mais pesos de fonte afetará o desempenho de carregamento da página? Podemos testar o desempenho da página da Web em andamento usando serviços como WebPageTest e tomar decisões informadas sobre os resultados reais. Definitivamente, não podemos fazer isso no Photoshop ou no Sketch.

Trabalhar com HTML e CSS e trabalhar no navegador pode não ser para todos os designers durante o processo de design do site. Mas se os designers realmente se preocupam com a aparência de seu trabalho em vários dispositivos e tamanhos de tela, eles precisam garantir que seja sempre perfeito. Algo que parece incrível como uma maquete de design estático pode parecer menos do que desejável quando visualizado em um navegador da Web em um dispositivo móvel. Cabe a designers experientes construir e testar web designs em um ambiente onde todos os vejam... no navegador.

Leia mais no Blog Toptal Design:

• Design Responsivo - Melhores Práticas e Considerações
• Como criar uma página de destino eficaz
• O melhor guia para design de sites de comércio eletrônico
• Os Fundamentos do Redesign de Site - Um Estudo de Caso
• Forças Motrizes do Design – Um Estudo de Caso de Redesign de Site