Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

The Process of Wireframing a Web App

nathanbarry.com

Post reply on HN
Print view View original

11–15 of 15 posts

Re: The Process of Wireframing a Web App

#11

Post by saraid216 »

dorseymike wrote: post #8

This 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 e…

I've known about this method for a long while (back as early as 2004), but I've always found it easier to actually mock it up in HTML/CSS and then make changes on the fly. It might be my personal skill level that makes the difference, but it worked out better for me.

(My favorite design sessions remain the ones where I sat in a room, projecting my laptop onto a screen, and speed-editing CSS and PHP while my boss made suggestions at the front of the room. And then I'd go, "So, like this?" and refresh.)

Not really recommending it so much as saying it's a thing that can be done.

Re: The Process of Wireframing a Web App

#12

Post by dorseymike »

saraid216 wrote: post #11
dorseymike wrote: post #8

This 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 e…

I've known about this method for a long while (back as early as 2004), but I've always found it easier to actually mock it up in HTML/CSS and then make changes on the fly. It might be my personal skill level that makes the difference, but it worked out better for me. (My favorite design sessions remain the ones where I sat in a room, projecting my laptop onto a screen, and speed-editing CSS and PHP while my boss made…

Yeah that's a good point. Your approach is getting easier and easier now with stuff like Bootstrap washing away CSS complexity...

Re: The Process of Wireframing a Web App

#13

Post by kaliblack »

My process helps me clearly understand what the user is trying to do and plays to my strengths, which aren't designing. For each user flow I do the following.

1) State the use case (who is doing what and why)

2) Write each stage of the flow in terms of user request, decision and information they need

3) Very rough sketches

This will throw up a lot of questions, mainly about edge cases, so I write those down separately. When all the main flows are done I start coding.

Re: The Process of Wireframing a Web App

#14

Post by dictum »

After sketching, I usually design a wireframe with gray boxes, visually flat (like Nathan's wireframes). I've been thinking of replacing this method with HTML wireframes using a simple CSS framework. That would allow me to link between wireframes, and would make it easier to deal with changes.

I've been postponing this for fear that it might add too much complexity and make things harder, but on second thought, it's worse that I have to basically remake my own framework every time I make a wireframe in Photoshop. Creating rectangles in Photoshop is so easy it's mind numbing, but as you work on a wireframe with multiple versions, it gets annoying.

I'm particularly interested in how Bootstrap 3 will look like when it's released, because the preview looks more or less like what I need: flat and responsive. It's not that I want to create visually flat websites, I just want a framework to create visually flat wireframes.

Re: The Process of Wireframing a Web App

#15

Post by culturestate »

nathanbarry wrote: post #7
jarjoura wrote: post #6

I 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.

If there's a Muji near you, check out their spiral-bound sketchbooks - I use the A4 version[1] and really enjoy it.

1. http://www.muji.us/store/art-and-craft/sketch-book-a4.html

Post reply on HN