EFEITO SCROLLING E PARALLAXUma nova forma de tornar a página interativa. O

EFEITO SCROLLING consiste na substituição do clique

pela rolagem, o que requer menos tempo de

carregamento da página e cria TRANSIÇÕES SUAVES de

um ponto ao outro, sem interrupções de

carregamento, o que é eficiente, pois não desvia a

atenção do visitante, muito pelo contrário, ele mantém

seu foco no conteúdo sem pausas de troca de página.

Já o EFEITO PARALLAX é a SIMULAÇÃO DE MOVIMENTO

das imagens de fundo em uma velocidade mais lenta

do que as de primeiro plano, criando a ilusão de

profundidade em planos 2D.

WEBGRÁFICOS

INFOGRÁFICOS NA WEB em conjunto com o

design flat entram na tendência. Chamados

de webgráficos, possuem o mesmo princípio

dos infográficos: passar uma mensagem ou

informação de forma gráfica através de

elementos como ícones, imagens e pouco

texto. A diferença é que estes elementos, na

maioria vetores, se tornarão interativos na

web, prendendo a atenção do visitante.

TIPOGRAFIA SOBRE FOTOGRAFIATextos e fotogra�as grandes e responsivas já fazem

parte do padrão de layout atualmente. Imagens como

plano de fundo com efeito blur ou �ltros permitem que

o texto “!utue em cima”, sem comprometer a

legibilidade, valorizando assim a usabilidade.

OLHA ELE AÍ DE NOVO

O DESIGN FLAT mostrou que está apenas começando. O

layout prático, que permite que o usuário navegue com

facilidade, intuitivamente e sem distrações, continua

sendo tendência forte para esse ano, quase uma regra.

...E ESTE É SÓ O COMEÇO!

2015

LEMBRA COMO ANTES AS FOTOS NÃO TINHAM

QUALIDADE NO CELULAR? ISSO ACABOU!

SE UMA IMAGEM VALE MAIS DO QUE

MIL PALAVRAS, IMAGINEM UM VÍDEO?

A tendência das GRANDES FONTES já

estabelecida no decorrer dos anos continuou

sendo explorada nesse ano ainda mais, graças

ao avanço gradativo da ferramenta CSS e HTML.

Não obstante também continuaram as

GRANDES IMAGENS, além dos GRANDES VÍDEOS,

valorizando veemente a fotografia. Coisa que se

difundiu em razão da popularidade dos filtros

de foto, proveniente dos aplicativos de celular, o

chamado “ESTILO INSTAGRAM”. A vantagem

dessa tendência se deu pelo melhoramento da

resolução dos dispositivos, que agora

(finalmente) mostram imagens de alta qualidade

na palma de suas mãos.

GIGANTESCOGIGANTESCO

Ao criar primeiro para mobile,

consegue-se selecionar melhor o

conteúdo que realmente interessa,

ao invés de lotar o layout com

colunas, chamadas e imagens para

depois ir cortando tudo e manter o

que é realmente útil.

“

”

MOBILE FIRST

Além do design responsivo que já é mais do que

regra, surge uma mudança de prioridades. O

princípio agora é: DESIGN MÓVEL EM PRIMEIRO

LUGAR. Os layouts web devem ser concebidos

primeiro para celulares e depois para telas

maiores indo do tablet ao desktop e até mesmo

para a televisão. Esta determinação é

proveniente de um movimento chamado Mobile

First que possui a seguinte filosofia:

APERTE O PLAY

OS VÍDEOS TOMARAM CONTA DA INTERNET!

De fácil produção e compartilhamento

rápido, o vídeo chegou a substituir textos,

banners e fotos como uma nova forma de

gerar chamadas publicitárias na web.

DESIGN FLAT

A WINDOWS começou o ano esmagando o

Skeumofismo da Apple. Com a popularização do

WINDOWS 8 e seu design flat, foi do desktop para

todas as interfaces digitais existentes. O DESIGN

FLAT nada mais é do que design PLANO, que

valoriza a simplicidade, clareza e facilidade de

uso, ou seja, remover texturas, 3D, gradientes,

sombras e outros efeitos desnecessários,

mantendo apenas o ESSENCIAL. O intuito é dar

destaque ao CONTEÚDO por meio de tipografia,

