Designing Great UX/UI with Calcite Maps -...
Transcript of Designing Great UX/UI with Calcite Maps -...
![Page 1: Designing Great UX/UI with Calcite Maps - Esriproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Calcite Web Web framework developed by Esri Branding guide and](https://reader031.fdocuments.in/reader031/viewer/2022011807/5c65ff2c09d3f2d8348b8e41/html5/thumbnails/1.jpg)
Designing Great UX/UIwith Calcite Maps
@AL_Laframboiseslides.com/alaframboise
![Page 2: Designing Great UX/UI with Calcite Maps - Esriproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Calcite Web Web framework developed by Esri Branding guide and](https://reader031.fdocuments.in/reader031/viewer/2022011807/5c65ff2c09d3f2d8348b8e41/html5/thumbnails/2.jpg)
How to design greatmap apps?
![Page 3: Designing Great UX/UI with Calcite Maps - Esriproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Calcite Web Web framework developed by Esri Branding guide and](https://reader031.fdocuments.in/reader031/viewer/2022011807/5c65ff2c09d3f2d8348b8e41/html5/thumbnails/3.jpg)
StrategyVision
User NeedsBusiness Needs
Success
![Page 4: Designing Great UX/UI with Calcite Maps - Esriproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Calcite Web Web framework developed by Esri Branding guide and](https://reader031.fdocuments.in/reader031/viewer/2022011807/5c65ff2c09d3f2d8348b8e41/html5/thumbnails/4.jpg)
Design SystemPrinciples
PatternMethodologyStyle Guide
![Page 5: Designing Great UX/UI with Calcite Maps - Esriproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Calcite Web Web framework developed by Esri Branding guide and](https://reader031.fdocuments.in/reader031/viewer/2022011807/5c65ff2c09d3f2d8348b8e41/html5/thumbnails/5.jpg)
Calcite
![Page 6: Designing Great UX/UI with Calcite Maps - Esriproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Calcite Web Web framework developed by Esri Branding guide and](https://reader031.fdocuments.in/reader031/viewer/2022011807/5c65ff2c09d3f2d8348b8e41/html5/thumbnails/6.jpg)
Calcite
ArcGIS Pro ArcGIS JS
Design system created by Esri
Principles, pattern, style guide, branding guidelines, geo-centric...
![Page 7: Designing Great UX/UI with Calcite Maps - Esriproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Calcite Web Web framework developed by Esri Branding guide and](https://reader031.fdocuments.in/reader031/viewer/2022011807/5c65ff2c09d3f2d8348b8e41/html5/thumbnails/7.jpg)
Calcite Web
![Page 8: Designing Great UX/UI with Calcite Maps - Esriproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Calcite Web Web framework developed by Esri Branding guide and](https://reader031.fdocuments.in/reader031/viewer/2022011807/5c65ff2c09d3f2d8348b8e41/html5/thumbnails/8.jpg)
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
![Page 9: Designing Great UX/UI with Calcite Maps - Esriproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Calcite Web Web framework developed by Esri Branding guide and](https://reader031.fdocuments.in/reader031/viewer/2022011807/5c65ff2c09d3f2d8348b8e41/html5/thumbnails/9.jpg)
Calcite Bootstrap
![Page 10: Designing Great UX/UI with Calcite Maps - Esriproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Calcite Web Web framework developed by Esri Branding guide and](https://reader031.fdocuments.in/reader031/viewer/2022011807/5c65ff2c09d3f2d8348b8e41/html5/thumbnails/10.jpg)
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
![Page 11: Designing Great UX/UI with Calcite Maps - Esriproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Calcite Web Web framework developed by Esri Branding guide and](https://reader031.fdocuments.in/reader031/viewer/2022011807/5c65ff2c09d3f2d8348b8e41/html5/thumbnails/11.jpg)
Calcite Maps
![Page 12: Designing Great UX/UI with Calcite Maps - Esriproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Calcite Web Web framework developed by Esri Branding guide and](https://reader031.fdocuments.in/reader031/viewer/2022011807/5c65ff2c09d3f2d8348b8e41/html5/thumbnails/12.jpg)
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
![Page 14: Designing Great UX/UI with Calcite Maps - Esriproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Calcite Web Web framework developed by Esri Branding guide and](https://reader031.fdocuments.in/reader031/viewer/2022011807/5c65ff2c09d3f2d8348b8e41/html5/thumbnails/14.jpg)
Map App Framework
Navbar, Dropdown Menu, Panels + Bootstrap
![Page 15: Designing Great UX/UI with Calcite Maps - Esriproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Calcite Web Web framework developed by Esri Branding guide and](https://reader031.fdocuments.in/reader031/viewer/2022011807/5c65ff2c09d3f2d8348b8e41/html5/thumbnails/15.jpg)
Calcite Maps StylesLayout - top, bottom, marginsDropdown - standard, drawerPanels - left, rightThemes - light, dark, customColors - CalciteWidget themes
![Page 17: Designing Great UX/UI with Calcite Maps - Esriproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Calcite Web Web framework developed by Esri Branding guide and](https://reader031.fdocuments.in/reader031/viewer/2022011807/5c65ff2c09d3f2d8348b8e41/html5/thumbnails/17.jpg)
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
![Page 18: Designing Great UX/UI with Calcite Maps - Esriproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Calcite Web Web framework developed by Esri Branding guide and](https://reader031.fdocuments.in/reader031/viewer/2022011807/5c65ff2c09d3f2d8348b8e41/html5/thumbnails/18.jpg)
Dev Options1. Access compiled CSS directly2. Create custom Sass build
Fork - Bower - npm - grunt
![Page 21: Designing Great UX/UI with Calcite Maps - Esriproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Calcite Web Web framework developed by Esri Branding guide and](https://reader031.fdocuments.in/reader031/viewer/2022011807/5c65ff2c09d3f2d8348b8e41/html5/thumbnails/21.jpg)
Calcite Maps---
Styler Template
![Page 22: Designing Great UX/UI with Calcite Maps - Esriproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Calcite Web Web framework developed by Esri Branding guide and](https://reader031.fdocuments.in/reader031/viewer/2022011807/5c65ff2c09d3f2d8348b8e41/html5/thumbnails/22.jpg)
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!
![Page 23: Designing Great UX/UI with Calcite Maps - Esriproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Calcite Web Web framework developed by Esri Branding guide and](https://reader031.fdocuments.in/reader031/viewer/2022011807/5c65ff2c09d3f2d8348b8e41/html5/thumbnails/23.jpg)
What can you dowith it?
![Page 24: Designing Great UX/UI with Calcite Maps - Esriproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Calcite Web Web framework developed by Esri Branding guide and](https://reader031.fdocuments.in/reader031/viewer/2022011807/5c65ff2c09d3f2d8348b8e41/html5/thumbnails/24.jpg)
1. Style apps fromwebmaps and scenes
![Page 25: Designing Great UX/UI with Calcite Maps - Esriproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Calcite Web Web framework developed by Esri Branding guide and](https://reader031.fdocuments.in/reader031/viewer/2022011807/5c65ff2c09d3f2d8348b8e41/html5/thumbnails/25.jpg)
2. Style apps on-the-fly
![Page 28: Designing Great UX/UI with Calcite Maps - Esriproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Calcite Web Web framework developed by Esri Branding guide and](https://reader031.fdocuments.in/reader031/viewer/2022011807/5c65ff2c09d3f2d8348b8e41/html5/thumbnails/28.jpg)
Final Awesomeness!
![Page 29: Designing Great UX/UI with Calcite Maps - Esriproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Calcite Web Web framework developed by Esri Branding guide and](https://reader031.fdocuments.in/reader031/viewer/2022011807/5c65ff2c09d3f2d8348b8e41/html5/thumbnails/29.jpg)
Calcite - Design SystemCalcite Maps - Design FrameworkCalcite Maps Styler - App Template
Final notes...
Create, style, and share awesome map apps!
![Page 30: Designing Great UX/UI with Calcite Maps - Esriproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Calcite Web Web framework developed by Esri Branding guide and](https://reader031.fdocuments.in/reader031/viewer/2022011807/5c65ff2c09d3f2d8348b8e41/html5/thumbnails/30.jpg)
slides.com/alaframboise