4 ms·

The Right Way to do Wireframes

euroclydon 17y ago
I would love to what tool were they using to create the layout after the paper wireframes? It looks like it can make 5X better looking web pages than I can, in half the time.
- pclark 17y ago
  Visio or OmniGraffle
  - ams6110 17y ago
    It's OmniGraffle, you can catch a glimpse of the menu bar at around 0:44 or so.
kellishaver 17y ago
I really hate to be "that person" but while I enjoyed the video, I really could have done without the vulgarity in the music. My kid was watching. - Yes, I know there's a mute button, but I didn't recognize the song, so I didn't know to mute it until it was too late. - No, I don't shelter my kid from everything, nor do I think I should, but I also don't think a 7yr old needs to be pointlessly exposed to such things in her own home, either.
- blhack 17y ago
  You know what I was doing when I was seven? Catching salamanders. Maybe your 7 year old daughter should be doing something other than watching youtube videos about creating website mockups. I'm all for involving your kids, and that is awesome, but it is a Saturday night, and it's rapidly becoming spring. Take your daughter out and do something fun with her.
  - z8000 17y ago
    "Maybe Santa doesn't need help doing Santa's job!" You are assuming a lot here buddy. Save your preaching for Sunday school.
  - kellishaver 17y ago
    Wow, way to jump to conclusions about my parenting abilities there. Just to put your mind at ease that my kid's not wasting her life away on the internet, we'd finished up an art project we'd been doing together and I was browsing HN while waiting for her to get out of the shower so we could watch Doctor Who. She came back in the room just as I was playing the video and came over to see what I was doing. She's very interested in learning HTML/CSS and wanted to watch. This was after spending several hours today outside playing with the neighbor kids, before, that is, she came in to do her chores (put away the clean dishes, put her laundry away, help gather up the trash) and have dinner, wherein she ate her vegetables without complaint. After Doctor Who, she read for a bit and went to bed. Tomorrow will be playing with the cousins and visiting the grandparents. She's a very smart, happy, well-behaved kid living a quite balanced and normal life. I'm very proud of her.
    - alanthonyc 17y ago
      Good to hear. However, I don't there was any need to justify the comment with an answer, or your parenting to the internet.
      - kellishaver 17y ago
        No, you're right. There wasn't, and I probably shouldn't have justified it with a response. Normally, it wouldn't bother me but tonight, for some reason, it struck a nerve. Thanks.
    - alanthonyc 17y ago
      Good to hear. However, I don't there was any need to justify the comment with an answer, or your parenting to the internet.
    - 17y ago
gyardley 17y ago
OmniGraffle Pro rocks for wireframing - I use it all the time. Be sure to add some web-specific stuff to your Stencil library - I use the ones here, and judging from the labels in the mockups in the video, so does that guy: http://konigi.com/tools/omnigraffle-wireframe-stencils http://konigi.com/tools/omnigraffle-wireframe-stencils In addition, learn how to effectively use grouping and layers, especially shared layers - this is functionality that's easily missed if you just open OmniGraffle and start screwing around with it, but it's so useful. Should you have a subscription, lynda.com added a decent OmniGraffle tutorial not so long ago.
vitovito 17y ago
It should be noted that this isn't a movie showing "the right way to do wireframes," it's from a talk about how there is no "right way to do wireframes," there's only the appropriate way to do wireframes at the appropriate level of fidelity for your task/project/client. There are several "right way to do wireframes" videos on YouTube from that talk, each illustrating how a different professionals did wireframes for the same project using different processes and techniques. Experimenting with different design techniques, processes and critiquing methods is one of the goals of my ongoing design workshops: http://vi.to/workshop/ http://vi.to/workshop/ (if you're in Austin, TX, you should come out!)
hussong 17y ago
While the video makes the wireframing process look like a lot of fun, the resulting UI just looks rather crammed and confusing to me. I'm wondering whether this is a side effect of the tool in the sense that it's easy, fun and rewarding to add more elements (think FarmVille).

