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.
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:
How to use Astro Sketch libraries
After downloading, you can quickly get up and running with Sketch libraries:
How to Use Astro Icon Library
Working with library symbols is as easy as working with symbols created in-document:
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:
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.
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:
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.
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.
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.
Using Sketch Files in Figma
Figma is not currently supported, but Figma does provide some workarounds for users who wish to import Sketch files.
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.
Each page on astrouxds.com has a support button at the bottom of the page for technical support.
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