Wireframe examples
Boxes and labels for layout, before any visual design.
What a wireframe is allowed to omit
A website wireframe, web wireframe, or sample wireframe is a low-fidelity layout: boxes, lines, and words that say what each region is for. It omits brand color, photography, and final type. Wireframe design examples that look like finished homepages have skipped the step. The point is to agree on structure: what is first, what is a button, what is a field.
Three samples below are described in words so you can redraw them. They are not a theme to install. Sequence across screens belongs on a storyboard template. How the servers talk belongs on an architecture diagram.
Three screens for a club sign-up
Home: a top bar with the club name and one text link, 'Sign up'. A heading of six words. One sentence. One button with the same words as the link. Nothing else above the fold. The repeated words are deliberate so the action has one name.
Form: the heading 'Sign up'. Three fields with labels above them: name, email, grade. One checkbox: 'I can stay after school on Tuesdays'. One button: 'Submit sign-up'. Helper text under email: 'We send the meeting place here'. No second button.
Confirmation: the heading 'You are signed up'. One sentence naming the next meeting date, which is a real date you fill in. One text link back to the home screen. No new offer.
Questions
- What is a website wireframe?
- A line layout of a page that shows regions, labels, and actions without final colors, photos, or typography. It is for agreeing on structure.
- What should a wireframe example include?
- The order of regions, the words on buttons, and the labels on fields. It should leave out decoration that would distract from those decisions.
- How many screens do I need?
- The path you are testing. For a sign-up, a start page, the form, and the confirmation are enough. Extra marketing pages can wait.