SlideShare a Scribd company logo
1 of 61
10 Design and Layout Principles Guaranteed to Improve Your Website By Lauren Martin
Call to Action: Get attention on your website’s goal. Should tie in with the goal of your website.  The number one thing you want your visitors to do. Use contrast and size to catch attention. The action text should be clearand obvious. Located near the top of page above the fold.
cc  Thomas Hawk
Layout: Importance based structure and scan-ability. Convey information about what’s important – design your centerpiece. Know how to use a grid and keep your design on a grid Lead the user into content there looking for. Improves scan-ability. Use header tags (h1, h2, h3, etc…) appropriately. Provides visual breaks, groups, and chunks. Use alignment, date, subject, etc to create sections. Size and color to convey priority and importance.
cc  Clover_1
cc   birdfarm
cc   trainman74
Navigation: Show where you can go. Take advantage of standards, and place the navigation near the top, or down the left side. Clean, clear, simple labels, easy to read and see. Highlight the visitors current location vs. other locations. Provide feedback when in sub-levels as to the visitors location and how to get back. Should be easy to see how much information the site offers, how deep each level is.
cc   M.Markus
cc   eflon
Color and Graphics: We are attracted to pretty things. Put thought into your graphics.  Stick to a color scheme. Avoid overly generic clip art just to add to the page. Every image and graphic should have a specific purpose. Stick to a theme or consistency in appearance. (all sketchy, or all photos etc) Focus on your product or offering.
Affordance: Show what you can do. Links should not be the same color as your text Buttons should appear beveled or have a hover to differentiate them from plain graphics. Form items should be grayed out if they are not clickable. Mouse icon should change to indicate when something is clickable. Textures and patterns can imply grips when things can be dragged.
cc   Dave Hoover
Assistance: Don’t leave them hanging. Provide an FAQ or help section Try to avoid allowing errors, but when they occur explain: What’s wrong What you need from the user How they need to do it Instructions should be clear, specific and to the point. Provide good defaults and constant feedback.
Mental Models: Think like they think. Avoid fancy, industry, or techie terms. Use Layman’s terms. When you buy things in a store you put them in a cart, use a “cart” icon to represent selected items for purchase. Design concepts to be consistent with how they work in everyday life. Similar in functionality, language and appearance.
cc   Marc Amos
Keep it Simple: The simplest solution is best. 80/20 Rule Avoid excessive text or explanation Forms shouldn’t ask for unnecessarydditional  information. Reduce clutter, and appreciate white space like a pause in a sentence. Be upfront, clear, and to the point. The rest is unnecessary. Focus on the core goals and tasks.
Accessibility: Making it work for everyone. Use ALT tags on images for screen readers Ensure HTML is ordered by hierarchy. Improve readability for those with low-vision through size and contrast Options to increase font size Avoid pop-ups Use proper input-field/labeling  Don’t use color as a sole indicator for differentiation
Delight: Put a smile on my face. Once you have everything else figured out, add a smile. Niceties that are un-expected, a cute line of text, a compliment when a photo is uploaded, etc. Little fun interactions used sparingly. Take the user away from the mundane.  Pleasant surprises.
10 Principles for Layout & Design Call to Action Structured Layout Clear Navigation Attractive and Related Colors and Graphics Proper Affordances Friendly Assistance Proper Mental Model Association Keep it Simple Ensure it’s Accessible Delight your Visitors
Lauren Martin www.Sitemotif.com Twitter / Slideshare: Lorielue cc   woodleywonderworks

More Related Content

What's hot

Web sitepresentation1
Web sitepresentation1Web sitepresentation1
Web sitepresentation1h1pC7xKc
 
5 Steps to Maximize Conversions and Deliver an Experience Your Customers W…
5 Steps to Maximize Conversions and Deliver an Experience Your Customers W…5 Steps to Maximize Conversions and Deliver an Experience Your Customers W…
5 Steps to Maximize Conversions and Deliver an Experience Your Customers W…Act-On Software
 
Designbriefing
DesignbriefingDesignbriefing
DesignbriefingOnno Groen
 
3 Registration Page Mistakes That Leave Your Workshop and Seminar Rooms Empty
3 Registration Page Mistakes That Leave Your Workshop and Seminar Rooms Empty3 Registration Page Mistakes That Leave Your Workshop and Seminar Rooms Empty
3 Registration Page Mistakes That Leave Your Workshop and Seminar Rooms EmptyDaphne Bousquet
 
