VorkWeb - Landing Pages
Período: Julho 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
Wireframe
Após finalizar a idealização do style guide, realizei a arquitetura da interface digital. Nessa etapa foquei no alinhamento da interface por meio dos grids; fluxo de como apresentar a empresa para o usuário e copy do site.
Objetivo do projeto
O principal objetivo desse projeto era realizar uma única página de apresentação da empresa que suprisse a questão estética, valores e o propósito. Ao realizar esse projeto, segui as demandas do cliente de querer uma interface em dark UI, minimalista e moderna.
Tipografia
As fontes escolhidas para compor a interface da VorkWeb foram a Kanit por ser uma tipografia moderna e simples e a Share Tech Mono para realizar um pouco de contraste com sua forma tech.
Painel semântico
Para ter uma compreensão melhor dos conceitos que o meu cliente gostaria, eu realizei uma pesquisa de referências onde foi possível ver padrões de interface e o que seria interessante apresentar nessa nova interface.
Style guide
Cores principais
Para criar uma identidade visual para a VorkWeb juntei os principais tópicos requeridos pelo meu cliente: moderninade e minimalismo. Com isso, consegui juntar algumas hipóteses e a melhor escolha foi de um tom de azul escuro com preto e branco para auxiliar a interface.
Cor primária
#2141CA
Cor secundária
#001D99
Preto
#E7E7E7
Cinza
#D9D9D9
Preto 01
#1B1B1B
Preto 02
#333333
Kanit
Títulos, corpo, legendas e botões
Título 01
38 px - 0,25px - Regular
Título 02
27 px - 0px - Regular
Título 03
21 px - 0,15px - Medium
Subtítulo 01
18 px - 0,15 - Regular
Corpo 01
16 px - 0,25px - Regular
Legenda
14 px - 0,4 - Regular
Share Tech Mono
Subtítulos
Subtítulo 01
21 px -0,25px - Regular
Subtítulo 02
17 px - 0,15 px - Regular
Subtítulo 03
15 px - 0,11px - Regular
Alta fidelidade
A última etapa do projeto consistiu em realizar a alta fidelidade da interface. Nela trabalhei com ajustes de cores, tipografia e espaçamentos. Utilizei as ferramentas de design Figma e Photoshop para me auxiliar nessa etapa.
Resoluções
Esse projeto foi realizador de se trabalhar pois foi meu primeiro design de dashboards. Aproveitei a oportunidade para aprimorar minhas habilidade com o Figma utilizando técnicas mais avançandas para agilizar o trabalho como: componentes; variáveis e auto-layouts.
As telas do projeto foram entregues em modo responsivo de celular e desktop, mais de 50 telas em alta fidelidade e documentação completa de design systems para a empresa.
Objetivo do projeto
O principal objetivo desse projeto era realizar uma única página de apresentação da empresa que suprisse a questão estética, valores e o propósito. Ao realizar esse projeto, segui as demandas do cliente de querer uma interface em dark UI, minimalista e moderna.
O principal objetivo desse projeto era realizar uma única página de apresentação da empresa que suprisse a questão estética, valores e o propósito. Ao realizar esse projeto, segui as demandas do cliente de querer uma interface em dark UI, minimalista e moderna.
Jornada
Análise do projeto
Definição de problema
UX/UIDesign
Entrega de projeto
Style guide
Cor primária
#2141CA
Cor secundária
#001D99
Branco
#E7E7E7
Cinza
#D9D9D9
Preto 01
#1B1B1B
Preto 02
#333333
Cores
Para criar uma identidade visual para a VorkWeb juntei os principais tópicos requeridos pelo meu cliente: moderninade e minimalismo. Com isso, consegui juntar algumas hipóteses e a melhor escolha foi de um tom de azul escuro com preto e branco para auxiliar a interface.
Tipografia
As fontes escolhidas para compor a interface da VorkWeb foram a Kanit por ser uma tipografia moderna e simples e a Share Tech Mono para realizar um pouco de contraste com sua forma tech.
Kanit
Títulos, corpo, legendas e botões
Título 01
38 px - 0,25px - Regular
Título 02
27 px - 0px - Regular
Título 03
21 px - 0,15px - Medium
Subtítulo 01
18 px - 0,15 - Regular
Corpo 01
16 px - 0,25px - Regular
Legenda
14 px - 0,4 - Regular
Share Tech Mono
Subtítulos
Subtítulo 01
21 px -0,25px - Regular
Subtítulo 02
17 px - 0,15 px - Regular
Subtítulo 03
15 px - 0,11px - Regular
Wireframes
Após finalizar a idealização do style guide, realizei a arquitetura da interface digital. Nessa etapa foquei no alinhamento da interface por meio dos grids; fluxo de como apresentar a empresa para o usuário e copy do site.
Alta fidelidade
A última etapa do projeto consistiu em realizar a alta fidelidade da interface. Nela trabalhei com ajustes de cores, tipografia e espaçamentos. Utilizei as ferramentas de design Figma e Photoshop para me auxiliar nessa etapa.
VorkWeb - Landing Page
Período: Julho de 2023 até Agosto de 2023.
Função: UX/UI Designer.
Painel semântico
Para ter uma compreensão melhor dos conceitos que o meu cliente gostaria, eu realizei uma pesquisa de referências onde foi possível ver padrões de interface e o que seria interessante apresentar nessa nova interface.
Foi desafiador cumprir os requisitos de colocar todas os valores da VorkWeb em uma única tela e também foi interessante trabalhar com dark UI e compreender seus padrões.
Resoluções
Jornada
Painel semântico
Para ter uma compreensão melhor dos conceitos que o meu cliente gostaria, eu realizei uma pesquisa de referências onde foi possível ver padrões de interface e o que seria interessante apresentar nessa nova interface.
Style guide
Cor primária
#FF870C
Cor secundária
#3F2B81
Cor suporte
#9FCE34
Branco
#E7E7E7
Preto primário
#1A1A1A
Preto secundário
#333333
Cores
Para criar uma identidade visual para a VorkWeb juntei os principais tópicos requeridos pelo meu cliente: moderninade e minimalismo. Com isso, consegui juntar algumas hipóteses e a melhor escolha foi de um tom de azul escuro com preto e branco para auxiliar a interface.
Noto Sans
Títulos, subtítulos, corpo, botões e legendas.
Peso regular
Título 02
Tamanho
24 px
0 px
Espaço
Corpo 01
Tamanho
16 px
Espaço
0,5 px
Corpo 02
Tamanho
14 px
Espaço
0,25 px
Legenda
Tamanho
12 px
Espaço
0,4 px
Peso médio
Título 02
Tamanho
24 px
Espaço
0 px
Título 03
Tamanho
20 px
Espaço
0,15 px
Corpo 01
Tamanho
16 px
Espaço
0,5 px
Corpo 02
Tamanho
14 px
Espaço
0,25 px
Botão
Tamanho
14 px
Espaço
1,25 px
Peso semibold
Título 01
Tamanho
34 px
Espaço
0,25 px
Título 02
Tamanho
24 px
Espaço
0 px
Título 03
Tamanho
20 px
Espaço
0,15 px
Corpo 01
Tamanho
16 px
0,5 px
Espaço
Tipografia
A fonte Noto Sans foi escolhida para ser a principal tipografia do sistema da Escola Prime pois ela é simples, de fácil entendimento e séria, o dashboard precisava de uma tipografia que não complicasse a usabilidade dos usuários.
Cor primária
#25303B
Wireframes
Após finalizar a idealização do style guide, realizei a arquitetura da interface digital. Nessa etapa foquei no alinhamento da interface por meio dos grids; fluxo de como apresentar a empresa para o usuário e copy do site.
Alta fidelidade
A última etapa do projeto consistiu em realizar a alta fidelidade da interface. Nela trabalhei com ajustes de cores, tipografia e espaçamentos. Utilizei as ferramentas de design Figma e Photoshop para me auxiliar nessa etapa.
Resoluções
Esse projeto foi minha primeira interação com dark UI e design de apenas uma tela de interface.
Foi desafiador cumprir os requisitos de colocar todas os valores da VorkWeb em uma única tela e também foi interessante trabalhar com dark UI e compreender seus padrões.
Análise do projeto
Definição de problema
UX/UIDesign
Entrega de projeto