Think Vitamin - Latest Comments in 20 Steps to Better Wireframing

Re: 20 Steps to Better Wireframing

Matthew — Mon, 13 Apr 2009 18:34:24 -0000

Perhaps a print page would be nice. Printed out this article and got about 20 pages of comments.

Re: 20 Steps to Better Wireframing

theme park consulting — Thu, 09 Apr 2009 01:16:24 -0000

Awesome article. I've started doing wireframes recently at work and this article was certainly a good reading

Re: 20 Steps to Better Wireframing

jane4455 — Mon, 06 Apr 2009 07:46:25 -0000

I completely agree about including something about planned/thought of interactivity. In my case (I design a lot of data driven flash-based apps), without describing the interactivity to some extent would sell the idea short. If I'm wireframing or sketching a whole page design and there's some interactivity/widgets that's required to view layers of info, that's included as well. I'll also do smaller sketches of the widgets with a little more detail.
www.Start-an-Internet-busin...

Re: 20 Steps to Better Wireframing

JasonSt — Fri, 03 Apr 2009 08:46:22 -0000

Thanks for the article. I for one find myself rushing the code a bit too much and making mistakes in the process. My last site looks better by slowing things down and doing them right.
JasonSt Men's health issues

Re: 20 Steps to Better Wireframing

Chance Bliss — Tue, 31 Mar 2009 15:41:06 -0000

I agree with all the points you made except for one: "I think that the wireframe should be a document though rather than something interactive". You are designing something interactive so the wireframe needs to be interactive. In my experience, a HTML/CSS wireframe gives the UX designers, programmers and writers a much better understanding of how the page, section, form, etc. will work. This is especially true in dealing with dynamic navigation or content. Instead of explaining that a user has to select "Y" to get "X" in a written or illustrative form, you can just show it. Doing the upfront HTML work has saved me a lot of time explaining in the long run.

Re: 20 Steps to Better Wireframing

com — Tue, 24 Mar 2009 03:45:12 -0000

Thanks for the info. This is important for time managers like me.

Re: 20 Steps to Better Wireframing

LMartian — Sat, 14 Mar 2009 14:10:06 -0000

I'm a designer and I absolutely agree that design should not be part of the wireframing process, wireframing helps me show the scope of the project to a customer (as well as giving me a path to follow when I'm designing). Once this is approved any changes become billable, you don't want to create a presentation and take away where the focus should be, at least initially, on usability and the scope of the project.

Re: 20 Steps to Better Wireframing

Daniel — Fri, 06 Mar 2009 20:10:01 -0000

And here I am thinking I was in the minority that designs websites on paper before going directly to photoshop. Im going to start wire framing with marker like you did. Its a good idea and looks a lot better then pen chicken scratch lol

Re: 20 Steps to Better Wireframing

Dave scott — Fri, 06 Mar 2009 13:21:01 -0000

Interesting articles and shows the complexities that need to be covered prior to the coding. impressive read and the points make it easier to understand.

Re: 20 Steps to Better Wireframing

Linda012 — Fri, 06 Mar 2009 02:04:46 -0000

If you wish to be associated with a professional sporting tournament, that is, you wish to be a part of live action; you need to purchase valid Tickets to a match. for more information please visit at Concert Tickets . you will get your ticket over here without any obstacle.

Re: 20 Steps to Better Wireframing

Ahmad Amran — Tue, 03 Mar 2009 05:50:24 -0000

I love iplotz.com better than balsimiq . +1 to iplotz.

Re: 20 Steps to Better Wireframing

Oleg — Tue, 03 Mar 2009 04:18:34 -0000

