Práticas recomendadas e dicas de web design responsivo

Como o Google continua a priorizar sites otimizados para dispositivos móveis, ter um site responsivo para sua empresa está se tornando cada vez mais importante. Quando seu site for responsivo, ele ficará ótimo em todos os dispositivos (celular, tablet, desktop, etc.)

Embora possa parecer assustador revisar seu site existente, o design de site responsivo não precisa ser difícil. Abaixo estão algumas dicas úteis e práticas recomendadas que ajudarão você a produzir um produto de site excelente e utilizável com facilidade e pouco barulho.

Defina seu estilo

Criando uma paleta de cores

Esteja você trabalhando com uma paleta de cores de marca predefinida ou criando a sua própria, lembre-se de incluir cores contrastantes suficientes para estabelecer uma hierarquia visual bem definida. Adicionar vários tons de cores neutras lhe dará muita flexibilidade em seus designs.

Pense primeiro no celular

Pense primeiro em como seus elementos da web serão exibidos em pequenos dispositivos móveis e, em seguida, aplique-os a tamanhos de janela de visualização maiores. Por exemplo, seus botões são grandes o suficiente para serem pressionados com o dedo e espaçados o suficiente de outros elementos clicáveis?

Crie seu guia de estilo após seus layouts iniciais, não antes

Algumas pessoas gostam de criar um guia de estilo e definir seus estilos de elementos da web antes de iniciar um protótipo ou maquete de alta fidelidade. Uma vez que os elementos são posicionados na página, no entanto, e são visualizados um em relação ao outro, o design geral da página pode ser perdido. Crie alguns modelos para começar, estabeleça seus estilos e, em seguida, componha as páginas restantes, se necessário.

Consistente não precisa significar chato

A heurística de usabilidade é importante, mas também se destaca dos bilhões de outros sites na web. Não tenha medo de tentar algo diferente, ser mais memorável e ajudar a marca do seu site a se destacar da multidão. Seu site pode ser criativo e também muito útil. Um ótimo designer de interface do usuário ou diretor de arte digital deve ser capaz de equilibrar esses dois elementos.

Alguns elementos que você pode querer estilizar e padronizar incluem:

• Níveis de manchete: H1, H2, H3…
• Imagens principais ou de herói
• Navegação Primária
• Navegação secundária
• Cópia do corpo
• Listas numeradas e com marcadores
• Chamadas ou emblemas
• Tratamento para imagens de conteúdo
• Estilo de citação
• Widgets (rotadores, incorporações sociais, calendários etc.)
• Botões grandes de call-to-action
• Botões secundários ou links de texto
• Elementos do formulário
• Notas de rodapé e tipo de mouse legal
• Compartilhamento Social

Modelo

Copiar blocos

Brinque com espaçamento entre letras (rastreamento), margens e espaçamento entre linhas (entrelinha) para ajudar a redefinir sua hierarquia. Quanto mais apertado o espaçamento, mais pesado e claustrofóbico o texto parecerá.

Tenha em mente que longos blocos de texto que percorrem todo o caminho do lado esquerdo para o direito da tela da área de trabalho podem ser muito difíceis para os olhos. Use um bloco de cópia mais estreito quando possível. No entanto, muito espaçamento pode criar uma sensação árida e dispersa.

Não tenha medo de quebrá-lo

Se você tiver uma página da Web com muito conteúdo, divida o conteúdo um pouco com citações, textos explicativos, imagens, listas estilizadas, tabelas etc. Você também pode incorporar acordeões, menus suspensos e carrosséis para manter a página interessante e informativa .

Sim, as pessoas rolam para baixo

Não caia na velha armadilha de pensar que tudo em sua página deve aparecer acima da dobra digital. Mantenha o conteúdo mais importante ou atraente próximo ao topo da página para levar o usuário mais para baixo. Pode ser um título criativo, mas descritivo, uma frase inicial atraente ou uma imagem poderosa.

RELACIONADO

Principais tendências de design de 2020

Tipo de dimensionamento

