Nota SEM 20042

Getting to know UI / UX for Mobile AppsDevelopment
39

The choice of colours

Figure 22: UI UX Colors
UI designers manage to design visually aesthetic prototypes. On the other hand, UX designers
generally use three colours to start their prototype design – black, white and grey. This UI vs UX
can be seen commonly in designing and using icons.

Getting to know UI / UX for Mobile AppsDevelopment
40

The choice of tools

Based on the many differences in their roles, the tools UI and UX designers use are also different.
For UI designers, aesthetics is of the utmost importance. They use tools such as Principle or Flinto
that have an advantage of interlinking to Sketch. InVision’s team collaboration function ranks
supreme making it a rival alternative. A critical difference between UI and UX is that UX designers
favour wireframe as it saves time and makes designing more efficient. Some of the best
prototyping tools such as Figma, Adobe XD or Axure with its comprehensive functions.

Figure 23: Prototyping Tools

Getting to know UI / UX for Mobile AppsDevelopment
41

Let’s use my beloved Heinz ketchup to explain the
difference.

We’re all familiar with the original glass ketchup bottle.
It looks great, it’s a design classic, and this is good UI
design.

However, we’ve all struggled to get the ketchup out of
the bottle thanks to the narrow neck. You have to shake
it hard, smash the top with your hand, stick a knife (or
chip) down its neck… and sometimes it goes horribly
wrong.

In the last few years, ketchup bottles have changed. They
have a wider top and, while the old bottles were placed
upright in the fridge, the new ones are designed to be
stored upside down. They’re also squeezable, which
saves all that shaking about.
This means the ketchup is ready to come out, and the
bottle is easier to use. This is great UX design.
Also, since the new bottle both looks good and is easier
to use, it’s a great example of UX and UI working
together.

All this highlights the importance of both UI and UX. If the
bottle looks great but people hate using it, it won’t work
as well. If the bottle works better but looks unappealing,
people won’t pick it up from the shelf.

A great product, such as a website or a smartphone
needs both UI and UX. The Apple iPhone sells billions
because it looks great and is easy to use.
Sometimes of course, people forget about both UX and
UI and we end up with things like this…

Getting to know UI / UX for Mobile AppsDevelopment
42

What's the difference
between UI and UX?

Source Link: https://www.usertesting.com/blog/ui-vs-ux#Diff

It’s important to distinguish the total user experience from the user
interface (UI), even though the UI is obviously an extremely
important part of the design. As an example, consider a website
with movie reviews. Even if the UI for finding a film is perfect, the
UX will be poor for a user who wants information about a small
independent release if the underlying database only contains
movies from the major studios.

1. UX is focused on the user’s journey to solve a problem, UI is focused on how a product’s
surfaces look and function

Ken Norton – Partner at Google Ventures, former Product Manager
at Google

“Start with a problem we’d like to solve. UX design is focused on anything that affects the user’s
journey to solve that problem, positive or negative, both on-screen and off. UI design is focused
on how the product’s surfaces look and function. The user interface is only piece of that journey.
I like the restaurant analogy I’ve heard others use: UI is the table, chair, plate, glass, and utensils.
UX is everything from the food, to the service, parking, lighting and music.”

Getting to know UI / UX for Mobile AppsDevelopment
43

2. A UX designer is concerned with the conceptual aspects of the design process, leaving the UI
designer to focus on the more tangible elements

Andy Budd – Co-founder of Clearleft, Founder of UX London
“Common logic would suggest that, if you design the UI, and a person experiences a product
through the UI, that makes you a User Experience Designer. However, this would also imply that
designing your own home makes you an architect, and fixing a tap makes you a plumber.

Often the words used to describe a discipline end up being divorced from their original meanings.
For instance, architect literally means “head mason” and plumber means “lead worker.” Two
names which clearly no longer articulate or explain what that profession does.

In a professional context “User Experience Designer” has a specific meaning and set of skills,
based on a community of practice reaching back over 20 years. In this world, a User Experience
Designer is concerned with the conceptual aspects of the design process, leaving the UI designer
to focus on the more tangible elements.

Jason Mesut best describes the difference (and the overlap) between UX and UI in his “double
diamond” model. In this model, the UX designer has deep skills in strategy, research, information
architecture, and interaction design.

Getting to know UI / UX for Mobile AppsDevelopment
44

The UI designer (now fashionably rebranded as a digital product designer in Silicon Valley) also
has skills in Interaction design. However, their focus skews towards areas like information design,
motion design, and brand.
While some people would claim deep expertise in all those areas, this is quite rare. After all, if
you’re an expert in everything you’re probably an expert in nothing.”

3. There is no difference between UX and UI design because they are two things that aren’t
comparable to each other

Craig Morrison – Associate Creative Director at Truvani
“I hear this question all the time, and I’ve answered it multiple times. Ultimately, I’ve come to
this conclusion…
There is no difference between UX and UI design because they are two things that aren’t
comparable to each other.
For example, it’s kind of like asking, “What is the difference between red paint and the chemicals
the paint is made up of?” There is no difference. Red paint is made up of all sorts of different
chemicals that when combined together make red paint.

