SlideShare a Scribd company logo
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/

More Related Content

What's hot

Visual Explanations for Storytelling
Visual Explanations for StorytellingVisual Explanations for Storytelling
Visual Explanations for Storytelling
Connie 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 presentations
Dr. Saad Saleh Al Ani
 
The Saga of Accessible Colors
The Saga of Accessible ColorsThe Saga of Accessible Colors
The Saga of Accessible Colors
Ted 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’ts
ETRC
 
Design
DesignDesign
Design
mkroening
 
Power Point Presentations
Power Point PresentationsPower Point Presentations
Power Point Presentations
guestdd2cf8
 

What's hot (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
 

Viewers also liked

Uncut Donut
Uncut DonutUncut Donut
Uncut Donut
uncutdonut
 
Tratamiento local con bolsas
Tratamiento local con bolsasTratamiento local con bolsas
Tratamiento local con bolsas
ozonoclinicnavarra
 
1 meu prontuario - logando no sistema
1   meu prontuario - logando no sistema1   meu prontuario - logando no sistema
1 meu prontuario - logando no sistema
Leonardo Alves
 
The Mobile Missionary's AppBox
The Mobile Missionary's AppBoxThe Mobile Missionary's AppBox
The Mobile Missionary's AppBox
Campbell 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 v4
Nancy Khan
 
Distributor smartcockpit
Distributor smartcockpitDistributor smartcockpit
Distributor smartcockpit
Christophe Batteur
 
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
liderblancaines
 
Los Mejores Juegos HD Android Actualizable
Los Mejores Juegos HD Android ActualizableLos Mejores Juegos HD Android Actualizable
Los Mejores Juegos HD Android Actualizable
androidyapps6a
 
Aavid Design Introduction Presentation
Aavid Design Introduction PresentationAavid Design Introduction Presentation
Aavid Design Introduction Presentation
Aavid Thermalloy (S) Pte. Ltd.
 
