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

  1. HTML
  2. Reference CSS
    • Calcite Bootstrap or Bootstrap
    • Calcite Maps
  3. Reference JavaScript
    • Mapping API (ArcGIS JS API)
    • Calcite Maps JS
    • jQuery or dojoBootstrap

Dev Options

  1. Access compiled CSS directly
  2. 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

Made with Slides.com