advertisement

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

50 %
50 %
advertisement
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.
advertisement

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

My Music Magazine Pitch

My Music Magazine Pitch

October 30, 2014

music mag pitch

Questionaire charts

Questionaire charts

November 4, 2014

bk

Final research

Final research

November 5, 2014

final research

Cersaie 2014

Cersaie 2014

October 30, 2014

allestimento in cartone per il Cersaie 2014 alberi in cartone scultura in cartone

Quarta turma do workshop de Infografia, ministrado por Beatriz Blanco e Marcos Sin...

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