Reimaginando o processo de web design
Primeiro celular
Durante anos, o Mobile First tem sido o grito de guerra dos web designers com visão de futuro.
É um processo de design que diz que devemos começar com layouts simples para telas pequenas e, em seguida, adicionar complexidade a essa base básica à medida que mais espaço na tela se torna disponível. À medida que as vendas de dispositivos móveis ultrapassam os PCs, e sabendo que o uso móvel passou oficialmente do desktop , o Mobile First está se tornando a norma. A menos que você tenha alguns dados e números realmente fortes contra isso, pensar em Mobile First faz mais sentido.
É mais fácil adicionar complexidade a um design à medida que mais espaço de tela se torna disponível, em vez de reduzir sua complexidade para telas menores. Como alguém que divide seu tempo entre design e desenvolvimento, encontro-me preenchendo muitas lacunas para os clientes. Página incompleta? Eu tenho esse.
O design para celular não foi concluído? Vou preencher as lacunas. Não me lembro da última vez que precisei preencher as lacunas de um ponto de interrupção da área de trabalho. De alguma forma, os layouts da área de trabalho sempre parecem ser simulados primeiro; os layouts móveis geralmente parecem uma versão grosseiramente empilhada do primeiro.
Vamos parar de usar “Mobile First” como um chavão. Vamos realmente iniciar o processo de design para telas pequenas.
Um tijolo de cada vez
O design é um processo cumulativo, com cada nova rodada de progresso baseada nas vitórias da anterior.
Planejar primeiro para a tela pequena faz sentido no design. Eu gosto de adicionar tijolos enquanto estou construindo algo, não derrubá-los. Uma das melhores analogias que encontrei para esse tipo de processo de design é o design atômico , uma metodologia que visualiza as coisas por meio de combinações cada vez mais complexas.
Fica mais ou menos assim:
- Decidir sobre algumas combinações de tipografia, tamanhos e cores
- Combine essas opções em algo pequeno, como campos de formulário e rótulos
- Monte os campos em algo maior como um formulário de contato
- Coloque o formulário de contato em uma página “Fale Conosco”, que é composta de muitas outras pequenas peças
- Repetir
O tijolo humilde. Um objeto pequeno, simples e contundente. Monte seus tijolos com cuidado e as possibilidades são ilimitadas.
Não só é mais rápido e fácil construir com tijolos do que construir do zero, como o processo se presta perfeitamente do celular ao tablet e ao desktop. Pense no que você (e seu usuário) realmente precisa em cada etapa e só adicione mais blocos quando fizer sentido.
Pense além dos pontos de interrupção
Ao discutir processos de web design responsivos, gastamos muita energia suando nossos pontos de interrupção de media query e projetando para dispositivos atuais, quando uma das principais causas de instabilidade é o conteúdo do site.
Quando possível, projete com conteúdo real. Trabalhar em estreita colaboração com sua equipe de conteúdo/marketing ajuda a evitar surpresas no final do jogo. Mesmo assim, desde o início do processo de design até o lançamento (e provavelmente depois) o conteúdo mudará.
Manchetes curtas crescem. Troca de fotos. Seções inteiras pegam o machado.
Um sistema de design cuidadosamente construído pode rolar com os socos. Traduzir o documento do Word disperso da equipe de marketing em uma nova página brilhante no site não deve machucar sua cabeça. Embora algumas áreas obviamente exijam (e mereçam) atenção extra, minha regra geral é esta: não pense demais.
Muitas vezes, um guia de estilo de design inteligente e compacto é tudo o que é necessário para manter as coisas na marca.
Cair na real
A prototipagem de design é ótima, mas normalmente ocorre em computadores desktop pelas mesmas pessoas que criam o produto. Obtenha o melhor feedback compartilhando um design em dispositivos reais com pessoas reais.
Até mesmo wireframes podem ser testados melhor em um dispositivo real Testar um design responsivo deve ser um processo amplo e variado. Carregue-o em um smartphone real. Peça a colegas de trabalho e amigos que não são de design para dar uma olhada nas coisas.
Veja os designs em um iPad (porque os tablets devem superar as vendas de PCs em breve).