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, and look at a real-world example of effective visual communication of data and metrics. Learn more with The Definitive Guide to Dashboard Design at https://goo.gl/2IPpZL.

1. Extreme Application Makeover
Natan Cohen

2. #Logi16
NATAN COHEN
Principal Solutions Architect
Logi Analytics
natan.cohen@logianalytics.com
I’ve been with Logi for 12 years.
ABOUT ME
2 @SuperNatando

3. From Gross…
3 @SuperNatando

4. 4 @SuperNatando

5. #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

6. #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.

7. TOOLS OF THE TRADE
Give your application a facelift with
these industry standard tools.

8. #Logi16
1. Use mockups and sketches to plan your UI/UX
2. Make your UX more enjoyable
3. Ensure your UX is enjoyable regardless of screen size
4. Recognize and harness the emotional connection of the colors
you choose
Steps to Success
8 @SuperNatando

9. #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

10. Example: I Built This In 60 Seconds
10 @SuperNatando

11. #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

12. Example: From “Good” To “Better”…
12 @SuperNatando

13. #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

14. #Logi16
Example: Icons Galore
14 @SuperNatando

15. #Logi16
Example: Icons Scale
15 @SuperNatando

16. #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

17. FRAMEWORKS
Expedite your “extreme makeover”
with these helpful style frameworks.

18. #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

19. Example: Accelerate Dashboard
19 @SuperNatando

20. #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

21. Example: Metronic Dashboard Theme
21 @SuperNatando

22. Example: Conquer Dashboard Theme
22 @SuperNatando

23. Learn more in The
Definitive Guide to
Dashboard Design