Desde grandes empresas a bloggers em início de carreira, todos nós dependemos de um site com bom aspeto. Hoje em dia, mesmo o ludita menos conhecedor de tecnologia não confiaria num site que se parece com um site de nível médio Página do GeoCities (pergunte aos seus avós). A apresentação é extremamente importante em linha. Pode fazer ou desfazer a experiência do utilizador, atrair clientes e estabelecer um aspeto e uma sensação únicos da marca. É por isso que, para este artigo, estamos a analisar os exemplos mais inovadores de Web Design que estão a dar cartas este ano.

Embora a qualidade visual destes desenhos possa parecer subjectiva, o objetivo deste artigo não é convencê-lo de que estas são as técnicas mais bonitas. Elas são a) tendências dignas de registo e b) úteis para ilustrar um ponto crucial: como utilizar estas técnicas para melhorar a funcionalidade. Por esse motivo, o comentário principal deste artigo incidirá sobre a função destes elementos e não sobre o seu aspeto.

Na maior parte dos casos, vamos analisar os componentes visuais que acrescentam valor ao seu sítio, especialmente as técnicas multimédia. Esperamos que o leitor comum também possa pegar nestes elementos e implementá-los nas suas próprias operações de marketing. Quer seja um web designer freelancer ou trabalhe para uma empresa estabelecida, esperamos, pelo menos, fornecer alguma matéria de reflexão ou ideias que possa levar a um designer profissional.

O minimalismo tecnológico está fora de moda

As empresas de tecnologia têm vindo a mergulhar no minimalismo como uma abreviatura fácil para os logótipos das suas marcas e para o design da Web. No entanto, como mostra a investigaçãoMas, na realidade, isto está a passar rapidamente de moda. O consumidor médio considera o minimalismo dos logótipos contraproducente, uma vez que ofusca o objetivo da empresa. Uma forma abstrata não nos diz nada sobre o que a empresa oferece ou está a tentar vender-nos.

Ao longo do tempo, temos vindo a assistir a um minimalismo crescente nos logótipos das grandes empresas de tecnologia, do Twitter ao Instagram. Teoricamente, trata-se de uma extensão natural da omnipresença de muitas destas empresas no nosso quotidiano. Estamos tão familiarizados com elas que os simples contornos dos seus logótipos são reconhecíveis. É uma jogada de poder inferir que o seu logótipo está tão enraizado na memória das pessoas que é possível simplificá-lo até aos seus componentes mais simples.

O minimalismo pode, no entanto, correr mal. A mau exemplo O Google está a fazer uma série de reformulações para o G-suite no Gmail:

A razão pela qual os novos designs não funcionam tão bem é o facto de evitarem a utilidade em favor da marca. Como designers, estavam mais preocupados em universalizar o esquema de cores e minimizar as formas do que em manter o significado simbólico que os ícones costumavam ter.

Elementos de Web design retro

"O velho é novo", como diz o velho ditado (se nunca ouviu isto, é a prova do meu ponto de vista). O Web design não é avesso às garras afundadas da nostalgia ou a designs nostálgicos reinterpretados com lentes modernas. Atualmente, há toda uma geração de digital nativos que têm boas recordações da tecnologia retro e da "Internet vintage".

O sítio Web de Equipa3D é bastante especial neste aspeto. Apresenta uma miscelânea de sabores de design da velha guarda: esquemas de cores brilhantes dos anos 80, grelhas cibernéticas, componentes GUI da velha guarda no canto superior direito, graffiti cor-de-rosa brilhante e botões de interface grandes e desajeitados. Sem serem intrusivos, conseguem colocar uma boa dose de animação na página, o que dá mais sabor ao estilo retro.

Embora o sítio Web da Team3D aposte tudo no retro, pode ser um pouco óbvio para algumas pessoas. Há, no entanto, formas mais subtis de o fazer, como o nosso próximo exemplo:

Ciclos Gladiador tem um front-end muito bom que abre com uma animação de fundo de pessoas a comer à mesa. O truque é que o enquadramento da câmara está centrado na garrafa de vinho, que é o que a empresa fornece. Se passarmos por baixo disso, o layout retro do sítio Web entra em ação: a página tem um aspeto de cartão postal usado, a primeira imagem e o vídeo têm aquele aspeto de Polaroid, e as fontes têm um chanfro antigo com cores suaves.