Writing for web class2
Writing for web class2Writing for web class2
Writing for web class2Anna Polud
 
WordPress Navigation, Menus and More
WordPress Navigation, Menus and MoreWordPress Navigation, Menus and More
WordPress Navigation, Menus and Moremwfordesigns
 
Persuading with Powerpoint
Persuading with PowerpointPersuading with Powerpoint
Persuading with PowerpointSeth Familian
 
Heat Up Your Emails: How to Make Your Emails Sizzle
Heat Up Your Emails: How to Make Your Emails Sizzle Heat Up Your Emails: How to Make Your Emails Sizzle
Heat Up Your Emails: How to Make Your Emails Sizzle HighRoad Solution
 
Audit of site usability, SEO
Audit of site usability, SEOAudit of site usability, SEO
Audit of site usability, SEOAlex Dmitriev
 
Scratch Me Not Competition
Scratch Me Not CompetitionScratch Me Not Competition
Scratch Me Not CompetitionAron Allen
 
5 Tips for Creating a Great Website Design | DMAC | Boca Raton, FL
5 Tips for Creating a Great Website Design | DMAC | Boca Raton, FL5 Tips for Creating a Great Website Design | DMAC | Boca Raton, FL
5 Tips for Creating a Great Website Design | DMAC | Boca Raton, FLDigital Media Arts College
 
Ten Website Mistakes and How to Fix Them
Ten Website Mistakes and How to Fix ThemTen Website Mistakes and How to Fix Them
Ten Website Mistakes and How to Fix ThemMike Newman
 
Top 10 tips for maximising accessibility - breakfast briefing March 2016
Top 10 tips for maximising accessibility - breakfast briefing March 2016Top 10 tips for maximising accessibility - breakfast briefing March 2016
Top 10 tips for maximising accessibility - breakfast briefing March 2016User Vision
 
The Importance of Listening to Your Customers
The Importance of Listening to Your CustomersThe Importance of Listening to Your Customers
The Importance of Listening to Your CustomersDrift
 
20 Surefire Ways to Generate More Qualified Leads
20 Surefire Ways to Generate More Qualified Leads 20 Surefire Ways to Generate More Qualified Leads
20 Surefire Ways to Generate More Qualified Leads SA Management
 
How to Repurpose Your Content to Drive Traffic
How to Repurpose Your Content to Drive TrafficHow to Repurpose Your Content to Drive Traffic
How to Repurpose Your Content to Drive TrafficLeslie Samuel
 

What's hot (20)

Web sitepresentation1
Web sitepresentation1Web sitepresentation1
Web sitepresentation1
 
Portfolio/Test
Portfolio/TestPortfolio/Test
Portfolio/Test
 
5 Steps to Maximize Conversions and Deliver an Experience Your Customers W…
5 Steps to Maximize Conversions and Deliver an Experience Your Customers W…5 Steps to Maximize Conversions and Deliver an Experience Your Customers W…
5 Steps to Maximize Conversions and Deliver an Experience Your Customers W…
 
Designbriefing
DesignbriefingDesignbriefing
Designbriefing
 
Landing critique-toronto-2013
Landing critique-toronto-2013Landing critique-toronto-2013
Landing critique-toronto-2013
 
3 Registration Page Mistakes That Leave Your Workshop and Seminar Rooms Empty
3 Registration Page Mistakes That Leave Your Workshop and Seminar Rooms Empty3 Registration Page Mistakes That Leave Your Workshop and Seminar Rooms Empty
3 Registration Page Mistakes That Leave Your Workshop and Seminar Rooms Empty
 
Writing for web class2
Writing for web class2Writing for web class2
Writing for web class2
 
WordPress Navigation, Menus and More
WordPress Navigation, Menus and MoreWordPress Navigation, Menus and More
WordPress Navigation, Menus and More
 
Persuading with Powerpoint
Persuading with PowerpointPersuading with Powerpoint
Persuading with Powerpoint
 
Heat Up Your Emails: How to Make Your Emails Sizzle
Heat Up Your Emails: How to Make Your Emails Sizzle Heat Up Your Emails: How to Make Your Emails Sizzle
Heat Up Your Emails: How to Make Your Emails Sizzle
 
