logo da vtnorton

ūüďį Outras postagens

Organizando a marca e este site no Figma

Organizando a marca e este site no Figma

#projetos#design
por vítor norton, em 24/05 às 00h00

Organizando a marca e este site no Figma

Há pouco fiz uma thread no Twitter mostrando o processo no qual estou colocando a marca vtnorton e, mais especificamente, o site no Figma e como ele ajudou a evoluir. Estou repassando a thread para aqui, veja!Eu tenho um projeto para tudo o que é relacionado a marca da minha empresa. Aqui entra o site, logo, cores, componentes e outras coisas. A ideia é ter mais dois projetos (um só para clientes e outro só para meus produtos).
notion image
Para repassar o site para o Figma eu criei uma página dentro de um arquivo com a v1 do site. Fiz idêntico ao site (tem live lá na twitch.tv/vt_norton com o processo)
notion image
Depois eu fiz a v2. Copiei os componentes que havia criado na v1 para uma nova página, dei uma atualizada e organizei eles melhor. Também deletei os componentes da v1 pois não iria utilizar eles novamente, foi muito embrionário.
A v2 usei para componentizar tudo, e todas as formas e comportamento, como nos exemplos da imagem.
E ent√£o fiz a v2 do site. Corrigindo alguns problemas de UX, como nessa p√°gina. Quais?
Essa é a página dos apps, e não tinha ícone do app, os links de auxílio tinha mais destaque que o link para baixar o app, por exemplo.
notion image
notion image
Uma outra alteração foi os componentes da twitch e do youtube, que agora ficaram mais interessantes.
notion image
Foram v√°rios ajustes que j√° estava precisando ser feito no site e com os conceitos de UX que venho aprendendo nos √ļltimos meses. Mas essas corre√ß√Ķes foram s√≥ o come√ßo.
At√© que eu precisei criar um arquivo diferente para a v3. Pois eu queria ainda utilizar os componentes que tinha na v2, por√©m precisei modificar alguns. Foi a√≠ que coloquei o n√ļmero da vers√£o no thumb. Tamb√©m adicionei uma p√°gina for-fun para brincar com algumas coisas l√°.
A v3 é uma versão mais atual do site que eu já estava querendo fazer há alguns meses. Em todas as páginas/frames está o tamanho da tela de acordo com o grid do bootstrap.Então vai ter:home @ lg-screenhome @ md-screenhome @ sm-screenhome @ xs-screenAinda vou fazê-las.
notion image
A ideia com as pagina√ß√Ķes agora √© usar v3.1, 3.2 com outras p√°ginas e novas informa√ß√Ķes que eu for colocar no site. Teste AB e afins.
Quando eu precisar modificar os componentes, ent√£o xablau, v4!
Tech detail: o site agora tem o mesmo versionamento que no Figma.
O outro arquivo que eu tenho é o branding. Nele eu tenho algumas páginas para colocar tudo que é relacionado a marca. Como por exemplo as capas dos stories highlights no instagram, os paineis da twitch e os icones de projetos.
Tá, mais como fica a exportação de tudo isso? Eu tenho uma pasta chamada design, nela eu tenho outras… Cada ano os arquivos que utilizei lá. Inclusive capas de redes sociais e logos. Mas isso é passado.
Na pasta de ‚ÄúCorporate images‚ÄĚ s√£o imagens livres para serem usadas.
Ainda vou refazer a pasta identidade visual e colocar no figma.
A m√°gica acontece na Brandings, que cada p√°gina no Figma virou uma pasta. E cada frame, um arquivo exportado.
notion image
notion image
Então, é assim que estou fazendo as coisas por aqui… Satisfeitíssimo com essa evolução. Talvez faço um post no meu blog. Ficou faltando falar algo? Se sim, só perguntar.
Ah, quer dar uma brincada lá no Figma, decidi deixar o arquivo aberto, só abrir nesse link: https://www.figma.com/file/1Z7egcOuJYsgxHUKxqfaGa/vtnorton.com-v3