Além disso, apesar de ser mais simples do que o exemplo anterior, nunca parece vazio devido a pequenos pormenores como a linha ondulada na secção central. A transparência do tipo de letra também deixa as imagens respirar e todas as cores combinam com o ambiente. É a prova de que não é preciso fazer tudo para estabelecer uma identidade. Por vezes, menos é mais.

Ambos os sítios invocam sentimentos de memórias antigas ou estética clássica, ao mesmo tempo que lhes dão um toque moderno. Existem vários estilos de design à escolha, mas é importante que seja clássico sem parecer datado.

Desenho e animação Web 3D

Qualquer designer de sítios Web profissional pode apreciar um efeito de profundidade bem feito. A conceção de um layout de sítio Web em 3D pode ser complicada de realizar, mas acrescenta muitos efeitos visuais. Também pode utilizar o espaço de forma útil, onde os objectos podem ser afastados com profundidade, deixando espaço para mais informação vertical e horizontal.

O Museu das Experiências Irritantes é fantástico por esta mesma razão:

Este livro humorístico Site do ZenDesk actua como uma visita digital a um museu que mostra os inúmeros aborrecimentos da Internet. Utiliza o efeito para envolver o espetador, como um jogo de browser. Life in Vogue faz algo semelhante com o seu mecanismo de viragem de páginas, passando suavemente do virar de páginas para a entrada num elevador. É muito cativante e uma óptima forma de conduzir o espetador através do sítio Web.

No entanto, nem todos os efeitos 3D precisam de ser tão evidentes. Alguns podem ser vistosos sem se excederem, mas oferecendo algo que atraia os sentidos.

Misturar e combinar multimédia com deslocação horizontal e vertical

Todas as empresas utilizam os recursos multimédia dos sítios Web, reunindo frequentemente 3 ou 4 tipos de meios de comunicação numa só página. No entanto, estas caraterísticas podem fazer com que tudo pareça desorganizado se os designers não procederem com cautela. Existem formas de tornar isto mais natural, utilizando formatos de deslocação alternativos e não apenas mantendo a verticalidade.

Uma das técnicas de web design para multimédia que tem vindo a ganhar mais destaque é o scrolling horizontal. Embora já exista há muito tempo, está a ganhar cada vez mais destaque nos últimos anos, com alguns bons exemplos. Provavelmente, a principal razão para isto é o facto de melhorar a navegação através do telemóvel. Os elementos horizontais misturados com os verticais permitem-lhe otimizar o espaço, especialmente se tiver muitas categorias para transmitir ao utilizador.

Outro exemplo da Life in Vogue (a sério, este é um bom sítio Web) é a sua Cartão postal secções:

A página transita facilmente do texto vertical para a deslocação horizontal da imagem. Isto economiza espaço na página e permite aos utilizadores navegar facilmente no carrossel de diapositivos. É uma alternativa interessante à deslocação constante para baixo e é certamente melhor do que espalhar as imagens pelo artigo. Também se enquadra na natureza cinética do resto do sítio.

Ajuda a fundamentar todas as partes da apresentação de um sítio Web com os seus próprios movimentos específicos que correspondem aos seus objectivos. Também não têm de estar na mesma página. Quando uma página é de deslocação vertical e outra é horizontal, pode dar a cada uma a sua própria identidade. Uma pode ter mais a sensação de uma apresentação de diapositivos, enquanto a outra pode ser lida como uma página Web normal.

O projeto de design UI/UX de Ben Hamilton A página pessoal faz isso muito bem, incorporando o seu sentido de design peculiar para os potenciais clientes verem:

O seu estudo de caso apresenta-se como um carrossel enquanto a página principal é vertical. Adequa-se ao objetivo do site, que é mostrar as suas capacidades de design. Também dá uma boa utilização à grelha do site, com um quadro estático (a informação de contacto), enquanto os outros se movem. Nota lateral: pontos de bónus por incluir uma opção para alternar o modo de alto contraste.

AR Web Design

Por falar em caraterísticas multimédia, a conceção de sítios Web em AR tem muitas possibilidades inexploradas. Neste momento, pode ser um pouco extravagante, mas vejo-o como tendo futuro se for aplicado corretamente. É uma das novas técnicas de conceção de sítios Web, pelo que o seu potencial pode ser difícil de avaliar.

A integração de códigos QR que o utilizador pode digitalizar permite-lhe aceder a partes do sítio Web com caraterísticas mais aprofundadas:

Outras empresas, como as lojas de retalho, utilizaram esta funcionalidade para criar técnicas de visualização para os seus serviços:

