Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

The Lost Files – The Ultimate Web Design Questionnaire And Checklist (part 5 of 8)

← Where Are We Going? (4/8)41TOC5263

Stage 5: Design

The best painters spend a lot of time prepping the room they’re going to paint. They lay down rags on the floor, move out the furniture and tape off the baseboards. That way, when it’s time to paint, they can just focus on the painting, and they don’t have to spend much time on clean-up. The same is true of Web design, which is why designing is as late as stage five. If you have performed the previous four steps adequately, the client is more likely to be happy with what you have created. They’ll feel involved, and they’ll trust you more, because you have taken the time to get to know them and learn what they want. You’re also likely to produce a richer, more engaging experience for the user.

What’s the goal here? Make sure you include all of the goals you have proposed. If you realize that one goal doesn’t make sense, talk to the client about adjusting the user flow before continuing.

Where is your mood board? Pin it to the wall so that it stays on your mind. If they’ve selected websites for inspiration, try not to copy them. Instead, describe the mood items in adjectives; for example, bold, colorful, crisp, arty, messy. The fonts, colors, layout and overall style should be able to be described by the adjectives.

Have you designed with technology in mind? Some say that planning for a design’s implementation stifles creativity. But by considering the technology (or at least talking through it with the developers), you’ll often come up with new interactive experiences. Get a spec sheet early on so that you know which browsers to target, which users to target, what technology to use, the maximum allowable font size and so on. If you don’t consider technology, the client will be unhappy when it becomes clear that you cannot implement the design within the time frame.

Design Checklist

Design is more than just about pretty pixels. Good websites are consistent, clear and easily understood. Make sure yours is, too.

  • Is the language consistent?
  • Is the home page easily understood in under five seconds?
  • Is the home page visually dominant compared to the other pages?
  • Is the most critical information on the page that users will see first?
  • Are the content and advertising clearly distinguishable?
  • Does the website communicate a strong brand? Is this evident from the design?
  • Does the design match the company’s current branding?
  • Have you chosen a color palette and defined which colors and styles should be used in which areas?
  • Does the flow of each page guide the user to the intended action?
  • Is the content separated (but not trapped) by white space?
  • Are you making use of responsive Web design (via a fluid grid, flexible images and CSS media queries) to accommodate mobile devices and various screen resolutions?

Typography Checklist

