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 - pf
Chapter 2  | Website design & development - pfChapter 2  | Website design & development - pf
Chapter 2 | Website design & development - pfMikaStuttaford
 

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 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 - pf
Chapter 2  | Website design & development - pfChapter 2  | Website design & development - pf
Chapter 2 | Website design & development - pf
 

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

Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Farhan Tariq
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfLoriGlavin3
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfpanagenda
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .Alan Dix
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxLoriGlavin3
 
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
 
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
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxLoriGlavin3
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsNathaniel Shimoni
 
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
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesKari Kakkonen
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfIngrid Airi González
 
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
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityIES VE
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxLoriGlavin3
 
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...AliaaTarek5
 
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
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Strongerpanagenda
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch TuesdayIvanti
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxLoriGlavin3
 

Último (20)

Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdf
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
 
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
 
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
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directions
 
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
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examples
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdf
 
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.
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a reality
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
 
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
 
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
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch Tuesday
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
 

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.