SpyreStudios

Web Design and Development Magazine

  • Design
  • Resources
  • Showcase
  • Inspirational
  • Tutorials
  • CSS
  • Resources
  • Tools
  • UX
  • More
    • Mobile
    • Usability
    • HTML5
    • Business
    • Freebies
    • Giveaway
    • About SpyreStudios
    • Advertise On SpyreStudios
    • Get In Touch With Us

5 Things That Can Make (or break) A Killer Website Design

March 5, 2010 by Mike Smith 40 Comments

Starting the website design process can either give you a really great feeling, or can leave you feeling hollow in the pit of your stomach. The feeling you get is usually dependent on how great of a kick start you get with your design process.

What if I were to tell you that you can control those feelings even more than you’re used to? The truth is, you can control the feelings you have by utilizing some tips on how to make sure you’re creating a killer website design right from the start.

There are things that you should (and shouldn’t) be doing during your website design process. These things can be as small as subtle color choices or as large as advertisement placement or layout. Regardless of the size of each item on the list, the impact of each item is equally huge when you look at the bigger picture.

So today i want to go over 5 things you can do that will either make, or break, your next website design. Of course you should always start by brainstorming, sketching, wireframing and go through a couple rounds of revisions before you actually start designing a site in Photoshop or Fireworks.

I hope you enjoy the article.

Making Proper Use Of White Space

Killer website design tips

It’s no secret that here on SpyreStudios, we’re all fans of minimalism. This translates perfectly into website design because using the right amount of white space can make your design have a better flow and help visitors find what they’re looking for – and fast!

For those who are new to web design, when we say “white space” we’re not actually referring to the actual #FFFFFF color. What we’re referring to is the open, airy spacing that is utilized in designs. Spacial sense is also very important. For some inspiration on minimal designs, you can check out some previous articles we’ve wrote here on SpyreStudios.

  • 40 killer minimalist blog designs
  • 56 light and clean website designs using a minimalist color scheme
  • 20 examples of dark, minimalist website designs with great typography
  • 15 minimalist designs that inspired me

The Wrong Color Choice Can Kill A Business

Killer website design tips

When you’re designing a website that’s geared towards making sales and getting people’s attention, you’ve got to remember that the wrong color choice will throw off potential buyers, especially if the color scheme you’ve chosen isn’t giving off the proper vibe for your product/business.

For example, a business aimed at selling meditation products wouldn’t do very well with a loud color scheme filled with bright reds or yellows. That business model would be better suited for muted colors – something calming and soothing. On the other hand, a website that’s trying to sell training equipment would do very well with a brighter, more “tough” color scheme.

One way to find good color schemes for your site is to check out Colour Lovers – they’ve got great palette choices for all kinds of styles. This article written by our very own Jon should also prove useful.

Don’t Turn Your Navigation Into A Game Of “Where’s Waldo?“

Killer website design tips

Your goal is to keep people on your site for longer than 4 seconds, so one of the main things you should be thinking about is your navigation. Is it easy to find? Are people able to get from page to page easily? Will your visitors know how to contact you in the first couple seconds of viewing your site? (we’ve all seen Flash sites that have the navigation buried under 37 seconds of animation and heavy graphics, right?)

These are all questions that should be asked while designing your website. Turning your navigation into a game of Where’s Waldo? will definitely ensure that your page views per visit drop, your interaction plummets and your visitor’s overall experience is shot to hell.

By looking at the SpyreStudios website, you’re greeted with the navigation right away. It’s not hidden, blended in or hard to find. It’s up front and in your face – just like it should be.

Ignore The “Keep Everything Above The Fold” Mantra

Killer website design tips

Some people will have you believe that you must keep all of your content above the fold, disregarding the design and interaction you build into the top part of your website. Maybe they tell you to make your navigation and logo so small that the content comes in at 100px. Maybe they say that a “buy now” button doesn’t work if it’s below the fold. Whatever “they” say – they’re wrong; if you execute the top part of the design properly.

Paddy Donnelly has an awesome post titled “Life below 600px” that you should check out. A lot of great points are brought up in that article that you should really be thinking about when designing your site. Sacrificing design to appease the masses shouldn’t be at the top of your to do list.

Don’t Be Afraid To Sell Yourself As Much As Possible

Killer website design tips

