Laboratório Web 2013-2014 - Tendências no Desenho e Produção de Interfaces para Web

Laboratório Web CURSO DE LICENCIATURA EM AUDIOVISUAL E MULTIMÉDIA / 2013-2014 / 4º SEMESTRE

DOCENTE: RICARDO PEREIRA RODRIGUES / RPRODRIGUES@ESCS.IPL.PT

TENDÊNCIAS NO DESENHO E PRODUÇÃO DE INTERFACES PARA WEB

AGENDA

Tendências no Desenho e Produção de Interfaces para Web !• Responsive Web Design;• Flat Design; • Revisitar o Layout de jornais/revistas impressas;• HTML5 + CSS3;• Fullscreen;• Slideshows “XL”;• Scroll Vertical: novas interpretações;• Parallax Scrolling;• Tipografia;• Backgrounds com grandes imagens/ilustrações;• Minimalismo;• Ausência de cor ou monocromáticos.

TENDÊNCIAS

Pontos de partida: !Audiência• Para quem?!

Objectivos• O que é que isto proporciona à audiência?!

Interacção• Qual a história que vamos contar?• Qual a conversa que estamos a tentar iniciar?

A resposta a estas perguntas são a base para compreendermos que tipo de projecto vamos construir.

Responsive Web Design (Ethan Marcotte) !O processo de adaptação como paradigma de desenvolvimento de produtos multimédia.!Ex.: um website que se adapta a uma grande variedade de tamanhos de ecrã.!Objectivo: oferecer uma experiência de visualização ideal para o contexto de uso.

Grelhas fluidas. Imagens flexíveis. Media Queries.

TENDÊNCIAS

URL: http://www.sapo.pt

URL: http://www.thedailybeast.com/newsweek.html

Flat Design !• Filosofia: simplicidade!• Racionalista, Depuração, Redução do ruído;• Sem Elementos 3D;• Sem Gradientes;• Sem Relevo;• Sem Sombras;• Sem Reflexos;• Sem Texturas;• Sem profundidade;• Google, Microsoft (desde 2010), Apple (iOS7), etc.!

Em oposição a abordagem realista (skeuomorphic), procura uma mudança de paradigma que se afasta da imitação do mundo analógico, tão familiar ao utilizar.

TENDÊNCIAS

Simplicidade. Maior Clareza. Abordagem minimalista. Foco na Cor e na Tipografia.

URL: http://www.tvlcorp.com/index.html

URL: http://www.colouredlines.com.au/

URL: http://wearemovingthings.com

URL: http://adayinbigdata.com

Revisitar o Layout de jornais/revistas impressas

TENDÊNCIAS

URL: https://medium.com/design-things/d76a58035978

URL: http://www.publico.pt/temas/jornal/quando-a-escola-deixar-de-ser-uma-fabrica-de-alunos-27008265

HTML5 + CSS3 !• Transições;• Vídeo sem recurso a plugins para exibição;• Áudio sem recurso a plugins para exibição;• Slideshows com animações;• Animações a partir de SVG’s e CSS’s Transitions.

TENDÊNCIAS

URL: http://www.guidetotheappgalaxy.com/

URL: http://vlog.it/

URL: http://videoguard.pt

Fullscreen !O termo “fullscreen”, em termos gerais, refere-se à expansão da janela do browser de forma a ocupar a totalidade da dimensão do ecrã. !Começou por ser muito utilizado em websites de vídeo (popularizado pelo Youtube) e hoje é o modo de visualização mais comum na navegação em apps.!

Quando usado apropriadamente pode melhorar a sensação de imersão aumentando o foco do utilizador.

É importante não desfraldar as expectativas do utilizador! !Criar uma experiência que seja digna da atenção que estamos a exigir.

TENDÊNCIAS

URL: http://whiteboard.is/

URL: http://www.aboutblank.cz

URL: http://www.dadaabstories.org/

Slideshows “XL”

TENDÊNCIAS

URL: http://avaaz.org/en/

URL: http://www.vogue.es/

URL: http://www.ikea.com/pt/pt/

URL: http://www.escs.ipl.pt

Scroll Vertical: novas interpretações !Múltiplos Scrolls.Scroll Infinito.Página Única.

TENDÊNCIAS

URL: http://www.griplimited.com/

URL: http://www.pinterest.com

URL: http://99u.com

Parallax Scrolling !O efeito “parallax” tem lugar quando o fundo da página se move a um ritmo mais lento do que o objecto que está em primeiro plano.!Utilizam-se múltiplas imagens, no fundo da página, criando a sensação de moverem-se a velocidades diferentes e aumentando a profundidade na página.

O termo “parallax” deriva da palavra Grega “parallaxis”, que significa alteração.

TENDÊNCIAS

URL: http://www.apple.com/iphone-5c/

URL: http://everylastdrop.co.uk/

URL: http://sports.espn.go.com/espn/eticket/story?page=Dock-Ellis

Tipografia

TENDÊNCIAS

URL: http://www.newyorker.com/

URL: http://archive.coryetzkorn.com/wicked-palate/

URL: http://www.rollingstone.com/

Backgrounds com grandes imagens/ilustrações

TENDÊNCIAS

URL: http://www.greyp-bikes.com/

URL: http://www.lego.com/en-us/Default.aspx

Minimalismo !Clareza e simplicidade.Interface centrada no conteúdo.

TENDÊNCIAS

URL: http://www.dropbox.com/

URL: http://haraldurthorleifsson.com/

URL: http://www.skype.com/pt/

Ausência de cor ou monocromáticos

TENDÊNCIAS

URL: http://www.subtraction.com/

URL: http://www.edp.pt/PT/aedp/Pages/aedp.aspx

FONTES

• Treder, M., Warych, R., Witman, S. (2014) Web Design Book of Trends. UXPin.• Website Awwwards - http://www.awwwards.com/ (Consultado 10 Fevereiro 2014).• Website CSS Design Awards - http://www.cssdesignawards.com/ (Consultado 10 Fevereiro

2014).