iconografia e cores no melhor estilo

MINIMALISTA e o melhor de tudo: é de fácil

ADAPTAÇÃO a qualquer tipo de tela.

O ano em que o design flat difundiu-se por toda web.

2014

CSS3 É O QUE HÁA alta do momento é o CSS3. Com a evolução do CSS foi possível abrir

portas para diversos recursos modernos que usados numa proporção

adequada, fez com que o comportamento de botões e formulários,

por exemplo, fosse totalmente reformulado e explorado com maior

frequência, com efeito de transparência, sombras, fade, entre outros.

Consequentemente DEPREDANDO O FLASH.

MENU FIXOO menu que se mantém fixado no topo ou nas laterais,

mesmo quando rolamos a página popularizou-se, sendo

adotado para que o usuário ainda tenha a possibilidade

de navegar pelo conteúdo que lhe interessa

independentemente da plataforma que estiver.

NAVEGAÇÃO VERTICALNovamente pela influência dos tablets e

smartphones, surgiu o tipo de navegação

vertical, onde a tela desliza não para

cima ou para baixo como a navegação

horizontal, mas sim PARA OS LADOS. Da

mesma forma que se tornou tendência os

menus laterais, que ocupam menos

espaço na tela dos smartphones.

ROLAGEM INFINITACom a força das redes sociais e blogs, surgiu por meio deles a técnica de

rolagem infinita, que consiste em rolar a página e carregar o conteúdo EM

ETAPAS a cada vez que chegamos ao inferior da página, dando a impressão de

que a rolagem nunca acaba. Um ótimo exemplo disso é o Facebook e Twitter.

SITES COM PÁGINAS ÚNICASCom a vinda dos tablets e smartphones, que revolucionou a

forma de navegar na página com a rolagem da tela com o

dedo, tornou-se muito mais conveniente a criação de sites

com uma única página. Vale ressaltar que este tipo de site é

mais viável para sites pequenos e hotsites, pois aplicando em

sites grandes, a navegação se torna cansativa ao usuário.

DESIGN RESPONSIVOEle deixou de ser uma tendência para se tornar uma REALIDADE. Ele

finalmente se firmou no ano passado e veio com tudo nesse ano e

provável que será algo ESSENCIAL daqui para frente. Chama-se de

responsivo todo site que se adapta a diversos tipos de tela,

combinando layout fluído e folhas de estilo específicas para cada

resolução. A vantagem é que basta apenas criar um index que se

adapte, ao invés de várias páginas com larguras fixas.

Chegou a hora de explorar o design responsivo. Até onde podemos ir?

2013

OS NOVOS POP-UPSLembra do MODAL BOX de 2009? Eles voltaram com tudo!

Com a mesma finalidade dos pop-ups, só que melhorados,

foram usados geralmente em logins e registros, com o

intuito de chamar a atenção do usuário para algum tipo de

ação, além de ECONOMIZAR ESPAÇO no site.

MENOS É MAISO minimalismo se tornou regra na diagramação de um

site, fazendo-se relevante também por conta da

ADAPTAÇÃO de sites nos novos dispositivos, onde o

conteúdo tinha que ser mais dinâmico e de fácil acesso,

sem milhares de botões e menus para clicar, levando em

consideração a nova forma de “clique”: o TOUCHSCREEN.

EXTRA G

As grandes tendências do ano passado se

repetem nesse ano, como grandes fotos em

background, grandes fontes, páginas únicas,

utilização das divisões e hierarquia de site.

A QUEDA DO FLASHO Flash já começou a perder sua popularidade

devido à sua incapacidade de trabalhar

adequadamente com dispositivos móveis. Além

disso, as ferramentas CSS3 E HTML5 oferecem

muitos benefícios como, por exemplo, a

interatividade e a capacidade de um

carregamento mais rápido, sendo capaz de

provar que são as TECNOLOGIAS DO FUTURO.

RESPONSIVIDADE

Era inevitável que surgissem LAYOUTS FLUÍDOS ou

seja, responsivos. Ao invés da tradicional página

de largura fixa, os sites responsivos tornam

possível a exibição em diversos formatos de telas

e dispositivos sem problemas.

Responsividade: a alma do presente e do futuro.

2012

TUDO EM ALTA ESCALAComo uma solução alternativa às páginas