Getting to know UI / UX for Mobile AppsDevelopment
45

Just as the user experience is made up of a bunch of different components, user interface design
being just one of them, that when combined together make up the user experience.
Here are a few other questions to illustrate my point:

• What is the difference between a MacBook and the shape of the keyboard keys?
• What’s the difference between tea and the type of material the tea bag is made from?
• What’s the difference between a car and the colour it’s painted?

If we’re talking about delicious cake (and why wouldn’t we be?), UI is the icing, the plates, the
flavour, the utensils, and the presentation. UX is the reason we’re serving cake in the first place,
and why people would rather eat it than hamburgers.
4. UI is the bridge that gets us where we want to go, UX is the feeling we get when we arrive.

Jason Ogle – Host and producer of User Defenders podcast, Designer at CACI International
“I think one of the most important things to keep in mind in our artificially-intelligent world we’re
flying headlong into, is that UI is no longer just a series of buttons relegated to the four corners
of a screen–and UX is not just a screen-based prototype meant to increase conversions on a
landing page.

It can also now be considered our voice and intentions powered by whatever the machines think
we’re saying or wanting in any given context.

UI is the bridge that gets us to the other side of where we’re wanting to go.

Getting to know UI / UX for Mobile AppsDevelopment
46

UX is the feeling we get when we get there when the bridge is well-built, or plummet to our death
(talk about bad UX!).

It’s also possible to have a good user experience without a user interface. In fact, if it’s really
good, oftentimes your users won’t even know it’s there (how many knots do you notice on the
wooden bridge on the way across?).
Keep in mind that we’re always creating UX, all the time whether behind a keyboard, in the
grocery store line, in our workplace, or on the freeway (God help us).

To sum this up, as I always say to my super guests at the end of every User Defenders podcast
episode: Keep fighting on in creating great UX for other humans!
Whether that requires a UI or not.”

Getting to know UI / UX for Mobile AppsDevelopment
47

5. UI is focused on the product, a series of snapshots in time. UX focuses on the user and their
journey through the product

Scott Jenson – former Product Strategist at Google
“I don’t get too wrapped up in this distinction as they frequently are used interchangeably.
However, when pressed, I see the UI as focusing on the product, a series of snapshots in time.
The UX focuses on the user and their journey through the product. The UI tends to be the specifics
of screens, focusing on labels, visual style, guidelines, and structure.
The UX is the path through a product, escaping the screen and articulating the user’s journey and
motivations, justifying why things are in the UI and even more importantly, why things are left
out. The UI copes with constraints; the UX challenges them.”

Getting to know UI / UX for Mobile AppsDevelopment
48

6. UX encompasses all the experiences a person has with a product or service, whereas UI is
specific to the means by which people interact with a product or service.

Chinwe Obi – Senior Experience Researcher at WW
“User experience (UX) is the interaction and experience users have with a company’s products
and services. To gain UX insights, this might include conducting research to learn about the
positive and negatives points of an experience and taking those learnings to make improvements
that positively impact a user’s experience.

Think about ordering food online for a pickup delivery. The UX consists of the user’s interactions
with placing their order on a company’s website, their in-store experience of picking up their
order, and also their satisfaction with their food.

User interface (UI) is the specific asset users interact with. For example, UI can deal with
traditional concepts like visual design elements such as colors and typography. It can also look at
the functionality of screens or more unconventional systems like those that are voiced-based.
To continue with the online food order example, UI would focus on the visual design of the
screens a user interacts with, such as which color to make the order button and where to place
it on the page. This can also include any interfaces a user might come in contact with in-store.”

Getting to know UI / UX for Mobile AppsDevelopment
49

Managing Differences of
UI/UX Design -How Do They
Work Together?

Source Link: https://www.netsolutions.com/insights/ux-vs-ui-design/

UX vs UI Design: What’s the Difference?

Many people ask what is the difference between UI and UX design, whether UI is a part of UX, or
what comes first, UI or UX? These are common questions, particularly when the terms are often
used incorrectly. Let’s examine the primary differences between UX and UI design.

Let’s examine some of the top ways that UX and UI design are different:

1. Focus

The UX designer is focused on interactions across the user journey while the UI designer is
focused on the aesthetics.

The UX designer searches for solutions to user problems, assessing the purpose and functionality
of the product, while the UI designer determines the look of that product, which impacts the
quality of the user interaction.

2. Level of Abstraction

A UX designer is more concerned with the broad outlines of form and function of the product,
while UI is responsible for the tangible articulation of these elements.

Getting to know UI / UX for Mobile AppsDevelopment
50

3. Research

While both UI and UX are influenced by trends, UX is more of a science while UI is considered
more an art form.

