O segredo por trás da criação de sites criativos

(Aline Kesting) (2 de setembro de 2020)

Muitas coisas entram no design de sites, mas há uma coisa que acreditamos ser extremamente importante quando se trata de sites criativos: estreita colaboração entre designers e desenvolvedores.

Depois de lançar um novo 14islands.com algumas semanas atrás, perguntaram-nos como criamos as animações flutuantes onduladas. Embora a magia do código por trás dessas interações venha com sorte em uma postagem futura no blog (fique ligado!), Quero me concentrar em como realmente projetamos essas animações. Você pode se surpreender.

Vire seu processo de cabeça para baixo

Ao iniciar um novo projeto, é fácil cair em algum tipo de processo em cascata. Você vai da pesquisa do usuário ao design e acaba com protótipos clicáveis. Você tem pontos de verificação de equipe ao longo do caminho, mas a colaboração de design e desenvolvimento geralmente não começa até que os protótipos já estejam feitos. Embora esse processo funcione para certos tipos de projetos, especialmente aqueles com mais estratégia, está longe de ser o mais criativo.

Quando iniciamos nosso novo processo de design de site, decidimos abordá-lo da mesma forma ( nos aproximamos de nossas sextas-feiras criativas), nas quais os experimentos costumam se inspirar em novas tecnologias empolgantes. Isso significa que os desenvolvedores criativos podem ser os únicos com uma ideia, e os designers pularam a bordo para ajudar a construir um conceito em torno dela. Dessa forma, projetamos e codificamos juntos, desde o início, em tempo integral, o tempo todo. 🚀

Conceitos de design de movimento no código

O benefício deste processo de design compartilhado é bastante simples. Freqüentemente, nós designers imaginamos um design de pixel perfeito e deixamos os desenvolvedores descobrir como melhor imitar esse design com código. Mas, especialmente quando se trata de sites criativos, o que imaginamos pode nem sempre ser viável, pode não ter a mesma aparência ou pode apenas se transformar em uma experiência de alto desempenho. Então, depois de passar um bom tempo polindo seus designs minimalistas, você fica sem tempo e vai com a solução que funciona melhor.

Se ao menos pudéssemos entender todas as oportunidades de WebGL, Three.js e CSS animações em vez de ver suas limitações, poderíamos ultrapassar os limites e desenvolver nossos conceitos de design de acordo com a tecnologia. Quando os desenvolvedores criativos fazem parte do processo de design, é exatamente o que acontece. Eles desafiam nossa maneira de pensar e trazem soluções exclusivas para a mesa que nunca pensaríamos por conta própria. E combinar esse conhecimento com um conceito forte leva à magia. ✨

Quando se trata de nosso site, passamos semanas explorando, descartando ideias e começando do zero. Com o tempo, definimos juntos onde queríamos ir e terminamos com uma interação que gostamos. Depois de termos um conceito de movimento, todo o resto se encaixou.

Aqui estão algumas de nossas primeiras explorações:

Explorações de movimento no código

Como o fizemos

Sem surpresa, nosso conceito de movimento final foi inspirado em ilhas. O que define uma ilha é a paisagem em constante mudança da água que molda a terra. Quando você pensa sobre isso, um site não é moldado por água, mas está constantemente reagindo a rolar, clicar, pairar e outros maus-tratos.

Exploramos a ideia de distorção da água para cada interação do usuário, mas queríamos para ficar bem minimalista, sem efeitos desnecessários que roubam a atenção do conteúdo real.

O conceito de movimento é assim: Olhe para o site e você terá a quietude de ilhas tropicais com águas cristalinas. Mas comece a rolar e interagir – é aí que as ondas começam. 🌊.

Movimento final do site em 14islands.com

Como designer, não tinha ideia de que era possível conseguir tal transformação fluida das bordas das miniaturas, então como eu poderia criar esse conceito de design? Começamos o processo juntos, trabalhamos juntos em um conceito e colaboramos todos os dias até o lançamento. E sendo parte de todo o processo, nossa equipe de desenvolvimento teve um papel crucial no design da experiência final.

Claro, projetar em código não significa que você deve interromper qualquer tipo de design de movimento durante o processo. Existem ferramentas de prototipagem fantásticas, como Figma e Flinto, e elas são ótimas para testar fluxos e micro-interações. Quando se trata de pura criatividade, o After Effects funciona melhor para nós porque dá muita liberdade.Mesmo se você não for um especialista em movimento, é útil deixar seu arquivo de design um pouco e explorar ideias de alto nível em movimento. Você obterá resultados mais tangíveis para descartar ou seguir em frente e fornecer à sua equipe de desenvolvimento uma base para começar a iterar.

Tudo o que os designers podem aprender com a tecnologia

Aqui vai : Envolva um desenvolvedor criativo em tempo integral durante o processo de design. Desafie-se, explore o movimento em paralelo e empurre as interações ainda mais até chegar ao conceito de movimento. Apenas depois de implementado, concentre-se nos designs detalhados de seu site. O conceito não apenas inspirará muitas das suas decisões de design futuras, mas também ajudará a construir a experiência de forma mais consistente, repetindo o movimento.

Na 14islands, temos a sorte de ter uma equipe muito compacta de designers e desenvolvedores trabalhando juntos todos os dias e estamos constantemente melhorando as formas de colaboração. Até agora, valeu a pena e trouxe muita criatividade ao nosso processo de design. Ficar curioso sobre como as coisas são construídas e desafiar uns aos outros no design e no código nos ajuda a criar experiências de usuário que são funcionais e minimalistas, mas também têm um toque extra de personalidade.

Espero que esta tenha sido uma leitura útil, deixe-nos saber se você tiver alguma dúvida ou sugestão. Até a próxima vez ✌️