Storyboarding can strengthen the user experience elements of your designs. Wireframe is a low fidelity layout of the design. Prototype captures the intent of a design and simulates multiple states of that design.

1. Storyboard, Wireframe
and Prototype
Prof. Manjusha A
http://www.isquareit.edu.in/

2. International Institute of Information Technology, I²IT, P-14 Rajiv Gandhi Infotech Park, Hinjawadi, Pune - 411 057
Toll Free - 1800 233 4499 Website - www.isquareit.edu.in ; Email - info@isquareit.edu.in

3.  A storyboard is a graphic organizer in the form of illustrations
or images displayed in sequence for the purpose of pre-
visualizing a motion picture, animation, motion
graphic or interactive media sequence.
International Institute of Information Technology, I²IT, P-14 Rajiv Gandhi Infotech Park, Hinjawadi,
Pune - 411 057 Toll Free - 1800 233 4499 Website - www.isquareit.edu.in; Email -
info@isquareit.edu.in

4. International Institute of Information Technology, I²IT, P-14 Rajiv Gandhi Infotech Park, Hinjawadi,
Pune - 411 057 Toll Free - 1800 233 4499 Website - www.isquareit.edu.in; Email -
info@isquareit.edu.in

5. International Institute of Information Technology, I²IT, P-14 Rajiv Gandhi Infotech Park, Hinjawadi,
Pune - 411 057 Toll Free - 1800 233 4499 Website - www.isquareit.edu.in; Email -
info@isquareit.edu.in

6. International Institute of Information Technology, I²IT, P-14 Rajiv Gandhi Infotech Park, Hinjawadi,
Pune - 411 057 Toll Free - 1800 233 4499 Website - www.isquareit.edu.in; Email -
info@isquareit.edu.in

7.  A film storyboard is essentially a series of frames, with
drawings of the sequence of events in a film.
 It helps film directors, cinematographers and television
commercial advertising clients visualize the scenes and
find potential problems before they occur.
 Besides this, storyboards also help estimate the cost of
the overall production and saves time.
 Often storyboards include arrows or instructions that
indicate movement.
International Institute of Information Technology, I²IT, P-14 Rajiv Gandhi Infotech Park, Hinjawadi,
Pune - 411 057 Toll Free - 1800 233 4499 Website - www.isquareit.edu.in; Email -
info@isquareit.edu.in

8.  In the case of interactive media, it is the layout and sequence
in which the user or viewer sees the content or information.
 In the storyboarding process, most technical details involved
in crafting a film or interactive media project can be efficiently
described either in picture or in additional text.
International Institute of Information Technology, I²IT, P-14 Rajiv Gandhi Infotech Park, Hinjawadi,
Pune - 411 057 Toll Free - 1800 233 4499 Website - www.isquareit.edu.in; Email -
info@isquareit.edu.in

9. International Institute of Information Technology, I²IT, P-14 Rajiv Gandhi Infotech Park, Hinjawadi,
Pune - 411 057 Toll Free - 1800 233 4499 Website - www.isquareit.edu.in; Email -
info@isquareit.edu.in

10. International Institute of Information Technology, I²IT, P-14 Rajiv Gandhi Infotech Park, Hinjawadi,
Pune - 411 057 Toll Free - 1800 233 4499 Website - www.isquareit.edu.in; Email -
info@isquareit.edu.in

11. International Institute of Information Technology, I²IT, P-14 Rajiv Gandhi Infotech Park, Hinjawadi,
Pune - 411 057 Toll Free - 1800 233 4499 Website - www.isquareit.edu.in; Email -
info@isquareit.edu.in

12. International Institute of Information Technology, I²IT, P-14 Rajiv Gandhi Infotech Park, Hinjawadi,
Pune - 411 057 Toll Free - 1800 233 4499 Website - www.isquareit.edu.in; Email -
info@isquareit.edu.in

13.  Wireframe is a low fidelity layout of the design.
 has 3 simple but direct targets:
1. Presents the main information group
2. Draw the outline of structure and layout
3. Vision and description of the user interface
International Institute of Information Technology, I²IT, P-14 Rajiv Gandhi Infotech Park, Hinjawadi,
Pune - 411 057 Toll Free - 1800 233 4499 Website - www.isquareit.edu.in; Email -
info@isquareit.edu.in

