🍚 👩‍⚖️ ▶️ As tendências mais brilhantes de web design em 2016 🔩 🌬️ 🙏🏾

O mundo do web design é brilhante e diversificado. Grandes mudanças não ocorrem aqui todos os anos. Isso é confirmado pelo rápido crescimento da tecnologia, que nos últimos anos mostrou que tendências importantes no design da web em um futuro próximo se concentrarão na melhoria dos desenvolvimentos existentes.

O design plano se tornará mais texturizado, as experiências cinematográficas serão mais comuns e o uso de bibliotecas JavaScript permitirá mais experimentação. Estamos confiantes de que a crescente popularidade do WebGL e da realidade virtual nos permitirá transformar sites que conhecemos em algo novo com recursos interativos interessantes.

Neste artigo, examinaremos as 11 maiores tendências esperadas de web design deste ano. Então fique à vontade e comece a ler!

1. WebGL (Biblioteca de Gráficos da Web)

Entre as mais recentes conquistas, destaca-se a tecnologia WebGL (Web Graphics Library). Ela usa muitos sites incríveis que apareceram recentemente.

De uma maneira simples, o WebGL é uma maneira de renderizar gráficos 3D e 2D interativos em navegadores acelerados por hardware sem nenhum plug-in.

1.1 Aplicativo 3D interativo WebGL

Curiosidade de experiência (NASA) O

WebGL foi um dos tópicos centrais da conferência SIGGRAPH de 2015 . Você pode assistir à apresentação em gráficos 3D e WebGL neste canal do YouTube.

No vídeo de uma hora e meia, você aprenderá sobre o aplicativo da web “ Experience Curiosity ” da NASA , cuja criação marcou o terceiro aniversário do pouso do veículo espacial “Curiosity” em Marte. O aplicativo permite que os usuários “rolem” o veículo espacial tridimensional da NASA na superfície de Marte e “controlem” o braço do manipulador.

Para criar esse recurso, foram utilizados o Blend4Web (uma estrutura para a criação de aplicativos 3D baseados em navegador) e o Blender (um pacote para modelagem e animação tridimensionais).

O site de Beloola usa three.js (biblioteca JavaScript)

Beloola é a primeira rede social projetada na forma de um mundo tridimensional. Assemelha-se ao Linden Lab no Second Life, mas não requer nenhum software especial além do próprio navegador.

1.2 WEBGL “Vídeo” 3D

Angry Wife (Disp. Madeo)

Outro tipo de 3D no WebGL é a promoção do jogo Angry Wife . À primeira vista, parece um vídeo comum, mas não é de todo. De fato, a cena 3D integrada à página da web usa a biblioteca JavaScript three.js .

O projeto “The Boat” da SBS TV (Austrália) A

australiana SSB TV transformou a história do escritor do Vietnã Nam Le “The Boat” e a transformou em uma história em vídeo interativa usando o WebGL. O aplicativo consiste em várias partes com excelente animação e ilustrações pintadas manualmente. Three.js também é usado aqui , como no exemplo anterior.

PorqueRecollection

no aplicativoPorque Recollection a idéia de criar um tipo de máquina do tempo, mas apenas em relação à música. Um grande número de efeitos sonoros está intimamente relacionado ao que está acontecendo na tela e depende das ações do usuário. O projeto é feito usando o PIXI na forma de uma série compilada de clipes que são ativados por vários elementos interativos.

1.3 Visualização de dados com WebGL

Histografia (Matan Stauber) A

Histografia demonstra eventos históricos da Wikipedia em uma linha do tempo interativa (nota do tradutor. É necessário um navegador Chrome para executar) . Provavelmente não parece muito interessante, mas tente você mesmo e você ficará surpreso ao ver como uma enorme massa de dados pode ser transformada em uma ferramenta simples e ágil.

“O Museu do Mundo” (desenvolvido pelo Museu Britânico e pelo Google)