Audit of site usability, SEO
Audit of site usability, SEOAudit of site usability, SEO
Audit of site usability, SEO
 
Scratch Me Not Competition
Scratch Me Not CompetitionScratch Me Not Competition
Scratch Me Not Competition
 
5 Tips for Creating a Great Website Design | DMAC | Boca Raton, FL
5 Tips for Creating a Great Website Design | DMAC | Boca Raton, FL5 Tips for Creating a Great Website Design | DMAC | Boca Raton, FL
5 Tips for Creating a Great Website Design | DMAC | Boca Raton, FL
 
Anatomy Of Making Money Online
Anatomy Of Making Money OnlineAnatomy Of Making Money Online
Anatomy Of Making Money Online
 
Sayan Portfolio
Sayan PortfolioSayan Portfolio
Sayan Portfolio
 
Ten Website Mistakes and How to Fix Them
Ten Website Mistakes and How to Fix ThemTen Website Mistakes and How to Fix Them
Ten Website Mistakes and How to Fix Them
 
Top 10 tips for maximising accessibility - breakfast briefing March 2016
Top 10 tips for maximising accessibility - breakfast briefing March 2016Top 10 tips for maximising accessibility - breakfast briefing March 2016
Top 10 tips for maximising accessibility - breakfast briefing March 2016
 
The Importance of Listening to Your Customers
The Importance of Listening to Your CustomersThe Importance of Listening to Your Customers
The Importance of Listening to Your Customers
 
20 Surefire Ways to Generate More Qualified Leads
20 Surefire Ways to Generate More Qualified Leads 20 Surefire Ways to Generate More Qualified Leads
20 Surefire Ways to Generate More Qualified Leads
 
How to Repurpose Your Content to Drive Traffic
How to Repurpose Your Content to Drive TrafficHow to Repurpose Your Content to Drive Traffic
How to Repurpose Your Content to Drive Traffic
 

Viewers also liked

10 Design & Layout Principles Guaranteed To Improve
10 Design & Layout Principles Guaranteed To Improve10 Design & Layout Principles Guaranteed To Improve
10 Design & Layout Principles Guaranteed To ImproveLauren Martin
 
Basic layout principles
Basic layout principlesBasic layout principles
Basic layout principlesSherwin Manual
 
Behavior and engagement
Behavior and engagementBehavior and engagement
Behavior and engagementLauren Martin
 
Plan601 e session 2 lesson
Plan601 e session 2 lessonPlan601 e session 2 lesson
Plan601 e session 2 lessonrkottam
 
Imaging and Design for Online Environment
Imaging and Design for Online EnvironmentImaging and Design for Online Environment
Imaging and Design for Online EnvironmentRichard Meriveles
 
Introduction about wireframing and responsive webdesign
Introduction about wireframing and responsive webdesignIntroduction about wireframing and responsive webdesign
Introduction about wireframing and responsive webdesignipmindthegap
 
Google's Principle's of Mobile Website Design
Google's Principle's of Mobile Website DesignGoogle's Principle's of Mobile Website Design
Google's Principle's of Mobile Website DesignMrkt360 Inc.
 
Next Steps in Responsive Design
Next Steps in Responsive DesignNext Steps in Responsive Design
Next Steps in Responsive DesignJustin Avery
 
Webdesign New
Webdesign NewWebdesign New
Webdesign Newlyngdoh
 
Interactive Graphics using Javascript, HTML5 and CSS3
Interactive Graphics using Javascript, HTML5 and CSS3Interactive Graphics using Javascript, HTML5 and CSS3
Interactive Graphics using Javascript, HTML5 and CSS3Lee Lundrigan
 
Basic Design : Elements & Principles
Basic Design : Elements & PrinciplesBasic Design : Elements & Principles
Basic Design : Elements & PrinciplesSujit Jadhav
 
8 activities of human centered design (HCD)
8 activities of human centered design (HCD)8 activities of human centered design (HCD)
8 activities of human centered design (HCD)di8it
 
CSS Dasar #6 : Background
CSS Dasar #6 : BackgroundCSS Dasar #6 : Background
CSS Dasar #6 : BackgroundSandhika Galih
 
CSS Layout Techniques
CSS Layout TechniquesCSS Layout Techniques
CSS Layout TechniquesHarshal Patil
 
