style this: your essential toolkit for dashboard design
TRANSCRIPT
#Logi16
STYLE THIS: YOUR ESSENTIAL TOOLKIT
Joshua McClure
#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