SlideShare a Scribd company logo
1 of 9
Download to read offline
PRINCIPLES OF GOOD WEBSITE DESIGN
What do you mean by ‘web design’?
Web design encompasses many different skills and disciplines in the production
and maintenance of websites. The different areas of web design include web
graphic design; user interface design; authoring, including standardised code
and proprietary software; user experience design; and search engine
optimization.
What makes a good web design?
1. Purpose
Good web design always caters to the needs of the user. Are your web visitors looking for information,
entertainment, some type of interaction, or to transact with your business? Each page of your website needs
to have a clear purpose, and to fulfill a specific need for your website users in the most effective way possible.
2. Communication
People on the web tend to want information quickly, so it is important to communicate clearly, and make your
information easy to read and digest. Some effective tactics to include in your web design include: organising
information using headlines and sub headlines, using bullet points instead of long windy sentences, and
cutting the waffle.
3. Typefaces
In general, Sans Serif fonts such as Arial and Verdana are easier to read online (Sans
Serif fonts are contemporary looking fonts without decorative finishes). The ideal font
size for reading easily online is 16px and stick to a maximum of 3 typefaces in a
maximum of 3 point sizes to keep your design streamlined.
4. Colours
A well thought out colour palette can go a long way to enhance the user experience.
Complementary colours create balance and harmony. Using contrasting colours for the
text and background will make reading easier on the eye. Vibrant colours create
emotion and should be used sparingly (e.g. for buttons and call to actions). Last but not
least, white space/ negative space is very effective at giving your website a modern
and uncluttered look.
5. Images
A picture can speak a thousand words, and choosing the right images for your website can help with brand
positioning and connecting with your target audience. If you don’t have high quality professional photos on
hand, consider purchasing stock photos to lift the look of your website. Also consider using infographics,
videos and graphics as these can be much more effective at communicating than even the most well written
piece of text.
6. Navigation
Navigation is about how easy it is for people to take action and move around your website. Some tactics for
effective navigation include a logical page hierarchy, using bread crumbs, designing clickable buttons, and
following the ‘three click rule’ which means users will be able to find the information they are looking for within
three clicks.
7. Grid based layouts
Placing content randomly on your web page can end up with a haphazard appearance that is messy. Grid
based layouts arrange content into sections, columns and boxes that line up and feel balanced, which leads
to a better looking website design.
8. “F” Pattern design
Eye tracking studies have identified that people scan computer screens in an “F” pattern. Most of what people
see is in the top and left of the screen and the right side of the screen is rarely seen. Rather than trying to
force the viewer’s visual flow, effectively designed websites will work with a reader’s natural behaviour and
display information in order of importance (left to right, and top to bottom).
9. Load time
Everybody hates a website that takes ages to load. Tips to make page load times more effective include
optimising image sizes (size and scale), combining code into a central CSS or JavaScript file (this reduces
HTTP requests) and minify HTML, CSS, JavaScript (compressed to speed up their load time).
10: Mobile friendly
It is now commonplace to access websites from multiple devices with multiple screen sizes, so it is important
to consider if your website is mobile friendly. If your website is not mobile friendly, you can either rebuild it in a
responsive layout (this means your website will adjust to different screen widths) or you can build a dedicated
mobile site (a separate website optimised specifically for mobile users).
Create a beautiful and functional website, simply by keeping these design elements in mind. Have
you got a website design that needs reviewing or optimising? Or perhaps, you are planning a
website and you are looking to get the design right from the ground up. Either way, these principles
of effective web design can help your website be more engaging, useful, and memorable for visitors.
Visit us @ www.innothoughts.com
Mail us @ innothoughtspune@gmail.com

More Related Content

What's hot

Web design for business.ppt
Web design for business.pptWeb design for business.ppt
Web design for business.ppt
webhostingguy
 

What's hot (20)

Issues of web design and structure
Issues of web design and structureIssues of web design and structure
Issues of web design and structure
 
Web design-principles-and-elements-by-renalyn-paica
Web design-principles-and-elements-by-renalyn-paicaWeb design-principles-and-elements-by-renalyn-paica
Web design-principles-and-elements-by-renalyn-paica
 
How to Increase Your Site Usability to Drive Leads
How to Increase Your Site Usability to Drive LeadsHow to Increase Your Site Usability to Drive Leads
How to Increase Your Site Usability to Drive Leads
 
Characterstc of web
Characterstc of webCharacterstc of web
Characterstc of web
 
Principle of a good web design
Principle of a good web designPrinciple of a good web design
Principle of a good web design
 
