I’m still amazed that people in this field get such fundamentally core concepts confused. Makes me wonder if those who get confused about this should even be practicing interaction design! It’s like a surgeon confusing muscle and bone–seriously.<\/p>\n
Wireframe:<\/strong> a static<\/em> skeletal structure of content, drawn to proportion for your screen dimensions & resolution. Lacking any meaningful stylistic treatment (just basic gray shades), it’s a relatively quick and lightweight stepping stone to visual mockups\/comps.<\/p>\n Prototype:<\/strong> a behavioral<\/em> representation of the final product, at varying degrees of fidelity (from skeletal to rich). There may be “feature prototypes” to explore specific behaviors in a tightly constrained, almost sandboxed fashion. And there may be a “functional (or master) prototype” which comprehensively covers the behaviors and use cases so thoroughly and realistically so as to be confused for the actual live code. The key thing is demonstration of behavior<\/em><\/strong> in some fashion. (Not sure if Jeff Hawkins’ famous “block of wood in my pocket” qualifies, seems more like a model which is kinda splitting hairs…) But ultimately a prototype is something behavioral<\/em><\/strong> to explore the usage\/behavior issues, identify & work through those type of problems, and suggest directions for other alternatives, ultimately feeding that virtuous cycle of iterate\/design\/test, etc.<\/p>\n (BTW, the film “Sketches of Frank Gehry”<\/a> by the late, great Sydney Pollack features a great portrayal of bonafide “paper prototyping” to explore various structural and formal possibilities, with scissors and construction paper–even some Scotch tape!)<\/p>\n","protected":false},"excerpt":{"rendered":" I’m still amazed that people in this field get such fundamentally core concepts confused. Makes me wonder if those who get confused about this should even be practicing interaction design! It’s like a surgeon confusing muscle and bone–seriously. Wireframe: a static skeletal structure of content, drawn to proportion for your screen dimensions & resolution. Lacking … Continue reading “Wireframe vs. prototype”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_themeisle_gutenberg_block_has_review":false,"footnotes":""},"categories":[21],"tags":[],"class_list":["post-130","post","type-post","status-publish","format-standard","hentry","category-general-stuff"],"_links":{"self":[{"href":"https:\/\/www.ghostinthepixel.com\/index.php?rest_route=\/wp\/v2\/posts\/130","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ghostinthepixel.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ghostinthepixel.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ghostinthepixel.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ghostinthepixel.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=130"}],"version-history":[{"count":0,"href":"https:\/\/www.ghostinthepixel.com\/index.php?rest_route=\/wp\/v2\/posts\/130\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.ghostinthepixel.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=130"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ghostinthepixel.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=130"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ghostinthepixel.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=130"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}