1.

Sketch
• Sketching enables you to start the best ideas.
• It's a powerful process since it always helps you in discovering new ideas and
solutions to your designs.
• When you start sketching your ideas and imagination, you open a way to put your
creativity to action and in turn enhancing your skills

• Sketching has four core attributes that make it both a time saver as well as a
conserver of emotional energy. Sketches are:
• disposable
• quick
• timely
• inexpensive
• Pablo Picasso used to sketch on paper napkins and pay for his drinks that way. If
nothing else is available, then you can use napkins, too—and plenty of designers
will swear that nothing else will do.
• Also can use toolkits for sketching such as:
• Sketch
• Adobe Photoshop
• Adobe Photoshop Sketch
• Adobe Illustrator
• Adobe Illustrator Draw
• Autodesk Sketchbook
• Astropad Studio
• Affinity Designer

Photos credit: https://schoolofsketching.com/blog-in-english/sketchingwhatisit

2. Wireframe
• A way to illustrate information so that it
can be understood quickly and clearly, at a
glance.
 Isn’t a design exercise where colors and fonts
are important, although the look and feel of
layouts as it relates to the user interface (UI)
play a part.
 Standard icons are used and the color palette
remains mostly black and white.
• https://www.mockflow.com/
• https://wireframe.cc/
• https://moqups.com/
• https://www.creativebloq.com/wireframes/top-wireframin
g-tools-11121302
Photo credit: “Wireframe.” Baldiri. Creative Commons.
3. Mockup
• Drafted designs that focus on the visual aspects of the screens or
pages.
 A step up from the low fidelity nature of wireframes
 Essentially fill in the blanks with typography (printed matters), color palettes,
custom iconography, and photo imagery.

Photo credit: “pxelperfect” WHAT’S THE DIFFERENCE BETWEEN WIREFRAME, PROTOTYPE & MOCKUP?
3.1 Mockup & Wireframing
Editor

• An application – enables to create

and share designs various website
application and apps
 Important tools for communicating
a prototype’s usability and
functionality to clients, providing a
streamlined, uncluttered visual to
supplement verbalized ideas and
designs.

https://blog.prototypr.io/top-20-prototyping-tools-for-ui-and-ux-designers-2017-46d59be0b3a9
 It’s a mockup
High-fidelity enriched with UX
pieces, interactions,

representation of animation and

anything else you’d
like to experience
app when clicking
buttons

Not always If you’re not a

developer, highly

4. Prototype
recommend having
needed to create a prototype to pitch
your idea to friends,
an app family and potential
investors

The only thing It can give a feeling

of using a real app,
that missing is but they are only
images connected
functionality with each other
4.1 Prototyping Tools – Web and Mobile apps
• Bridges your bright idea and the actual product – prototyping.
• Creating mockup – identify all the workflow dead-ends and bottlenecks
 Less time and money spends into actual development
 Minimize costs and risks
• Use prototyping tools – seasoned designers and non-coding product
using equally
 PowerMockup - https://www.powermockup.com/
 NinjaMock - http://ninjamock.com/
 Marvel - https://marvelapp.com/
 Pixate - http://www.pixate.com/
 Codiga - https://codiqa.com/
https://www.behance.net/gallery/43064215/Power-Paper-Prototyping
4.2 PowerMockup

• Microsoft PowerPoint add-in – turns app into full-feature

prototyping tool
• Add library pane to original application – access to all wireframe and
mockup shapes for quick prototyping
• Drag and drop elements onto the slide for mockup
• Creating storyboards – flip from one slide to another to demonstrate
the flow between screens
• Can export files in any format available in PowerPoint (JPEG, EMF,
MP4, WMV, PDF …etc.)
4.3 NinjaMock
… cont.

• Web-based prototyping tools for mobile app design

• Use the common dimensions for iOS, Android, or Windows Phone
• Toolbox containing the stencils
• Icons for faster design + upload custom elements or images from web
• Powerful vector editor – drawing vector graphic
• Interface is intuitive, non-distractive, & easy to use
• Add active links to the elements – clickable app elements
• Sharing the prototypes – collaborative works.
4.4 Article On Prototyping

• Don’t Build It, Fake It

First – Prototyping for
Mobile Apps
 https://www.interaction-
design.org/literature/arti
cle/don-t-build-it-fake-it
-first-prototyping-for-m
obile-apps
5. Facing a Design
Problem

• Stuck in a design and unable

to see alternative approaches.
• The right usability
engineering in the right
design or to the only design
you have ?
5.1 The Solution – Etch a sketch • Use sketching in user
experience (UX) design
• Sketching – a proven design
tool
 Help explore the design space
more fully, avoiding pitfalls of
focusing
 Distinctive form of drawing
which designers use to propose,
explore, refine and
communicate ideas.
 Can use sketching as first line
of attack to crack a design
problem
• Sketch – used to decide what
to design.
• Prototype – simulation of
interface.
5.2 Sketches & Ideation
• Designers invent which sketching
 Don’t have design in their headfirst than
transfer it to paper
 Aristotle – The things we must learn before
we do them, we learn by doing them
• Everyone sketches
 Whiteboards, paper, ….
• Don’t have to be “artistic”
• Be creative
5.3 Sketches Advantages

• Assist in the design process as follows:

 Think more openly and creatively about ideas
 Create abundant ideas without worrying about the quality
 Invent and explore concepts – able to record ideas quickly
 Records ideas that come across
 Discuss, critique, and share ideas with others
 Choose ideas worth pursuing
 Archive ideas for later reflection
 Have fun creating while designing
5.4 Sketch Characteristics

• Sketches help in propose, explore, refine and communicate design

ideas
• Not all drawings are sketches
 Quick: Don’t invest a long period producing them
 Timely: Produce when and as the need arises
 Disposable: Rely on their usefulness to explore a concept and not on their
production costs
 Plentiful: Produce as a collection that explores different aspects of interaction
 Minimalist: Use sketches to clarity one concept at a time
5.5 Sketches vs. Prototypes
… cont.

• Sketch for ideation,

Different refinement
purpose • Prototypes for
evaluation, usability

Prototypes –
more • More difficult to change
investment, – still much easier than
more the actual
“weight”
5.6 Storyboards
• Multiple sketches of a behavior
 Comic strips of what happens
• Example
 Photo browser
6. Shneiderman’s 8 Golden Rules
1. Strive for consistency – menus, prompts and commands should be consistent throughout the application.
2. Enable frequent users to use shortcuts – as the user gets more comfortable with the software they would
like to reduce the number of interactions they perform. The user should be able to use shortcut keys to
perform actions.
3. Offer informative feedback – for every action the user needs to take there should be system feedback. This
feedback should tell the user exactly what is happening at this stage.
4. Design dialog to yield closure – the actions a user needs to perform should be grouped into beginning,
middle and end. The end feedback should promote closure.
5. Offer simple error handling – the system should not allow for serious error. In the case of an error the user
should be given an option to resolve the error.
6. Permit easy reversal of actions – if the user knows an error can be undone it will make them more
comfortable to explore options.
7. Support internal locus of control – design the system to ensure users are the initiators of actions and not
the responders. Experienced users like to feel in control of the application.
8. Reduce short-term memory load – reducing the need for users to remember user
7. Google Design Sprint Process Overview
• https://www.interaction-design.org/literature/article/make-your-ux-des
ign-process-agile-using-google-s-methodology