14. International Institute of Information Technology, I²IT, P-14 Rajiv Gandhi Infotech Park, Hinjawadi,
Pune - 411 057 Toll Free - 1800 233 4499 Website - www.isquareit.edu.in; Email -
info@isquareit.edu.in

15.  Designers only need to use lines, boxes, and gray color
(different grayscale indicates the different level) to complete.
 The content of a simple wireframe should include pictures,
video, and text etc.
International Institute of Information Technology, I²IT, P-14 Rajiv Gandhi Infotech Park, Hinjawadi,
Pune - 411 057 Toll Free - 1800 233 4499 Website - www.isquareit.edu.in; Email -
info@isquareit.edu.in

16.  The building of wireframe is fast and cheap, especially if you
use these prototyping tools such as UXPin, Mockplus,
Balsamiq, and Axure.
 use these prototyping tools at the very beginning.
International Institute of Information Technology, I²IT, P-14 Rajiv Gandhi Infotech Park, Hinjawadi,
Pune - 411 057 Toll Free - 1800 233 4499 Website - www.isquareit.edu.in; Email -
info@isquareit.edu.in

17.  Sometimes, designers prefer to improve the fidelity of
wireframes to enhance the importance of user interface at
some aspects and display the rationality of interaction
between fast test and the visual elements.
 Program to address these problems properly is using
interactive wireframe, also known as the clickable wireframe
International Institute of Information Technology, I²IT, P-14 Rajiv Gandhi Infotech Park, Hinjawadi,
Pune - 411 057 Toll Free - 1800 233 4499 Website - www.isquareit.edu.in; Email -
info@isquareit.edu.in

18.  Interactive prototyping may be the best presentation to
developing team and clients.
International Institute of Information Technology, I²IT, P-14 Rajiv Gandhi Infotech Park, Hinjawadi,
Pune - 411 057 Toll Free - 1800 233 4499 Website - www.isquareit.edu.in; Email -
info@isquareit.edu.in

19.  The requirement of a prototype is higher than
wireframe/interactive wireframe.
 It must be a high fidelity prototype which is interactive and fit
the final user interface as much as possible
International Institute of Information Technology, I²IT, P-14 Rajiv Gandhi Infotech Park, Hinjawadi,
Pune - 411 057 Toll Free - 1800 233 4499 Website - www.isquareit.edu.in; Email -
info@isquareit.edu.in

20.  The target of prototypes is:
› To simulate the interaction between user and interface as
realistically as possible.
› When a button is pressed, the corresponding operation must be
carried out, and the corresponding pages must appear, try the best
to simulate a full product experience.
International Institute of Information Technology, I²IT, P-14 Rajiv Gandhi Infotech Park, Hinjawadi,
Pune - 411 057 Toll Free - 1800 233 4499 Website - www.isquareit.edu.in; Email -
info@isquareit.edu.in

21. International Institute of Information Technology, I²IT, P-14 Rajiv Gandhi Infotech Park, Hinjawadi,
Pune - 411 057 Toll Free - 1800 233 4499 Website - www.isquareit.edu.in; Email -
info@isquareit.edu.in

22.  Undoubtedly, the prototype must include the aesthetic
features of a product that should have, and try to fit the final
version.
 Basically, it’s a skin of a product, no HTML/CSS/JS involved,
and not necessary to consider the server and database.
International Institute of Information Technology, I²IT, P-14 Rajiv Gandhi Infotech Park, Hinjawadi,
Pune - 411 057 Toll Free - 1800 233 4499 Website - www.isquareit.edu.in; Email -
info@isquareit.edu.in

23. International Institute of Information Technology, I²IT, P-14 Rajiv Gandhi Infotech Park, Hinjawadi,
Pune - 411 057 Toll Free - 1800 233 4499 Website - www.isquareit.edu.in; Email -
info@isquareit.edu.in

24. I²IT aspires to be an academic leader recognized for innovation,
quality teaching and research, holding high moral values and a
forward thinking institution that explores creative approaches for
the future.
 Phone: +91 20 2293 3441 / 2 / 3
 Email: info@isquareit.edu.in
 Web: www.isquareit.edu.in