10 Tendências de Web Design para Esperar em 2023

'Modo Goblin' foi escolhido como a palavra do ano de 2022 em Oxford. O termo refere-se a “um tipo de comportamento que é assumidamente auto-indulgente, preguiçoso ou desleixado e normalmente rejeita normas ou expectativas sociais”. Tornou-se a primeira palavra do ano a ser decidida pelo voto público.

Não é nenhum segredo que nós, como sociedade, caímos lentamente na auto-indulgência nas últimas décadas. Às vezes, é embaraçoso e às vezes excessivo, mas você pode ver isso em todos os aspectos da vida ocidental. Vestir moda atlética, comprar tudo online, pedir fast food quando estamos com preguiça e assistir às últimas séries de TV. Estes são apenas alguns exemplos da vida moderna que criam a atmosfera perfeita para o nosso goblin interior irromper. E agora que o modo goblin é um conceito amplamente aceito, é intrigante pensar em como isso se refletirá no web design no futuro.

Essas normas sociais recém-evoluídas, como o termo goblin reflete, são interessantes quando as correlacionamos com o design de UI e UX. Em sua essência, o design de UI e UX é um campo baseado em padrões, melhores práticas e no estudo dos usuários, tentando ser o mais inclusivo possível. Uma das maneiras pelas quais vemos essa tendência em ação é por meio de sites goblin que colocam a marca em primeiro lugar, antes do usuário. Ignorando as melhores práticas e até mesmo a acessibilidade às vezes, esses sites questionam o que é “beleza”. Eles aspiram fortalecer a presença da marca, tornando o site memorável e envolvente usando um estilo áspero, transbordamento de imagens, duplicações, cores fortes, sonoridade, animações de entrada duras, objetos múltiplos, etc. Podemos nos apaixonar por esses sites, ou criticar eles, mas não podemos fingir que nunca usamos um ou dois desses truques para aumentar a presença de um site.

O estúdio Bornfight é uma pequena agência especializada em produção web. Sua atitude Goblin é manifestada através do tom de voz de seu site, que é muito “na sua cara”, desinibido e um tanto atrevido. Pegue seu divertido banner de biscoito, por exemplo – “a vida é amarga, então usamos cookies”, ou a afirmação sincera de que eles trabalham por elogios e dinheiro, e as animações impressionantes, mas lindas, de imagens sobrepostas.

Do outro lado do espectro do maximalismo, vemos um movimento de simplicidade que afirma que tudo o que precisamos é de algum equilíbrio – um exercício de “desaceleração”. Essa tendência cria uma experiência agradável e relaxante para o usuário e é oposta à “cultura das aparências”.

Veremos cada vez mais sites que exploram a simplicidade através da redução de detalhes, pedindo para alcançar o anonimato.

Esses sites às vezes agem como uma estrutura ou wireframe projetado, usando tipografia minimalista, uma variedade limitada de estilos de tipografia no site, cores suaves que se alinham com imagens grandes ou com ilustrações amorfas que substituem ilustrações detalhadas de UX. Além disso, às vezes, uma doce rolagem de animação envolve o site e faz você flutuar na serenidade.

Surpreendentemente, pode ser um processo difícil projetar um site como este, pois a maturidade do designer é necessária para entender onde está a essência e o que é redundante. Esses sites às vezes se destacam mais, tanto em termos de estilo quanto de desempenho, diferenciando-os dos sites concorrentes que são carregados com conteúdo e imagens.

Templeton Clothing é um site de comércio eletrônico dos Alpes do Norte da Baviera. Uma rápida olhada em sua seção de heróis é suficiente para entender sua atitude; animação em câmera lenta, sem promoções ou sem CTA. Sem palavras, eles estão pedindo para você entrar e rolar. As bordas lineares em preto e branco e as grandes imagens se encaixam em seu “antidesign, destacando os produtos como o principal e a marca como secundária.

No ano passado, falamos sobre scrollytelling e, embora pareça uma década atrás, este ano parece que a experiência na web deu vários passos à frente com novas formas de engajamento.

