The Art of Dashboard Design: 7 Tips to Master

Понравилась презентация – покажи это...

Слайд 0

The Art of Dashboard Design: 7 Tips to Master By Mary Mahling, UI/UX Designer Instructor, George Mason University

Слайд 1

Why Use Dashboards? Making your point visually pays off up to Emphasize your message, enhance your understanding

Слайд 2

“Bad design is smoke while good design is a mirror” 3 - Juan Carlos Fernandez

Слайд 3

Fundamentals of Design 4 Color Fonts Typography Shapes Sizes Images Interactivity 1 2 3 4 5 6 7

Слайд 4

Design Basics: Colors 5 Make your message clear by using simple contrast techniques Colors have different meanings depending on context (for example, red & blue) Good visuals use contrast effectively Choose complementary colors (red-green, blue-orange, purple-yellow) Don’t forget black & white Don’t be afraid to use color pairs that have already been tested – e.g. sports team colors http://teamcolors.arc90.com/

Слайд 5

Design Basics: Fonts 6 Serif vs. Sans-serif Most fonts are in one of two categories serif and sans-serif. Serif is the tail at the ends of letters.

Слайд 6

Design Basics: Fonts 7 If everything’s bold, nothing is bold Mixing regular and bold for visual interest Sans-serif works best for headlines All road signs in US are Helvetica

Слайд 7

Design Basics: Fonts 8 Serif works best for text blocks Serif Sans-serif

Слайд 8

Design Basics: Typography 9 Typography: How fonts and colors appear in context

Слайд 9

Design Basics: Colors & Fonts Together 10 Color adds another dimension, need contrast ? ? ? ?

Слайд 10

Other Design Aspects Worth Considering 11

Слайд 11

Design Basics: Color Tools 12 http://colorbrewer2.org/ ColorBrewer 2.0 Colors have already been tested for accessibility, color blindness, contrast if being reproduced in black & white, etc. Use maximum of six colors in a visualization Any more and it becomes very difficult for users to see differences

Слайд 12

Design Basics: Color Tools 13 https://color.adobe.com/create/color-wheel/ Adobe Color Can upload image to get color scheme Click/tap on color wheel to adjust Copy & paste hex/rgb values

Слайд 13

Design Basics: Font Tools 14 https://www.google.com/fonts Google Fonts Very easy to preview fonts Will generate a JavaScript link and CSS that you can use on your site

Слайд 14

Summary 1 Focusing on colors and fonts can go a long way in making your visuals more compelling 2 You don’t necessarily need expensive software to step your design game up 3 Good design has a valuable return on investment

Слайд 15

16 Want to see more examples of effective dashboards? Download The Top 10 Emerging Trends eBook Learn.logianalytics.com/dashboard-design-trends