Another Year, Another Blog Design
February 10th, 2014
I'm hoping to do more writing in the future and decided to spruce up my soapbox a bit. Like the proverbial, contractor with the worst house on the block, I was a web developer with an ugly and not very usable personal site and blog. I started from scratch because there wasn't much in the way of design work or styling on my previous blog.
Here are some annotated before and after shots from the redesign:
Homepage and General Styling
My biggest complaint with the old design was that it seemed very dry and uninviting.
- New fonts - Arvo and PT Sans from Google Fonts
- Bigger emphasis on content pages(about, posts, work, contact)
- Added summaries from blog posts
- Color and a background... character!
Blog Posts
Simply changing fonts(to PT Sans) and updating line height went a long way for making blog posts more readable and aesthetically pleasing. I also started using Prism.js for code snippets.
Before:
After:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae tincidunt dui, nec aliquam lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus laoreet erat libero, consequat lacinia nulla malesuada nec. Pellentesque bibendum posuere augue, at malesuada diam malesuada sit amet. Quisque porttitor dictum dictum. Pellentesque vitae est vitae tellus mollis aliquet. Cras ultricies, felis a consectetur hendrerit, ipsum justo pellentesque elit, ut faucibus augue leo rutrum massa. Suspendisse suscipit arcu quis consectetur cursus. Aenean volutpat sit amet quam ac facilisis. Sed cursus nisi non enim fermentum aliquet.
About Page
My old 'About' page was ostensibly a wall of text and was the first thing I redesigned. Now the viewer is presented a quick summary, with the option to drill down on specific topics.
Before:
'10 second view':
'1 minute view':
'5 minute view':
Technical Details
I started with just the grid system and helper classes from Bootstrap 3. This site is built with Rails 4(turbolinks enabled). Posts and pages written in Haml and styling done in Sass.