A UX designer considers tangible data inputs about user personas, user interviews, focus groups,
and surveys. A UI designer often works with established best practices / benchmarks, patterns,
and personal preferences for aesthetic choice, but also works with the UX designer to understand
inputs and the problems being solved.

4. Goals

In UX, designers work with data to understand the user’s wants and needs and to refine the
product (through wireframes and testing) to improve the user experience across tangible data
points: acquisition, retention, conversion, referral, total lifetime value.

In UI, designers work to create a positive impression by creating an interaction that is as simple
and efficient as possible.

5. Skillset

UI design is concerned with the look and feel, working on branding and graphic design, storyline,
design trends, and customer analysis.

UX has a social component that requires market research and client consultation as well as more
structured skills in prototyping, wireframing, and running analytics on the performance of the
product. Often UX will involve various skills or input from design, business analysis, and QA
professionals.

Getting to know UI / UX for Mobile AppsDevelopment
51

6. Product Layer

The UX design process impacts both the front and the back-end of the product, right down to
core functionality about how the product works, is developed, which interface is chosen, and
which services are used. The UI only applies to the presentation level of the interface.

7. Application

UX design principles can be applied to any kind of product, physical or digital, as the theory relates
to any kind of user experience. UI, by contrast, only applies to digital products where an
“interface” (interaction between computer and user) is required.

8. Output of Design

UI designers created finished, polished designs. UX designers create wireframes and testable
prototypes. UX and UI prototyping is a very different process. For UI Designers, the prototype is
a high-end model. For UX Designers, it is more about the logic.

9. Design Tools

With very different skill sets, it makes sense the UX and UI designers leverage distinct tools. UI
designers use tools such as Principle and Flinto for graphics. UX designers work with layout,
content, and functionality, leveraging wireframing techniques and tools such as Balsamiq and
Mockplus.

Getting to know UI / UX for Mobile AppsDevelopment
52

UX Design vs UI Design: How Do They Work Together

While talking about the differences between UX design and UI design may seem like the two are
opposing forces, UI and UX are actually intersecting forces that complement each other:

Figure 24:Working Together UI UX
As noted earlier, UI is the look of a product, while UX is how users feel while using it. In other
terms, UX is the process of understanding what the user wants and feels, with UI being one of
the outcomes of all of that insight. Visual design (UI) plays an important part in reshaping the
user experience design through layouts, spacing, images, videos, graphics, and colours.
Many people like to look at UX and UI through comparison, where a UX designer is the “architect”
hired to design the perfect house for a specific family, knowing how many rooms it needs, where
they should go, and what features of the house make it stand out. In this example, the UI designer
is the “interior designer” who adds those finishing touches to make the house more comfortable
and aesthetically pleasing.

Getting to know UI / UX for Mobile AppsDevelopment
53

Just like in the building scenario, a UX and UI designer need to work closely together at all stages
to understand the user and to build, design, test, and refine the product.

Getting to know UI / UX for Mobile AppsDevelopment
54

Principles of Design

Zachery NielsonJul 20, 2021
Sources Link: https://xd.adobe.com/ideas/process/ui-design/5-principles-design/
https://xd.adobe.com/ideas/process/ui-design/5-principles-design/

At its core, digital design is the process of using different tools, technology, and user experience
(UX) strategies to provide a solution to a visual communication problem. Solving simple UX
problems with digital design could include creating text that’s readable and easy for any user to
understand. More complex problems could include rearranging an entire user interface (UI) to
increase user conversions.

No matter what type of digital design problem you encounter, it’s important to keep your
business goals and the goals of the user in mind. For instance, using the UI rearrangement
example above, we can easily interpret that the goal of the business is to increase conversions,
while the goal of the user is to find out if your product or service is worthwhile with ease. As
designers, we use a set of guiding principles to help us achieve these goals while simultaneously
designing the best possible work.

Understanding these core principles of design and how to use them can help you create more
consistent and usable designs without removing your own unique style from your work.

Getting to know UI / UX for Mobile AppsDevelopment
55

What are principles of design?

Principles of design are common rules used by designers to shape their work. Applied
successfully, these principles give designers the power to create both well-functioning and
aesthetically pleasing designs. A combination of excellent functionality and nice aesthetics
leads to better UX for all.

What is the difference between the principles of design
and the elements of design?

The elements of design are the basic, raw building blocks used by designers to create a piece
of work. Lines, shapes, colors, typography, texture, and space are the essential elements of
design, and they exist in almost all prototyping tools. The principles of design, however, are
the common rules harnessed by designers to give cohesion to their work.

The principles of design function in tandem with the elements of design, as they both help
designers understand how they should create a well-crafted, user-friendly design. Design
principles also help designers evaluate other works, which includes understanding the reasons
why a designer made certain decisions in their creative process.

The design of products and environments to be
usable by all people, to the greatest extent possible,

“ ”without adaptation or specialized design.

Getting to know UI / UX for Mobile AppsDevelopment
56

