What are wireframes?
Wireframes are a simple (but important!) element of designing the architecture of a website. Think of them as your site’s “skeleton” — boxes that indicate where site content will go, but without the exact text, images, or visualizations. In fact, many designers prefer to leave wireframes as “sketchy” as possible, so that when the team is judging the quality of the information architecture, people aren’t distracted by images or font choices.
The exact tool you use to make your wireframes doesn’t matter so much: there are dedicated wireframing tools, but a lot of people like to use PowerPoint, or just sketch by hand. Some fancier wireframing tools create clickable HTML prototypes, so people can interact with the site, but we won’t be that elaborate in this class.
If you’d like to use a dedicated wireframing tool, we suggest Balsamiq. Choose the free 30-day trial and export your designs as a PDF.
Here is an example of a very good set of wireframes. These were created with Balsamiq, but they’d be just as good with another tool.
Requirements for this assignment
You should submit a wireframe for each page you plan to include in your site, with headings for each data visualization, map, and section of text. You don’t have to have working maps or visualizations at this point, but please indicate which visualization, mapping, and timeline tools you intend to use, along with the web-publishing technology you plan to use (e.g., WordPress, flat HTML, Jekyll, etc.).
You can submit your wireframes via CCLE in any format you like, as long as we can open it (e.g., PDF, .docx, JPG, etc.).
Francesca has some very helpful slides with more information about wireframes.
This assignment is due on Monday, November 27, via CCLE.