Why Do You Need a Web Design Client Questionnaire?

So you understand your client’s motivation, strengths, pain points, objectives, and budget. You also need to consider the target audience, promotion tactics, and lead generation strategies right from the beginning. Designing a information website is different from a service website or ecommerce website.  from  It is important to keep in mind what the core purpose of the website is going to be.

11 Questions to Ask When Building  a brand new website

These are just meant to be a starting point to get you going and some of your clients answers will illicit further questions

1. What is your business about?

What they do;

• How long they have been in the market;
• Their company’s fundamental values;
• Products;
• Target audiences;
• Marketing strategies;
• A unique value proposition that differentiates them from the competition;
• Their short and long-term business plans.

Knowing the answers to these type of questions should assist you when making decisions throughout the project.

2. Why do you need a website?

Many clients don’t have the answer to this simple question – “what do you need a website for?” Increase brand awareness?, Sell my product or service?, create a community?

Asking a few more “why” and “what” questions will help you better understand your client’s real motivations and suggest solutions that will work best for them.

3. Who is your target audience?

• Demographics: customers’ location, age, gender, preferred device for online searching/browsing, etc.
• Psychographics: customers’ values, buyer personas, hobbies and interests, lifestyle, and online behavior.

4. What do you want your visitors to do on the website?

Such as:

• Purchase a product or a service
• Click links/buttons to get information or learn something;
• Download an app or another digital product;
• Receive online support for their questions/pain points;
• Read/engage with your content;
• Register for an event;
• Fill out a form/make contact/ lead generation, etc.

Likewise, you need to discuss the overall goals of the website with your client. Talk about each page’s individual goals, too (as each page usually leads to action).

5. What are the top features that will contribute to the website’s success?

• Call to Action (CTA) buttons;
• Live chat and other customer support software;
• Social media buttons and sharing options across all your client’s platforms;
• banners for highlighting promotions or discounts;
• contact forms
• blog section
• example work/past projects

Put them in priority order

6. What will makes this website stand out from the competition? 

•  Why are you and your business special?
• An exceptional service?
• Free shipping?
• Unique products people cannot find elsewhere?
• A robust product guarantee?
• Discounts and promotions?

7. Who are your top competitors?
8. What would you like to have on your website regarding branding and style?

• Do they have a style guide?
• Do they have a logo and colour scheme ?
• Have they got the content for the websites pages/products?
• Do they have any promotional material already that the website needs to be consistent with?

9. What pages besides the ones listed below do feel you require?

Clients may not realise but you must include certain pages on a websites for transparency, user experience, legal reasons, and better Google rankings. At a minimum, your client’s website should have:

• A homepage;
• An “About Us” page with information matching Whois data;
• Privacy policy page to let website visitors know exactly what happens to their info;
• Terms and conditions – a must-have page for all websites;
• A “Contacts” page;
• The 404 error page (website under construction);
• FAQ page to answer customers’ questions.

10. Do you have a domain name and host?

This seems obvious and some time straight forward and some times not so straight forward but here are some tips for choosing a good domain name https://tipsforyourwebsite.com/what-is-a-domain-name/

Domain names and webhosting within a website development project are also relatively cheap parts of a project so don’t get to caught up in going for the cheapest because you could end up paying a lot in time and energy managing them

11. Date to go live with new website?

Make sure it is a realistic time frame. Remember the business saying- under promise and over deliver. Things can go wrong- unexpected events can pop up so make sure that there is some breathing space in the development time frame and plan it out. (That is another post right there- actually breakdown planning of a project)

Primary colours

In web design we often use the additive RGB colour scheme where by the primary or main colours that can make up every other colour are Red Green Blue hence the name RGB. 

Primary colors form the basis for all other shades. Every other colour we use in web design consists of a combination of these three colours in varying amounts, brightnesses, tints, and shades.

RGB decimal and hex

On the web, we use RGB (red-green-blue) and hex values to represent colours.

The RGB color system defines all colors as a combination of three different values: a particular shade of red, another of green, and another of blue. So:

– rgb(85, 15, 157) is cadburys purple in decimal colour notation

– rgb(0, 0, 0) is black  in decimal colour notation

