Embed Size (px)
Citation preview
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
Map App Framework
Navbar, Dropdown Menu, Panels + Bootstrap
Calcite Maps StylesLayout - top, bottom, marginsDropdown - standard, drawerPanels - left, rightThemes - light, dark, customColors - CalciteWidget themes
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
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
Final Awesomeness!
Calcite - Design SystemCalcite Maps - Design FrameworkCalcite Maps Styler - App Template
Final notes...
Create, style, and share awesome map apps!
slides.com/alaframboise
