SlideShare une entreprise Scribd logo
1  sur  34
Visual Design Principles 1
Don’t make users think
• Interfaces should be:
  – Self-evident
  – Obvious
  – Self-explanatory
Things that make us Think
• Names (buttons, links)
• Clickability
• Choices
Principles 101
•   Visual hierarchy
•   Conventions
•   Break up pages into clearly defined areas
•   Clickability
•   Reduce noise
http://webstyleguide.com
http://www.chriscmerritt.com/




                                                      http://www.chriscmerritt.com
http://designshack.co.uk/articles/graphics/how-to-use-visual-hierarchy-in-web-design
1

                               2
http://designshack.co.uk/articles/graphics/how-to-use-visual-hierarchy-in-web-design
Visual hierarchy
• Visual weight            • Communicate
• Focal point                messages
• Balance                  • Take action
                           • Organize information




  Visual hierarchy tells a story with a beginning, an
                     end, a point
visual designprinciples_1
visual designprinciples_1

Contenu connexe

En vedette

07 mental models-ift_lecture
07 mental models-ift_lecture07 mental models-ift_lecture
07 mental models-ift_lectureDr. V Vorvoreanu
 
Healthy Body Life
Healthy Body LifeHealthy Body Life
Healthy Body Lifecli0005
 
Mary Beth And John Tinker Case Presentation
Mary Beth And John Tinker Case PresentationMary Beth And John Tinker Case Presentation
Mary Beth And John Tinker Case Presentationdwodtke
 
Mcf Academy Book Low Rez
Mcf Academy Book Low RezMcf Academy Book Low Rez
Mcf Academy Book Low Rezgiannafarina
 
Lithium Likes to Loves Tour Sydney
Lithium Likes to Loves Tour SydneyLithium Likes to Loves Tour Sydney
Lithium Likes to Loves Tour SydneyLithium
 
Axiis Launch at 360 Flex
Axiis Launch at 360 FlexAxiis Launch at 360 Flex
Axiis Launch at 360 Flextwgonzalez
 
3D Foot Scanning for Custom Orthotics
3D Foot Scanning for Custom Orthotics3D Foot Scanning for Custom Orthotics
3D Foot Scanning for Custom Orthotics3D3 Solutions
 
Social Business Advantage
Social Business AdvantageSocial Business Advantage
Social Business AdvantageLithium
 

En vedette (16)

15 metaphor typography
15 metaphor typography15 metaphor typography
15 metaphor typography
 
07 mental models-ift_lecture
07 mental models-ift_lecture07 mental models-ift_lecture
07 mental models-ift_lecture
 
Audit
AuditAudit
Audit
 
Healthy Body Life
Healthy Body LifeHealthy Body Life
Healthy Body Life
 
Mary Beth And John Tinker Case Presentation
Mary Beth And John Tinker Case PresentationMary Beth And John Tinker Case Presentation
Mary Beth And John Tinker Case Presentation
 
Emergency preparedness
Emergency preparednessEmergency preparedness
Emergency preparedness
 
Mcf Academy Book Low Rez
Mcf Academy Book Low RezMcf Academy Book Low Rez
Mcf Academy Book Low Rez
 
Ms in cgt very short
Ms in cgt very shortMs in cgt very short
Ms in cgt very short
 
usability testingplanning
usability testingplanningusability testingplanning
usability testingplanning
 
Procurement
ProcurementProcurement
Procurement
 
Lithium Likes to Loves Tour Sydney
Lithium Likes to Loves Tour SydneyLithium Likes to Loves Tour Sydney
Lithium Likes to Loves Tour Sydney
 
Axiis Launch at 360 Flex
Axiis Launch at 360 FlexAxiis Launch at 360 Flex
Axiis Launch at 360 Flex
 
excise interface design
excise interface designexcise interface design
excise interface design
 
11 info architecture
11 info architecture11 info architecture
11 info architecture
 
3D Foot Scanning for Custom Orthotics
3D Foot Scanning for Custom Orthotics3D Foot Scanning for Custom Orthotics
3D Foot Scanning for Custom Orthotics
 
Social Business Advantage
Social Business AdvantageSocial Business Advantage
Social Business Advantage
 

Similaire à visual designprinciples_1

