Transcript 1. What does a good website look like ? A website that meets its goals Different types of websites Different goals Showcase site Get leads.

1. What does a good website look like ?
A website that meets its goals
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 which makes your content efficient
• 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
I.
Essential content
Should be “huge” for search engines, but clear for visitors
Content
will help to inform your
visitors about your
products
will bring visitors to
your site through
search engines
2. Essential content
For the homepage
• The visitor must understand at first glace which is the business
domain of your company
o Make visible a short sentence of introduction
o Tease with your services and products
• Present arguments
o What makes you different from your competitors
o 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 goals
o Contact form
o Telephone/address
o Purchase button
• Essential content should be essential for your visitors, not for you
2. Essential content
Examples
Quick presentation of
the company
Quick access to the
services
Testimonial
3. What you DO NOT want on your home page (biggest web mistakes)
Avoid discriminating elements
• 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)
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
4. Design & colors
Trends for the last 10 years
10 years ago:
5 years ago:
2013:
lots of content, use of
large gradients and
shadows, adapted to low
resolution screens
(800px width)
the opposite: solid
colors and very light
design. Average
resolution (1024px
width)
light patterns and CSS3
effects with light
shadows and round
corners, average
content, full size
4. Design & colors
Basics
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 & Colours
Colours
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
•
•
•
•
5. How to avoid making your page too “busy” ?
Structure
Clear and easy structure with
Titles and subtitles
Short and efficient sentences
Highlight keywords with bold
Space, breath. Highlight only the
main information
6. The right way to get information across ?
Eyetracking
Heat-map: F Pattern
• Eye behaviour is not linear
• People go to the essential
• 1st horizontal line
• 2nd horizontal line
• Vertical line
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
Elegant & clean look
Highlight the content