- 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 pretty high-fidelity, and 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.
Source code distributed under the MIT license. Text and other assets copyright General Assembly, Inc., all rights reserved.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