Designing Intuitive SharePoint Sites: The Science of "Easy to Use"
Designing Intuitive SharePoint Sites: The Science of "Easy to Use" Designing Intuitive SharePoint Sites: The Science of "Easy to Use"
Designing Intuitive SharePoint Sites: The Science of "Easy to Use" Marcy Kellar
 
Multimedia Development Lifecycle
Multimedia Development LifecycleMultimedia Development Lifecycle
Multimedia Development LifecycleLeoni Rahmawati
 
Developing an effective website captovate 2012_hs_v8
Developing an effective website captovate 2012_hs_v8Developing an effective website captovate 2012_hs_v8
Developing an effective website captovate 2012_hs_v8Captovate
 
User experience design strategies
User experience design strategiesUser experience design strategies
User experience design strategiesIsha Suri
 
Introduction to SharePoint Information Architecture and Branding
Introduction to SharePoint Information Architecture and BrandingIntroduction to SharePoint Information Architecture and Branding
Introduction to SharePoint Information Architecture and BrandingDerek Cash-Peterson
 
The benefit of iconography in ux
The benefit of iconography in uxThe benefit of iconography in ux
The benefit of iconography in uxEntropii
 
IUE Integrating UI Design Specs
IUE Integrating UI Design SpecsIUE Integrating UI Design Specs
IUE Integrating UI Design SpecsKeith Instone
 
Multimedia phase 1
Multimedia phase 1Multimedia phase 1
Multimedia phase 1Online
 
Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)
Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)
Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)Four Kitchens
 
Don't Design Websites. Design Web SYSTEMS! (DrupalCon London 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon London 2011)Don't Design Websites. Design Web SYSTEMS! (DrupalCon London 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon London 2011)Four Kitchens
 
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)Four Kitchens
 
Content First, Designing in the Browser - UX camp CPH
Content First, Designing in the Browser -  UX camp CPHContent First, Designing in the Browser -  UX camp CPH
Content First, Designing in the Browser - UX camp CPHMette Schou Andersen
 
Elaine Wherry, Meebo: What Web Application Design Can Learn from the Harpsichord
Elaine Wherry, Meebo: What Web Application Design Can Learn from the HarpsichordElaine Wherry, Meebo: What Web Application Design Can Learn from the Harpsichord
Elaine Wherry, Meebo: What Web Application Design Can Learn from the HarpsichordBayCHI
 
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Chicago 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Chicago 2011)Don't Design Websites. Design Web SYSTEMS! (DrupalCon Chicago 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Chicago 2011)Four Kitchens
 
Aaom 2012 smith and wagner
Aaom 2012 smith and wagnerAaom 2012 smith and wagner
Aaom 2012 smith and wagnerNomienredes
 
Agile Dev and Lean UX
Agile Dev and Lean UXAgile Dev and Lean UX
Agile Dev and Lean UXKarri Ojanen
 
AxonShare - A Collaborative Content Management Solution for Knowledge Sharing
AxonShare - A Collaborative Content Management Solution for Knowledge SharingAxonShare - A Collaborative Content Management Solution for Knowledge Sharing
AxonShare - A Collaborative Content Management Solution for Knowledge SharingInfoAxon Technologies Limited
 
Chapter 2 | Website design & development
Chapter 2  | Website design & developmentChapter 2  | Website design & development
Chapter 2 | Website design & developmentMikaStuttaford
 

Similaire à visual designprinciples_1 (20)

Designing Intuitive SharePoint Sites: The Science of "Easy to Use"
Designing Intuitive SharePoint Sites: The Science of "Easy to Use" Designing Intuitive SharePoint Sites: The Science of "Easy to Use"
Designing Intuitive SharePoint Sites: The Science of "Easy to Use"
 
Multimedia Development Lifecycle
Multimedia Development LifecycleMultimedia Development Lifecycle
Multimedia Development Lifecycle
 
Developing an effective website captovate 2012_hs_v8
Developing an effective website captovate 2012_hs_v8Developing an effective website captovate 2012_hs_v8
Developing an effective website captovate 2012_hs_v8
 
User experience design strategies
User experience design strategiesUser experience design strategies
User experience design strategies
 
Responsive Design and Joomla!
Responsive Design and Joomla!Responsive Design and Joomla!
Responsive Design and Joomla!
 
Introduction to SharePoint Information Architecture and Branding
Introduction to SharePoint Information Architecture and BrandingIntroduction to SharePoint Information Architecture and Branding
Introduction to SharePoint Information Architecture and Branding
 
