Questions?Before Designing Website

Who will design your site? Web design requires expertise in designing

graphics and text, laying out pages, and translating it all into HTML and CSS. Keep that in mind when considering who will design your site.

Alternatives: Action Items:

Start a list of sites whose designs you like, bookmark it and make a note. These sites will be helpful.

Give yourself just 6 seconds to decide whether you like each site’s design.

Ask friends and colleagues how they got their site designed.

Will the design of your site support your content or distract from it? When visitors first open a web page, statistics

show they decide whether to stay within the first 6 to 8 seconds. Given that short time, you can understand the importance of design.

Action Items: Go back over the list of site designs you like. Does

it helps you understand what the site is about. Show a variety of people a mockup of your site for

just 6 seconds and ask them what the site is about.

Will your site layout make your content clear? The layout of a website serves as a kind of map

for visitors. Once they understand the layout, they’ll know where to look for different kinds of content.

Action Items: Test your layout by asking people to point to some

element as quickly as they can or asking them what the message is of a particular page.

What will be the width and height of your website? The first decision you’ll need to make about

width is whether to have a fixed or a fluid width. Action Items:

Whether to use a fixed or fluid structure needs to be decided early in the design process.

How will the design of the text make your content clear? Of course, the font you choose for your body text

does play an important role in its readability. Action Items:

Choose long pieces of text and see which font is easiest to read.

During testing, experiment by using different fonts, line heights, and line widths to see if you get different reactions from users, especially with longer text areas.

Will images be used effectively in your design? Graphics, Photos, or Elements (icons, divider

lines, and so on) In all cases, one of the assumptions will be that the images add to the purpose and enhance the content by being relevant.

Action Items: Using your site map, list how many images you

think you might use on each page’s content to get a sense of whether your overall content will be image‑heavy.

Will your design make good use of white space? When you visit a website that feels crowded,

you’re experiencing a lack of white space, and this crowding makes it difficult to find what you need or to know what’s most important.

Action Items: Is there enough white space between key areas of

the page that you can easily distinguish between them.

Focus on divider lines in your design and ask if they’re even necessary or would plain white space accomplish the same task?

How will your site design use color? There are two basic considerations for using

color on your website: Does the central color fit the purpose and mood of

the site? Does the color scheme based on that color work

well? Action Items:

Make a note of the colors used by your competitors (both online and off). Is there a common color?

Try the same design with two or three base colors and test a mockup on several people of different genders, ages, and so on to see how they feel when they first look at it.

Will the background of your site help focus the content or distract from it? You have two basic choices for the background

of your site: a solid color or images. Gradients are a popular way of creating website

backgrounds. Action Items:

Make sure the background of the site is part of the design process from day one.

Try replacing the background of your design with a light grey and then with white. Did it help create more of a focus for your design?

Will the background of your site help focus the content or distract from it? You have two basic choices for the background

of your site: a solid color or images. Gradients are a popular way of creating website

backgrounds. Action Items:

Make sure the background of the site is part of the design process from day one.

Try replacing the background of your design with a light grey and then with white. Did it help create more of a focus for your design?

How will elements within content be set off from the body text? It’s common within the actual content of web

pages to see boxes of additional information, option menus, or images. Sometimes referred to as “callouts” or “sidebars,” these elements are meant to supplement the main body of the text with added resources.

Action Items: For each callout box, list, or other content element,

ask whether its design is too distracting.

Will your site design display well in different browsers? What looks fi ne in Internet Explorer might not

look the same in Firefox or in Chrome. Testing your site to make sure that it works in a variety of browsers is important, but that means some extra work.

Action Items: Make sure that you or the designer runs browser

compatibility tests as soon as you’ve got the design running online.

Will your site design display well on mobile devices? More and more visitors view websites through their

smartphones and other mobile devices with greatly reduced screen sizes. Making sure that your site is not just visible but also functional on these devices is becoming increasingly important.

There are two basic options for giving mobile users a bett er experience:

Restyle your existing site. Create a separate mobile site.

Action Items: If you use a mobile device, start noticing how you use it

and make use of those observations when designing your mobile site.

Will the design of your site navigation complement or clutter your site? Navigation is not the place to show off your

Photoshop skills unnecessarily. Plain colors, slight gradients, or subtle light effects are much nicer, yet still effective. You need to strike a balance between making it clear where the navigation is and not making it the center of attention.

Action Items: Don’t look at your navigation in isolation, especially

if it involves animation. Look at it on a complete page and check that it’s both obvious and not distracting.

Will you be using animation in your design? The problem with animations is that they move.

As every parent who has tried to pry a child from the TV or gaming console knows, movement gets your attention, but you should know how to use animation without it becoming the focus of attention.

Action Items: Never judge a finished animation on a blank screen.

Always look at it within the context of a full page with content.