Loading…
Loading…
Under the wireframe header, screens hold UI controls. One to three screens
render side by side, each inside a device frame. It is the fastest way to sketch
an app or web layout without drawing a single box.
wireframe
title: Onboarding
screen Login [phone] {
heading: Welcome back
input: Email
input: Password
button: Sign in [half]
button: SSO [half]
navbar: Home | Feed | Profile [active: 0]
}
screen Name [frame] { controls }. The frame is phone (the default),
tablet, browser, or window. Give two or three screens to show a flow.
wireframe
screen Phone [phone] {
statusbar
heading: Inbox
list: Alice | Bob | Carol
tabbar: Home | Search | Me [active: 0]
}
screen Desktop [browser] {
heading: Inbox
search: Search mail
list: Alice | Bob | Carol
}
A control is kind or kind: label, plus optional attributes. Widths are
positional: full (default), half, third, or two-thirds. Consecutive
controls pack onto one row while their fractions fit. The full list of kinds is
in the reference.
wireframe
screen Form [window] {
heading: Create account
input: Full name
input: Email [half]
input: Phone [half]
dropdown: Country
textarea: Bio
checkbox: Email me updates [checked]
button: Submit [half]
button: Cancel [half]
}
By default a control fills its screen's column. A width attribute puts several on
one row: full (the default), half, third, two-thirds. Consecutive controls
whose widths add up to a row sit side by side, so two halfs pair off and three
thirds make a trio. 1/2, 1/3 and 2/3 are accepted spellings.
wireframe
screen Profile [browser] {
heading: Edit profile
input: First name [half]
input: Last name [half]
input: Email
button: Save changes
}
Controls carry state through positional values:
on / checked for on and off for off (checkbox, radio, toggle).60% or 0.6 for a slider or progress fill.active: N for the selected item (navbar, tabs, pagination, and so on).info / success / warning / error for alert severity.A | B | C in the label.wireframe
screen Dashboard [browser] {
tabs: Overview | Reports | Settings [active: 1]
search: Find a report
paragraph: Your weekly summary
slider [60%]
progress [80%]
toggle: Dark mode [on]
radio: Weekly [half]
radio: Monthly [half]
alert: Storage almost full [warning]
}
For a couple of fuller layouts, a mobile shopping app across two screens (a product list and a cart) using the mobile-specific controls.
wireframe
title: Shop app
screen Browse [phone] {
statusbar
search: Search products
segmented: All | Popular | New [active: 0]
card: Sneakers · $89
card: Backpack · $59
tabbar: Shop | Cart | Account [active: 0]
fab
}
screen Cart [phone] {
statusbar
heading: Your cart
list: Sneakers | Backpack
divider
paragraph: Subtotal $148
button: Checkout
tabbar: Shop | Cart | Account [active: 1]
}
A settings page in a browser frame.
wireframe
screen Settings [browser] {
breadcrumbs: Home | Account | Settings [active: 2]
heading: Account settings
avatar [third]
input: Display name [two-thirds]
input: Email
toggle: Two-factor auth [on]
toggle: Marketing emails [off]
divider
dropdown: Language [half]
dropdown: Timezone [half]
button: Save changes [half]
button: Discard [half]
}