Look, if you’re designing your own website to promote your business or you’re building another company’s website, one of the main thing that site is supposed to do is sell. Don’t let people tell you anything else because it would be a lie. Interaction is great and socializing with your clients is obviously a no-brainer, but if your website design doesn’t sell you to them, what’s the point in having a website to begin with?

If you look over most business websites, you’ll see a pattern – they all have buttons of some sort that say things like “sign up” or “buy now” or “view pricing and plans“. Checking out sites like Woo Themes, Basecamp, Mail Chimp and even the upcoming MediaLoot will allow you to visually see what I mean. There’s a reason they’re utilizing these types of calls to action – one of their (many) goals is to turn a profit.

As long as you don’t forget that and you make sure it’s easy for people to know you’ve got something to sell (and for god’s sake don’t over do it!), you’re on the right track.

Have your say

Drop a comment and let us know what you think can make or break a killer website design. Did I miss anything on the list?

the add to cart buttons image was a screenshot of this article

Subscribe for 642-504 training program to get easy and fast success in real exam. Download the 70-643 dumps and 70-648 study guide to nail down the success on first try.

Filed Under: Article, Design, UX

Comments

  1. Nina Hunter says

    March 5, 2010 at 5:11 am

    This is so true, this article should be posted also on business sites so the clients can see it too.

  2. Simon Roskrow says

    March 5, 2010 at 6:06 am

    One of the most common-sense, clearly written, and easily understood guides to web-design that this non-web-designer (who, despite his lack of credentials has build his company’s site!) has ever read. Thanks.

    Simon
    MD
    trainingreality

  3. Michal Kozak says

    March 5, 2010 at 6:31 am

    I definitely agree with “ignore above the fold mantra”. Pepole were scrollin, are scrolling and will scroll. That’s just the way it is. Most of them do that without even realizing they’re doing it.

    Nice read.

  4. Alan says

    March 5, 2010 at 6:44 am

    Got to agree with the above the fold mantra, nowadays people are more interested in the content, and as long as you get their attention above the fold(normally with a really good banner) they will scroll down without any issues.

  5. Fawcesite says

    March 5, 2010 at 8:09 am

    Definately feeling the ‘below the fold’ subject. Although it makes sense to have important info visible above the fold, that doesn’t mean to say that everything needs to be visible @ 1024 x 768! Usability testing provides the results that no ‘little-bit-of-knowledge’ can dispute!

  6. Agustín Amenabar says

    March 5, 2010 at 8:22 am

    The fold should no longer a discussion issue for designers, so I think it’s a bit of a space filler in this article. The rest are great and will always be matter for improvement and debate.

  7. Joe Rozsa says

    March 5, 2010 at 9:45 am

    Yeah I never follow(ed) that “above the fold” crap. It’s like telling me to color inside the lines… never did that either.

  8. 3kolone says

    March 5, 2010 at 10:26 am

    well said, simplicity is the best policy.

  9. Web Design Maidstone says

    March 5, 2010 at 11:05 am

    I had a discussion about page fold earlier today, if there’s one thing that drives me to distraction its a client’s insistence to cram loads above the mythical fold… nice article and whole heartedly agree with all points!

  10. Anna Green says

    March 5, 2010 at 11:46 am

    I always get a kick out of understanding my client, their business and how i can gain them more business via my design. There is nothing better when a client is really excited about a design because you have paid attention done your research and added appropriate features that they had never though of. Websites are essentially a sales tool and they don’t come cheap you have to be satisfied that your design is going to earn its keep.

  11. Davezilla says

    March 5, 2010 at 1:00 pm

    This is more of an information architecture gripe, but along the same lines as “Where’s Waldo” with the navigation: designers who get too cute with the navigation names. Stop it. Not everyone on the Intar-Webs speaks your language natively and may be confused by your slang terms for common navigation elements.

    Stick to the basics: Contact, Home, Portfolio (or Gallery), Careers, About Us, etc. When designers (and writers) try to be clever with metaphors and themes on their nav, they only increase drop off rates, frustration and serve to lose readers.

  12. Amber Weinberg says

    March 5, 2010 at 1:02 pm

    I love the first tip on minimalism – I’m a huge fan of that on the web and in real life. I’m also surprised at how many designers start their design in Photoshop, instead of brainstorming and sketching first.

  13. Melody says

    March 5, 2010 at 2:18 pm

    Mystery meat navigation is definitely one of my biggest pet peeves!

  14. thomas moore says

    March 5, 2010 at 2:20 pm

    OK you free thinkers, this prize-at-bottom, make a chronological/temporal/teleprompter approach works for an A-B-C, front-middle-back set of content or ideas. But when I have thirty seconds (Gartner, Feb 2009) on average when I am comparing/shopping like things or commodities, I can’t afford all this white space which equates from spatial room to length of time. Don’t get me wrong, I’d rather listen to a cool bossa nova than thrash metal, and noone wants to listen to the FedEx guy (recall his lightning delivery?). But if I ALREADY have a construct of the values and variables that are my criteria for scrolling or LEAVING, then I need to provide them at once, and so they are viewable together. Since most paying gigs are for services or products that compete, asking the viewer to fall waaaaaaaay down to the bottom in my view may win the design-aesthetic but defeat conversion. I enjoyed the article, I will be back.

  15. Manish says

    March 5, 2010 at 2:22 pm

    Above the fold matra … i scrolled 7 to 8 times and now i am here after reading all comments. Just keep things interesting , involve users in your design and anybody love to scroll down. Nice article

  16. ryanMoultrup says

    March 5, 2010 at 3:02 pm

    Well said…I like your point about the colors. Picking the right colors is sometimes the hardest part of the process but one of the most important.

  17. Robert says

    March 5, 2010 at 3:48 pm

    Very well done, stumbled!

  18. matthew duerksen says

    March 5, 2010 at 3:53 pm

    Wonderful points! I love white space!

  19. Jason Kilp says

    March 5, 2010 at 4:24 pm

    I did once have a client who said, and this is verbatim, “I don’t like scrolling.” I was amazed that someone could actually have a dislike for the action of scrolling down a website. Alas, she didn’t get her way, and she didn’t complain either, but that was an interesting time.

  20. Duane Kinsey says

    March 5, 2010 at 5:03 pm

    Love the Where’s Waldo analogy.
    When it comes to navigation K.I.S.S. – Keep It Simple Stupid.

  21. Jenna Molby says

    March 5, 2010 at 5:04 pm

    Great points, thanks for sharing!

  22. Jeremy Newton says

    March 5, 2010 at 8:32 pm

    Awesome article. You brought some really clear points. Im actually gonna bring up that below the fold thing. I’m working on a website for my church and my friend is telling me it shouldn’t have to scroll at all on the site and now I have a little more backing to shove it in his face ;)

  23. lorilee says

    March 7, 2010 at 5:41 pm

    Thank you for the great article. Well said, well written, well needed! Thanks for the links too for the minimalist design.

  24. AlchemyCode says

    March 8, 2010 at 1:08 am

    Great post! This all is so true – I wish I could convince my clients that it is just impossible to Keep Everything Above The Fold :)

  25. jay design says

    March 8, 2010 at 4:39 am

    Great article. It’s all about minimalist design and white space. I think that colour choice is one of the hardest parts of a design to get right.

  26. Jordan Walker says

    March 8, 2010 at 8:57 am

    Have an attractive and correct color scheme is an important topic for conversion.

  27. Michele says

    March 9, 2010 at 4:38 pm

    Hi Mike,
    I am in the process of developing a website and thought your article was very helpful. I was wondering if you knew of any good web hosting sites that are inexpensive, yet allow you to easily manage a website? I plan on using an ecommerce based plan.

  28. Hoxxy says

    March 10, 2010 at 8:21 am

    Im a great fan of minimalism so def agree with the first, sadly 50% my designs never seem to work out tho’ I guess because I also love 1 page designs…lol

    Thank you for the great article!

  29. Mike says

    March 11, 2010 at 11:08 am

    Sad thing is that the fold has to be mentioned because clients still bring it up.

  30. Large Format Prints Expert says

    March 11, 2010 at 3:28 pm

    I agree completely. Above the fold is meant to catch people’s attention, if they are interested they will scroll down inmediately; it comes on very naturally.
    This is clearly not widely understood because some sites that I have visited are so crammed with information “above the fold” that you loose interest inmediately.

  31. Rodney Keeling says

    March 12, 2010 at 10:56 pm

    Awesome post! The selling yourself is very important. Being a timid webdesigner is a bad business! :]

  32. Atul Kash says

    March 16, 2010 at 6:54 pm

    Making the proper use of whitespace is the key here. Great Article!

  33. Brett says

    March 17, 2010 at 4:39 pm

    Nice article I liked it

  34. Juancho says

    April 13, 2010 at 9:25 am

    Cool tips :)… great for startup designers ;) thanks for the info

  35. sebbdk says

    April 26, 2010 at 4:01 am

    Nice article, i found waldo! =)

  36. Sandeep Soni says

    July 6, 2010 at 2:39 pm

    This really worked in creating a good website

  37. jeff says

    October 10, 2010 at 10:33 am

    Great source of information. Hopefully you’ll post more of like these. THanks

  38. Ahmad says

    October 30, 2010 at 8:54 am

    Very nice article thanks for the great info

  39. raje benivolent says

    January 20, 2011 at 10:46 am

    fifth point is exact. i have seen the most of the website will give plenty of opportunity. this will confuse the buyer which one is the best.

  40. Wes Foster says

    January 17, 2018 at 12:18 pm

    I just stumbled upon this gem, eight years later, and many of the points are still true, especially the “where’s waldo” of navigation links! Site structure, eight years later, seems to still be taking the backseat on a majority of websites.

    Great job on this timeless article!

