Wireframes for Content Usable illustrations
Last updated June 8, 2021
Subgroup participants:
�Short link to this document: bit.ly/content-usable-images
Document purpose
We are working on illustrations of successful examples for each pattern.
We are working on only a few patterns at a time. Once the task force agrees that we have a successful wireframe, then we will ask a designer to turn the wireframe into a beautiful image for the document.
Example integration
We are thinking that these would be integrated directly into the document with clear “do” and “don’t” examples.
4.2 Objective 1:
Help users understand what things are and how to use them
4.2.1 Make the purpose of your page clear (pattern)
User need:
I need to know the context and purpose of the page.
Note: this wireframe intentionally excludes the site header and structure. For the full site structure, see 4.3.2 Make the site hierarchy easy to understand and navigate (pattern)
What to do:
Include a clear title or heading that summarizes the purpose of a page, include clear signposts.
4.2 Objective 1: Help users understand what things are and how to use them
Clear title explaining the purpose of the page
Signposts including both an icon and a plain language heading help the user find exactly what they need
Example status: wireframe approved for art
4.2.3 Use a consistent visual design (pattern)
User story: I need to understand my options and the tasks I can perform and I can identify the controls I can interact with in order to complete actions.
What to do: Use a consistent visual design across groups of pages.
4.2 Objective 1: Help users understand what things are and how to use them
The indications of which section is currently active are the same across all pages
Color coding sections is also used to support awareness of the active section
The page title matches the color coding of the section for more reinforcement
Example status: wireframe approved for art
4.3 Objective 2:
Help users find what they need
4.3.2 Make the site hierarchy easy to understand and navigate (pattern)
User story
I need to easily understand, navigate, and browse both the site and page structure.
4.3 Objective 2: Help users find what they need
Visual clarity so that the user can see content relationships
Clear semantic layout with headers that indicate hierarchy
Predictable placement of essential information in a universally available footer
Simple primary navigation and clear indication of current location
Sitewide search in predictable location
Example status: reworking the concept
Archived
examples
[archived]
4.2.1 Make the Purpose of Your Page Clear (Pattern)
User need:
I need to know the context and purpose of the page.
Example image:
Top left navigation and page title, when the user is on the “Purchase flowers” sub-page.
[archived] 4.2 Objective 1: Help Users Understand What Things are and How to Use Them
Clearly indicate which sub-page the user is on
A clear page title that tells the user what the page is for
Example status: not using, archived
[archived]�4.3.2 Make the site hierarchy easy to understand and navigate (pattern)
User story
I need to easily understand, navigate, and browse both the site and page structure.
[archived] 4.3 Objective 2: Help users find what they need
Visual clarity so that the user can see content relationships
Clear semantic layout with headers that indicate hierarchy
A single call to action with expected placement
Predictable placement of essential information in a universally available footer
Simple primary navigation and clear indication of current location
Sitewide search in predictable location
Example status: not using, archived
Status collection
Example status: reworking the concept
Example status: wireframe ready for review
Example status: not using, archived
Example status: wireframe approved for art
Example status: reworking the art
Example status: art ready for review
Example status: complete, ready to use
Fonts
Roboto
Poppins
Hello? We are previewing fonts with the question of what is most readable! Can you tell us what you think? �1 2 5 7 9
Hello? We are previewing fonts with the question of what is most readable! Can you tell us what you think?
1 2 5 7 9
Avenir
Arial
Hello? We are previewing fonts with the question of what is most readable! Can you tell us what you think?
1 2 5 7 9
Hello? We are previewing fonts with the question of what is most readable! Can you tell us what you think?
1 2 5 7 9
Comic Neue
Comic Sans
Hello? We are previewing fonts with the question of what is most readable! Can you tell us what you think?
1 2 5 7 9
Hello? We are previewing fonts with the question of what is most readable! Can you tell us what you think?
1 2 5 7 9
Verdana
Century Gothic
Hello? We are previewing fonts with the question of what is most readable! Can you tell us what you think?
1 2 5 7 9
Hello? We are previewing fonts with the question of what is most readable! Can you tell us what you think?
1 2 5 7 9