Hey, have you heard the news?
I have a new website! It's called Cash and Joy and its mission is to increase the awesomeness of the world - of course - through glorious and meaningful marketing.

Why did I focus on marketing? Because marketing can be the most fun and meaningful activity of your business instead of the most dreaded and icky... if you do it right.

How to design a website (when you’re not a designer)

I’ve never been good at visual art. I have friends who are: they combined talent with a bucket of practice until they can draw and paint and sculpt. They can visualise an object and create it. I can’t do that.

But I can still design a decent website.

Overcoming the fear

We get scared about design. We’re scared we’re not “creative”, by which we mean we’re missing the Magical Spark that will inspire us to create beautiful work.

Luckily, good design isn’t a mysterious gift that an angel has to fly down and bless you with. Design is based on rules. Great artists understand the rules, break them and make masterpieces. But “uncreative” people can learn the rules, apply them, and do a decent job.

Freeing idea, isn’t it?

How to learn web design principles

There are some great books that will teach you the fundamentals of website design. Here are my favourites:

Save the Pixel is an e-book by web designers for laymen. You can glean a lot of the information from the articles on their website web design from scratch, but you should get the book too.

  • It’s only 10 pounds ($15 or so!).
  • It makes the principles clear… why you should do something before how.
  • It’s focussed on effectiveness and conversions.
  • It’s incredibly simple to understand.
  • It’s confidence-building.
  • It’s actionable.

By reading that book and following its guidelines, you will instantly be a better web designer than 80% of people. Seriously.

The Principles of Beautiful Web Design is pretty good, too, although in a dogfight I’d choose Save the Pixel. (Like many SitePoint books I found it to be a bit shallow in its coverage of the topics.) Still, it provides simple guidelines in newbie-friendly language about the basics: stuff like what colour schemes work together, how to apply the Rule of Thirds, and how to balance white space

How to plan your website design

When you’re crystal-clear on who your customer is and what your customer wants (and how you’re different from your competitors), it’s easier to come up with ideas for what your website should look like

Information architecture 101

Make a list of the tasks your visitors will want to complete, in order of importance. Note: this is what your visitors want to do! While it would be great for us (as website owners) to have your website be nothing but a gigantic “Buy Now” button, we know that doesn’t work. You have to encourage visitors to stay on your website, build trust, and eventually give you money. And to encourage your visitors to stay, you need to make it easy for them to do the things they want to do. (But also make the tasks you want them to do prominent, of course!)

Take a piece of paper and plan out ways you could display these tasks. (Those books will really help with ideas like layout, balance, information hierarchy and white space.) Make sure the important stuff is easy to find, and there aren’t too many items clamouring for attention.

Colour psychology 101

Make a list of emotions you want your visitors to feel while on your website:

  • calm
  • confident
  • excited
  • reassured
  • amused
  • friendly

Think of two colours that match those emotions. If you want people to feel energised, then bright vibrant yellows and oranges are a great choice. Care and reassurance might be warm purple and rose pink.

You don’t want to be overwhelming with colour! (There is too much of a good thing… as almost every MySpace page can attest.) Both of the books I mentioned have sensible guidelines on how to use colour effectively and develop colour schemes. (I especially recommend the free Kuler site for helping you create a colour palette that doesn’t suck.)

Do you have a good logo? If you do, then it should be part of the colours of your website. If not… a great logo is worth paying for. With all the information you have about your audience and emotion, a competent professional should find it easy to design a logo or header that sets the tone for the rest of your website.

Build your design

I love, love, love Headway because it helps me do all the annoying code work of building a WordPress theme without having to code. You can drag-and-drop new columns, resize every element, change the font as you watch, and set colours precisely.

Also, because I am not an excellent developer, I have to keep things simple. I have to resist the urge to add ten thousand shiny doodads because I can’t integrate them. (Simple design is effective. This is reassuring when you can’t do complicated design.)

And then…

You tweak and re-tweak and learn more and rebuild and think about hiring someone and fall in love with widgets and then have to remove them because your sidebar is six miles long and change your colours and get a header made and change your colours again and get really comfortable with it so you can make a decent website design in half an hour and all your friends ask, “How the hell did you do that?”.

Don’t tell them. They will give you pizza for your knowledge.

