User Interface (UI)

Buttons

Buttons are clear, and considers readability for comprehension, as well as ease-of-use. Use the selected brand colors and accessibility parameters when creating the desired color scheme or user interface patterns.

For example:

All hover states are underlined to provide clear indication that it links to specific content. As well, all links must be descript. Instead of “Click Here” it needs to provide linguistic clarity for users, such as “Learn more about our Navy”.

For example:

Learn more about our Navy

In addition, it is useful and beneficial to provide supporting context or subtext when applicable or necessary.

For example:

Subscriptions
Subscribe to all things Navy

Input Boxes

Providing supporting context or visual aids can improve user adaptation. All input boxes should have a placeholder within the text field and should be clearly communicated as what to put within the text field. It prevents uncertainty, and helps assist the user.

For example:

First Name

Providing supporting context or visual aids can improve user adaptation. All input boxes should have a placeholder within the text field and should be clearly communicated as what to put within the text field. It prevents uncertainty, and helps assist the user.

For example:

Options

Date Boxes

Providing supporting context or visual aids can improve user adaptation. All input boxes should have a placeholder within the text field and should be clearly communicated as what to put within the text field. It prevents uncertainty, and helps assist the user.

For example:

Month
Year

to

Month
Year

Call-to-Actions (CTA)s

All hover states are underlined to provide consistency and to prevent uncertainty. Call-to-actions emphasize and encourage the user to engage in ready and relevant information that has significance as well as additional value. All call-to-actions are indicated with a chevron to gesture or promote cultural importance.

For example:

A Design for Maintaining Maritime SuperiorityCall to Action



To Contribute


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