introdutórias, usava-se imagens enormes,

seguindo a tendência dos cabeçalhos e

logos em GRANDES DIMENSÕES. Este

recurso servia como forma de causar

IMPACTO VISUAL aos visitantes ao mesmo

passo que segmentava o conteúdo.

VALOR À IDENTIDADE VISUALOs sites corporativos começaram a dar mais

atenção à identidade visual como um todo.

Questões de paleta de cores, tipografia,

logotipo, elementos que refletem a

PADRONIZAÇÃO DA MARCA da empresa eram

predominantes em seus sites também. Não

era admitido imprimir um folder com o logo

atualizado sem alterá-lo no site.

IMAGENS E FONTES ENORMESEstratégia vista no ano passado para criar

um IMPACTO VISUAL, fazendo com que os

visitantes não esqueçam tão facilmente da

marca, continua predominante nesse ano.

SKEUMORFISMO

A Apple dá a vida ao estilo “Skeumorfismo” ao utilizar na

interface de seus produtos. Este estilo é identificado

pela semelhança com o mundo real, como ÍCONES que

reproduzem texturas e objetos físicos. Veio com o

intuito de causar FAMILIARIDADE no usuário.

NOVAS PLATAFORMAS DIGITAISA INTERATIVIDADE que chegou no final do

ano antecedente ganhou força e mostrou

que veio para ficar nesse ano. Ela se moldou

de forma a suprir as necessidades cada vez

mais imediatas dos USUÁRIOS. Eles não

querem esperar para ter aquilo que

desejam, eles querem tudo em tempo real e

neste momento a adaptação para novas

plataformas digitais, como tablets e

smartphones nunca foi tão imprescindível.

Interatividade e impacto visual como metas.

2011

DESIGN INTERATIVOSurgiu um investimento maior neste quesito, que deu aos sites

um atrativo a mais e a possibilidade de interagir em tempo real

com textos, imagens e formulários, o que enriqueceu ainda

mais a EXPERIÊNCIA DO USUÁRIO, já se preocupando com novas

plataformas digitais como tablets e smartphones.

RODAPÉS FUNCIONAIS

O rodapé passou a ser

explorado como uma forma

mais rápida de disponibilizar

informações relevantes de

contatos e redes sociais. Além

dessa utilidade, a parte inferior

serviu para alocar os formulários

para adesão de newsletters e a

interação de usuários com

comentários referentes àquele

conteúdo nesse mesmo espaço.

FUNCIONALIDADE É LEIAs mudanças desse ano em diante

basearam-se no pensamento muito mais

voltado para funcionalidades do que estética.

Tudo carecia de ter uma explicação do por

que estava ali. Pegando um exemplo clássico:

a TIPOGRAFIA. O que antes era visto como um

simples adereço ao layout de um site, ganha

muito mais importância e passa a ser a alma

do web design a utilização de fontes como

forma de atrair a atenção dos visitantes.

MINIMALISMO

Seguindo a linhagem da

funcionalidade, veio a tendência

minimalista. As imagens

passaram a ser utilizadas apenas

quando tinham algum tipo de

relevância em relação ao

conteúdo. Imagens decorativas

são praticamente PROIBIDAS e

tudo que não faz falta para a

transmissão de uma mensagem

deve ser retirado.

CABEÇALHO

CONTEÚDO

RODAPÉ

ARQUITETURA DE SITEHouve uma mudança drástica na arquitetura

do site nesse ano. Notou-se a desnecessidade

de páginas introdutórias, visto que era muito

mais útil o CONTEÚDO DO SITE estar acessível

logo na home com uma simples rolagem de

página, sem que o visitante tivesse que dar

muito cliques para encontrar o que deseja. Isso

gerou uma TENDÊNCIA DE PÁGINAS ÚNICAS,

centralizadas e simplificadas, eliminando

conteúdos e imagens desnecessárias.

Funcionalidade é a palavra-chave.

2010

MODAL BOX

Utilização de blocos destacados (modal box)

para introduzir algo relevante em relação ao

site. Geralmente eram compostos por textos

curtos e objetivos com fontes diferenciadas,

substituindo o uso de pop-up.

.PNGSUPER TENDÊNCIA

Surgiu com força total nesse período a

utilização de imagens com fundos

