“Isto é para os loucos, os desajustados, os rebeldes, os encrenqueiros, os pinos redondos nos buracos quadrados ... aqueles que vêem as coisas de forma diferente - eles não gostam de regras ... Você pode citá-los, discordar deles, glorificar ou difama-los, mas a única coisa que você não pode fazer é ignorá-los porque eles mudam as coisas ... ” - da Apple Pense diferente campanha, 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 os contornando, indo direto para codificar, construir e ajustar designs no navegador e testar seus designs como apareceriam para as pessoas em tempo real. Eles são os loucos, os desajustados, os rebeldes?

Normalmente, o processo de desenvolvimento de site tradicional 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 site responsivos “perfeitos em pixels” e contornar completamente as ferramentas de design?

Com a ascensão de 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 codificador especialista, uma solução é os designers começarem a trabalhar diretamente com o código que conduz um site. Designers que sabem decifrar códigos com apenas um pouco de HTML e CSS, eles se tornarã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, designers normalmente não tem 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 se projetando apenas para os dispositivos mais populares, eles ainda terão que considerar 4-5 telas com diferentes proporções, densidade e dimensões da tela. Não é uma 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ários expectativas de desempenho , e assim por diante. Isso é feito antes que a fase de design real seja lançada para entender melhor as necessidades do cliente e o projeto em geral e para ser mais eficiente no futuro.

A próxima etapa é escrever um esboço do projeto para confirmar que o brief foi entendido. Isso é útil ao trabalhar em projetos em um nicho onde você pode não ter muita experiência ou conhecimento. Chame-a de especificação funcional - mas menos técnica.

Isso ajuda a definir terminologias, palavras-chave e processos. Dependendo da complexidade do projeto, é uma boa ideia fazer vários cenários e fluxos de usuário - 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.

Wireframing e prototipagem

A prototipagem é a próxima fase no processo de design do site. Construindo rápido wireframes 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 simples de site pode ser criado a partir deles e, dependendo da complexidade do projeto, ferramentas de prototipagem como InVision , Adobe XD , Balsamiq , Moqups , ou Axure pode ser usado.

Quadro de humor e inventário de interface

A próxima etapa é 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.

Assim que vários artefatos forem aprovados - wireframes, protótipos, maquetes, painéis de humor, etc. - é uma boa ideia fazer um inventário de interface .

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

Brad Frost

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

Projetando no navegador

“Projetando 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 Esboço , os designers foram incentivados 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 várias etapas.

Concentrando-se na maquete de HTML e testando as idéias de design “no navegador” com CSS, o tempo normalmente gasto na criação de maquetes estáticas de páginas em outras ferramentas de design, como Sketch, pode ser salvo. É uma boa ideia para designers para obter um bom editor de código e criar um bom método de atualização do navegador para que possam ver as mudanças 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 sobre padrões e o manterão sob controle. É mais fácil pensar sobre 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ê estiliza 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 tanto quanto possível e, o mais importante, manter tudo modular.

Com uma única declaração CSS, você pode alterar o preenchimento dos botões para obter melhores alvos de toque e testar diretamente em um celular , tábua e desktop. Isso não é feito facilmente no Photoshop ou Sketch, porque outros elementos não têm conhecimento uns dos outros no layout e você tem que reorganizar os objetos cada vez que redimensiona algo.

Quer experimentar um esquema de cores de cabeçalho diferente? Trabalhando 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. Concedido, você pode usar “símbolos” no Sketch ou Adobe XD para componentes reutilizáveis, mas eles não são tão versáteis quanto CSS.

Nesta fase, várias decisões técnicas precisarão ser feitas. 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 deseja usar estão disponíveis para compra? O cliente tem orçamento para fontes premium da web ou você voltará a usar as fontes disponíveis fontes da web grátis ?
• Você usará ícones multicoloridos ou de uma única cor? O tamanho varia em todo o site? A seguir, você está contando com ícones desenhados de forma personalizada ou com um pacote de ícones já existente? Que tamanhos seus ícones precisam acomodar?

O problema com fontes e Web design responsivo

Escolher fontes para um projeto de web design responsivo pode ser desafiador. Existem muitas possibilidades e tantas armadilhas. Como o design será usado no navegador, este é o melhor lugar para testá-los. A legibilidade da fonte pode variar com base no tamanho, peso, cores e renderização, então, experimentando as fontes diretamente no navegador, designers pode garantir que as coisas estejam corretas e que as expectativas desejadas sejam atendidas.