How to Make HTML and CSS Files
How to Make HTML and CSS FilesHow to Make HTML and CSS Files
How to Make HTML and CSS FilesLearningNerd
 

Viewers also liked (20)

10 Design & Layout Principles Guaranteed To Improve
10 Design & Layout Principles Guaranteed To Improve10 Design & Layout Principles Guaranteed To Improve
10 Design & Layout Principles Guaranteed To Improve
 
Basic layout principles
Basic layout principlesBasic layout principles
Basic layout principles
 
Killer form design
Killer form designKiller form design
Killer form design
 
Behavior and engagement
Behavior and engagementBehavior and engagement
Behavior and engagement
 
Plan601 e session 2 lesson
Plan601 e session 2 lessonPlan601 e session 2 lesson
Plan601 e session 2 lesson
 
Automated testing
Automated testingAutomated testing
Automated testing
 
Imaging and Design for Online Environment
Imaging and Design for Online EnvironmentImaging and Design for Online Environment
Imaging and Design for Online Environment
 
Ppt autocad
Ppt autocadPpt autocad
Ppt autocad
 
Introduction about wireframing and responsive webdesign
Introduction about wireframing and responsive webdesignIntroduction about wireframing and responsive webdesign
Introduction about wireframing and responsive webdesign
 
Google's Principle's of Mobile Website Design
Google's Principle's of Mobile Website DesignGoogle's Principle's of Mobile Website Design
Google's Principle's of Mobile Website Design
 
Lecture3
Lecture3Lecture3
Lecture3
 
Next Steps in Responsive Design
Next Steps in Responsive DesignNext Steps in Responsive Design
Next Steps in Responsive Design
 
Webdesign New
Webdesign NewWebdesign New
Webdesign New
 
Interactive Graphics using Javascript, HTML5 and CSS3
Interactive Graphics using Javascript, HTML5 and CSS3Interactive Graphics using Javascript, HTML5 and CSS3
Interactive Graphics using Javascript, HTML5 and CSS3
 
Basic Design : Elements & Principles
Basic Design : Elements & PrinciplesBasic Design : Elements & Principles
Basic Design : Elements & Principles
 
8 activities of human centered design (HCD)
8 activities of human centered design (HCD)8 activities of human centered design (HCD)
8 activities of human centered design (HCD)
 
CSS Dasar #6 : Background
CSS Dasar #6 : BackgroundCSS Dasar #6 : Background
CSS Dasar #6 : Background
 
CSS Layout Techniques
CSS Layout TechniquesCSS Layout Techniques
CSS Layout Techniques
 
Motivating action
Motivating actionMotivating action
Motivating action
 
How to Make HTML and CSS Files
How to Make HTML and CSS FilesHow to Make HTML and CSS Files
How to Make HTML and CSS Files
 

Similar to 10 Design Principles to Improve Your Website

Branding, Design & Email Marketing Basics
Branding, Design & Email Marketing BasicsBranding, Design & Email Marketing Basics
Branding, Design & Email Marketing BasicsDeck Builder Marketers
 
Design & Usability Basics
Design & Usability BasicsDesign & Usability Basics
Design & Usability Basicselmorandall
 
Week 202 design skills
Week 202 design skillsWeek 202 design skills
Week 202 design skillsSteve
 
Website Design Part 1
Website Design Part 1Website Design Part 1
Website Design Part 1Eric Legg
 
Website Design2
Website Design2Website Design2
Website Design2Eric Legg
 
How to create high converting landing pages
How to create high converting landing pagesHow to create high converting landing pages
How to create high converting landing pagesLawrence Berezin
 
The design part of interaction design
The design part of interaction design The design part of interaction design
The design part of interaction design Michael Dain
 
Web Design & Internet Marketing Basics - Brody Dorland, Something Creative, Inc.
Web Design & Internet Marketing Basics - Brody Dorland, Something Creative, Inc.Web Design & Internet Marketing Basics - Brody Dorland, Something Creative, Inc.
Web Design & Internet Marketing Basics - Brody Dorland, Something Creative, Inc.Brody Dorland
 
Exposure=Imapact: Library Marketing, Promotion and Branding
Exposure=Imapact: Library Marketing, Promotion and BrandingExposure=Imapact: Library Marketing, Promotion and Branding
Exposure=Imapact: Library Marketing, Promotion and BrandingRene Erlandson
 
