SlideShare une entreprise Scribd logo
1  sur  6
Télécharger pour lire hors ligne
EXAMPLES OF GOOD COMMERCIAL WEB DESIGN 
WHY THIS WORKS: a) most important content in most visible places - leads your eye to key messages b) clear & easy navigation - not too many options, instead homepage content is used as entry points to internal pages c) relevant imagery and clear messages - there’s no doubt what this 
company does d) good usage of colours, supporting visual focus & page structure e) simple and consistent colour scheme f) consistent use of stylistic elements - i.e. folded corners on boxes, borders, shadows g) consistent style of typeface 
1 
The whole idea behind the design of a commercial website is to convert web visitors into real customers. And the way to achieve that is by clearly communicating your USPs while looking attractive to your target market
EXAMPLES OF GOOD COMMERCIAL WEB DESIGN 
WHY THIS WORKS: a) colour coding of the different business sectors is used as a main design element, which results in a very clear & easy navigation system, as well as defining the style of the design b) simple and consistent colour pallet 
c) company USP is clearly communicated d) strong, engaging and adequate hero area for the business e) not too many graphical elements 
2
EXAMPLES OF GOOD COMMERCIAL WEB DESIGN 
WHY THIS WORKS: a) great image selection for hero area -friendly, smiling, genuine-looking business employees b) creative way of making phone number stand out, in keeping with business USP c) stylistic elements 
are consistent with the website message (friendly yet professional) 
d) simplified colour palette with strong leading colour is used to highlight the key messages & structure of the site e) very simple & effective layout 
3
EXAMPLES OF GOOD COMMERCIAL WEB DESIGN 
WHY THIS WORKS: a) clear USP & very clear navigation b) all graphical elements support the USP & support functionality (i.e. ‘learn more’ arrow - points out to more text below the fold, logo shape - reference to recycling symbol; background texture - consistent with recycling theme) 
b) very informative yet very simple layout keeps focus on the essential information, while simple mapping leads to more in-depth information on internal pages & below the fold 
4
EXAMPLES OF GOOD COMMERCIAL WEB DESIGN 
WHY THIS WORKS: a) concise message - visual and textual b) clear USP c) spare use of graphical elements - fewer used with stronger impact (hero image, background texture, ‘learn more’ buttons) 
d) two tone, strong colour pallet (red and yellow ) e) clear information structure with plenty of ‘empty’ space around key message (in order not to distract viewer’s attention) 
5
EXAMPLES OF GOOD COMMERCIAL WEB DESIGN 
SUMMARY - HOW TO DESIGN A GOOD COMMERCIAL WEBSITE 
a) homepage is important - customers decide in seconds whether they have found what they are looking for, therefore make sure that you are very careful about what you put on your homepage 
b) be concise & clear about your USPs: don’t dilute them & clutter the page with unnecessary details & stylistic elements. Overload of information may be off-putting & confusing for the visitor 
c) make sure that the imagery used shows or strongly supports the business USPs & does not lead to any confusion - i.e. a smiling businessman means nothing; a product or employee at work communicates what the business does 
d) homepage straplines, headings & calls to action need to strictly relate to the business USPs 
e) structure your page to lead viewers’ eyes to the most important messages - by using highlighting colour, blocks of colour or imagery, you should ‘hot spot’ the page 
f) make sure that navigation is simple and clear 
g) be consistent and don’t overuse stylistic elements 
h) use layout wisely and stick to the most common and recognisable formats - most of customers like familiarity, not surprises 
i) make sure that all text is easily readable 
j) contact information must be easy to find 
6 
Written by: Ursula Zajkowska Edited by: Honor Clement-Hayes 
Thank you for reading

Contenu connexe

Similaire à A few examples of good commercial web design

5-businessdevelopmentmarketingstrategysampleofwork-2012-130115223109-phpapp01
5-businessdevelopmentmarketingstrategysampleofwork-2012-130115223109-phpapp015-businessdevelopmentmarketingstrategysampleofwork-2012-130115223109-phpapp01
5-businessdevelopmentmarketingstrategysampleofwork-2012-130115223109-phpapp01
Ayyaz Mehmood Shaikh
 
Generic conventions of a website
Generic conventions of a websiteGeneric conventions of a website
Generic conventions of a website
LaurenHolyoak1
 

Similaire à A few examples of good commercial web design (20)

Top 10 Web Design Trends in 2022
Top 10 Web Design Trends in 2022Top 10 Web Design Trends in 2022
Top 10 Web Design Trends in 2022
 
Week 202 design skills
Week 202 design skillsWeek 202 design skills
Week 202 design skills
 
5-businessdevelopmentmarketingstrategysampleofwork-2012-130115223109-phpapp01
5-businessdevelopmentmarketingstrategysampleofwork-2012-130115223109-phpapp015-businessdevelopmentmarketingstrategysampleofwork-2012-130115223109-phpapp01
5-businessdevelopmentmarketingstrategysampleofwork-2012-130115223109-phpapp01
 
