loading...

Let's Refactor My Personal Website and Portfolio using Gatsby, Part Three: Planning Site Design

dylanesque profile image Michael Caveney Updated on ・4 min read

Part One
Part Two

Welcome to part three of my site refactor! Today we're going to talk about making design decisions and setting up some systems to reduce work later in the process. The invaluable resources that I used to up my UX/UI skills were:

Step One: Make High-Level Choices That Serve The Product's Purpose

To begin, think about the product's target audience and purpose, and think about how to serve these things. What are the most essential features this product needs to deliver? For example, my website needs to:

  • Tell visitors (preferably CTOs, tech leads, potential freelance clients) who I am, what I do, and what's unique about how I approach development.

  • Showcase my past development work in an aesthetically pleasing and efficient manner, also link to my Github, LinkedIn, provide a downloadable resume, etc.

  • It needs visible methods to contact me.

That's ALL. People are busy, and I want to make this site as economical as possible. Next, I want to consider overall tone and feel for the site that supports it's messaging. A general rule of thumb is that the more rounded shapes and fonts feel freer and more playful, while hard corners convey serious business. With that taken into consideration, let's make some font choices.

Step Two: Pick Fonts and a Font Scale

I want a feel for this site that is slightly business-like but not too serious, so I'm going to head over to Google Fonts, and pick out fonts that support that aesthetic, namely Muli and Roboto. To limit my choices, I only serached for sans-serif fonts with 10 or more different styles. When adding webfonts to Gatsby, you'll want to use the import syntax on the general stylesheet for the site, like so:

@import url('https://fonts.googleapis.com/cssfamily=Muli:600,700|Roboto:400,500&display=swap');
Enter fullscreen mode Exit fullscreen mode

The next consideration is picking a font scale. When you use a predetermined scale for things like font-size and spacing, you end up with a more consistent, professional look to your design. Also important is to render your font-size in either px or rems for more consistent behavior. I'm going with rems, so that involves setting a font-size of 16px on the html element, and using the following scale:

0.75rem, 0.875rem, 1rem, 1.125rem, 1.25rem, 1.5rem, 1.875rem, 2.25rem, 3rem, 3.75rem, 4.5rem
Enter fullscreen mode Exit fullscreen mode

Step Three: Set a Scale for Spacing

While we're on the topic of spacing, I will also set a scale for spacing and sizing for elements. This will eliminate the need for arbitrary, granular tweaking of elements, leading to a more consistent look and feel to the site. I'll pick a scale of:

4px, 8px, 12px, 16px, 24px, 32ps, 48px, 64px, 96px, 128px, 192px, 256px, 384px, 512px, 640px, 768px
Enter fullscreen mode Exit fullscreen mode

If we were to look at this scale as a graph, it would follow an exponential-style pattern where the changes between steps starts small, then gets a lot bigger.
One other thing to mention: This scale (and the font scale used in the last section) are based off of 16px, which is the default font-size in every major browser, making it a handy baseline value. The concept of scales will continue to be useful, as I next need to create a color palette for the site:

Step Four: Picking Colors

A big surprise for me was learning that HSL is the color format you want to work with, at least in terms of picking a color palette. You will want to get a primary palette, a grey palette, and a secondary palette for alerts and the like. I'm going to forgo the secondary palette for now, since I see very little use for alerts in this project. To build a palette, I'm starting with one base color, then tweaking the saturation (how much grey is in the color) and lightness (how light or dark is it), leaving the hue (the actual color value) alone. I want to make sure that I have more colors than I need, and 9 or so is a good number. Next, I build the grey palette by picking a very dark (but not completely!) black, and gradually turning down the lightness. What that gives me are the following palettes expressed in CSS variables:

Wrap Up

With these choices out of the way, I'll be able to work fast on the actual site itself. Coming up next: Using the Emotion library and CSS-in-JS!

Discussion

pic
Editor guide