SlideShare una empresa de Scribd logo
1 de 11
Introduction to Design Principles and Usability
        Author
        M. Semeniuk
Visual Organization: Gestalt Principles
The right column of the blog has the Gestalt Principles defined under
Key Sources and Concepts
    – C.Chen Information Visualization
    – Definition example from Spokane Falls Community

   Proximity              Common Region               Connectedness




                                 Similarity




    Size                 Shape                Shade            Color
Elements on a Grid System
Placing elements on a grid system will help the user
    – Group Information
    – Align Elements and relax eye flow


      Elements on a Grid                  Elements not on a Grid
Quick Tips: Eye flow
Which shapes do you see first? Usually the user will see
• Large to Small
• Irregular to regular
• Dark to light shade
Quick Tips: Eye flow
Users usually look first at the center column
Quick Tips: Usability-Button
• Does a button express and function as a button?
• Does the user know if they select the button another action will
  perform a function?
• If those questions are true, the button has affordance.

Common buttons for Videos:




* Notice the grouping and the application of the Gestalt Principles.
Quick Tips: Usability-Text Alignment

• Accessible text alignment: know your audience – how do they read?
   – left alignment creates a visual line instead of a jagged edge as in
     right justified text and does not interrupted eye flow.
   – avoid centering main the information.
   – Try to keep the text length under 100 to 150 words per line
   – Consistency of fonts and sizes per grouping; example, headers
     the same size.



       Left Alignment                     Center & Right Justified Alignments

                                             Lorem ipsum dolor sit amet, consectetur
Lorem ipsum dolor sit amet, consectetur
                                                         adipiscing elit
adipiscing elit

Lorem ipsum dolor sit amet, consectetur      Lorem ipsum dolor sit amet, consectetur
adipiscing elit                                                       adipiscing elit
Quick Tips: Usability-Color
• Chromostereopsis is a visual vibration effect when the eye tries to
  adjust or accommodate extreme color spectrums; red and blues are
  side by side. This is very difficult for a user to maintain focus.

                          Example    Example


• Keep the color simple, non-competing and consider designing within
  color blindness parameters.

                          Example      Blue
White space allows the user to focus on the content.
No White Space for the User

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non
lectus odio, sagittis mattis nulla. Fusce at lectus erat, nec pulvinar
erat. Etiam vel urna purus. Maecenas massa nunc, ullamcorper non
dapibus a, facilisis a dui. Nam tempor arcu non lectus facilisis a dui
mass Vestibulum ultrices ipsum at lorem vestibulum et auctor nunc
vehicula. Morbi molestie sapien id libero gravida id iaculis lorem
Without white space it can confuse a user: Where is the focus?
Vestibulum ultrices ipsum at lorem vestibulum et auctor nunc vehicula.
Morbi molestie sapien id libero gravida id iaculis lorem aliquam.
Vivamus nulla neque, pharetra ut sodales quis, malesuada non
justo. Donec dapibus tincidunt posuere. Suspendisse mattis euismod
mattis diam. Vestibulum ultrices ipsum at lorem vestibulum et auctor
nunc vehicula. Morbi molestie sapien id libero gravida id iaculis lorem
aliquam. Vivamus nulla neque.
Please comment about your experiences on instructional technology or design
at http://inst-designonline.blogspot.com/

Más contenido relacionado

La actualidad más candente

Visual Explanations for Storytelling
Visual Explanations for StorytellingVisual Explanations for Storytelling
Visual Explanations for StorytellingConnie Malamed
 
How to improve your power point presentations
How to improve your power point presentationsHow to improve your power point presentations
How to improve your power point presentationsDr. Saad Saleh Al Ani
 
The Saga of Accessible Colors
The Saga of Accessible ColorsThe Saga of Accessible Colors
The Saga of Accessible ColorsTed Drake
 
Effective business presentation
Effective business presentation Effective business presentation
Effective business presentation Jush Shrestha
 
Power point presentations dos and don’ts
Power point presentations dos and don’tsPower point presentations dos and don’ts
Power point presentations dos and don’tsETRC
 
Power Point Presentations
Power Point PresentationsPower Point Presentations
Power Point Presentationsguestdd2cf8
 

