Há algum tempo eu me inscrevi no curso de WebDesign junto à TheStarter - uma plataforma de cursos bem interessante e com uma variedade enorme de cursos na área tech. Meu primeiro desafio foi entender o que significava "malta" 😅
Ao ponto que, resolvido o desafio (não vou dar spoiler!), o curso passou a ser referenciado aqui em casa como: "Tenho aula com os Malta!", "exercício dos Malta..."
Depois, passamos por algumas boas práticas, na prática! Daí era só correr pro abraço!
- Digo, projeto!
O meu projeto do curso, foi baseado em um site que logo, logo, entrará no ar. Todas as documentações e passos que seguem, foram exercícios propostos para construção do site.
Passamos ainda, por termos práticos na venda desse e de futuros projetos, como: Proposta, Contrato e troca de e-mails junto ao cliente para aprovação dos passos e documentação. Sem esquecer de etapas importantes como heurísticas, análise de navegação, testes de velocidade, de SEO e de responsividade.
O curso foi ministrado pela maravilhosa Cláudia Machado, que além de ótima instrutora, sempre se mostrou solícita, disponível e engajada a oferecer o melhor.
Além de todo seu empenho, ela manteve uma humanidade e suporte, fora do normal, afinal, o que esperar de uma mulher potente e UX/UI Designer? - tá, tracei um paralelo aqui, mas é total real. E palavras ainda seriam pouco pra descrever toda a experiência junto a ela e ao curso como um todo. 😊
Ao final, precisei apresentar o projeto, como um pitch para o cliente final - que no caso, foi a própria Cláudia. O que ajudou a dar uma consciência de apresentação.
Como o meu projeto do curso não era fictício assim, eu ainda apresentei pro cliente real... e o projeto vai sair do papel - digo, figma, elementor e wordpress, para entrar na casa de muitas pessoas. E estou super feliz com isso. 😍
Introdução devidamente feita, vamos para a apresentação do que foi o projeto.
Vamos comigo?
O branding foi construído pela Alissa Nomura e foi uma identificação genuína e intensa por parte das clientes que estão à frente da marca (primas-amigas que compartilham o amor à praia e o auto amor, e, embora estejam em continentes distintos... entendem que as peças atenderiam e romperiam com essa e outras distâncias mais).
Passo 1
Elas já trouxeram uma ótima definição do que estavam buscando.
“Queremos um site que seja como seria nossa loja física. Que as pessoas não vejam uma arara cheia de peças, mas algo que convide a pessoa a se conhecer, conhecer todo o cuidado na escolha de todas as peças. Queremos um site pra receber e nos apresentar”
Definimos em uma reunião quais seriam os conteúdos que estariam inclusos no site e qual seria a funcionalidade dele, além dos direcionamentos necessários. E diante dessas informações, pude construir o SITEMAP (um mapa que indicaria as páginas, subpáginas, direcionamentos e links no site), veja abaixo:
Como já havia um branding, havia portanto, a idéia de tipografia a ser utilizada, as cores e logo. O desafio aqui, era encontrar a identidade visual das imagens que conversariam com os objetivos da cliente, e que tornassem a navegação o mais acolhedora, direta e clean. E foi pensando nestes últimos adjetivos, que a navegação escolhida foi um site ONE PAGE. Portanto, não haveriam páginas ou subpáginas, mas sim, sessões acessadas por páginas-âncora.
Passo 2
Então, o próximo passo, foi fazer um WIREFRAME de alta fidelidade, e como o site seria responsivo, foi feito o wireframe para o DESKTOP e para o MOBILE. Todo o wireframe e documentação desses passos foram feitos e concentrados no Figma.
O site não tem o objetivo de ser um e-comerce, mas sim, de ser a saudação e apresentação da marca. De ser a recepção aos clientes que chegam na porta querendo conhecer e se sentir acolhidos.
Sem esquecer o direcionamento principal de venda, aí sim um e-commerce, justificando o site ter botão principal de destaque no header e em todas as sessões, com direcionamento para a loja virtual.
Deixarei no final do post o link para os protótipos no figma, mas para não interromper o fluxo e a apresentação, vamos seguir, ok?
(Se o objetivo for navegar e olhar o protótipo do Figma, pode correr a tela lá pra baixo - mas não aconselho perder toda a emoção da apresentação. 😁)
Passo 3
Próximo passo, foi portanto, definir os componentes de UI do site, como pode ser visto abaixo:
Passo 4
O próximo passo, se resumia à dar vida aos pensamentos, tornar mais claro, mais legível, obedecer os princípios de acessibilidade e leitura do site. Tornar a navegação enfim, um abraço. Como se houvessem de fato, entrado no que seria a loja física, caso ela existisse. Como se estivessem sentadas juntas, conversando, rindo e apresentando cada detalhe das peças e características que tornariam essa experiência de uso das peças a escolha acertada para se empoderar, sensualizar e comunicar-se corporalmente. Mas com um detalhe: Conforto! Muito conforto!!
O protótipo de alta fidelidade e guia para construção do site, também foi feito no figma (vai ter o link no final, mas concentra aqui... vamos terminar o processo passo a passo 🤘).
Passo 5
Com a aprovação do protótipo, era só fazer os passos e montar por fim o site no Wordpress, que por fim, com algumas mudanças sutis, obedeceram o layout original e finalizado, ficou como demonstrado a seguir.
PITCH DE APRESENTAÇÃO DO SITE
Como o site ainda não foi ao ar, não há link disponível para compartilhar, mas a navegação tal como será em visualização na web, pode ser vista abaixo:
E como prometido, segue os links referenciados no texto:
Figma- wireframe de alta definição (navegue entre os flows para alternar entre desktop e mobile)
Figma- protótipo navegável (navegue entre os flows para alternar entre desktop e mobile)
Logo mais o post será com o link definitivo do site em funcionamento… e aí malta, estou bem ansiosa pra isso!
Aliás, descobriram o que significa malta?
😜😎
Até breve!