Have you created a website design? Thought it wasn’t for you? Tell me in the comments!

  • http://topsy.com/trackback?utm_source=pingback&utm_campaign=L2&url=http://www.beawesomeonline.com/how-to-design-a-website Tweets that mention How to design a website (when you’re not a designer) — Topsy.com

    [...] This post was mentioned on Twitter by bethwodzinski and David Burch, Catherine Caine. Catherine Caine said: How to design a website (when you’re not a designer) http://bit.ly/b5NfHU [...]

    [WORDPRESS HASHCASH] The comment’s server IP (208.74.66.43) doesn’t match the comment’s URL host IP (74.112.128.10) and so is spam.

  • http://www.verbhounds.com Beth

    Whoa, no Kevin in the header? I'll miss his smiling face!

    This came at the perfect time for me; I'm reconsidering the design of one of my sites (http://www.shimmerzine.com). There's a lot I love about it, but also a lot that's been frustrating me, and the whole thing is just overwhelming and horrid and I don't want to think about it. So, yeah, it was good to read this.

  • http://www.BeAwesomeOnline.com Catherine Caine

    I miss Kevin already. But at the moment he can't commit to more than 1 post a month, and it was confusing people to have him in the header. As soon as he's able to rock more often, he'll be back!

    My bestest piece of advice is to spend a half hour on the website design from scratch site. It will totally reduce your overwhelm and horrid-ness.

  • http://completeflake.com/ LaVonne Ellis

    Good job – you even redid your favicon. Cool!

  • http://www.BeAwesomeOnline.com Catherine Caine

    I love that you noticed that. :)

  • http://completeflake.com/ LaVonne Ellis

    Well, I've studied favicons a bit because they are that final touch
    that gives a site a finished look. Which reminds me – I'd better
    figure out one for the Flake. Hmm, maybe a snowflake?

  • http://www.BeAwesomeOnline.com Catherine Caine

    Or a question mark!

  • http://completeflake.com/ LaVonne Ellis

    PERFECT!

  • http://janebradbury.com/ Jane Bradbury

    My friend has threatened me with violence if I change my site again anytime soon! I keep using it as an excuse not to produce content, because the site has to look perfect first. Then I think, 'It's not me!' but everyone who knows me says it's exactly me.

    I just don't see myself as others see me.

  • http://fight-mediocrity.com/ Gareth

    I don't normally tweak a design too much unless something breaks. That being said, I have had some horrors. (dmr.gazandkim.com – static html for a site that was being updated 3 times a week – not a good idea). Dodgy Movies. Reviewed! is better, but the design still feels too cookie cutter for me. I don't like the background, and the sidebar isn't exactly what I want, and so on. But, I'm struggling enough to produce content that I can ignore the design.

    The one that is struggling (both content and design) is Fight Mediocrity. I'm not entirely sure what I want to do with this one. (I like fight-mediocrity as a URL, just not as a site name.) I finally came up with a tagline yesterday – Join the epic quest to slay the hideous beasts of mediocrity, idiocy, and broccoli (I'm not sure about the broccoli bit though, I might need something even more generic and annoying, like paperwork, but broccoli is a funnier word, I could use aubergine as well, but…). Now all I need to do is get someone to design me a header. (enough rambling, onto something that has a point)

    There is a great post on colour over here (http://www.bigbrandsystem.com/you-already-know-…) which has a link to a nice colour palette tool http://colorschemedesigner.com/ If you really want to go into depth on the whole colour thing, looking for stuff on “Colour Theory” is a good starting point. (combine the search with “miniature painting” there are some nice beginner articles, with incredibly painted mini figurines)

    (yay, at least I managed to get vaguely back on topic. wish I could write blog posts as easily as I write comments)

  • http://www.BeAwesomeOnline.com Catherine Caine

    You're definitely not alone in that. :)

    I'm very very anti-perfectionism (in fact, I made a video about it a few weeks ago – http://www.beawesomeonline.com/forget-perfect-s…)

    I want you to rock it out, and you can't rock it out if you're hiding behind teeny tiny change-the-font-size-by-a-half-point changes.

    So thank the threatening friend and make content. It's the best thing you can do.

  • http://www.BeAwesomeOnline.com Catherine Caine

    Static HTML makes the baby Jesus cry. DMR is in the “good enough for now” design stage, and I'm glad you've decided to focus in on content.

    FM is gonna be a bigger beast. I just made a supremely dodgy header image for you to get started with, I hope you like it. :)

blog comments powered by Disqus