[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
Perforce
 
CIUG
CIUGCIUG
1996649
19966491996649
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
Nosto
 
GFS Training Booklet
GFS Training Booklet GFS Training Booklet
GFS Training Booklet
GFS Business Development Services
 
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
Colegio Campestre Horizontes
 
HOW TO RIDE A RIPSTIK
HOW TO RIDE A RIPSTIKHOW TO RIDE A RIPSTIK
HOW TO RIDE A RIPSTIK
adamzabor
 
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
Diplomado 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 3
Cursa Roca Negra
 
Presentación del carbono
Presentación del carbonoPresentación del carbono
Presentación del carbono
Nahun Ramirez
 

Viewers also liked (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 to 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 Content
Montana State University
 
Inclusive design workshop
Inclusive design workshopInclusive design workshop
Inclusive design workshop
Brittany Mederos
 
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 final
Bruce Shields
 
Triangular Perspectives
Triangular PerspectivesTriangular Perspectives
Triangular Perspectives
Abdurrahman AlQahtani
 
Universal Design Principles and Methods
Universal Design Principles and MethodsUniversal Design Principles and Methods
Universal Design Principles and Methods
mbrosset
 
UX Fundamentals for Beginners
UX Fundamentals for BeginnersUX Fundamentals for Beginners
UX Fundamentals for Beginners
Growth Hacking Asia
 
UX Fundamentals for Beginners
UX Fundamentals for BeginnersUX Fundamentals for Beginners
UX Fundamentals for Beginners
Lesley Robinson
 
Design Led Thinking WOrkshop
Design Led Thinking WOrkshopDesign Led Thinking WOrkshop
Design Led Thinking WOrkshop
Claire Nelson
 
UNIT III Lecture-I.pptx
UNIT III Lecture-I.pptxUNIT III Lecture-I.pptx
UNIT III Lecture-I.pptx
AmirEyni1
 
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
brindaN
 
Usability testing in the open
Usability testing in the openUsability testing in the open
Usability testing in the open
Anne Petersen
 
Cognitive_presentation and realistics.pptx
Cognitive_presentation and realistics.pptxCognitive_presentation and realistics.pptx
Cognitive_presentation and realistics.pptx
sol zem
 
An Introduction to Usability
An Introduction to UsabilityAn Introduction to Usability
An Introduction to Usability
dirk.swart
 
Design Theory - Ankur Sharma - Presentation
Design Theory - Ankur Sharma - PresentationDesign Theory - Ankur Sharma - Presentation
Design Theory - Ankur Sharma - Presentation
MobileNepal
 
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
Lynne 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 Overview
Julie Grundy
 
June Labs User Experience (UX) Overview
June Labs User Experience (UX) OverviewJune Labs User Experience (UX) Overview
June Labs User Experience (UX) Overview
Jef 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: Wireframe
Gessica Puri
 

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

Recently uploaded

Technoblade The Legacy of a Minecraft Legend.
Technoblade The Legacy of a Minecraft Legend.Technoblade The Legacy of a Minecraft Legend.
Technoblade The Legacy of a Minecraft Legend.
Techno Merch
 
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANEEASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
Febless Hernane
 
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptxUNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
GOWSIKRAJA PALANISAMY
 
Branding de la empresa de Bolt- 2024.pdf
Branding de la empresa de Bolt- 2024.pdfBranding de la empresa de Bolt- 2024.pdf
Branding de la empresa de Bolt- 2024.pdf
PabloMartelLpez
 
PDF SubmissionDigital Marketing Institute in Noida
PDF SubmissionDigital Marketing Institute in NoidaPDF SubmissionDigital Marketing Institute in Noida
PDF SubmissionDigital Marketing Institute in Noida
PoojaSaini954651
 
Virtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburghVirtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburgh
millarj46
 
一比一原版(毕业证)早稻田大学毕业证成绩单如何办理
一比一原版(毕业证)早稻田大学毕业证成绩单如何办理一比一原版(毕业证)早稻田大学毕业证成绩单如何办理
一比一原版(毕业证)早稻田大学毕业证成绩单如何办理
taqyed
 
Timeless Principles of Good Design
Timeless Principles of Good DesignTimeless Principles of Good Design
Timeless Principles of Good Design
Carolina de Bartolo
 
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
qo1as76n
 
一比一原版(毕业证)长崎大学毕业证成绩单如何办理
一比一原版(毕业证)长崎大学毕业证成绩单如何办理一比一原版(毕业证)长崎大学毕业证成绩单如何办理
一比一原版(毕业证)长崎大学毕业证成绩单如何办理
taqyed
 
Top Interior Designers in Bangalore.pdf1
Top Interior Designers in Bangalore.pdf1Top Interior Designers in Bangalore.pdf1
Top Interior Designers in Bangalore.pdf1
Decomart Studio
 
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
kecekev
 
Research 20 slides Amelia gavryliuks.pdf
Research 20 slides Amelia gavryliuks.pdfResearch 20 slides Amelia gavryliuks.pdf
Research 20 slides Amelia gavryliuks.pdf
ameli25062005
 
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
7sd8fier
 
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdfAHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
talaatahm
 
Portfolio.pdf
Portfolio.pdfPortfolio.pdf
Portfolio.pdf
garcese
 
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
7sd8fier
 
Graphic Design Tools and Software .pptx
Graphic Design Tools and Software   .pptxGraphic Design Tools and Software   .pptx
Graphic Design Tools and Software .pptx
Virtual Real Design
 
UNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptx
UNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptxUNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptx
UNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptx
GOWSIKRAJA PALANISAMY
 
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
9a93xvy
 

Recently uploaded (20)

Technoblade The Legacy of a Minecraft Legend.
Technoblade The Legacy of a Minecraft Legend.Technoblade The Legacy of a Minecraft Legend.
Technoblade The Legacy of a Minecraft Legend.
 
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANEEASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
 
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptxUNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
 
Branding de la empresa de Bolt- 2024.pdf
Branding de la empresa de Bolt- 2024.pdfBranding de la empresa de Bolt- 2024.pdf
Branding de la empresa de Bolt- 2024.pdf
 
PDF SubmissionDigital Marketing Institute in Noida
PDF SubmissionDigital Marketing Institute in NoidaPDF SubmissionDigital Marketing Institute in Noida
PDF SubmissionDigital Marketing Institute in Noida
 
Virtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburghVirtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburgh
 
一比一原版(毕业证)早稻田大学毕业证成绩单如何办理
一比一原版(毕业证)早稻田大学毕业证成绩单如何办理一比一原版(毕业证)早稻田大学毕业证成绩单如何办理
一比一原版(毕业证)早稻田大学毕业证成绩单如何办理
 
Timeless Principles of Good Design
Timeless Principles of Good DesignTimeless Principles of Good Design
Timeless Principles of Good Design
 
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
 
一比一原版(毕业证)长崎大学毕业证成绩单如何办理
一比一原版(毕业证)长崎大学毕业证成绩单如何办理一比一原版(毕业证)长崎大学毕业证成绩单如何办理
一比一原版(毕业证)长崎大学毕业证成绩单如何办理
 
Top Interior Designers in Bangalore.pdf1
Top Interior Designers in Bangalore.pdf1Top Interior Designers in Bangalore.pdf1
Top Interior Designers in Bangalore.pdf1
 
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
 
Research 20 slides Amelia gavryliuks.pdf
Research 20 slides Amelia gavryliuks.pdfResearch 20 slides Amelia gavryliuks.pdf
Research 20 slides Amelia gavryliuks.pdf
 
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
 
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdfAHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
 
Portfolio.pdf
Portfolio.pdfPortfolio.pdf
Portfolio.pdf
 
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
 
Graphic Design Tools and Software .pptx
Graphic Design Tools and Software   .pptxGraphic Design Tools and Software   .pptx
Graphic Design Tools and Software .pptx
 
UNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptx
UNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptxUNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptx
UNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptx
 
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
 

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/