Date post: | 16-Apr-2017 |
Category: |
Data & Analytics |
Upload: | logi-analytics |
View: | 133 times |
Download: | 2 times |
Extreme Application Makeover
Natan Cohen
#Logi16
NATAN COHENPrincipal Solutions ArchitectLogi [email protected]
I’ve been with Logi for 12 years.
ABOUT ME
2 @SuperNatando
From Gross…
3 @SuperNatando
4 @SuperNatando
#Logi16
Giving your application an “extreme makeover” is much easier than you think.
Leverage industry standard style frameworks that integrate seamlessly to enhance your Logi Info application.
Look at a real-world example of effective visual communication of data and metrics.
WHAT WE ARE GOING TO LEARN TODAY
5 @SuperNatando
#Logi16
HOW LOGI ENABLES YOU
6 @SuperNatando
Offer a product that allows businesses to add embedded analytics to their existing applications.
Provide visualizations and interactive UIs to analyze and visualize your data.
Provide a 100% web-based development framework that integrates with other industry standard frameworks.
TOOLS OF THE TRADEGive your application a facelift with these industry standard tools.
#Logi16
1. Use mockups and sketches to plan your UI/UX2. Make your UX more enjoyable3. Ensure your UX is enjoyable regardless of screen size4. Recognize and harness the emotional connection of the colors
you choose
Steps to Success
8 @SuperNatando
#Logi16
Rapid web application mockup tool for producing wireframes quickly.
Key Benefits: • Simulates the “look and feel” of a whiteboard sketch• Comprehensive library of UI controls • Built-in collaboration tools for product managers
Balsamiq Mockups
9 @SuperNatando
Example: I Built This In 60 Seconds
10 @SuperNatando
#Logi16
The #1 HTML, CSS and JS framework for creating attractive and responsive web applications.
Key Benefits: • Responsive, fluid grid system that scales to any viewport size
for optimum presentation• Helpful class styles for typography, buttons, icons, images,
tables and forms• Configurable UI components for alerts, tooltips, modal dialogs,
tabs and transitions
Bootstrap
11 @SuperNatando
Example: From “Good” To “Better”…
12 @SuperNatando
#Logi16
Comprehensive library of hundreds of scalable vector graphics icons for your web applications.
Key Benefits: • Scalable and customizable graphical icons• No dependencies on JS• Completely controlled with CSS
Font Awesome
13 @SuperNatando
#Logi16
Example: Icons Galore
14 @SuperNatando
#Logi16
Example: Icons Scale
15 @SuperNatando
#Logi16
Use colors and patterns that are attractive, professional, complimentary but not distracting.
Helpful Websites: • Flat UI Color Picker• Adobe Color Palette Designer• Subtle Patterns
Colors & Patterns
16 @SuperNatando
FRAMEWORKSExpedite your “extreme makeover” with these helpful style frameworks.
#Logi16
Style framework that expedites development of attractive and visually compelling BI web applications.
Key Benefits: • Pre-built UI components for Logi Info• Bootstrap, Font Awesome and other helpful libraries already
integrated• UI for creating users, roles, navigation menus and more• It’s free!
Logi Accelerate
18 @SuperNatando
Example: Accelerate Dashboard
19 @SuperNatando
#Logi16
Fully responsive and mobile-ready framework used by thousands of professionals worldwide.
Key Benefits: • Most comprehensive web application design framework• Hundreds of template pages and UI components• Completely responsive with legacy browser support• Only $30 for a non-commercial license
KeenThemes Metronic
20 @SuperNatando
Example: Metronic Dashboard Theme
21 @SuperNatando
Example: Conquer Dashboard Theme
22 @SuperNatando
Learn more in The Definitive Guide to Dashboard Design