Antes de criarmos um site, mapeamos a jornada do usuário e, por razões funcionais, criamos uma estrutura e um framework. Se fizermos um paralelo com o mundo real, o site é um caminho que queremos que o usuário percorra até a conversão. A questão que essa tendência levanta é: qual é a jornada do usuário e como ela deve ser em 2023?

Essa abordagem de 'deleite' nos inspira a começar a pensar no site como mais do que apenas um conjunto de páginas, mas sim como uma experiência tridimensional. O objetivo geral, é claro, é manter os usuários envolvidos e curiosos e conduzi-los adiante no caminho com surpresas e alegres ovos de páscoa ao longo do caminho. Um ótimo exemplo desse prazer alegre é o cursor animado, que pode desempenhar um papel importante no aprimoramento da experiência do usuário em web design.

Fora dessa escola de pensamento, podemos pensar nos recursos que costumávamos descartar como técnicos, bifurcações na estrada, como o menu ou links internos, CTA e também os fins da estrada – como o rodapé ou 404. Nessas “áreas de conflito”, podemos mapear os sentimentos que os usuários podem experimentar, como sucesso ou fracasso, interesse, confiança ou suspeita, etc. Adicionar animações, mensagens de marketing e motivos humorísticos pode facilitar a experiência do usuário e estreitar o vínculo entre o usuário e a marca. Parece que, por enquanto, os clientes não têm sentimentos fortes em relação a estas áreas, o que as torna o local ideal para dar largas à nossa criatividade.

Studio Brot é uma agência de design focada em publicidade e branding. Seus serviços são divididos e simplificados, apresentados ao usuário na forma de uma metáfora de panificação (Brot – alemão para pão). Nós nos apaixonamos por suas técnicas de navegação e pelas várias animações em todo o site que sempre o mantêm no limite, fazendo você se perguntar o que esperar a seguir.

Como parte da confusão de fronteiras entre o físico e o virtual, é fascinante mergulhar e prever as mudanças na arena do comércio eletrônico. É um pouco paradoxal. Por um lado, o design físico está se tornando hiperdigitalizado, mas, por outro lado, alguns ousados ​​sites de comércio eletrônico sugerem uma experiência de compra sensual e palpável.

Por um bom motivo, muitos de nós gostamos de entrar em uma loja de roupas, sentir o cheiro de roupas novas ou experimentar uma camisa e sentir a maciez do tecido. Essa tendência da web tenta reproduzir uma experiência real de compra por meio de exibições interativas de produtos que adicionam outra camada de dimensão para tornar todo o processo de compra quase tangível.

Mesmo com um orçamento pequeno, podemos tentar estimular os sentidos do usuário usando animações lottie, rotação e animações 3D – tudo para incentivar o usuário a explorar e se envolver com o produto que estamos vendendo. Isso cria uma sensação poderosa e memorável de descoberta dos recursos, ângulos e iluminação do produto com um grande senso de diversão. O truque é entender como o seu produto é diferente dos outros e como fazer o usuário interagir com ele.

Grace é um produto nutricional, com uma abordagem de marketing impactante. Eles permitem que os usuários simulem a experiência de desembalar, brincar com a embalagem e revelar o produto por meio de uma jornada de usuário cuidadosamente elaborada que nem mesmo é possível na loja física.

Embora estejamos longe dos estágios iniciais da tecnologia de IA, só recentemente ela se tornou acessível ao público e parece que todo mundo está falando sobre isso. No ano passado, testemunhamos o surgimento de vários mecanismos de IA online que parecem mudar o jogo. Mecanismos como ChatGPT, dall.e2, Midjourney, Stable diffusion, para citar alguns, juntamente com a tecnologia deepfake, provocaram um amplo debate sobre como seria nosso papel como criadores no futuro.

Grande parte da conversa gira em torno da noção de que a IA logo tornará obsoleta a necessidade de profissionais criativos. Esta é uma abordagem bastante distópica. A verdade é que a IA em seu estado atual é mais uma ferramenta para usarmos do que uma substituição futura. E vamos usá-lo.