De um modo geral, mantenha um tamanho de fonte de 14 a 18 pixels para um site responsivo. Em geral, use fontes sans ou serif simples para os blocos maiores de cópia e mantenha-os em um fundo claro com uma cor de tipo de letra moderadamente contrastante. O título principal pode ser maior, mas lembre-se de que pode precisar ser estilizado um pouco menor depois que um ponto de interrupção de tamanho móvel for encontrado.

Cor do tipo

O truque com a cor do tipo é que ele deve ter contraste suficiente do fundo para que você possa vê-lo facilmente, mas o que muitos designers não sabem é que às vezes o tipo pode ter muito contraste e é duro para os olhos, fazendo com que pareça vibrar quando visualizado. Tente usar o tipo mais claro em um fundo mais escuro com moderação e apenas para blocos de texto menores.

Tipo Peso

Estilos de fonte mais pesados ​​podem ser difíceis de ler em tamanhos menores e podem fazer a página parecer escura e pesada em tamanhos maiores. Os estilos de fonte finos e claros ficam ótimos em telas do tipo retina e retina, mas podem parecer fracos em muitas telas de resolução padrão.

Navegação

Hambúrgueres!

O Navicon é o ícone que também se parece com um pequeno sanduíche ou hambúrguer com três linhas de empilhamento. Se você acha que sua demografia geral de usuários não é tão experiente com tecnologias on-line, sempre inclua a palavra “menu” acima ou ao lado do Navicon . Estudos de usuários até o momento mostram que um usuário está mais apto a navegar em seu site se você incluir a palavra Menu ou Navegar ao lado ou acima do Navicon.

Inclua um botão 'Voltar ao topo' na parte inferior da página de rolagem longa

Pesquisas nos dizem que muitos usuários de dispositivos móveis não sabem como pular facilmente para o topo de uma página da Web em seu navegador da Web para dispositivos móveis. Para resolver isso, forneça um botão 'voltar ao topo' na parte inferior da sua página da web. Isso permitirá que um usuário acesse facilmente a navegação do site se não estiver espelhado no rodapé.

Outra opção é criar uma navegação fixa. Esta é uma barra de navegação superior do site que sempre gruda na parte superior da tela, não importa o quanto você desça a página. Se você optar por seguir esse caminho, certifique-se de que sua navegação fixa não tenha mais de 100px de altura ou poderá ficar sem espaço para o conteúdo da sua página em tamanhos de janela de visualização menores.

Glossário do projeto:

Chamar
um pequeno pedaço de texto definido em tratamento mais forte do que o resto da página e destinado a atrair a atenção.

Copiar bloco
um parágrafo agrupado ou uma série de parágrafos de texto.

A dobra (digital)
usado no design do site (junto com “ acima da rolagem”) para se referir à parte da página da Web que é visível sem rolagem. Como os tamanhos de tela variam drasticamente, não há uma definição definida para o número de pixels que definem a dobra .

Serifa
uma leve projeção finalizando um traço de uma letra em certos tipos de letra.

Sem serifa
uma fonte sem serifa , sem serifa , gótica, sem serifa ou simplesmente sem serifa é aquela que não possui os pequenos recursos de projeção chamados “ serifas ” no final dos traços. O termo vem da palavra francesa sans , que significa “sem” e “ serif ” da palavra holandesa schreef que significa “linha”.

Tipo (tipográfico) Peso
escuridão relativa dos caracteres de um tipo de fonte resultante da espessura relativa dos traços, expressa como clara, negrito, negrito extra, etc.

Do utilizador
uma pessoa que usa ou opera algo, especialmente um computador, dispositivo ou outras máquinas.

Janela de exibição
uma área emoldurada em uma tela de exibição para visualização de informações.

Espaço em branco
em layout de página, ilustração e escultura, o espaço em branco é muitas vezes referido como espaço negativo. É a parte de uma página não marcada: margens, medianizes e espaço entre colunas, linhas de texto, gráficos, figuras ou objetos desenhados ou representados.