Designing Great UX/UI
with Calcite Maps
slides.com/dmart
How to design great map apps?
Strategy
Vision
User Needs
Business Needs
Success
Design System
Principles
Pattern
Methodology
Style Guide
Calcite
Calcite
ArcGIS Pro
ArcGIS JS
Design system created by Esri
Principles, pattern, style guide, branding guidelines, geo-centric...
Calcite Web
Calcite Web
- Web framework developed by Esri
- Branding guide and style for web pages
- Calcite - colors, fonts, icons...
- Light-weight, fast, responsive
- Sass, JS, documentation
Calcite Bootstrap
Calcite Bootstrap
- Calcite theme and custom build for Bootstrap
- Calcite - colors, fonts, icons...
- Light and dark themes
- Custom build, Sass, Documentation
- Dojo and jQuery
Calcite Maps
Calcite Maps
- Bootstrap theme for creating modern map apps
- Map app framework + components + styles
- Calcite - themes, colors, fonts, icons...
- ArcGIS JS 3.x, 4.x, Esri-Leaflet
- Desktop and mobile
Fast and easy to design and style great apps
Map App Framework
Navbar, Dropdown Menu, Panels + Bootstrap
Calcite Maps Styles
- Layout - top, bottom, margins
- Dropdown - standard, drawer
- Panels - left, right
- Themes - light, dark, custom
- Colors - Calcite
- Widget themes
Get Started
- HTML
- Reference CSS
- Calcite Bootstrap or Bootstrap
- Calcite Maps
- Reference JavaScript
- Mapping API (ArcGIS JS API)
- Calcite Maps JS
- jQuery or dojoBootstrap
Dev Options
- Access compiled CSS directly
- Create custom Sass build
- Fork - Bower - npm - grunt
Calcite Maps
---
Styler Template
Styler
- New configurable application template
- Built on Calcite Maps, Bootstrap and ArcGIS JS v4
- 2D and 3D
- Highly configurable (styleable)
- Bonus features!
Easy to create, style and share apps!
What can you do with it?
Final Awesomeness!
Final notes...
- Calcite - Design System
- Calcite Maps - Design Framework
- Calcite Maps Styler - App Template
Create, style, and share awesome map apps!
slides.com/dmart
Designing Apps with Calcite Maps
By dmart
Designing Apps with Calcite Maps
- 1,851