Tendências de Design 2017

Desenvolvedores da @LolDesign visitam a Ruby Conf 2016
24 de outubro de 2016
Pneus e o Design Responsivo
30 de janeiro de 2017

Tendências de Design 2017

Tendências de Design 2017


O ano de 2017 começou com o crescimento de novas tecnologias e tendências de design. Com o surgimento contínuo de novas experiências para o usuário, seja navegando, jogando games, comprando online, estudando ou realizando qualquer outra atividade, tudo envolve bombardear e ser bombardeado de cores, formas e conteúdo. Mas toda essa informação precisa ser organizada, bem pensada, bonita, atraente e ágil.

Vamos ver algumas das principais tendências?


MENOS É MAIS (Low Information Density)

O conceito é bem claro para os desenvolvedores “modern UI style” que desenvolvem a Interface de Usuário: usar pouca informação. Abusar dos espaços para conseguir resultados leves e bem legíveis está em alta.

Este recurso, quando bem usado, oferece soluções visuais de grande impacto. Pense em como o usuário se sente atraído a olhar as grandes imagens e espaços vazios do layout. Assim como os textos, que podem ser escritos com uma baita fonte “bold”, tornam-se atraentes aos olhos.

Desenvolver layouts com pouquíssima informação ajuda a direcionar o olhar do usuário, sugerindo e apontando a direção do olhar. O desafio é não exagerar e encontrar um balanço perfeito entre espaço vazio e conteúdo. Veja alguns exemplos:


Chega de cores gritaaaaaaaaaantes

É certo que uma boa paleta de cores salva um projeto visualmente, vende melhor o produto e engaja mais clientes. Mas como encantar essa audiência sem ferir os olhos de ninguém?
Todo designer sabe a importância de trabalhar com uma paleta de cores equilibrada e coerente, com foco na inovação e no impacto visual. Mas o que deixaremos de ver nesta temporada é o uso exagerado de cores sólidas e neon, dando espaço a conteúdos mais agradáveis, mais “bland”e requintados, com tons pastéis.
Outro detalhe a ser levado em conta é que na natureza, encontramos sempre tonalidades mais amenas e recriar as cores de uma cena real em seus layouts sempre trará conforto visual e uma sensação única de veracidade e verdade à cena. Veja:



O futuro do front-end é o design (e vice-versa)

É notório que as barreiras do desenvolvimento estão diminuindo ano após ano. Plataformas cada vez mais inteligentes e interativas, custos de desenvolvimento de softwares caindo cada vez mais, ferramentas para desenvolvedores (como o GitHub), frameworks do tipo open-source (Ruby on Rails) e serviços de back-end (como o Algolia) facilitam e agilizam os processos que, há dez anos atrás, custavam milhares de dólares.
Design e desenvolvimento estão convergindo-se em direção a um bem maior: o de atender a necessidade crescente de superar as expectativas do usuário.
Isso exige uma equipe de trabalho colaborativa com habilidades para realizer mudanças e melhorias nos projetos desenvolvidos com a maior agilidade e eficiência possíveis, trabalhando no modelo de Start-Ups e seus MVP’s (Minimum Viable Products), realizando mudanças rapidamente e aprendendo através do feedback do cliente como melhorar produtos e serviços. Resultado: maior velocidade de resposta na execução de tarefas, testes e validação de ideias, antes mesmo de começar o código.
O que isso quer dizer?
Quer dizer que a linha tênue entre “product design” e “desenvolvimento front-end” vai diminuir cada vez mais, e as empresas vão buscar profissionais que possam integrar todas as tarefas em um projeto único e interagir em todas as fases do projeto.


Esta convergência está acontecendo até mesmo com as ferramentas de desenvolvimento, que realizam tarefas de design e fornecem um front-end mais interativo e inteligente, como é o caso do Atomic.io, witheve.com e Origami.design.
Essas ferramentas, focadas primeiramente em design, permitem acrescentar código previamente desenvolvido para melhoria dos produtos e mesclar ferramentas dentro do software para um desenvolvimento mais interativo e intuitivo. Com isso, percebemos algumas mudanças significativas ocorrendo atualmente:

O tamanho da equipe de desenvolvimento tende a diminuir, com o objetivo de agilizar as tarefas;
A norma vai ser a interação em tempo real, pois os times terão opções de aplicar melhorias em tempo real, testando e aprendendo com "features" cada vez mais velozes;
Os resultados do projeto serão ampliados já que as equipes poderão tomar ações e decisões que causam impacto de capitalização dos projetos.



Projetos no Grid Fluido - Design Responsivo

Outra tendência para 2017 é a inegável necessidade de manter tudo no grid. O desenvolvimento de grids inteligentes demanda inteligência na hora de criar elementos com harmonia e se torna uma ferramenta fundamental para elaborar layouts responsivos, que se adaptam a todos os dispositivos e tamanhos de tela.