Typography and Colors for GUI Designers
Typography and Colors for GUI DesignersTypography and Colors for GUI Designers
Typography and Colors for GUI DesignersRavi Bhadauria
 
Unit 3: Lesson 3
Unit 3: Lesson 3Unit 3: Lesson 3
Unit 3: Lesson 3Neil James
 
Twf homepagedesign sb_okey
Twf homepagedesign sb_okeyTwf homepagedesign sb_okey
Twf homepagedesign sb_okeyLimeRed Studio
 
5 usability principles of your web design
5 usability principles of your web design5 usability principles of your web design
5 usability principles of your web designChristina Fernandezz
 
Week 5 - Sketching And Prototyping - 4
Week 5 - Sketching And Prototyping - 4Week 5 - Sketching And Prototyping - 4
Week 5 - Sketching And Prototyping - 4Stark State College
 

Similar to 10 Design Principles to Improve Your Website (20)

Branding, Design & Email Marketing Basics
Branding, Design & Email Marketing BasicsBranding, Design & Email Marketing Basics
Branding, Design & Email Marketing Basics
 
Design & Usability Basics
Design & Usability BasicsDesign & Usability Basics
Design & Usability Basics
 
Lecture 3
Lecture 3Lecture 3
Lecture 3
 
Web Site Design
Web Site DesignWeb Site Design
Web Site Design
 
Week 202 design skills
Week 202 design skillsWeek 202 design skills
Week 202 design skills
 
Website Design Part 1
Website Design Part 1Website Design Part 1
Website Design Part 1
 
Website Design2
Website Design2Website Design2
Website Design2
 
How to create high converting landing pages
How to create high converting landing pagesHow to create high converting landing pages
How to create high converting landing pages
 
The design part of interaction design
The design part of interaction design The design part of interaction design
The design part of interaction design
 
Web Design & Internet Marketing Basics - Brody Dorland, Something Creative, Inc.
Web Design & Internet Marketing Basics - Brody Dorland, Something Creative, Inc.Web Design & Internet Marketing Basics - Brody Dorland, Something Creative, Inc.
Web Design & Internet Marketing Basics - Brody Dorland, Something Creative, Inc.
 
WebBestPractices3
WebBestPractices3WebBestPractices3
WebBestPractices3
 
Web Usability
Web UsabilityWeb Usability
Web Usability
 
Exposure=Imapact: Library Marketing, Promotion and Branding
Exposure=Imapact: Library Marketing, Promotion and BrandingExposure=Imapact: Library Marketing, Promotion and Branding
Exposure=Imapact: Library Marketing, Promotion and Branding
 
Typography and Colors for GUI Designers
Typography and Colors for GUI DesignersTypography and Colors for GUI Designers
Typography and Colors for GUI Designers
 
Unit 3: Lesson 3
Unit 3: Lesson 3Unit 3: Lesson 3
Unit 3: Lesson 3
 
Twf homepagedesign sb_okey
Twf homepagedesign sb_okeyTwf homepagedesign sb_okey
Twf homepagedesign sb_okey
 
5 usability principles of your web design
5 usability principles of your web design5 usability principles of your web design
5 usability principles of your web design
 
Week 5 - Sketching And Prototyping - 4
Week 5 - Sketching And Prototyping - 4Week 5 - Sketching And Prototyping - 4
Week 5 - Sketching And Prototyping - 4
 
PowerPoint Tutorial
PowerPoint TutorialPowerPoint Tutorial
PowerPoint Tutorial
 
Proposed solutions
Proposed solutionsProposed solutions
Proposed solutions
 

Recently uploaded

A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxLoriGlavin3
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxLoriGlavin3
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii SoldatenkoFwdays
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxhariprasad279825
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.Curtis Poe
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brandgvaughan
 
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersRaghuram Pandurangan
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfMounikaPolabathina
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek SchlawackFwdays
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Manik S Magar
 
A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersA Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersNicole Novielli
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningLars Bell
 
What is Artificial Intelligence?????????
What is Artificial Intelligence?????????What is Artificial Intelligence?????????
What is Artificial Intelligence?????????blackmambaettijean
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr BaganFwdays
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024Stephanie Beckett
 
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rick Flair
 

