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

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 Dark Sticker Sheet
Astro Light Library (Coming soon…)
Astro Light Sticker Sheet (Coming soon…)
Astro Wireframe Library
Astro Wireframe Sticker Sheet

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

Adobe XD Installation and Use

Adobe XD libraries are provided for convenience but are not fully supported for creating comps and wireframes, and may cause difficulties for users who are required to work offline.

Download Files for Astro XD Libraries:

Astro 5 Wireframe Library
Astro 5 Dark Library
Astro Light Library (Coming soon…)

Learn more about using Adobe XD
View video tutorials to get started with Adobe XD

How to Use the Astro XD Library Files

Adobe XD files make use of an asset library to create shareable symbols that you can use to create and build wireframes and high fidelity comps.

View tutorial for managing assets and components
View video tutorial for managing assets in Adobe XD

Updating/Syncing Libraries

At this time, Adobe XD does not allow linking, or re-linking, to local linked assets (except for when converting a Sketch library to Adobe XD). Users have 2 options: import/relink assets from the cloud or that are shared with you (through Adobe CC), or convert Sketch libraries. For those who need to work with their files offline, this may require some prohibitive workarounds, or require the user to work directly with the XD library file downloaded from Astro with periodic, manual updates. To assist in getting this functionality, consider voting on the Adobe XD feature request to Link assets from local documents and Relinking assets functionality.

View video tutorial for working with linked assets
View tutorial for working with shared assets

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

Using Sketch Files in Figma

Figma is not currently supported, but Figma does provide some workarounds for users who wish to import Sketch files.

Import files from Sketch
What to expect when moving from Sketch to Figma

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
CodePen - Working examples of Web code and the ability to experiment “live”
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