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.
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