Chapter 3.

Design Tools
Aim
To familiarize the students on various Design Tools
in Mobile UI design

2
Instructional Objectives
Objectives of this chapter are:
• Explain different types of design tools
• Describe the usage of each UX Tools
• Explain the tools for remote usability test, screen sharing,
capturing in-site feedback and sending out online surveys
• Describe specialized toolkits to handle apps like photo
managing, 3D etc.
• Explain interface building tools that help in designing command
languages, data-entry structures and widgets

3
UX Tools for Wire framing and Prototyping

4
UX Tools for Wire framing and Prototyping
• Prototyping and wire framing tools are the most efficient communication
methods between interaction designers, project managers, and the developers.
• Various types of UX Tools for Wire framing and Prototyping.

1) UXPin
2) Wireframe.cc
3) Pixate
4) Sketch
5) Invision
6) P.O.P App

5
UX Tools for Wire framing and Prototyping

1)UXPin

• UXPin is an online wireframe tool that permits

the designer to drag and drop several elements
to create an interface without using a single
code.
• UXPin a visual editor that permits the designer
to choose elements and combine them together
to form a complete structure.
UXPin Interface

6
UX Tools for Wire framing and Prototyping
1)UXPin

A high level of control is existing for every

element along with the visual properties of
the element and the interactions has to be
implemented by the designer.

Element Libraries
7
UX Tools for Wire framing and Prototyping
2)Wireframe.cc

• The designers are well aware that the wireframe has to be used before building
a new mobile app or website. Generally the user skips this to save time.

• Wireframe.cc is a tool that enables a solution to this issue by giving designers a

way to rapidly create wireframes before getting started on all their latest
projects.

• Wireframe cc doesn’t offer tons of stylistic options and features. Wireframe.cc

sticks to the basics.

8
UX Tools for Wire framing and Prototyping
3)Pixate
• Pixate is a mobile service that is intended
to exclusively perform mobile interaction
design service which allow designers to
create complex animations and
interactions without writing code.

• Pixate are used to generate 100% native

mobile prototypes.

• This is design to enable the designer to

improve exclusive experiences and
communicate interactive concepts to Prototyping
stakeholders and team members.

9
UX Tools for Wire framing and Prototyping
3)Pixate
Layers
• Every prototype comprises of Layers,
a familiar concept which is available in
most design tools.
• Each Layer consists of a background
color, a background image or control
elements.
• The designer is capable to group,
duplicate, and create clipping masks.
Pixate Layers

10
UX Tools for Wire framing and Prototyping
3)Pixate
Assets
• Many of the visual elements, like buttons, icons, views, etc.,
can be brought by uploading images or by dragging them
right into Pixate.
Actions
• For implementation of the design, Actions is assigned to
Layers. The Actions panel is split into interactions and
animations.
• Pixate also offers exclusive tools to modify animations in a
number of complex ways, permitting the designer to fully
customize the prototype.
• Prototype can be tested on a target device.
Actions

11
UX Tools for Wire framing and Prototyping
4) Sketch
• Sketch is mainly for the modern graphic designers. The features like Symbols and Shared Styles
are very powerful and they are used to reuse the elements quickly and easily.
• Sketch is used to create complex shapes easily with the state-of-the-art vector Boolean
operations and it takes the benefit of extensive layer styles.
• Sketch is a tool which is used in every shape a user creates an item in the Layers List.

Sketch Sketch Icons

12
UX Tools for Wire framing and Prototyping
5)Invision
• Invision is a web-based prototyping tool that make the design dynamic With
Invision, designers may upload their designed files, add animations and gestures to
convert their static screens into an interactive prototypes. It supports files which
are in JPG, PNG, AI , GIF, and PSD formats.

Invision App

13
UX Tools for Wire framing and Prototyping
6)P.O.P App
• POP(Prototyping On Paper) enables to create incredible interactive app
designs and prototypes on your iPhone or iPad. designer can design
interfaces using the super-simple design mode, which consists of numerous
icons, fonts, stock photos and avatars.
• This is done with the integration of Unsplash, Icon finder and Random user.
• POP also supports to take a snap of designer’s sketches and add them to the
project
• Once the design is ready, the designs, sketches can be converted into
interactive app prototypes that permits to make a demo of the ideas and can
be share with others.

