PROTOTYPING

DEFINITION

Prototype is a draft version of a product that allows you to explore your ideas and show the
intention behind a feature or the overall design concept to users before investing time and money
into development. A prototype can be anything from paper drawings (low-fidelity) to something
that allows click-through of a few pieces of content to a fully functioning site (high-fidelity).

BENEFITS OF PROTOTYPES

It is much cheaper to change a product early in the development process than to make change after
you develop the site. Therefore, you should consider building prototypes early in the process.
Prototyping allow you to gather feedback from users while you are still planning and designing
your Web site.

The Difference between Sketches and Prototypes

Sketch Prototype
Evocative Didactic
 Suggest Describe
Explore Refine
Question Answer
Propose Test
Provoke Resolve
Tentative Specific
Non-committal Depiction

High-Fidelity and Low-Fidelity Prototyping

here are things to consider when trying to decide which option is best for your project (Walker et
al 2002):
 Low-fidelity prototypes are often paper-based and do not allow user interactions. Low-
fidelity prototypes are helpful in enabling early visualization of alternative design
solutions, which helps provoke innovation and improvement.
 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.
Wireframe
A wireframe is a low-fidelity way of showing a design. It’s the graphic representation of an app or
a website containing the most essential elements and the content. A wireframe is like a blueprint
of a building. When someone wants to build a massive building, they don’t start right away, right.
Instead, they sketch, draw, make the blueprints, calculate, etc. A few characteristic features of a
wireframe are the following:
 It shows the main chunks of content
 It draws the outline and the layout structure
 It depicts the most basic UI
Mockup
A mockup is a visual way of representing a product. While a wireframe mostly represents a
product’s structure, a mockup shows how the product is going to look like. But still, a mockup is
not clickable (just like the wireframe). As opposed to a wireframe, a mockup is either a mid or
high-fidelity display of design. Briefly, unlike wireframes with gray lines, boxes and
placeholders, mockups are built with more visual details of the final web/app:
 Rich colors, styles, graphics and typography
 Actual buttons and texts
 Content layouts and component spacing
 Navigation graphics
 ADOBE XD
DEFINITION

Adobe XD, a vector-based digital design tool for websites and apps. Use it to create and
collaborate on everything from prototypes to mockups to full designs. Adobe XD is the Adobe
prototyping tool for user experience and interaction designers. Adobe XD features are used for
creating wireframes, prototypes, and screen designs for digital products such as websites and
mobile apps. Prototyping, sharing, commenting features within just one tool.

GENERAL FEATURES

Welcome screen

XD launches with a standard handy dialogue showing the device model and screen resolution to
begin with. Tutorials and shortcuts for other goodies are there at a glance as well.

UI Kits (Apple IOS, Google Material and Microsoft Windows)

Either you access these from the welcome screen or from the menu bar later, convenience of having
the native UI Kits built-in is significant. Simple and genius.

DESIGN MODE

Artboards

Whilst the Artboard control is somewhat standard, the small sweet feature Adobe added is ‘the fold
indicator’. As it might be clear from the name the dotted line, appearing when extending the Artboard
height, indicates the beginning of the scrollable content. If you set scrolling from the right panel to
‘none’ you will obviously get none.

Property Inspector on the right provides sufficient information, related to the tools/objects being
selected. Options might vary, but generally this is a go-to panel to change any colour, size, shape
related properties and many more.

Layers

XD has a smart layers panel, containing all the essential controls like editing, visibility, order etc. as
well as some smart zoom in/out features and a nesting structure that helps to avoid all the visual
noise and mess inevitable when artboards spread around a bit.
Symbols

Similarly to what is already known to Sketch users, you can group and edit your symbols, arranging
them among various screens with a full control of the original. A foundation for every UI library.

Repeat Grid

It not only improves the performance speed significantly when working on blocks of similar type.
But allows to control the content of those blocks, keeping the overall consistency and logic. Loading
data from a text file in seconds, replacing visuals, changing hierarchy for multiple elements in one.
All these little things that really make a difference. The way it lets you change paddings and margins
within the Grid is as neat and handy as it gets.

PROTOTYPING MODE

Creating transitions

Prototyping mode is mainly about bringing some life and telling a story of the screens designed
beforehand. By wiring them together, using simple transitions and basic set of animations, it doesn’t
take long to build the flow and share it straight away with other stakeholders for a feedback.

Live Device Preview

To preview your designs on mobile you can use either the IOS or Android App using your Adobe
credentials. It updates and previews your designs automatically and basically translates all the
changes made on the desktop into mobile practically simultaneously.

Screencasts

Once the outcome needs approving or sharing, you can output it into a MOV file or a link that can
be accessed via browser. It is obviously clickable, so all the transitions and interactions made during
the Prototyping mode will be active in the browser as well.
 References

1. M. Walker, L. Takayama and J.A. Landay, High-fidelity or low-fidelity, paper or

computer? Choosing attributes when testing web prototypes, Proceedings of the Human
Factors and Ergonomics Society 46th Annual Meeting, September 29–October 4, 2002,
Baltimore, USA, HFES, Santa Monica (2002), pp. 661–665.
2. Pashinova, Kate. 2017. Adobe XD. The New Hope. Date on access 09 February 2021,
Access on: https://futurice.com/blog/adobe-xd-the-new-hope
3. Cousins, Carrie. 2019. What Is Adobe XD? a 101 Intro. Date on access 09 February 2021,
Access on: https://designshack.net/articles/software/what-is-adobe-xd/
4. Valishvili, Lex. 2019. Design with Precision – An Adobe XD Review. Date on access 09
February 2021, Access on: https://www.toptal.com/designers/adobe/adobe-xd-review