Recently uploaded (20)

A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptx
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
 
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information Developers
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdf
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
 
A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersA Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software Developers
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine Tuning
 
What is Artificial Intelligence?????????
What is Artificial Intelligence?????????What is Artificial Intelligence?????????
What is Artificial Intelligence?????????
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
 
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...
 

10 Design Principles to Improve Your Website

  • 1. 10 Design and Layout Principles Guaranteed to Improve Your Website By Lauren Martin
  • 2. Call to Action: Get attention on your website’s goal. Should tie in with the goal of your website. The number one thing you want your visitors to do. Use contrast and size to catch attention. The action text should be clearand obvious. Located near the top of page above the fold.
  • 3. cc Thomas Hawk
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9. Layout: Importance based structure and scan-ability. Convey information about what’s important – design your centerpiece. Know how to use a grid and keep your design on a grid Lead the user into content there looking for. Improves scan-ability. Use header tags (h1, h2, h3, etc…) appropriately. Provides visual breaks, groups, and chunks. Use alignment, date, subject, etc to create sections. Size and color to convey priority and importance.
  • 11. cc birdfarm
  • 12. cc trainman74
  • 13.
  • 14.
  • 15.
  • 16.
  • 17. Navigation: Show where you can go. Take advantage of standards, and place the navigation near the top, or down the left side. Clean, clear, simple labels, easy to read and see. Highlight the visitors current location vs. other locations. Provide feedback when in sub-levels as to the visitors location and how to get back. Should be easy to see how much information the site offers, how deep each level is.
  • 18. cc M.Markus
  • 19. cc eflon
  • 20.
  • 21.
  • 22.
  • 23. Color and Graphics: We are attracted to pretty things. Put thought into your graphics. Stick to a color scheme. Avoid overly generic clip art just to add to the page. Every image and graphic should have a specific purpose. Stick to a theme or consistency in appearance. (all sketchy, or all photos etc) Focus on your product or offering.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28. Affordance: Show what you can do. Links should not be the same color as your text Buttons should appear beveled or have a hover to differentiate them from plain graphics. Form items should be grayed out if they are not clickable. Mouse icon should change to indicate when something is clickable. Textures and patterns can imply grips when things can be dragged.
  • 29. cc Dave Hoover
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35. Assistance: Don’t leave them hanging. Provide an FAQ or help section Try to avoid allowing errors, but when they occur explain: What’s wrong What you need from the user How they need to do it Instructions should be clear, specific and to the point. Provide good defaults and constant feedback.
  • 36.
  • 37.
  • 38.
  • 39. Mental Models: Think like they think. Avoid fancy, industry, or techie terms. Use Layman’s terms. When you buy things in a store you put them in a cart, use a “cart” icon to represent selected items for purchase. Design concepts to be consistent with how they work in everyday life. Similar in functionality, language and appearance.
  • 40. cc Marc Amos
  • 41.
  • 42.
  • 43.
  • 44. Keep it Simple: The simplest solution is best. 80/20 Rule Avoid excessive text or explanation Forms shouldn’t ask for unnecessarydditional information. Reduce clutter, and appreciate white space like a pause in a sentence. Be upfront, clear, and to the point. The rest is unnecessary. Focus on the core goals and tasks.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53. Accessibility: Making it work for everyone. Use ALT tags on images for screen readers Ensure HTML is ordered by hierarchy. Improve readability for those with low-vision through size and contrast Options to increase font size Avoid pop-ups Use proper input-field/labeling Don’t use color as a sole indicator for differentiation
  • 54.
  • 55.
  • 56. Delight: Put a smile on my face. Once you have everything else figured out, add a smile. Niceties that are un-expected, a cute line of text, a compliment when a photo is uploaded, etc. Little fun interactions used sparingly. Take the user away from the mundane. Pleasant surprises.
  • 57.
  • 58.
  • 59.
  • 60. 10 Principles for Layout & Design Call to Action Structured Layout Clear Navigation Attractive and Related Colors and Graphics Proper Affordances Friendly Assistance Proper Mental Model Association Keep it Simple Ensure it’s Accessible Delight your Visitors
  • 61. Lauren Martin www.Sitemotif.com Twitter / Slideshare: Lorielue cc woodleywonderworks

Editor's Notes

  1. What is McDonalds known for?