Upload
others
View
12
Download
0
Embed Size (px)
Citation preview
Gaia UX Patterns & Building Blocks May 25 2012
Gaia UX Patterns & Building Blocks:Table of Contents
Buttons Scrolling
Contacts Browser Search
Contacts Quick Select Seek Bars
Dialogues Settings
Dialogues - Alerts Status Bar
Dialogues - Menus Switches
Dialogues - Popups System Indicators
Dialogues - Toasts System Nav
Drawer Tabs
Entry Sheet Text Input
Filters Toolbars
Forms Value Selectors
Headers
Multi Select
Progress & Activity
Gaia UX Patterns & Building Blocks May 25 2012
Gaia UX Patterns & Building Blocks:Key
Tap Press-and-Hold
SpreadPinch
Gaia UX Patterns & Building Blocks May 25 2012
Contacts Browser:Overview
Characteristics
• Have two components: visual target and hit target.• Later is always larger. Has minimum sizes.• Types:
• Icon + text• Icon only• Text only
Used for
• ...
States
• ...
Gaia UX Patterns & Building Blocks May 25 2012
Contacts Browser:Overview
Characteristics
• Enable • User selects an “Add” button. • They are taken to a full screen list of all available
contacts, with options to filter-search the list. “Cancel” closes the Browser without making a select.
• Tapping a contact closes the Browser and adds the selected contact to the selected field.
Used for
• Selecting a contact to add to a correspondence (eg: Email, Message)
3:10
A
Add ContactCancel
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Adam AdamsCompany name
Blake Adams
Miguel AdamsCompany name
Daryl Adams
B
Timothy Blake
Winston Blake
Karl BlakeCompany name
3:10
A
Add ContactCancel
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Adam AdamsCompany name
Blake Adams
Miguel AdamsCompany name
Daryl Adams
Adam AdamsCompany name
Blake Adams
Miguel AdamsCompany name
3:10
Select ContactCancel
Search
A
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Adam AdamsCompany name
Blake Adams
Miguel AdamsCompany name
Daryl Adams
B
Timothy Blake
Winston Blake
Karl BlakeCompany name
All Favorites
3:10
Sa
Sam Foster
Sara MendesCompany name
Tim Saxon
Salud JuradoCompany name
Sarah Foster
Sara MendesCompany name
Search
Cancel
1
2
3:10
Sa
Sam Foster
Sara MendesCompany name
Tim Saxon
Salud JuradoCompany name
Sarah Foster
Sally Mendes
Tom Saxon
Salud Jurado
Sam Foster
Cancel
Gaia UX Patterns & Building Blocks May 25 2012
Gaia UX Patterns & Building Blocks:
Contacts Quick Select
Gaia UX Patterns & Building Blocks May 25 2012
Contact Quick Select:Examples
Characteristics
• The user highlights an entry field (eg: To), and the keyboard appears.
• As the user types, the system attempts to draw matches from the contacts.
• If one or matches are found, a small list appears, highlighting the matching contacts.
• To make a selection, the user can tap one of the rows, closing the list and adding that contact to the highlighted field. • Alternatively, if the user wishes to clear the list, they
can type Backspace until the field is clear, and there are therefore no more matches. The list then disappears.
Used for:
• Selecting a known contact quickly, without leaving the current view.
3:10
Send
To:
Subject:
Compose emailCancel
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
3:10
Send
To:
Subject:
Compose emailCancel
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Sara [email protected]
Salud [email protected]
Sa
3:10
Send
To:
Subject:
Compose emailCancel
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Sara [email protected]
Salud [email protected]
Sa
3:10
Send
To:
Subject:
Compose emailCancel
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Sam Foster
Gaia UX Patterns & Building Blocks May 25 2012
Alerts:Overview
Characteristics
• Consist of• Title• Body (optional)• Dismissal button (eg: “Cancel”)• Confirmation button (eg: “Delete”)
Used for:
• ...
Alerts:Examples
Are you sure you want to delete this thread?
Cancel Delete
Clear Private Data?Browsing settings, including passwords
and cookies, will be deleteed.
Cancel Delete
Gaia UX Patterns & Building Blocks May 25 2012
Menus:Overview
Characteristics
• Menus are value selectors spawned from Toolbars or Forms selections.
• Vary in height, to a maximum of Keyboard component height.
• Optional header text.• Close by:
• Selecting one of items• Tap cancel button• Tap “OK” button, if available (label name TBD)
Used for:
• . . .
3:10
Save
Title:
Location:
Date:
Add eventCancel
All Day
From: To:
10:00 AM 11:00 AMRepeat: Alert:
Attendees:
None None
Notes:
Monday, April 23
3:10
Save
Title:
Location:
Date:
Add eventCancel
All Day
From: To:
10:00 AM 11:00 AMRepeat: Alert:
Attendees:
None None
Notes:
Monday, April 23
None
Every Day
Every Week
Every Month
Cancel
3:10
Save
Title:
Location:
Date:
Add eventCancel
All Day
From: To:
10:00 AM 11:00 AMRepeat: Alert:
Attendees:
Every Day None
Notes:
Monday, April 23
Gaia UX Patterns & Building Blocks May 25 2012
Popups:Overview
Characteristics
• User presses-and-holds a selectable item (can be a list row, a phone number, a browser link, etc)
• Menu displaying one of more options pops up after X seconds.
• Menu positions itself immediately above or below the selected element (depending on the amount of available screen space)
• Optional: the selected element is visually highlighted in some way (e.g.: darken surrounding content, or draw border, etc)
• User can press anywhere else on screen to change the focus and close the popup.
Used for:
• . . .
3:10
NewInbox (2)
Edit Refresh
John RossRe: Subject of the messageLorem ipsum dolor sit amet, consect...
2:00 pm
Blake AdamsRe: Subject of the messageLorem ipsum dolor sit amet, consect...
1:00 pm
Sarah Foster Re: Subject of the messageLorem ipsum dolor sit amet, consect...
11:30 am
Tom DixonRe: Subject of the messageLorem ipsum dolor sit amet, consect...
Yesterday
Sam JonesRe: Subject of the messageLorem ipsum dolor sit amet, consect...
Yesterday
3:10
NewInbox (2)
Edit Refresh
John RossRe: Subject of the messageLorem ipsum dolor sit amet, consect...
2:00 pm
Blake AdamsRe: Subject of the messageLorem ipsum dolor sit amet, consect...
1:00 pm
Sarah Foster Re: Subject of the messageLorem ipsum dolor sit amet, consect...
11:30 am
Tom DixonRe: Subject of the messageLorem ipsum dolor sit amet, consect...
Yesterday
Sam JonesRe: Subject of the messageLorem ipsum dolor sit amet, consect...
Yesterday
Flag
Mark as Unread
Move
Delete
3:10
Today
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Mark AdamsExcerpt from message eiusmod tempor in..
Darryl CharlestonExcerpt from message eiusmod temporar...
Miguel DomExcerpt from message eiusmod tempor in...
Daryl AdamsExcerpt from message eiusmod tempor in...
Yesterday
Timothy BlakeExcerpt from message eiusmod temporar...
Winston CharlesExcerpt from message eiusmod temporar...
Karl SaxonCompany name
NewMessagesEdit
11:30 am
11:15 am
10:21 am
11:30 am
11:30 am
11:30 am
11:30 am
3:10
Today
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Mark AdamsExcerpt from message eiusmod tempor in..
Darryl CharlestonExcerpt from message eiusmod temporar...
Miguel DomExcerpt from message eiusmod tempor in...
Daryl AdamsExcerpt from message eiusmod tempor in...
Yesterday
Timothy BlakeExcerpt from message eiusmod temporar...
Winston CharlesExcerpt from message eiusmod temporar...
Karl SaxonCompany name
NewMessagesEdit
11:30 am
11:15 am
10:21 am
11:30 am
11:30 am
11:30 am
11:30 am
Call
Send text message
Delete
Gaia UX Patterns & Building Blocks May 25 2012
Toasts:Overview
Characteristics
• Typically appear after a multi-select edit. eg:• Deleting multiple photos from (Gallery)• Deleting multiple emails (Email)• Moving multiple emails (Email)
• Toasts are positioned at the bottom of—and layered on top of—their associated content view.
• Toasts should be non-intrusive, and never cover up other UI elements (eg: toolbar, tabs, etc).
Used for:
• Toasts confirm a user action, and optionally provide a follow up action (eg: Undo).
Gaia UX Patterns & Building Blocks May 25 2012
Drawer:Overview
Characteristics
• Provides access to top level navigation links that are usually user-configurable (eg: accounts in Email and Calendar, or tabs in Browser).
• Is also a great place to tuck secondary or power-user features, such as links to app Settings.
• Position: Should be positioned on left side of screen, but can be positioned on right in rare circumstances (eg: Browser).
• Open: should be opened via standard "Drawer" button, but other buttons can be used in rare circumstances (eg: numeric tabs button in Browser).
• Close: can be closed by tapping viewable area of the primary interface. And in future versions by swiping horizontally from bezel.
• Traditionally visually depicted as being one layer below the primary interface, and sliding in from the side via animation.
• Width: variable, but must always leave sufficient room for the "Drawer" button on the primary interface to remain fully visible.
Used for:
• Providing access to top level navigation links that may be too numerous for a Tabs pattern, or user-generated, (eg: Tabs, user accounts etc).
3:10
5by5 | The Critical Path # 38: Seeking Enlightenment
Talking Points Memo | Breaking News
5by5 | The Critical Path # 38: Seeking Enlightenment
3
Gaia UX Patterns & Building Blocks May 25 2012
Entry Sheet:Overview
Characteristics
• Occupies the full screen• User should be given impression that they are on the
same page, and that the Entry Sheet is merely a temporary modal overlay. They have not navigated one level deeper in the hierarchy.• To reinforce this... • Valid animations could include slide in from top,
from bottom, cross fade, scale in, etc.• “Cancel” buttons are used instead of “Back”.
• Every element within the Entry Sheet must be related to adjusting the single setting; Settings Panels should not contain links to other pages or lists.
• Closing:• “Cancel”• Varies: “Done”, “Join”, “Send”, etc.
Used for:
• The user wants to edit a single setting that:• Contains a large number of possible values.
• eg: Text entry forms, long lists, • [or] Requires multipe inputs or selections
• eg: WiFi network connection process.
3:10
Title:
Location:
Date:
Add event
All Day
From: To:
10:00 AM 11:00 AMRepeat: Alert:
Attendees:
None None
Notes:
Monday, April 23
DoneCancel
3:10
Save
Title:
Location:
Date:
Add eventCancel
All Day
From: To:
10:00 AM 11:00 AMRepeat: Alert:
Attendees:
None None
Notes:
Monday, April 23
Gaia UX Patterns & Building Blocks May 25 2012
Filters:Overview
Characteristics
• Horiztonal sequence of buttons. • Only one button is Focused at a time.• Best practice is to place filters within Toolbars, so they do
not flow with the content.• Left, Middle and Right buttons can be styled uniquely.• Width: variable, depending on number of filters required
within a single set (see Numbering). Should establish a maximum width, however.
• Numbering: minimum 2, maximum 5.• Can be populated with icons or text, but not both. Because
of the smaller height of a filter (versus a tab), text is the best practice.
Used for • Secondary Navigation
• Filters can provide a second set of tabs, where tabs are already present.
• Data Filter• Filters can be used to enable the user to view a single
set of data in a different lens.• eg: in Calendar, the filters they allow user to view time in
different scales, from Day to Month).
Button states
• Normal• Focused• Disabled
Gaia UX Patterns & Building Blocks May 25 2012
Headers:Overview
Characteristics
• Horizontal full width bar that appears at top of screen in most apps
• Floats above content, with option to flow with content in some rare cases (eg: Browser).
• Heading text provides name of current view.• Optional: heading text string can include text (eg: current
unread email count)• Present in most applications
Used for • ...
Gaia UX Patterns & Building Blocks May 25 2012
Multi Select:Overview
Characteristics
• Is entered by...• Is a “mode”, not a section. Animation and visual design should
give user the impression that they are in a temporary mode within the original view, not that there are in a differerent view.
• Can be called “Edit” or “Select” mode, depending on the use case.
• Header text should indicate action being taken (eg: “Select photos”). Once an item has been selected, text should update to “X selected”, where X = quantity of selected items.
• Closes once the user:• ...completes one of the available actions (eg: “Delete”).• ...or taps “Cancel” button.
• Closing resturns user to the previous view.• If user has taken action (eg: delete 3 message threads), a Toast
should appear, confirming the action.
Used for • Enables user to perform “bulk actions”, such as deleting 6
emails from a roll of 20, or selecting 3 photos to email to a friend.
• Is used on lists of items (eg: vertical list of emails in Inbox, or grid of photos in Gallery)
States • Normal• Focused• Disabled
3:10
NewInbox (2)
Edit Refresh
John RossRe: Subject of the messageLorem ipsum dolor sit amet, consect...
2:00 pm
Blake AdamsRe: Subject of the messageLorem ipsum dolor sit amet, consect...
1:00 pm
Sarah Foster Re: Subject of the messageLorem ipsum dolor sit amet, consect...
11:30 am
Tom DixonRe: Subject of the messageLorem ipsum dolor sit amet, consect...
Yesterday
Sam JonesRe: Subject of the messageLorem ipsum dolor sit amet, consect...
Yesterday
3:10
Sam JonesRe: Subject of the messageLorem ipsum dolor sit amet, consect...
Tom DixonRe: Subject of the messageLorem ipsum dolor sit amet, consect...
Sarah Foster Re: Subject of the messageLorem ipsum dolor sit amet, consect...
Edit
Flag Mark Move Delete
Cancel
John RossRe: Subject of the messageLorem ipsum dolor sit amet, consect...
2:00 pm
Blake AdamsRe: Subject of the messageLorem ipsum dolor sit amet, consect...
1:00 pm
Yesterday
Yesterday
11:30 am
3:10
2 selected
Flag Mark Move Delete
Cancel
John RossRe: Subject of the messageLorem ipsum dolor sit amet, consect...
Blake AdamsRe: Subject of the messageLorem ipsum dolor sit amet, consect...
2:00 pm
1:00 pm
Sarah Foster Re: Subject of the messageLorem ipsum dolor sit amet, consect...
11:30 am
Tom DixonRe: Subject of the messageLorem ipsum dolor sit amet, consect...
Yesterday
Sam JonesRe: Subject of the messageLorem ipsum dolor sit amet, consect...
Yesterday
3:10
2 selected
Flag Mark Move Delete
Cancel
John RossRe: Subject of the messageLorem ipsum dolor sit amet, consect...
Blake AdamsRe: Subject of the messageLorem ipsum dolor sit amet, consect...
2:00 pm
1:00 pm
Sarah Foster Re: Subject of the messageLorem ipsum dolor sit amet, consect...
11:30 am
Tom DixonRe: Subject of the messageLorem ipsum dolor sit amet, consect...
Yesterday
Sam JonesRe: Subject of the messageLorem ipsum dolor sit amet, consect...
Yesterday
3:10
NewInbox (2)
Edit Refresh
John RossRe: Subject of the messageLorem ipsum dolor sit amet, consect...
2:00 pm
Tom DixonRe: Subject of the messageLorem ipsum dolor sit amet, consect...
Yesterday
Ray MooreRe: Subject of the messageLorem ipsum dolor sit amet, consect...
Yesterday
Judy BancroftRe: Subject of the messageLorem ipsum dolor sit amet, consect...
Yesterday
2 messages deleted Undo
Sarah Foster Re: Subject of the messageLorem ipsum dolor sit amet, consect...
11:30 am
3:10
Today
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Mark AdamsExcerpt from message eiusmod tempor in..
Darryl CharlestonExcerpt from message eiusmod temporar...
Miguel DomExcerpt from message eiusmod tempor in...
Daryl AdamsExcerpt from message eiusmod tempor in...
Yesterday
Timothy BlakeExcerpt from message eiusmod temporar...
Winston CharlesExcerpt from message eiusmod temporar...
Karl SaxonCompany name
NewMessagesEdit
11:30 am
11:15 am
10:21 am
11:30 am
11:30 am
11:30 am
11:30 am
3:10
Today
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Mark AdamsExcerpt from message eiusmod tempor in..
Darryl CharlestonExcerpt from message eiusmod temporar...
Miguel DomExcerpt from message eiusmod tempor in...
Daryl AdamsExcerpt from message eiusmod tempor in...
Yesterday
Timothy BlakeExcerpt from message eiusmod temporar...
Winston CharlesExcerpt from message eiusmod temporar...
Karl SaxonExcerpt from message eiusmod temporar...
11:30 am
11:15 am
10:21 am
11:30 am
11:30 am
11:30 am
11:30 am
Delete
EditCancel
3:10
Today
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Mark AdamsExcerpt from message eiusmod tempor in..
Darryl CharlestonExcerpt from message eiusmod temporar...
Miguel DomExcerpt from message eiusmod tempor in...
Daryl AdamsExcerpt from message eiusmod tempor in...
Yesterday
Timothy BlakeExcerpt from message eiusmod temporar...
Winston CharlesExcerpt from message eiusmod temporar...
Karl SaxonExcerpt from message eiusmod temporar...
11:30 am
11:15 am
10:21 am
11:30 am
11:30 am
11:30 am
11:30 am
1 selectedCancel
Delete
3:10
Today
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Mark AdamsExcerpt from message eiusmod tempor in..
Darryl CharlestonExcerpt from message eiusmod temporar...
Daryl AdamsExcerpt from message eiusmod tempor in...
Yesterday
Timothy BlakeExcerpt from message eiusmod temporar...
Winston CharlesExcerpt from message eiusmod temporar...
Karl SaxonExcerpt from message eiusmod temporar...
Sarah ChristiansonExcerpt from message eiusmod temporar...
NewMessagesEdit
11:30 am
11:15 am
11:30 am
11:30 am
11:30 am
11:30 am
1 thread deleted Undo
Gaia UX Patterns & Building Blocks May 25 2012
Tabs:Overview
Characteristics
• Fill the full horizontal width.• Number between 3—5.• Positioned at bottom of screen.• Can contain various elements (buttons, filters, indicators,
etc).• Versions:
• Text + icon• Icon-only
Used for
• Contains actions and/or navigation associated with the currently-visible view. eg: • Delete selected items (button)• Refresh content (button)• Enter “Edit” mode (filter)• View “Favorite” contacts only (filter)
• Can also contain progress or activity indicators (this is less common, though).
States • Normal• Focused• Disabled
3:10
Today
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Mark AdamsExcerpt from message eiusmod tempor in..
Darryl CharlestonExcerpt from message eiusmod temporar...
Miguel DomExcerpt from message eiusmod tempor in...
Daryl AdamsExcerpt from message eiusmod tempor in...
Yesterday
Timothy BlakeExcerpt from message eiusmod temporar...
Winston CharlesExcerpt from message eiusmod temporar...
Karl SaxonCompany name
NewMessagesEdit
11:30 am
11:15 am
10:21 am
11:30 am
11:30 am
11:30 am
11:30 am
Gaia UX Patterns & Building Blocks May 25 2012
Toolbars:Overview
Characteristics
• 100% wide Horiztonal element.• Fixed height, consistent system-wide.• Does not scroll with content. Floats above.• Contents inside toolbar do not scroll.• Positioned at bottom of screen.• Can contain various elements (buttons, filters, indicators,
etc).
Used for • Contains actions and/or navigation associated with the
currently-visible view. eg: • Delete selected items (button)• Refresh content (button)• Enter “Edit” mode (filter)• View “Favorite” contacts only (filter)
• Can also contain progress or activity indicators (this is less common, though).
3:10
NewInbox (2)
Edit Refresh
John RossRe: Subject of the messageLorem ipsum dolor sit amet, consect...
2:00 pm
Blake AdamsRe: Subject of the messageLorem ipsum dolor sit amet, consect...
1:00 pm
Sarah Foster Re: Subject of the messageLorem ipsum dolor sit amet, consect...
11:30 am
Tom DixonRe: Subject of the messageLorem ipsum dolor sit amet, consect...
Yesterday
Sam JonesRe: Subject of the messageLorem ipsum dolor sit amet, consect...
Yesterday
TEMPGaia UX Patterns & Building Blocks May 25 2012
Gaia UX Patterns & Building Blocks:
Common Assets Palette
TEMPGaia UX Patterns & Building Blocks May 25 2012
Gaia UX Patterns & Building Blocks:
Higher FidelityLayouts
3:10
Mark Aaberg
David Abbott
Mary Abelar
Christian Adderson
Lee Aistrop
Clifford Aich
Camille Aimes
A
Favorites
Vivien Babine
Margaret Gormely
Jakub Kania
Russel Marks
Emmett Picante
Search
Dialer History Contacts
3:10
CancelContacts
3:10
Dialer History Contacts
3:10
Q W E R T Y U I O P
A S D F G H J K L
Z X C V B N M
..?123 ,
‘
M
Adam Clark
Adam Johnson
Gary Macadams
CancelAda
Gaia UX Patterns & Building Blocks
File name Gaia_Patterns_20120525_V1.0
Author Josh Carpener, [email protected]
Location Dropbox: OWD_Moz_share > Mozilla > 1 Patterns and Building Blocks > _SpecsMozilla Wiki: https://wiki.mozilla.org/Gaia/Design/Patterns
New Wireframes All
New Wireframes —
New Wireframes —