Texto cinzento minúsculo sobre um fundo carregado. Os olhos cansam-se antes de acabares a primeira frase. É por isso que o design mobile-first importa para a tua marca. Quando o esquema e a cor lutam contra a mensagem, as pessoas vão-se embora sem te dizer porquê.
O design mobile-first começa pelo esquema do smartphone e só depois alarga as funcionalidades para ecrãs maiores. Este capítulo explica o que isso quer dizer em linguagem simples, porque afeta o teu website e o teu marketing, e como aplicar sem te perderes em jargão. Vais ver também como tornar um website adaptado ao telemóvel se encaixa no mesmo quadro. Vamos passo a passo.
O que é design mobile-first
O design mobile-first começa pelo esquema do smartphone e só depois alarga as funcionalidades para ecrãs maiores.
Na prática, o design mobile-first aparece nos cabeçalhos do teu website, nas páginas de serviços, nos gráficos para redes sociais e nos materiais impressos. Quando lhe dás o nome certo, consegues dar instruções aos designers mais depressa e rever rascunhos com confiança.
Ideias relacionadas, como tornar um website adaptado ao telemóvel, ligam-se diretamente a este tema. Tem-nas presentes enquanto lês o resto deste módulo.
Evita ideias só para computador que se estragam nos telemóveis.
Porque é que o design mobile-first importa para o teu negócio?
Os clientes avaliam a credibilidade pelo esquema antes de lerem cada palavra. Uma estrutura visual clara reduz o atrito e torna as ofertas mais fáceis de perceber.
Os motores de pesquisa dão muito peso à experiência no telemóvel quando ordenam as páginas.
Desenha a navegação e o conteúdo principal para o alcance do polegar antes de acrescentares widgets laterais.
Se queres ver como isto se liga a temas vizinhos, lê a seguir redesenho de website e cabeçalho do website.
Lista prática para usares hoje
Desenha a navegação e o conteúdo principal para o alcance do polegar antes de acrescentares widgets laterais.
Quando reveres uma página, pergunta se o design mobile-first se nota logo no primeiro scroll no telemóvel. Se não, reordena as secções antes de polires os detalhes.
Guarda capturas de ecrã antes e depois das alterações, para perceberes o que fez diferença no design mobile-first do teu site.
Partilha esta lista com quem atualiza o teu site, para que tornar um website adaptado ao telemóvel se mantenha consistente nas páginas novas.
Escolhe uma métrica para acompanhar este mês, como o tempo na página ou os formulários iniciados, para as alterações de design ficarem ligadas aos resultados do negócio e não só ao gosto.
Como este tema se liga ao resto da tua marca
As escolhas visuais raramente ficam numa só página. Os motores de pesquisa dão muito peso à experiência no telemóvel quando ordenam as páginas.
As tuas publicações nas redes sociais, os emails e os materiais impressos devem repetir a mesma hierarquia, as mesmas cores e as mesmas regras de tipografia que usas na web.
Quando o visual da marca se desvia, os clientes sentem uma pequena dissonância, mesmo que não a saibam explicar.
Usa o design do rodapé do website para comparar ideias com um capítulo relacionado deste módulo.
Evita ideias só para computador que se estragam nos telemóveis.
Perguntas comuns que as pessoas esquecem
Termos secundários como tornar um website adaptado ao telemóvel e o que é mobile-first indexing ajudam-te a procurar exemplos mais profundos e a comparar o teu trabalho com os padrões comuns.
Os motores de pesquisa dão muito peso à experiência no telemóvel quando ordenam as páginas.
Escreve uma alteração, com antes e depois, que vais testar numa página real esta semana. Pequenas edições medidas valem mais do que planos vagos.
Ensinar à tua equipa um vocabulário comum sobre design mobile-first reduz as rondas de revisão com designers e agências.
Ferramentas que facilitam as atualizações visuais
Não precisas de código à medida para melhorar muitos problemas de esquema e de estilo. Um editor visual permite ajustar espaçamento, cores e tipografia enquanto vês a pré-visualização em telemóvel e computador.
O WEMASY inclui um criador de websites com edição visual, para publicares alterações sem esperares por um programador em cada pequeno ajuste. Abre o criador de websites quando estiveres pronto para aplicar o que aprendeste.
Quando publicares atualizações, revê o redesenho de website e o cabeçalho do website para o módulo continuar ligado na tua cabeça.
Já tens uma lente de trabalho para o design mobile-first. Usa-a quando reveres o teu site, aprovares materiais de marketing ou deres instruções a um designer. Continua com cabeçalho do website e design do rodapé do website para manteres o ritmo neste módulo.
Perguntas frequentes
Quanto tempo leva a melhorar o design mobile-first?
A maioria das pequenas empresas vê páginas mais claras em poucas sessões focadas, depois de aplicar o essencial deste capítulo. Começa pela página inicial e depois leva as mesmas regras para as páginas de serviços e de contacto.
Precisas de um designer para trabalhar o design mobile-first?
Um designer ajuda em redesenhos de marca complexos, mas muitas correções ligadas ao design mobile-first podem ser feitas por ti, quando sabes o que procurar. Usa o redesenho de website junto com este capítulo para teres mais orientação.
O WEMASY pode ajudar-te a aplicar o design mobile-first no teu website?
O WEMASY inclui um editor visual no criador de websites, para ajustares esquema, cores e tipografia sem código. Abre o criador de websites para atualizares modelos e veres as alterações no telemóvel.
Qual é o erro mais comum com o design mobile-first?
As pessoas tentam corrigir tudo de uma vez em vez de uma página de cada vez. Escolhe uma só prioridade, como a legibilidade ou o contraste, e depois consulta o cabeçalho do website para a melhoria seguinte.
Como se liga o design mobile-first ao SEO?
Uma hierarquia visual clara e um texto legível mantêm os visitantes mais tempo na página, o que reforça os sinais de envolvimento que os motores de pesquisa observam. Junta as correções de design a uma boa estrutura de conteúdo para teres os melhores resultados.
O que deves aprender a seguir depois do design mobile-first?
Continua com redesenho de website e cabeçalho do website neste livro, para construíres um sistema visual completo para a tua marca online.