Vimos essa tendência se acelerando nos últimos meses com a explosão de dall.e2 e Midjourney em cena com seus recursos de criação de imagens de cair o queixo. Mais recentemente, a introdução do ChatGPT na mistura e a microcópia nunca pareceram tão acessíveis. Mas é importante lembrar que os resultados que obtemos com esses motores exigem trabalho e, como qualquer ferramenta, quanto mais a dominarmos, maior será nosso controle. Vamos nos concentrar na criação de imagens. Se tomarmos o Midjourney, por exemplo, você pode facilmente criar imagens a partir de prompts de texto simples. Essas são imagens que costumavam levar uma eternidade para criar ou até mesmo encontrar e comprar os direitos. Mas prompts simples só levam você até certo ponto. A chave é refinar suas consultas à medida que avança, concentrando-se nas áreas que você sente que precisam ser trabalhadas. Quanto mais fundo você cavar, mais rápido chegará aos resultados desejados.

Em maio comemoraremos 20 anos de WordPress. A introdução do WordPress desencadeou uma espécie de revolução própria, trazendo a criação da web para as massas. Agora, estamos em 2023 – e a cada poucas semanas lemos sobre um desenvolvimento digital diferente e sensacional.

Às vezes, queremos estar na vanguarda da tecnologia como bons adotantes iniciais, ler um artigo e aprender uma nova ferramenta ou técnica e compartilhar nossas descobertas com nossa comunidade de criadores da web. Mas, de vez em quando, preferimos pular a curva de aprendizado, nos aconchegar e nos apegar ao passado confortável, mesmo nesta era de aceleração digital. Ainda vemos muitos motivos dos anos 80-90. O que nos intriga é a saudade da tecnologia antiga, como o primeiro computador que tivemos em casa ou o CD player compacto de aparência pateta.

Portanto, para os retardatários entre nós, ou para os que gostam do Y2K, notamos especialmente colagens, pixelização, cores fortes, interface do usuário semelhante ao MS-DOS e influências de jogos de arcade antigos.

A Hie é uma agência de talentos para criadores de conteúdo. Eles usam objetos nostálgicos e os reimaginam de um ponto de vista contemporâneo. Essa brincadeira é projetada para agradar nossa curiosidade e nos atrair.

A capacidade de atenção das pessoas cai cada vez mais a cada ano. Podemos culpar as mídias sociais, Tiktok e Instagram, é claro, mas também somos consumidores e criadores. Dada essa realidade, a interface do usuário não pode permanecer estática. O Motion é uma ótima ferramenta para atrair usuários e pode ser uma experiência muito eficaz e imersiva. No ano passado, vimos como o movimento é usado para nos manter engajados, levando-nos a consumir mais conteúdo. Isso permite que nós, como usuários, sintamos que estamos interagindo com o site em um nível mais alto do que antes e de uma maneira mais significativa.

Nossos usuários estão acostumados a ver pixels se movendo e pulando; eles esperam obter indicações para cada ação. Esse feedback permite que o usuário se sinta um participante ativo, fazendo com que se sinta presente e focado. Uma maneira de criar essa experiência é por meio de animação de rolagem suave, feita usando efeitos de paralaxe flutuantes entre as seções que facilitam as micro animações. Outro exemplo, que esperamos que se torne mais popular, é o movimento que excede as normas – indo tão longe quanto brincar com o senso de equilíbrio e gravidade do usuário. Veremos mais animações ou vídeos integrados que visam brincar com seus olhos, com animações de entrada brutas, ampliações poderosas, zoom-ins, fontes variáveis, adesivos de rotação e assim por diante. Às vezes pode ser cansativo, mas a atenção do usuário é tão preciosa que tentaremos atraí-la por todos os meios necessários.

Estudios Victor Cordon é uma plataforma criativa que apoia a comunidade artística independente. Eles usam movimento contínuo constante conforme você rola de seção para seção. Uma coisa a notar, que achamos bonita e única, é que os componentes na tela são na verdade estáticos, mas o movimento criado pelo fundo dá uma sensação de fluidez e movimento constante.

