On.We - Landing Page
Período: Abril de 2023 até Agosto de 2023.
Função: UX/UI Designer.
Jornada
Análise do projeto
Definição de problema
UX/UIDesign
Entrega de projeto
Objetivo do projeto
Esse projeto foi o meu primeiro trabalho profissional como UX/UI Designer. Meu principal objetivo foi desenvolver um novo site institucional para a On.We.
Exerci a função de UX/UI Designer e coloquei em prática meus conhecimentos de UI Design como, wireframes, escala de tipografias, contraste de cores, interface responsiva e alta fidelidade de um protótipo.
Cores
A On.We já possuia uma identidade visual forte e visível, meu trabalho foi de realizar a verificação de contraste e adicionar possíveis cores de suporte para a interface.
Style guide
Cores principais
Cor primária
#FF870C
Cor secundária
#3F2B81
Cor suporte
#9FCE34
Cinza
#25303B
Cores complementares
Rosa
#E83363
Azul
#4FBAAD
Amarelo
#FCBF2C
Tipografia
A On.We utiliza duas fontes para se comunicar com o seu público, elas expressam desconstrução e leveza. Nessa etapa do projeto, meu trabalho foi de realizar a escala das tipografias utilizando como apoio o material.io.
BioRhyme
Títulos
Título 01
Bold - 39 px - 0,25px
Título 02
Bold - 27 px - 0px
Título 03
Bold - 23 px - 0,15px
Corpo 01
Bold - 18 px - 0,5px
Corpo 02
Bold - 16 px - 0,25px
IBM Plex Sans
Corpo, subtítulo e botões
Título 01
Regular - 35px - 0,25px
Título 02
Regular - 25px - 0px
Título 03
Medium - 21px - 0,15px
Corpo 01
Regular - 18px - 0,5px
Subtítulo 01
Regular - 17px - 0,15px
Corpo 02
Regular - 16px - 0,1px
Subtítulo 02
Medium - 15px - 0,1px
Legenda
Regular - 14px - 0,4px
Wireframe
Após concluir o style guide, minha próxima tarefa foi de realizar a estrutura do site. Para fazer essa parte do projeto eu utilizei a ferramenta Figma para prototipagem, produzi interfaces em desktop e mobile e estruturei grids para alinhamento do site.
Veja o protótipo do wireframe:
Alta fidelidade
Após finalizar a etapa de wireframe, comecei a realizar a parte final do projeto: a alta fidelidade. Ao trabalhar nessa etapa, eu trabalhei em ajeitar as tipografias; cores; imagens; vetores e espaçamentos utilizando os métodos de usabilidade e acessibilidade de UI Design. As ferramentas Figma e Photoshop foram de grande ajuda para essa etapa.
Veja o protótipo da alta fidelidade:
Resoluções
Realizar esse projeto da On.We foi muito importante para a minha carreira pois tive a oportunidade de colocar os ensinamentos de cursos anteriores em prática em um projeto profissional, foi muito realizador ver essa interface tomar forma e se tornar algo autêntico. Aprendi muito com esse trabalho, acertos e erros que levo comigo até hoje e que com certeza me fizeram crescer como profissional.
Resoluções
Resoluções
Realizar esse projeto da On.We foi muito importante para a minha carreira pois tive a oportunidade de colocar os ensinamentos de cursos anteriores em prática em um projeto profissional, foi muito realizador ver essa interface tomar forma e se tornar algo autêntico. Aprendi muito com esse trabalho, acertos e erros que levo comigo até hoje e que com certeza me fizeram crescer como profissional.
Realizar esse projeto da On.We foi muito importante para a minha carreira pois tive a oportunidade de colocar os ensinamentos de cursos anteriores em prática em um projeto profissional, foi muito realizador ver essa interface tomar forma e se tornar algo autêntico. Aprendi muito com esse trabalho, acertos e erros que levo comigo até hoje e que com certeza me fizeram crescer como profissional.
Objetivo do projeto
Esse projeto foi o meu primeiro trabalho profissional como UX/UI Designer. Meu principal objetivo foi desenvolver um novo site institucional para a On.We.
Exerci a função de UX/UI Designer e coloquei em prática meus conhecimentos de UI Design como, wireframes, escala de tipografias, contraste de cores, interface responsiva e alta fidelidade de um protótipo.
Jornada
Análise do projeto
Definição de problema
UX/UIDesign
Entrega de projeto
Style guide
Cores principais
Cor primária
#FF870C
Cor secundária
#3F2B81
Cor suporte
#9FCE34
Cinza
#25303B
Cores complementares
Rosa
#E83363
Azul
#4FBAAD
Amarelo
#FCBF2C
Cores
A On.We já possuia uma identidade visual forte e visível, meu trabalho foi de realizar a verificação de contraste e adicionar possíveis cores de suporte para a interface.
Tipografia
A On.We utiliza duas fontes para se comunicar com o seu público, elas expressam desconstrução e leveza. Nessa etapa do projeto, meu trabalho foi de realizar a escala das tipografias utilizando como apoio o material.io.
IBM Plex Sans
Corpo, subtítulo e botões
Título 01
Regular - 35px - 0,25px
Título 02
Regular - 25px - 0px
Título 03
Medium - 21px - 0,15px
Corpo 01
Regular - 18px - 0,5px
Subtítulo 01
Regular - 17px - 0,15px
Corpo 02
Regular - 16px - 0,1px
Subtítulo 02
Medium - 15px - 0,1px
Legenda
Regular - 14px - 0,4px
BioRhyme
Títulos
Título 01
Bold - 39 px - 0,25px
Título 02
Bold - 27 px - 0px
Título 03
Bold - 23 px - 0,15px
Corpo 01
Bold - 18 px - 0,5px
Corpo 02
Bold - 16 px - 0,25px
Alta fidelidade mobile
Wireframe desktop
Após concluir o style guide, minha próxima tarefa foi de realizar a estrutura do site. Para fazer essa parte do projeto eu utilizei a ferramenta Figma para prototipagem, produzi interfaces em desktop e mobile e estruturei grids para alinhamento do site.
Alta fidelidade desktop
Após finalizar a etapa de wireframe, comecei a realizar a parte final do projeto: a alta fidelidade. Ao trabalhar nessa etapa, eu trabalhei em ajeitar as tipografias; cores; imagens; vetores e espaçamentos utilizando os métodos de usabilidade e acessibilidade de UI Design. As ferramentas Figma e Photoshop foram de grande ajuda para essa etapa.
Após finalizar a etapa de wireframe, comecei a realizar a parte final do projeto: a alta fidelidade. Ao trabalhar nessa etapa, eu trabalhei em ajeitar as tipografias; cores; imagens; vetores e espaçamentos utilizando os métodos de usabilidade e acessibilidade de UI Design. As ferramentas Figma e Photoshop foram de grande ajuda para essa etapa. Veja o protótipo da interface:
On.We - Site institucional
On.We - Site institucional
Período: Abril de 2023 até Junho de 2023.
Função: UX/UI Designer.
Jornada
Análise do projeto
Definição de problema
UX/UIDesign
Entrega de projeto
Style guide
Cores principais
Cor primária
#FF870C
Cor secundária
#3F2B81
Cor suporte
#9FCE34
Cinza
#25303B
Cores
A On.We já possuia uma identidade visual forte e visível, meu trabalho foi de realizar a verificação de contraste e adicionar possíveis cores de suporte para a interface.
Tipografia
A On.We utiliza duas fontes para se comunicar com o seu público, elas expressam desconstrução e leveza. Nessa etapa do projeto, meu trabalho foi de realizar a escala das tipografias utilizando como apoio o material.io.
IBM Plex Sans
Corpo, subtítulo e botões
Título 01
Regular - 35px - 0,25px
Título 02
Regular - 25px - 0px
Título 03
Medium - 21px - 0,15px
Corpo 01
Regular - 18px - 0,5px
Subtítulo 01
Regular - 17px - 0,15px
Corpo 02
Regular - 16px - 0,1px
Subtítulo 02
Medium - 15px - 0,1px
Legenda
Regular - 14px - 0,4px
BioRhyme
Títulos
Título 01
Bold - 39 px - 0,25px
Título 02
Bold - 27 px - 0px
Título 03
Bold - 23 px - 0,15px
Corpo 01
Bold - 18 px - 0,5px
Corpo 02
Bold - 16 px - 0,25px
Cores complementares
Rosa
#E83363
Azul
#4FBAAD
Amarelo
#FCBF2C
Wireframe desktop
Após concluir o style guide, minha próxima tarefa foi de realizar a estrutura do site. Para fazer essa parte do projeto eu utilizei a ferramenta Figma para prototipagem, produzi interfaces em desktop e mobile e estruturei grids para alinhamento do site. Veja o protótipo da interface: