Site Design: Concept and Layout

Published on January 23, 2023

If I could describe the concept for this site in a few words, it would be this:

Back to basics, with sprinkles. 🍦

I've created many portfolio websites over the years, and every time I revisit old versions there's typically more cringing than smiling. Something that I thought looked good at the time would seem clunky, cumbersome, or misguided years later.

Designs can go bad for any number of reasons. Primarily, it tends to happen when someone tries too hard. In my own experience, it can even happen when I have a good concept and then take the concept too far. I always try to adhere to the KISS principle (keep it simple, stupid), whether it's design, code, or anything else.

Back to Basics

At the end of the day, you want clearly defined and organized content. This time around, I leaned heavily into text: it's the simplest way to convey ideas. Text doesn't go out of style, and it doesn't bog down the browser. In a time when bloated, ad-stuffed websites reign supreme, I humbly offer clean, consistent, stylized text.

There is definitely a benefit to leaning into what the browser does best: vertically scrolling text, visible links, and sparse imagery.

• Navigation - No need to re-invent the wheel. Navigation consistently sits below the header area. Forward and backward links are provided on blog posts.
• Theme Picker - Just use the native select dropdown, with minimal styling. Let the browser do the work.
• Accessibility & SEO - Every page has a single <header>, <main>, and <footer> element. Navigation elements are <nav> tags. Every page has a single <h1>. Link hover and focus styling is minimal.

Sprinkles

Once you've got good content and consistent layout, then it's time to add finishing touches. When choosing how to spruce up my website, I decided to create a dedicated header area where I could add imagery and animation. I built a theming system so that I could create a variety of designs and allow the visitor to choose how they want things to look. Because my design has a consistent layout, it'll be much easier to iterate and change things down the road.

• Fonts - Oswald is my default heading font, I've always liked the uppercase, condensed style. It also works pretty well with most of my themes. I tried not to go too crazy with any of my fonts, at the time of writing the Retro theme does break this rule 😀 Copy has extra line height for better readability.
• Animation - I've always enjoyed creating animations on the web, so I tried to add motion to most of my themes. Visit my animation showcase for more other web animations I've done over the years.
• Padding and Wrap - All of the content wraps to a pleasant 1000 pixels, with the exception of the header imagery. Copy margin / padding is generally consistent.

In the future I may do more in-depth explanations of each of my themes, so keep an eye out for those.