Figure 25: Reference sheet depicting the elements of design, including line, color, texture, size, shape,
value, and space.

Getting to know UI / UX for Mobile AppsDevelopment
57

What are the primary 7 principles of design?

While there are a wide variety of approaches and philosophies you can use in your design
process, there are seven essential core principles that guide them all.

1. Unity

Designs are typically composed of many individual parts, and the principle of unity in graphic
design states that no single aspect is more important than another. A design is considered
unified when all parts work well with one another and share the same brand message. It’s
rarely possible to achieve unity in design when designers work in isolation. In most cases, the
final design feels like a combination of fragments rather than a whole experience. Only when
a team practices design collaboration from the get-go is it possible to create a design that feels
holistic.

2. Emphasis

Designing with emphasis ensures that users understand what they are viewing and that they
read the most important information first. For example, emphasizing a company’s main service
in the title of their homepage ensures users viewing the website know exactly what they can
buy from the company. Apple does a great job of this on their homepage. In the image above,
you can see their latest product first, along with the most vital information about it. This is
purposefully designed to focus a user’s attention on their newest product.

Getting to know UI / UX for Mobile AppsDevelopment
58

Figure 26: Apple’s homepage emphasizes and features their latest and greatest product, the iPhone 12
Pro.

3. Hierarchy

The way that designers organize a website or app plays an important role in determining what
the user takes away from their experience. Organization and proper visual hierarchy4 will
create a familiar flow to your design that makes it easy to use. A great way to think of hierarchy
is by using an importance rating system. This is when you arrange your design elements in
order of importance, with the most important information at the top followed by the less-
important information as the page flows downward.
Ideally, your design should incorporate a clear strategy for your hierarchy. If you’re designing
websites or apps, it’s typically the same every time: Users scroll from top to bottom, so the top
of the page should contain the most vital information. Leaning on the Apple homepage
example image from earlier, the latest high-spec iPhone is at the top of the page, while older

4 Visual Hierarchy is used to rank design elements and influence in the order you want your users to view them. By
using principles like contrast, scale, balance and, more, you can help establish each element in its rightful place and
help the most important elements stand out.

Getting to know UI / UX for Mobile AppsDevelopment
59

products are in later sections. Apple clearly wants to sell more of their newest phones, so the
page is arranged to support that goal.
Hierarchy is a key principle of design because, without it, users can get confused. They may
click out of your website without purchasing anything or stop using your app out of frustration.
Creating designs with a clear hierarchy will ensure you don’t lose a potential customer.

4. Scale

Figure 27: Three internet browser windows in different sizes to show that they can be resized.
Scale is the sizing and proportions of your design on the screen it’s displayed on. Properly
scaling your design is a principle that some designers ignore, but it’s very important. This can
mean scaling large images down to fit a certain screen size or scaling text up to fill a certain
amount of space.

Getting to know UI / UX for Mobile AppsDevelopment
60

Whitespace, which is empty space that creates a border or spacing between elements, is a big
part of scaling. Ensuring the information on a page fits without overcrowding—while still
retaining your hierarchy and emphasis principles—brings everything together in unison.
You don’t want your elements filling the entire screen with no space around them, since that
can feel cluttered to users. Instead, use padding and whitespace to make everything more
readable, scrollable, and understandable—this is one of the biggest elements of human-
computer interaction (HCI).

5. Contrast

Like objects in the physical world, every object in graphic design has its own weight. The
heavier the object, the more attention it receives. It’s possible to add weight to a graphical
object using size, shape, and contrast, but let’s take a closer look at how the contrast principle
of design works.
Contrast is the difference between two elements on a screen. For example, black text on a
white background creates visual contrast. Contrast also ties the other design principles
together, since the emphasized element should contrast with all of the other elements on the
page.

Getting to know UI / UX for Mobile AppsDevelopment
61

Figure 28: Contrasting text immediately attracts users’ attention.

6. Repetition

Another important principle of design is repetition, which is when one or more design
elements recur on a page or throughout an entire site. As you design more complex or larger
projects, you will find that repeating certain elements creates familiarity and understanding.
In the image above, you can see that each screen belongs together, even though there is a
different design and purpose for each. Blending repeating colours, elements, icons, imagery,
and styles is all a part of the repetition principle.
Not only will familiarity in a design generate a visually appealing end result, but it also creates
trust with the user and helps establish the brand of the website or app. Repeated elements
can range from an icon to colours and more. Applying this principle brings the entire design
into a cohesive system.

Getting to know UI / UX for Mobile AppsDevelopment
62

Figure 29: 15 different slides featuring visually similar designs to showcase repetition of design elements.

Design tip: Within your design system, it’s important to create a design style guide to keep track of the colors,
fonts, and logos that make up your project. Ideally, each project you design will have a style guide in place to
ensure uniformity, especially if you’re working within a large team.

Getting to know UI / UX for Mobile AppsDevelopment
63

7. Rhythm

