When it comes to getting things done, the way that works is the best one. After a chat with a friend about my wireframing process (thanks, Dylan), (I wanted to know if a) is this really wireframing? and b) do other people do it like this?) the friend said write about it. Here’s my process.
New project, step-by-step
- Inventory: Gather requirements, preferably on paper. Research how others approached similar challenges.
- Inventory: With dry-erase markers (black, green, blue, and red) and the pile of requirements, plop my butt down in front of a whiteboard. Yes, sit on the floor. This way I connect to my kiddo self, release expectations and unleash creative thought. Itemize each element of the interface, with black ink, in a series of hierarchical bulleted lists, until I run out of requirements.
- Audit: Stand up, step back, and review the notes.
- Audit: Using a green pen, sketch relationships, interactions, and notes.
- Audit: Designate links in blue.
- Audit: Note questions to research in red.
- Research: Gather information, ask questions, of current users and competition.
- Wireframe: Open up a blank html document, with some base CSS already created, and define the html hierarchy (including accessibility, such as aria, off-screen text, etc). The CSS allows me to see the fluidity of the content across a variety of viewport dimensions simply by resizing the browser. Create any necessary viewport specific CSS. This might be a single page, or a collection of linked pages. Visual design may be minimal or brand-related. It depends.
- Wireframe: Annotate any discussion items using a background-color. I may use an ordered list and coordinating spans to annotate traditionally.
- Audit: Once these steps are complete, content re-evaluation begins (either with a content strategist, or I put that hat on). Next, I include any additional code for accessibility. I review the wireframe in as many devices and browsers as I have access to (as a sole proprietor I would upload the wireframe to a test site, then head to the mall and look at my work on sample devices in stores), hand write notes as necessary. Revise wireframe.
At this stage, I may do some initial user testing, to determine if the flows work, or show it to the stakeholders. It depends. Sometimes these wireframes become the basis for the production code, and other times they are solely documentation.
What’s your process like?
