20 tendências de Web Design em ascensão para assistir em 2017
Mais um ano se passou e os designers estão olhando para o futuro. Muitos promissoras tendências de design estão prestes a entrar em erupção em 2017. No ano passado, eu cobri as principais tendências de design de 2016 e vimos muitas mudanças desde então.
Então, para este post eu escolhi o 20 principais tendências que eu notei ganhando força em 2017. Essas tendências de design pode se aplicar a qualquer site, então fique de olho nessas técnicas enquanto nos movemos até 2017 e além.
1. “Destaque em” Distintivos
Startups, blogs, projetos de SaaS e até mesmo pequenas empresas estão usando o “como apresentado em” Distintivos em seus sites. Esses emblemas costumam link para artigos em blogs tradicionais como HuffPo, Forbes, CNN, Fox e outras agências de notícias.
O objetivo é validar um site e ganhar confiança com novos visitantes. É mais fácil para alguém confiar em um site quando consegue ver que está mencionado em publicações autorizadas.
Na verdade, muitos dos principais blogs aprecie a exposição, então realmente ajuda todos os envolvidos. Esses grandes sites frequentemente liberar seus logotipos on-line mas você também pode encontrar PNGs transparentes ou SVGs apenas pesquisando.
Também é recomendado que você link de volta para o artigo original mencionando seu site. Isso prova que você foi realmente mencionado no site, e você não está apenas inventando reclamações.
2. Links de navegação em maiúsculas em negrito
eu tenho visto dezenas de menus de navegação elegantes todos confiando neste mesmo design. Esses links de navegação variam em fonte e tamanho mas eles geralmente tem recursos semelhantes, tal como:
- Todas as tampas
- Negrito
- Uniformemente espaçados
- Alinhado ao canto direito
A página inicial da Zazzle é um ótimo exemplo. Mas você pode encontrar isso em muitos sites de inicialização porque é um maneira limpa de compartilhar links que são fáceis de ler e fáceis de navegar.
Eu principalmente associo esta tendência com empresas e startups de tecnologia mas pode prevalecer em blogs também.
Anote a próxima vez que você ver esta tendência, porque está em toda parte. E espero que continue crescendo bem em 2017.
3. Blogs de estilo de revista
Blogar era um conceito de nicho no início dos anos 2000. Se você rodou um blog em 2003, foi considerado um passatempo bonitinho. Em pouco mais de uma década, essa tendência mudou radicalmente. Agora blogs podem fornecer uma renda em tempo integral, e eles estão começando a parece muito mais com revistas digitais.
Olhe para o design original do TechCrunch quando foi lançado pela primeira vez em 2006. Parece um blog genérico do WordPress?
Agora olhe para a página atual do Techcrunch em 2017:
Não só parece uma revista, isso também funciona como um. O TechCrunch publica dezenas (se não centenas) de novos posts todos os dias. Eles são a principal fonte de notícias para startups.
As tendências de design de estilo de revista fazem uma grande diferença. A página inicial usa um grande seção de história em destaque, cada post tem sua própria miniatura, e as páginas do artigo centrar em torno do título.
Quando você pensa sobre isso, o TechCrunch não mudou muito. Ainda é “apenas um blog”. Mas é projetado e gerenciado como uma revista, e isso faz toda a diferença.
4. fundos de vídeo
O som de reprodução automática é talvez a tendência mais irritante da web. Mas surpreendentemente, vídeo de reprodução automática (sem som) é uma tendência em rápido crescimento. Você pode identificar isso em dezenas de sites de negócios onde um plano de fundo de vídeo assume a tela inteira.
Eu realmente gosto dessa técnica quando ela é aplicada corretamente. Contanto que o video refere-se ao site e não obstrui o conteúdo, Eu acho que é um efeito legal para usar no seu cabeçalho.
5. Botões fantasma
Como o minimalismo alimenta mais em web design, muitas novas tendências estão surgindo. Uma dessas tendências é a ascensão de botões fantasma que não tem um preenchimento interno, mas tem um limite externo.
Na maioria das vezes esses botões contraste com os outros para chamar a atenção. Você pode ver isso na página inicial do Instantmojo com o botão verde de inscrição localizado ao lado o botão fantasma que liga a uma demonstração ao vivo.
Outros sites adotaram um estilo de design puramente fantasma aos seus botões em todo o site. Um ótimo exemplo aqui é o novo layout do Bootstrap.
Eu acho que botões fantasmas funcionam em sites que inclinar-se para o minimalismo. Eles podem não ser uma ótima opção para todos os sites, mas eu vejo o uso deles aumentando a cada ano que passa.
6. Modal janela opt-ins
Janelas modais são super irritantes, e não posso imaginar que qualquer usuário gostaria delas. Contudo eles são comprovados para aumentar as inscrições, e os profissionais de marketing não podem ignorar as técnicas que funcionam.
É por isso que acho que as janelas opt-in modais continue a subir em 2017.
Eles não são o meu favorito, e eu nunca os adiciono aos meus sites. Mas se o objetivo é aumentar as inscrições, então as janelas modais são uma maneira infalível de fazer as coisas acontecerem.
Novos plugins podem até intenção de saída de destino qual aciona um modal sempre que o usuário tentar sair do site. Outros modais aparecem após x segundos ou são definidos para abrir quando o usuário rola para baixo o suficiente.
Independentemente de como os modais são acionados, como eles são projetados, ou como você se sente sobre eles, eu acho que eles estarão por aí a longo prazo.
7. Ilustração e arte vetorial
Com novos programas de desenho vetorial, como o Sketch e o Affinity Designer, há uma nova onda de ilustradores invadindo a web. Design gráfico e design de interface estão constantemente se fundindo com designers mais multidisciplinares agora do que nunca.
Isso significa que estaremos vendo muito mais ícones personalizados e ilustrações de página inteira no futuro próximo.
Muitos ilustradores são artistas praticados, então acho que veremos mais fundos de página inteira feita com software de pintura digital, processado em detalhes como arte conceitual.
8. Barras laterais de rolagem fixa
A primeira onda de design fixo focado em barras de navegação. Estes são muito comuns, especialmente em projetos responsivos, onde a barra de navegação fixa replica a sensação de um aplicativo móvel nativo.
Mas em 2017, espero ver mais um elemento pegajoso-a barra lateral pegajosa.
Quase todo grande blog usa esse tipo de barra lateral pegajosa. isto mantém o conteúdo em vista sempre e aumenta a probabilidade de que os usuários interagir com o conteúdo da barra lateral.
Além disso, com dezenas de plugins jQuery gratuitos que podem replicar o efeito de barra lateral pegajosa. É mais fácil do que nunca configurá-lo em qualquer site.
9. Tabela de conteúdo da página
Um estudo de caso recente descobriu que conteúdo de formato longo supera o formato curto em ambos os rankings e qualidade de retenção de usuários. Concedido isso nem sempre é verdade porque algumas consultas podem ser respondidas rapidamente.
Mas com muito mais conteúdo longo na web, é natural ver mais tabelas adicionadas aos artigos. Você verá isso em sites de avaliação demorados ou em artigos que se dividem em itens listados.
Adicionar um índice pode melhorar a experiência do usuário e ajudar a acabar com a leitura em pedaços menores. Tabela de conteúdo também pode ajude seu site a se classificar melhor! Se o Google achar sua página valiosa, talvez obter links de salto nos resultados da pesquisa.
Pode ser verdade que os ToCs são bastante escassos agora. Mas espero que esta tendência aumente em 2017 e muitos anos depois.
10. Desenhos coloridos brilhantes
Não tenho certeza se essa tendência surgiu do minimalismo ou como uma reação ao design material do Google. Mas eu tropecei em dezenas de sites que usam cores pastel brilhantes misturadas com outros tons vibrantes para criar uma aparência muito fantasiosa.
A homepage da Rentberry é um ótimo exemplo que também usa toneladas de gradientes. E ainda tem o acima mencionado “Destaque em” emblemas localizados embaixo! Duas tendências em um site.
Você notará que as cores não permeie toda a página, e eles são silenciados com outros tons de branco e cinza.
Eu já vi o suficiente desses esquemas de cores vibrantes acreditar que eles estão em ascensão.
11. Animações de rolagem
Os web designers sabem sobre o scroll-jacking e como ele é terrível. No entanto, não é isso que eu quis dizer com o título “animações de rolagem”. Eu vi muitos sites que agora animar conteúdo à vista quando você passa por uma determinada seção da página.
Esta tendência é principalmente confinado a homepages de startups e empresas de SaaS que querem um toque especial em seu design.
Eu não posso dizer se é uma tendência particularmente útil. Certamente agarra o olho mas não acho que isso ofereça muito além da estética. Ainda assim, é uma tendência que parece estar se espalhando rápido, e quando usado com moderação pode ser realmente legal.
12. Aplicativos de uma única página (SPAs)
Aplicativos de uma única página são sites construído puramente com chamadas Ajax. JavaScript puxa conteúdo de um servidor e carrega dinamicamente, então a página nunca atualiza.
Exemplos comuns são sites como o Gmail e o Facebook. Mas com mais tecnologia JS, Estou percebendo mais e mais SPAs desenvolvidos o tempo todo. Heck, até CodePen poderia ser considerado um SPA.
Com poderosas bibliotecas frontend como a React & Aurelia, será ainda mais fácil criar um SPA do zero em 2017.
13. Barras de pesquisa comutável
Costumava ser que os campos de pesquisa estavam sempre em vista em algum lugar em uma página da Web, na barra lateral ou na navegação. Mas ultimamente tenho notado muito mais campos de pesquisa oculto por padrão, e deve ser alternado em vista.
Certamente uma tendência útil para economizar espaço na página enquanto ainda mantendo o recurso de pesquisa acessível. Se não tiver certeza de onde colocar um formulário de pesquisa em um novo design, convém usar um campo de alternância vinculado a um ícone de lupa na navegação.
14. Mensagens Adblock
Não há como negar o fato de que o bloqueio de anúncios está em ascensão. A única questão é como os editores lidarão com essa tendência. Alguns sites educadamente adicionar mensagens aos espaços de anúncios como Time.com. Em Hongkiat, você notará anúncios internos para preencher o vazio esse link ainda mais para o site.
Uma tendência séria que eu vejo aumentando é blocos de conteúdo adblock. Esta é uma técnica para “bloquear os bloqueadores de anúncios”. Esse recurso já está em vigor em muitos sites grandes, como o Business Insider e a Forbes. Infelizmente, isso prejudica tanto o usuário quanto a editora, e tudo decorre de técnicas de publicidade de baixa qualidade..
Em última análise, não importa quem você culpa ou onde você está no debate de bloqueio de anúncios. Mais pessoas estão instalando plugins adblock, e eu estou esperando mais editores para retroceder.
15. Ícones puros de SVG
Gráficos SVG já se infiltraram na web, mas estão crescendo a cada dia. E tenho a sensação de que 2017 será um ano enorme para SVGs Na internet.
Você pode encontrar milhares de conjuntos de ícones gratuitos SVG em sites como o Flaticon, se você souber pesquisar. Mas você também pode codifique SVGs em HTML, por exemplo, fazendo uso deste exemplo em CodePen.
Então, os designers têm uma maneira de usar SVGs, e os desenvolvedores também têm uma maneira de usar SVGs. Suporte de navegador moderno parece ser bom através da placa, então não há problema com compatibilidade. Tudo o que é necessário é designers suficientes para reconhecer o poder dos SVGs e comece a usá-los!
16. Adobe XD
Adobe lança um beta completo do Adobe XD em 2016, e desde então tem crescido rapidamente. Atualmente suporta tanto Mac e Windows, e os seus na fase de testes antes de ser totalmente implementado.
Você pode zombar da idéia de qualquer programa ultrapassando o Sketch, mas a Adobe é a principal empresa de software do trabalho criativo por um motivo. Além disso, o Sketch ainda é apenas para Mac, enquanto a Adobe é olhando para apoiar todos.
Acredito firmemente que estaremos lendo muito mais sobre o Adobe XD no próximo ano. Pode se tornar o software para projetando modelos de interface do usuário-para que possamos finalmente usar o Photoshop como uma ferramenta de manipulação de fotos (como pretendido).
Com o surgimento de novos softwares, dezenas de tutoriais e kits GUI gratuitos também. Você pode encontrar muitos brindes do Adobe XD no Dribbble junto com dois novos sites de brinde focados em XD Designmine e XD Guru.
17. Mais cardápios de hambúrguer
Ame ou odeie, o hambúrguer está aqui para ficar. Existem muitos estudos de usabilidade que argumentar contra menus escondidos da vista. Mas com uma tela pequena e apenas tantas alternativas, não há alternativa melhor por enquanto.
Ícones de hambúrguer são lentamente tornando-se símbolos reconhecíveis para menus de navegação. Assim como um ícone de lupa implica “procurar”, o ícone do hambúrguer de três barras será em breve sinônimo de “cardápio”.
Isso já é verdade para a maioria das pessoas com conhecimento de tecnologia. Mas a cada ano que passa, mais pessoas obtêm smartphones e começam a navegar na web para celular. E eles estão aprendendo associe esse hamburger com um menu nav sem fim à vista.
18. Ícones de recursos do produto
Eu escrevi sobre essa tendência em Treehouse, mas não mencionei isso recentemente. E indo para 2017 esta tendência é Vai ser enorme. É provavelmente a maneira mais comum de compartilhar recursos do produto em uma página inicial.
Você começa por fazendo uma lista de recursos para o seu produto. O produto pode ser qualquer coisa, desde um programa SaaS até um tema WordPress ou até mesmo um item físico.
Então você pode projetar ícones personalizados ou encontrar um conjunto de ícones para representar esses recursos. É melhor evitar recursos genéricos tal como “confiável” ou “velozes” porque a maioria das pessoas espera isso.
Em vez disso, liste os recursos que realmente importa. Se é um tema premium do WP, talvez liste que é responsivo, quantos widgets ele vem ou como o menu funciona.
Esses ícones de recursos funcionam como visuais ajudar vender cada recurso. Texto sozinho é difícil consumir mas visuais são muito mais fáceis de entender de relance.
19. CTAs acima da dobra
Call-to-actions foram tradicionalmente colocados em todo site. Mas com os visitantes gastando menos tempo em sites, é crucial ter um CTA forte logo acima da dobra.
Essas frases de chamariz podem ser botões, formulários de opção ou outras entradas para levar as pessoas a agir como se inscrever ou ler uma postagem no blog.
Não posso dizer como criar um CTA ou como otimizá-lo para conversões. Mas eu posso dizer que a tendência parece estar colocando esses CTAs acima da dobra e em visão clara para todos os visitantes verem.
20. Áreas de conteúdo menores
Monitores cresceram tanto que a maioria dos sites tem que definir uma largura máxima. É muito mais difícil ler frases quando elas têm 2000px de largura em comparação com apenas 700px de largura.
Conteúdo menor é mais fácil de consumir, e, finalmente, cria um melhor experiência em sites com conteúdo pesado.
Eu acho que mais designers estão percebendo isso, e vai lentamente reduzir o tamanho de suas áreas de conteúdo. Eu prefiro uma largura máxima de 750px, mas você pode ir tão pequeno quanto 600px ou menos.
Parágrafos mais curtos com menos sentenças e áreas de conteúdo menores sempre será aumentar a legibilidade. Grandes publicações como o NY Times podem divergir das suas próprias diretrizes estruturais. Mas para um simples blog ou site de negócios, a tendência está se movendo em direção a conteúdo mais longo com parágrafos e áreas de conteúdo menores.
Empacotando
Há muitas outras tendências que não consegui abordar neste post, mas acho que essas 20 são as mais interessantes. À medida que avançamos para 2017, deve ficar claro quais tendências estão explodindo e quais não estão.
E se você tiver outras ideias ou sugestões para as próximas tendências de design, fique à vontade para deixar um comentário abaixo.