– rgb(255, 255, 255) is white  in decimal colour notation

The hex color system converts each value to a hexadecimal (base 16) representation, like so:

– #550f9d is cadbury purple in the hex colour notation

– #000000 is black in the hex colour notation

– #ffffff is white in the hex colour notation

The color wheel

A basic colour wheel contains the 12 standard colors used to create color schemes. Each section represents colours that can be achieved with different saturations, hues, tints, shades, and mixes of neighbouring colours.

The color wheel can be used to define how the balance and what makes  color schemes work.

4 simple examples of colour schemes

Colour schemes generally work best when one of the following patterns is used.

1. Monochrome

A monochrome color scheme consists of various tints, shades, and saturations of a single base colour. They’re very cohesive.

 2. Complementary

Complementary schemes are based on two colors from opposite sides of the color wheel. Because the two colour are vastly different, such schemes can be very dramatic and stunning.

3. Analogous

Analogous schemes feature  colours that sit next to each other on the color wheel. Because of the tonal similarities, these schemes can create a very cohesive, unified feel.

4. Triadic

To  triadic colour scheme is based on the three colors at the points of an equilateral triangle. This creates a diverse, yet balanced, scheme.

There are other colour scheme types but those 4 are a good place to start.

Hue, Saturation and Lightness

Hue defines the degree to which a color can be described as similar to or different from red, orange, yellow, green, blue, indigo, and violet (the colors of the rainbow). So when you describe a color as “greenish blue,” you’re defining it in terms of two hues.

Color saturation (also know as chroma and intensity)  refers to the intensity of colour in an image. In technical terms, it is the expression of the bandwidth of light from a source.  When colour is fully saturated, the colour is considered in purest (truest) version. Primary colors red, blue and yellow are considered truest version color as they are fully saturated.
As the saturation increases, the colors appear to be more pure. As the saturation decreases, the colors appear to be more washed-out or pale.
definition src: https://www.techopedia.com/definition/1968/color-saturation

Lightness, also known as value or tone, defines the perceived brightness of a color compared to pure white.

Color resources

If are not naturally gifted in the area of colour selection then there are lots of resources for you to use on the web. Below are just a couple to get you started.

Adobe Color CC, This is great tool from Adobe which allows you to specifc a starting colour and then choose the colour scheme you want and it will give the colour codes you need. You can adjust your clour selection live on the site

Colour Calculator This is also a great resource for choosing colours and has some great info on colour theory

Color Scheme Designer 3 (Paletton) Color Scheme Designer is very easy to use and its choice of colour principles present a variety of options. While it doesn’t teach its users why the colors work well together (Kuler’s dynamic color wheel is much more effective in that regard), its results are great as a starting point.

1. Get the clients functional and non-functional requirements. (basically this is the clients needs- what does the website need to DO)

Eg The client has said they want a photo gallery but did they mean 1 or 20 photo galleries. Did they want the images in the galleries when clicked on to open or not open a larger version? Or did they want on clicking the image to go to an actual web page with more information about the image? (you read more about functional and non-functional requirements here)

Client’s needs

Before starting your plan, you’ll need as much information from your client as possible. The more you know, the less back-and-forth e-mails you’ll need to sift through.

Listen to their ideas

Usually, clients won’t tell you what they want, it’s up to you to ask them. They want reassurance that their brief will be fulfilled the way they visualized it, but they have a hard time explaining how they see their future website. The best way to overcome this problem is communication. It’s essential to get to know your website design clients by asking questions that will tell you about their business. You want to find out the mood they’re going for, what they like and what they don’t.

But don’t be scared to give them your ideas

You are the “expert” so if what the client has in their head is unrealistic or unreasonable then tell them and work with them towards a good solution.

Useful tools at this point are client questionnaire

A useful and efficient way to find out more about what the clients needs rather than what they think they need or want is to get them to fill out a questionnaire.

