Hi, I’m Brian Dys — a photographer from the inside looking out · a composer entangled in electronic music · a UX designer · a spouse, a parent, & everything in between.
- Convert the marked up groups into
- Instead of
<div>, mark up the group of form elements in
- Mark up the text nodes in
- Add class attributes to elements that need to be differentiated
- Mark up the structure in HTML
- Mark up the groups in HTML
- Mark up the individuals in HTML
Admittedly in the design industry, there are lots of terms being used to call design artifacts (not to mention their combos)—flowcharts, wireframes, wireflows, comps, FAs, and prototypes.
A prototype is not an artifact per se but what we make of an artifact. It cuts across disciplines and stages in the design process because of its purpose—to foster innovation, collaboration, and creativity by presenting and testing it to a relevant audience.
A set of wireframes designed to communicate a specific functionality is a prototype. Even a flowchart that communicates the flow of tasks is a prototype.
Recently, I’ve come across the term “Click–Through Prototypes” which also is “Interactive Prototypes”—the ones wherein the test participant could click on specific elements and be taken to the next interaction point.
I knew it from decades ago as “image–mapping” or putting “hot spots” in elements we want to be clickable.
Innovation is not a skill. It is a culture, it is a mind set, a destination rarely reached, and the bountiful return on an investment made in the education of people unafraid.
Aaron Madolora, Chief Innovation Officer, Voyager Innovations
Wireflows. First time today that I’ve read about this fairly novel artifact. What I’ve been using (and sharing with my team) is called an Interaction Diagram—which, basically, is a Task Flow Diagram plus Wireframes.
Reading that article from Nielsen Norman Group, I’ve found out that there could be a high–fidelity wireflow—which in the example given, it showed a high–fidelity mockup.
As I understand it, there’s a distinction between a wireframe and a mockup. So, how would one call a “wireflow” that instead of wireframes, uses mockups as its visuals? Mockflow?