WebDesign Responsive

WebDesign Responsive

Com a chegada da internet e com a variedade de ecrãs, o uso de sistema de grelha teve uma maior presença na web. O sistema de grelha já era utilizado nos sites, mas só mais recentemente é que a utilização de sistemas como o Bootstrap começaram a ser mais utilizados.

 

Neste artigo vamos falar sobre a importância da construção de uma página responsiva e quais as suas principais características.

w39_WebResponsivo

The grid

Depois da Segunda Guerra Mundial, vários designers gráficos, como Max Bill e Josef Müller-Brockmann, começaram a questionar a relevância da página convencional. Influenciados pelas ideias modernistas começaram por criar um sistema flexível capaz de ajudar a obter uma coerência na organização da página. O trabalho de Müller-Brockmann, Grid systems in graphic design, ajudou a divulgar o uso da grelha primeiro na Europa e depois na América do Norte.

 

Uma Homepage não tem a mesma função que uma página de About me ou mesmo de uma página de um Blog.
(tradução livre de Luton, 2014)

 

O uso da grelha traz muitas vantagens na fase de desenvolvimento dos projetos. Os conteúdos das páginas podem ser organizados em blocos, permitindo uma reorganização coordenada pelo designer para diferentes formatos de ecrã, sem perder a coerência de leitura e a consistência gráfica. O uso deste sistema flexível permite otimizar a eficiência do processo de design, tornando o projeto equilibrado e coeso ao longo de todas as páginas do website, programa ou aplicação.

 

Nesta variação existem duas categorias para a criação de uma página web, o Design Responsivo e o Design Adaptativo. A diferença entre estas duas variações está na forma como é solucionado o “problema” da variação de ecrãs.

 

No Design Responsivo, o conteúdo irá seguir de maneira fluida o tamanho dos ecrãs, utilizando o reposicionamento dos “blocos” criados, e é fundamental para quem cria/programa a página web, definir quais alterações e onde as alterações irão acontecer usando uma das características da visualização do conteúdo (exibição, largura, altura). Na teoria este processo torna-se mais complexo pois exige um conhecimento mais pormenorizado e um conhecimento das regras mais aprofundado. No fundo é aconselhado usar apenas na criação de novos designer.

 

No Design Adaptativo a compreensão e a maneira de aplicar é mais lógica e mais “fácil”, é tão simples como, se temos A apresentamos A1, se passarmos para B temos A2. Ou seja, para cada tamanho teremos um designer próprio da mesma página.

Geralmente no design adaptativo, é importante criarmos pelo menos de 3 a 6 larguras de ecrã, para que o conteúdo seja apresentado da melhor maneira para o utilizador, daí a importância das páginas responsiva.

Design mobile-frist

Há alguns anos o processo de criação das páginas web deveriam ser criadas com o principal propósito de serem apresentadas apenas em ecrãs de computadores e isso fazia todo o sentido, pois os acessos eram todos feito num limite de tamanho de ecrã, mas o mundo evoluiu assim como toda a tecnologia onde as páginas web são visitadas. Desde 2014 que o principal dispositivo de acesso às web página é o telemóvel, por isso é que os atuais criadores de website são encorajados a “desenhar” primeiro para uns ecrãs mais pequenos, pois o principal objetivo é dar a melhor experiencias aos utilizadores. A construção de páginas seguindo a ordem de mobile-frist segue um processo fácil sendo desenhado o conteúdo essencial para versões mobile e depois acrescentando mais conteúdo consoante o ecrã fosse crescendo.

Tipografia responsiva

Os designers tentam sempre atenuar os problemas com a tipografia nesta nova era de vários dispositivos com ecrãs. Os defensores do design responsivo planearam e desenvolveram páginas web onde o conteúdo se ajusta ao ecrã do dispositivo. Existem duas formas de abordar esta questão: a primeira chamada “liquid design” em que a tipografia apenas se ajusta ao tamanho ecrã; a segunda, “adaptive design” que vai se ajustando com a medida do ecrã com tamanhos diferentes, previamente escolhidos na parte da programação do mesmo, usando os chamados “@media query”.

Experiência do usuário

O principal objetivo do web design responsivo é oferecer ao utilizador a melhor experiência possível na navegação dos sites desenhados. Muitas das vezes o que acontece é quase a criação de duas páginas para o mesmo website pois a experiência que existe no mobile nunca será igual a uma experiência da navegação num site no desktop, pois a maneira como é feita a interação no site é diferente.

A construção de um web design tem muitas outras questões, por isso deve ser um trabalho para uma equipa completa, e nós na BOOMER temos pessoas com o know how e experiencia de anos que ajudam a encontrar as melhores soluções para dar aos seus clientes a melhor experiencia.

Falar no Whatsapp
Vamos conversar? 💬
Olá! 👋
Podemos ajudar?