I would love to what tool were they using to create the layout after the paper wireframes? It looks like it can make 5X better looking web pages than I can, in half the time.

pclark 17y ago
Visio or OmniGraffle
- ams6110 17y ago
  It's OmniGraffle, you can catch a glimpse of the menu bar at around 0:44 or so.

kellishaver 17y ago

I really hate to be "that person" but while I enjoyed the video, I really could have done without the vulgarity in the music. My kid was watching. - Yes, I know there's a mute button, but I didn't recognize the song, so I didn't know to mute it until it was too late. - No, I don't shelter my kid from everything, nor do I think I should, but I also don't think a 7yr old needs to be pointlessly exposed to such things in her own home, either.

blhack 17y ago
You know what I was doing when I was seven? Catching salamanders. Maybe your 7 year old daughter should be doing something other than watching youtube videos about creating website mockups. I'm all for involving your kids, and that is awesome, but it is a Saturday night, and it's rapidly becoming spring. Take your daughter out and do something fun with her.
- z8000 17y ago
  "Maybe Santa doesn't need help doing Santa's job!" You are assuming a lot here buddy. Save your preaching for Sunday school.
- kellishaver 17y ago
  Wow, way to jump to conclusions about my parenting abilities there. Just to put your mind at ease that my kid's not wasting her life away on the internet, we'd finished up an art project we'd been doing together and I was browsing HN while waiting for her to get out of the shower so we could watch Doctor Who. She came back in the room just as I was playing the video and came over to see what I was doing. She's very interested in learning HTML/CSS and wanted to watch. This was after spending several hours today outside playing with the neighbor kids, before, that is, she came in to do her chores (put away the clean dishes, put her laundry away, help gather up the trash) and have dinner, wherein she ate her vegetables without complaint. After Doctor Who, she read for a bit and went to bed. Tomorrow will be playing with the cousins and visiting the grandparents. She's a very smart, happy, well-behaved kid living a quite balanced and normal life. I'm very proud of her.
  - alanthonyc 17y ago
    Good to hear. However, I don't there was any need to justify the comment with an answer, or your parenting to the internet.
    - kellishaver 17y ago
      No, you're right. There wasn't, and I probably shouldn't have justified it with a response. Normally, it wouldn't bother me but tonight, for some reason, it struck a nerve. Thanks.
  - alanthonyc 17y ago
    Good to hear. However, I don't there was any need to justify the comment with an answer, or your parenting to the internet.
  - 17y ago

gyardley 17y ago

OmniGraffle Pro rocks for wireframing - I use it all the time. Be sure to add some web-specific stuff to your Stencil library - I use the ones here, and judging from the labels in the mockups in the video, so does that guy: http://konigi.com/tools/omnigraffle-wireframe-stencils http://konigi.com/tools/omnigraffle-wireframe-stencils In addition, learn how to effectively use grouping and layers, especially shared layers - this is functionality that's easily missed if you just open OmniGraffle and start screwing around with it, but it's so useful. Should you have a subscription, lynda.com added a decent OmniGraffle tutorial not so long ago.

vitovito 17y ago

It should be noted that this isn't a movie showing "the right way to do wireframes," it's from a talk about how there is no "right way to do wireframes," there's only the appropriate way to do wireframes at the appropriate level of fidelity for your task/project/client. There are several "right way to do wireframes" videos on YouTube from that talk, each illustrating how a different professionals did wireframes for the same project using different processes and techniques. Experimenting with different design techniques, processes and critiquing methods is one of the goals of my ongoing design workshops: http://vi.to/workshop/ http://vi.to/workshop/ (if you're in Austin, TX, you should come out!)

hussong 17y ago

While the video makes the wireframing process look like a lot of fun, the resulting UI just looks rather crammed and confusing to me. I'm wondering whether this is a side effect of the tool in the sense that it's easy, fun and rewarding to add more elements (think FarmVille).