Uma idéia semelhante foi implementada de uma maneira um pouco diferente para a coleção do Museu Britânico. O projeto " O Museu do Mundo " é o resultado de uma parceria entre o Museu Britânico e o Instituto de Cultura do Google. Os objetos históricos da coleção do museu são mostrados em uma "linha do tempo" feita em 3D usando o WebGL.

Você pode avançar e retroceder no tempo ao longo dos eixos e continentes Z ou Y usando o eixo X. No menu, você pode selecionar tags para objetos que são agrupados por tópicos principais (comércio, conflito, etc.).

1.4 Animação 2D baseada no WebGL

Nouvelles-Ecritures da FranceTV

O projeto " Nouvelles Ecritures " (aprox. Tradutor. "Modern Scrolls") do canal de televisão francês FranceTV é um site com uma implementação muito interessante de animação 2D WebGL em um navegador. A sensação de que você está lendo um pergaminho ricamente ilustrado que rola suavemente na vertical. O projeto foi implementado com a ajuda de JavaScript bibliotecas Pixi.js .

Do ponto de vista técnico, é uma animação bidimensional contínua que é executada no pseudo espaço 3D. Parece muito impressionante!

2. VR (realidade virtual)

A realidade virtual (VR) é uma tecnologia relacionada que pode abalar o mundo dos gadgets em 2016. Talvez muito em breve tudo se torne muito mais interessante.

Você já ouviu falar do Google Cardboard ? Com um telefone Android e um pedaço de papelão, você pode ter uma sensação de realidade virtual em casa. O Google adicionou aos óculos improvisados um aplicativo Android especial - Cardboard Camera , que permite visualizar fotos virtuais. Esta aplicação foi uma das melhores de acordo com o The Guardian em janeiro de 2016.

No entanto, se você deseja uma "realidade virtual" melhor, pode encomendar a suíte Rift VRde Oculus (aproximadamente US $ 600). Há um cruzamento entre o Google Cardboard e o Oculus - é o
VR GEAR da Samsung (US $ 100).
Faz alguma diferença para o web design? Ainda não, mas dê uma olhada no WebVR (a API JavaScript que fornece acesso a dispositivos VR) e em alguns projetos que usam essa tecnologia. Exemplos de trabalho podem ser encontrados no site Mozilla VR . Aqui está o que os próprios desenvolvedores dizem: "Queremos criar um sistema de realidade virtual aberto e de alto desempenho para sites".

2.1 vídeo VR

Catch the Dragon (“Catch the Dragon”) da Peugeot A

promoção Peugeot 208 é um ótimo exemplo da interação de dispositivos de realidade virtual e vídeo. Na inicialização, propõe-se selecionar a opção de visualização desejada: VR (para Google Cardboard) ou vídeo panorâmico 360. Ambas as versões são totalmente interativas. Se você usa um dispositivo com um giroscópio, terá que virar ativamente a cabeça para "pegar o dragão".

3. Sistemas de partículas

Os

sistemas da Deutser Particle em gráficos tridimensionais começaram a ser usados desde os anos 80 para imitar alguns fenômenos naturais, como neblina, fumaça, fogo, água, grama e nuvens. Agora, com o advento do WebGL, ele se tornou disponível para navegadores.

Um exemplo interessante de uso de partículas é a página da Deutser . Veja como os elementos se separam e voltam na forma de figuras e símbolos, respondendo aos movimentos do mouse. O resultado é realmente fascinante.

4. Vistas panorâmicas

Rainforest (Rainforest) por Regnskogfondet

Rainforest não é apenas uma imagem panorâmica. A cada passo, você fica cada vez mais imerso na selva com uma visão completa de 360 graus.

Aqui, cenário tridimensional de alta qualidade, panoramas em tela cheia. No entanto, a integração de elementos de navegação na estrutura do “mundo” parece muito mais interessante.

5. Vídeo em tela cheia com cenas e elementos interativos

O Christmas Express de Milka (Christmas Express) usa um conjunto de episódios de vídeo separados por cenas interativas.

Site Natal expresso opera também uma ideia vídeo em tela cheia, mas como eu o entendo, não há nada a ver com WebGL.

