Como manter o design responsivo envolvente
Web design responsivo é popular e absolutamente não é segredo. É o que os especialistas estão pedindo e para o que muitas marcas estão mudando. Não se trata apenas de criar um site pronto para dispositivos móveis, mas de tornar seu site visível para todos os tamanhos de navegador, seja por meio de computadores, tablets ou smartphones.
A parte complicada de projetar a capacidade de resposta é criar um site que pareça bom, grande e pequeno. Você tem que levar muito em consideração antes de abrir seu programa de design e ir trabalhar. É um passo extra que normalmente acaba valendo a pena no produto acabado. É muito evidente quando um designer não planeja a capacidade de resposta; sites tendem a parecer realmente nus e chatos.
É absolutamente imperativo que os designers mantenham sua criatividade em todos os sites responsivos. Com mais pessoas usando tablets e smartphones, você quer ter certeza de que todos podem visualizar seu site. Veja algumas dicas para ajudar você a se manter criativo e eficiente ao projetar para a Web responsiva.
1. Use excelente tipografia
Com sites responsivos, você deve considerar o que ficará bem em uma tela menor. Boa tipografia é um grampo de qualquer bom web design, mas é quase necessário em web design responsivo. À medida que os tamanhos de tela diminuem, a maioria dos elementos deve se transformar e encolher ou se mover também. Em primeiro lugar, sua tipografia deve ter essa capacidade.
Em segundo lugar, você deve usar cabeçalhos e tamanhos diferentes no texto. Agora, geralmente usamos cabeçalhos e cabeçalhos de tamanho muito grande para nossos designs de área de trabalho. Isso não precisa ser totalmente interrompido porque você está pensando em tamanhos menores. Apenas certificando-se de que você está usando um plugin, como FitText, para diminuir os tamanhos do seu texto. Isso ajuda.
Smith usa muitos tipos de letra diferentes para criar uma aparência muito interessante. Eles também variam os tamanhos dessas fontes em todo o site. O que é interessante no modo de área de trabalho é a forma como o texto e os parágrafos são alinhados em colunas diferentes. Quando a janela é reduzida, o texto recolhe em uma coluna. Felizmente, o texto permanece consistente, mantendo a mesma escala e estilo.
A revista Smashing tende a fazer o mesmo. Eles se livram do lado direito do design (os anúncios) inteiramente quando a janela é reduzida. No entanto, o texto fica dentro da janela e os estilos, cores e tamanhos permanecem consistentes.
2. Use ótimas imagens
As imagens, como a tipografia, são extremamente importantes em qualquer design de website. Também como tipografia, em designs responsivos, quando você visualiza um site em telas menores, suas imagens também devem aparecer menores ou reduzidas. Existem vários layouts e tamanhos de imagem diferentes que podem ser usados em um design responsivo. É importante prestar atenção nas imagens escolhidas e no modo como as utiliza, porque elas, sem dúvida, mudarão. À medida que as telas ficam maiores ou menores, as imagens mudam de forma e revelam ou cortam certas partes da imagem.
O ideal é garantir que suas imagens fotográficas grandes não tenham conteúdo gráfico nelas que possam ser cortadas quando as janelas mudarem de tamanho. Além disso, ao criar imagens gráficas, você precisa criar uma imagem que carregue rapidamente e seja visível em uma tela menor. É por isso que os designers adotaram o design plano. É apenas mais fácil.
No Pandiscio, primeiro você precisa observar como a imagem de cabeçalho maior fica em uma área de trabalho. Está cheio, se estende para os lados e é de alta qualidade. Ao reduzir o tamanho da janela, as imagens ficam menores, mudam de forma (de retangular para quadrada) e são cortadas. Eles encontraram imagens que parecem boas quando a tela muda de tamanho.
KinHR é um site que usa muitos elementos gráficos diferentes, bem como fotografias. Observe que, quando grandes e pequenos, as imagens do cabeçalho ficam menores, como no site do Pandiscio. No entanto, com os elementos gráficos do corpo, as imagens ficam menores, mas mantêm sua forma e não são cortadas.
3. Não durma na navegação
Ponto em branco, se as pessoas não têm idéia de como contornar o seu site, então elas simplesmente não o farão. A navegação é mais difícil quando lidamos com design responsivo porque estamos acostumados a criar navegação para projetos de paisagem. Agora, precisamos criar uma navegação que possa ser facilmente condensada para se adequar às dimensões de retrato.
Não é um problema enorme quando você tem um punhado de links. Você pode tornar seu menu menor ou condensado próximo ao topo ou pode criar um menu suspenso para os espectadores. De grande importância é como você lida com navegação com mais sites de conteúdo pesado.
Mashable tem toneladas de links porque eles têm toneladas de categorias e ainda mais artigos. Além disso, eles têm suas próprias páginas centradas na empresa que também precisam ser vinculadas. Mashable decide criar um menu pop-out no lado esquerdo da tela para navegadores menores.
Monocle tem dois níveis superiores de navegação extensiva para o seu site. Para navegadores menores, eles criaram um menu deslizante para o conteúdo máximo e acabaram de condensar o segundo nível de navegação.
4. Divirta-se a usar
Quando você clica em links online, você provavelmente tem que se sentar lá e esperar que as coisas sejam carregadas antes de você ver uma página. Nos telefones, é muito chato ter que encontrar com precisão o próximo botão para avançar para mais conteúdo. Coisas assim não são divertidas nem intuitivas.
Prestar atenção aos detalhes e tornar seu site mais intuitivo torna seu site mais compartilhável. Pense em como é usar um site em qualquer tamanho de navegador. Pense no que os sites devem fazer quando você solicita uma ação. Encontre essas coisas e corrija-as para que seu site seja fácil, divertido e intuitivo de usar. Também torna um pouco mais interessante!
Lama torna seu site mais interessante, prestando atenção às suas transições. Eles criam uma sensação muito elegante, permitindo que muitos de seus elementos deslizem para baixo e desapareçam, em vez de apenas se mover abruptamente e aparecer. Isso faz um mundo de diferença.
O Neue Yorke usa muito movimento quando vai do item do portfólio para o item. Mais uma vez, cria uma sensação de alta qualidade e mantém os espectadores interessados no que será revelado em breve.
5. Pense fora da caixa
Quando tudo mais falhar, seja criativo. Web design responsivo não deve ser uma restrição à maneira como criamos websites. Há sempre espaço para usar a criatividade, seja por meio de codificação ou de design.
A Enso criou um site que parece não ter chance de ser responsivo. Observe como eles mudaram o layout um pouco quando o tamanho fica menor, mas eles mantiveram sua marca e criatividade.
A TBWA tem um site que tem um ótimo design. Mas eles também têm ótimas imagens. E eles também têm ótima tipografia! Eles usaram tudo aqui para criar um design web responsivo muito original e interessante.
Conclusão
Manter sua criatividade em design responsivo ou em qualquer design da Web é tão simples quanto esboçar seu conceito e revisá-lo para manter seus objetivos. As coisas divertidas acontecem mais facilmente quando você começa a planejar como deseja que seu site funcione e funcione, em vez de começar com isso. O web design responsivo não precisa ser uma tarefa tão grande e onipotente que os designers têm medo. É bem simples! Mantenha todas as coisas anteriores que discutimos em mente e crie sites que estão fora do mundo! Boa sorte com o seu design web responsivo.
Quais dicas você compartilharia para manter o envolvimento de design responsivo? Você encontrou um design responsivo muito criativo? Deixe-nos saber nos comentários.