What is the difference between a Hi-Fidelity Prototype and a visual design?

Question

Many powerful prototyping tools, like Axure, allow us to create hi-fidelity prototypes that have design elements, such as proportions, margins, compatibility with screen resolution, font consistency, proper sample content and image, logos, icons, header, footer, consistent leading space, content formatting etc. However, even with the presence of design elements, they are called prototypes, and not visual designs. Why?

If this is true, what constitutes a visual design? What changes should we bring to a prototype that will make it a visual design?

Answer 1

It's high fidelity because it's closely matching the visual and interaction design the final product is likely to have. How closely depends on how much work you put into it and your workplace's standards. I've heard a rumor that Apple always makes 10 "final" products and discards all but the "best", but more generally high-fidelity prototypes are meant to incorporate everything that compromises the final product at that stage. The visual design is a big part of this, especially to differentiate it from low fidelity prototypes.

However, visual design isn't necessarily concerned with practicality, especially prototype-level practicality. Your prototype might not be 100% there because some programming/animations/art assets don't exist yet or are too hard to put together for what's not actually a final product. It's still a prototype, so the visual design isn't 100% represented in all cases.

I don't think you can really "bring changes" to a prototype to make it a visual design. You can make a prototype into a final product, which then has the visual design, or use the prototype as an example of the visual design, but you shouldn't be thinking them as the same entity.

High fidelity prototypes are dangerous exactly because people think they are the final product and they start to assume things can't be changed; test users will be reluctant to mention high-level problems with the design. Your team will likely be reluctant to change them as well; you put a lot of work into that! Isn't it ready to ship yet?

It's important to keep a layer of abstraction here; you can kill your prototype at any time to refine it, and that doesn't mean you're throwing away your visual design, you're just improving it. Ditto for interaction design. Your prototype might go on to look 100% exactly like your final product, but never assume it is.

Answer 2

I disagree that Axure his high fidelity. It's medium, at best.

That said, the terms prototype, design, hi/lo fidelity, etc. are all rather vague outside the context of a particular project or organization.

Personally, I prefer to adopt Agile methodologies whenever possible, which is primarily refining the design and interactions in working code as much as possible.

Answer 3

In a nutshell,

A Prototype is always not fully functional , just partial or mimics the final product. This is used to get an idea of what we are building and get the stakeholders feedback.

Visual design is to make the fully functional product into more attractive and luring one.

Answer 4

A high-fidelity prototype is likely to be based on the visual designs.

In typical waterfall type projects the functional spec (with wireframes) will be created and approved by the client. This is done first because wireframes grow out of sketches and discussions while visual designs take a lot more investment of time (and therefore money).

Once the client is happy with the basic structure of the application detailed in the wireframes the visual designs would be created. These visual designs show how the styling and branding etc has been interpreted and how all the various page elements would display (but not how they would function). Visual Designs are often used as the actual graphic elements that the front-end is built out of, while wireframes are used for reference.

A high-fidelity prototype will take the visual design elements and (in the case of Axure and the like) add them into the wireframe prototype to show how the page interactions and user-journeys will work when fully built (more or less as dummy websites with no actual code and functionality behind the scenes). This is usually faster to create than full HTML prototypes because Axure does a lot of the hard work for you, but does have the drawback that it is essentially 'throw-away' code. If prototypes are build in actual HTML and CSS then you're more likely to retain some of that code in the final product.

In summary: Wireframes (sketches then in low-fidelity Axure black and white mockups) > Visual Designs (full colour and branding concentrating on the style and design. i.e. in Photoshop) > High Fidelity Prototype (visual designs added into HTML or Axure prototypes to create a dummy website)

You can't create these hi-fi prototypes without first having some visual designs to build them out of.

Answer 5

In my experience, a prototype is used more for development purposes, whether it be demonstrating intended functionality for discussion with stakeholders, or to perform acceptance/usability testing prior to development work beginning.

Visual design is purely artistic, and is intended to focus on very specific things with respect to brand and visual identity (which coincidentally, wireframes typically do not speak to).

Answer 6

Some of the major difference would be

• Visual Design defines aesthetic aspects of the layout and nothing more but High-fidelity lockups use visual design as well as business logic, technical and development considerations and user-experience aspects.

• While laying down visual designs, designers tend to crate a fake High Fidelity Mock-up so they would appear to be real BUT just like they Visual Designer use "lorem Ipsum" in place of actual text, their use of business, technical and user-experience logic another sort of "loren Ipsum". Visual Design lack actual Information architecture, actual Content Strategy, have no performance considerations, no Interaction Design considerations and no user-experience aspects - BUT - High Fidelity mock-ups are meant to incorporate all of these and as close to real application as possible.

• Sometimes Visual Designs are made accurate and they actually contain all the wealth of High Fidelity Mock-ups. In that case they become High-Fidelity Mockups instead just a Visual Designs. It is no where written that HF Mockups must be interactive and must be made using Axure or similar applications; even though such mock-ups will be lacking interaction design but they will be High Fidelity Mockups instead of Visual Designs.

Answer 7

High-fidelity prototypes: are computer-based, and usually allow realistic (mouse-keyboard) user interactions. High-fidelity prototypes take you as close as possible to a true representation of the user interface. High-fidelity prototypes are assumed to be much more effective in collecting true human performance data (e.g., time to complete a task), and in demonstrating actual products to clients, management.

Low-fidelity prototypes: are often paper-based and do not allow user interactions. They range from a series of hand-drawn mock-ups to printouts. In theory, low-fidelity sketches are quicker to create. Low-fidelity prototypes are helpful in enabling early visualization of alternative design solutions, which helps provoke innovation and improvement. An additional advantage to this approach is that when using rough sketches, users may feel more comfortable suggesting changes