Close
Close

Blog Design for Beginners

PeterThe following post is a guest post from the very talented blog designer, Peter Flaschner, as part of the blogging for beginners series.

Hi all. I’m Peter Flaschner, the founder and creative dictator at The Blog Studio. I’m going to walk you through the process we go through when designing a blog or other website. This is part one of two. When we’re done, we’ll have a super flexible WordPress theme perfect for anyone looking to make a buck with a blog.

Design can add tremendous value to a blog. When it comes to making money with your blog, proper web design can make a huge impact on your bottom line. For some reason, I get a lot of resistance when I say this. I think it has to do with one’s perceived definition of design. The typical response I get is ‘ugly sites do well with adsense’. That may very well be true. I bet though, that those same sites would do even better with proper design.

Before we get into this, I need to dispel one further myth: design is not about making things pretty. It’s about making things work to their best ability. Let me quote from dictionary.com:

  • To formulate a plan for; devise: designed a marketing strategy for the new product.
  • To plan out in systematic, usually graphic form: design a building; design a computer program.
  • To create or contrive for a particular purpose or effect: a game designed to appeal to all ages.
  • To have as a goal or purpose; intend.
  • To create or execute in an artistic or highly skilled manner.

So, without further ado, let’s design a site. Here’s what we’re going to need: pencil, paper, and a graphics editor (such as Photoshop, Illustrator, Freehand, or Gimp).

We’re going to start by collecting a bunch of information. I know the instinct is to jump straight into your drawing program and start messing around, but it’s not the best approach. You’ll see why as we move through this.

We’re going to design a site for a fictional problogger. This person (let’s call him Fred) writes about watches. He’s earning a couple of hundred bucks a month from his current site, and wants to step that up.

Step 1: Identify the site’s goals (what are you trying to do? How will you achieve it)

We’re designing this site to increase Fred’s profit. We’re going to do this by designing a flexible framework for Fred to experiment with ad placement, by increasing the attention grabbing aspect in order to capture more first time visitors, and by increasing the site’s stickiness, giving users more chances to see an ad that they want to click on.

While we’re at it, we’re going to use a plugin we recently developed that will give Fred control over the colour of the various elements of his site. This way, he’ll be able to keep things looking fresh.

Step 2: Identify your audience (who are they, and where do they come from)

Fred’s audience is made up of two groups: hardcore watch nuts, who read Fred’s site for news and reviews of the latest timepieces, and people shopping for watches, who come to the site via searches for specific makes and models.

Step 3: Identify specific needs (what functions does the site need to have in order to meet its goals?)

Flexibility with a minimum of fuss is key here. We want Fred to be able to move ad blocks around without having to mess with the code. We also want Fred to be able to change up the look of his site to keep things fresh, again, without messing with the code.

We also want to increase the site’s stickiness. We’ll do this by including a “favorite posts” listing and related links in the post’s footer.

We’ll show a category listing, to allow readers to explore the site in a non-linear way, and a search bar, so readers can search for specific makes or models. We also want to include a blogroll, to share the love. Finally, we want to show recent comments, so Fred’s regular site visitors can keep up with the overall conversation.

Step 4: Draw wireframes (rough sketches to experiment with element placement and layout)

Now the fun starts. I use a fabulous program called OmniGraffle (mac only) to play around with site layout and element hierarchy (more on this in a moment). I like to stay out of my graphics editor, since the potential to get sucked into designing visual elements is so strong. You really want to avoid jumping into the visual part of the design at this stage, since you’ll just end up getting lost.

What we’re doing now is building the terrain that we’ll lay our visual elements over. Skipping this stage is is the single biggest mistake newbie designers make.

Here’s an example of Fred’s site in the first stages of development:

Wireframe

As you can see, there’s no “design” per se present. What we’re doing though is figuring out the optimal placement of the various blocks that make up our site. We’re establishing the hierarchy of the page elements; deciding what’s most important, where we want the users’ eye to move.

