Image Scheme
General Practice
Imagery
All images must be top-aligned or center-aligned in accordance to the image scheme type and visual composition of the imagery. Within its specific container or content type element it must be harmonous and clear.
Hero Imagery
Usage
Hero images help draw attention, provide context about content, or reinforce the brand.
Placement
They are anchored in the most prominent position, such as the top of the screen.
Choosing a hero image
Hero images should make an impact, engaging the user and setting the emotional tone for the page, but they shouldn’t overpower the content elements they support (navbar, headings, etc.) When selecting a hero image for a page, pay attention to both the appearance of the image and its composition.
Appearance
When considering the appearance of a hero image, follow our exisiting brand guidelines:
All photography should feel cinematic, allowing each photo to tell its own story. Each image should have a single focus, using people as the primary subject as much as possible.
Equipment such as ships and other craft may also be used as the primary subject.
Some colors don’t pair well with our brand colors. Avoid images with large areas of clashing color.
Composition
When considering the composition of a prospective hero image, avoid images with focal areas in the top third or left third of the image. These areas should be reserved for the page header and featured content headings, respectively.
Narrative Imagery
Usage
Narrative images help draw attention, provide context about the story, and helps distill complex narratives into comphrehension.
Placement
They are within stories, and promote the Navy story interposed within the narration.
Choosing a narrative image
Narrative images should tell the story, engaging the user and setting the emotional tone for the page, but they shouldn’t overpower the content elements they support. Pay attention to both the appearance of the image and its composition.
Appearance
When considering the appearance of a narrative image, follow our exisiting brand guidelines:
All photography should feel story focused, and topic oriented, to tell its own story in alignment with the overall narration.
Each image should meet the pacing of the narration if multiple images are used.
Using people as the primary subject can relate to the user the best.
Equipment such as ships and other craft may also be used as the primary subject.
Some colors don’t pair well with our brand colors. Avoid images with large areas of clashing color.
Composition
When considering the composition of a prospective narrative image, avoid images with focal areas that prevent the natural progression of reading the narrative. If the image prevents visual fluidity of the story, it prevents quality experiences.
Informational Imagery
Usage
Informational imagery assists users in understanding content, without being the focal point in a User Interface (UI). It represents entities or content, either literally or conceptually.
Placement
They are within information driven content, and promote the informatics.
Choosing an informational image
Informational images should inform or instruct, engaging the user and setting the articulated tone for the page, but they shouldn’t overpower the content elements they support. Pay attention to both the appearance of the image and its composition.
Appearance
When considering the appearance of an informational image, follow our exisiting brand guidelines:
All photography should feel informative, instructional, and topic aligned, to inform constructively or clearly.
Each image should meet the pacing of the information if multiple images are used. Using people as the primary subject can relate to the user effectively.
Equipment such as ships and other craft may also be used as the primary subject.
Some colors don’t pair well with our brand colors. Avoid images with large areas of clashing color.
Composition
When considering the composition of an informational image, avoid images that can cause uncertainty, confusion, misinformation or disinformation. Clear informational representation is necessary to provide accuracy and comprehension. Cohesion is necessary.
Assorted Imagery
Usage
Assorted Images are small images that represent the narrative, information, type, or topic in tight spaces. They typically act as tap targets that lead to primary content, appearing within components.
Placement
They are used when providing previews, teasers, lists, or groups of visual imagery.
Choosing an assorted image
Assorted images should be topic dependent, subject oriented and type positioned, engaging the user and setting the organizational tone for the page, but they shouldn’t overpower the content elements they support. Pay attention to both the appearance of the image and its composition.
Appearance
When considering the appearance of an assorted image, follow our exisiting brand guidelines:
All photography should be topic exclusive, suited, and matched. Using people as the primary subject can relate to the user effectively.
Equipment such as ships and other craft may also be used as the primary subject.
Some colors don’t pair well with our brand colors. Avoid images with large areas of clashing color.
Composition
When considering the composition of an assorted image, avoid images that are not consistent with the topic, type, or subject. It needs to align with the motif, and its source of content.
To Contribute
If you are interested in contributing, please visit: https://usnavy.github.io/Navy-Design-Guide/
We need you!