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?

  • 1
    In complex software, 'fidelity' does not refer to visual design alone. There are 5 dimensions of a prototype that can range from low-fidelity to high-fidelity and whose level is independent of the other dimensions. (1)Level of Visual Refinement, (2)Breadth of Functionality, (3) Depth of Functionality, (4) Richness of Interactivity, and (5)Richness of Data Model. See McCurdy for more details. – user1757436 Feb 26 '13 at 17:55

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.

| improve this answer | |
  • So, a visual design is just another finalized roadmap to the best prototype which in turn has the best chances of leading into the final product.. is this how we can acknowledge visual design and prototypes ?? – Vinay Jul 9 '14 at 5:31

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.

| improve this answer | |
  • +1 except for the Axure not having high fidelity part :). Each organization and its own definitions. – Vitaly Mijiritsky Mar 27 '12 at 20:35
  • 1
    I think it's dangerous to consider Axure high fidelity as a prototype for web projects. The interaction code Axure uses isn't anything close to what actually has to be implemented. Perhaps fine for figuring out page click-through paths but if we're talking high fidelity complex user interaction design, Axure is going to cause problems. – DA01 Mar 27 '12 at 20:45
  • 1
    Agile and UX don't always play well together - but that's a different subject. Axure can produce high fidelity visual interfaces for some kinds of projects and is good for user testing / stakeholder buy in. Other times html/css is the way to go - although I don't agree with UX folks taking on too many engineering tasks due to the mindset clash. – Stewart Dean Feb 26 '13 at 11:11
  • Also probably another topic, but I'd say the mindset clash is exactly why UX should be taking on more UI engineering. ;) – DA01 Feb 26 '13 at 16:33
  • @DA01 I think the comment about the interaction code Axure uses not being close to what has to be implemented isn't really relevant: it's a prototyping tool, not an early stage code development system. But IIRC you prefer writing prototypes as code anyway? – Peter Nov 27 '15 at 11:57

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.

| improve this answer | |

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.

| improve this answer | |
  • "the wireframe prototype" - erm, two different things there. – Rahul Mar 27 '12 at 20:09
  • @Rahul By that I mean a prototype based on just the wireframes. A Lo-fi prototype, if you will. – JonW Mar 27 '12 at 20:12
  • 1
    You can have high-fidelity interactions, high-fidelity flows, high-fidelity UI elements, etc. So, one could certainly make high fidelity interactions even without high fidelity icons and buttons. It's not usually a good idea, but there are instances where it's important to figure out the complexities of the interaction as early as possible. – DA01 Mar 27 '12 at 20:48

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).

| improve this answer | |
  • 3
    Visual design is not "purely artistic" - any kind of (quality) visual design always takes function and form into account. – Rahul Mar 27 '12 at 20:12
  • Rahul makes a good point. The visual designer is as much a designer as a UX designer and I would expect to work in collaboration in aspects of interaction design with any visual designer I work with, not just have them colour in the wireframe. – Stewart Dean Feb 26 '13 at 11:16

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.

| improve this answer | |

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

| improve this answer | |
  • Welcome to the site. As I understand it, the question was about the difference between high-fidelity prototypes and visual designs (such as graphic comps and redlines); your post appears to be about the difference between low-fidelity prototypes (such as rough wireframes and sketches) and high-fidelity prototypes. Please clarify. – Graham Herrli Nov 27 '15 at 6:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.