14
Quiz / Assessment
1) UXPin is an online __________ tool.
a) Wireframe
b) Designing
c) User Research
d) User Testing

2) Actions in Pixate are simply accessible and can be added to a Layer via
__________.
a) Click
b) Command
c) drag and drop
d) double click

15
UX Tools for User Research and User Testing

16
UX Tools for User Research and User Testing
With the developing access to online administrations, sites and web applications
have created to wind up distinctly progressively unpredictable.
They are partitioned into three fundamental classes:
• Research – get a look into what clients say and do when collaborating with
the item or administration.
• Design – model the thought before any coding starts. They are repeatedly
done so that they convey the needs.
• Collaboration – smooth the outline procedure and streamline
communication with the developers and the designer.

17
UX Tools for User Research and User Testing
(i) Lookback

• Look back can be downloaded from Google Play for Android.

• This is installed in the devices as separate app and incorpoarated with the designed app.
• By using this the recording can be done.
• This permits to record anything that is available on the screen: native apps, mobile websites or even
prototypes.

Recording Uploading

18
UX Tools for User Research and User Testing
(ii) Wufoo
• Wufoo software is an online tool that creates forms.
• Before the process of how to create a form with Wufoo, let us demonstrate a task which is handled
using Wufoo.

Wufoo

19
UX Tools for User Research and User Testing
(iii) Typeform
• Typeform is an efficient survey tool that applies a lot of UX effectiveness in its design.
• The features of the typeform are those which are very easy and pleasant to fill out, with a number of
customizable options.

Typeform Tool

20
UX Tools for User Research and User Testing
(iv) Usabilla
• Usabilla is a testing tool that permits the user to test both conversion and user experience.
• Through this tool, the research panel, running A/B tests, record visitor activity, testing forms etc can be
accessed.
• Usabilla has an exclusive range of features that makes it most complete user experience packages.

Usabilla Tool

21
UX Tools for User Research and User Testing
(v) Morae
• Described as one of the important usability software tools on the market, Morae contains an all-encompassing
testing experience for its users.
• Morae provides the users with the ability to record the interactions made by the user with the application, site.
• It also permits more than one user to remotely observe the study, collaborate, and take notes--all in real-time

Morae
Tool
22
UX Tools for User Research and User Testing
(vi) UX Recorder
UX Recorder is an exclusive screen recording software for iOS. Using UX Recorder, usability researchers
can record a user's live interaction with a Web site.
While using UX Recorder, the following features are to be considered:
• UX Recorder can be executed only on iOS devices with a front-facing camera.
• The Devices that are used by UXRecorder must be based on iOS 8.
• For ideal performance in UXRecorder, use devices that has more than one CPU core like iPhone 4S or
higher, iPad 2 or higher.

23
Quiz / Assessment
3) __________is capable of handling particulars of secure data collection which
comprises of the databases, backend code, and form scripts.
a) Lookback
b) Wufoo
c) Typeform
d) Morae

4) __________ is an efficient survey tool that applies a lot of UX

effectiveness in its design.
a) Lookback
b) Wufoo
c) Typeform
d) Morae

24
UX Tools for Organizing Information

25
 UX Tools for Organizing Information
(i) Lucid Chart
• Lucid Chart is an online tool to create diagrams for UI mock ups and models.
• It permits many users to team up on a document.
• It comes with a rich set of built-in widgets, together with UI components, icons and diagramming shapes.

Lucid Chart
26
 UX Tools for Organizing Information
(i) Lucid Chart
1. to Create a Document
• Choose A Template
• Add and Manage Shapes
• Add Lines and Objects
• Insert Images
• Collaborate and Share
2. Customize Your Document
• Page Settings
• Format Lines and Objects
• Themes

27
UX Tools for Organizing Information
(ii) MindMeister
• Mindmeister is a tool that takes brainstorming to an extremely new level.
• It permits the user to brainstorm thoughts in an organized structure called a mind map,
and can be utilized by professionals, teachers and students.
• Mindmeister is an extraordinary way to organize views and initiate planning processes.

