My Portfolio

O objetivo do projeto era criar um site, onde eu poderia mostrar um pouco sobre mim e do meu trabalho.

Um lugar onde eu poderia mostrar todo meu processo de criação e desenvolvimento de um projeto, mostrando as etapas de criação do design até a codificação.

Design

O principal objetivo do design era ser algo simples mas moderno, onde eu conseguiria mostrar meu lado design e desenvolvedor.

Com base nisso, comecei a buscar referências onde eu poderia ter um ponto de partida para a criação do design.

Arquitetura da informação

Próxima etapa foi trabalhar na construção da arquitetura da informação, para saber quais interfaces eu teria no projeto.

Esboço

Com todas as informações necessárias, comecei a criação do design em si, primeiro começando pelo esboço.

A ideia do esboço é criar algo rápido, com caneta e papel mesmo, onde eu possa tirar as ideias da cabeça e ter algo em mãos onde eu consiga ter uma noção mais clara do que tenho até agora.

Página home

Página sobre

Página de projetos

Página do projeto

Wireframe

Com o esboço das páginas criado, próximo passo foi começar a trabalhar na criação dos wireframes.

O objetivo do wireframe é parecido com o esboço, só que invés de usar caneta e papel, utilizo algum software, no caso utilizei o Figma que é a ferramenta de UI que utilizo para criar minhas interfaces.

Outra diferença entre o esboço e o wireframe, é o que o wireframe é um pouco mais detalhado, onde já adiciono títulos, textos e o um pouco de cor, além de utilizar o grid para posicionar os elementos.

Fontes

Tento todos os wiraframes criados, comecei a me concentrar na escolha das fontes que eu iria utilizar no projeto.

A escolha das fontes é um dos passos mais legais e difíceis do projeto, pois a fonte é que irá transmitir a personalidade do projeto.

Eu já tinha algumas ideias de tipos de fontes que eu queria utilizar nesse projeto, inicialmente eu queria 2 tipos de fontes:

• Uma para destaque, para colocar em títulos.
• E outra com uma boa legibilidade para o corpo de texto.

As fontes que eu escolhi foram as seguintes:

Code Next

A fonte de destaque que eu escolhi foi a Code Next. Ela é uma fonte forte e pesada, que daria o destaque que eu procurava para os meus títulos.

Gilroy

Escolhi a Gilroy como minha fonte principal, onde eu queria um peso mas algo um pouco mais sutil do que a Code Next.

Gilroy é uma fonte que na primeira vez que eu vi, ela já me conquisto, além de ser muito bonita é uma fonte que é muito flexível, pois pode ser utilizada tanto em títulos como em textos grandes.

Rubik

Para o corpo de texto minha escolha foi a Rubik, fiz alguns testes com algumas fontes em textos e gostei bastante dos resultados que ela obteve.

Cores

A escolha das cores foi um pouco difícil, como eu não tinha um logo ou algo para seguir como base eu precisei escolher as cores do zero.

Utilizei como guia a psicologia das cores.

Primária

Pesquisando a psicologia das cores, achei 2 cores interessantes...

Azul é uma cor relacionada a tecnologia, mas como cor primária eu queria uma cor que se relacionasse um pouco mais com design.

Então escolhi roxo que é um cor relacionada a criatividade e que se encaixa bem com o que eu queria.

Complementar

A cor complementar teria que ser uma cor que combina com a primária mas eu queria algo mais leve.

Escolhi um tom clarinho de azul, onde utilizei em alguns elementos da interface que eu queria deixar com um tom mais leve.

Design final

Depois de terminar a criação dos wireframes, escolher as fontes e cores, estava tudo pornto para começar a criação do design final.
Depois de alguns dias de trabalho na criação das interfaces, o resultado final foi esse...