Skip to main content

Visual Design

The visual language for Astro applications is designed to reinforce usability and provide a professional appearance. The visual design supports key functionality such as monitoring the health and status of systems, logically grouping common tasks and related data, and rapid identification of different equipment. The Astro visual language is comprised of specific colors, fonts, icons, widgets and controls.

Low fidelity wireframe juxtaposed against a final visual design
Low fidelity wireframe juxtaposed against a final visual design

If an application requires the design of unique application elements that aren’t covered in the guidelines, make the new designs complement the Astro visual language. Whenever possible, use the same color palette, fonts, and icon style. The goal is to evolve the visual language to meet specific application needs, not redesign it.

All icon metaphors must be the same across applications. Don’t assign them new meaning. It’s important that icons have metaphors that are quickly identifiable and clearly distinguishable from one another. To maintain consistency, when creating new icons, make sure they use the same design style, colors, and sizes.

Once you have completed the interface with wireframes, it’s time to consider the visual design. Visual design focuses on the overall aesthetics of the interface. A good visual design should reinforce the appropriate use of the functionality and communicate the overall goal of the user. For example, if the most important goal of the application is to communicate overall health and status of the system, the visual design should reinforce communication through use of color, imagery, and designed controls.

Well-designed UI frameworks are a prerequisite for good visual design as one plays off the other. For instance, good groupings of information, such as status iconography, helps the visual design communicate the appropriate message at the right time. User interface and visual design should be synergistic rather than in competition with each other. Again, understanding common patterns and placement of UI elements and widgets used within Astro apps help lay the groundwork for a cohesive visual presentation of information.

Visual design is an enhancement of the user interface design. Combined, each discipline creates the overall user experience. Appearance, behavior, and satisfaction all come into play in how users judge an application. Each interaction affects how users interpret and evaluate an application. What users see conveyed through layout, color, type, imagery, controls, and affordances affects not only their first impression, but also how they use the application.

Visual Design Principles

Visual Design can be somewhat elusive to many developers. The Astro UX Guidelines provide a robust UI Component Library supported by visual examples that detail best practices and common mistakes. Review these core visual design principles and tools that support the creation of a successful visual language.




Five Visual Design Tools




Iconography and Imagery

Controls and Affordances