Em contraste com a estética de design limpo, vemos cada vez mais sites que literalmente ultrapassam os limites com layouts tipográficos exclusivos. Essa tendência é bastante surpreendente, considerando que essa prática de design é comum em mídias com pouco espaço, como contracapas, pôsteres de festivais de música, rótulos e sinalizações etc. abandonamos em favor da tela e da experiência interativa.

Com o objetivo de chamar a atenção, os mais interessantes brincam com tipografia e grids, deixando de lado os layouts convencionais da web em sua missão de criar uma experiência de visualização baseada em texto memorável. Esses sites tendem a usar papel timbrado de tamanho grande com tipografia de estilo brutalista, que normalmente não é usado na web. Como parte desse movimento, também podemos ver mais sites com seções que possuem apenas um parágrafo com um tamanho de fonte tão grande que ocupa toda a seção. Juntos, adicionam um elemento dinâmico à página, mesmo quando ela é estática.

A página da web de Parazker tem muito o que absorver. Essa única dobra poderia ter sido facilmente espalhada por várias dobras e páginas, mas essa apresentação cria uma sensação de familiaridade, como rótulos em embalagens ou códigos de barras. Os designers aqui condensaram todas as informações em uma única dobra, para que os usuários possam visualizar tudo de uma vez.

Em uma época de vozes crescentes de extremistas no mundo real, temos a oportunidade de fazer a diferença aqui no universo alternativo da web que criamos. Afinal, nós, como criadores da web, somos uma grande comunidade. Temos a oportunidade de agregar mais valor e tornar a world wide web um lugar melhor e mais inclusivo.

Junto com o aumento da dependência digital em nossa sociedade, desde o surgimento do Covid19, os usuários estão gastando muito mais tempo online para obter até mesmo os serviços mais básicos. Ao iniciar um projeto, geralmente criamos um resumo preciso e adaptamos o design para uma personalidade e necessidade específicas do usuário. Talvez este ano, nossa resolução de ano novo possa ser tentar ver a Internet através dos olhos dos outros – tornando a tecnologia utilizável para todas as pessoas, independentemente de suas habilidades, situação econômica, idade, educação ou localização geográfica.

É uma pequena mudança de mentalidade e um pequeno ajuste no fluxo de trabalho. Começa desde o início com a responsabilidade de educar os clientes sobre a acessibilidade e os requisitos legais que ela acarreta. Pensar nisso desde o estágio inicial e investir um pouco mais de tempo e esforço pode ajudar a moldar o estilo de design do site. Podemos usar cores e tamanhos de fonte com sabedoria, bem como texto alternativo e suporte para navegação por teclado. Projetar através das lentes desse desafio pode não apenas criar novos estilos e convenções, mas também mudar a forma como experimentamos a web como um todo.

A mídia social, com suas infinitas possibilidades, ainda tem algumas limitações; compartilhar apenas um link em seu perfil é certamente uma delas. Assim nasceu o 'Link na bio'. O link na biografia é basicamente uma página de destino projetada para conectar redes sociais, sites, lojas, vídeos, músicas, podcasts, eventos e muito mais. Todos eles se reúnem nesta página projetada para conectar, formar novos relacionamentos e converter.

Com o número cada vez maior de usuários que chegam através das mídias sociais, a pergunta que vem à mente é: como deve ser essa ponte entre seu perfil social e seu site? É simplesmente uma extensão da sua página de perfil?

A partir de agora, o link no layout da bio é muito básico. Os recursos e oportunidades ocultos neste layout de página de destino ainda não foram totalmente explorados. Exibições semelhantes a listas ou uma galeria – elas são projetadas principalmente com botões ou fotos iguais em tamanho e hierarquia. A questão surge, porém, eles deveriam ser? Todos os seus links têm o mesmo peso?

Como as metodologias de navegação serão integradas nessas páginas simples? Provavelmente veremos esse campo se expandindo no próximo ano, com criadores sugerindo novas visões de como esse cartão de visita digital deve ser.

Resumo