Typography gives shape to content. When done well, it enables the reader to effortlessly, and often enjoyably, absorb the information. Good typography aids in comprehension and invites the user onto the page.

  • Has the content been proofread for grammar and spelling mistakes?
  • Is the typographic hierarchy clear? Are the first-, second- and third-level headings easy to distinguish?
  • Is the relationship between type sizes clear and not arbitrary? The typographic scale, consistent multiples and the Fibonacci sequence are all good places to start when establishing heading and body sizes.
  • Have you combined typefaces meaningfully? In general, combine typefaces with similar x-heights. Typefaces with tall x-heights are more legible at small sizes.
  • Check the spacing between paragraphs and lines and the spacing in ordered and unordered lists, tables, code snippets and image captions. Is it in harmony with the type size you’ve chosen? Not so tight that the text can’t breath, nor so loose that you end up with thick strips of white lines?
  • Is the spacing throughout based on even multiples of a base unit (which is most often the leading)?
  • Have you used em measurements where needed so that the text scales comfortably when the visitor increases the font size in their browser?
  • Are special characters encoded correctly, such as & for the ampersand?
  • Have you styled oft-forgotten elements such as <code>, <blockquote>, <cite> and <pre>?
  • Is there only one space between sentences?
  • Have you removed all underlining on non-linked text?
  • Have you removed all-caps for anything in the body copy? Have you set up a small-caps style where needed?
  • Have you adjusted the letter spacing in headlines? Big headlines can usually afford to be a bit tighter.
  • Have you given strings of caps extra letter spacing? Only a little needs to be added, but it allows the letters to breath, is more readable and is aesthetically pleasing.
  • Have you set a maximum width for paragraphs? Set a maximum width for content in fluid layouts, otherwise the text might be unreadable on widescreen displays.
  • Is the measure (i.e. the width of the paragraph) suitable to the typeface, size, leading and language? Traditionally, 66 characters per line has been considered optimal, within a range of 45 to 75. However, this should be calculated according to the typeface’s character sizes.
  • Have you set the line height on all of your paragraphs, lists and headings? For body text to be legible, the general rule is to set the leading to a value greater than that of the font size, from 1.25 to 1.5 times. Note that line height in CSS does not correspond to “leading” in the print industry: leading is the amount of space between lines of text, and line height is that value plus the text size.
  • Is there more space before a heading than after it? Headings should be tied to the preceding paragraph so that they do not float away visually.
  • If the text is justified, has it created unsightly spacing (like a river of white space)? If so, use a hyphenation script to improve readability.

  • Do the background and text have enough contrast?
  • Does the text have enough room to breath? When in doubt, err on the side of too much padding.
  • If you’ve got white text on black, is the font size slightly bigger, with a taller line height?
  • Have you broken up the content into easily scannable chunks, using short paragraphs, lists, headings and more?
  • Are the quotation marks and apostrophes curly? (Straight ones are for inches and feet.)
  • Do number ranges have en dashes?
  • Are off-topic thoughts set off with em dashes?
  • Are you using proper dashes, instead of double hyphens?
  • Does the print CSS style sheet take care of typography?
  • Smashing Magazine’s Web typography study in 2009 revealed some patterns on websites that you might find useful for your own designs:
  • Line height (in pixels) ÷ body copy font size (in pixels) = 1.48

    Line length (pixels) ÷ line height (pixels) = 27.8

    Space between paragraphs (pixels) ÷ line height (pixels) = 0.754

    The optimal number of characters per line is 55 to 75.

  • Do the typeface, size and color support the message?
  • Does the type relinquish attention once the user begins reading?
  • Are any letters stretched? Type should never be stretched; it’s akin to stretching a photograph.
  • Have you limited the differences between type styles? Type rarely needs to be in bold or italics, nor does it have to bigger, bolder or colored. Any changes should be subtle.
  • Is it easy to read the body copy without getting distracted by the heading and images further down?
  • Most importantly, is the content worth reading? If a piece of text doesn’t hold some sort of value (whether recreational, functional, legal or practical), then why is it on the page? Clients are allowed to play with the words, but not to the point of distraction or wasted space.
  • If you are using @font-face for the typography, have you made sure that you are not illegally serving commercial fonts from your Web server. Purchase a Web font embedding license or use a font that is free for commercial use.

Navigation Checklist

Navigation is your foremost concern. It doesn’t matter how nice the design is or how clear the language is; you have to get this part right.

  • Is the website’s navigation consistent?
  • Is “Home” the first navigation link?
  • Can you return home by clicking on the logo?
  • Is there a contact page? Can you reach it from every page?
  • How many main navigation items are there? Does each describe the content it points to?
  • Have you provided secondary navigation where necessary?
  • After thinking about the objectives of users, do you think the navigation items are the most efficient for them?
  • Is the navigation free of jargon and complex words?
  • Are legal details in the footer of every page?
  • If there are many pages, have you included a search option? Is it prominent enough for users to notice? Does it work properly?
  • Can you tab through the navigation and select items without a mouse? Are the options clearly highlighted when navigating with a keyboard? (Check the :focus state of navigation items.)

  • On big websites, will users understand where they are on the website? Is the navigation item for the current page marked, or have you included breadcrumbs?
  • Are the section headings consistent and self-explanatory?
  • Have you determined a user path? Does the navigation structure facilitate it? A good site map might help.
  • Have you considered removing some navigation options from the “Add to cart” or check-out process to help users focus on their transaction?

Form Design Checklist