This is a very rich area of study. I’m going to try to boil it down to it’s most basic (this data comes from an article by Peter Faraday. In essence we perform 2 functions immediately upon landing on a web page: search, and scan. The search function is our eye looking for a salient entry point into the page. We are attracted by the following (in descending order)

  1. motion
  2. size
  3. images
  4. colour
  5. text style (font choice, font weight)
  6. position

Once we’ve determined where we can start reading, we determine what to read by scanning the page. We look at groups of objects, and the proximity of individual objects to decide what is most important to read first.

Knowing this, we can make decisions in the layout and styling of our pages in order to increase the odds of generating the intended response (ie, clicking on an ad).

The eagle eyed among you may have noticed that we have more ad blocks than Google currently allows. We won’t be using them all at the same time, but we’re building them in so Frank has the ability to move the ads around.

Step 5: Make a mood board (a collection of images, colours, type, etc that give you the feel you’re aiming for).

On larger jobs, we collect a bunch of imagery that feels like the project at hand. We look through magazines (fashion mags are a goldmine), books, and the web for colours, textures, layouts, etc. We cut up the magazines or print stuff out and literally make up a board that summarizes the mood we’re aiming to create for the site.

For a smaller job, we go through the same process, but create a virtual board instead. This is basically a big document in Photoshop that we can paste a bunch of stuff into. These images become our starting place for creating a colour palette, exploring texture and form, and generally acting as inspiration.

Creating one of these things doesn’t take long – go and try it, you’ll be surprised how much it helps.

Here’s an example from a recent project:

Mood-Board

Step 6: Visual design

Having completed all of the above, the visual design is a much more manageable job than had we jumped straight in at the outset. Now we can concentrate on the site’s balance, energy, and style.

One huge mistake web design newbies make is not leaving enough space around the individual elements. This is called “white space”. Note that it doesn’t have to be white! Rather, the term refers simply to empty space.

At this point, you should be pretty well along in your design. I’m going to leave you now and get to work on Fred’s design.

Tomorrow, we’ll turn our static graphic into a WordPress theme.

Before I go, here’s where I’m at with Fred’s site so far:

Site-So-Far

update: Peter’s just emailed to say he and most of his family are unwell. As a result, the next part of this mini series might be a day or two away. Stay tuned for part 2.

About Darren Rowse

Darren Rowse is the founder and editor of ProBlogger Blog Tips and Digital Photography School. Learn more about him here and connect with him on Twitter, Facebook, Google+ and LinkedIn.

Problogger.net runs on the Genesis Framework

Genesis Framework

The Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Check out the incredible features and the selection of designs. It's that simple - start using Genesis now!

Comments

  1. Mike says:

    I wish I had the time and patience to make my own templates. How much approx would you pay for a blog template design?

  2. Dave says:

    Nicely written article Peter, and one that I’ve booked marked for future reference.

    In the past I’ve always drawn out the layout of my sites on paper, and then code them up once happy with the structure. I’d never really given any thought to the colour schemes and mood aspect though, I guess that comes from having no design background.

    Do you at this initial stage make decisions on what width of design you are going to use, or do you always aim to go for a floating design that will shrink to fit?

  3. Nick says:

    Amazing post, and great for the budding template designer. I really enjoyed this article and think its good inspiration for anyone that’s working to make their own themes/designs. I know that for me its always a big temptation to just start coding/making graphics without a proper plan. I knew it was a mistake before, but now I realize why, and hope to rid myself of that design process flaw.

  4. Stunning post. Can’t wait for Part 2.

  5. Aaron says:

    Excellent insight into the design process. It’s as if I was living the experience. :-)

  6. Jan says:

    This is some well-written guideline.
    At this moment I a m still in the phase of tweaking existing templates, but designing one myself from scratch is still on the list. Especially seeing what it can cause in terms of traffic…

    Look forward to the next part!

  7. Marco says:

    I’m addicted to this website…

  8. Luis Rull says:

    A great post… it made my feel like my blog is really ugly. I will work on your framework … I will let you know how it goes.

  9. Aaress says:

    Excellent Post – - – very insightful

  10. Awesome!

    Anyone have suggestions for a WinXP alternative to OmniGraffle?

  11. Carl says:

    Amazing post, I don’t know whether the writer of the post is keeping up with this or not but I’ve got a question, others may know though.

    How do you create that static graphic? – Are there any tutorials anywhere showing how?

  12. Nick says:

    I believe the static graphic you just create in Photoshop or Illustrator. Start out with a blank canvas use guides in photoshop to help you establish a layout flow. The static graphic is a big help when designing your site because you’ll have a great idea of what you want it to look like.

  13. @Scott:

    The best Windows alternative to Omnigraffile is Microsoft Visio.

  14. Liz Strauss says:

    Fabulous and informative! This is a classic post. Everyone should bookmark this post. Congratulations Peter and Darren. I’m stopping before I gush.

  15. Glen Johnson says:

    very good post even though I have been blogging for over a year I think that I will have to study this.

  16. George says:

    @ Scott Sehlhorst

    You can use Dia, its free and open source.

  17. alex-and-r says:

    Thanks for the article. It’s very good and useful. I think there is a lack of such articles in all the online recources concerning web-design. In general all of them talk about what colors should we choose, what photoshop effects to apply. And so we miss the big picture – the whole process from planning to implementation.

  18. nicklaw17 says:

    I loved this article – trying to get a new blog up and running via WP, and found this to be a great read.

    I do hope Peter and his family are recovered – as I’m waiting with baited breath for the second half of this article – since I’m still hovering at the design/template creation phase of a new WordPress-based blog. :)

    Again, great read, I’m looking forward to part 2!

  19. John Hood says:

    Very insightful and, again, proves the adage that even in this digital age start with pencil and paper!

  20. michael says:

    Excellent work Peter. This is as clear a description of the web design process as any I’ve seen. I love that the entire first submission was on planning.

  21. Helen Price says:

    I read a lot of articles where they say that the number one mistake is to put blogger’s pictures and biography.

  22. Honey Wesley says:

    I happened up on this site at the recommendation of a poster on the Warrior Forum….have been reading now, well, really more ‘devouring’, for almost two hours and soaking it all up like a thirsty sponge! Have been floundering around with 2-3 partially developed web-sites, not really knowing what to do with them and after all I’ve read here, I think it’s because I was born to blog! I knew there was money to be made with blogging, but to be honest, I had no idea you could actually earn a living with blogs. It’s like a dream come true for me. I’m so excited about this series for beginners and can’t begin to thank Darren enough for his willingness to share his time and knowledge. I will be studying every inch of Problogger.net and I hope one day I’m in a position whereby I can ‘pay it forward’ to others.

  23. Honey Wesley says:

    Oops….wrong URL in my first post…toldya I was new!

  24. Mitch says:

    is he going to do part 3? It’s been over a month of waiting. Hope he doesn’t keep his design clients waiting this long!

  25. Sara says:

    Just stumbled upon this and it’s a great article. I’m a programmer, not a designer, but I do design in a sense. I use wireframes on all my projects and I really wish more people would do so. Design (not the graphic part) is one of the most important parts of any web or software project. Wireframes are a great tool to give you a visual representation.

  26. Jason says:

    I agree with Sara. I am also a coder and am forced to layout pages. A good application is use to move around elements is Microsoft Visio. It is one of my primary tools for developing.

    Could there be a larger scale image for the wire frame example? I was able to open it in Photoshop and enlarge it to see the element names.

  27. Dustin says:

    I have always thought that Joel Spolsky did a good job explaining interface design. – joelonsoftware.com

  28. Kabbalah says:

    Nice article. The color/mood template idea with the example is helpful.

  29. Cher says:

    Excellent article. But who spends his time only on designing the theme. Most of Internet Marketers outsource this coding and designing aspect.

  30. Robert says:

    Very Interesting. I’m going to start Implementing some of the things he said.

    I’always changing my Theme, I’m never sure what works for me and what doesn’t. I’ve tried a couple but with no changes i’m never happy. I’m going to go through this article slowly and work on my blog.

    Gonna be Fun. :)

  31. Shain says:

    Good information.
    I wanted to know about English Blogging.
    This blog would be very helpful to me.
    Thanks.

  32. Popsana says:

    Nice article. The color/mood template idea with the example is helpful

  33. andrea says:

    Well done.. Site design and stuff can also be acquire through the blog template of theme like in word press you can have a new look of your blog within a minute.

  34. Mark says:

    I read a lot of articles where they say that the number one mistake is to put blogger’s pictures and biography.

  35. giuseppe says:

    Lettura molto interessante.. nel mio lavoro utilizzo la stessa metodologia. Good work!

  36. Bryan says:

    How do you drive traffic?

  37. In the offline world, I work in an Advertising Agency and we do a lot of lay-outs, mostly for print ads. It’s pretty unexpected that I read a good lesson on Art Direction in a blogging site!

  38. bryan says:

    We have made a blog from scratch with a video a bloke did on blogger.com how do affilites work, filters, how can we make money from blogs because we have had lots of traffic we must have done something right down the line and if theres anything else we need to know can someonr plz email us on [email protected] on our site and need to know more about blogs can someone email me 2 find out many thanks bryan p.s can someone have a look and see if it’s ok as we are newbeies if thay can plz let us know so we can get this sorted with your help link is http://www.cookingtraditionalrecipes.com/ many thanks bryan and jo

  39. amosis says:

    there are many free themes available..you can go for it…as all dont have money (like darren :D) to have customized theme..

  40. Daria says:

    Excellent post! I want my blog site ( http://www.HotKomb.com ) to be impressive but don’t know much about the technical stuff of web design/ layout. After reading this article I feel like I should go back to the drawing board.

  41. Emosokolov says:

    Well I can see that it’s an old article, but as a newb in bloging, want to say thank you for this article, there a a few tips that I think will improve my skills :)

  42. Thanks for this Peter. This is exactly what I’m needing right now, I’ve just started my first blog and am torn between weather I should use a free Word press theme or get a professional theme done.

