Official website for Web Designer - defining the internet through beautiful design
Author: Steve Jenkins
31st October 2011

Photoshop: Graphical blog themes

Get creative and break some rules to produce richer WordPress mockups

Photoshop: Graphical blog themes

The main issue with WordPress templates today is that there are way too many that look pretty much the same. Because they are too simple to create, the likelihood is that most designers just bang out a bunch at once, without considering the quality.
It’s high time designers started pushing the boundaries of WordPress – besides, that’s how WordPress itself will innovate. Let’s make WordPress innovate with us, rather than designers innovate with WordPress. Inevitably the only way for that to happen is to get creative! In this tutorial, we’ll talk about some ways to do just that, using our surf-themed template.

tools | tech | trends: Photoshop CS5
expert: Dann Petty
tutorial files: download here

01. Empty your trash
Photoshop: Graphical blog themes
The first step should always be the same, no matter what you’re creating – empty your trash. That’s right, throw out those web standards – there’s no need for those ‘rules’ of the web. Most importantly, get weird with creativity. Think of a unique theme for your template. In this case, that’s California.

02. Narrow down the idea
Photoshop: Graphical blog themes
Now that we know we’re creating a California theme for this, let’s narrow that idea down even more and create something that’s specifically based on surfing. California itself would be way too broad, and more than likely your first choice of design assets would be to add palm trees – but stay away from clichés.

03. Quick setup
Photoshop: Graphical blog themes
Be quick with the set up – do it however you like, but don’t be constrained. We’re not creating a template here for the late adopters; this site will viewed by early adopters, probably with larger screens. So let’s make this puppy a little wider, at least. Allow for the sizing to change as you progress through the creative process.

04. Sweet landing page
Photoshop: Graphical blog themes
Make it sing! This page determines whether or not someone else will stay on your site for longer than a second and, if you’re lucky, even consider coming back. Most people won’t, generally because the homepage is boring and has too much going on. So be sure to create something unique, in order to keep the users craving more.

05. Fold myth
Photoshop: Graphical blog themes
Ignore the rule that everything important on your site has to be above the fold. Who came up with that misleading statement, anyway? Most of our target audience’s fold, in this case, would be 1,000 pixels plus, at the least. So make a sweet interactive logo/map and place it smack in the middle, and forget the fold.

06. Simple but awesome
Photoshop: Graphical blog themes
Most people think simple means no content and plain colours, but they couldn’t be further from the truth. Keeping it simple actually means placing an emphasis on quality content. So for this design, keeping it simple means creating the perfect background image, using bigger
type, less of a word count and, most importantly, no unnecessary design details.

07. Background that talks
Photoshop: Graphical blog themes
This most important piece of this template is the use of imagery. It adds the visual impact all designers strive for. You can’t just have any old background here. Create a background that absolutely no one else has. A well thought out background can also help differentiate content in creative ways.

08. Less type
Photoshop: Graphical blog themes
The less you can say on your site, the cleaner and more appealing it will look. Let people see your product more and talk about it less. Visually show the data in creative ways. Create whatever it is you are trying to achieve with more visuals and less reading. Remember, interactions speak louder than words.

09. Carry it over
Photoshop: Graphical blog themes
Once the style is set on the landing page, carry every last pixel of that style over to the interior pages. Looking at these interior pages at bird’s eye view, you can immediately tell they belong in a family – but not just any family, a unique one unlike any other.

10. Lifestyle blogging
Photoshop: Graphical blog themes
Let’s face it – the less words, the better. If you can feature a really nice image, especially at a unique size, then let it do the talking first. Let the image say “hello” and the headline give the following important statement: “my name is…” Visual cues work.

11. Support your headline
Photoshop: Graphical blog themes
Add a few supporting lines of text underneath the headline, which helps to describe or set up what you’ll get after the jump on your blogs or features. It’s not always necessary but it’s a nice addition to any headline, especially if you’re not a good copy writer.

12. Type it big
Photoshop: Graphical blog themes
Keep it big and keep it small. What this means is, up that point size and down that word count. Words can be powerful. Cut out all the filler text and add emphasis on the important text by making it larger. Try some new webkit fonts. You can never go wrong with any Helvetica when enlarging a few words.

13. Support Vimeo
Photoshop: Graphical blog themes
…Well, only if you want your videos to look awesome, that is. YouTube videos might get more views, but you can customise a Vimeo player to look and feel just like your site. The simplicity of its player could fit into anything with ease. YouTube, not so much.

14. Huge graphics rule
Photoshop: Graphical blog themes
Why say something in several paragraphs of text, when you can simply just show it? The infographics in this design speak for themselves in their own creative way. Not only do they add visual awesomeness, but you don’t have to read the unnecessary copy. You can never have too many infographics.

15. Footer size small
Photoshop: Graphical blog themes
Big footers are out of style, if they ever were in style. It’s added clutter and content you could easily add somewhere else, like an About page or something. In order to create the best visual site possible, you can’t try to cram everything into one spot. It’ll look like the streets in Time Square – crowded.

16. Bring the noise
Photoshop: Graphical blog themes
It’s always a good idea to keep your elements and styling consistent. An easy trick to that is to add layer style overlays over everything in your PSD. Another trick is to add noise to everything, even the photos you upload as content. Simply add some noise to create some nice subtle texture.

17. Social importance
Photoshop: Graphical blog themes
Don’t flood your site with things like social buttons: ‘500 people like this’-type stuff. Brands only do it for marketing purposes, it actually could hurt your content if you don’t have a large number of followers. Keep it simple with just custom icons on the bottom of every page.

18. Finalise colours
Photoshop: Graphical blog themes
When you started to design, there’s no way you nailed the colours off the bat. Go through the design closer to the end and figure out what’s working and what’s not. Lack of colour is just as important as colour itself. White can stand out more than orange, as it does here.

19. Tad more depth
Photoshop: Graphical blog themes
If you feel your design still doesn’t have enough depth even with the creative background image, try layering smaller images on top of your content. Lay this over even your web fonts. In this case, the surfer’s surfboard barely cruising over the interactive map demonstrates that added depth.

20. Necessary details
Photoshop: Graphical blog themes
Not all details help the creative side of the site. However, in this case, adding creative cues as simple as crossing out the schedule events that already occurred in unique hand-drawn lines, selecting the navigation items with hand-drawn circles and even using subtle hand drawn arrows really adds to your overall feel.

21. Done and done
Photoshop: Graphical blog themes
Looking back at your design from a bird’s eye view again, you should be able to see how you just created a great-looking template that could push some of the limits in WordPress and showcase the true meaning of creative simplicity, speaking through large type, a minimal word count, simple shapes and, most importantly, broken standards.

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • Mark Simchock

      Nice piece.

      Unfortunately, I think you’re missing the main appeal of off-the-shelf WordPress themes…price (as well as convenience). Yes, many of the themes tend to be similar but again, one little difference is what appeals to the user/buyer. Gawd knows people insist on some pretty particular things. Custom work is nice but it’s not cheap and it takes time to build.

      That said, I’d also like to recommend you do a Part 2 that discusses development. Not all themes are equal once you get under the hood and back to the admin control panel. Quite frankly, design is quite often the easy part. How it’s marked up and how the theme is coded are extremely important to the general health of the site / brand and how it can be enhanced going forward.

      I’m not knocking great custom design. Nope. Never. I just think you missed the context target in this case. In either case, thanks for putting this together and sharing.

    • KathPoole

      I would love to see how you implement this theme.

    • mina

      will this theme is very inspiring and meaningful..