List the most important questions that will help you understand the project. What’s the purpose of this website? Who’s the target audience? Who are your competitors? What actions do you want the visitors to take? Etc.. I prefer in the first instance for the questionaire to have no more than 10 questions.  And from these 10 questions I will have at least 10 more for the client but these first 10 are a good starting point. It is important that you get this questionaire filled out by the client before you start drafting the proposal and not after.  Once you have your questionaire answers you will be able to hopefully give them ball park costings , and finalize your formal agreement on budget, scope of project, timeline, and ownership.

2. Define what success means

So you have the websites functional and non-functional requirements and based on this specification you should be able to define what success will mean in regards to the website. Yes a working website is a success measure but other success measurements could be the amount of traffic, user interactions, search engine position etc.

As stated in the original article “Besides the description of the site, you need to know what the expectations are for it. Take a news site for example, what’s the goal? Is it to make make as many ad impressions as possible or is it to provide the best reading experience? How are those goals going to be measured? “

3. Start planning a top-level framework/storyboard  and navigation map

A top level framework doesn’t have actual images but more defines where the structural elements such as the main navigation, header, social links, slideshow, galleries etc will go. There are lots of free tools as well as high end commercial ones or you could do it on paper. what you develop it in isn’t important- what is important is that you include ALL of the structural elements. Therefore you may need to do more that one top level sketch/storyboard if your website will have more than one page layout. You can read more about storyboards and navigation maps here

At this point you are thinking about the following:

Element placement

You can’t start your website without knowing where things go. Here’s where you decide that. You can even meet up with your client to discuss the best placement for your content.

Information hierarchy

A sitemap with a list of links can be overwhelming to a client and even the designer. By laying out the sitemap, you will be able to see how the pages fall into place which will allow you to make adjustments before you get too far ahead.

Interactivity

When creating your wireframes, you must ask your questions: How are these elements going to interact with each other? Will the visitor take the actions I want him to take? How will the visitor move around the site? Here’s where user experience plays its role. So you created your layout. Next, you will create your interface.

This is a great resource about web layouts  10 Rock Solid Website Layout Examples

4. Add or think about a grid

There are many CSS Website frameworks now that make responsive websites using Grids incredibly easy. Grid also allow you to mathematically ensure that your page layout will adhere to design golden rules such the rule of thirds etc.  My favorite CSS grid framework is Bootstrap but there are many other available.

Before starting to design anything you need a proper grid. There are no valid excuses for starting without a grid – they will definitely ensure that your design will look as good as it possibly can. A grid will help you to structure the layout of the different sections; it will guide you through the specific screen size requirements, and help you to create responsive templates, so you’re consistent in terms of spacing as well as many other design issues.

5. Choose your typography and colour scheme

Exploring different typefaces and colours is part of the discovery phase of a project. Generally you don’t want to use more than two different typefaces in a website. One for headings and one for the body type. For websites Google Fonts is a great typography resource and tool.

Your colour scheme maybe defined by the clients existing branding or you may have alot more freedom but you can some great colour resources are:

https://color.adobe.com/create/color-wheel/

https://color.hailpixel.com/

https://www.canva.com/learn/website-color-schemes/

http://colorschemedesigner.com/csd-3.5/

You may also like to read simple intro to colour theory and web design

6. Gather all of the main resource

You are just about ready to design the visual components and what the main visual design will actually look like but to ensure that you have the images that you need

7. Design the Visual Components and Visual Design

(Content coming soon)

8. Develop the prototype

(Content coming soon)

9. Refine everything

(Content coming soon)

10. and possibly repeat

This step really depends on the type of project

Defining (Designing) the functional and non-functional requirements is a key step in the web development process and one that not only applied to software development, but website development as well.

Defining (Designing) the functional and non-functional requirements of a website BEFORE you begin may seem tedious and I will admit with some clients it is like pulling teeth but it is very important that you know what the website is actually “meant to do” and “how it is meant to act” before designing the way it is meant to look.  And from this perspective the functional and non functional requirements can ensure that you meet the clients expectations and what I use as a handover checklist and the basis of the contract to ensure there is no spec creep.

And while the terms come from software engineering they are just as important in web development to ensure that your pages interact, perform (behavior, load time etc.) with each other and user in the manner that client expected.

Functional Requirements

Functional requirements describe what the software / website should do (the functions).  Think about the core operations.

