A Criativosfera será fechada dia 01 de Maio de 2017. Obrigado a todos!

Aula 02 – Layout na web

Curso: Web Design Básico

Ok, que infernos vem a ser o layout? Layout - ou, a versão abrasileirada que evito usar: "leiaute" - é o design da página web. Ele é composto de todos os elementos que são mostrados quando você acessa um site - o arranjo, as formas, as cores, tipografias, etc. Se você está lendo esta aula no site, por exemplo, o layout é tudo aquilo que aparece no seu navegador: o logo, o menu, o cabeçalho, o conteúdo e o rodapé. Layout é tudo aquilo que você vê e que o web designer criou.

Resolução de tela

Antes de querermos falar sobre tamanhos de layout, precisamos falar rapidamente sobre o que é resolução de tela.

Resolução de tela é o número de pixels (o menor ponto possível) distintos que podem ser exibidos no espaço visível do monitor. A resolução é geralmente mostrada como um valor de largura por um valor de altura, com a unidade em pixels. Por exemplo, "1920 x 1080" significa que a largura é de 1.920 pixels e a altura é de 1.080 pixels.

Um monitor pode ter resoluções diferentes, independente do tamanho físico dele: um monitor de 27 polegadas pode ter uma resolução baixa (por exemplo, 1024 x 768 pixels) ou alta (1920 x 1080 pixels). Ou seja, no exemplo de resolução baixa, existiria 1024 pixels a cada linha horizontal da tela e 1920 pontos caso fosse em alta resolução. A resolução máxima de cada tela é definida pelo monitor e pela placa de vídeo do computador do usuário.

Quanto maior o valor da resolução, menor o tamanho dos pixels e maior a qualidade da imagem mostrada.

Tipos de layout

A web pode ser dividida em quatro tipos de layout: o fixo, fluido, adaptivo e responsivo. Cada um possui características e formas de desenvolvimento diferente, além de preocupações específicas durante a etapa de concepção e deficiências que devem ser levadas em consideração. Vamos analisar todos.

Layout fixo

Como diz o nome, o layout fixo tem um tamanho definido pelo web designer. Esse tamanho se mantem independente do dispositivo usado para acessar ele - seja por um computador de mesa normal ou um dispositivo móvel, como smartphone ou tablet. O tamanho mais importante no layout fixo é a largura da página, pois temos um costume maior de aceitar rolar a página de cima para baixo do que da esquerda para a direita - tanto é que sites com navegação horizontal não são populares, por serem alienígenas ao nosso modo normal de surfar a internet.

Um layout fixo tem a vantagem de ter a mesma aparência independente da resolução de tela do usuário: um site com 960 pixels de largura vai ter essa mesma largura não importando se o usuário possui uma alta ou baixa resolução de tela. Além disto, a largura das linhas não será alterada independente do tamanho do navegador ou resolução do usuário, facilitando na leitura.

Desenvolver com largura fixa é mais fácil, pois existe menos preocupação em adaptar mudanças para resoluções diversas e dispositivos diversos e é rápido de ser montado.

Mas nem tudo são flores no layout fixo. Layouts fixos também podem causar problemas, especialmente em monitores com resoluções muito baixas ou muito altas.

Em resoluções baixas onde a largura da tela é menor que a do site, a página pode acabar aparecendo com uma navegação horizontal, dificultando a leitura. Já em resoluções grandes, o site pode parecer ter muito espaço vazio nas laterais resultando em um excesso de espaço em branco e a necessidade de rolamento vertical maior do que o necessário. Sem contar que ele não lida bem com alterações do tamanho de fontes por parte dos usuários (usando as teclas CTRL + e CTRL -) a partir de certo ponto, quebrando o layout.

Na esquerda, resolução baixa gerando navegação horizontal. Na direita, excesso de espaço nas laterais.

Na esquerda, resolução baixa gerando navegação horizontal. Na direita, excesso de espaço nas laterais.

Layout fluido

Ao contrário do layout fixo, o fluido (ou “layout líquido”) visa fazer o conteúdo ocupar toda a tela do navegador, independente da resolução da tela, permitindo ao designer mostrar mais conteúdo em monitores maiores mas ainda se manter visível em telas menores. O layout líquido também fornece uma consistência em larguras relativas, permitindo que a página responda de forma mais dinâmica quando o usuário alterar o tamanho das fontes. O objetivo deste tipo de layout é de manter o mesmo peso espacial em todos os elementos.

Pense no layout fluido como um líquido em um recipiente; ele ocupa todo o espaço, independente da forma. Por sorte, (ainda) não temos telas circulares e a grande maioria é retangular então ainda é possível prever aproximadamente como o site vai parecer em monitores diferentes.

Layout líquido que aparenta problemas ao diminuir muito (veja a barra horizontal na última imagem). Fonte: No-fun)

Layout líquido que aparenta problemas ao diminuir muito (veja a barra horizontal na última imagem). Fonte: No-fun)

Quem trabalha com layouts líquidos prefere trabalhar com medidas em porcentagem, que variam de acordo com o tamanho útil do navegador do usuário. Isto requer um pouco mais de paciência e testes constantes para acertar os detalhes.

