20 tendências mais quentes que irão moldar o design da web em 2016
À medida que o tempo avança a cada ano, muitas novas tendências de design surgem no horizonte. O campo do web design está sempre mudando com novas ferramentas, fluxos de trabalho e melhores práticas para a construção de layouts utilizáveis.
É difícil prever quais tendências exatas atrairão a maior atenção. No entanto, a história recente mostra um padrão de tendências que vêm crescendo como um incêndio. Organizei 20 tendências exclusivas que ganharam força ao longo de 2015 e provavelmente continuarão em 2016.
1. Sketch App para Design de interface do usuário
O Sketch está substituindo rapidamente o Photoshop para todas as tarefas de design da interface do usuário, desde wireframes de baixa fidelidade para modelos de alta fidelidade e design de ícone.
O Sketch App é um aplicativo somente para Mac feito especificamente para designers da Web e de dispositivos móveis. Ele oferece um ambiente de trabalho mais suave para criar elementos vetoriais para qualquer interface, mas também mantém muitos recursos esperados do Photoshop, como efeitos de texto e estilos de camada..
Embora não haja evidência de que o Sketch será lançado para o Windows, ele ainda se tornou uma opção valiosa para os usuários do OS X. O fluxo de trabalho simplificado e o preço mais barato estão dando à Adobe uma corrida pelo seu dinheiro. Se o Sketch continuar a fornecer a melhor experiência de design de interface do usuário, ele certamente continuará crescendo até 2016 e além.
2. IDEs Baseados no Navegador
Os IDEs de área de trabalho existem há décadas com opções que variam do Notepad ++ ao Xcode e Visual Studio. Um IDE torna mais fácil escrever código com sugestões e realce de sintaxe (entre outros recursos).
Mas tradicionalmente os IDEs foram lançados como aplicativos de desktop. Nos últimos anos, vimos um aumento dramático de IDEs na nuvem baseados em navegador. Eles não exigem nenhum software além de um navegador da Web, que permite que os desenvolvedores gravem códigos de qualquer computador com acesso à Internet..
Os Cloud IDEs funcionam mais como aplicativos da Web, onde você pode salvar snippets de código em sua conta para compartilhamento ou armazenamento pessoal. O CodePen é um dos IDEs mais populares com suporte para HTML / CSS / JS juntamente com o pré-processamento customizado como Jade / Haml e LESS / SCSS.
O Mozilla Thimble é outro IDE para desenvolvedores iniciantes que querem aprender como eles codificam. Também Codeply é ótimo para testar frameworks responsivos específicos como o Bootstrap ou o Zurb's Foundation sem precisar baixar nenhum arquivo..
3. Mixins Sass / SCSS gratuitos
Os pré-processadores estão na moda há anos, mas só recentemente se tornou mainstream o suficiente para se sentir onipresente em todo o campo do design / desenvolvimento web. Hoje em dia, parece estranho escrever CSS quando o Sass / SCSS pode fornecer muito mais.
Um benefício é uma oferta crescente de bibliotecas Sass mixin. Mixins simples são como trechos de código ou funções básicas para gerar código repetitivo em CSS. Embora você possa sempre escrever seus próprios, muitos desenvolvedores tiveram a gentileza de liberar mixins gratuitos on-line.
Alguns mixins vêm em bibliotecas como o Bourbon, enquanto outros podem ser itens independentes. Tente fazer uma pesquisa no GitHub para mixins Sass / SCSS para ver o que você pode encontrar.
4. Layouts de Cartão
Os layouts de cartões de sites foram popularizados pelo Pinterest há alguns anos e desde então se tornaram uma tendência para páginas pesadas com conteúdo. Plugins gratuitos como o jQuery Masonry podem ser usados para imitar esse estilo de layout com cartões animados para várias alturas e larguras.
Um layout de cartão é melhor usado em páginas com muitos dados que devem ser verificáveis. A página de destino do Google Now usa um layout de cartão para anunciar cards opcionais para o aplicativo Google Now.
Você pode pensar em layouts de cartão como grades mais dinâmicas com foco na minimização de conteúdo para o essencial para listar mais itens juntos. Revistas on-line como a UGSMAG e a The Next Web são exemplos perfeitos de layouts de cartões usados para exibir conteúdo recente de postagens.
5. Vídeos de Explicação Personalizada
Tanto grandes como pequenas empresas adotaram a tendência de vídeos explicativos personalizados. Estes são frequentemente criados com animações como o exemplo do Crazy Egg. Mas outros vídeos contam com imagens da vida real como o Instagram Direct.
O objetivo de um vídeo explicativo é demonstrar como um produto ou serviço funciona. Os visitantes podem analisar uma lista de recursos e ainda não têm ideia de como o produto funciona. Vídeos esclarecem tudo visualmente e cobrem as coisas importantes em apenas alguns minutos.
Se você quiser tentar fazer um vídeo explicativo personalizado, confira este curso da Udemy. É um estudo aprofundado com foco em vídeos para o design da página de destino.
6. Prévias do produto ao vivo
O design da página de destino teve um crescimento incrível devido à maior velocidade da Internet e aos recursos do navegador. Uma tendência importante que notei é a adição de visualizações de produtos ao vivo em páginas iniciais ou em páginas de destino personalizadas.
Tome por exemplo a página do produto de Slack. Ele apresenta um tour de vídeo e gráficos vetoriais cobrindo a interface do Slack. Essas visualizações de produto destinam-se a dar aos usuários em potencial um vislumbre de como o produto opera.
Webydo é outro exemplo brilhante com uma animação ao vivo na página inicial. Isso permite que os visitantes vejam o Webydo em ação sem precisar demonstrar manualmente o produto. Mas nem sempre você precisa confiar em animações para visualizações de produtos. O Iconjar usa uma captura de tela PNG simples para mostrar o que o produto é e como funciona.
7. Tarefas Automatizadas
O mundo do desenvolvimento do frontend mudou muito com algumas novas práticas recomendadas para a criação de sites. Corredores de tarefas / sistemas de compilação como Gulp e Grunt estão sendo usados com muito mais frequência para uma série de tarefas que anteriormente exigiam esforço manual.
A automação é a força vital do retorno rápido e da produção de código de qualidade. Máquinas não cometem erros, então quanto mais você pode automatizar com confiança, menos problemas você terá (em teoria).
Para saber mais, confira esta postagem no Reddit, explicando como os corredores de tarefas operam. Essas ferramentas basicamente executam código JS que automatizará partes de seu fluxo de trabalho, seja JS personalizado ou scripts escritos por outras pessoas..
8. Aplicativos móveis JS nativos
Sou um grande defensor de usar as ferramentas certas para o trabalho. No caso do desenvolvimento de aplicativos móveis, isso significa Java para Android, Objective-C / Swift para iOS.
Mas nem todo mundo quer aprender um novo idioma apenas para criar um aplicativo para dispositivos móveis. Felizmente está se tornando mais fácil para os aplicativos nativos serem criados e compilados com bibliotecas alternativas, como NativeScript ou React Native..
A lacuna de se tornar um programador de aplicativos para dispositivos móveis está diminuindo com a capacidade de criar aplicativos móveis via JavaScript. PhoneGap é mais uma opção baseada em código HTML / CSS / JS.
Embora o processo de criação varie muito, o JS está rapidamente se tornando uma solução para programadores que desejam desenvolver aplicativos móveis sem aprender um novo idioma.
9. Ferramentas de Colaboração para Design
Mensagens instantâneas e bate-papo em grupo existem há mais de uma década. No entanto, esses recursos tradicionalmente dependem de texto simples com alguma capacidade de anexar arquivos.
Uma nova tendência emergente é a capacidade de compartilhar documentos de design ao vivo em aplicativos de bate-papo. Notável é um exemplo em que as anotações e os comentários podem ser colocados em camadas na parte superior de um documento. Isso dá aos designers uma maneira limpa de compartilhar o trabalho diretamente com todos em uma equipe.
Slack é o aplicativo de chat mais popular no momento, que suporta muitos recursos semelhantes. A crescente base de usuários do Slack tem sido inflexível sobre a criação de extensões que melhoram muito as capacidades do Slack e se conectam a outros produtos como o Hangouts, o MailChimp e até mesmo o WordPress..
10. Frameworks frontend responsivos
Estruturas front-end como o Bootstrap existem há anos e continuam a ser úteis em projetos pessoais e profissionais. O design responsivo forçou seu caminho em estruturas e criou uma demanda por código de frontend em vez de apenas backend (Django, Laravel, etc).
Passando para 2016, acho que estaremos lendo muito mais sobre frameworks frontend responsivos e seu valor em projetos web. Muitos devs aguardam ansiosamente o lançamento da Foundation 6 e o lançamento público do Bootstrap 4.
Outros frameworks menos conhecidos que você pode verificar incluem Gumby e Pure CSS.
11. Maior foco no design UX
O campo do design da experiência do usuário continuará a crescer rapidamente, com mais designers e desenvolvedores observando. O design da interface do usuário faz parte do design UX, mas não é o objetivo final. A interface do usuário é um meio para um fim, com o fim de ser uma experiência de usuário fantástica.
Há apenas 5 anos eu mal conhecia o UX ou como ele se aplicava ao design da interface. Agora, temos recursos como o UX Stack Exchange e os e-books gratuitos do UX. Se você não sabe muito sobre a experiência do usuário, agora é o melhor momento para estudar e aprender como os princípios de UX podem ser aplicados a todas as formas de interfaces digitais..
12. Gestores de Pacotes
Os gerentes de pacotes digitais cresceram tão rapidamente que são praticamente uma exigência para o desenvolvimento moderno da web. Soluções como Bower e NPM podem economizar muito tempo iniciando novos projetos.
Dominar qualquer nova tecnologia vai levar tempo e vem com uma curva de aprendizado. Mas se há uma coisa que todo desenvolvedor de frontend (ou backend) deve saber, é um gerenciador de pacotes. Eles exigem algum conhecimento dos comandos do terminal, mas uma vez que você se acostumar com o processo, você nunca mais vai querer voltar.
13. Animações avançadas de interface do usuário
As transições CSS3 foram apenas o começo de uma tendência de animação de longo prazo na web. Agora temos dezenas de bibliotecas CSS e JavaScript dedicadas à animação. Coisas que eu nunca sonhei serem possíveis agora estão construídas e disponíveis gratuitamente se você souber onde procurar.
A animação não é um requisito para um bom design. Mas pode fazer um bom design em um ótimo design quando usado corretamente.
Fique de olho em tendências animadas para interfaces e veja o que você pode tirar de vários sites. Lembre-se que a animação da web não é um filme da Disney e deve ser tratada com respeito. Use animação suavemente para que aprimore uma interface sem se tornar um elemento perturbador ou perturbador do design.
14. Designers Aprendendo a Codificar
Um tema de botão quente este ano tem sido o caso de designers aprenderem a codificar. Alguns designers acham que não é seu trabalho escrever código, enquanto outros acham que está se tornando a norma e deve ser adotado.
Li discussões acaloradas e posts fascinantes sobre esse assunto, que parecem apenas atrair respostas emocionais. Um bom design é apenas uma imagem bonita sem código. No entanto, concentrar-se em ambos requer que um designer gaste menos tempo praticando o ofício.
Então, há uma resposta definitiva? Alguns argumentam que a viabilidade do emprego aumenta para designers que conhecem codificação frontend. E se alguém não quiser escrever código? Vale a pena aprender apenas para competir?
Eu sinto que a resposta mais clara é fazer o que você quiser. Mas parece que este tópico ainda está na mesa para muitos designers que provavelmente continuarão a discussão em 2016.
15. Ferramentas Online Gratuitas e Webapps
Costumava ser que todos os programas eram executados a partir do desktop, não importando o que você precisasse fazer. Mas hoje em dia estou constantemente impressionado com quantos webapps estão disponíveis gratuitamente on-line.
Você encontrará tudo, desde codificação / decodificação de URL até um editor Markdown totalmente gratuito. Até mesmo o Google Drive levou os produtos do Microsoft Office para o navegador (novamente, completamente grátis).
O nível atual de poder de computação e os padrões homogêneos dos navegadores da Web oferecem uma quantidade aparentemente ilimitada de oportunidades. Tarefas complexas como retomar a criação para compactação de imagem podem ser tratadas diretamente de uma janela do navegador.
16. O crescimento dos componentes da Web
Os componentes da Web estão tentando resolver problemas de complexidade para desenvolvedores. O site WebComponents tem ótimos recursos e materiais para dar aos desenvolvedores um salto para esse tópico.
Se você não tiver certeza de como entender os componentes da Web modulares, confira este post para saber mais.
Embora os componentes não tenham sido particularmente ampliados para o status mainstream, eles estão sendo discutidos por desenvolvedores profissionais em todo o mundo. O Google lançou o Polymer, que é um framework usado para adicionar componentes da web via JS e HTML.
Isso pode não ser prático para usar em grandes projetos clientes ainda. No entanto, a tecnologia está disponível e com um pouco de prática você pode dominar os conceitos com facilidade. Para saber mais e ver alguns exemplos de código, você pode ler esta postagem CSS-Tricks em componentes da Web modulares.
17. Recursos de Aprendizagem Online
Nós todos sabemos que agora é o momento mais fácil para aprender qualquer habilidade no conforto do seu computador. Parece que o mercado de aprendizagem on-line está crescendo exponencialmente com novos cursos e sites surgindo a cada ano.
Eu me sinto mais confiante do que nunca que veremos um aumento do aprendizado online. Sites conhecidos como Treehouse e CodeSchool oferecem cursos incríveis ao lado de sites mais novos como o Bitfountain e o Learn-Verified.
Se houver um assunto que você queira aprender, provavelmente haverá um curso on-line, especialmente se você quiser aprender técnicas digitais, como design de interface do usuário ou desenvolvimento de aplicativos.
18. JavaScript do lado do servidor
Embora tenha havido opções passadas para o JS do lado do servidor, nenhum permeado tão rapidamente quanto o Node.js. Os desenvolvedores de JavaScript se apaixonaram por essa biblioteca e assistiram à concorrência direta com outras linguagens de backend, como Python ou PHP.
O Node permite que os desenvolvedores criem sites usando um único idioma para o front-end + backend code. E recursos como o Node Package Manager dão ainda mais valor ao Node.js.
Pelo que posso dizer, o Node ainda está em alta e continua a ganhar força dos entusiastas da indústria. Se você planeja aprender Node ou não, não há dúvida de que continuará a crescer como uma tendência importante em 2016.
19. Recursos do site com suporte por toque
Os navegadores de smartphones sempre suportaram recursos de toque para todos os sites para manter a compatibilidade com versões anteriores. Ainda recentemente, observei mais plug-ins e recursos personalizados adicionados a websites com o objetivo específico de manipular eventos de toque.
Plugins como o Photoswipe e o Dragend.js são criados para manipular o deslizamento e o toque em telas sensíveis ao toque. Parece que os desenvolvedores da Web não estão apenas criando websites responsivos, mas também sites habilitados para toque.
Se você pesquisar por aí, encontrará alguns recursos realmente impressionantes criados para a Web que dependem exclusivamente de eventos de toque.
20. Design de materiais na web
O lançamento do material design pelo Google foi um enorme sucesso para os designers do Android. Design de material é considerado uma linguagem de design destinada a simplificar o processo de criação de interfaces de usuário para smartphones Android.
Com o tempo, os web designers levaram isso a sério e construíram sites inteiros com base na nova linguagem de design do Google. Parece que a tendência de design de material foi além de apenas aplicativos móveis para o mundo do design da web.
As pessoas que querem construir sites de materiais nem precisam reinventar a roda. Bibliotecas gratuitas como Material UI e Materialize oferecem códigos personalizados para a estruturação de um novo layout no topo da base de design de material.
Fechamento
Analisando essas tendências, deve ficar claro que estamos vendo um esforço real e concentrado da comunidade da Web para facilitar o processo de criação de sites. Todos nós queremos economizar tempo em nosso fluxo de trabalho diário.
Desde o início da web, vimos muitas tecnologias surgirem, apenas para serem substituídas por melhores alternativas. Essas tendências de 2016 estão pressionando por um conjunto mais uniforme de técnicas de design que tornará os sites de construção mais fáceis e muito menos complexos.
