EFEITO SCROLLING E PARALLAX Uma 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 FOTOGRAFIA Textos e fotografias grandes e responsivas já fazem parte do padrão de layout atualmente. Imagens como plano de fundo com efeito blur ou filtros permitem que o texto “flutue 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. GIGANTESCO GIGANTESCO 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 FIXO O 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 VERTICAL Novamente 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 INFINITA Com 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 ÚNICAS Com 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 RESPONSIVO Ele 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-UPS Lembra 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 É MAIS O 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 FLASH O 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 ESCALA Como 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 VISUAL Os 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 ENORMES Estraté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 DIGITAIS A 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 INTERATIVO Surgiu 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 É LEI As 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 SITE Houve 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. .PNG SUPER 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 ARTE Alé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. PERSPECTIVA A 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ÍSTICO A 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. GRUNGE O 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, TEXTURAS O 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 HIERARQUIAS Preocupaçã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ÊNCIAS Esse 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 CORES Marcou o ano com seus tons vivos em contraste com o background, como azul claro, verde limão, rosa e laranja. FOLHAS DE ESTILO CSS A 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.0 Ela 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 ABERTAS Surge 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 WEB 2.0 AJAX Surgiu 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 INTERNET Possibilidade 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 ESQUERDA Os 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/ DESIGN NA WEB DESIGN SIG CSS FLAS H H T M L H WEB WE 2.0 NOS ÚLTIMOS 10 10 ANOS POR MAIS NECESSÁRIO QUE SEJA, ENTRE AS 50 MAIORES EMPRESAS DO BRASIL, DELAS POSSUEM SITE COM VERSÃO MOBILE OU RESPONSIVO. DE BRASILEIROS ACESSAM A INTERNET POR MEIO DO CELULAR. 32% 43MILHÕES 2014 APENAS CRESCIMENTO DO ACESSO A SITES POR DISPOSITIVOS MÓVEIS: 20% EM 2014. A INTERNET VEM SE MOSTRANDO O MEIO DE COMUNICAÇÃO MAIS IMPORTANTE PARA A POPULAÇÃO BRASILEIRA 2012: 82% 2013: 88% 2014: 87% NAS RESIDÊNCIAS X USO DE INTERNET VIA DISPOSITIVOS MÓVEIS USO DE INTERNET VIA COMPUTADORES SMARTPHONES LIDERAM VENDAS SOBRE COMPUTADORES E SÃO MAIS UTILIZADOS PARA ACESSO À INTERNET.