Vantagens para o designer:
• Linguagem acessível, de fácil visualização para construção de layouts e páginas;
• Mantém os padrões de espaçamento e alinhamento uniformes, para facilitar o trabalho do designer;
• Mantém a linha de trabalho consistente, caso seja necessário que outros profissionais assumam o projeto.

Vantagens para o desenvolvedor:
• Rapidez na construção do front-end;
• Caminho ideal para se conseguir fidelidade, pixel a pixel;


Layout Design Responsivo
Ao se trabalhar com layouts responsivos, a primeira preocupação que um designer precisa ter em mente é o Grid Fluido e suas porcentagens.


O Gerente de Projetos e CEO da LolDesign Fernando Fujie explica: “O mais comum é ultilizar uma largura de 1140px, para que o Grid se adapte bem às maiores resoluções de monitores. Por um bom tempo, a resolução mais popular era 1024x768px mas nos dias de hoje somente 13,28% dos monitores utilizam esta resolução. A grande maioria utiliza 1366x768px como resolução e existem vários outros formatos maiores sendo utilizados cada vez mais”.


Queremos mais PARALLAX

Mover diferentes partes e fatias de um website em velocidades diferentes não é uma coisa nova, mas saber usar isso a favor do design, de forma interativa e criativa é um grande desafio e pode dar imenso destaque a um projeto ou produto.

O efeito de Parallax permite ao usuário dar um “scrooling” na página, promovendo uma interação de movimento que pode, entre outras coisas, contar uma história com imagens e textos, gerando forte engajamento à medida que o usuário progride no controle da ação. Esse tipo de interação ajuda a promover a experiência e o usuário aprende mais sobre uma ideia proposta, sobre uma solução apresentada, ou ideia lúdica. Ainda há muito a ser explorado neste meio utilizando-se este recurso.

Uma boa fonte de layouts premiados utilizando efeitos de parallax:
awwwards.com/websites/parallax/


Tipografia Customizada

Grandes, pequenas, curvilíneas, cada fonte utiliza um estilo diferente para compor uma ideia visual harmoniosa e adequada a cada produto ou identidade visual.
Cada vez mais designers estão desenhando logos customizados a partir de fontes comuns para criar algo único e incrível. É preciso lembrar porém que no conceito de “lettering” a boa leitura se estende não somente às telas, mas também a peças físicas como um cartão de visitas, um outdoor ou uma camiseta.
A tendência é se empenhar para criar curvas que se adaptam à ideia e sair fora do comum, mostrando esmero e dedicação ao pensar numa tipografia de impacto.


Menos fotos falsas. Mais autenticidade.

Esta interessante tendência é curiosamente simples, mas muitas empresas e times de trabalho ainda erram: o uso de imagens pagas, as stock images.
Tudo muito lindo dentro do seu layout, com aquela imagem perfeita de uma moça bonita com um sorriso bonito encaixando-se perfeitamente em seu layout. Até que por um acidente, o seu gerente visita um site de uma multinacional alemã e encontra lá a mesma imagem. Que vergonha.

A cada dia, mais e mais fotos são tiradas e a facilidade de se adquirir equipamentos vem melhorando, assim como aumentou a quantidade de profissionais fotógrafos oferecendo seus serviços.
Mas o principal fator a ser observado é que, ao mostrar a estrutura física da sua empresa ou negócio, é necessário mostrar a parte que faz tudo funcionar, a parte humana, o time de pessoas engajadas em vender ou atender o seu cliente. E nessa hora, nada de fotos exageradamente sérias e formais, o que conta agora é a naturalidade e o “clima” que a imagem passa.

Uma equipe de advogados trabalhando dentro do escritório e sem gravata pode passar mais credibilidade e uma noção mais “real” do negócio, de uma forma humanizada e positiva, destacando o excelente clima organizacional. Uma agência de publicidade sendo fotografada no meio de um brainstorm mostra o quão real ela é, sem falsos sorrisos.

Fotografe seu time exatamente como ele é e mostre o melhor da sua empresa: as suas pessoas.


CONCLUSÃO

Seria muito difícil definir as tendências de webdesign 2017 como um todo, mas a preocupação em entregar um resultado intrincado e detalhado precisa ser substituída por entregar projetos com maior eficiência visual e maior impacto, com o foco em contar histórias (storytelling) que movem o usuário, que fazem ele tomar ações e ampliar a resposta de engajamento.
Não tenha medo de abusar de gradientes, fontes grandes e espaçosas com fundo abrangente e bonito.
Quais são as tendências que você tem utilizado em seus projetos? Como você vê essas tendências evoluindo em seus projetos? Conte-nos mais através do twitter: @LolDesign_Br

Will Tubarão, 39
UX Designer - LolDesign



Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *