I’ve had two themes for this site since I started it in December 2010, and even the second one was only a small refinement of the first. Back then I figured that getting the site up and running was more important than the look itself, so I never really gave that much attention to the theme – until now.
Before the design of my new theme even started, I had to give the project a name. I decided to call it Photosynthesise, as I wanted to give the feeling of energy and growth. (Oh and also the signature colour is green!)
This time I thought I’d share my ideas behind the design process…
There were three things I really wanted to have for my Photosynthesise project:
- A design built to fit inside a typographic grid
- A design which evolves the current identity
- A design that is great for all existing content
Thinking about space
While researching Swiss Style, I discovered that things look better in grids. I think this is a concept that everyone already knows, but really focusing on the grid when laying out a user interface gives it much more balance. The users may never be aware of the work you have done, but unconsciously – they’ll appreciate the eye for detail.
Switch on the grid to see how it looks.
Thinking about identity
My old site was green, and I decided to keep it. This time the new logo at the top was designed to be a lot smaller, allowing the title of the website to come outside of the coloured box. Designed in a 16×16 grid, the new logo will easily scale down to the microscopic resolutions of favicons, as well as scale nicely when zoomed up to higher definition.
Joining the signature green, the previous theme’s hyperlink colours have also been used throughout the new look. It will be no surprise to designers that this almost-RGB colour pallet is influenced by digital displays. Finally, three shades of grey and white make up all of the colours used throughout the design. The darkest of the greys is used in place of black to ensure the other colours are never overpowered.
The old site was based on Twenty Ten, which had a shape that was very similar to other WordPress blogs. I’m happy to continue to use this layout as it is familiar and user friendly. The overall size of typographical elements in the design is fairly large, something which has also continued over from the previous theme. This keeps the overall look of the site mostly the same as it was before, even though everything has been refined.
When it comes to the typography, I decided to go for Segoe UI for the body font. I had also greatly considered using either Calibri and Cambria, but I ultimately decided that I liked Segoe UI the most. The reason I picked Windows fonts is not by accident – as a Windows developer they feel very familiar to me, and I like writing in them.
Thinking about content
The content is the really tricky bit. Due to the fact I have previously used 600px wide images throughout the blog, I’ve decided to keep the content at that width. Consequently, images like the one above still have a big impact on the body text. Oh and I don’t have to resize everything.
“I feel like a pig shat in my head.” – Withnail
I’ve greatly improved the spacing of the text and other elements to make the whole content area flow with the 100+ posts I already have. I’ve also improved the ability to post quotes, code samples and console commands, handy when you spend as much time in PowerShell as I do.
Copyright (C) 2009 Microsoft Corporation. All rights reserved.
To enable new discovery of content, I’ve improved the visibility of the categories and tags. Large blue links to the right of the content enable switching between categories, and now a new section at the bottom of each post makes the relevant tags much more visible.
I plan to keep tweaking the code over the next few days, but if you have any feedback or you’ve noticed any bugs please let me know in the comments!