Overview

In the digital age, it’s important to have an online presence. I coded the first iteration of my website on my own, which helped me grow as a developer. I enjoyed creating my brand and iterating on it the more I learned about design.

Audience: Anyone who wants to know who I am and what I do!

Result

currentdesign.png
 

Tools Used

Adobe Illustrator + Brackets + Google Fonts + Github Pages + Jekyll + Namecheap + Google Analytics + Sketch + Invision

Process

ITERATION 1

Understand & Explore

sketches.jpg

Online portfolios usually include a standard set of information: biography, project showcase, and resume. I researched many online design portfolios for inspiration. Through other people’s websites, I could see the latest web design trends, which I used as guidelines. Most had a combination of single-scroll vs multiple page layouts, and clean, flat UI. 

Define & Ideate

After I collected ideas and decided on content, I went to work sketching ideas on paper. I rapidly came up with multiple design options to choose from. Here I worked on finding a color palette, which I wanted to be nature-themed. Lots of green and blue.

Prototyping

Design1.png

Time to turn paper wireframes into mockups in Adobe Illustrator. I found that some designs didn’t translate well to the screen, so I chose the most practical version and iterate on it.

Implementation

I vowed to use this project as an opportunity to practice coding, so I used pure HTML/CSS/JS for the first version. I discovered that I was using lots of repetitive code in the headers and footers. The images loaded slowly, and the design left something to be desired.

Testing

After I deployed the code to Github Pages, I tested the link with Google PageSpeed Insights. The results told me to leverage browser caching, and eliminate render-blocking JavaScript and CSS. 

I also sent the link to friends for design feedback.

ITERATION 2

Understand & Explore

During the next research phase, I discovered Jekyll, the static site generator that played nicely with Github Pages. It would reduce the repetition in my code.

Define & Ideate & Prototype

Redesign.png

With the feedback from friends and family, I came up with a new design.

Implementation

Jekyll made coding much easier. I also worked on making the site mobile responsive and signed up for Google Analytics so I could spy on visitors.

Testing

I corrected most PageSpeed issues by optimizing images and deferring some JS loading. Mobile responsiveness wasn’t perfect, but nothing was broken.

ITERATION 3 - present

I continued to ask for feedback from people around me, especially fellow product designers. I continued to learn more about coding and information design. And I finally got Sketch to design future iterations.

Conclusion

An online portfolio reflects your identity, which can evolve quickly when you’re learning. I’ve had to constantly revisit my portfolio since it’s gone up. As a writer, I still found crafting the right copy for these project pages to be the hardest part. As a developer, I’ve learned so much about the ins and outs of building a webpage.