Bonjour, Monde!

After moving to California for a new job, I stopped updating my site.

The old design’s purpose had been achieved; a steady job meant no more freelancing and no more job applications. Today, this site probably gets a few dozen hits a month. I assume that most of these visitors are lost (or search engine bots).

Going into the inevitable redesign, I knew that everything had to change. My new goal is to write more, which the old site was not set up to do. Whereas a standard portfolio site gets semi-annual updates—new work, new job, new social media account—an active blog must house a regular flow of content. The final site also had to be easy to maintain. Finally, I don’t know what my content is going to look like a week, month, year from now, so it has to be flexible.

To solve this design problem, I set three goals at the beginning:

  1. Focus on writing and regular content
  2. Start with a solid foundation
  3. Use new techniques to make updates easier

Let’s dive into a few of these details…

Visual style

I wanted the visual style to be “less is more.” Not only did it make everything easier to design and build, but it was the only way to ship an actual site without spending two more years polishing it.

The site is very plain, but I can build onto it over time. There is also a new living style guide with interchangeable components, and everything was designed “in-browser.” My hope is that this style will evolve as my writing does.

Type

I am using Concourse and Equity by Matthew Butterick. Both are highly legible, versatile, and nuanced typefaces, and they work well together. Go buy them!

Type samples for Concourse and Equity fonts

The type sizes, line-height, gutters, and even some UI elements are set with a modular typographic scale. In the coming weeks, I’ll write more about my setup, but you can get a preview by looking at the Sass files in my Github repo for Hawkeward.com.

Technology

I also replaced old, hack-esque layout CSS with flexbox. Flex is not the answer to every problem—and it can make some patterns harder—but it’s the future and worth learning.

Meme, learn flexbox!

Source: the glorious Internet.

Never again will I massage padding or abuse floats to get a two-column layout to work.

Next steps

Now that it’s launched, the hard work begins. Keep an eye out for all the updates that are coming your way. I don’t yet have RSS set up (because reasons).

If you have feedback, please send it along! You can tweet at me or leave an issue on the Github repo.

/cheers