Navy Design Guide

Design Methods

Hierarchical

Information

There are five ways to organize information: location, alphabet, time, category and hierarchy or LATCH.

Location

Use this when organizing information by geographic or spatial location. The most common graphical products that is represented by this category are maps. Maps are a means to organize by location (think about metro or park maps), but also consider other forms like the location of parts in a repair manual.

Alphabet

Alphabetic systems are simple to grasp and familiar in everyday life. Use this when organizing large quantities of information, such as specialized glossaries or the online resources. This method of organization is less effective for short lists of unrelated things but is powerful for long lists - alphabetizing information is also effective when an audience might not understand any another classification system.

Time

Use this when a timeline or history is apparent will be an apparent sort method. This is typically done when elements are presented in a sequential step-by-step manner. The most apparent example is a history of specific events - a timeline. Other options include sort order by date or providing the user with a date range to facilitate the user’s selection.

Category

Organization by the similarity of characteristics or relatedness of the items. Use the category approach when the information is similar in importance and the categories are intuitive or easy to understand. This is a good way to organize information about music, or types of content.

Hierarchy

The means of organizing information by orders of magnitude (smallest to largest or best to worst). hierarchy. Best used when there’s a common measure with which to make comparisons.

Color

Color indicates which elements are interactive, how they relate to other elements, and their level of prominence. Important elements should stand out the most.

When using color it should be applied purposefully as it can convey meaning in multiple ways, such as relationships between elements and degrees of hierarchy.

It needs be used consistently, so that certain colors always mean the same thing, even if the context changes. Attention should also be given to colors with local or cultural significance.

Legibility

Readability

All content should be visible while the surface morphs, without clipping content.

Subtlety

Use color in subtle ways, whether that means conveying sophistication, emphasizing content or context, or suiting content in some other way. When using color with subtlety, ensure that interactive areas and state changes remain identifiable and easily seen.

Color

Text and important elements, like icons, should meet legibility standards when appearing on colored backgrounds, across all screen and device types.

Color should also be applied throughout a User Interface (UI) consistently and be compatible with the brand it represents.

Expressive

The Navy Brand

Reinforce the brand by showing brand colors so that it reinforce your brand’s style.

Imagery

Images should be selected for their ability to express your message and reflect your brand’s style. Whether you use user-generated photography, professional photography, or different styles of illustration, they should all lend an authentic qualitative look and reflects the Navy. Images should be related to one another by sharing a common function, style, and intention.

Color

Color should create distinction between elements, with sufficient contrast between them.

To Contribute

Are you Contributing?
If you are interested in contributing, please visit: https://usnavy.github.io/Navy-Design-Guide/
We need you!