5 Elements of Successful Websites
5 Elements of Successful Websites5 Elements of Successful Websites
5 Elements of Successful Websites
 
What Do When Plan A Site-Website Developer Jackson
What Do When Plan A Site-Website Developer JacksonWhat Do When Plan A Site-Website Developer Jackson
What Do When Plan A Site-Website Developer Jackson
 
Web design 3
Web design 3Web design 3
Web design 3
 
Web Site Design
Web Site DesignWeb Site Design
Web Site Design
 
Design Your Imagination
Design Your ImaginationDesign Your Imagination
Design Your Imagination
 
Site Design Suggestions For Those In Need
Site Design Suggestions For Those In NeedSite Design Suggestions For Those In Need
Site Design Suggestions For Those In Need
 
Gsc awd 1_web_developmentlifecyclefrombegtoendpowerpoint
Gsc awd 1_web_developmentlifecyclefrombegtoendpowerpointGsc awd 1_web_developmentlifecyclefrombegtoendpowerpoint
Gsc awd 1_web_developmentlifecyclefrombegtoendpowerpoint
 
Web design for business.ppt
Web design for business.pptWeb design for business.ppt
Web design for business.ppt
 
why responsive web design is important
why responsive web design is importantwhy responsive web design is important
why responsive web design is important
 
Digital Retail Training Session Two
Digital Retail Training Session TwoDigital Retail Training Session Two
Digital Retail Training Session Two
 
Design for the Web
Design for the WebDesign for the Web
Design for the Web
 
Mkt460 Week3
Mkt460 Week3Mkt460 Week3
Mkt460 Week3
 
Website designing company in delhi
Website designing company in delhiWebsite designing company in delhi
Website designing company in delhi
 
MKT 460 Week 3
MKT 460 Week 3MKT 460 Week 3
MKT 460 Week 3
 
Layout Standards and Techniques
Layout Standards and TechniquesLayout Standards and Techniques
Layout Standards and Techniques
 

Similar to Principles of good website design

