Com os dispositivos móveis assumindo a forma como as pessoas experimentam a Web, o design responsivo é mais importante do que nunca. Mas o design responsivo não cria apenas uma experiência móvel consistente.

 

Ele também afeta a maneira como projetamos todas as telas, incentivando layouts e experiências mais simplificadas. Se você está executando uma reformulação responsiva ou começando do zero, esses truques promover as características essenciais do design responsivo ajudarão você ao longo do caminho.

 

1. Preste atenção na sua navegação

 

 

A adoção de web design responsivo teve um enorme impacto na navegação do site. Basta dar uma olhada em qualquer site de 2007. É quase impossível não se sentir oprimido pela montanha de categorias empilhadas na navegação do lado esquerdo.

 

Como você está projetando para telas menores, seu design precisa funcionar dentro dessas limitações. Tente simplificar suas escolhas de navegação e use ícones emparelhados com texto, links na página, menus recolhíveis e menus suspensos para levar as pessoas aonde elas precisam ir.

 

Lembre-se de que as opções de navegação ocultas são aproximadamente metade das que podem ser descobertas e as que são mais aparentes, além de aumentar o tempo para concluir as tarefas. Portanto, faça o melhor possível para tornar o acesso às páginas principais visualmente óbvio.

 

Em geral, você só terá espaço para quatro ou cinco links principais. Isso afeta não apenas a navegação do seu site, mas também toda a sua estratégia de conteúdo e arquitetura de informações. Você quer ter certeza de que esses quatro ou cinco links representam os lugares que as pessoas vão querer ir ou devem ir e que essas páginas oferecem oportunidades para as pessoas se aprofundarem no conteúdo.

 

2. Crie um design para os dedos

 

 

Seus botões de chamada para ação devem aparecer na página, tanto em cores quanto em estilo. O tamanho e a forma dos seus botões são tão importantes quanto a cor deles. Geralmente, os elementos circulares e retangulares são os mais reconhecidos como botões.

 

Basta pensar no que você pressiona no elevador ou no teclado do smartphone. Ser muito criativo com a forma dos seus botões pode confundir um usuário, então fique com formas familiares.

 

O tamanho também pode fazer uma enorme diferença, especialmente para pessoas com deficiências. Todos já nos encontramos lutando para acertar o link certo em uma página da web para celular. Portanto, poupe seu público-alvo das dificuldades e verifique se seus botões são super amigáveis ​​aos dedos.

 

Para garantir a usabilidade para pessoas com deficiências, dê aos botões uma altura de 36 dp e dê aos alvos tocáveis ​​uma altura mínima de 48 dp (1 dp é igual a 1 px).

 

Você também deve garantir que os botões e links de texto tenham um espaço generoso em torno deles, novamente para evitar erros de cliques. Você quer ter certeza de que seus botões são objetos claramente interativos. Sombras, gradientes e outras adições estilísticas de empréstimo de dimensão podem ajudar a garantir que as pessoas possam clicar neles.

 

Comece seu design com o celular em mente. Um bom design é o menor design possível. Este é um dos pilares do design responsivo. Se a organização do seu conteúdo, navegação e gráficos fizerem sentido em um smartphone, eles também ficarão claros em um tablet ou em um dispositivo maior, como uma área de trabalho.

 

Essa é uma das vantagens do design responsivo. Quando um design precisa funcionar em vários tamanhos de tela, ele ajuda a reduzir a funcionalidade e o conteúdo apenas ao necessário. É mais do que apenas uma prática, é uma filosofia que melhora a experiência do usuário.

 

3. Planeje sua organização de conteúdo antes de projetar

 

Criar um site sem um forte senso de suas estruturas de conteúdo é como escolher um quadro sofisticado antes de você criar uma pintura. Você precisa ter uma ideia de como o conteúdo será organizado para que você possa pensar no maior quadro.

 

Conteúdo e design florescem quando desenvolvidos em conjunto. A organização de conteúdo é mais do que apenas copiar e colar blocos de texto para ver onde eles se encaixam em uma página. Seu conteúdo é a história que você está tentando dizer ao seu público.

 

