designing great ux/ui with calcite maps · 2017 esri developer summit-international--presentation,...

Designing Great UX/UIwith Calcite Maps

@AL_Laframboiseslides.com/alaframboise

How to design greatmap apps?

StrategyVision

User NeedsBusiness Needs

Success

Design SystemPrinciples

PatternMethodologyStyle Guide

Calcite

Calcite

ArcGIS Pro ArcGIS JS

Design system created by Esri

Principles, pattern, style guide, branding guidelines, geo-centric...

Calcite Web

Calcite WebWeb framework developed by EsriBranding guide and style for web pagesCalcite - colors, fonts, icons...Light-weight, fast, responsiveSass, JS, documentation

github.com/Esri/calcite-web

Calcite Bootstrap

Calcite BootstrapCalcite theme and custom build for BootstrapCalcite - colors, fonts, icons...Light and dark themesCustom build, Sass, DocumentationDojo and jQuery

github.com/Esri/calcite-bootstrap

Calcite Maps

Calcite MapsBootstrap theme for creating modern map appsMap app framework + components + stylesCalcite - themes, colors, fonts, icons...ArcGIS JS 3.x, 4.x, Esri-LeafletDesktop and mobile

Fast and easy to design and style great apps

Bootstrap

Map App Framework

Navbar, Dropdown Menu, Panels + Bootstrap

Calcite Maps StylesLayout - top, bottom, marginsDropdown - standard, drawerPanels - left, rightThemes - light, dark, customColors - CalciteWidget themes

Style Explorer

Get Started1. HTML2. Reference CSS

Calcite Bootstrap or BootstrapCalcite Maps

3. Reference JavaScriptMapping API (ArcGIS JS API)Calcite Maps JSjQuery or dojoBootstrap

github.com/Esri/calcite-maps

Dev Options1. Access compiled CSS directly2. Create custom Sass build

Fork - Bower - npm - grunt

Samples

github.com/Esri/calcite-maps

Calcite Maps---

Styler Template

StylerNew configurable application templateBuilt on Calcite Maps, Bootstrap and ArcGIS JS v42D and 3DHighly configurable (styleable)Bonus features!

Easy to create, style and share apps!

What can you dowith it?

1. Style apps fromwebmaps and scenes

2. Style apps on-the-fly

More examples

github.com/Esri/calcite-maps-styler-template

Final Awesomeness!

Calcite - Design SystemCalcite Maps - Design FrameworkCalcite Maps Styler - App Template

Final notes...

Create, style, and share awesome map apps!

slides.com/alaframboise