transparentes para enriquecer ainda mais o design de websites.

BANNER PRINCIPAL

A popularidade das bibliotecas JavaScript

permitiu o surgimento da ferramenta

Slideshow, que se tornou sensação do

momento, cada vez mais comuns como

forma de dispor o conteúdo e destacá-lo.

MÍDIA IMPRESSA

A diferenciação de conteúdo por meio do

tamanho de fonte, que começou em 2007,

ganhou força total nesse ano e se tornou

uma convenção do web design, pois havia

uma preocupação maior com a

DIAGRAMAÇÃO das páginas da web, tendo

grande referência da orientação utilizada na

mídia impressa, como em revistas e jornais.

A mídia impressa interfere no web design desse ano.

2009

OBRAS DE ARTEAlém dessa abordagem de perspectiva em

superfícies, alguns sites fugiram desse formato e

produziram layouts com conceitos de perspectiva

simples como PROFUNDIDADE e planos utilizando

fotografias de ambientes e paisagens.

PERSPECTIVAA visão em perspectiva passa

a se popularizar na produção

de layouts. Uma de suas

utilizações mais clichês é a

famosa mesa de trabalho do

desenhista, com elementos

como lápis, xícaras de café e

outros objetos ao redor de

uma página ou documento.

LADO ARTÍSTICOA tendência pendeu também para o lado de

CRAFT DESIGN (artesanato). Sites com elementos

que simulavam serem feitos a mão, como

organização de layout com efeito de colagens,

utilização de post-it para destacar conteúdo e

manchas de tinta em forma de splash.

RETRÔ, BABY

O ano se iniciou com a tendência

retrô. Cada vez mais surgiam sites

que faziam referência ao estilo, o

que também deu espaço para a

popularização das FONTES

MANUSCRITAS, que dava um ar

mais despojado e pessoal ao site.

GRUNGEO estilo grunge se manteve com força desde o ano antecessor, com seu visual sujo e texturas que simulavam manchas, rachaduras e desgaste.

Tendências retrô, grunge e “faça você mesmo” invadem a web. Os

usuários querem ver suas páginas com sua própria cara.

2008

TEXTURAS, TEXTURAS, TEXTURASO ano também foi marcado pela UTILIZAÇÃO

EXAGERADA de texturas na composição do

layout, desde naturais até grunge. Foi um ano de

experimentar e exagerar, não houve um estilo

definido de web design. A todo momento surgia

algo novo que logo se tornava tendência.

Aa

HIERARQUIASPreocupação maior

com sua diferenciação por meio de cores e

tamanhos de fontes, caracterizando a

importância de cada conteúdo.

MASSA DE TENDÊNCIASEsse ano foi marcado pelas mais diversas

tendências no web design: o que começou com os

mascotes e cartoons que invadiram a web, teve

também como uma tendência forte a utilização de

ILUSTRAÇÕES FLORAIS e geométricas invadindo o

background e até o corpo do texto.

INVASÃO DAS CORESMarcou o ano com seus tons

vivos em contraste com o background, como azul claro,

verde limão, rosa e laranja.

FOLHAS DE ESTILO CSSA evolução do suporte dos navegadores fez

com que elas se popularizassem com a

utilização de bordas com imagens complexas,

extrapolando as convenções, como as linhas

demarcando início e fim de seções do site.

WEB 2.0Ela já é realidade. Surgem muitas

aplicações dinâmicas baseadas

na interatividade e colaboração,

popularizando-se alguns dos

pioneiros sites de social network.

Preocupação com a interatividade na web e

massa de tendências. É o ano de experimentar.

2007

DE PORTAS ABERTASSurge uma nova tendência de iconografia

aplicada na web, com base nas aplicações

desktop. Esse ano termina com as portas mais

abertas para novas experiências na internet.

Surge uma preocupação maior

com a INTERATIVIDADE NA WEB e

começa a surgir aquilo que seria

batizada futuramente de WEB 2.0

WEB2.0

AJAXSurgiu em 2005 e já começa

a ganhar força contra os

conteúdos interativos,

porém pesados do Flash.

As ferramentas na internet evoluíram de forma a permitir

uma preocupação maior com o conteúdo da página.

2006