Mind
Map
28
UX Tools for Organizing Information
(iii) Coggle.it
Coggle is a free, online collective mind-mapping tool that permits the user to visually outline
connections with an exclusive customized branching structure.

Coggle Website

29
UX Tools for Organizing Information
(iv) Gliffy

Coggle is a free, online collective mind-mapping tool that

permits the user to visually outline connections with an
exclusive customized branching structure.
• Open a Recent Diagram
• Create a new Diagram
• Import a Diagram (.vdx, .gliffy, .gon, or .gxml files
only)
• Create From a Template

Gliffy

30
UX Tools for Organizing Information
(iv) Gliffy
Creating Diagrams

• The above diagram illustrates the start

screen of gliffy from which user
can ‘Create a New Diagram’ and can
choose which type of diagram it is
required to start.

Start Screen of Gliffy

31
UX Tools for Organizing Information
(iv) Gliffy
Templates

• The template can be created

by "Create From a Template" of the
Start screen and can be selected from
a variety of templates already loaded
by Gliffy .

Gliffy
Templates

32
UX Tools for Organizing Information
(iv) Gliffy

Create from previous diagram

• The user will be able to create a new

diagram based on a diagram that is
already created.

• Click the diagrams at the top and select

the right one

Create a New Diagram

33
UX Tools for Organizing Information
(iv) Gliffy
Opening Diagrams

• After creation of the diagram, it will be available in

the Document Manager.

• The Document Manager can be accessed by clicking the

"My Documents" button in the upper right of the
Toolbar.

• When it is required to access the Gliffy Online diagrams,

click on Gliffy. When it is needed to access diagrams in Location
your Drive folder, click on Google Drive.
34
UX Tools for Organizing Information
(iv) Gliffy
Importing Diagrams
Using the Start Screen, user will be able to Import a
Diagram. The available file formats to import are:
.vdx and .vsdx (Visio)
.gliffy
.gon
.gxml
Click on the "Import a Diagram" box inorder to locate the
file in the computer and upload it.

Import a Diagram

35
Quiz / Assessment
5)__________ is an online diagramming tool used to visualize processes,
models, and other diagrams.
a) Lucidchart
b) Mindmeister
c) Coggle
d) Gliffy

6) __________ is a prodigious way to organize opinions and initiate

planning processes.
a) Lucidchart
b) Mindmeister
c) Coggle
d) Gliffy

36
Activity - I
Brief description of activity

Classroom
• Write a note on different types of design
Activity
tools.
(30 minutes)

37
 Summary
✔ UXPin is a full UX design and prototyping suite developed by UX designers for UX
designers.
✔ Pixate prototypes only work on native iOS and Android devices as they are native.
✔ Sketch’s fully vector-based workflow makes it simple to create beautiful, high-quality
artwork from start to finish.
✔ InVision App is efficient for collaborating on design drafts and collecting feedback from
colleagues and clients.
✔ POP also supports with a tool to sketch, take a snap of your sketches and add them to the
project.
✔ Wufoo, is an interface for creating complex web forms
✔ The features of the typeform are those which are super easy and pleasant to fill out, with
many customizable options.
✔ Usabilla claims an inspiring range of features, making it one of the most complete user
experience packages
✔ Morae is mainly used for professional UX/usability testing of mobile applications or
websites.

38
e-References
• UI Design Tools: What is the best modern mockup software? (1st ed.). Retrieved
from
•
https://www.quora.com/UI-Design-Tools-What-is-the-best-modern-mockup-soft
ware

• Sutcliffe, A. CASE Tools and the Human Computer Interface: Implications for
designers. (1st ed.). ceur-ws. Retrieved from
• ://ceur-ws.org/Vol-961/paper24.pdf

• HCI development techniques & tools (1st ed.). Retrieved from

http://nlp.postech.ac.kr/Course/devteq.html

39
External Resources
1. Sharp, H., Rogers, Y., & Preece, J. (2007). Interaction design beyond human-computer
interaction, second edition (1st ed.). Chichester, West Sussex, England: John Wiley &
Sons Ltd.
2. Banga, C. & Weinhold, J. Essential mobile interaction design (1st ed.).
3. HCI Models, Theories and Frameworks: Toward a Multidisciplinary Science. by John
Carroll

40