Existem muitas ferramentas online para selecionar e testar fontes e experimentar combinações de fontes. Em Typetester e Typecast fontes diferentes de vários serviços e fundições podem ser encontradas e testadas. Ao trabalhar com um serviço de assinatura de fonte específico, como Azoto ou Fonts.com , os designers podem gerar fontes e testar seus modelos de página diretamente. 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 combinam com o estilo da marca

Se desenho personalizado ícones , o tamanho, a grade e o estilo precisarão ser definidos. Trabalhando em Ilustrador , cada prancheta representaria um ícone, por exemplo. Os ícones podem ser facilmente exportados do Illustrator como SVG ou PNG, que mais tarde podem ser transformados em uma fonte de ícone com serviços como Icomoon . Recomenda-se o uso de í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, podemos perder o controle 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 construídos a partir deste guia de estilo, combinando componentes e elementos da IU em páginas da web.

Os componentes da IU podem ser coisas como paginação, lista 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 é muito útil quando é hora de testar a construção de um componente de IU 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, os 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 pode ser composto por dezenas de 'pequenos arquivos', quando várias pessoas estão trabalhando no mesmo projeto, é mais fácil acompanhar as alterações (usando o controle de origem ou não) se tudo estiver separado em pedaços menores. É importante continuar a manter 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. Mais conhecidos são SMACSS (Arquitetura Escalável e Modular para CSS), BEM (Bloco, Elemento, Modificador) e OOCSS (CSS orientado a objeto). Há muito a 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, o que permitirá que você crie 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 o design e a consistência do código; mas não se esqueça de que se você ajustar um componente de IU 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 or Grunt .

Qual é o próximo? Projetando no navegador

Agora você tem um repositório central de componentes de IU, cada elemento documentado e páginas da web construídas a partir desses componentes. Deste ponto em diante, é mais do que provável que designers não precisarão 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 espessuras 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 Sketch.

Trabalhar com HTML e CSS e no navegador pode não ser para todos os designers durante o processo de design de um 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 ter certeza de que está perfeito o tempo todo. 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. Caberia aos designers experientes construir e testar designs da web em um ambiente onde todos os vissem ... no navegador.

• • •

Leituras adicionais no Blog de design do ApeeScape:

• Design Responsivo - Melhores Práticas e Considerações
• Como projetar uma página de destino eficaz
• O guia definitivo para design de sites de comércio eletrônico
• Os fundamentos da reformulação do site - um estudo de caso
• Design’s Driving Forces - Um estudo de caso de redesenho de website

Compreender o básico

Qual é o processo de construção de um site?

1. Escolha um host da web 2. Registre um nome de domínio 3. Planeje o site (tipo, navegação, conteúdo) 4. Projete e construa o site 5. Publique o site 6. Promova o site 7. Mantenha o site.

Quanto tempo leva para criar um site?

Em termos gerais, como depende do escopo, um site típico (50-100 páginas) pode levar aproximadamente 14 semanas (descoberta 3 semanas, design 6 semanas, dev 5 semanas). Um site de design personalizado simples de 10 a 15 páginas levará aproximadamente de 4 a 6 semanas.

Como faço para começar a projetar um site?

Antes de entrar na fase de design: 1. considere e pesquise (por exemplo, público-alvo, direção criativa, metas, orçamento, cronograma). 2. O conteúdo impulsiona o design, então faça um brainstorm. 3. Confirme os requisitos técnicos. 4. Desenvolva um esboço. 5. Crie wireframes para determinar o posicionamento dos elementos.

Como você projeta um site?

Descoberta: 1. Pesquisa (por exemplo, público-alvo, direção criativa, metas, orçamento, cronograma). 2. Brainstorm. 3. Confirme os requisitos técnicos. 4. Desenvolva um esboço. Design: 1. Crie wireframes para determinar o layout 2. Desenvolva tratamentos visuais (por exemplo, moodboard, maquetes do Photoshop, HTML) 3. Revisões criativas com as partes interessadas.

Como você estrutura um site?

Uma boa estrutura de site significa melhor UX. Uma estrutura de site convencional é crítica para SEO e usabilidade. Normalmente em forma de pirâmide, deve ter uma navegação clara e manter o usuário em mente: 1. Página inicial 2. Seções 3. Subcategorias 4. Páginas e postagens individuais.

Como você planeja um layout para um site?

1. Escolha um tipo de layout levando em consideração a gama de dispositivos usados ​​para visualizar o site 2. Defina a estrutura usando um mapa do site 3. Identifique o fluxo de navegação 4. Crie wireframes para identificar a hierarquia.