Graphics Designing (Character, Posters, Advertisements, Brochure, Interface B...
Graphics Designing (Character, Posters, Advertisements, Brochure, Interface B...Graphics Designing (Character, Posters, Advertisements, Brochure, Interface B...
Graphics Designing (Character, Posters, Advertisements, Brochure, Interface B...
Drupal Camp Delhi
 
web designe.pdf
web designe.pdfweb designe.pdf
web designe.pdf
Rafiha Rahi
 
web designe.pdf
web designe.pdfweb designe.pdf
web designe.pdf
Fahia Farin
 
straight-north-lead-gen-website-whitepaper
straight-north-lead-gen-website-whitepaperstraight-north-lead-gen-website-whitepaper
straight-north-lead-gen-website-whitepaper
Matthew J. Lane
 

Similar to Principles of good website design (20)

Empowerment Technology - Basic Web Design Principles and Elements
Empowerment Technology - Basic Web Design Principles and ElementsEmpowerment Technology - Basic Web Design Principles and Elements
Empowerment Technology - Basic Web Design Principles and Elements
 
10 Web Design Principles For An Outstanding User Experience
10 Web Design Principles For An Outstanding User Experience10 Web Design Principles For An Outstanding User Experience
10 Web Design Principles For An Outstanding User Experience
 
17 Essential Elements of Web Design | FODUU
17 Essential Elements of Web Design | FODUU17 Essential Elements of Web Design | FODUU
17 Essential Elements of Web Design | FODUU
 
7 Important Guidelines for Effective Responsive Web Design
7 Important Guidelines for Effective Responsive Web Design7 Important Guidelines for Effective Responsive Web Design
7 Important Guidelines for Effective Responsive Web Design
 
What is Web Designing?
What is Web Designing?What is Web Designing?
What is Web Designing?
 
Web Design Best Practices for 2023
Web Design Best Practices for 2023Web Design Best Practices for 2023
Web Design Best Practices for 2023
 
How not having a Responsive Website can be Detrimental to your business?
How not having a Responsive Website can be Detrimental to your business?How not having a Responsive Website can be Detrimental to your business?
How not having a Responsive Website can be Detrimental to your business?
 
Website Changes Over the Years
Website Changes Over the YearsWebsite Changes Over the Years
Website Changes Over the Years
 
Web designing(unit 1) Part 1
Web designing(unit 1) Part 1Web designing(unit 1) Part 1
Web designing(unit 1) Part 1
 
Best Search Engine Optimization Online Course
Best Search Engine Optimization Online CourseBest Search Engine Optimization Online Course
Best Search Engine Optimization Online Course
 
Graphics Designing (Character, Posters, Advertisements, Brochure, Interface B...
Graphics Designing (Character, Posters, Advertisements, Brochure, Interface B...Graphics Designing (Character, Posters, Advertisements, Brochure, Interface B...
Graphics Designing (Character, Posters, Advertisements, Brochure, Interface B...
 
Website usability ideas for business growth
Website usability ideas for business growthWebsite usability ideas for business growth
Website usability ideas for business growth
 
web designe.pdf
web designe.pdfweb designe.pdf
web designe.pdf
 
web designe.pdf
web designe.pdfweb designe.pdf
web designe.pdf
 
Sn web-whitepaper
Sn web-whitepaperSn web-whitepaper
Sn web-whitepaper
 
straight-north-lead-gen-website-whitepaper
straight-north-lead-gen-website-whitepaperstraight-north-lead-gen-website-whitepaper
straight-north-lead-gen-website-whitepaper
 
How To Build A High Performance Lead Generation Website
How To Build A High Performance  Lead Generation WebsiteHow To Build A High Performance  Lead Generation Website
How To Build A High Performance Lead Generation Website
 
15 Key Principles Of Web Design
15 Key Principles Of Web Design15 Key Principles Of Web Design
15 Key Principles Of Web Design
 
Web Design by Client Perspective
 Web Design by Client Perspective Web Design by Client Perspective
Web Design by Client Perspective
 
Web Accessibility
Web AccessibilityWeb Accessibility
Web Accessibility
 

More from Innothoughts Systems Pvt. Ltd.

More from Innothoughts Systems Pvt. Ltd. (12)

Digital marketing automation
Digital marketing automationDigital marketing automation
Digital marketing automation
 
Your seo trends for 2021
Your seo trends for 2021Your seo trends for 2021
Your seo trends for 2021
 
Why affiliate marketing is a catalyst for your business
Why affiliate marketing is a catalyst for your business Why affiliate marketing is a catalyst for your business
Why affiliate marketing is a catalyst for your business
 
Why affiliate marketing is a catalyst for your business
Why affiliate marketing is a catalyst for your business Why affiliate marketing is a catalyst for your business
Why affiliate marketing is a catalyst for your business
 
Tips to boost seo with schema markup
Tips to boost seo with schema markup Tips to boost seo with schema markup
Tips to boost seo with schema markup
 
Featured snippets a privilege, not a right! 1
Featured snippets a privilege, not a right! 1Featured snippets a privilege, not a right! 1
Featured snippets a privilege, not a right! 1
 
Digital marketing trends 2020 (1)
Digital marketing trends 2020 (1)Digital marketing trends 2020 (1)
Digital marketing trends 2020 (1)
 
Branding strategies pdf file
Branding strategies pdf fileBranding strategies pdf file
Branding strategies pdf file
 
Innothoughts Systems company in Pune|India
Innothoughts Systems company in Pune|IndiaInnothoughts Systems company in Pune|India
Innothoughts Systems company in Pune|India
 
PPT on Social Media Marketing
PPT on Social Media Marketing PPT on Social Media Marketing
PPT on Social Media Marketing
 
What is Branding?
What is Branding?What is Branding?
What is Branding?
 
Five Simple Marketing Tips For Business
Five Simple Marketing Tips For BusinessFive Simple Marketing Tips For Business
Five Simple Marketing Tips For Business
 

Recently uploaded

BUY GMAIL ACCOUNTS PVA USA IP INDIAN IP GMAIL
BUY GMAIL ACCOUNTS PVA USA IP INDIAN IP GMAILBUY GMAIL ACCOUNTS PVA USA IP INDIAN IP GMAIL
BUY GMAIL ACCOUNTS PVA USA IP INDIAN IP GMAIL
DIGISHIFT INDIA +918368319550
 
CALL ON ➥8923113531 🔝Call Girls Hazratganj Lucknow best sexual service Online
CALL ON ➥8923113531 🔝Call Girls Hazratganj Lucknow best sexual service OnlineCALL ON ➥8923113531 🔝Call Girls Hazratganj Lucknow best sexual service Online
CALL ON ➥8923113531 🔝Call Girls Hazratganj Lucknow best sexual service Online
anilsa9823
 

Recently uploaded (20)

Unraveling the Mystery of The Circleville Letters.pptx
Unraveling the Mystery of The Circleville Letters.pptxUnraveling the Mystery of The Circleville Letters.pptx
Unraveling the Mystery of The Circleville Letters.pptx
 
The+State+of+Careers+In+Retention+Marketing-2.pdf
The+State+of+Careers+In+Retention+Marketing-2.pdfThe+State+of+Careers+In+Retention+Marketing-2.pdf
The+State+of+Careers+In+Retention+Marketing-2.pdf
 
BDSM⚡Call Girls in Sector 39 Noida Escorts Escorts >༒8448380779 Escort Service
BDSM⚡Call Girls in Sector 39 Noida Escorts Escorts >༒8448380779 Escort ServiceBDSM⚡Call Girls in Sector 39 Noida Escorts Escorts >༒8448380779 Escort Service
BDSM⚡Call Girls in Sector 39 Noida Escorts Escorts >༒8448380779 Escort Service
 
BUY GMAIL ACCOUNTS PVA USA IP INDIAN IP GMAIL
BUY GMAIL ACCOUNTS PVA USA IP INDIAN IP GMAILBUY GMAIL ACCOUNTS PVA USA IP INDIAN IP GMAIL
BUY GMAIL ACCOUNTS PVA USA IP INDIAN IP GMAIL
 
Factors-Influencing-Branding-Strategies.pptx
Factors-Influencing-Branding-Strategies.pptxFactors-Influencing-Branding-Strategies.pptx
Factors-Influencing-Branding-Strategies.pptx
 
Foundation First - Why Your Website and Content Matters - David Pisarek
Foundation First - Why Your Website and Content Matters - David PisarekFoundation First - Why Your Website and Content Matters - David Pisarek
Foundation First - Why Your Website and Content Matters - David Pisarek
 
Kraft Mac and Cheese campaign presentation
Kraft Mac and Cheese campaign presentationKraft Mac and Cheese campaign presentation
Kraft Mac and Cheese campaign presentation
 
Top 5 Breakthrough AI Innovations Elevating Content Creation and Personalizat...
Top 5 Breakthrough AI Innovations Elevating Content Creation and Personalizat...Top 5 Breakthrough AI Innovations Elevating Content Creation and Personalizat...
Top 5 Breakthrough AI Innovations Elevating Content Creation and Personalizat...
 
Cash payment girl 9257726604 Hand ✋ to Hand over girl
Cash payment girl 9257726604 Hand ✋ to Hand over girlCash payment girl 9257726604 Hand ✋ to Hand over girl
Cash payment girl 9257726604 Hand ✋ to Hand over girl
 
The Science of Landing Page Messaging.pdf
The Science of Landing Page Messaging.pdfThe Science of Landing Page Messaging.pdf
The Science of Landing Page Messaging.pdf
 
How to Create a Social Media Plan Like a Pro - Jordan Scheltgen
How to Create a Social Media Plan Like a Pro - Jordan ScheltgenHow to Create a Social Media Plan Like a Pro - Jordan Scheltgen
How to Create a Social Media Plan Like a Pro - Jordan Scheltgen
 
Call Us ➥9654467111▻Call Girls In Delhi NCR
Call Us ➥9654467111▻Call Girls In Delhi NCRCall Us ➥9654467111▻Call Girls In Delhi NCR
Call Us ➥9654467111▻Call Girls In Delhi NCR
 
Creator Influencer Strategy Master Class - Corinne Rose Guirgis
Creator Influencer Strategy Master Class - Corinne Rose GuirgisCreator Influencer Strategy Master Class - Corinne Rose Guirgis
Creator Influencer Strategy Master Class - Corinne Rose Guirgis
 
BDSM⚡Call Girls in Sector 144 Noida Escorts >༒8448380779 Escort Service
BDSM⚡Call Girls in Sector 144 Noida Escorts >༒8448380779 Escort ServiceBDSM⚡Call Girls in Sector 144 Noida Escorts >༒8448380779 Escort Service
BDSM⚡Call Girls in Sector 144 Noida Escorts >༒8448380779 Escort Service
 
Generative AI Master Class - Generative AI, Unleash Creative Opportunity - Pe...
Generative AI Master Class - Generative AI, Unleash Creative Opportunity - Pe...Generative AI Master Class - Generative AI, Unleash Creative Opportunity - Pe...
Generative AI Master Class - Generative AI, Unleash Creative Opportunity - Pe...
 
No Cookies No Problem - Steve Krull, Be Found Online
No Cookies No Problem - Steve Krull, Be Found OnlineNo Cookies No Problem - Steve Krull, Be Found Online
No Cookies No Problem - Steve Krull, Be Found Online
 
personal branding kit for music business
personal branding kit for music businesspersonal branding kit for music business
personal branding kit for music business
 
Enjoy Night⚡Call Girls Dlf City Phase 4 Gurgaon >༒8448380779 Escort Service
Enjoy Night⚡Call Girls Dlf City Phase 4 Gurgaon >༒8448380779 Escort ServiceEnjoy Night⚡Call Girls Dlf City Phase 4 Gurgaon >༒8448380779 Escort Service
Enjoy Night⚡Call Girls Dlf City Phase 4 Gurgaon >༒8448380779 Escort Service
 
Labour Day Celebrating Workers and Their Contributions.pptx
Labour Day Celebrating Workers and Their Contributions.pptxLabour Day Celebrating Workers and Their Contributions.pptx
Labour Day Celebrating Workers and Their Contributions.pptx
 
CALL ON ➥8923113531 🔝Call Girls Hazratganj Lucknow best sexual service Online
CALL ON ➥8923113531 🔝Call Girls Hazratganj Lucknow best sexual service OnlineCALL ON ➥8923113531 🔝Call Girls Hazratganj Lucknow best sexual service Online
CALL ON ➥8923113531 🔝Call Girls Hazratganj Lucknow best sexual service Online
 

Principles of good website design

  • 1. PRINCIPLES OF GOOD WEBSITE DESIGN
  • 2. What do you mean by ‘web design’? Web design encompasses many different skills and disciplines in the production and maintenance of websites. The different areas of web design include web graphic design; user interface design; authoring, including standardised code and proprietary software; user experience design; and search engine optimization.
  • 3. What makes a good web design? 1. Purpose Good web design always caters to the needs of the user. Are your web visitors looking for information, entertainment, some type of interaction, or to transact with your business? Each page of your website needs to have a clear purpose, and to fulfill a specific need for your website users in the most effective way possible. 2. Communication People on the web tend to want information quickly, so it is important to communicate clearly, and make your information easy to read and digest. Some effective tactics to include in your web design include: organising information using headlines and sub headlines, using bullet points instead of long windy sentences, and cutting the waffle.
  • 4. 3. Typefaces In general, Sans Serif fonts such as Arial and Verdana are easier to read online (Sans Serif fonts are contemporary looking fonts without decorative finishes). The ideal font size for reading easily online is 16px and stick to a maximum of 3 typefaces in a maximum of 3 point sizes to keep your design streamlined. 4. Colours A well thought out colour palette can go a long way to enhance the user experience. Complementary colours create balance and harmony. Using contrasting colours for the text and background will make reading easier on the eye. Vibrant colours create emotion and should be used sparingly (e.g. for buttons and call to actions). Last but not least, white space/ negative space is very effective at giving your website a modern and uncluttered look.
  • 5. 5. Images A picture can speak a thousand words, and choosing the right images for your website can help with brand positioning and connecting with your target audience. If you don’t have high quality professional photos on hand, consider purchasing stock photos to lift the look of your website. Also consider using infographics, videos and graphics as these can be much more effective at communicating than even the most well written piece of text. 6. Navigation Navigation is about how easy it is for people to take action and move around your website. Some tactics for effective navigation include a logical page hierarchy, using bread crumbs, designing clickable buttons, and following the ‘three click rule’ which means users will be able to find the information they are looking for within three clicks.
  • 6. 7. Grid based layouts Placing content randomly on your web page can end up with a haphazard appearance that is messy. Grid based layouts arrange content into sections, columns and boxes that line up and feel balanced, which leads to a better looking website design. 8. “F” Pattern design Eye tracking studies have identified that people scan computer screens in an “F” pattern. Most of what people see is in the top and left of the screen and the right side of the screen is rarely seen. Rather than trying to force the viewer’s visual flow, effectively designed websites will work with a reader’s natural behaviour and display information in order of importance (left to right, and top to bottom).
  • 7. 9. Load time Everybody hates a website that takes ages to load. Tips to make page load times more effective include optimising image sizes (size and scale), combining code into a central CSS or JavaScript file (this reduces HTTP requests) and minify HTML, CSS, JavaScript (compressed to speed up their load time). 10: Mobile friendly It is now commonplace to access websites from multiple devices with multiple screen sizes, so it is important to consider if your website is mobile friendly. If your website is not mobile friendly, you can either rebuild it in a responsive layout (this means your website will adjust to different screen widths) or you can build a dedicated mobile site (a separate website optimised specifically for mobile users).
  • 8. Create a beautiful and functional website, simply by keeping these design elements in mind. Have you got a website design that needs reviewing or optimising? Or perhaps, you are planning a website and you are looking to get the design right from the ground up. Either way, these principles of effective web design can help your website be more engaging, useful, and memorable for visitors.
  • 9. Visit us @ www.innothoughts.com Mail us @ innothoughtspune@gmail.com