E-Commerce Website Proposal
E-Commerce Website ProposalE-Commerce Website Proposal
E-Commerce Website Proposal
 
ArcSoft.com Overhaul: Bringing "Intelligent Imaging" to Life.
ArcSoft.com Overhaul: Bringing "Intelligent Imaging" to Life.ArcSoft.com Overhaul: Bringing "Intelligent Imaging" to Life.
ArcSoft.com Overhaul: Bringing "Intelligent Imaging" to Life.
 
Web Usability
Web UsabilityWeb Usability
Web Usability
 
Office Interior Branding
Office Interior BrandingOffice Interior Branding
Office Interior Branding
 
Office Interior Branding
Office Interior BrandingOffice Interior Branding
Office Interior Branding
 
Billboard deconstruction
Billboard deconstructionBillboard deconstruction
Billboard deconstruction
 
2016 CV
2016 CV2016 CV
2016 CV
 
Development of Business Plan.pptx
Development of Business Plan.pptxDevelopment of Business Plan.pptx
Development of Business Plan.pptx
 
Advertising layout (2)
Advertising layout (2)Advertising layout (2)
Advertising layout (2)
 
Portfolio idea 8_Redesign of efhseasia.com
Portfolio idea 8_Redesign of efhseasia.comPortfolio idea 8_Redesign of efhseasia.com
Portfolio idea 8_Redesign of efhseasia.com
 
Digital Marketing By krishna.pdf
Digital Marketing By krishna.pdfDigital Marketing By krishna.pdf
Digital Marketing By krishna.pdf
 
Graphic Designer
Graphic DesignerGraphic Designer
Graphic Designer
 
Generic conventions of a website
Generic conventions of a websiteGeneric conventions of a website
Generic conventions of a website
 
