Different types of websites Different goals

Showcase site Get leads or bring people to a shop

eShop Gets orders

Portal Get page views

Mini websites (events, launching of a new product, blog…)

Promote specific products, services or events, develop relationship with clients, increase loyalty, etc.

1. What does a good website look like ? A website that meets its goals

1. What does a good website look like ? A website that meets its goals

• Content comes first:Nobody will come to a website because the design is great, but will come because the content is interesting.

• Design supports the content:The design is also an important point with its own empiric rules.

• Years of AB testing have led to some convention of design

1. What does a good website look like ? A website which makes your content efficient

1. What does a good website look like ? A website which makes your content efficient

Content

will help to inform your visitors about your products

will bring visitors to your site

through search engines

I. Essential contentShould be “huge” for search engines, but clear for visitors

• The visitor must understand at first glace which is the business domain of your companyo Make visible a short sentence of introductiono Tease with your services and products

• Present arguments o What makes you different from your competitorso Make your happy customers visible => testimonials / references (better to let your clients

speak about you than to display a big “About Us” block…)

• Highlight the content that leads your visitors to your goalso Contact formo Telephone/addresso Purchase button

• Essential content should be essential for your visitors, not for you

2. Essential contentFor the homepage

2. Essential contentFor the homepage

2. Essential contentExamples

2. Essential contentExamples

Quick presentation of the company

Testimonial

Quick access to the services

• Introduction page

• Music

• Flash animation (except for advertising)

• Aggressive design with blinking items

• Too many colors and information

• Request for registration

• Intrusive pop-up

• Terrible compatibility with different browsers

• Huge size and heavy background image

3. What you DO NOT want on your home page (biggest web mistakes)Avoid discriminating elements

3. What you DO NOT want on your home page (biggest web mistakes)Avoid discriminating elements

3. What you DO NOT want on your home page (biggest web mistakes)Mistakes collection

3. What you DO NOT want on your home page (biggest web mistakes)Mistakes collection

3. What you DO NOT want on your home page (biggest web mistakes)Mistakes collection

3. What you DO NOT want on your home page (biggest web mistakes)Mistakes collection

3. What you DO NOT want on your home page (biggest web mistakes)Mistakes collection

3. What you DO NOT want on your home page (biggest web mistakes)Mistakes collection

10 years ago:

lots of content, use of large gradients and shadows, adapted to low resolution screens (800px width)

5 years ago:

the opposite: solid colors and very light design. Average resolution (1024px width)

2013:

light patterns and CSS3 effects with light shadows and round corners, average content, full size

4. Design & colorsTrends for the last 10 years

4. Design & colorsTrends for the last 10 years

• Colours and design according to logo• Conventional: will save your visitors cognitive efforts• Few colours; one for clickable items (links, buttons, etc.)• Usability: direct access to main information• Use icons and images to make the understanding more

intuitive• Lightweight

4. Design & colorsBasics

4. Design & colorsBasics

• Red: passion, heat, power/violence• Green: sharing, patience, ecology, rest• Blue: serious, protection, wisdom• Yellow: creativity, curiosity, wealth,

heat, party• Orange: communication, optimism,

leisure, creativity, security• Black: luxury, sobriety, mystery

4. Design & ColoursColours

5. How to avoid making your page too “busy” ?Structure

5. How to avoid making your page too “busy” ?Structure

Space, breath. Highlight only the main information

Clear and easy structure withTitles and subtitles

Short and efficient sentencesHighlight keywords with bold

Heat-map: F Pattern

6. The right way to get information across ?Eyetracking

6. The right way to get information across ?Eyetracking

• 1st horizontal line• 2nd horizontal line• Vertical line

• Eye behaviour is not linear• People go to the essential

6. And what part of the page will naturally get noticed the most ?Call to action buttons: Encourage your visitors to act immediately

Contrasted button

Use of an icon increases the

efficency of the button

Warm colors catch the eye more easily

6. And what part of the page will naturally get noticed the most ?Importance of white (empty) spaces

6. And what part of the page will naturally get noticed the most ?Importance of white (empty) spaces

Elegant & clean lookHighlight the content