Because the “functions” are established before development, functional requirements should be written in the future tense. In developing the web application for the portfolio website, some of the functional requirements could include:

• The website shall/will show galleries of images that open to new pages
• The website shall/will allow galleries to be sorted by date and topics
• The website shall/will be responsive
• The website shall/will allow users to complete a contact form
• The website shall/will show address and directions to office
• The website shall/will have about page
• The website shall/will have homepage
• The website shall/will on the homepage have a custom instagram feed
• The website shall/will allow website owner to update all page content from a web based admin area

And the list would go on. Tedious and not to the same level as software development projects but still important so you do not miss anything important in the website development.

Non-Functional Requirements

Unlike functional requirements the non-functional requirements are not concerned with the functions of the website but instead  look at the criteria to which website is expected to conform to. Non-functional requirements can include things like response time, development time, usability and reliability. It can also be closely tied to user satisfaction.

Some non-functional requirements for a portfolio website could include:

• The website shall/will be easy to use by all external users
• The website shall/will be easy to use by all website admins

Each requirement is not related to an operation or what the application should do. Instead, the main focus in this case is the ease of use and performance. That’s the idea of non-functional requirements. Which can make non-functional requirements hard to measure and define when they have been successfully met.

Developers should always establish requirements before any coding begins so that they can effectively meet the projects requirements and to avoid project spec creep. Identifying functional and non-functional requirements is key to defining the projects over success or failure. By establishing the functional and non-functional requirements, you have a guide to follow in ensuring that a website meets it specifications.

Examples

Navigation Maps

Navigation maps are also known as site maps, and they are a very important development tool. Navigation maps are very useful tools in the development of websites and can help to keep the development  process on track . They basically are a visual representation of how the website pages will link together. In simple websites the navigation maps are very simple because every page links to every other page but in large websites with 100’s of pages linking every page to every other page isn’t practical and their navigation site maps are very complex.

Navigation maps as a development are not to be confused with a live websites site map. On a live website you should have a sitemap for your users to aid the navigation of your website. In this instance the sitemap is a list of pages of a web site accessible to crawlers or users and should take the form of both an “html” page and an xml document. The content is the same and both development sitemaps and live website sitemaps are typically organised  in hierarchical fashion.

Complex navigation map

1. First decide what you are going to embed for example a board or a profile etc
2. Once you have decided this copy the url from the address bar of the board or profile
3. Then go to Pinterest’s Widget Builder and select either ‘Profile Widget’ or ‘Board Widget.’ (I’m going to add a board widget)
   
4. Then paste in the url where it says Pinterest Board or Profile URL
5. Then choose the size and any other settings necessary.
6. Once you have done that scroll down and copy and paste the code to where you want to the widget to appear
7. And the required script to just before the closing body tag. Note: You may need to add http: before the // in the src= if you want to test locally -without uploading to a public webserver
   
8. And that’s it :).

Properties are listed in alphabetical order below. Each property has examples of possible values beneath it. Properties are not listed if they are not widely supported or if they are only supported by Internet Explorer. The properties are followed by some common values that properties may contain. CSS3 properties are not listed below but there are links at the bottom to other CSS3 references.

background:

#ffffff
transparent
url(images/pattern.gif)
fixed        /* background doesn't move when page scrolls */
repeat
repeat-x     /* tile an image horizontal only */
repeat-y     /* tile an image vertical only */
no-repeat
top
left
center
right
bottom
2px 1px      /* exact positioning, from left top */

Example:
#footer {
background:transparent url(images/footer.gif) repeat-x bottom;
}

background-attachment:

fixed

background-color:

#ffcc00
transparent


background-image:

url(images/something.gif)

background-position:

top
left
center
right
bottom
2px 1px


background-repeat:

repeat
repeat-x
repeat-y
no-repeat


border:

1px
none
solid
dashed
dotted 
double     /* needs at least 3px to see effect */  
ridge      /* regular 3d border needs at least 4px to see effect */
groove     /* kind of strange, needs at least 4px to see effect */ 
inset      /* like a recessed bevel */
outset     /* like a button bevel */ 
#000000

Example:
div {
border:2px solid #ffffff;
}

Browser Differences:

• borders are drawn INSIDE the container in IE, Opera 7.
• borders are drawn OUTSIDE the container in Firefox, Safari. (part of the annoying “box model” conflict)

border-collapse:

collapse


border-top:

(set the border on one side)

border-right:

(set the border on one side)

border-bottom:

(set the border on one side)

border-left:

(set the border on one side)

bottom:

4px     /* positions object 4px from the bottom of its container */
50%

clear:

none
left
right
both

Clears a “floated” element. See also: float:

clip:

rect(top left bottom right)

color:

#000000        /* #RRGGBB, each digit is 
                  0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f */
                  
rgb(0,0,0)     /* (R,G,B), each digit is 0 to 255, 
                  does NOT work everywhere */
                  
aqua           /* #00ffff */
black          /* #000000 */
blue           /* #0000ff */
fuchsia        /* #ff00ff */
gray           /* #808080 */
green          /* #008000 */
lime           /* #00ff00 */
maroon         /* #800000 */
navy           /* #000080 */
olive          /* #808000 */
purple         /* #800080 */
red            /* #ff0000 */
silver         /* #c0c0c0 */
orange         /* #ffa500 */
teal           /* #008080 */
white          /* #ffffff */
yellow         /* #ffff00 */

cursor:

auto 
crosshair 
default 
pointer        /* The cursor that indicates a link on rollover */
move
N-resize       /* N can be replaced with S, E, W, NE, NW, SE, SW  */
text           /* Usually rendered as an I-bar */ 
wait           /* Usually rendered as a watch or hourglass */ 
help

display:

none           /* Makes the element disappear */
block
inline

float:

none
left
right


font-family:

verdana,helvetica,sans-serif   /* easiest to read at small sizes and on all computers */
arial,helvetica,sans-serif
times,times new roman,serif
courier new,courier,monospace
cursive                        /* unpredictable */
fantasy                        /* unpredictable */

Rules:

• A font only works for people who have that font installed on their computer.
• Take into consideration both Windows and Macintosh users.
• Always include a generic font at the end of the font list.

font-size:

10px           /* very small */
11px           /* small to normal depending on font */
12px           /* normal */
16px           /* titles */
40px           /* really big */

0.5em          /* relative to parent element */
larger         /* relative to parent element */
smaller        /* relative to parent element */

xx-small       /* like HTML H6 */
x-small 
small          /* like HTML H5 */
medium         /* like HTML H4 */
large          /* like HTML H3 */
x-large        /* like HTML H2 */
xx-large       /* like HTML H1 */

font-style:

normal
italic
oblique        /* same as italic */

font-variant:

normal
small-caps


font-weight:

normal
bold


height:

200px
90%


left:

4px
50%


(Positions an element from the left-hand edge of its container.)

letter-spacing:

normal
5px

(Called “kerning” in Typography.)

line-height:

normal
130%           /* percentage of the font-size, 130 gives a nice look */
10px           /* scrunch 11px font lines together */

(Called “Ledding” in Typography.)

list-style:

none
disc
circle
square
decimal 
decimal-leading-zero 
lower-roman 
upper-roman 
lower-alpha 
upper-alpha 
lower-greek 
lower-alpha 
lower-latin 
upper-alpha 
upper-latin 
url(images/bullet.gif)

Note: If you want a custom bullet image, it works better this way:
ul {margin:0; padding:0; list-style:none;}
li {
margin:0 0 6px 0; padding:0 0 0 16px; /* left padding for bullet image */
background:transparent url(images/bullet.gif) no-repeat;
}

margin:

0              /* to turn all margins off, no unit is necessary */
4px            /* use a single value for the same margin on all sides */ 
2px 0 2px 0    /* specify separate top, right, bottom, left margins 
                  (clockwise from top) */
auto           /* set right AND left to auto, element is centered */

Margins add transparent space OUTSIDE the background and border.

Examples:
  img {margin:2px 0 2px 0;}
div (margin: 4px auto 10px auto;}    /* div will be horizontally centered */


margin-top:

(set the margin on one side)

margin-right:

(set the margin on one side)

margin-bottom:

(set the margin on one side)

margin-left:

(set the margin on one side)

min-height:

Not supported in IE so its fairly useless

min-width:

Not supported in IE so its fairly useless

overflow:

visible
hidden
scroll
auto

padding:

0              /* to turn all padding off, no unit is necessary */
4px            /* use a single unit for even padding on all sides */ 
2px 0 2px 0    /* specify separate top, right, bottom, left padding 
                  (clockwise from top) */

(Padding adds space INSIDE the background and border.)

padding-top:

(set the padding on one side)

padding-right:

(set the padding on one side)

padding-bottom:

(set the padding on one side)

padding-left:

(set the padding on one side)

position:

static        /* where it would "normally" be in the html flow */
absolute      /* position inside the parent element */
relative      /* position relative to where it would "normally" be */
fixed         /* do not scroll the element as the page scrolls */

right:

4px
50%

(Positions an element from the right-hand edge of its container.)

text-align:

left 
right 
center 
justify        /* makes even left and right margins, 
                  like a newspaper column */

text-decoration:

none
underline
overline
line-through

text-transform:

capitalize
lowercase
uppercase


top:

4px
50%


(Positions an element from the top edge of its container.)

vertical-align:

baseline 
middle 
sub            /* do not use, messes up line spacing, see below */
super          /* do not use, messes up line spacing, see below */
text-top 
text-bottom

(Making superscripts and subscripts without messing up the line spacing:)

CSS
  .sups {position:relative; top:-4px;}
.subs {position:relative; top:4px;}

HTML
  Here's a superscript<span class="sups">1</span>.


visibility:

hidden        /* the element will still influence other 
                      elements on the page */ 
visible

(To remove the element completely, use display:none; instead.)

white-space:

normal
nowrap        /* do not wrap a line until a line break, 
                 somewhat buggy in some browsers */ 
pre           /* like using <pre> in HTML, requires 
                 "strict" mode for IE 6 */

width:

200px
90%


z-index:

5             /* a DIV with a z-index of 5 will be "above" 
                 those with 4 or lower */

Z-index only applies to other objects in the same container.

Printable Version with extra CSS3 rules

Writing for the web is really not that much different than writing for print. But you have to remember that since it can be more difficult to read on-screen, you have to take special care to make it easier on your readers.

Content and Style

Provide useful information. Most people use the web to find information that they can actually use. Unless your site is for entertainment purposes, make sure that your readers will find your information useful. This means useful for them instead of just useful for you.
The more specific, the more useful. General overview information is fine, and can be extremely helpful. But when people want to act on the information you provide don’t just give them a hint, give them all the information they require in order to act, right then and there.
Make sure people know what your site (and each page) will do for them. Yes, this seems obvious, but you can visit thousands of pages and have to search for their purpose. If someone can’t figure it out, immediately, chances are they’ll go someplace else. It’s best to do this at the top of the page, so people can see what they’ll get from you without scrolling. People will scroll, but only if they think there’s something of interest to them on your page.
Make it personal. There’s a “personal” aspect to web-based content that doesn’t apply to printed material. People see this content on the same screen they see their own work, so they tend to feel that content is even more personal and directed just at them.
Write conversationally. To make it more personal, your tone and writing style should be more casual, more conversational. Not only is this friendlier, but it’s also easier to read.

Formatting