No one likes to fill out forms, and most designers hate designing them. For good reason, too: they’re difficult to get right and difficult to make anything but boring. But still try to create the most useful, beautiful forms; users will be grateful.

  • Have you reduced the number of fields to the absolute minimum required? Have you removed all duplicate requests? Shorten your forms, and rethink why you’ve made certain fields mandatory.
  • If a form is long, is it broken up into separate pages? Does each page fulfill a specific task?
  • Are questions ordered and grouped logically (using the <fieldset> element)?
  • Have you provided radio buttons for questions whose answers could only be one of two or more options?
  • Are you using check boxes only when the user should be allowed to select zero, one or more options? Use a stand-alone check box for a single option that the user can turn on and off.
  • Can users tab through fields so that they don’t have to use their mouse?
  • If you are using HTML5 form elements, such as the placeholder attribute, date field, slider input and so on, does the form degrade gracefully and remain functional even if a browser doesn’t support these HTML5 features?
  • Is there enough space between fields for the form to be quickly scanned?
  • Do users have room to type? Are text inputs appropriate in length? (Around 27 characters for input fields and at least 50 characters wide by 10 lines tall for text areas work best.) Is there enough padding to type?
  • Is the form forgiving of formats? Don’t require users to guess the right format for numerical information (such as a phone or credit card number). The form should either force one format or accept multiple kinds.
  • Have you provided meaningful default answers wherever necessary?
  • Have you provided help on potentially confusing questions (using tooltips and short descriptions)? Add descriptive labels to all fields.

  • Have you avoided CAPTCHAS if possible? You don’t have to use advanced mechanisms. Just ask simple random questions, such as “What color is the sky?” (blue) or “Is ice cream usually cold or hot”? (cold).
  • Are mandatory fields clearly marked as such?
  • Is every label visually associated with its input field? Is the mark-up semantic (for accessibility)? Form labels work best above the field.

  • Are labels bound to their input elements with the for attribute?
  • Have you integrated real-time validation using AJAX or forward-thinking form validation using HTML5 and CSS3?
  • When users make an error on the form, is the field with the error clearly highlighted with styling? If so, are users alerted to the error before submitting the form (known as inline error messaging)? Whatever the case, error messages should be informative and concise. (“Please check that your credit card details are correct. They must match the card exactly.”) Error messages should explain exactly what the error is and should not be too general. (Avoid something like, “There was an error processing the form. Please try again.”)

  • Are users who make an error spared the trouble of having to fill in everything again? Users should not have to agree to terms or enter their information twice just because of a small typo.
  • Are critical user actions preceded by a confirmation or followed by a way to undo?
  • Are users allowed to test the service before signing up? Have you considered using a third-party sign-in solution (such as OpenAuth)?

  • Have you tested users filling out the form? Where did they stumble?

Content Quality Checklist

Ah, content. “Not my problem,” you say? The problem is, if you’re not on top of it now, you’ll end up with Lorem Ipsum the day before launch, and you’ll have to write filler yourself. Many professional designers require the content to be delivered first, and then they base the design on the content (not vice versa). So, make sure this gets worked on from the beginning.

  • On the home page, can users tell what the website is about in five seconds or less?
  • Is the content useful and relevant? It should meet the user’s needs, goals and interests. Also, consider how long it will remain useful and what will happen when it expires.
  • Is the content clear and accurate? Match the language to the audience’s expectations. Keep the content organized.
  • Is the content engaging? If the content is informational in nature, keep it short and concise. If you want to create an emotional attachment to the website, make the content as engaging and inviting as possible.
  • Is the content complete? It should provide the information necessary for users to learn about the subject, or at least provide clear references to more detailed information.
  • Do you use the same spelling, tense and style of writing (websites vs. Web sites, UK vs. US spelling)? Do you consistently use the first or third person?

  • Are the structure and language consistent? Are recurring phrases (such as “Read more…”) consistent?

  • Check the voice. If the content was written by different parties (marketing, technical staff, etc.), then it will need to be unified into one editorial voice. Is the content professionally crafted?

  • Have you used headings, lists and other elements to make the content easy to scan? Are bulleted lists treated identically (for example, periods or commas at the ends of items)?

  • Does every section stand on its own? Is it easy to understand without reading the rest of the page?
  • How will the content be updated and maintained after the website launches?
  • Has a professional writer checked the copy for errors, consistency and tone? Even if you are a writer yourself, it is always good to have someone check over the copy.