La actualidad más candente (7)

Visual Explanations for Storytelling
Visual Explanations for StorytellingVisual Explanations for Storytelling
Visual Explanations for Storytelling
 
How to improve your power point presentations
How to improve your power point presentationsHow to improve your power point presentations
How to improve your power point presentations
 
The Saga of Accessible Colors
The Saga of Accessible ColorsThe Saga of Accessible Colors
The Saga of Accessible Colors
 
Effective business presentation
Effective business presentation Effective business presentation
Effective business presentation
 
Power point presentations dos and don’ts
Power point presentations dos and don’tsPower point presentations dos and don’ts
Power point presentations dos and don’ts
 
Design
DesignDesign
Design
 
Power Point Presentations
Power Point PresentationsPower Point Presentations
Power Point Presentations
 

Destacado

1 meu prontuario - logando no sistema
1   meu prontuario - logando no sistema1   meu prontuario - logando no sistema
1 meu prontuario - logando no sistemaLeonardo Alves
 
The Mobile Missionary's AppBox
The Mobile Missionary's AppBoxThe Mobile Missionary's AppBox
The Mobile Missionary's AppBoxCampbell Smythe
 
Kidz in the middle 2013 low res v4
Kidz in the middle 2013 low res v4Kidz in the middle 2013 low res v4
Kidz in the middle 2013 low res v4Nancy Khan
 
De oruga a mariposa... venciendo la resistencia al cambio
De oruga a mariposa... venciendo la resistencia al cambioDe oruga a mariposa... venciendo la resistencia al cambio
De oruga a mariposa... venciendo la resistencia al cambioliderblancaines
 
Los Mejores Juegos HD Android Actualizable
Los Mejores Juegos HD Android ActualizableLos Mejores Juegos HD Android Actualizable
Los Mejores Juegos HD Android Actualizableandroidyapps6a
 
[Europe merge world tour] PAC Importance of Embedded Software
[Europe   merge world tour] PAC Importance of Embedded Software[Europe   merge world tour] PAC Importance of Embedded Software
[Europe merge world tour] PAC Importance of Embedded SoftwarePerforce
 
WEBINAR: Der ultimative E-Commerce Q1 Survival Guide - Erobern Sie 2016
WEBINAR: Der ultimative E-Commerce Q1 Survival Guide - Erobern Sie 2016WEBINAR: Der ultimative E-Commerce Q1 Survival Guide - Erobern Sie 2016
WEBINAR: Der ultimative E-Commerce Q1 Survival Guide - Erobern Sie 2016Nosto
 
Boletin digital y cronograma- Enero y febrero 2015
Boletin digital y cronograma- Enero y febrero 2015Boletin digital y cronograma- Enero y febrero 2015
Boletin digital y cronograma- Enero y febrero 2015Colegio Campestre Horizontes
 
HOW TO RIDE A RIPSTIK
HOW TO RIDE A RIPSTIKHOW TO RIDE A RIPSTIK
HOW TO RIDE A RIPSTIKadamzabor
 
El fin de las agencias como las conocemos
El fin de las agencias como las conocemosEl fin de las agencias como las conocemos
El fin de las agencias como las conocemosDiplomado EPD
 
Classificació General CURSA DE LA ROCA NEGRA 3
Classificació General CURSA DE LA ROCA NEGRA 3Classificació General CURSA DE LA ROCA NEGRA 3
Classificació General CURSA DE LA ROCA NEGRA 3Cursa Roca Negra
 
Presentación del carbono
Presentación del carbonoPresentación del carbono
Presentación del carbonoNahun Ramirez
 

Destacado (20)

Uncut Donut
Uncut DonutUncut Donut
Uncut Donut
 
Tratamiento local con bolsas
Tratamiento local con bolsasTratamiento local con bolsas
Tratamiento local con bolsas
 
1 meu prontuario - logando no sistema
1   meu prontuario - logando no sistema1   meu prontuario - logando no sistema
1 meu prontuario - logando no sistema
 
The Mobile Missionary's AppBox
The Mobile Missionary's AppBoxThe Mobile Missionary's AppBox
The Mobile Missionary's AppBox
 