https://youtu.be/UudV1VdFtuQ

IKEA's aplicação permite-lhe imaginar como seria o seu produto em sua casa. Qualquer produto no seu sítio Web com os modelos 3D específicos pode ser acedido desta forma. Trata-se de uma nova forma de vender artigos e construir cliente certeza. Os códigos QR e as visualizações também constituem formas únicas de CTAs (call to action).

Rolagem paralaxe

O scrolling paralaxe acrescenta uma gama impressionante de movimento às suas páginas Web. Pode ser uma das melhores técnicas de web design para apresentar informações visuais em movimento de uma forma animada e desdobrável. Funciona com o movimento do cursor, o que o torna muito mais envolvente à medida que o sítio evolui com a viagem do utilizador através dele.

O STEEZY Studio tem um layout de paralaxe expansível em estilo acordeão bastante imaginativo para a sua página principal:

As cores alteram-se com o movimento do ecrã e as imagens abaixo expandem-se para cumprimentar o espetador. A informação apresentada flui. Os utilizadores da Internet são um grupo cansado que mal processa a informação no ecrã enquanto percorre um sítio, mas estas técnicas oferecem uma solução. Isto chama a atenção do utilizador de uma forma óptima, utilizando o espaço e o movimento linear para realçar determinados aspectos.

Pode ser uma ferramenta importante para contar históriasA página da Life in Vogue é uma página que combina todos estes elementos para contar uma narrativa convincente ao leitor. Pode ser uma história de marca, como a da Life in Vogue, ou uma história mais individual, como a página de Ben Hamilton.

Cursores personalizados e efeitos de passagem do rato

Os cursores personalizados funcionam muitas vezes num equilíbrio precário. Se forem mal feitos, podem ser um aborrecimento que não serve nenhum objetivo prático para além de serem vistosos. No entanto, mesmo os mais simples podem ter as suas vantagens, especialmente quando ajudam a orientar o utilizador através do sítio Web.

Um bom exemplo, mas pitoresco, é Fontsmithque tornam o cursor semi-transparente para que o leitor possa deslocar-se pelos vários tipos de letra do sítio Web, representados por blocos. O cursor não obscurece os blocos e a cor de destaque mistura-se bem com o fundo. Ajuda o espetador a identificar as fontes que destacam, algumas das quais podem ter diferenças muito subtis.

Pacote completo e Fabricado em Haus.com também têm efeitos criativos de passagem do rato que são um verdadeiro colírio para os olhos. O primeiro utiliza triângulos cinéticos de duas cores, semelhantes a jogos, que caem e se repelem em reação ao rato, enquanto o segundo tem um efeito mais subtil de lâmpada de lava caleidoscópica que muda com o cursor. Ambos acrescentam um pouco de fator "uau" ao sítio Web, realçando simultaneamente a criatividade destas empresas.

MinnimA página de contactos do Google, também tem um efeito de rato em que os padrões de vinil seguem e misturam-se com outras formas semelhantes à medida que se arrasta o cursor. Estas formas ajudam a destacar os contactos e as plataformas na página de contactos, que é uma secção de um sítio Web a que as pessoas raramente prestam atenção. Ajudam o espetador a recordar os pormenores que muitas vezes parecem banais noutros sítios.

Funciona como um marketing subtil, mas bom. A única coisa que falta é que sinto que essas imagens poderiam ter permitido hiperligações diretas para as suas páginas sociais e contactos.

Conclusão

Ora aí está. Estes exemplos deixam claro que o web design é uma arte por si só, mas há uma ressalva ao pensar nele em termos estéticos. O desenvolvimento e a conceção de sítios Web têm de ser, antes de mais, funcionais (ou seja, o principal objetivo da conceção profissional de sítios Web é servir uma função). Isto é verdade quer se trate de um principiante que utiliza WordPress temas ou mesmo se for um designer de pleno direito.

Esperamos que estes casos de design e desenvolvimento web ilustrem que é possível integrar imagens bonitas que sirvam um objetivo e conduzam o público através da sua página web de uma forma coerente. Não são apenas páginas Web bonitas, são arte funcional destinada a ser totalmente reactiva. Se há alguma conclusão a tirar disto, deve ser a de servir partes iguais de "visual" e partes iguais de "design" para otimizar a experiência do utilizador.

Se estiver interessado no nosso desenvolvimento de sítios web e serviços de conceção web, informe-nos.

Para além da imagem em destaque, Todos os créditos de imagem vão para os respectivos sítios Web.