Leave a Reply

Your email address will not be published. Required fields are marked *

Please prove you're human *

Recent Posts

  • 31 Fresh Design Elements for Spring and Easter
  • 10 Templates for Music Concert Flyers
  • How to Build a Web Scraper Using Node.js
  • Best PHP Books, Courses and Tutorials in 2022
  • How to Get Your First Web Design Client

Archives

  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021
  • May 2021
  • April 2021
  • March 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • September 2017
  • August 2017
  • July 2017
  • June 2017
  • May 2017
  • April 2017
  • March 2017
  • February 2017
  • January 2017
  • December 2016
  • November 2016
  • October 2016
  • September 2016
  • August 2016
  • July 2016
  • June 2016
  • May 2016
  • April 2016
  • March 2016
  • February 2016
  • January 2016
  • December 2015
  • November 2015
  • October 2015
  • September 2015
  • August 2015
  • July 2015
  • June 2015
  • May 2015
  • April 2015
  • March 2015
  • February 2015
  • January 2015
  • December 2014
  • November 2014
  • October 2014
  • September 2014
  • August 2014
  • July 2014
  • June 2014
  • May 2014
  • April 2014
  • March 2014
  • February 2014
  • January 2014
  • December 2013
  • November 2013
  • October 2013
  • September 2013
  • August 2013
  • July 2013
  • June 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • October 2012
  • September 2012
  • August 2012
  • July 2012
  • June 2012
  • May 2012
  • April 2012
  • March 2012
  • February 2012
  • January 2012
  • December 2011
  • November 2011
  • October 2011
  • September 2011
  • August 2011
  • July 2011
  • June 2011
  • May 2011
  • April 2011
  • March 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • October 2010
  • September 2010
  • August 2010
  • July 2010
  • June 2010
  • May 2010
  • April 2010
  • March 2010
  • February 2010
  • January 2010
  • December 2009
  • November 2009
  • October 2009
  • September 2009
  • August 2009
  • July 2009
  • June 2009
  • May 2009
  • April 2009
  • March 2009
  • February 2009
  • January 2009
  • December 2008
  • November 2008
  • October 2008
  • May 2008
  • April 2008

Categories

  • Accessibility
  • Android
  • Apps
  • Art
  • Article
  • Blogging
  • Books
  • Bootstrap
  • Business
  • CSS
  • Design
  • Development
  • Ecommerce
  • Fireworks
  • Flash
  • Freebies
  • Freelance
  • General
  • Giveaway
  • Graphic Design
  • HTML5
  • Icons
  • Illustrator
  • InDesign
  • Infographics
  • Inspirational
  • Interview
  • Jobs
  • jQuery
  • Learning
  • Logos
  • Matrix
  • Minimalism
  • Mobile
  • Motion Graphics
  • Music
  • News
  • Photoshop
  • PHP
  • Promoted
  • Rails
  • Resources
  • Showcase
  • Tools
  • Tutorial
  • Twitter
  • Typography
  • Uncategorized
  • Usability
  • UX
  • Wallpapers
  • Wireframing
  • WordPress
  • Work

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

SpyreStudios © 2022