Prerequisites
- None
Objectives
- Draw simple wireframes to mock up a web page.
- Contrast wireframes with mockups.
Sketching and Wireframing
What Is a Wireframe?
A wireframe is an image that sketches out the layout of major pieces of content within a page, without all of the fully-rendered detail that might be present in an illustration.
Although making detailed, feature-rich wireframes is typically the province of the UX/UI designer, even developers can produce basic layout sketches, and these sketches are extremely useful in the planning process as a tool to clarify and codify your vision. They also segue easily into mocking up a site with boxes, so that you know how to actually build your layout.
Wireframes vs Mockups
Wireframes and mockups are ways to visualize an application. They differ in the the "degree" of fidelity. Wireframes are lower fidelity, often using placeholders for content, no colors, no fonts, and no assets. Mockups are are higher fidelity, often utilizing colors, typography, images, and other assets.
Low-fidelity:
- wireframes (paper or marker)
- wireframes (digital)
| Pros | Cons |
|---|---|
| speed | uninspring |
| easy to change | vague |
| inexpensive | feel incomplete |
| skeleton of application | lack of guidance |
High-fidelity:
- mockups (no interactions)
- mockups (interactivity)
| Pros | Cons |
|---|---|
| stakeholder language | more time |
| more inspiring | harder to change |
| user's perspective | more costly |
Wireframing in WDI
Within the scope of this course, we will not be expecting you to produce designer-level wireframes; however, we will expect you to produce low-fidelity sketches for your projects. A low-fidelity wireframe or sketch is simple -- just complex enough to convey the gist of the page -- and may feature minimal text, placeholders for images, or skeletons of interactive features like drop-down menus and pop-ups or modals.
It should usually not concern itself with things like:
- color scheme
- fonts
- specific content (images, written copy, etc)
- animations and timing
If you find yourself diving into those details, you may be going too deep. The purpose of a sketch is to be light, flexible, and even disposable if necessary.
Below are some examples of sketches submitted in previous cohorts. Some are higher fidelity and some are lower; some were drawn by hand and some were drawn using design tools like Balsamiq; however, any of the following would be considered acceptable wireframes for a project.
The last one is the kind of wireframe you'd typically see from a designer; that is not our expectation from you in WDI.
In general, since hand-drawn wireframes are easier to iterate on and maintain than computer-drawn ones, we recommend that in the scope of this course, you do all your wireframing by hand.
Lab
Individually, pick one of the eight following sites and draw a basic sketch for the site on a patch of whiteboard. Focus on capturing the key elements of layout for the page, but DO NOT INCLUDE ANY REAL TEXT. When you're finished, rotate within your squads (A->B, B->C, etc.) and see if you can identify your teammate's site using only their sketch. Then, take a few minutes and give each other feedback on the sketches, specifically pointing out aspects that were more clear or less clear.
Resources
- Moqups, a mostly-free drag and drop wireframing web app
- Balsamiq, a sketching tool for making high-fidelity wireframes
- Wirify, a tool that draws up rudimentary wireframes for existing sites.
- invision, a workflow playform with high-fidelity prototyping tools.
- Axure, a high fidelity prototyping platform (free for 30 days).
License
- All content is licensed under a CCBYNCSA 4.0 license.
- All software code is licensed under GNU GPLv3. For commercial use or alternative licensing, please contact [email protected].
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
