10 páginas de aterragem responsivas que deixam cair o queixo
'Responsivo' é o mais recente movimento no desenvolvimento da web - e um que é muito mal necessário. Todos os dias, o número de dispositivos, plataformas e navegadores usados para acessar a Internet cresce. E enquanto a maioria dos usuários ainda acessa a web a partir de plataformas tradicionais, a demanda por sites fluidos e adaptáveis é mais forte do que nunca.
Muitos designers estão levando a sério esta mudança e criando algumas peças espetaculares que se desenvolvem em ambientes móveis, tablets e desktop.
Os sites a seguir fundem a beleza com técnicas de web design responsivas e realmente mostram o que pode ser alcançado com um pouco de inovação. Então pegue um pouco de pipoca e um bloco de notas, você vai querer prestar atenção.
StephenCaver.com
Quando você abre esse site na sua área de trabalho, é imediatamente cativante. O negrito, preto, justificado cabeçalho contrasta lindamente com a qualidade quase aquarela do fundo do deserto de Mojave. Quando este site se adapta ao tamanho do celular, a alteração é significativa e o site ainda parece ótimo.
FoodSense.is
Com seu layout amplo, as linhas limpas e a estrutura simples esse site é um exemplo fantástico de design web minimalista. Quando visualizado em um tablet ou celular, ele se ajusta sem comprometer a composição ou o fluxo.
Warface.co.uk
O uso da cor é impressionante e a colocação inovadora das figuras 3D no primeiro plano do site realmente envolve o espectador. O site é único e empolgante, e nenhum impacto é perdido em dispositivos móveis.
DanielVane.com
Novamente aqui o designer deixa seu trabalho falar por si. A página de destino é bonito em sua simplicidade de tamanho completo e isso se traduz perfeitamente em dispositivos móveis, deixando uma ilustração particularmente atraente que inclui um logotipo sutil.
SasquatchFestival.com
Esse site é divertido e divertido e único entre os outros sites desta lista. Eles deixam a simplicidade limpa para se divertir com cores, imagens e ícones de uma forma que ainda consegue entregar em grande estilo. Isso pode ser difícil de fazer em um espaço pequeno, mas os projetistas do Sasquatch gerenciam sem esforço.
GravitateDesign.com
O uso da forma em esse site se destaca imediatamente. Evitando o uso de bordas e caixas de conteúdo, eles conseguiram criar um site que mostra seu trabalho no seu melhor.
VisualSupply.co
Similarmente ao Warspace, são as imagens que realmente funcionam esse site . É perfeitamente estruturado e fica lindo em todos os dispositivos.
StudioMds.co
As cores escuras podem às vezes ser negligenciadas no web design, mas Studio Mds melhorar o seu conteúdo com a sua decisão ousada. O layout se ajusta para caber em um tamanho de tela menor, perdendo apenas links supérfluos.
ForefathersGroup.com
Esse site tem uma ótima sensação vintage e utiliza textura, imagens e fontes para criar isso. Ela desliza lindamente (mas é uma pena perder esse macaco).
MapBox.com
O esquema de cores e uso de fotos dão Caixa de mapeamento um espaço limpo para mostrar seu produto. Novamente, a simplicidade vence o design complexo ou exigente, e é exatamente por isso que funciona bem em uma tela menor.
Coisas a ter em conta enquanto desenha
Então, agora que você olhou para alguns sites responsivos estelares, você provavelmente está ansioso para começar a projetar seus próprios sites. Mas antes de fugir, aqui estão algumas coisas para lembrar.
Fotos
Um obstáculo para o design responsivo é como os dispositivos exibem fotos. Um MacBook Pro com uma tela de retina vai renderizar uma imagem com uma resolução muito maior do que um telefone celular, o que muitas vezes pode criar problemas. Uma maneira de superar essa questão é fazer o upload de cópias de alta e baixa resolução de suas fotos. Usando CSS, você pode determinar qual imagem é carregada com base na resolução de tela do dispositivo. Se você estiver usando fotos de estoque, certifique-se de fazer alarde para a opção rez mais alta.
Determinando pontos de interrupção
Muitas vezes, os designs responsivos são criados em torno dos chamados "pontos de interrupção" - ou a resolução na qual o layout é alterado - com base principalmente nos tamanhos comuns de tela do dispositivo. O problema com essa abordagem, no entanto, é que ela não leva em consideração o tamanho real da tela. Não há mais tamanho "universal". Portanto, em vez de pré-determinar pontos de interrupção em 360px (móvel), 768px (tablet) e 1024px (área de trabalho), é melhor deixar seu design falar por si. Comece com um layout finalizado e, em seguida, redimensione sua janela até que o design seja interrompido - torne esse um dos seus pontos de interrupção e continue. Você verá que seu site flui muito mais suave.
Você já se deparou com uma fantástica página de destino responsiva? Você mesmo criou um? Deixe-nos saber nos comentários.