Kidz in the middle 2013 low res v4
Kidz in the middle 2013 low res v4Kidz in the middle 2013 low res v4
Kidz in the middle 2013 low res v4
 
Distributor smartcockpit
Distributor smartcockpitDistributor smartcockpit
Distributor smartcockpit
 
De oruga a mariposa... venciendo la resistencia al cambio
De oruga a mariposa... venciendo la resistencia al cambioDe oruga a mariposa... venciendo la resistencia al cambio
De oruga a mariposa... venciendo la resistencia al cambio
 
Los Mejores Juegos HD Android Actualizable
Los Mejores Juegos HD Android ActualizableLos Mejores Juegos HD Android Actualizable
Los Mejores Juegos HD Android Actualizable
 
Aavid Design Introduction Presentation
Aavid Design Introduction PresentationAavid Design Introduction Presentation
Aavid Design Introduction Presentation
 
[Europe merge world tour] PAC Importance of Embedded Software
[Europe   merge world tour] PAC Importance of Embedded Software[Europe   merge world tour] PAC Importance of Embedded Software
[Europe merge world tour] PAC Importance of Embedded Software
 
CIUG
CIUGCIUG
CIUG
 
1996649
19966491996649
1996649
 
WEBINAR: Der ultimative E-Commerce Q1 Survival Guide - Erobern Sie 2016
WEBINAR: Der ultimative E-Commerce Q1 Survival Guide - Erobern Sie 2016WEBINAR: Der ultimative E-Commerce Q1 Survival Guide - Erobern Sie 2016
WEBINAR: Der ultimative E-Commerce Q1 Survival Guide - Erobern Sie 2016
 
Von Open Data zu (e-)Partizipation
Von Open Data zu (e-)PartizipationVon Open Data zu (e-)Partizipation
Von Open Data zu (e-)Partizipation
 
GFS Training Booklet
GFS Training Booklet GFS Training Booklet
GFS Training Booklet
 
Boletin digital y cronograma- Enero y febrero 2015
Boletin digital y cronograma- Enero y febrero 2015Boletin digital y cronograma- Enero y febrero 2015
Boletin digital y cronograma- Enero y febrero 2015
 
HOW TO RIDE A RIPSTIK
HOW TO RIDE A RIPSTIKHOW TO RIDE A RIPSTIK
HOW TO RIDE A RIPSTIK
 
El fin de las agencias como las conocemos
El fin de las agencias como las conocemosEl fin de las agencias como las conocemos
El fin de las agencias como las conocemos
 
Classificació General CURSA DE LA ROCA NEGRA 3
Classificació General CURSA DE LA ROCA NEGRA 3Classificació General CURSA DE LA ROCA NEGRA 3
Classificació General CURSA DE LA ROCA NEGRA 3
 
Presentación del carbono
Presentación del carbonoPresentación del carbono
Presentación del carbono
 

Similar a A brief overview for design elements

CMS 115: Creating Accessible MSU Web Content
CMS 115: Creating Accessible MSU Web ContentCMS 115: Creating Accessible MSU Web Content
CMS 115: Creating Accessible MSU Web ContentMontana State University
 
Intuitive images: tips and techniques for creating and evaluating graphics in...
Intuitive images: tips and techniques for creating and evaluating graphics in...Intuitive images: tips and techniques for creating and evaluating graphics in...
Intuitive images: tips and techniques for creating and evaluating graphics in...TCUK
 
Iue slides 2015 final
Iue slides 2015 finalIue slides 2015 final
Iue slides 2015 finalBruce Shields
 
Universal Design Principles and Methods
Universal Design Principles and MethodsUniversal Design Principles and Methods
Universal Design Principles and Methodsmbrosset
 
UX Fundamentals for Beginners
UX Fundamentals for BeginnersUX Fundamentals for Beginners
UX Fundamentals for BeginnersLesley Robinson
 
Design Led Thinking WOrkshop
Design Led Thinking WOrkshopDesign Led Thinking WOrkshop
Design Led Thinking WOrkshopClaire Nelson
 