Rhythm is a term that most people associate with music, but it exists in almost everything
around us including paintings, products, and architecture. Rhythm can be used to create a large
spectrum of emotions, ranging from relaxation to excitement. In graphic design, rhythm is
achieved through the arrangement of elements and spacing between them. For example, it’s
possible to create a rhythm by repeating certain elements throughout your website or app.

Figure 30: The repetitive use of blue on this Airbus landing page creates a sense of continuity and invites
users to scroll for more information.

Getting to know UI / UX for Mobile AppsDevelopment
64

What Are The 6 Elements of
Design?

Justin MoralesDec 1, 2020
Sources link: https://xd.adobe.com/ideas/process/ui-design/6-elements-design/

Great design doesn’t just happen by chance. A great designer strategically chooses things like
colour, shapes, and typography—all of which have an impact on how a viewer or user perceives
and engages with a piece of work.

Certain principles of design can also make a design more functional, especially when it comes
to digital product design; with the right pieces in place, you can create meaningful experiences
that effectively solve your user’s pain points.

So, what are these basic elements? Keep reading as we dive into each element one by one.

1. Lines

The first and most basic element of design is the line. In design, a line is any two connected
points. These lines can be straight or curved, and may be smooth, rough, continuous, broken,
thick, or thin. A line creates division and hierarchy within your design, helping direct the user’s
eye toward specific information or a specific focal point.

Lines can also create subliminal languages in your design. A diagonal line, for example, suggests
movement; a straight line is more orderly and cleaner.

Getting to know UI / UX for Mobile AppsDevelopment
65

Figure 31: In design, lines can have a variety of densities and curves.
A great example of lines showing movement is the image below, from the Virgin Hyperloop
website. The Virgin Hyperloop is a high-speed transportation system set to reinvent how we
travel, allowing passengers to travel from Dallas, Texas to Fort Worth, Texas in under two
minutes. Take a look at the mockup below and you’ll notice that the lines that make up the
shape of the tube offer a sense of motion, reinforcing the idea of speed in this new form of
travel.

Getting to know UI / UX for Mobile AppsDevelopment
66

Figure 32: Photo of a mockup of the Virgin Hyperloop track.
It’s also important to know that you can create a line in one of two ways:
1. Use a pen, brush, or other digital tool to connect two points. This is called an “actual line.”
2. Create an “implied line,” which appears when two shapes meet.

Figure 33: Designers can create lines in one of two ways: an “actual line” and an “implied line.”

Getting to know UI / UX for Mobile AppsDevelopment
67

2. Shapes

The second element of design is shape, when a two-dimensional line encloses an area. A shape
can be geometric (like a circle, triangle, or square), or it can be organic (such as leaves, flowers,
and animals). Boundaries—including lines and colour—ultimately define shapes and can also
help emphasize an area of the page.

Figure 34: Designers have many geographic shapes to choose from, including circles, squares, rectangles,
ovals, hearts, triangles, parallelograms, hexagrams, trapeziums, pentagons, stars, and diamonds.

3. Colors

Colour is another powerful element of design. It can stand alone, act as a background, or
highlight other elements in your design.
Colour is also a fantastic tool for creating and establishing a mood for your brand. For example,
red typically signifies love, strength, power, and desire; green typically signifies tranquillity,
good luck, and health.
As you create your colour palette, it’s important to understand the three properties at play.
This will help you maximize the power of this principle of design.

Getting to know UI / UX for Mobile AppsDevelopment
68

These three properties are:
Hue refers to the name of the color. For example, “red,” “blue,” and “green” are all hues.
Saturation refers to the intensity or purity of the color. A specific hue can have a vibrant or
dull saturation (and anywhere in between).
Value refers to the lightness or darkness of a color. Color can be “tinted” by adding white or
“shaded” by adding a layer of black.

Figure 35: Using a color wheel, you can see the differences between hue, saturation, and value.
These three properties—hue, colour, and value—empower a designer to use a range of
colours, which all help evoke the mood and message behind a brand.
For a few examples, we can look at the financial industry. Many brands, including Bank of
America and Chase, use blue in their logos. It’s probably not a fluke, either; the colour blue
symbolizes order, trust, loyalty, and security.

Getting to know UI / UX for Mobile AppsDevelopment
69

Figure 36: The color blue symbolizes trust and security, so it’s no wonder so many banks use it within
their branding. Here, you can see examples from four major banks: Chase, Citi Citibank, Barclays, and

Bank of America.
In the image below, you can see some other examples of colour psychology in marketing.

Figure 37: This image shows how colors can evoke certain moods, such as yellow making people feel
optimistic, and blue evoking a sense of trust.

Getting to know UI / UX for Mobile AppsDevelopment
70

4. Typography

Typography is arguably the single most important part of graphic, web, and user interface
design. Your text and how it looks isn’t just about conveying a message; it can also convey a
mood. Are you a serious online newspaper or a playful blog? Typography can set the tone. For
example, a Serif font like Times New Roman (below on the right) tends to evoke a more
traditional and serious feeling, while a Sans Serif font like Open Sans (below on the left) reads
as more modern.

