Project 1: DIY: Design-It-Yourself Wireframe and Project Management Brief

Overview

For this project, you'll design a wireframe (design structure) for what's called a Project Management Brief that you can then use in subsequent projects. (see the sample, "project-management-design-TH.pdf" at our 309 drop site.) You'll create your wireframe in Adobe InDesign and essentially make a re-usable template. I'll show you samples in class, and you'll learn to easily create project briefs that go with a variety of documents, such as websites, brochures, newsletters, etc. You'll also generate a set of questions for each type of project that will help you generate a "brief" for planning purposes. In the real world of publishing and design, writers and project managers use these documents when working with clients on complex design and publishing jobs.

The two goals of this project are to 1) learn to use some of the tools in Adobe InDesign and 2) create a template of a Project Management Brief to use in later projects.

Definitions

• a wireframe is a visual illustration of one page in a document or website showing all the items to be included on a page without defining the look and feel of the page. A wireframe is meant to illustrate the placement (layout) of features, content, links, and other page elements. A wireframe is like a "mock-up" but the layout and the parts may be more precisely defined than a sketch. The wireframe will also prioritize features by positioning. The purpose of a wireframe is to help the designer(s) plan the best way to meet the needs of readers (users, site visitors, readers, etc.) and to make it easier to discuss layout in the early stages of a project. For more information, see the section on "wireframes" at "Define the Information Architecture" at Usablity.gov. Wireframes are commonly used to draw the outlines of 3-D objects in computer modeling.
• project management refers to the planning, organizing, scheduling, and managing of resources, assets, and people that helps meet a projects goals. Project management will typically involve careful consideration of a project's scope, goals, schedule, budget, assets and resources, methodology, constraints, deliverables, and more.

Step 1

Read and review the sample wireframe and project management brief for The Thomson Handbook so that you can see what a complete wireframe/brief should look like (see the calendar for Week 4 or our class drop.io assets for the PDF file). Bear in mind that your goal in this project is only to create a template for a document just like this, one that you will adapt later to your other projects in the class. In this instance, your template will only have place holders for content. You could complete Step 1 by Thursday, February 5.

Step 2

Use InDesign to create a template for a project management brief that you can use for subsequent projects Your brief should contain the following pages and components:

Project Brief: title of the project, version history, problem addressed, solution, needs to meet, and purpose/function of document.

Personas: Create a three-row, four-column table. Each row will be for a different persona. Column headers should be in the form of these questions:

1. Who are we designing for?
2. What are their goals?
3. What are their tasks?
4. Use cases and scenarios

In each row, include a space for the persona name and photo, as in the example.

Design Concept: The design concept distills key aspects of the rhetorical situation to draw conclusions about

• ethos (how the author/writer/client wants to be perceived)
• how users will actually use the document/site
• general goals of the design (what it should convey, how it should look, what should be highlighted)

On your Design Concept page, leave room for idea clusters tied to purpose and use, as in the example.

Wireframe: Create one page that blocks out important regions of the page and identifies what goes where, as in the "Home page wireframe" example. You should pick a layout for a particular type of document, one that you might want to produce in a subsequent project, using Before and After Page Design or DIY: Design It Yourself for the layout parameters.

Colors / Typography: Include one page that identifies the color palette, typography, and features of any printed media (type of paper, color, coating, etc.). Your template will include regions for this content. Use a sample color palette that you can create from a resource like Color Mixers or Firefox's Web Developer plug-in.

3. Deliverables: Export your Project Management Brief as a PDF document and post it to your blog. Use this tag: Project 1. You should also print one copy to turn in. The due date is Tuesday, February 17, by the start of class. You should include a short cover letter ("Submission Notes") that explain any special circumstances and/or request feedback on a particular aspect of your work.

Grading and Criteria

This project counts as 10 percent of your course grade. Your deliverables should have all of the components mentioned in Step 2, and your template should be neatly organized and elegantly presented. All major assignments will be graded on the standard plus-minus letter-grade scale: A=100-94, A-=93-90, B+==89-87, B=86-84, B-=83-80, C+=79-77, C=76-74, C-=73-70, D+=69-67, D=66-64, D-=63-60, F=59 or below.

Questions

Don't be afraid to ask them in class or by email . . .