Você seguirá as etapas de criação de uma carta de Natal. 10 minutos para escrever uma mensagem e um dia para entrega. Tudo parece muito real, os detalhes são perfeitos e até a animação da caneta segue exatamente os padrões das letras. Clima de Natal é fornecido!

6. Histórias de animação

A transmissão de idéias por meio de recontagem animada não é nova. Mas ainda há uma tendência que está em constante evolução ao longo do tempo. Curiosamente, as transformações não estão relacionadas apenas aos aspectos visuais ou técnicos.

Para criar uma boa história animada, não basta desenvolver um design e encontrar um artista. É preciso coragem para superar os estereótipos corporativos e as limitações dos detentores de direitos autorais. O resultado parecerá incomum, mas os sites que usam essa técnica se destacarão claramente no mundo das páginas corporativas.

Relatório Anual da Coroa Dinamarquesa (maior produtor de carne suína da Europa)

Relatório Anualno ano passado, da fabricante de alimentos europeia Danish Crown, essas não são as tabelas e tabelas chatas com as quais todos estão acostumados. A página do relatório atrai seus investidores em uma linguagem visual simples e arrojada, que usa ativamente humor abstrato e ilustrações engraçadas. O estilo do texto também é projetado em expressões simples e vívidas.

E aqui está o que os representantes da empresa dizem: “Não parece obscuro. Não expressa a opinião de alguém, não transmite a tarefa, não está repleto de termos. Isso não tem nada a ver com os valores centrais médios - respeito e iniciativa. Por esse motivo, fazemos isso. Mostramos respeito e iniciativa. ”

Decisão mais fácil do mundo

Esse tipo de história é mais comum nas páginas da web de organizações de ONGs. Então, o site do Projeto Realidade Climática “Decisão mais fácil do mundo ”é uma história em quadrinhos interativa sobre mudanças climáticas. O visitante responde a perguntas simples e, dependendo de suas respostas, um filme é exibido ou propõe-se assinar uma petição.

Este exemplo demonstra perfeitamente como o design plano é combinado com as texturas.

7. Navegação linear

Alguns anos atrás, designers e desenvolvedores fizeram de tudo para evitar a navegação linear. A ênfase principal estava na conveniência do menu e na simplicidade de percorrer as páginas do recurso.

Agora é impossível imaginar que a rolagem no site já foi considerada como algo sem êxito (sim, foi). Embora você ainda possa ouvir sobre o mítico “acima da dobra” de alguns desenvolvedores, clientes ou designers (tradutor de notas. “Acima da dobra” é a parte da página que é visível para o usuário sem rolar) .

Neste artigo, não destacamos os melhores sites de cartões de visita do ano. Vamos apenas tentar encontrar maneiras novas e interessantes que os designers usam para criar navegação linear nos sites.

Portfólio de vídeo do

site Julien Belmonte FilmmakerJulien Belmonte contém todos os seus filmes, e eles são navegados de uma maneira muito bem-sucedida. Os filmes se movem horizontalmente da esquerda para a direita e são destacados um após o outro. Nesse caso, é usada uma linha vermelha em movimento semelhante a um marcador temporário.

Quase não há outra navegação. A menos que, na seção "Sobre", onde o texto se parece com os créditos finais de qualquer filme.

Francesco Bertelli CSV on-line

Francesco Bertelli criou uma abordagem inovadora para seu CSV on-line. O calendário interativo usado parece esteticamente agradável e é uma ferramenta eficaz para demonstrar o próprio crescimento profissional.

A interface permite que você navegue rápida e facilmente, riscando as datas que você já explorou. Quando você seleciona o item desejado, a tela com informações se abre para o navegador inteiro. Essa abordagem concentra a atenção do visitante do site apenas no tópico de que ele precisa.

8. Navegação na página

Esse tipo de navegação é usado há muito tempo. No artigo anterior “ Trends of 2013 ”, o site Bagiga foi um exemplo desses tipos de navegação: “tela após tela” ou “ anterior / seguinte ”.
Lendo livros comuns, viramos página por página e alguns designers tentam usar esse hábito.

Fabricante de obras-primas O

