Extreme Application Makeover

Natan Cohen

#Logi16

NATAN COHENPrincipal Solutions ArchitectLogi Analyticsnatan.cohen@logianalytics.com

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