SlideShare una empresa de Scribd logo
1 de 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

Más contenido relacionado

Destacado

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
 

Destacado (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
 

Similar a 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
 

Similar a 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 - 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
 
AxonShare Intro
AxonShare IntroAxonShare Intro
AxonShare Intro
 
Chapter 2 | Website design & development
Chapter 2  | Website design & developmentChapter 2  | Website design & development
Chapter 2 | Website design & development
 

Más 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
 

Más 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
 

Último

Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Jeffrey Haguewood
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProduct Anonymous
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfsudhanshuwaghmare1
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...Zilliz
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Drew Madelung
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...DianaGray10
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?Igalia
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxRustici Software
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)wesley chun
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Zilliz
 
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot ModelNavi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot ModelDeepika Singh
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024The Digital Insurer
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Scriptwesley chun
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc
 
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu SubbuApidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbuapidays
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businesspanagenda
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDropbox
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MIND CTI
 

Último (20)

Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot ModelNavi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu SubbuApidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 

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

Notas del editor

  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.