Always start with the headline—everyone reads them. Condense your most important point down to a one- or two-line headline.
Give the reader the point of it: Distill longer documents down to their most important facts by creating an “executive summary.” Sites do this with a summary at the start of each article. This summary has links to the main subheads in an article. This way people can see the article at a glance, or easily jump to any important point.
Use plenty of subheads. People skim headings looking for specific topics—so use subheads liberally. If you started by creating an outline, your outline headings will automatically become subheads.
Format headings as separate lines—or as a lead-in sentence to a paragraph.
Bold text stands out. It’s best to use it sparingly, such as for lead-in headings at the start of a paragraph. Bold words scattered inside the text can be confusing.
Use italics for emphasis. Italics help your reader hear the same emphasis you intended. Italics can help make your text sound more conversational. For example, when you read the previous sentence, the word “sound” was emphasised because it was in italics. That can make a big difference in the meaning of what you write. While they can be overused, in general they help ensure that people read things the way you intended (or the way you intended 🙂
Here are the same words, but the italics give them different meanings:

I said I liked it.
I said I liked it.
I said I liked it.

Bulleted lists

People read bulleted text so condense important points to bulleted lists.
Repeat your most important quotes using pull quotes which are often in a different typeface.

The “Inverted Pyramid” method

Journalists are taught to put the most important elements of the story at the beginning. There are two reasons for this—one is that readers may not read the whole story, so you want them to get the most important information first—just in case they stop reading.

The other practical reason is that stories often need to be cut to fit into a given space, and they’re cut from the bottom where the least important items are. There’s plenty of room on the Web, so unlike printed matter, you probably won’t have to cut what you write. But even so, it’s a good idea to put the most important information first. Some Web pundits claim that shorter is better when it comes to writing for the Web. I don’t necessarily agree with that; we feel more content, depth, and detail is better. But if you do agree with “short is better,” then putting your most important information first makes it easier to cut your text.

By Importance: You’re going to do the same thing—put the most important items first—then work down to the details. You can do this visually by dragging the items up or down the list (grab them by the minus or plus sign).
By Topic: Once you have them in order of importance, it’s time to start thinking sideways. No, that doesn’t mean you’re allowed to be crabby at this point. It means that you’re going to organize by topic, you’re going to find the main point of a topic and take the other elements and put them under it. You do this by dragging them up or down the list to the right topic, then dragging them to the right so they’re “under” the heading above.
When you’re finished, you should have a few Heading 1’s (your major topics), and each one of them should have several Heading 2’s (sub topics), and each of those may have several Heading 3’s. Don’t feel compelled to fill out all six levels; three is usually enough.

Colours and Text

There are three main issues here: The colours of text, hyperlinks, and the backgrounds on which they’re read. Almost all popular sites use black text, standard blue hyperlinks and white backgrounds.

Black text on a white background gives high contrast and is the easiest to read at length — that’s why it’s so popular. Any variation reduces contrast and legibility, but if the variation is minor then the loss of legibility will be minor too. No big deal.

Light text on a dark background can also give good legibility, but the general consensus is that it’s harder to read at length, so is more suited to short text.

If you use coloured text on a coloured background, you need to take care over contrast and legibility. colour pairs that are technically defined as complementary (meaning they’re at opposite sides of a circular spectrum or colour wheel) such as red and green or gold and blue, give more contrast than colours closer together on the spectrum, such as red and orange. If you’re tempted by a bold combination, be sure to check your pages on a screen that suffers from reflected glare. Combinations that seem fine on a well-positioned screen can merge into obscurity on one that’s badly positioned — and that’s the situation many your visitors may be stuck with.

When it comes to hyperlink colours, there’s another issue that needs taking into account — user expectations. In the early days of the Web, everybody was a new user and nobody had much in the way of expectations. Red text on a black background with yellow hyperlinks was fun. But those days are behind us. There are now millions of experienced Web users they are not too fussed about the text hyperlink colour but do expect hyperlinks to be underlinked or at least any text which is underlined should definately be a hyperlink.

At this level the science runs out and we come down to opinion. Just how important is that possibility of confusion?

If you have a navigation area full of underlined yellow words on a black background, surely everybody will recognize they’re links? Probably so, but it’s interesting to note that most of the popular sites stick with the standard blue.

Choosing standard blue can influence your entire colour scheme. You’ll notice that relatively few sites on the Web make extensive use of green. That’s because it doesn’t mix well with hyperlink blue. colour schemes in red, blue and yellow are more popular because they’re easy to use with hyperlink blue.

Graphic designers are often involved in web design. Combining visual communication skills with the interactive communication skills of user interaction and online branding, graphic designers often work with web developers to create both the look and feel of a web site and enhance the online experience of web site visitors.

In the job field, many companies look for someone who can do both graphic design and the web application development involved in web design, including programming. There is a great deal of debate in the professional design community about whether this trend is positive, or if graphic designers are being over-tasked with unrelated skills and disciplines. A collaborative web-design team may split the tasks between graphic designers and software engineers.