it`s true. but in this aplication there are functions of which it is not in visio

Re: 20 Steps to Better Wireframing

Oleg — Tue, 03 Mar 2009 04:14:56 -0000

understand a structure of project. make a tree or map of prototype

great article. we are following all points

Re: 20 Steps to Better Wireframing

weboncloud — Mon, 02 Mar 2009 21:02:23 -0000

For people who are total beginners and have never seen wireframes and how they look like, is there any resources or examples? Would really appreciate it if you gurus could point out towards the right direction.

Re: 20 Steps to Better Wireframing

vst plugins — Mon, 02 Mar 2009 10:24:20 -0000

I use this to take notes before starting any project

Re: 20 Steps to Better Wireframing

vst plugins — Mon, 02 Mar 2009 10:15:41 -0000

I've always used wireframe to make notes when starting projects

Re: 20 Steps to Better Wireframing

Kevin Howard — Sat, 28 Feb 2009 21:40:00 -0000

Tim Wright wrote: "I've heard a lot of argument for killing the old fashion wireframe in favor of prototypes to show interaction. Any thoughts on that?"

I guess it depends on what "old fashion wireframe" means. But essentially I would agree. The wireframes we produce are quite sophisticated, sometimes we include things like functional drop down lists and dummy images, but we find it really worthwhile when working on the functional design of a site. I'm sure most clients would appreciate more detailed wireframes.

Kev said: " I started doing wireframes in Illustrator using grey-scale so as not to distract the client with colours etc. I've moved to using paper wireframes for speed, this also lets others get involved in meetings."

There are many tools for wireframing that are easier than Illustrator! One of the guys who works for me was cursing his Uni lecturer once he discovered how easy it was to create wireframes using MS Publisher (because his Uni lecturer had steered everyone down the Illustrator path). There are two of us working on the functional design for a complex site and Publisher enables us to share documents for modification or re-use of elements. It also allows pages to be saved in MHTML or as a jpeg. Much more efficient than pen and paper. IMHO :)

Of course at the end of the day there's no right or wrong, there's just different ways of approaching the functional design phase.

Re: 20 Steps to Better Wireframing

raymondphilippe — Sat, 28 Feb 2009 12:59:54 -0000

Very informative! I like it..

Re: 20 Steps to Better Wireframing

Yanay Zohar — Sat, 28 Feb 2009 02:03:18 -0000

One small (yet critical) addition to your points, would be to *keep testing* the integrity and flow as a part of the development cycle, and not just a one-time blueprint.
Force yourself to go over everything on a weekly(?) basis, as a sanity check.
It's very easy to under-estimate the influence small changes in the development can have over the entire user experience.

And sure.. Balsamiq is a great for quick mockups. You can read my impressions of using it here: http://www.aboutux.com/?p=22

Re: 20 Steps to Better Wireframing

jennypauls — Sat, 28 Feb 2009 01:13:59 -0000

My Site

Re: 20 Steps to Better Wireframing

Joel McHale — Thu, 26 Feb 2009 22:34:16 -0000

Thanks for the article on wireframing - very informative.

Re: 20 Steps to Better Wireframing

Ally — Thu, 26 Feb 2009 18:49:11 -0000

As some other said, we also use wireframes in the beginning phase of a project.

Re: 20 Steps to Better Wireframing

abewallin — Wed, 25 Feb 2009 16:44:50 -0000

Excellent article. Love the "half an hour conversation about the merits of blue" bit....any design elements in wireframes always take the discussion off course. I often use only black and white to create wireframes for my clients specially so they will focus on the functionality.

As a designer/developer I've always found wireframes to be an important step. I do differ with you on the inclusion of ajax and other layout elements. I consider those to be part of the functionality and include them within the wireframes.

Re: 20 Steps to Better Wireframing

Pauline — Wed, 25 Feb 2009 12:42:54 -0000

A plan is essential to reach the target you have set because it breaks down several checkpoints to achieve and complete, so in final you reach your goal with better motivation and speed.

Re: 20 Steps to Better Wireframing

Fabrice — Wed, 25 Feb 2009 08:51:07 -0000

I have collected a list of wireframing and prototyping tools you may find useful. See http://weblogs.asp.net/fmar...