Podcast 42: Choosing the right design
Posted in Podcast on: Monday, July 10, 2006 by Paul Boag
It’s not unusual to be in a position where you have to choose between more than one design for a site. Whether you are a website owner assessing the work of multiple agencies or a web designer considering different approaches, sooner or later you are left with the question “which design do I pick?”.
Podcast: Play in new window | Download (30.7MB)
In this week’s podcast Paul and Marcus discuss the decision making process involved in settling on a design for your site. Whether you are a designer or web site owner this podcast provides some interesting techniques for choosing the right design.
To subscribe directly within itunes click here
Help us out. Complete our podcast survey
How to approach choosing a design
Your approach to assessing a design is as important as the quality of design itself. Approaching your assessment in the wrong way can quickly lead to the wrong conclusions. Below are a few quick tips on assessing a design:
Avoid personal opinions
Design is very subjective. We all know what we like and yet we very rarely agree on what that is. It is easy to simply assess a design based on your personal preference. However, the chances are you will not be the end user of your site and so the design should cater for a wider audience than just you.
Be careful who you show
Although you don’t want your decision to be based on your personal preference you still need to think twice before you start showing it around. The temptation is to show it to work colleagues to get their feedback however they aren’t your target audience either (unless you are building an intranet). Try and avoid design by committee, have one decision maker that collates feedback from end users rather than co-workers.
View the design in context
It’s important that you assess a design within its context. Never print a design out to make your decision. Access each design on screen and within a web browser. After all, that is how other people will view it.
Check on multiple monitors
A design can look radically different on various monitors due to colour balance and gamma settings. Make sure you look at the designs on as many different screens as possible. A good design needs to be flexible enough to accommodate the different screens your site visitors will be using.
View at different resolutions
A design not only needs to work on different monitors but also at different resolutions. The resolution your PC is running at affects what can be seen on a design before you need to scroll. It is therefore vitally important to ensure key content doesn’t slip below the fold.
Accessing the design
Once you have worked out how you are going to go about assessing the design the next step is to establish the criteria by which you are going to make that assessment. Below are some initial ideas you might wish to use. Each of these areas could go into a lot more depth but I have tried to keep to the main points within each area.
Colour
Colour is a very subjective area, so rather than asking people what they think of a colour, ask them what words they associate with a colour palette. That way if they say a colour conjures up images of "progressiveness" you can compare this with the messages you want the site to convey.
Layout
There are two things to look out for when assessing the layout. Does the design have enough white space and does it have an underlying grid structure. White space allows a design to breath, making content more readable. A grid structure provides some organisation to the design and its absence can leave a design feeling chaotic.
Weighting and flow
Does the design draw the eye to key content and show the user what to look at next? Ensure that the design you choose puts the emphasis on the right elements in the same way a newspaper always makes it clear what the lead story is.
Typography
As with layout there are two key things to look out for when it comes to the text on your site. Firstly, make sure that the text has a decent space between lines. Tightly packed text can be really hard to read and will dramatically reduce dwell time. Secondly make sure that the designer has broken up larger blocks of text with headings, sub headings, bullets etc, as this dramatically improves scanability.
Accessibility
Obviously accessibility is a huge area but within the context of choosing a design there is only one main thing you need to know: Can you read the copy? Is there sufficient contrast between foreground text and the background? Avoid designs that you have to strain to read because ultimately they will drive users away.
Usability
Is it obvious what the user should do next? Do links look like links? Is the main navigation clearly positioned and labelled? Is the user overwhelmed with too many options? In many ways usability is the key criteria I use for judging design. Ultimately users just want to get at information as quickly and easily as possible and the design should not get in the way of that objective.
Branding
To a website owner this is probably the most obvious of the assessment criteria. How well does the design conform to your style guide and tie in with existing print material. A continuity across marketing collateral is vital for establishing a strong brand identity and the web is very much a part of that.
Imagery
The final area of assessment is the choice of imagery. Imagery can make or break a website. Some warning signs to look out for include:
- Small busy images that are hard to see
- A lack of consistency across the site with different styles of imagery, all mixed up together
- Images that grab your attention away from content rather than directing you to it.
The golden rule
If there is a golden rule to choosing the right design it would be communication between client and designer. A client should listen carefully to what a design has to say about their design approach and the designer should be able to clearly communicate their ideas and why they have made the decision to produce a certain design. Too many designers fail to justify their approach and too my clients make up their minds about a design without listening to the logic behind it.
Also in this show
In this week’s show we take a look at a number of web conferences including the @media podcast feed, Refresh Orlando (which Paul will be speaking at) and d.contruct. We also discuss the ethical issues surrounding being "inspired" by another website, as well as a review of the Wiltshire Farm Foods website.
19 Comments
Comments are for the discussion of this post. If you have other questions / comments then post them to the forum or send me an email
Hi Paul
Great podcast keep up teh good work and the news section is probly as helpful as your advice as we can keep up-to-date as we practice our designing.
Also I tend to take elements of things that inspire me in a design and merge them to give me a brand new design or startin point that will be used for my websites.
Very nice job of the version 2 Wiltshire Farm Foods e-commerce site, very nice! – lovely use of ajax and css.
Just thought it would be good to mention the website Design Meltdown – http://www.designmeltdown.com/ that you’ve posted a link to in the past, as it’s a great source of inspiration for design projects.
Good place to start to get some ideas or direction.
Keep up the great podcast, look forward to it every week.
Marcus – keep the jokes coming….
If you need some more let me know – or simply subscribe to my Friday Funnies here – http://adrianhodge.com/category/friday-funnies/
2:45 Format Change to PodCast
News
7:36 Upcoming conferences
Questions and Comments
14:29 Inspirational design
Main Features
26:02 Choosing the right design Introduction
27:40 Avoid personal opinions
29:57 Dont print design to assess
31:24 View on web browsers and test on a number of monitors
34:15 What resolution to use for design
34:56 Colour
36:36 Layout
37:09 Weighting
38:36 Flow
39:46 Typography
41:10 Accessability / Usability
42:28 Branding
43:07 Imagry
Reviews
46:14 http://www.wiltshirefarmfoods.com/
Tips
57:56 Comments in css and Bugets in tenders
Suggestion for you, ask your developers about this feature in Dot Net 2.0 called themes and skins. I have used themes before and it is a great way when you have a set of specific user requirements on a site to customise how they see the page.
Themes allow you to have custom css pages and skins (how form/control elements are shown) depending on a user selection. This builds a level of abstraction into the design where you can have a default design that every user is confronted with and then custom designs based around individual user needs. eg low vision users can have a theme that has larger text and colour blind users can have a theme with specific colour design.
It is suprisingly simple to implement and gives the designer the ability to better customise seperate themes for different user requirements. It is run server side so there is actually no javascript required.
Just wanted to say that the sound quality of the ‘cast this week was just peachy. :)
Wiltshire Farms website is an excellent piece of work. Also, I love the new format and new features of the show. Can’t get enough of the podcast!
I did notice some kind of weird behavior on the WSFarms web site. Granted, I am approaching it from an American perspective so this may or may not matter for anyone else in the universe but I did notice a weird piece of non-functionality: If you choose to add something to the shopping basket you are prompted for a postal code (which I don’t have being from some other country) and given the option to enter it later. This seems like a good idea until you realize that no items are actually added to the cart. I wanted to check out the updating process after listening to the podcast and there that is. As I said, this probably doesn’t bother anyone else as most visitors to the site are going to be residing in the country. I do think that simply removing items from the basket without any warning and a clearly displayed option to do so is a bad implementation.
Love the show even though I’m not a designer in the typical sense but it is enjoyable and informative for people who are not immersed in web design problem solving especially when intended for a commerical environment.
Hey Goneaway,
your point about postcode is perfectly valid and my biggest concern for the future growth of this site. Unfortunately a postcode is required in order to display a price due to the slightly unusual franchise system they have. Ideally you wouldnt need to enter a postcode until purchase but we came up with the best solution we could within the restrictions.
congrats on the the wff site.
great work – clean, crisp, looks fab, intuitive, immediately engaging, seamless ajax stuff – didnt even notice it until i l read the post above so it must be spot on !
just two gripes/ feedback from an self confessed old schooler who is not old enough for meals on wheels yet !
1) 400k homepage
2) white bg behind the plates makes the food look a bit cold !
people DO love to critise don’t they !
keep up the good work with the podcast – you deserve all your success !
I’d love to apply for the web dev role at Headscape but I’m in Sydney. But if you ever want to open a Sydney office .. .. .. .. ..
Hi I listened to your podcast today and I was surprised to hear your tips. Since they are exactly like the ones from the book CSS Mastery. How come you didnt give credit?
Ah, I overlooked that aspect. I guess given the choice between two potentially bad choices that is the wiser especially given that prices couldn’t be displayed. Thanks for the explanation. Hearing the rationale behind design decisions is sometimes pretty cool.
Hi Rapidismo,
I did give credit. I said I got them from Andy.
Of course Paul would give credit to Andy Budd. Fellow UK designers respect and are nice to each other. And Paul is speaking with Andy at Orlando Refresh 06 (which I am going, yay!), so he wouldnt want Andy mad at him :)
Anyways, as always, great podcast. Good sound quality too. Thanks.
PS – When is Paul Boag gonna write a book???
Also, that Wiltshire Farms site is awesome. Would love to know more technical aspects of it and how it was done (JavaScript, Ajax, etc.).
But that would maybe give away too many of Headscapes secrets… :)
Oh… I guess I missed the credit…
That happens when you listen to the podcast at work…
Sorry
I like the restrained and relevant use of AJAX on the Wiltshire Farms site.
Just one thing I would add ;o). I’d change the cursor to a pointer – instead of the default arrow – over the buttons. Some users use the change of cursor to identify a link/button.
BTW… Very entertaining podcast.
Hi Paul,
I love the new WFF site. Extremley well done and a beautiful piece of work! You asked for some feedback so I’ll offer these little tidbits:
1. When I roll over the left-hand navigation, I find the text hard to read (light text against a light background). I have 20/20 vision but on a Mac it comes off as being much too light.
2. I thought I noticed this on the checkout where there was an upsell block to add pudding that the text was white against a light background. Again, very hard to discern on a Mac.
Otherwise, this is by far an EXCELLENT production. Mad props indeed!
Christian
I totally agree on asking for empirical suggestions and/or criticism, not subjective.
Hope to see you at the Refresh Conference, Paul. Also, I may be starting a Detroit RefreshingCities chapter.
http://creditbad.phpbbx.de/ >Home Equity Loan Rates [url=http://creditbad.phpbbx.de/]Home Equity Loan Rates[/url] http://tinylink.eu/yeOBh >Home Equity Loan Rates [url=http://tinylink.eu/yeOBh]Home Equity Loan Rates[/url] http://www.url4.net/6B30E9 >Home Equity Loan Rates [url=http://www.url4.net/6B30E9]Home Equity Loan Rates[/url] http://loopman.phpbbx.de/ >buy vicodin [url=http://loopman.phpbbx.de/]buy vicodin[/url] http://pho.se/go >buy vicodin [url=http://pho.se/go]buy vicodin[/url] http://www.mcturl.com/?r=3807 >buy vicodin [url=http://www.mcturl.com/?r=3807]buy vicodin[/url] http://fe.pl/jfpj >buy vicodin [url=http://fe.pl/jfpj]buy vicodin[/url]