Continuing on from our process in the define phase, we now have a document that lists our thesis, users, their goals, objects, relationships, attributes, and processes. Now we’re ready to start getting down to realizing our plan on paper. But don’t jump to Photoshop just yet! As we’ve gone with a top-down approach, we’ll continue that in the design phase as well.
Design, Step 1: Create a series of screen requirements.
Now it’s time to translate our processes into a conceptual set of screens. What steps in the processes logically combine together? What states do each element appear (e.g. initial, focused, accepted, error)? You may need to conduct some user research, such as card sorting or participatory design, to correctly organize these elements into screens. Don’t worry about layout or visuals just yet, first focus on listing out what needs to be on each screen, and how the screens connect to each other.
Design, Step 2: Draw up wireframes for each screen.
Now that you have your screen requirements, its time to figure out how to lay them out. There’s a million wireframing tools out there; I’m still an advocate for pen and paper wireframing. Don’t think about graphical elements yet, just focus on laying out each screen and making them work together.
Pay particular attention here to keeping similar functions on the same part of the page throughout. Also emphasize the hierarchy of elements; which elements are the most important?
Normally, it’s a good idea to come up with several wireframes for each screen, and to look at them collectively to find patterns that work well together. You may wish to conduct usability testing on your wireframes, or surveying to decide user priorities.
Design, Step 3: Design a style guide that defines the look and function of elements.
Now that we know what elements are going to appear throughout our project, and we have an idea of how things will be represented, we can come up with a style guide. You’ll want to develop a consistent look and feel that covers most of the element you need. If you aren’t familiar with style guides for application projects, you may wish to look at the Twitter Bootstrap or Github CSS Style Guide as well-developed examples.
Your style guide should end up in the medium of the project, be it HTML and CSS or XCode ready so that it is put into practice. Pay particular attention to typography, grids, and metrics, as these will define most of your other elements. I highly recommend conducting user research in this stage as well to find out how your users identify themselves, such as intellectual, funny, detail-oriented, opinionated, etc., and let the visuals reflect your users.
Design, Step 4: Compose your screens.
In the last stage of the design phase, you want to put the wireframes and the style guide together to make compositions of each screen. You can develop these compositions in any medium you choose, but I’d recommend in the end having them ready to be implemented in code as with the style guide. In some cases, once you have the style guide and wireframes, that may be enough information by itself to generate your pages: YMMV. In more complex cases, a composition will be necessary.
If you have more than one person on your team, its easy to distribute the project across multiple people and in an iterative fashion. You don’t have to do the steps in precise, waterfall, order. You’ll need to start the planning phase first, but once you define the user goals you can start design and development simultaneously and iteratively. After we go through the five phases, we’ll write another post about how this process can be divvied up and broken into smaller pieces.
- You’ll want to do most of the define phase before entering the design phase.
- The four steps of the design phase are screen requirements, wireframes, style guide, and composition.
- Use a top-down approach. It’s easier to make good decisions when you focus on one problem at a time.
- Conduct user research as you design; research data will make your decision-making much easier and quicker.
Next week we’ll go into the development phase, and we’ll cover how our planning and design ties into the way we carry out our ideas.
- Phase 1, Define: Thesis, Users, Goals, Objects, Relationships, Attributes, & Processes
- Phase 2, Design: Requirements, Wireframes, Style guide, & Composition
- Phase 3, Develop: Server, Models, Controllers, Views, Development, & Launch
- Phase 4, Distribute: Branding, Account, Write, Business plan, Research, Legal, & Monetize
- Phase 5, Iterate: Research, Design, Develop, Market, & Support