Add to Collection
About

About

This is a case study on how I designed Socialize Wordpress Theme, I will walk you through my process and show all the details on how I approach a… Read More
This is a case study on how I designed Socialize Wordpress Theme, I will walk you through my process and show all the details on how I approach a wordpress theme design. Read Less
Published:
A few months ago I was approached by Slocum Studio 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.
 
 
Design Process
 
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.
Post Component
 
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.
 
- Colors
- Typography
- Grid
- Images
- Navigation and Buttons
- Sidebar
- Footer
- Post Page
- Post Comments
 
 
Colors
 
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
          - Link
          - Hover
          - Active
 
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.
 
 
Typography
 
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).
 
 
Grid
 
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.
 
Images
 
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.
 
Final Design
 
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!
 
To demo or buy this theme you can visit Socialize Pro where the theme is for sale for $59. Also check out MattReport.com to see the theme in use.