articles on

Case Study - Wordpress Theme Design

Case Study - Wordpress Theme Design

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. 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. Also check out to see the theme in use. Hope you enjoyed this case study, if you have any questions leave a comment.

Winner Annoucement: Limited Edition Wordpress Theme Giveaway

As I promised, we are announcing the winner today, are you the luckiest member who entered the contest? let's see who gets a copy of the newest wordpress theme "Hash One" created by Obox Design. First of all I wanted to thank the folks from-the-couch for giving us the change to giveaway one copy of this limited edition theme. Ok guys, I just want to explain how the winner was picked so it won't be no complains later. I selected the comments from people that really showed interest in getting the theme, and out of this selection I made I randomly picked one person to be the lucky winner. And the Winner is Daniel Jacques Congratulations!

Limited Edition Wordpress Theme Giveaway

Yeah, we are giving away one copy of the newest wordpress theme "Harsh One" created by Obox Design, this is a limited edition theme and only 40 copies will be out and running so make sure you enter to get yours. First of all I wanted to thank the folks from-the-couch for giving us the change to giveaway one copy of this limited edition theme. (From the Couch is giving 35 away and 5 other blogs are each giving 1 away [Abduzeedo being one of them]) Ok guys, we are giving away one pretty copy of "Hash One" and if you interested in winning make a comment saying why you should win this beautiful copy of Harsh One, and we will pick the winner and announce it on Tuesday (03/31/09) morning. Keep in mind that this is a fresh limited edition theme and they are only giving away 40 copies so if you really want to have the theme make a comment, if you not sure if you are going to use it or not please don't bother. 'Hash One' is the first theme to come out of the Obox Signature Series. This theme is aimed at those who want their personal blog to stand out well above the rest with a unique design which has a subtle, stylish impact on your visitors. Sticking with the Obox Design style we have implemented all the elements which we have mentioned in our blog and video show. This includes the 'Gina Effect', The Ten Pixel Method, and correct margins & padding. Along with an awesome design for your Wordpress blog, Hash One also includes video features. The home page will incorporate your five latest videos which uses slick jQuery effects to switch between each show. Custom site features include: * Customizable homepage * Customizable Menu Structure * Custom and/or 3rd Party Advert Management * Threaded Comments * Featured Video Capabilities * Social links (Flickr and Twitter) * Social bookmarking and post promotion (digg, tweetmeme etc.) * Insert your Google analytics code * Widgetized Sidebar Screen Shots: DISCLAIMER: While this theme is free, we will not support any issues which arise due to code/design/css customization. The intention of this series is that it is a limited edition, premium Wordpress theme which is exclusive to the winners of this competition, please do not replicate or redistribute this themes design. This theme does not support Internet Explorer 6 and does not come with the original PSD files.