Process, UI / UX Design

Poster image showing sketches of what would eventually become my new portfolio website.

Website User Flow Diagram

The main reason for the redesign was to move my portfolio website from to It was time. People had trouble spelling it. I had been keeping written and sketched ideas for a while and wanted to work on my process instead of going from sketches straight to code. My first step was to create this basic user flow diagram. That way I could resolve as many potential roadblocks as I could discover early on in the process and really define what I wanted my new website to be.

My goals for the website redesign:

  • Cleaner, More Mature Layout
  • Smarter, Cleaner Code
  • Projects: Quality over Quantity
  • Use SCSS (SASS)
  • Diverse Project Documentation
  • Easier to Update
  • Improved Typography
  • High Image Quality
The Website User Flow Diagram used in the making of

Wireframe Diagram

Once I finished the User Flow Diagram, I began working on the Wireframe Diagram for The text components were already written prior to the visual studies so I was able to use actual words instead of lorem ipsum or representational lines. It helped immensely with determining scale.

Prior to creating this digital version I used note cards with potential content blocks drawn on them to generate quick paper prototypes of my intended wireframe. For me, this method is faster than both sketching and digital mockups and is a task that can be completed anywhere.

The Wireframe Diagram used in the making of The index card version of the Wireframe Diagram used in the making of

Refined Wireframe Preview

I have been experimenting with using the Invision App platform for prototyping the refined wireframe I designed in Adobe Illustrator. After I exported the necessary still images it only took me about ten minutes from the time I signed up to create what you see above.

Individual Page Pacing Diagram

Since the new layout relies on full-width images and text blocks, it was important to me the page still maintained a balanced flow. Depending on a user’s device, some images could potentially take over the entire screen. As they scrolled down the page, I didn’t want the user to become lost within a series of dark / dark / dark or light / light / light images. To avoid this, I made a conscious effort to present the work using contrasting content modules. This helped me establish some secondary design conditions, supporting the overall goal of using high-quality images to communicate the most important aspect of each project.

The Individual Page Pacing Diagram used in the making of

Photoshop Mock-ups

After the wireframe and page flow diagrams were complete, I created a hi-fidelity Photoshop mock-up for It helped me sort out final image dimensions and proportions. I keep a database of all current portfolio images handy so placing those was as easy as placing the pre-written text in the wireframe diagram.

A Photoshop mockup used in the making of A Photoshop mockup used in the making of
An image of the paper notecards I use for initial wireframing.