Getting Started For Designers

Astro UX design assets include files for creating Astro application wireframes and mockups in Sketch and Adobe XD.

Before reading any further, we recommend you take a look at a live Astro Sample Application and review available Astro components on the Astro Storybook site. Examples of Astro in-use can be seen within the Astro Service Specific Design pages.

Design Guidance

Color
Typography
Theme
Grid
Glossary
Compliance

Figma

Astro UXDS Figma Library 6.0 - Dark Theme
Astro UXDS Figma Library 6.0 - Wireframe Theme
Astro UXDS Icon Library

Sketch

Sketch libraries are no longer under active development. We will be using Figma from now on.

Designer Starter Kit

To download the Design Starter Kit, navigate to Astro Design Resources Git Repository

Sketch Installation and Use

Download files from Astro Sketch Libraries:

Astro Dark Library
Astro Light Library
Astro Wireframe Library

How to use Astro Sketch libraries

After downloading, you can quickly get up and running with Sketch libraries:

View Tutorials for adding and loading libraries

How to Use Astro Icon Library

Working with library symbols is as easy as working with symbols created in-document:

View Tutorials for working with symbols
View Tutorials for working with library symbols

How to use Astro Color Swatches

Astro Color Swatches are built into the Astro libraries and can be used once loaded. Using library color swatches helps keep your application consistent through reusable, documented fills, and styles:

View Tutorials for working with styling presets
View Tutorials for working with library styles

Updating/Syncing

When an update is available, the new file can be loaded into Sketch by replacing the saved Sketch library file in your file directory and then updating it within Sketch.

View Tutorials for updating library components

Importing Sketch Files into Adobe XD

Sketch files can be imported into Adobe XD. Symbols created in a Sketch file will be imported into the assets library.

View tutorial for importing Sketch files to Adobe XD

Astro & EGS Design Compliance

The Astro team has worked with EGS to establish the EGS Design Compliance requirements for developers targeting the EGS Platform. These requirements are specific to EGS development; these requirements are based on common best practices and accessibility guidelines and it is highly recommended for all users to incorporate them into their applications.

EGS Design Compliance

Training

Research
UI Design
Visual Design
Service Specific

UX Design:
GRM Service
TT&C Service
FD Service UX Design

Support

Each page on astrouxds.com has a support button at the bottom of the page for technical support.

Additional resources

Web Design
Stackoverflow – Questions and problem solving
SmashingMagazine - HTML, CSS, JS, UX/UI, typography and design
Alistapart - Web design, development, standards, and best practices
Abookapart - Books for web design, development, standards, and best practices
w3.org - Authoritative source for HTML standards
Accessible Colors - Evaluate color combinations using the WCAG 2.0 guidelines for contrast
Can I Use? - Browser support tables

Books on UX Design

  • An Introduction to Human Factors Engineering, Second Edition, by Wickens, Lee, Liu, Becke
  • About Face: The Essentials of Interaction Design 4th Edition by Alan Cooper, Robert Reimann, David Cronin, Christopher Noessel
  • HTML5 For Web Designers by Jeremy Keith (Online, and for purchase)
  • Just Enough Research by Erika Hall
  • Microinteractions: Designing with Details 1st Edition by Dan Saffer
  • Process and Guidelines for Ensuring a Quality User Experience by Rex Hartson, Pardha S. Pylar
  • Sketching User Experiences by Bill Buxton
  • Writing for Interaction: Crafting the Information Experience for Web and Software Apps by Linda Newman Lior

Wireframing and Prototyping Tools