UNIT III Lecture-I.pptx
UNIT III Lecture-I.pptxUNIT III Lecture-I.pptx
UNIT III Lecture-I.pptxAmirEyni1
 
User Interface Design- Module 2 Uid Process
User Interface Design- Module 2 Uid ProcessUser Interface Design- Module 2 Uid Process
User Interface Design- Module 2 Uid ProcessbrindaN
 
Usability testing in the open
Usability testing in the openUsability testing in the open
Usability testing in the openAnne Petersen
 
Cognitive_presentation and realistics.pptx
Cognitive_presentation and realistics.pptxCognitive_presentation and realistics.pptx
Cognitive_presentation and realistics.pptxsol zem
 
An Introduction to Usability
An Introduction to UsabilityAn Introduction to Usability
An Introduction to Usabilitydirk.swart
 
Design Theory - Ankur Sharma - Presentation
Design Theory - Ankur Sharma - PresentationDesign Theory - Ankur Sharma - Presentation
Design Theory - Ankur Sharma - PresentationMobileNepal
 
Understanding User Experience Workshop - Interlink Conference 2012
Understanding User Experience Workshop - Interlink Conference 2012Understanding User Experience Workshop - Interlink Conference 2012
Understanding User Experience Workshop - Interlink Conference 2012Lynne Polischuik
 
Usability--What is it?
Usability--What is it?Usability--What is it?
Usability--What is it?Ann Krause
 
User Experience Design: an Overview
User Experience Design: an OverviewUser Experience Design: an Overview
User Experience Design: an OverviewJulie Grundy
 
June Labs User Experience (UX) Overview
June Labs User Experience (UX) OverviewJune Labs User Experience (UX) Overview
June Labs User Experience (UX) OverviewJef Lippiatt
 
Design Process | Tool 02: Scenario - Tool 03: Wireframe
Design Process | Tool 02: Scenario - Tool 03: WireframeDesign Process | Tool 02: Scenario - Tool 03: Wireframe
Design Process | Tool 02: Scenario - Tool 03: WireframeGessica Puri
 

Similar a A brief overview for design elements (20)

CMS 115: Creating Accessible MSU Web Content
CMS 115: Creating Accessible MSU Web ContentCMS 115: Creating Accessible MSU Web Content
CMS 115: Creating Accessible MSU Web Content
 
Inclusive design workshop
Inclusive design workshopInclusive design workshop
Inclusive design workshop
 
Intuitive images: tips and techniques for creating and evaluating graphics in...
Intuitive images: tips and techniques for creating and evaluating graphics in...Intuitive images: tips and techniques for creating and evaluating graphics in...
Intuitive images: tips and techniques for creating and evaluating graphics in...
 
Iue slides 2015 final
Iue slides 2015 finalIue slides 2015 final
Iue slides 2015 final
 
Triangular Perspectives
Triangular PerspectivesTriangular Perspectives
Triangular Perspectives
 
Universal Design Principles and Methods
Universal Design Principles and MethodsUniversal Design Principles and Methods
Universal Design Principles and Methods
 
UX Fundamentals for Beginners
UX Fundamentals for BeginnersUX Fundamentals for Beginners
UX Fundamentals for Beginners
 
UX Fundamentals for Beginners
UX Fundamentals for BeginnersUX Fundamentals for Beginners
UX Fundamentals for Beginners
 
Design Led Thinking WOrkshop
Design Led Thinking WOrkshopDesign Led Thinking WOrkshop
Design Led Thinking WOrkshop
 
UNIT III Lecture-I.pptx
UNIT III Lecture-I.pptxUNIT III Lecture-I.pptx
UNIT III Lecture-I.pptx
 
User Interface Design- Module 2 Uid Process
User Interface Design- Module 2 Uid ProcessUser Interface Design- Module 2 Uid Process
User Interface Design- Module 2 Uid Process
 
Usability testing in the open
Usability testing in the openUsability testing in the open
Usability testing in the open
 
Cognitive_presentation and realistics.pptx
Cognitive_presentation and realistics.pptxCognitive_presentation and realistics.pptx
Cognitive_presentation and realistics.pptx
 
An Introduction to Usability
An Introduction to UsabilityAn Introduction to Usability
An Introduction to Usability
 