Trackbacks

  1. [...] Blog Design for Beginners over at ProBlogger is a great read for non-beginners as well. [...]

  2. [...] Blog Design for Beginners [...]

  3. [...] Blog Design for Beginners [...]

  4. [...] Blog Design for Beginners [...]

  5. [...] Here’s a nice article on Blog Design for Beginners from Darren Rowse’s Problogger. Problogger is a great resource for people trying to make money out of blogging itself. [...]

  6. [...] Blog Design for Beginners – интересная статья для начинающих, которая тем не менее не понукает сразу бросаться к графическому редактору, а хоть и по верхам но рассказывает о том, что планировать надо, планировать, учитывать цели и аудиторию. Кроме того, там приводится интересная техника планирования визуальной атмосферы сайта, а также иерархия “привлекалочек” внимания. [...]

  7. [...] Check it out and I will also be posting links to the next two parts in the series. [...]

  8. [...] Recently, he contributed to the Blogging for Beginners series at Problogger. At this time, Parts 1 and 2 are available and I look forward to Part 3. Even if you’re not a designer (as I am not), the window into the thought process involved is quite spectaculor. [...]

  9. [...] Blog Design for Beginners Part 1 [...]

  10. [...] One of the buzzwords of Internet marketing is design. Peter Flaschner over at http://www.problogger.net wrote an excellent article on the importance of design. [...]