Como no layout fixo, o layout fluido também tem suas desvantagens: além de ser mais difícil de controlar (por ter tamanhos variáveis dependendo de cada tela), colunas de texto podem ficar largas demais dificultando uma leitura confortável quando a resolução é muito grande e/ou o usuário usa o navegador em tela cheia.

Além disto, é possível que haja problemas com elementos de largura fixa (como imagens) dentro de uma coluna líquida. Se a coluna ficar menor que a imagem, alguns navegadores podem aumentar a largura da mesma desconsiderando as limitações impostas pelo designer (que pode gerar quebra de layout). Por outro lado, outros navegadores podem sobrepor o texto com a imagem para tentar manter as porcentagens corretas.

Desvantagem de um layout liquido

Desvantagem de um layout liquido

Layouts adaptivo

Um site com esse tipo de layout tem a facilidade de alterar de acordo com cada resolução nova. É similar a ter várias páginas estáticas para dispositivos diferentes, mas com apenas uma página de conteúdo. Isto é feito através do CSS (que vamos tratar numa aula futura deste curso) que é uma página com as regras de design independente da página do conteúdo. No adaptivo, é necessário ter várias páginas de CSS para resoluções diferentes.

A vantagem deste é que a experiência do usuário pode ser adaptada de acordo com cada dispositivo ou resolução de tela sem ter que mexer no conteúdo.

Site visualizado no desktop (esq) e visualizado no smartphone (dir).

Site visualizado no desktop (esq) e visualizado no smartphone (dir).

Mas, obviamente existem pontos negativos: o tempo necessário para criar um site com layout adaptivo é muito maior, pois ele precisa ser testado manualmente em todos os dispositivos possíveis - o que gera um outro ponto negativo: é muito difícil manter controle da resolução de tela de todos os dispositivos existentes, desenvolver para cada um então nem se fala.

Web design responsivo

Essa é a nova onda do momento: o “responsive web design”, ou web design responsivo. Ele é o método atual preferido pelos web designers por facilitar na hora de visualizar em dispositivos variados. A página é reajustada quando a resolução é reduzida, mas quando a tela se torna pequena demais para que o conteúdo seja mostrado corretamente, ele arranja o conteúdo para caber num layout mais adequado. Isto quer dizer que o design não é adaptado para aparelhos específicos, mas o layout é adaptado para o conteúdo.

Ou seja, o design é otimizado para todos os dispositivos. Com a abordagem do web design responsivo, todas as imagens, fontes e qualquer outro elemento HTML serão redimensionados de acordo, aproveitando ao máximo o espaço útil da tela.

Ele é diferente do layout adaptivo pois não é necessário programar o site para funcionar em cada resolução existente e é também diferente do layout liquido por levar em conta todos os objetos de uma página (e não só o texto).

Por melhor que o web design responsivo seja nos dias de hoje, ainda assim existem as desvantagens: um preparo muito maior é necessário durante o processo inicial de design pois o layout precisa ser desenhado pensando em como ele vai agir em resoluções pequenas e grandes. Isto quer dizer que é mais demorado desenvolver o layout assim, mas compensa ao ter a melhor experiência de usuário nos dispositivos variados.

Se você acessar um site responsivo, verá que ele reage diferente de acordo com a resolução que você tem. Acesse um dos exemplos abaixo e redimensione a tela, aumentando ou diminuindo para ter ideia como funciona.

040204

 

040205

Um exemplo legal para ter ideia como cada sistema funciona é este site. Acesse, mude os tipos de layout e redimensione a página para ver como ele reage.

Qual usar?

Este conteúdo é exclusivo para os Alunos Criativosfera.

Nossos Alunos desfrutam de várias vantagens, como poder tirar dúvidas com o professor, download das aulas em formato de eBook, acesso a palestras exclusivas além de visualizar o conteúdo que está aqui. Além disto, os Alunos Criativosfera também ajudam a manter o site no ar, possibilitando disseminar o conhecimento.

Está esperando o que? Confira as vantagens e torne-se um Alunos Criativosfera hoje!

Leitura adicional

Este conteúdo é exclusivo para os Alunos Criativosfera.

Nossos Alunos desfrutam de várias vantagens, como poder tirar dúvidas com o professor, download das aulas em formato de eBook, acesso a palestras exclusivas além de visualizar o conteúdo que está aqui. Além disto, os Alunos Criativosfera também ajudam a manter o site no ar, possibilitando disseminar o conhecimento.

Está esperando o que? Confira as vantagens e torne-se um Alunos Criativosfera hoje!

Até a próxima aula!

« Anterior: Aula 01 – Introdução    |    Próxima: Aula 03 – Tipografia na web »

Professor

Canha - Fundador da Criativosfera, Sean "Canha" tem mais de 10 anos de experiência no mercado de design. Além de ser UX Designer, também é sócio do Choco La Design e fundador do antigo Design Blog. Você pode encontrá-lo no Facebook ou Twitter.

Alunos cadastrados podem tirar suas dúvidas com o professor. Cadastre-se hoje e aproveite as vantagens de ser um Aluno Criativosfera