Faça uma lista priorizando as mensagens que você deseja transmitir. Descubra como essas ideias fluem de uma para a outra. Projete em torno do conteúdo e baseie sua navegação em sua organização. Um caminho linear manterá alguém envolvido com o seu site e levará a melhores taxas de conversão.

 

4. Use apenas as palavras que você precisa

 

Os desktops permitem mais texto. Isso nem sempre é bom. Com dispositivos móveis, você deve trabalhar dentro dos limites de telas menores. Isso significa escrever de maneira mais econômica, garantindo que cada palavra ajude a levar sua história adiante.

 

Se você estiver escrevendo de um site para computador, talvez precise de alguma edição. Consolide a cópia, use marcadores e outros dispositivos estruturais e apare as arestas sempre que puder.

 

5. A tipografia é ainda mais importante em telas menores

 

Certifique-se de dimensionar o tamanho da fonte, a altura da linha e a largura para melhor se adequar aos diferentes tamanhos de tela. Você não precisa consultar um oftalmologista para saber que tipografias minúsculas são difíceis de ler em qualquer tela. Usar tamanhos de fonte maiores pode melhorar significativamente a legibilidade.

 

Portanto, use algo na faixa de 16 px para a cópia do corpo e ajuste para cima ou para baixo, dependendo do design da fonte. Certifique-se de usar uma fonte altamente legível, especialmente para pedaços vitais de texto, como rótulos de navegação. Ninguém quer ver uma fonte de script no seu menu.

 

O espaçamento também é um fator em telas menores. Certifique-se de que a altura da sua linha esteja definida para um valor apropriado. Muita altura deixará seu texto flutuando no espaço e pouca altura deixará suas palavras empilhadas como panquecas. Geralmente algo na faixa de 1,25 a 1,5 funcionará bem, mas os tipos de letra individuais irão variar..

 

Durante todo o processo de design, verifique seu texto em diferentes dispositivos para ver como a altura da linha afetará a apresentação do texto. Quando você está projetando com dispositivos móveis em mente, lembre-se de que uma fonte enorme pode empurrar o conteúdo importante para mais abaixo em uma página.

 

Portanto, considere todos os outros métodos de design em seu kit de ferramentas para adicionar drama: variar os pesos das fontes, usar maiúsculas ou minúsculas ou usar cores para diferenciar seções de conteúdo de outros elementos da página.

 

6. Abrace o espaço negativo

 

 

Existe uma linha fina ao criar um design responsivo. Sim, você quer ter uma abordagem minimalista de conteúdo e navegação, mas também não quer deixar nada de vital ir embora. Use o espaço negativo (espaço em branco) para criar interrupções no seu design e destacar as áreas de conteúdo que você não quer que ninguém perca.

 

7. Crie e teste protótipos responsivos

 

É importante saber como a aparência do seu design será traduzida para diferentes telas. Também é crucial saber como funcionará.

 

Os protótipos estáticos farão parte do caminho, mas, eventualmente, você precisará de um protótipo funcional para ajudar você a entender como o site funcionará e será utilizado pelo público. Certifique-se de testar seu protótipo nos dispositivos reais para garantir que o site funcione sem problemas. Isso poupará seu tempo e seu trabalho.

 

8. Atenha-se ao tempo com imagens responsivas

 

Mantenha seu site em movimento com imagens que são carregadas rapidamente em todos os dispositivos. Um dos problemas que as pessoas enfrentam com o design responsivo é que, embora as imagens sejam dimensionadas visualmente em dispositivos menores, elas ainda têm 3 MB de tamanho e lentidão no carregamento para um rastreamento.

 

Imagens responsivas oferecem uma solução poderosa e eficaz se você souber como reduzir seus pesos e utilizá-las ao longo da criação.

 

O design responsivo mudou a web para melhor

 

A popularidade de dispositivos móveis e tablets mudou a forma como projetamos websites e navegamos por eles. Os enormes espaços que os designs de área de trabalho possuem muitas vezes levam a muitos gráficos e conteúdos desnecessários que prejudicam a mensagem principal de um site.

 

O design responsivo nos permite eliminar aquilo de que não precisamos, para que todos possam obter o que precisam, muito mais rapidamente.

 

8 características essenciais para um design responsivo
Avalie esse post
Você pode também gostar