The benefit of iconography in ux
The benefit of iconography in uxThe benefit of iconography in ux
The benefit of iconography in ux
 
IUE Integrating UI Design Specs
IUE Integrating UI Design SpecsIUE Integrating UI Design Specs
IUE Integrating UI Design Specs
 
Multimedia phase 1
Multimedia phase 1Multimedia phase 1
Multimedia phase 1
 
Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)
Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)
Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)
 
Don't Design Websites. Design Web SYSTEMS! (DrupalCon London 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon London 2011)Don't Design Websites. Design Web SYSTEMS! (DrupalCon London 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon London 2011)
 
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
 
Content First, Designing in the Browser - UX camp CPH
Content First, Designing in the Browser -  UX camp CPHContent First, Designing in the Browser -  UX camp CPH
Content First, Designing in the Browser - UX camp CPH
 
Elaine Wherry, Meebo: What Web Application Design Can Learn from the Harpsichord
Elaine Wherry, Meebo: What Web Application Design Can Learn from the HarpsichordElaine Wherry, Meebo: What Web Application Design Can Learn from the Harpsichord
Elaine Wherry, Meebo: What Web Application Design Can Learn from the Harpsichord
 
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Chicago 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Chicago 2011)Don't Design Websites. Design Web SYSTEMS! (DrupalCon Chicago 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Chicago 2011)
 
Aaom 2012 smith and wagner
Aaom 2012 smith and wagnerAaom 2012 smith and wagner
Aaom 2012 smith and wagner
 
Agile Dev and Lean UX
Agile Dev and Lean UXAgile Dev and Lean UX
Agile Dev and Lean UX
 
AxonShare Intro
AxonShare IntroAxonShare Intro
AxonShare Intro
 
AxonShare - A Collaborative Content Management Solution for Knowledge Sharing
AxonShare - A Collaborative Content Management Solution for Knowledge SharingAxonShare - A Collaborative Content Management Solution for Knowledge Sharing
AxonShare - A Collaborative Content Management Solution for Knowledge Sharing
 
Chapter 2 | Website design & development
Chapter 2  | Website design & developmentChapter 2  | Website design & development
Chapter 2 | Website design & development
 

Plus de Dr. V Vorvoreanu

DIA2 Design requirements presentation personas
DIA2 Design requirements presentation personasDIA2 Design requirements presentation personas
DIA2 Design requirements presentation personasDr. V Vorvoreanu
 
07 principles 1 affordance
07 principles 1 affordance07 principles 1 affordance
07 principles 1 affordanceDr. V Vorvoreanu
 
HCDD for ASEE 2015 presentation
HCDD for ASEE 2015 presentationHCDD for ASEE 2015 presentation
HCDD for ASEE 2015 presentationDr. V Vorvoreanu
 
Responsive design UX intro
Responsive design UX introResponsive design UX intro
Responsive design UX introDr. V Vorvoreanu
 
Attention info scent recognition vs recall
Attention info scent recognition vs recallAttention info scent recognition vs recall
Attention info scent recognition vs recallDr. V Vorvoreanu
 
03 usability def designprocess
03 usability def designprocess03 usability def designprocess
03 usability def designprocessDr. V Vorvoreanu
 
UX Conceptual design - sketches, wireframes, mockups, prototypes
UX Conceptual design - sketches, wireframes, mockups, prototypesUX Conceptual design - sketches, wireframes, mockups, prototypes
UX Conceptual design - sketches, wireframes, mockups, prototypesDr. V Vorvoreanu
 
UX user-centered design process overview
UX user-centered design process overviewUX user-centered design process overview
UX user-centered design process overviewDr. V Vorvoreanu
 
26 social interaction design
26 social interaction design26 social interaction design
26 social interaction designDr. V Vorvoreanu
 
Sketches wireframes mockups prototypes
Sketches wireframes mockups prototypesSketches wireframes mockups prototypes
Sketches wireframes mockups prototypesDr. V Vorvoreanu
 

Plus de Dr. V Vorvoreanu (20)

Dia2 tues persona
Dia2 tues persona Dia2 tues persona
Dia2 tues persona
 
Dia2 sketches
Dia2 sketchesDia2 sketches
Dia2 sketches
 
