Feb 20, 2014
If you are a web designer and use wordpress a lot, you will provably enjoy this case study in whichI will show the design process I took to design a Wordpress theme. Enjoy!
A few months ago I was approached by Slocum Themes with the challenge to design a Wordpress Theme for bloggers. The idea was to create a simple and effective theme, with all the default features Wordpress has to offer.
I decided to get my inspiration from social media. After all, social media updates can be considered as micro blogging. I did some research on how social media platforms such as facebook, twitter, google plus, and pinterest display their posts, specially the posts with photos, and that's how Socialize was born.
My first step is to always wireframe on paper and design on Photoshop before I get to the coding. In the case of a wordpress theme I could list all the components and elements of the site, so I decided to go with the basic wordpress blog style (Header, Body, Sidebar, Footer) and didn't need to do much wireframing.
Instead I wanted to create a style guide, so broke everything down and designed each component at a time, keeping an overall consistency on the design. I only put everything together once all the components were done, instead of taking the usual approach where I would first design the homepage than inner page, I wanted to create a solid design guide that could be used on all pages.
With that in mind, I figure that my focus should be on the most important element of a blog, the "Post Component" and how it's displayed on the homepage to engage users to read further. So this is where everything started. I broke down the post component into smaller elements such as:
- Post Date
- Post Author
- Post Title
- Post Thumb
- Post Description
- Call To Action
I decided to leave out some other usual elements such as category, tags, number of comments.
After a few sketches, I had a solid idea of what I wanted to design. I'm not reinventing the wheel but attempting to simplify it, now days most blog themes have a crazy amount of options so my idea was to keep it simple & effective for both desktop and mobile devices.
With the first and most important component done, I listed all the other components and elements I still had to design.
- Navigation and Buttons
- Post Page
- Post Comments
Because the theme will have different color schemes, it's important that I organize how many colors will be used and where they will be used. So here is how I broke it down:
- Primary Color
- Secondary Color
- Background Color
- Text Color
- Link Colors
Once this color guide was created, could simply change it to any other color using Adobe Photoshop by desaturating the guide to black and white and applying an overlay layer with my color of choice.
Next step was to define a base typography structure to be followed in the homepage posts and also on the inner pages and posts. My font of choice for this project was Source Sans Pro, a sans serif typeface by Adobe that works well in user interfaces. Even though I created a quick guide in photoshop, a full guide was coded to serve as reference (view typography guide).
I created a grid that would work well for a blog with sidebar, the grid is fluid and fully responsive with a max-width of 1200 pixels.
Even though the theme would be responsible and some of the image sizes will vary depending on the size of the screen, I wanted to set some max and min sizes based on the Grid.
Navigation and Buttons
The navigation was kept very simple, the color effects were determined by the colors I had already chosen to keep the consistency throughout the theme.
Sidebar and Footer
Footer and sidebar share the same components, so I designed them as one, the only thing that changes is the background color on the footer giving a bit of different feel to it's components.
Post & Comments Components
To finish up my style guide I designed all the components that will go into a post, and also the post comments components.
Once my Style Guide was done, all I needed was to put everything together, I coded the HTML and CSS, and hand it to my friends at Slocum Studio to turn it into a wordpress theme. Some elements had slight changes during the code process.
Here is the final homepage, the theme is fully responsive and features a 8 different color schemes.
Demo and Buy it!
Hope you enjoyed this case study, if you have any questions leave a comment.