FLASH PARA INTERNETPossibilidade de utilização de diversas fontes em textos de hipertextos e variação de cores. É o fim dos sites com fontes em preto e azul.

800x600pixels

ALINHAMENTO A ESQUERDAOs recursos eram limitados para compor um layout mais trabalhado. Os sites tendiam a ser desenvolvidos com alinhamento a esquerda.

Preocupação com USABILIDADE

e PÁGINAS LIMPAS, pois a

maioria da população ainda

possuía internet discada. O

Layout cheio de elementos

dificultava o carregamento da

página, pois eram pesados e

prejudicava a navegabilidade.

A internet ainda estava se instalando na vida das pessoas.

Não houve muito desfrute no web design nesse período.

2005

Confira com seus próprios olhos o avanço da internet que você

provavelmente presenciou, mas não percebeu que aconteceu.

Os anos passam tão rápido que nem conseguimos perceber o quanto as coisas evoluíram

até agora, ainda mais na internet! Só quando paramos para pensar é que percebemos o quanto

essa ferramenta tão cotidiana mudou, tanto em sua interface quanto a forma como ela é encarada.

Referências:

Livros:

“Mobile Book of Trends 2014” – UXPin & Movade

“Web Design Book of Trends 2013 - 2014” – UXPin

Site:

http://goo.gl/xyyieo

http://goo.gl/6qoYbf

http://goo.gl/3RyUBR

http://goo.gl/1NxZ8X

http://goo.gl/HN3auu

http://hotdot.pro/en/#

http://wildbluetech.com/

http://www.theverge.com/

http://www.obabyapp.com/

http://www.weareo3.com/

http://www.ok-studios.de/home/

http://www.reverenddanger.com/

http://hellohikimori.com/#!/home

http://www.kahuna-webstudio.fr/

http://bpcreates.squarespace.com/

http://www.mediak.com.br/o-que-e-um-site-responsivo/

http://www.praquesite.com.br/blog/wordpress/artigos/225

http://www.abraweb.com.br/site/forum/viewtopic.php?t=1297

https://www.behance.net/gallery/23412087/YAS-accessories-for-men

http://pt.wix.com/blog/2013/01/tendencias-de-web-design-para-2013/

http://www.des1gnon.com/2014/02/usando-fotografia-no-web-design/

http://startupi.com.br/2014/03/10-tendencias-de-web-design-para-2014/

http://blog.uxpin.com/3032/progress-in-design-hot-webistes-then-and-now/

http://marknetweb.blogspot.com.br/2012/03/tendencias-para-webdesign.html

http://www.add-digital.com.br/blog/algumasdentencias-em-webdesign-para-2011/

http://www.des1gnon.com/2014/12/7-tendencias-cruciais-para-web-design-em-2015/

http://www.brunoavila.com.br/avante/webdesign/10-tendncias-do-web-design-para-2013.html

http://www.zeroarts.com.br/blog/portais-de-noticias-no-brasil-internet-archive-cronologia-de-desenvolvimento-de-sites

Desenvolvido por:

HTTP://AGENCIALAB.COM.BR/

DESIGNNA WEBD

ES

IGN

DES

IGN

CSS

FLASH H T M LH T M L

WEBWEB2.0NOS ÚLTIMOS

1010 ANOS

POR MAIS NECESSÁRIO QUE SEJA,ENTRE AS 50 MAIORES EMPRESAS DO BRASIL,

DELAS POSSUEM SITECOM VERSÃO MOBILEOU RESPONSIVO.

DE BRASILEIROS ACESSAM AINTERNET POR MEIO DO CELULAR.

32%

43MILHÕES2014

APENAS

CRESCIMENTO

DO ACESSO A SITES

POR DISPOSITIVOS MÓVEIS:

20% EM 2014.

A INTERNET VEM SE MOSTRANDO

O MEIO DE COMUNICAÇÃOMAIS IMPORTANTE

PARA A POPULAÇÃO BRASILEIRA

2012: 82%2013: 88%2014: 87%

NAS RESIDÊNCIAS

XUSO DE INTERNET VIADISPOSITIVOS MÓVEIS

USO DE INTERNET VIACOMPUTADORES

SMARTPHONES

LIDERAM VENDASSOBRE COMPUTADORESE SÃO MAIS UTILIZADOS

PARA ACESSO À INTERNET.