DIA2 Design requirements presentation personas
DIA2 Design requirements presentation personasDIA2 Design requirements presentation personas
DIA2 Design requirements presentation personas
 
gestalt principles cats
gestalt principles catsgestalt principles cats
gestalt principles cats
 
07 principles 1 affordance
07 principles 1 affordance07 principles 1 affordance
07 principles 1 affordance
 
HCDD for ASEE 2015 presentation
HCDD for ASEE 2015 presentationHCDD for ASEE 2015 presentation
HCDD for ASEE 2015 presentation
 
Controls
ControlsControls
Controls
 
Responsive design UX intro
Responsive design UX introResponsive design UX intro
Responsive design UX intro
 
Attention info scent recognition vs recall
Attention info scent recognition vs recallAttention info scent recognition vs recall
Attention info scent recognition vs recall
 
03 bad usability kills
03 bad usability kills03 bad usability kills
03 bad usability kills
 
03 usability def designprocess
03 usability def designprocess03 usability def designprocess
03 usability def designprocess
 
Information architecture
Information architectureInformation architecture
Information architecture
 
UX Conceptual design - sketches, wireframes, mockups, prototypes
UX Conceptual design - sketches, wireframes, mockups, prototypesUX Conceptual design - sketches, wireframes, mockups, prototypes
UX Conceptual design - sketches, wireframes, mockups, prototypes
 
Cgt 256 course review
Cgt 256 course reviewCgt 256 course review
Cgt 256 course review
 
Cross channel ux
Cross channel uxCross channel ux
Cross channel ux
 
UX user-centered design process overview
UX user-centered design process overviewUX user-centered design process overview
UX user-centered design process overview
 
26 social interaction design
26 social interaction design26 social interaction design
26 social interaction design
 
Purdue MS degree CGT
Purdue MS degree CGTPurdue MS degree CGT
Purdue MS degree CGT
 
Sketches wireframes mockups prototypes
Sketches wireframes mockups prototypesSketches wireframes mockups prototypes
Sketches wireframes mockups prototypes
 
11 info architecture-2014
11 info architecture-201411 info architecture-2014
11 info architecture-2014
 

Dernier

Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUK Journal
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CVKhem
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking MenDelhi Call girls
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationRadu Cotescu
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Igalia
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...Martijn de Jong
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptxHampshireHUG
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking MenDelhi Call girls
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Servicegiselly40
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationMichael W. Hawkins
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024The Digital Insurer
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024Results
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationSafe Software
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxKatpro Technologies
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonetsnaman860154
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?Antenna Manufacturer Coco
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessPixlogix Infotech
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slidevu2urc
 

Dernier (20)

Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 

visual designprinciples_1

  • 2. Don’t make users think • Interfaces should be: – Self-evident – Obvious – Self-explanatory
  • 3. Things that make us Think • Names (buttons, links) • Clickability • Choices
  • 4.
  • 5.
  • 6.
  • 7. Principles 101 • Visual hierarchy • Conventions • Break up pages into clearly defined areas • Clickability • Reduce noise
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25. http://www.chriscmerritt.com/ http://www.chriscmerritt.com http://designshack.co.uk/articles/graphics/how-to-use-visual-hierarchy-in-web-design
  • 26. 1 2 http://designshack.co.uk/articles/graphics/how-to-use-visual-hierarchy-in-web-design
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32. Visual hierarchy • Visual weight • Communicate • Focal point messages • Balance • Take action • Organize information Visual hierarchy tells a story with a beginning, an end, a point

Notes de l'éditeur

  1. Clickability – is clickable, but doesn’t look it
  2. Clickability – logo is not clickable, but it should be
  3. Weather Channel IPad App doesn’t indicate clickability. When you touch the field, detailed info appears about hourly, 10 day weather
  4. No visual hierarchy vs. visual hierarchy. It guides the eye, points out what to look at first, second, third.
  5. Visual hierarchy; breaking up pages into clearly defined areas. But no clear Z pattern
  6. Visual hierarchy; breaking up pages into clearly defined areas
  7. Visual hierarch with color
  8. Eyes always draw interest. Then the repeated shapes suggest some pattern/order in the chaos. A face with eyes will always draw attention.
  9. United iPhone app. Note areas, visual hierarchy. How does the app indicate clickability? How do you know what’s most important? Divided into top for regular navigation and bottom for important, immediate actions.