Extreme Application Makeover
-
Upload
logi-analytics -
Category
Data & Analytics
-
view
135 -
download
2
Transcript of Extreme Application Makeover
![Page 1: Extreme Application Makeover](https://reader036.fdocuments.us/reader036/viewer/2022062306/586f84b01a28ab54768b4e41/html5/thumbnails/1.jpg)
Extreme Application Makeover
Natan Cohen
![Page 2: Extreme Application Makeover](https://reader036.fdocuments.us/reader036/viewer/2022062306/586f84b01a28ab54768b4e41/html5/thumbnails/2.jpg)
#Logi16
NATAN COHENPrincipal Solutions ArchitectLogi [email protected]
I’ve been with Logi for 12 years.
ABOUT ME
2 @SuperNatando
![Page 3: Extreme Application Makeover](https://reader036.fdocuments.us/reader036/viewer/2022062306/586f84b01a28ab54768b4e41/html5/thumbnails/3.jpg)
From Gross…
3 @SuperNatando
![Page 4: Extreme Application Makeover](https://reader036.fdocuments.us/reader036/viewer/2022062306/586f84b01a28ab54768b4e41/html5/thumbnails/4.jpg)
4 @SuperNatando
![Page 5: Extreme Application Makeover](https://reader036.fdocuments.us/reader036/viewer/2022062306/586f84b01a28ab54768b4e41/html5/thumbnails/5.jpg)
#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
![Page 6: Extreme Application Makeover](https://reader036.fdocuments.us/reader036/viewer/2022062306/586f84b01a28ab54768b4e41/html5/thumbnails/6.jpg)
#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.
![Page 7: Extreme Application Makeover](https://reader036.fdocuments.us/reader036/viewer/2022062306/586f84b01a28ab54768b4e41/html5/thumbnails/7.jpg)
TOOLS OF THE TRADEGive your application a facelift with these industry standard tools.
![Page 8: Extreme Application Makeover](https://reader036.fdocuments.us/reader036/viewer/2022062306/586f84b01a28ab54768b4e41/html5/thumbnails/8.jpg)
#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
![Page 9: Extreme Application Makeover](https://reader036.fdocuments.us/reader036/viewer/2022062306/586f84b01a28ab54768b4e41/html5/thumbnails/9.jpg)
#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
![Page 10: Extreme Application Makeover](https://reader036.fdocuments.us/reader036/viewer/2022062306/586f84b01a28ab54768b4e41/html5/thumbnails/10.jpg)
Example: I Built This In 60 Seconds
10 @SuperNatando
![Page 11: Extreme Application Makeover](https://reader036.fdocuments.us/reader036/viewer/2022062306/586f84b01a28ab54768b4e41/html5/thumbnails/11.jpg)
#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
![Page 12: Extreme Application Makeover](https://reader036.fdocuments.us/reader036/viewer/2022062306/586f84b01a28ab54768b4e41/html5/thumbnails/12.jpg)
Example: From “Good” To “Better”…
12 @SuperNatando
![Page 13: Extreme Application Makeover](https://reader036.fdocuments.us/reader036/viewer/2022062306/586f84b01a28ab54768b4e41/html5/thumbnails/13.jpg)
#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
![Page 14: Extreme Application Makeover](https://reader036.fdocuments.us/reader036/viewer/2022062306/586f84b01a28ab54768b4e41/html5/thumbnails/14.jpg)
#Logi16
Example: Icons Galore
14 @SuperNatando
![Page 15: Extreme Application Makeover](https://reader036.fdocuments.us/reader036/viewer/2022062306/586f84b01a28ab54768b4e41/html5/thumbnails/15.jpg)
#Logi16
Example: Icons Scale
15 @SuperNatando
![Page 16: Extreme Application Makeover](https://reader036.fdocuments.us/reader036/viewer/2022062306/586f84b01a28ab54768b4e41/html5/thumbnails/16.jpg)
#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
![Page 17: Extreme Application Makeover](https://reader036.fdocuments.us/reader036/viewer/2022062306/586f84b01a28ab54768b4e41/html5/thumbnails/17.jpg)
FRAMEWORKSExpedite your “extreme makeover” with these helpful style frameworks.
![Page 18: Extreme Application Makeover](https://reader036.fdocuments.us/reader036/viewer/2022062306/586f84b01a28ab54768b4e41/html5/thumbnails/18.jpg)
#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
![Page 19: Extreme Application Makeover](https://reader036.fdocuments.us/reader036/viewer/2022062306/586f84b01a28ab54768b4e41/html5/thumbnails/19.jpg)
Example: Accelerate Dashboard
19 @SuperNatando
![Page 20: Extreme Application Makeover](https://reader036.fdocuments.us/reader036/viewer/2022062306/586f84b01a28ab54768b4e41/html5/thumbnails/20.jpg)
#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
![Page 21: Extreme Application Makeover](https://reader036.fdocuments.us/reader036/viewer/2022062306/586f84b01a28ab54768b4e41/html5/thumbnails/21.jpg)
Example: Metronic Dashboard Theme
21 @SuperNatando
![Page 22: Extreme Application Makeover](https://reader036.fdocuments.us/reader036/viewer/2022062306/586f84b01a28ab54768b4e41/html5/thumbnails/22.jpg)
Example: Conquer Dashboard Theme
22 @SuperNatando
![Page 23: Extreme Application Makeover](https://reader036.fdocuments.us/reader036/viewer/2022062306/586f84b01a28ab54768b4e41/html5/thumbnails/23.jpg)
Learn more in The Definitive Guide to Dashboard Design