Twice have I tried to redesign this blog, and twice have I failed miserably to do it. Yet from the ashes like the Phoenix of old shall I rise and attempt it… one more time.
This time, unlike in the past, I am going to try an iterative approach, I am going to take it in small steps, slowly but sure, changing, re-desining, re-shaping, re-defining and pushing these changes every week. And I thought to myself, why not share it, publicize it, so you may learn as I myself do?
So, the challenge!! Redesign barbarian meets coding within the next 8 weeks!! and most importantly, in a way that it does not suck :). Let’s get to it.
The End Goal
Because it is always important to start with the end goal in mind and visualize what you are trying to achieve and how will the end result look like, let’s try to put it into words. I want to redesign barbarian meets coding:
- so it emphasizes the content, removing all extraneous distractions and unnecessary details, which feels like a simple, minimalistic design as I write these lines
- yet I want it to have personality, so I need to temper minimalism with… warmth? humor? something?
- it should be interactive, inviting, with subtle cues and the finishing touches that make every piece of craftsmanship and labor of love remarkable
- and finally it should render beautifully in every device of any shape and proportion
For the personality part I decided to go for a comic theme, following the barbarian part of barbarian meets coding and the influence of Conan. Let’s see how it panned out.
Since most of you use a desktop to read this blog I thought it would be sensible to start redesigning the desktop version first while I keep the mobile version as it is today, and face one problem at a time. I started doing some sketches about what the result might look like:
And devised a plan of attack (this is taken straight from my to-do-list):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
Where I defined an very teeny tiny MVP to get started pushing changes as soon as possible and which results you can see right here when comparing the previous version:
with the blog start page:
and an article:
Starting With Desktop
Since I am using Octopress’ built-in theme and I am planning for a major redesign I decided to start little by little overwriting all the styles :). I defined some breakpoints for my media-queries:
1 2 3 4 5 6 7 8
With these media-query break points I could effectively apply styles for non-mobile devices only and leave the mobile part untouched. I started styling the new sidebar/header using most of the same selectors that Octopress itself uses:
1 2 3 4
The new header/sidebar is just a fixed
header which a css transform to make it look a little bit skewed:
1 2 3 4 5 6 7 8 9 10 11
I removed a lot of the stuff from the sidebar – my photo, social links, twitter feed, books that I am reading, etc – and left only the strictly necessary which is to say the main navigation of the site. Since I wanted to give it a “comic” feeling I designed each navigation item like a comic callout (I’m not quite sure that’s the actual name but you’ll get it when you see them):
1 2 3 4 5 6 7 8 9 10 11
They are displayed as inline-blocks so they wrap nicely. To give them an even more comic-y look I rotated each of them in arbitrary ways using transforms:
1 2 3 4 5 6 7 8 9 10 11 12
And on hover I added some extras. My initial idea was to increase the size of the items with a css transition but since each item is an inline-block they started reordering themselves resulting in accute self-murdering feelings on my part, so I removed them xD (although I may add them in the future…)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
After having a passable sidebar I did some small changes in the content itself, increasing the white-space in general, and the size of the headers when you are reading a single article. Moved the social links to a less prominent place within the signature of each article:
And added some new basic styles for the images:
1 2 3 4 5 6 7 8
Finally, and as I mentioned before, I haven’t touched the mobile part yet. And so if you reduce the width of the screen the old styles (Octopress’ built-in theme) will reveal themselves before your eyes:
And that is as far as I got this time. Hope you have enjoyed this look behind the scenes and learnt some CSS at the same time. Come back to you next week with more design stuff!