Figure 38: Some of the more notable examples of serif fonts include Georgia, Garamond, Times New
Roman, and Baskerville.

Getting to know UI / UX for Mobile AppsDevelopment
71

Figure 39: Brands that looked clean and refined now look childish and playful.
In addition to evoking a mood and feeling, typography can create visual hierarchy5 in your
design. It can show people where to look and what things on the screen are most important,
giving users a sense of how to read the material from beginning to end.
Larger font sizes, for example, catch the user’s eye first and signify a focal point on your page.
When a smaller font is beneath it, the reader instinctually knows that it’s a subsection that will
support the heading and perhaps provide more context or information. These smaller details
of your font including weight, height, and size are all important as you consider typography6 in
your UI design.

5 Visual hierarchy is the principle of arranging elements to show their order of importance. Designers structure
visual characteristics—e.g., menu icons—so users can understand information easily. By laying out elements logically
and strategically, designers influence users' perceptions and guide them to desired actions.
6 Typography is the art and technique of arranging type to make written language legible, readable and appealing
when displayed.

Getting to know UI / UX for Mobile AppsDevelopment
72

5. Texture

Texture refers to the way a surface feels—or in this case of a digital design, a perception of
how it could feel. Texture can create a more dynamic, visually appealing experience while also
adding depth to your design.
For example, a luxury linen brand that wants to imply comfort and cosiness might consider a
cotton textile background, like in the example below.

Figure 40: Textiles have the power to evoke feelings; in this example, a cotton textile background elicits
feelings of softness and comfort.

On the contrary, if you are selling building supplies, you might consider a cement, stone, or brick
background with grittier, textured typography to accompany it.

Getting to know UI / UX for Mobile AppsDevelopment
73

Figure 41: Compare the cotton textile backgrounds above to this stone textile background, which creates
a more serious, sterile feeling.

6. Space

Space refers to the area above, below, around, or behind an object. It can be positive or
negative. Positive space refers to the subject or areas of interest, such as a person’s face or
furniture in a room. Negative (or “white”) space, on the other hand, refers to the background
area that surrounds the subject or areas of interest.

When used correctly, negative space plays a pivotal role in the success of your design. It has
the ability to:

• Enhance readability — A larger white space ensures your text doesn’t have to compete
with other design elements.

• Simplify your design — White space breaks your design into chunks so that you do not
overwhelm your reader’s eye.

• Complete an image — Humans naturally see closed shapes. Therefore, when a shape or
element is incomplete, the white space can help your reader unconsciously fill the gaps.

• Add a sense of luxury — “Less is more” can create a sense of sophistication in your
design.

Getting to know UI / UX for Mobile AppsDevelopment
74

Figure 42: Negative space, as shown in these images, allows you to maximize the area and enhance
readability.

Getting to know UI / UX for Mobile AppsDevelopment
75

What is wireframing?

Wireframing is a way to design a website service at the structural level. A wireframe is commonly
used to layout content and functionality on a page which considers user needs and user journeys.
Wireframes are used early in the development process to establish the basic structure of a page
before visual design and content is added.

Figure 43: WireFraming

Wireframing is essential in UI design

A wireframe is a layout of a web page that demonstrates what interface elements will exist on
key pages. It is a critical part of the interaction design process.
The aim of a wireframe is to provide a visual understanding of a page early in a project to get
stakeholder and project team approval before the creative phase gets under way. Wireframes

Getting to know UI / UX for Mobile AppsDevelopment
76

can also be used to create the global and secondary navigation to ensure the terminology and
structure used for the site meets user expectations.

A wireframe is much easier to adapt than a concept
design

It is quicker and cheaper to review and amend the structure of the key pages in a wireframe
format. Iterating the development of the wireframes to a final version will provide the client and
the design team confidence that the page is catering to user needs whilst fulfilling the key
business and project objectives.

Getting to know UI / UX for Mobile AppsDevelopment
77

Figure 44: WireFraming the idea

Getting to know UI / UX for Mobile AppsDevelopment
78

Wireframing takes place early in the project lifecycle

Often used to complete the User-Centred Design process, wireframes are also used at the
beginning of the design phase. A prototype usability test will often be a test of the wireframe
pages to provide user feedback prior to the creative process.

Wireframes can be simply hand-drawn, but are often put together using software like Microsoft’s
Visio, to provide an on-screen delivery. However, if the wireframes are going to be used for a
prototype usability test, it is best to create them in HTML.

Advantages of Wireframing

One of the great advantages of wireframing is that it provides an early visual that can be used to
review with the client. Users can also review it as an early feedback mechanism for prototype
usability tests. Not only are wireframes easier to amend than concept designs, once approved by
the client and the users they provide confidence to the designer.

