The Process of Wireframing a Web App
nathanbarry.com
The Process of Wireframing a Web App
1–10 of 15 posts
Re: The Process of Wireframing a Web App
#2There is always a debate about how best to move from idea to finished product. This is just my method. Would love to hear yours.
Ryan Singer (37signals) actually jumps straight from sketch to code, but then takes screenshots and brings them into Photoshop when he needs to work on more details.
Find a process that works for you.
Re: The Process of Wireframing a Web App
#3I have been using an extra step what I'd to call "Interactive wire frames". The entire process goes something like this:
1) Write down in a few paragraphs the objective of your project. what it is you want to do and what this project needs to achieve. If you work for a client, discuss this text with your client until you're both happy about it. It's this text that's going to define the scope of your project.
2) Set up a requirements and scope document. This document will describes in greater detail what you discussed in the document at step 1 and it's this document that will become your official Scope of Work document. If you have a client, discuss this document with your client and get sign off.
3) Based on the requirements and scope I create wire frames using Balsamiq. If you have a client then discuss the wire frames with your client and get sign of before moving on.
4) Based on the wire frames I now create "Interactive wire frames" using Bootstrap. I basically recreate the Balsamiq wire frames in Bootstrap. This allows you and your client to click through it. The difference between a paper wire frame and an interactive one is that the interactive wire frame will bring out issues early on. Again, if you have a client get sign off.
5) Build. Uh? That's right. At this point I build as much of the core functionality as possible and I use the interactive wire frames for the front end of it. This allows me to fine tune the functionality and to test if all the objectives are met. Discuss with your client whenever you have something significant to demonstrate.
6) Design. Often design can be started during step 5. Very important here, discuss the designs with your client (if you have one) and get sign off.
7) Implement designs and cross browser test. Again, with a client, get sign off.
Re: The Process of Wireframing a Web App
#4I have been using an extra step what I'd to call "Interactive wire frames". The entire process goes something like this: 1) Write down in a few paragraphs the objective of your project. what it is you want to do and what this project needs to achieve. If you work for a client, discuss this text with your client until you're both happy about it. It's this text that's going to define the scope of your project. 2) Set u…
That's interesting. To me it seems like a long process, but if you can't afford mistakes and need the client's approval it may make sense.
Thanks for sharing!
Re: The Process of Wireframing a Web App
#5There is always a debate about how best to move from idea to finished product. This is just my method. Would love to hear yours. Ryan Singer (37signals) actually jumps straight from sketch to code, but then takes screenshots and brings them into Photoshop when he needs to work on more details. Find a process that works for you.
I start as you do - paper first ;)
Sometimes I start even simpler than your initial sketches and just think about the things I want on each page and how much emphasis I want to spend on them - using little bar charts (http://adrianh.posterous.com/little-bar-charts-to-show-page-...)
From the looks of it I stay on paper a bit longer than you do. I find I can iterate on paper, and do paper prototyping, faster than I can mess with Photoshop or Balsamiq.
From there I usually jump straight to code (I come from a dev background and I find I'm more productive there than I am with tools like Axure).
Re: The Process of Wireframing a Web App
#6I wouldn't bother buying (overpriced) design sketch books. Just find a couple free design templates online that work with your project and print them at Kinko's. I also get them 3-hole punched so they can be easily moved around.
Stickies are also a great way of making notes you can move around on each page and do take advantage of setting meaning to color.
Filling in with matching highlighters can also help you mark actions and flow. Plus who doesn't love a good coloring book moment. :-)
Re: The Process of Wireframing a Web App
#7I wouldn't bother buying (overpriced) design sketch books. Just find a couple free design templates online that work with your project and print them at Kinko's. I also get them 3-hole punched so they can be easily moved around. Stickies are also a great way of making notes you can move around on each page and do take advantage of setting meaning to color. Filling in with matching highlighters can also help you mark…
I like using printer paper without lines.
The dotgrid book is nice because it is spiral bound so there isn't a mess of papers. Most spiral bound books have lines which suck.
Re: The Process of Wireframing a Web App
#8This is a really helpful outline.
I like your idea of keeping a "features" list and "questions" list separate. Otherwise, it gets confusing when the two get jumbled together.
One tool that most hardcore engineers chuckle at - but that I love for the higher fidelity mockups - is using Keynote/Powerpoint. It is extremely fast to make things like buttons, move text around, etc.
Most importantly, these tools make super easy to make a duplicate of any view and completely overhaul the layout...giving the ability to show users A/B options for the same slide.
Finally, it's easy to export the entire "app" mockup as one PDF file (made of many slides) and share all the mockups with users. I like it as a last step before diving into actual CSS/HTML. I like this more than Balsmiq because it lets me get closer to pixel perfect before I start coding - emphasis on actual look & feel, vs functionality (which balsamiq is probably faster at depicting).
Anyway, great writeup, thx for sharing.
Re: The Process of Wireframing a Web App
#9Great to see your working process!
My mousepad is a pad of paper, when a page gets too many notes (or too many coffee stains) it gets torn off.
Re: The Process of Wireframing a Web App
#10interesting, thx for sharing.