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:
View:162 times
Download:0 times
Share this document with a friend
Transcript:

STYLE THIS: YOUR ESSENTIAL TOOLKITJoshua McClure

#Logi16Joshua McClureSolutions Engineer & Web DeveloperLogi Analyticsjoshua.mcclure@logianalytics.comABOUT ME

#Logi16Principles of DesignTools of the TradePractical Styling TipsESSENTIAL PRINCIPLES OF DESIGN & THE TOOLS TO HELP YOU GET THERE

#Logi16FUNDAMENTAL PRINCIPLESKeep in mind these tried and true principles of design.

#Logi16Users perceive an attractive product as easier to use, even when no usability advantage can be objectively measured.AESTHETIC-USABILITY EFFECT

#Logi16Colors can be used to evoke an emotional response.2. COLOR PSYCHOLOGY

#Logi16Usability and learnability improve when similar things have similar meaning and functions.3. CONSISTENCY

#Logi16OTHER IMPORTANT PRINCIPLES

universalprinciplesofdesign.com

Do yourself a favor and get a copy of this book!

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

#Logi16Theme Editor

LOGI STUDIO TOOLS

Master Report Layout

#Logi16

#Logi16Theme Editor

LOGI STUDIO TOOLS

Master Report Layout

#Logi16

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

Key Benefits:Scalable and customizable graphical iconsNo dependenciesFreeFONT AWESOME

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

Key Benefits:Scalable and customizable fontsTons of options that are widely supportedFreeGOOGLE WEB FONTS

#Logi16Create color schemes and/or browse thousands of color combinations.

Key Benefits:Provides coordinated color palettes Helps create a color schemeFreeADOBE COLOR WHEEL

#Logi16

CSS FRAMEWORKS

#Logi16

#Logi16

JAVASCRIPT LIBRARIES

#Logi16

#Logi16PRACTICAL STYLE TIPS

#Logi16App Development Life Cycle

#Logi16Analog WireframingPencil & PaperDry Erase Board

Digital WireframingBalsamiqAxureSwordSoftAdobe IllustratorSTART BY CREATING MOCKUPS

#Logi16BUILD A COLOR PALETTE

#Logi16CREATE A STYLE GUIDE

#Logi16CREATE A STYLE GUIDE

#Logi16USE COMMON UI ELEMENTS

#Logi16USE COMMON UI ELEMENTS

#Logi16USE COMMON UI ELEMENTS

#Logi16READMISSIONS APPAn example of the application development life cycle, in practice.

#Logi16APP DEVELOPMENT LIFE CYCLE

#Logi16WIREFRAME

Create a wireframe with the requirements in mind.

Involve the necessary parties.

Dont focus on colors.

#Logi16DEVELOP

Focus on meeting the requirements

Involve the style team at every stage possible.

#Logi16STYLE

Implement the stylingFontsColorsCommon UI ElementsSpacing

Dont be afraid to refactor

#Logi16STYLING LOGI INFO APPLICATIONSObjectives:Build a Master Report LayoutCreate a new themeUse fonts & iconsUse Bootstrap

#Logi16

#Logi16Dont 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

#Logi16Learn more with The Definitive Guide to Dashboard Design

#Logi16

Embed Size (px)
Recommended