Competitive review as an “input step” into the design process [Venere.com cen...
Competitive review as an “input step” into the design process [Venere.com cen...Competitive review as an “input step” into the design process [Venere.com cen...
Competitive review as an “input step” into the design process [Venere.com cen...
 
Presentation in csm 5
Presentation in csm 5Presentation in csm 5
Presentation in csm 5
 
Minimalist Web Design | Simplemachine
Minimalist Web Design | SimplemachineMinimalist Web Design | Simplemachine
Minimalist Web Design | Simplemachine
 
10 Design and Layout Principles Guaranteed to Improve Your Website V2
10 Design and Layout Principles Guaranteed to Improve Your Website V210 Design and Layout Principles Guaranteed to Improve Your Website V2
10 Design and Layout Principles Guaranteed to Improve Your Website V2
 

Dernier

How to Build a Simple Shopify Website
How to Build a Simple Shopify WebsiteHow to Build a Simple Shopify Website
How to Build a Simple Shopify Website
mark11275
 
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
gajnagarg
 
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
awasv46j
 
Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...
Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...
Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...
ZurliaSoop
 
一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证
一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证
一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证
wpkuukw
 
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
gajnagarg
 
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
wpkuukw
 
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
nirzagarg
 
Abortion pills in Kuwait 🚚+966505195917 but home delivery available in Kuwait...
Abortion pills in Kuwait 🚚+966505195917 but home delivery available in Kuwait...Abortion pills in Kuwait 🚚+966505195917 but home delivery available in Kuwait...
Abortion pills in Kuwait 🚚+966505195917 but home delivery available in Kuwait...
drmarathore
 
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
CristineGraceAcuyan
 
Resume all my skills and educations and achievement
Resume all my skills and educations and  achievement Resume all my skills and educations and  achievement
Resume all my skills and educations and achievement
210303105569
 

Dernier (20)

Just Call Vip call girls Fatehpur Escorts ☎️8617370543 Two shot with one girl...
Just Call Vip call girls Fatehpur Escorts ☎️8617370543 Two shot with one girl...Just Call Vip call girls Fatehpur Escorts ☎️8617370543 Two shot with one girl...
Just Call Vip call girls Fatehpur Escorts ☎️8617370543 Two shot with one girl...
 
TRose UXPA Experience Design Concord .pptx
TRose UXPA Experience Design Concord .pptxTRose UXPA Experience Design Concord .pptx
TRose UXPA Experience Design Concord .pptx
 
How to Build a Simple Shopify Website
How to Build a Simple Shopify WebsiteHow to Build a Simple Shopify Website
How to Build a Simple Shopify Website
 
Call Girls Jalaun Just Call 8617370543 Top Class Call Girl Service Available
Call Girls Jalaun Just Call 8617370543 Top Class Call Girl Service AvailableCall Girls Jalaun Just Call 8617370543 Top Class Call Girl Service Available
Call Girls Jalaun Just Call 8617370543 Top Class Call Girl Service Available
 
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
 
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
 
Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...
Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...
Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...
 
一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证
一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证
一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证
 
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
 
Raebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for Friendship
Raebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for FriendshipRaebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for Friendship
Raebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for Friendship
 
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
 
Essential UI/UX Design Principles: A Comprehensive Guide
Essential UI/UX Design Principles: A Comprehensive GuideEssential UI/UX Design Principles: A Comprehensive Guide
Essential UI/UX Design Principles: A Comprehensive Guide
 
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
 
Abortion pills in Kuwait 🚚+966505195917 but home delivery available in Kuwait...
Abortion pills in Kuwait 🚚+966505195917 but home delivery available in Kuwait...Abortion pills in Kuwait 🚚+966505195917 but home delivery available in Kuwait...
Abortion pills in Kuwait 🚚+966505195917 but home delivery available in Kuwait...
 
Furniture & Joinery Details_Designs.pptx
Furniture & Joinery Details_Designs.pptxFurniture & Joinery Details_Designs.pptx
Furniture & Joinery Details_Designs.pptx
 
How to Create a Productive Workspace Trends and Tips.pdf
How to Create a Productive Workspace Trends and Tips.pdfHow to Create a Productive Workspace Trends and Tips.pdf
How to Create a Productive Workspace Trends and Tips.pdf
 
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
 
Gamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad IbrahimGamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad Ibrahim
 
Resume all my skills and educations and achievement
Resume all my skills and educations and  achievement Resume all my skills and educations and  achievement
Resume all my skills and educations and achievement
 
Independent Escorts Goregaon WhatsApp +91-9930687706, Best Service
Independent Escorts Goregaon WhatsApp +91-9930687706, Best ServiceIndependent Escorts Goregaon WhatsApp +91-9930687706, Best Service
Independent Escorts Goregaon WhatsApp +91-9930687706, Best Service
 

A few examples of good commercial web design

  • 1. EXAMPLES OF GOOD COMMERCIAL WEB DESIGN WHY THIS WORKS: a) most important content in most visible places - leads your eye to key messages b) clear & easy navigation - not too many options, instead homepage content is used as entry points to internal pages c) relevant imagery and clear messages - there’s no doubt what this company does d) good usage of colours, supporting visual focus & page structure e) simple and consistent colour scheme f) consistent use of stylistic elements - i.e. folded corners on boxes, borders, shadows g) consistent style of typeface 1 The whole idea behind the design of a commercial website is to convert web visitors into real customers. And the way to achieve that is by clearly communicating your USPs while looking attractive to your target market
  • 2. EXAMPLES OF GOOD COMMERCIAL WEB DESIGN WHY THIS WORKS: a) colour coding of the different business sectors is used as a main design element, which results in a very clear & easy navigation system, as well as defining the style of the design b) simple and consistent colour pallet c) company USP is clearly communicated d) strong, engaging and adequate hero area for the business e) not too many graphical elements 2
  • 3. EXAMPLES OF GOOD COMMERCIAL WEB DESIGN WHY THIS WORKS: a) great image selection for hero area -friendly, smiling, genuine-looking business employees b) creative way of making phone number stand out, in keeping with business USP c) stylistic elements are consistent with the website message (friendly yet professional) d) simplified colour palette with strong leading colour is used to highlight the key messages & structure of the site e) very simple & effective layout 3
  • 4. EXAMPLES OF GOOD COMMERCIAL WEB DESIGN WHY THIS WORKS: a) clear USP & very clear navigation b) all graphical elements support the USP & support functionality (i.e. ‘learn more’ arrow - points out to more text below the fold, logo shape - reference to recycling symbol; background texture - consistent with recycling theme) b) very informative yet very simple layout keeps focus on the essential information, while simple mapping leads to more in-depth information on internal pages & below the fold 4
  • 5. EXAMPLES OF GOOD COMMERCIAL WEB DESIGN WHY THIS WORKS: a) concise message - visual and textual b) clear USP c) spare use of graphical elements - fewer used with stronger impact (hero image, background texture, ‘learn more’ buttons) d) two tone, strong colour pallet (red and yellow ) e) clear information structure with plenty of ‘empty’ space around key message (in order not to distract viewer’s attention) 5
  • 6. EXAMPLES OF GOOD COMMERCIAL WEB DESIGN SUMMARY - HOW TO DESIGN A GOOD COMMERCIAL WEBSITE a) homepage is important - customers decide in seconds whether they have found what they are looking for, therefore make sure that you are very careful about what you put on your homepage b) be concise & clear about your USPs: don’t dilute them & clutter the page with unnecessary details & stylistic elements. Overload of information may be off-putting & confusing for the visitor c) make sure that the imagery used shows or strongly supports the business USPs & does not lead to any confusion - i.e. a smiling businessman means nothing; a product or employee at work communicates what the business does d) homepage straplines, headings & calls to action need to strictly relate to the business USPs e) structure your page to lead viewers’ eyes to the most important messages - by using highlighting colour, blocks of colour or imagery, you should ‘hot spot’ the page f) make sure that navigation is simple and clear g) be consistent and don’t overuse stylistic elements h) use layout wisely and stick to the most common and recognisable formats - most of customers like familiarity, not surprises i) make sure that all text is easily readable j) contact information must be easy to find 6 Written by: Ursula Zajkowska Edited by: Honor Clement-Hayes Thank you for reading