rkamehama

O meu portfólio é uma ferramenta para encontar uma empresa na qual eu acredito e quero trabalhar

Aqui você vai encontrar como eu construi esse site

O desenvolvimento do meu portfólio veio da necessidade de encontar um emprego na área de UX/UI. Uma vez que tenho a vontade de aplicar para tais vagas, considerei que seria um bom estudo de caso utilizar a construção desse site como uma forma de praticar e apresentar minhas habilidades.

Ano: 2019
Duração: 3 Semanas
Desenvolvido para: Você / Startups / Recrutadores / Entrevistadores
Desafio: Criar um site/portfólio que apresente o meu trabalho e um pouco sobre mim para entrevistadores, recrutadores e empresas das quais quero trabalhar.
Equipe: Rebecca Kamehama
Papel Pesquisa
UX
UI
Código
Prototipação
Teste




pesquisa

1. pesquisa

O projeto começou com a necessidade de apresentar melhor o meu trabalho para encontrar um emprego.
Como me formei no final de 2018, escolhi começar o desenvolvimento o meais rápido possível para começar bem o ano de 2019.
Para esse projeto tive 3 semanas que forma divididas em Pesquisa, requisitos, escolha dos projetos que iria apresentar, produção/edição das imagens, produção de textos, wireframes do site, protótipos, teste, código (HTML/CSS/Javascript), Github, Domínio e Teste em contexto.

pesquisa

Como a primeira fase de pesquisa, observei o meu antigo portfóio. Nele apresentava ser uma designer generalista, mas o meu objetivo desde então mudou, dessa forma comecei a pesquisar a área que gostaria de trabalhar e como os profissionais da área apresntavam-se e como estruturavam os seus projetos.

pesquisa

Uma vez que decidi seguir a área de produto, UX/UI. Procurei artigos, vídeos sobre o que profissionais da área recomendávam para pessoas que como eu estavam estruturando seus portfólios e como poderiam estruturar os meus projetos para alcançar o meu objetivo.

Diego Kpelo / Tobias van Schneider / Maciej Lipic / Casey Elmer / Chrysan Tung

pesquisa

Referências

Ap√≥s coletar algumas informa√ß√Ķes de profissionais, busquei refer√™ncias de bons portf√≥lios que poderiam me ajudar a entender melhor como estruturar meus projetos e tamb√©m servir de refer√™ncia visual para o que eu estava buscando com o projeto final.
Dessa forma separei alguns que faziam sentido para a √°rea e possuiam alguns fatores que eu considero importantes como: Humor/personalidade, Foco no projeto e Elementos visuais interessantes/surpriendentes

Colin Keany / Andrew Doherty / Frankie Ratfordc / Sue Murphy / Gil

pesquisa

Dicas de profissionais

1. Informa√ß√Ķes de contato f√°ceis de encontrar
2. Não esqueça de incluir sua personalidade
3. Apresente trabalhos e habilidades anteriores para os quais você deseja ser contratada
4. Forneça contexto sobre os projetos
5. O seu portfólio cresce com você

Outra fonte que me ajudou bastante a conseguir insigths sobre como estruturar foram vídeos analisando o portfólio de outros profissionais, dessa forma conseguiria aprender com o trabalho de outras pessoas.

CharliMarieTV / Jesse Showalter / The futur

2. Interpretação

Uma vez que foram levantados alguns pontos importantes do que colocar e do que n√£o colocar, comecei a desenhar o mapa do site com as p√°ginas que seriam feitas/necess√°rias para o projeto.

pesquisa

Requisitos de projeto

Foram levantados também os princiais pontos para o site. A ideia era dar prioridade ao trabalho, assim mantendo-o mais simples. Isso ajudou também na construção do site mais para frente, considerando que não teria muitas dificuldades de criá-lo do zero.

pesquisa

3. Ideação

Com o mapa e as refer√™ncias, iniciou-se o processo de thumbnail das p√°ginas para entender melhor como o conte√ļdo seria disposto na p√°gina.
Com as estrtuturas montadas foi selecionado a que melhor apresentava o conte√ļdo e mantia a ideia de simplicidade e oferecia aos trabalhos uma posi√ß√£o de prioridade.

ideação

Com o estilo escolhido foram feitos os wireframes das páginas no Adobe XD, para ter uma visão geral de como os elementos se comportavam e para poder testar nas próximas etapas o funcionamento do site.

ideação

4. Prototipação

Com o wireframe montado, as páginas foram linkadas para poder testar o funcinamento geral do site e a senção ao passar peas páginas.

ideação
ideação

Com o wireframe montado e o protótipo, testai comos seria a estrutura se fossem adicionados mais projetos e como o site poderia comportar novos elementos.

ideação

Ao mesmo tempo que estava estruturando as p√°ginas, construi uma das p√°ginas de projeto com o conte√ļdo para entender melhor o comportamento do layout.

ideação

Dessa forma, comecei a desenvolver o sit com alguns elementos básicos. Usando HTML, CSS, Bootstrap e Javascript. Dessa maneira consegui desenvolver o portfólio, criar um projeto interessante e desenvolver minhas habilidades com programação.

ideação

5. Teste

Com o site estruturado, comecei a fazer alguns testes com amigos para entender onde posso melhorar e em quais pontos ainda existem atritos tanto do ponto de usabilidade e experiência.

ideação

Detalhes

Alguns pontos legais ao desenvolver esse site foi poder criar pequenos gifs animados e a mensagem que escolhi colocar como comentário no código, para pessoas que como eu inspecionam os sites no navegador.

A melhorar

UI: Estruturar styleguide
UX: Diminuir a velocidade dos gifs
Testar o menu
Código: Comentar o código inteiro
Estudar a responsividade de alguns elementos do site
Feedbacks: Se tiver algum feedback, por favor envie para o meu e-mail, isso me ajudar√° a estrutura-lo da melhor forma: r.kamehama@gmail.com

Aprendizados

Criar o site do zero foi muito legal, principalmente para desenvolver melhor meus conhecimentos com progrmação. Descobri que javascript é muito legal e dá para fazer várias coias legais.
Aprendi bastante sobre UI, principalmente sobre tipografia, como a maior parte do site √© constituida de texto, busquei hieraquizar os conte√ļdos da melhor forma poss√≠vel.
Esse site ainda tem muito a melhorar, mas como uma das dicas que vi aparecer v√°rias vezes, o site cresce conforme ganhamos novas habilidades, assim espero poder testar e aprender bastante com ele.

ps: foi muito legal entender como o github funciona para hospedagem do site e espero poder explorar mais esse elemento nos próximos projetos.