From a practical perspective, the wireframes ensure the page content and functionality are
positioned correctly based on user and business needs. And as the project moves forward they
can be used as a good dialogue between members of the project team to agree on the project
vision and scope.

Disadvantages of Wireframing

As the wireframes do not include any design, or account for technical implications, it is not always
easy for the client to grasp the concept. The designer will also have to translate the wireframes
into a design, so communication to support the wireframe is often needed to explain why page
elements are positioned as they are. Also, when content is added, it might initially be too much
to fit within the wireframe layout, so the designer and copywriter will need to work closely to
make this fit.

Getting to know UI / UX for Mobile AppsDevelopment
79

Conclusion

Wireframes should be used early in a project to get user and client approval on the layout of key
pages and the navigation. This will provide the project team, specifically the designers,
confidence in moving forward. Wireframes will also save considerable time and money in the
testing and amends phase later in the project.
Sources Link: https://www.experienceux.co.uk/faqs/what-is-wireframing/

Everything You Need to
Know About UX Sketching

Nick Vyhouski

Sources Link: https://www.toptal.com/designers/ux/guide-to-ux-sketching

UX Sketching Is a Two-step Process

Many options must be considered in design, which results in the choice and the execution of the
best one. Designers consider their options, and then proceed to work out the details, thus making
UX design a two-step process:

Getting to know UI / UX for Mobile AppsDevelopment
80

Figure 45: Idea Generation
• Idea Generation
In the initial step, multiple ideas are generated, but since they cannot be fully shaped, it is not
uncommon for some of the elements to be incomplete or missing. The main thing is to consider
different approaches and to decide which is the most efficient in the context of your task and the
various constraints of the project.
• Adding Detail and Refinement
Step by step, you settle on a few promising variants and proceed to work out the specifics, thus
rendering some ideas unsuitable.

UX Sketches and Wireframes: Introduction and
Classification

Your wireframes may differ depending on factors such as the desired level of detail, colours and
style, whether you are going to show them to someone, and so on.

Getting to know UI / UX for Mobile AppsDevelopment
81

Figure 46: Sketch for Idea
I singled out the following sketch types:

• Sketch: Idea Generation
These are initial sketches. Lower-level details are simply noted. A limited number of colours is
employed.
I draw a lot of basic sketches to consider the problem from different angles and to consider
different solutions. While drawing such sketches, I am also striving to generate as many solution
variants as possible.
At this particular step, incompleteness frees my mind, which is why it is so important to avoid
getting bogged down in minutiae at this stage. My goal is to generate as many ideas as possible
and choose the most promising ones.

• Wireframe: Specification, Detailed Phase

Getting to know UI / UX for Mobile AppsDevelopment
82

I usually pick promising sketches and go over the details, after which I choose the best variant
and work it out in greater detail.

However, this does not mean every single detail. Obvious things may just be noted. Moreover,
some aspects will be difficult to describe on paper.

At this step, I draw all the important details, but I do not yet draw wireframes in Balsamiq. After
everything is done on the paper, I start drawing in Sketch.
Digital tools provide a lot more creative freedom than paper and you can easily shift attention to
minor things. For example, you can focus on “pixel polishing” instead of design.

• Visual Design Draft
This is a rarely used approach, but sometimes it can be helpful. Various visual solutions are
considered at an early stage of the project, but it may take a long time to create digital sketches
for all of them. That is why I draw design sketches on paper first, to consider different options
and choose a visual design direction.

• Components/Elements Breakdown
I find this technique useful when I already have a general idea and I am thinking about a particular
page functionality or of the integral parts of interface components. I draw different page
elements, going into detail, and then draw different possible positions of the page elements.
Elements, even the simplest ones, must have a state; a button can be pressed and it has a hover
text block that may or may not be empty. The more complex it is, the more states it has.

Getting to know UI / UX for Mobile AppsDevelopment
83

Figure 47: Breakingdown the elements

Getting Started with the Basics

• Prepare your tools. Find the most convenient place possible, a large table with plenty of
space. Take a lot of paper and prepare some pens and markers.

• Warm up. In order to get ready, I recommend drawing some lines, circles, basic
templates, and icons.

• Define your goals. Decide what you want to draw. Set your aim and decide what story
you have to tell. Determine the desired level of detailing. Decide whether you are ready
to draw a lot.

Getting to know UI / UX for Mobile AppsDevelopment
84

• Define your target audience. If you are doing this for yourself, you don’t need to worry
about the way your sketch looks. However, if you intend to show your drawings to a client,
make sure you allow some extra time to add more details to your sketch.

• Set a time frame. Having decided on the amount of time you are ready to allocate for
sketching, let’s say 30 minutes, will help you focus on your work.

