- None
- Draw simple wireframes to mock up a web page.
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.
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.
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.
- 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.
- 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].