10 anos de design web: o que mudou?

Este conteúdo faz parte do ficheiro histórico do Sitelicon. Conserva as informações disponíveis na data de publicação; as condições, ferramentas e requisitos das plataformas podem ter mudado.

Contexto

Sitelicon, pai de Contrabase e deste blog, está de aniversário. Cumple 10 anos, e queremos fazer balanço do que aprendemos e melhorado neste tempo. Em 2005, o design web tinha chegado a certa maturidade e já não era o horror dos inícios, mas ainda assim muitas coisas continuaram a evoluir até chegar ao dia de hoje e nós fomos adaptando-nos a isso.

http://www.contrabase.com/wp-content/uploads/2015/06/tamanopantalla.jpg

TAMENSÃO DE PANTALLA

1024px vs multipantalla

2005  Só nos ligamos do computador, com um ecrã que provavelmente teria 1024 px de largura ou semelhante, e todos os sites eram desenhados para se encaixar nesse tamanho padrão.

2015  Agora podemos nos conectar à internet de uma grande variedade de dispositivos grandes ou pequenos: desde a tele de casa até ao telemóvel que levamos no bolso. Até mais recentemente, desde as aplicações dos novos relógios de pulseira inteligentes. Provavelmente esta grande mudança é o que mais influenciou a hora de projetar.

http://www.contrabase.com/wp-content/uploads/2015/06/fijoresponsive.jpg

ESTRUTURA

Largura fixa vs design responsive

2005  Quase todos os sites eram desenhados com uma largura fixa. Também existia o design fluido, que permitia que o conteúdo se expandisse segundo a largura do ecrã, mas era algo minoritário e não válido para qualquer desenho.

2015  à proliferação de diferentes dispositivos e tamanhos o que foi imposto é o diseño responsive, que adapta ou recoloca o conteúdo da web para garantir que você sempre seja bem visto de qualquer ecrã.

http://www.contrabase.com/wp-content/uploads/2015/06/webclasicaapp.jpg

APLICAÇÕES

Web clássica vs app

2005  Nós nos ligaríamos à internet para visitar páginas web.

2015  Além de navegar pelos sites tradicionais, com a generalização do mundo móvel (smartphones, tablets…), também realizamos tarefas na internet através de apps. Estas são concebidas de maneira diferente de uma web e marcaram novas normas na hora de projetar.

http://www.contrabase.com/wp-content/uploads/2015/06/animações.jpg

ANIMAÇÕES

Fash vs HTML5 & CSS3, jQuery

2005  Flash era grande recurso para os designers. Ele estava a tentar introduzir na web animações visualmente muito atraentes, conteúdo interativo e outros efeitos. No entanto, isso era fundamentalmente ornamental e apresentava muitos problemas: flash não era visualizado em qualquer dispositivo, e o conteúdo neste formato não era indexado pelos motores de pesquisa.

2015  HTML5, CSS3 e jQuery abrem novas possibilidades. Não só mudou a tecnologia, muito mais amigável para os motores de pesquisa e para melhorar a experiência de utilizador. O estilo das animações mudou, já não buscam o efectismo sem mais, mas sim apoiar a usabilidade e melhorar de forma sutil e prática a experiência de utilizador.

http://www.contrabase.com/wp-content/uploads/2015/06/esteticaux.jpg

ENFOQUE

Estética vs UX

2005  Nesta época as possibilidades de design estavam sendo ampliadas enormemente. Cada vez havia menos limites no uso de cores, tipografias, imagens, etc. e crescia o interesse por criar sites visualmente profissionais e estéticos.

2015  Hoje temos mais recursos técnicos de design do que nunca e a preocupação de criar sites atraentes continua. No entanto, a usabilidade e a experiência do utilizador são a prioridade máxima no processo de design.

http://www.contrabase.com/wp-content/uploads/2015/06/introhome.gif

PÁGINA DE INÍCIO

Página intro vs home direta

2005  Nem todos os sites eram assim, mas estavam de moda as páginas intro. Eram uma espécie de apresentação prévia, muitas vezes em flash, que devias “saltar” se você queria ir diretamente ao conteúdo da web.

2015  Desenhar bem a página inicial é vital, tanto do lado do utilizador como dos motores de pesquisa. Isto significa que a home deve ser atraente, mas também conter a informação principal.

http://www.contrabase.com/wp-content/uploads/2015/06/cortasparallax.gif

SCROLL

Páginas curtas vs parallax

2005  Em geral, as páginas demasiado longas eram evitadas que precisavam de fazer muito ScrollO utilizador podia ser incomodado ou aburrir se tinha que descer demasiado para encontrar informações que queria, e de cara a motores de pesquisa, as páginas infinitas também não eram ótimas. Isto fazia com que às vezes se “apelotonara” um pouco o conteúdo quando este tinha muito volume.

2015  Com a variedade de tamanhos de ecrã, o pânico pelo scroll quase se deu a volta. Agora é quase um recurso necessário, especialmente para navegar comodamente do telemóvel. Até tem dado pé à criatividade, como os efeitos parallax que proliferaram ultimamente.

http://www.contrabase.com/wp-content/uploads/2015/06/iconosimagenfonte.jpg

ICONOS

Imagem vs fonte

2005  Quando queríamos incluir ícones na web, normalmente eram imagens png ou jpg.

2015  Agora podemos inserir os ícones como uma tipografia. Você é escalonável e não é pixel, você pode adicionar estilos através de CSS e reduzir os pedidos ao servidor.

http://www.contrabase.com/wp-content/uploads/2015/06/imagenesornametocontenido.jpg

IMÁGENES

Ornamento vs conteúdo

2005  Nesta época já foram usadas fotos e gráficos de boa qualidade para acompanhar os textos ou apoiar a identidade da web. Cada vez há menos restrições na maquetação, mas as imagens ainda são um elemento complementar ou ornamental.

2015  As imagens têm um papel total e várias opções para o seu uso: fotaças para ecrã completa, gráficos animados, gifs modernizados, galerias de todo tipo… As imagens fornecem valor.

http://www.contrabase.com/wp-content/uploads/2015/06/video.gif

VIDEO

Reprodutor inserido vs integração total

2005  O Nace YouTube e o poder de inserir vídeos em sites e blogs supõe toda uma revolução. No início, o leitor de vídeo foi baseado em Flash.

2015  O vídeo adquire destaque na web. Supõe um tipo de conteúdo muito valioso e também é atrativo para o utilizador. A tecnologia e o estilo dos leitores evoluiu enormemente e até mesmo podem ser inseridos vídeos como elemento de design, como fundo de uma web, por exemplo.

BALANCE

A Internet evolui e cada vez mais rápido, quais serão os próximos desafios do design web? Parece que os Aditores Vão marcar as próximas tendências. Relógios e óculos inteligentes, realidade aumentada, maior interatividade… O que vocês vão? Vamos aprender!