Now, you are all set and you can get started:
• Draw the edges. Draw the frames, a browser or phone window, a part of the
interface, and so on.
• Add the biggest or basic elements: menu, footer, main content.
• Add details. Add relevant details, but keep them simple at this stage.
• Add annotations and notes. These are required only if you’re planning to share the
sketches. However, they can be useful even if you’re doing them for your eyes only.
• Sketch alternatives. Sketch some quick alternatives to your solution.
• Pick the best solution. Choose the best options.
• Add shadow and bevel. This is particularly important for sharing purposes. Add a
shadow to make your sketch visually appealing, which is important if you plan to share
it with team members and/or clients.
• Save the sketch. Take a photo or put it in a folder. I have a few paper trays on my
table for sketches.
• Share. I usually use one of the following sharing methods:
o Scan sketches via Evernote and provide a permalink to other team members
or stakeholders.
o Take a photo and upload to InVision.
o Upload and map images to Realtimeboard.
o Or just email a photo.

Getting to know UI / UX for Mobile AppsDevelopment
85

• Review the sketches and add notes. Take a break and then come back to your
sketches a while later. Take a look at them again. Does the sketch still make sense to
you? A good sketch must be easy to follow.

Figure 48: Review Sketches and add Notes

Getting to know UI / UX for Mobile AppsDevelopment
86

Clarifying Sketches with Additional Elements

Find or draw a proper sketch, and then add the following details to it:
1. Title. Sometimes, adding a title is a good option. Write a description and date, if
necessary, at the top of the sketch. The title will help you understand what you are
looking at and whether or not the sketch is relevant. This is especially useful if you have
a lot of sketches or you are going to show to others.
2. Annotations. Annotations are names and notes placed close to an element, to explain its
content or other attributes. They add details that clarify other elements and are usually
difficult to draw. For example, it could be the name of the block, some interaction details,
an explanation of a picture, some ideas for future design variations, and so on.
3. Numbers. Number the elements of your sketch, or the sketches themselves. You can
decide how to order them (e.g., by interaction flow, the order in which you created them,
etc.). It may also be useful during discussions (especially remote discussions), as your
colleagues and clients can just point out the sketch number in their feedback and you will
understand which one their comments refer to.
4. Arrows. You can use arrows to indicate screen transitions. They can also be used to
connect different parts of sketches, to indicate a sequence of actions, and so on. Since
the meaning of an arrow can vary, just above the arrow you can add a description or
explanation of what the arrow is meant to signify.
5. Notes. Just like annotations, notes are used to explain concepts. However, notes differ
from annotations in their placement. They are not attached to an element or located near
the described element. Notes can be placed at the top or bottom of the page. They can
even describe elements that are not included in the design, questions that you may have,
general explanations, un-sketched ideas, and so on.
6. Gestures. Gestures are relevant in the case of touch device design. Drawing a hand
gesture may require practice. There are several variants of gestures used to indicate
different types of actions, so it is better to decide in advance how you designate a
particular action (if it is not obvious, of course) and to practice drawing it.

Getting to know UI / UX for Mobile AppsDevelopment
87

7. Feedback. You may receive suggestions for fixing or improving the sketch after showing
it to others, or after you take another look at it yourself. It is often useful to mark such
feedback in a different colour so as to help differentiate feedback from the original
sketch.

You can use different colours for different types of elements. Sometimes, I use black for drawings,
blue for links, dark green for notes, red for titles and feedback. Try to use different colours in
your sketches, but make sure your choice of colours is consistent!

Figure 49: Use different ink for sketching

Getting to know UI / UX for Mobile AppsDevelopment
88

More Specific Tips and Tricks

1. Don’t worry about the quality. Don’t look at the sketches on Dribbble; they are about
something completely different. Bear in mind that the main purpose of sketches is to help
you think more clearly, find better solutions, and save time.

2. Practice. For a start, you can try to draw a few apps. Open a web or mobile app and try
to copy the screen, describing the elements in the notes. Whenever you have some free
time, practice drawing basic building blocks of your designs. In general, practice makes
perfect. In a while, it will become part of your designer self.

3. Buy a folder. I often don’t work from my office, but rather from a cafe or my home. Paper
sketches are very prone to damage, so buy a simple folder to keep them safe and sound.

4. Bring tools with you wherever you go. This helps ensure that you can capture your idea
on paper at any time, otherwise you may just lose the thought or not be able to
remember it in sufficient detail. I always have a notepad, a few A4 sheets, and pens with
me.

5. Share with others. It’s very important to engage other people and communicate with
your team. Involving others and getting their feedback, especially early on, helps save
time and resources in the long run. You can also encourage others to draw the way they
envision the design.

6. Paper trays. Think of placing paper trays on your worktable. For example, I have three of
them: for incoming tasks, for sketches, and clean sheets of paper.

7. Experiment and customize. My recommendations are based on my experience. In time,
you’ll find out what suits you best; which methods, which sequence of steps, what exactly
fulfils your creative potential. You will get there only if you constantly try something new,
which is why it’s important to experiment with different formats, styles, and try new
templates.

8. Use templates. Templates will save time and implicitly consider format restrictions,
freeing up more time to focus on what is important.