Some Advice on Presenting Your Work

  1. Do not show the client anything until you are happy with it.
    If you’re not confident about it, it will come across in your meeting.
  2. Present only one version (two at most).
    Presenting three designs dissipates their focus on what you have done (and on how the website works). Who wants to see three mediocre designs instead of one great one? With three designs, you risk the Frankenstein effect: being asked to combine mismatched features into one version. If you’re asked to produce more than one version, make their differences subtle.
  3. Present it in a browser.
    The client might be inclined to print it out, but without the context of a Web browser, they won’t be in the right frame of mind. (Although make sure they understand that it’s not a functional mock-up either.)
  4. Take the client through the user flow in person.
    Rather than send a URL or a screenshot, be with them (either in person or on the phone) when they view the mock-up, and explain what they’re looking at and why you made the decisions you made.
  5. Continually point out how the design achieves their goals.
    Keep the client’s eye on the prize. They might start to get new ideas now, and your job is to bring them back to all of the work you have done together so far.
  6. Compliment the client on their great ideas.
    Give them credit for the components they decided on in the wireframing and mood boarding stage, even if you initiated them. They want to feel involved in the project, so the more you can foster this feeling, the better.
  7. Encourage them to make decisions.
    Don’t make every decision yourself. Present them with two sets of components (whether navigation size, color, etc.), both of which you are happy with, and get them to choose one.
  8. Follow up with specific questions.
    Questions like “Do these achieve our goals?” and “Do you think our target user would easily understand how to use this feature?” are much better than “Do you like this?” and “What do we need to change?”. Ask them questions always in the context of the specifics you have agreed on.
  9. If the copy isn’t ready, ask them when it will be.
    If they don’t have a dedicated copywriter, you will probably be responsible for helping them convert their wordy business-speak into Web writing. Explain how people read on the Web. If they’ve already written some copy, help them edit one or two bits for the Web. Your client should understand the value of spending time and effort to create fantastic, engaging copy. Set up a schedule as soon as possible to write copy. Don’t leave it until the last minute.
  10. Finish the meeting with a summary.
    Take notes during the meeting, and then conclude the meeting by summarizing the changes that you will make based on their feedback. Compliment them at this point, and then tell them what you plan to do next and when you will send it to them. Finish with, “Have I missed anything?”
  11. Send an email of your summary and next steps.
    Not only will this remind you what you promised, but it will guard against new features. The client will remember their decisions and maintain their realistic expectations.

Presentation Checklist

  • Have you satisfied the client’s initial requirements?
  • Have you considered the technological requirements of your design?
  • Does the user have a clear path through the website?
  • Has the client signed off on changes to the proposal after requesting new features?
  • Are they happy with the design in light of their goals?
  • Have you summarized the meeting in a memo and outlined the next steps?
  • Have you presented the design in a browser?
  • Have you presented only one design (or, if the client insists on alternatives, at most two)?

  • Have you provided opportunities for the client to make some decisions?

← Where Are We Going? (4/8)41TOC5263


  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook


The Smashing team loves high-quality content and cares about the little details. Through our online articles, Smashing Books, eBooks as well as Smashing Conferences, we are committed to stimulating creativity and strengthening the web design community’s creative forces.

  1. 00

    No comments have been posted yet. Please feel free to comment first!
    Note: Make sure your comment is related to the topic of the article above. Let's start a personal and meaningful conversation!

Leave a Comment

You may use simple HTML to add links or lists to your comment. Also, use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support -js, -markup and -css for comments.

↑ Back to top