Creating Chelsea Mamma – designing around a header image

When Kara hired Ellie Illustrates to create a new header for her blog, Chelsea Mamma, she decided she wanted a custom theme built around her new header – and that’s where I come in. This is probably my favourite kind of job; taking a header or logo design from a graphic designer, and creating the perfect theme to match it.

A gorgeous header does not make a blog design great all on it’s own… To give you an idea of how much difference it makes to create a theme around a header, rather than just using a header in a generic theme, take a look at the before screenshot for the Chelsea Mamma blog:

CM_before

Now, I’m not saying that the above screenshot is a particularly badly designed blog! It’s a lovely theme, has that fabulous header, and is using pretty social icons and attractive fonts… but none of it is cohesive; they all feel like separate entities rather than part of something bigger and beautiful.

How I did it

I asked Kara to fill in my Web Design Preferences form, and then worked out a design scheme based on Ellie’s lovely artwork. I just love the way these colours work together.

Chelsea Mamma Colours

Once Kara had agreed on the scheme I set to work. I wanted to keep that hand-drawn slightly arty feel throughout the site, so I chose to use a subtle textured background instead of a flat colour for the whole site.

I start all of my theme designs with Underscores, which is a starter theme for developers created by the theme team at WordPress.com. It gives me a great head start with my themes, and a completely blank canvas to build upon. This is what one of my themes looks like before I start whipping it into shape:

Screen Shot 2015-01-24 at 21.32.48

I installed an image menu for Kara, using some additional artwork by Ellie, and reorganised her sidebar to make it neat & tidy, complete with a Latest Photos slideshow and a slideshow of brand badges. The Latest Photo slideshow is served by a custom plugin that I wrote especially for Kara; it takes the first/featured image of every post that has the “image” format and displays them in a slideshow, complete with controls that pop up when you hover over the photo.

As Kara takes part in a few photography linkies I decided it would be good for her photo posts to have bigger featured images on the home page. Whenever a post has the image post format, the featured image is full width, rather than the standard behaviour of her theme, which is for a medium sized thumbnail to sit to the left of the post excerpt.

I created custom social media icons for Kara to match her theme perfectly, using the different textures in the header as the background of the icons.

CM_social

After the site went live, Kara decided she wanted to change the headers font as it wasn’t working out as well as hoped. No problem – she sent some font ideas and I gave her an idea of how they would look, along with a suggestion of my own. I sorted out the new webfont and now the theme looks perfect.

Font ChoicesYou can see Kara’s new theme at ChelseaMamma.co.uk, and read a bit more about the design here.

As well as a new theme, Kara hired me to overhaul her media kit to match her new look. You can read about that here. I’m still offering media packs for just £40, and you can order one here.

chelsea

Well, I hope you enjoyed that peek into my design process and all approve of Kara’s new look. I’ll be back soon with another freebie to download later in the week, so keep an eye out for that!

3 thoughts on “Creating Chelsea Mamma – designing around a header image

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.