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

50 %
50 %
Information about Laboratório Web 2013-2014 - Tendências no Desenho e Produção de...
Design

Published on March 4, 2014

Author: esganarel

Source: slideshare.net

Description

Unidade Curricular de Laboratório Web, Curso de Licenciatura em Audiovisual e Multimédia, Escola Superior de Comunicação Social / Instituto Politécnico de Lisboa.

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.

TENDÊNCIAS 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.

URL: http://www.sapo.pt

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

TENDÊNCIAS 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. 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

TENDÊNCIAS Revisitar o Layout de jornais/revistas impressas

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

TENDÊNCIAS 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.

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

URL: http://vlog.it/

URL: http://videoguard.pt

TENDÊNCIAS 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. É importante não desfraldar as expectativas do utilizador! ! ! Criar uma experiência Quando usado apropriadamente pode melhorar a sensação de que seja digna da imersão aumentando o foco do utilizador. atenção que estamos a exigir.

URL: http://whiteboard.is/

URL: http://www.aboutblank.cz

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

TENDÊNCIAS Slideshows “XL”

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

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

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

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

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

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

URL: http://www.pinterest.com

URL: http://99u.com

TENDÊNCIAS 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.

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

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

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

TENDÊNCIAS Tipografia

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

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

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

TENDÊNCIAS Backgrounds com grandes imagens/ilustrações

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

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

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

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

URL: http://haraldurthorleifsson.com/

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

TENDÊNCIAS Ausência de cor ou monocromáticos

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).

Add a comment

Related presentations

Related pages

Desarrollo de interfaces para android - Education

Desarrollo De Interfaces Para AndroidLUGAR: ... (SNCT) no Instituto Federal de Educação, Ciência e Tecnologia de São Paulo (IFSP) ...
Read more

Autodesk University Brasil 2015 - Palestrantes

... 2013, 2014 alem de palestrar no Autodesk ... arquitetura e produção audiovisual para ... em protótipos de laboratório no grupo ...
Read more

Design no Brasil by overbrand_pesquisa - issuu

... para o segmento de design no ... http://www.fate.edu.br/web/graduacao/tecnologico ... traz valor tanto para eficiência na produção e ...
Read more

Revista infoext 2 edição web1 by IFRO Instituto Federal de ...

A etapa seguinte consistiu na realização da aula prática no laboratório ... que, no início das Desenho e ... para a produção de mudas de ...
Read more

Web.br 2014. Conferência Web W3C Brasil. | Dias 25 e 26 de ...

Para contar sobre como a ferramenta se tornou a líder de pagamentos pela web no Brasil, ... As oportunidades para empreendedores de tecnologia no Chile ...
Read more

Melhores Mestrados em Animação 2017 - master-mestrado.com

Em 2013/2014 estúdio ano ... Desenho, direção e produção é um programa ... efeitos visuais geração no filme, de produção gráfica para ...
Read more

Autodesk University Brasil 2016 - PALESTRANTES

... possuo certificações profissionais de Revit Architecture 2013, 2014, ... Pos-produção para ... da Produção Civil e no Bacharelado ...
Read more