Design Theory - Ankur Sharma - Presentation
Design Theory - Ankur Sharma - PresentationDesign Theory - Ankur Sharma - Presentation
Design Theory - Ankur Sharma - Presentation
 
Understanding User Experience Workshop - Interlink Conference 2012
Understanding User Experience Workshop - Interlink Conference 2012Understanding User Experience Workshop - Interlink Conference 2012
Understanding User Experience Workshop - Interlink Conference 2012
 
Usability--What is it?
Usability--What is it?Usability--What is it?
Usability--What is it?
 
User Experience Design: an Overview
User Experience Design: an OverviewUser Experience Design: an Overview
User Experience Design: an Overview
 
June Labs User Experience (UX) Overview
June Labs User Experience (UX) OverviewJune Labs User Experience (UX) Overview
June Labs User Experience (UX) Overview
 
Design Process | Tool 02: Scenario - Tool 03: Wireframe
Design Process | Tool 02: Scenario - Tool 03: WireframeDesign Process | Tool 02: Scenario - Tool 03: Wireframe
Design Process | Tool 02: Scenario - Tool 03: Wireframe
 

Último

Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 

Último (19)

Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 

A brief overview for design elements

  • 1. Introduction to Design Principles and Usability Author M. Semeniuk
  • 2. Visual Organization: Gestalt Principles The right column of the blog has the Gestalt Principles defined under Key Sources and Concepts – C.Chen Information Visualization – Definition example from Spokane Falls Community Proximity Common Region Connectedness Similarity Size Shape Shade Color
  • 3. Elements on a Grid System Placing elements on a grid system will help the user – Group Information – Align Elements and relax eye flow Elements on a Grid Elements not on a Grid
  • 4. Quick Tips: Eye flow Which shapes do you see first? Usually the user will see • Large to Small • Irregular to regular • Dark to light shade
  • 5. Quick Tips: Eye flow Users usually look first at the center column
  • 6. Quick Tips: Usability-Button • Does a button express and function as a button? • Does the user know if they select the button another action will perform a function? • If those questions are true, the button has affordance. Common buttons for Videos: * Notice the grouping and the application of the Gestalt Principles.
  • 7. Quick Tips: Usability-Text Alignment • Accessible text alignment: know your audience – how do they read? – left alignment creates a visual line instead of a jagged edge as in right justified text and does not interrupted eye flow. – avoid centering main the information. – Try to keep the text length under 100 to 150 words per line – Consistency of fonts and sizes per grouping; example, headers the same size. Left Alignment Center & Right Justified Alignments Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur adipiscing elit adipiscing elit Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur adipiscing elit adipiscing elit
  • 8. Quick Tips: Usability-Color • Chromostereopsis is a visual vibration effect when the eye tries to adjust or accommodate extreme color spectrums; red and blues are side by side. This is very difficult for a user to maintain focus. Example Example • Keep the color simple, non-competing and consider designing within color blindness parameters. Example Blue
  • 9. White space allows the user to focus on the content.
  • 10. No White Space for the User Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non lectus odio, sagittis mattis nulla. Fusce at lectus erat, nec pulvinar erat. Etiam vel urna purus. Maecenas massa nunc, ullamcorper non dapibus a, facilisis a dui. Nam tempor arcu non lectus facilisis a dui mass Vestibulum ultrices ipsum at lorem vestibulum et auctor nunc vehicula. Morbi molestie sapien id libero gravida id iaculis lorem Without white space it can confuse a user: Where is the focus? Vestibulum ultrices ipsum at lorem vestibulum et auctor nunc vehicula. Morbi molestie sapien id libero gravida id iaculis lorem aliquam. Vivamus nulla neque, pharetra ut sodales quis, malesuada non justo. Donec dapibus tincidunt posuere. Suspendisse mattis euismod mattis diam. Vestibulum ultrices ipsum at lorem vestibulum et auctor nunc vehicula. Morbi molestie sapien id libero gravida id iaculis lorem aliquam. Vivamus nulla neque.
  • 11. Please comment about your experiences on instructional technology or design at http://inst-designonline.blogspot.com/