Question

• Discuss about wireframes, mockups and prototypes (low-fidelity prototypes and high-fidelity prototypes): what are they? Compare them.
  • Propose any eventual tools (software tools or other) for each item.

plz type

Answer 1

Here is the answer for the question :

Basically the different stages of design flow are represented by wireframes, mockups and prototypes.

WIREFRAMES :

It's a graphic structure of a website or app containing the content and elements. Just like the blueprint of a building, to make it become a skyscraper needs many works and participants to be involved in. Likewise, the wireframe looks simple and needs furthermore works to be done by UX, UI, IxD designers. Briefly,Wireframe is a low fidelity layout design which has 3 simple but direct targets:

• Contains the main information
• Draw the outline of structure and layout
• Visual and description of the user interface

PROTOTYPE :

• A Prototype simulates user interaction, which is often confused with a wireframe and is a middle to high fidelity representation of the final product.
• Prototypes allow the user -

a) To interact with the interface and experience content.

b) To test the main interactions as if testing a final product.

• The final interaction between the user and interface is simulated and that is nothing but prototype.
• It is almost similar to final product although it might not look exactly like it.
• The interactions have a significant resemblance to the final experience and should be modelled with care.
• To reduce costs and speed up development cycles interdependence between the interface and backend mechanisms is often omitted.
• In User testing prototypes are used to their full potential.
• As they force the "reader" to take some efforts to understand the interface, prototypes aren't the best documentation one can imagine.
• As the interface is straightforward and tangible, a prototype is the most engaging form of design documentation.
• It is also time-consuming and expensive form of design communication.
• Prototypes are effective in simple projects.
• Combined with user testing and if they are done appropriately, prototyping can pay for itself.
• Prototyping is classified into two categories:-

A) Low fidelity prototypes -

They do not allow user interaction and are paper-based. It ranges from printouts to hand-written mock ups. The sketches of this type are quicker to create. It helps in enabling early visualization of alternative design solutions. It helps to provoke improvement and innovation. The users may feel more comfortable for suggesting changes when using rough sketches.

B) High fidelity prototypes -

They allow realistic(mouse-keyboard) user interactions and are computer based. It represent the user interface very closely. High-fidelity prototypes are more effective in demonstrating actual products to managements, clients and others and in collecting true human performance data(e.g. time to complete a task).

MOCKUP :

A mockup is a middle to high fidelity, static, design representation. Very often a mockup is a visual design draft, or even the actual visual design. A well created mockup:

• represents the structure of information, visualises the content and demonstrates the basic functionalities in a static way
• encourages people to actually review the visual side of the project

• If you want to get early buy-in from a stakeholder, mockups are particularly useful.
• Mockups are much quicker to create than prototypes and they don't have the resistance of low fidelity deliverables due to its visual nature.
• Mockups can form a great chapter of information if placed in the context of the whole design story and are good feedback-gatherer.

The eventual tools(software tools) available for the above three are :-

1) Balsamiq Mockup, Mockplus for wireframes and prototypes

2) Photoshop, Illustrator and Sketch for Mockup.

Here is a picture that can help you :

Fidelity Use General traits Cost ocumentation, Sketchy, black, uick ireframe fidelity white & grey the interface Interactive communication representation of middle to high SSS delity User testing reusable Prototype ackbone of the interface Static Gatheringg feedback and getting buy-in rom stakeholders middle to high delity ockup SS isualization

Hope the answer helps you...Do comment if you have any doubts...

Thanks