Josh

Building in the open

Website Redesign

I’ve spent the last week or so redesigning my personal blog/site to make images/video/code/tables stand out more while remaining readably inline. I recoded a video walkthrough:

Example of the new design with high contrast
Example of the new design with high contrast

I got inspired by Carl Barenbrug’s site layout that features an off-center, 3-column grid that balances text readability with large inline images. I’ve seen other sites that rely on centered text and centered images for this kind of thing, but this ratio feels much more elegant to me; it evokes the golden ratio.

Carl Barenbrug site design
Carl Barenbrug site design

Carl’s site is very minimalist with low contrast elements. I retained my high-contrast, high-legibility aspects and mostly took layout styles.

The test page has a full list of example elements/rendering, but here are some before+after examples:

Example blog post in old design
Example blog post in old design

Example blog post in new design
Example blog post in new design

Keyboard Shortcuts

Key Action
o Source
e Edit
i Insight
r Random
h Home
s or / Search
www.joshbeckman.org/blog/practicing/website-redesign