+ All Categories
Home > Data & Analytics > Style This: Your Essential Toolkit for Dashboard Design

Style This: Your Essential Toolkit for Dashboard Design

Date post: 16-Apr-2017
Category:
Upload: logi-analytics
View: 182 times
Download: 0 times
Share this document with a friend
of 33 /33
#Logi16 STYLE THIS: YOUR ESSENTIAL TOOLKIT Joshua McClure
Transcript

#Logi16

STYLE THIS: YOUR ESSENTIAL TOOLKIT

Joshua McClure

#Logi16

Joshua McClureSolutions Engineer & Web DeveloperLogi [email protected]

ABOUT ME

#Logi16

• Principles of Design

• Tools of the Trade

• Practical Styling Tips

ESSENTIAL PRINCIPLES OF DESIGN & THE TOOLS TO HELP YOU GET THERE

#Logi16

FUNDAMENTAL PRINCIPLES

Keep in mind these tried and true principles of design.

#Logi16

Users perceive an attractive product as “easier to use,” even when no usability advantage can be objectively measured.

1. AESTHETIC-USABILITY EFFECT

#Logi16

Colors can be used to evoke an emotional response.

2. COLOR PSYCHOLOGY

#Logi16

Usability and learnability improve when similar things have similar meaning and functions.

3. CONSISTENCY

#Logi16

OTHER IMPORTANT PRINCIPLES

universalprinciplesofdesign.comDo yourself a favor and get a copy of this book!

#Logi16

TOOLS OF THE TRADETools that will help you take your application to the next level.

#Logi16

Theme Editor

LOGI STUDIO TOOLS

Master Report Layout

#Logi16

Theme Editor

LOGI STUDIO TOOLS

Master Report Layout

#Logi16

Comprehensive library of hundreds of scalable vector graphics icons for your web applications.

Key Benefits:• Scalable and customizable graphical icons• No dependencies• Free

FONT AWESOME

#Logi16

Library of high-quality free fonts to use on your website.

Key Benefits:• Scalable and customizable fonts• Tons of options that are widely

supported• Free

GOOGLE WEB FONTS

#Logi16

Create color schemes and/or browse thousands of color combinations.

Key Benefits:• Provides coordinated color

palettes • Helps create a color scheme• Free

ADOBE COLOR WHEEL

#Logi16

CSS FRAMEWORKS

#Logi16

JAVASCRIPT LIBRARIES

#Logi16

PRACTICAL STYLE TIPS

#Logi16

App Development Life Cycle

#Logi16

“Analog” Wireframing•Pencil & Paper•Dry Erase Board

Digital Wireframing• Balsamiq• Axure• SwordSoft• Adobe Illustrator

START BY CREATING MOCKUPS

#Logi16

BUILD A COLOR PALETTE

#Logi16

CREATE A STYLE GUIDE

#Logi16

CREATE A STYLE GUIDE

#Logi16

USE COMMON UI ELEMENTS

#Logi16

USE COMMON UI ELEMENTS

#Logi16

USE COMMON UI ELEMENTS

#Logi16

READMISSIONS APP

An example of the application development life cycle, in practice.

#Logi16

APP DEVELOPMENT LIFE CYCLE

#Logi16

WIREFRAME

• Create a wireframe with the requirements in mind.

• Involve the necessary parties.

• Don’t focus on colors.

#Logi16

DEVELOP

• Focus on meeting the requirements

• Involve the style team at every stage possible.

#Logi16

STYLE

• Implement the styling- Fonts- Colors- Common UI

Elements- Spacing

• Don’t be afraid to refactor

#Logi16

STYLING LOGI INFO APPLICATIONS

Objectives:1. Build a Master Report Layout2. Create a new theme3. Use fonts & icons4. Use Bootstrap

#Logi16

Don’t be afraid to think outside the box. There are resources out there that can help you do amazing things with your apps. Try it out!

Be a Designer

#Logi16

Learn more with The Definitive Guide to Dashboard Design


Recommended