fabricante de jóias Imperiali Geneve adota uma abordagem semelhante à de Francesco Bertelli, quando a atenção do usuário é focada em cada tela individual, que conta sua própria história. O site é linear, mas sem rolagem livre. Você passa de uma tela para outra sem intermediários.

Utiliza navegação de slides, com elementos de interface para o início e o fim de cada tela. Tudo isso parece mais com transições entre cenas de filme do que percorrer um site de cartão de visita.

Museu Van Gogh em Amsterdã Um

tipo semelhante de navegação é usado no site do Museu Van Gogh em Amsterdã. O número da página e seu número, setas em combinação com as transições entre slides - uma sensação completa de que você está lendo um livro tradicional.

Os designers se esforçam para se aproximar de nossas soluções usuais que usam fontes tradicionais de informação. Então, o que é web design no futuro? Portanto, o quadro ao redor da página é um truque antigo, que, no entanto, é frequentemente usado.

9. Página emoldurada

Estudos têm mostrado que essa tendência está se tornando mais popular do que pensávamos no começo. Idéias semelhantes em web design vêm sendo desenvolvidas há muito tempo, mas nunca foram executadas com tanto gosto e graça.

Ramo de pão de gengibre do The PNC Financial Services Group, Inc.

O site é dedicado ao primeiro frasco de tamanho normal feito de biscoitos de gengibre reais. Também é interessante como um guia para o ensino de economia. Nesse recurso, não apenas o quadro dentro da janela do navegador é usado, mas também a navegação na página.

wloks

site Wloks ofertas gráfica ativos chiques e forma única. Em vez da interface eletrônica usual de fotografias, este site usa um estilo interessante de catálogos impressos e murais falsos., com uma moldura e um menu de elementos colocados nos cantos da tela.

Cerveja 34 Os

produtores de cerveja 34 encontraram sua solução exclusiva para controlar a tela em várias resoluções, inspirando-se em infográficos e história. Ao mesmo tempo, a aparência do rótulo antigo é preservada. Tudo é feito de maneira simples e este é o exemplo mais encantador deste conjunto.

10. Conhecendo a conversão CSS

Stand4humanrights

Stand4HumanRights convida você para participar da comunidade, adicionando sua foto a uma parede social que se parece com uma enorme superfície curva. Então você pode postar nas redes sociais. O "muro social" pode ser arrastado e é baseado na transformação CSS. Parece interessante, no entanto, requer grande poder de computação e não é tão sensível quanto se poderia esperar.

Species In Pieces O

Species In Pieces usa animações CSS para sua exposição interativa, que oferece 30 espécies ameaçadas de extinção de todo o mundo para explorar. Os modelos animais são constituídos por peças separadas que se somam ao passar de um objeto para outro(Nota tradutor. Para trabalhar requer um navegador Chrome) .

11. animação SVG

holohalo

Na verdade, parece estranho que existam poucas páginas usando a tecnologia SVG (Scalable Vector Graphics) clássica para exibir algo mais interessante do que ícones escalonáveis para diferentes resoluções. Holo Halo é uma exceção à regra e pode servir como fonte de inspiração para designers, mostrando o que pode ser feito com o SVG.

Sumário

Sem dúvida, a principal tendência em web design em 2016 é o WebGL em todas as suas manifestações: vídeo interativo, jogos, animação e visualização de dados. Espera-se que a realidade virtual tenha um grande futuro, mas depende muito da disponibilidade de dispositivos de RV.

Outra tendência comum é a ênfase na mídia padrão. Isso se aplica ao desenho manual, aos itens manchados e digitalizados, como o projeto The Boat. Também é visível a tendência de criar páginas da Web que se assemelham a livros impressos, revistas, adesivos, pôsteres e quadrinhos. Isso é obtido através da navegação página a página, uso de quadros e tentativas de exibir a tela do monitor como uma "página" em vez de uma "janela" familiar.

E se você conseguir dominar este grande artigo, receberá um pequeno bônus - faça uma carona no Delahaye 165 :

Site timeshift165

As tendências mais brilhantes de web design em 2016