ISRA UNIVERSITY

Faculty of Engineering, Science & Technology

Department of Computer Science
Course Code Course Name Credit Hours
CSHC-425 Human Computer Interaction 2(3 + 3)

Lab Task # 10
Student’s Name: ________________ Student’s ID: _____________

Date: _________ Teacher’s Sig: ____________

Title: Design principles for mockups

Objective: The objectives of this lab are as follows:

 Using figma to design mockups using gridlines
 Creating containments
 Using negative space in mockups

Create grids in mockups

Grids are a helpful and practical tool to use as you create designs. Grids give consistency and
structure to your design, and they help ensure that your designs fit within the screen
boundaries.

Create and apply grids

To apply a layout grid to your designs in Figma:

 1. Select the Frame in the Layers panel or on the canvas. If you're working on a file
you've already started designing, be sure that you’re selecting the Frame and not
another element’s layer by accident.
2. On the right side of the screen is the Properties panel. In the Layout grid section,
click the + icon.
3. By default, a basic grid, which Figma calls a Uniform Grid, will be applied to the
Frame. Uniform grid gets it's name because all of the squares in the grid are a uniform
size.
4. You can update the properties by clicking on the icon with nine squares, in the shape
of a square, to the left of Grid to open the Layout grid settings.

Align the elements to a grid

A control is a feature that helps you align design elements. In Figma, controls are located at
the top of the Properties panel. Aligning the elements on your Frame to a grid will help your
layout appear even, organized, and "tidy," as Figma describes it.

Here are the controls in Figma, in the order listed below:

 Align left
 Align horizontal centers
 Align right
 Align top
 Align vertical centers
 Distribute horizontally
 Distribute vertically
 Tidy up

Auto Layout

Another feature in Figma that you might want to use when creating mockups is Auto Layout.
With Auto Layout, your designs can shrink or grow in response to a change. For example,
you can create buttons that grow or shrink as you edit their text label.

There are a few ways you can add Auto Layout, such as:

1. Select a frame, then click the plus (+) icon next to Auto Layout in the right sidebar.
2. Right-click the frame or object, then select Add Auto Layout.
3. Use the keyboard shortcut Shift + A.
Stay inside the lines

Using grids can help improve the consistency and visual appeal of your mockups, so be sure
to use them.

Activity Exemplar: Create grids in your portfolio project mockups

Here is a completed example showing how grids were applied to the Zia's Pizza app.

Create containment in mockups

As you determine the layout of elements on the pages of your mockups, be sure to consider
containment. A containment uses visual barriers to keep designs neat and organized. In other
words, barriers like lines or colors help limit content to a specific section of a design.

Create dividers

Dividers are single lines that separate sections of content in a design. Dividers can be simple
yet effective tools for quickly breaking up content that doesn’t belong together. Adding a
divider in Figma is pretty simple, but you need to know how the sections of your mockups
relate to each other in order to determine where dividers should be placed.

To create a divider in Figma:

1. Identify sections of content in your mockup that need to be separate from one another.
2. In the toolbar at the top left of the screen, select the Rectangle tool, which is
represented by an icon that looks like a square.
3. Select Line from the dropdown menu, as shown in the image below.
4. Choose the area of your mockup where you’d like to draw the divider. Click and drag your
mouse to pull a straight line across the Frame.

5. Click on the new line that was added to your mockup to select it. In the Design panel on
the right side of the screen, go to the Stroke section, where you can control the look of the
line you created. Select a color for the line and the line size, as shown in the image below.

Add borders

Borders are continuous lines that form shapes, like rectangles, that break up sections of a
page. Borders usually form around a specific design element or important text. Adding a
border can differentiate between pieces of content in your designs.

To add a border in Figma:

1. Identify the content that you feel needs to stand out from the rest of the content in the
mockup.
2. In the toolbar at the top left of the screen, select the Rectangle tool, which is
represented by an icon that looks like a square.
3. Draw a rectangle on your Frame. Resize the rectangle to fit around the outside of the
element that you want to emphasize.
4. In the Design panel on the right side of the screen, go to the Fill section. Remove the
fill from the rectangle you’ve created.
5. Go to the Stroke section of the design panel. Add a stroke to the rectangle using the
plus (+) icon on the right side. The stroke will outline the rectangle.
6. Use the weight field to select a weight or thickness of the stroke, in pixels. Enter a
value in the field provided, or scroll through values using your mouse/trackpad while
the field is in focus.
Select fill

Fill assigns colors to objects in your design. The color you choose will fill in the design
element, which makes content stand out on your page.

To select fill in Figma:

1. Click to select a Layer in your design that you want to add fill to.
2. In the Design panel on the right side of the screen, go to the Fill section. Click the
plus (+) icon to add a fill to the layer.
3. Figma will add a default solid fill with a hex value of C4C4C4. Click on the small
colored rectangle, or fill swatch, to open the color picker. You can use the color
picker to select any color to fill your shape.

Apply shadow

Shadows create dimensions, especially when used in combination with borders or fill. There
are two different types of shadows: drop shadows and inner shadows.

 Drop shadows come directly off of the element and can go in any direction. Drop
shadows are perfect for making buttons feel like they’re coming off of the page.
 Inner shadows move inward onto the element. Inner shadows are a great way to show
that a button is being pressed.

To apply a drop shadow in Figma:

1. Click to select a Layer in your design that you want to add a shadow to.
2. In the Design panel on the right side of the screen, go to the Effects section. The drop
shadow effect is applied by default, as shown in the image below.
 3. Adjust the drop shadow using the Effect settings icon, which looks like a sun. Feel
free to play around with a few different shadow options in order to find one that you
want to use in your mockups!

To apply an inner shadow in Figma:

1. In the Design panel on the right side of the screen, go to the Effects section. The
dropdown menu is on drop shadow by default. Click on the arrow to view the rest of
the dropdown menu, and select Inner shadow.
2. Adjust the drop shadow using the Effect settings icon, which looks like a sun. The
effect is subtle, but you should notice a shadow inside of the shapes you’ve selected.

Activity Exemplar: Create containment in your portfolio project mockups

A completed Zia's Pizza example showing application of containment is given below:

Use negative space in mockups

Taking advantage of space, in addition to color, lines, and text, is an important way to make
your designs visually appealing and easy to read. Negative space is the area that surrounds an
object within an image. In other words, negative space is the gaps between elements in a
design or the space that’s not being occupied.

Negative space is also often called white space or empty space. Many UX designers prefer
the term negative space because backgrounds of designs aren’t always white, and the space
that's empty in the design will reflect the background color.

Check out how the Google Search homepage uses negative space in the image below. The
biggest elements on the page are the Google Doodle that features the Google logo and the
search bar. There are a few small links across the top of the page, but most of the page is
negative space. This clean design makes the page visually appealing and draws their attention
to the part of the page that they need to interact with to meet their needs, which is the search
bar.
The importance of negative space

Why is it so important to consider negative space when you create mockups? Check out these
four reasons.

1. Use negative space to indicate if elements are related. If two objects are positioned
closely together on a page without negative space between them, they will be
perceived as being related. This concept is based on the Gestalt Principle of
proximity, which you explored earlier in this program. Remember that proximity
means that elements that are close together appear to be more related than elements
that are spaced far apart. In your mockups, use negative space thoughtfully in order to
indicate which elements of your designs are related or not.
2. Negative space draws attention to important elements. Users generally have short
attention spans! If the information on a page or screen isn’t easily scannable, you'll
lose user attention quickly. Using negative space is one way to help users focus on the
reason that they opened the page or app. For example, using negative space around a
button in your mobile app design will help users focus on the most important action,
clicking the button.
3. Negative space gives users a visual break. Negative space helps prevent users from
becoming overwhelmed or distracted. The negative or white space in your designs can
provide users with a visual break as they scan the content.
4. Negative spacing increases readability. You’ve probably encountered online sales
that advertise an entire page full of items. The page is usually really colorful, with a
lot of information to sift through, including prices and descriptions. Ads like these
tend not to include much negative space, which can make the information appear
overwhelming and difficult to read. Instead, you can use negative space in your
mockups to make text easy to read at a glance.
Use negative space in your designs

You can create negative space in your mockups in many ways. Line spacing, padding, and
margins are common methods of using white space effectively, so let's check out each one.

 Line spacing is the vertical space between two pieces of text. Think of reading a
book: the negative space between sentences in a paragraph keeps letters from
overlapping and makes content easy to read. The same goes for your designs!
 Padding is the negative space surrounding content, or between the border and the
design elements. Padding gives objects space to exist before the user moves to look at
another element of the design. In the image above, padding in the dog walker app
provides symmetry to the design and keeps elements from being crowded together.
 Margins are the space outside the border of the design. You can think of margins as a
way to keep you coloring between the lines of your design. In the image above, you’ll
notice the edges of the design surrounded by the margin.
Activity: Revise your portfolio project mockups by adding negative space

Common design patterns in apps

In this part of the course, you've been learning about page layouts. As you begin to layout
pages for the app you're designing, it can be helpful to know about common layouts and
patterns that are used in existing apps. Knowing about these layouts can help kickstart your
visual design process, save you time, and improve your design work.

Common screens in mobile apps

You may have noticed that mobile apps tend to have certain types of screens in common. The
layout and appearance may differ between apps, but they all share the same purpose and
design considerations. Below are some of the most common types of mobile app screens.
Keep them in mind as you begin creating wireframes for your mobile app portfolio project.

Home screen

The home screen is the first screen users encounter when they open an app. Home screens
display the app’s main content and features, and serve as a starting point for users to explore
further.

Since the home screen lets users know what an app has to offer, the content needs to be easy
to understand, use, and navigate. Common navigation elements, like a bottom navigation
menu and a search icon, make it easy to get started with an app because they are familiar to
many users.

It can be tempting to fill a home screen with lots of content, but that can create a cluttered and
overwhelming experience for users. Focusing on essential content—and making good use of
white space—makes home screens easier to use.

Onboarding screens

Onboarding screens introduce first-time users to an app’s main components and functions.
They can help users get started quickly, especially if an app has unique or unfamiliar features.
Onboarding screens can also collect information to create a more personalized user
experience. Designers have a lot of options when it comes to these screens, so they should be
tailored to the experience of a particular app.

A good onboarding flow can boost user engagement and retention. But because they’re often
made up of several screens, they need to be easy to navigate. Designers can minimize drop-
off by using clear, concise copy and engaging graphics to create a seamless and memorable
experience.

Profile/Account screen

A profile, or account, screen contains a user’s personal details (like their name and email)
and their app preferences (like order history and accessibility settings). Because a profile
screen contains a lot of important information, it should be clearly organized and easy to
navigate. That’s why it’s a best practice to make them as simple and clean as possible.

Checkout Screen

The checkout screen is where users complete purchases. Checkout can be more complex than
other parts of an app since it usually involves a few forms for payment and shipping info.
This step can be stressful, so it’s important that users feel as safe as possible. Designers can
help by making it clear what information is needed for each form field and adding visual cues
to indicate that a field has been filled out correctly. They can also let users know their
personal data is secure and include a confirmation message when a user completes a purchase
successfully.

Use emphasis in mockups

Providing a design that meets the needs of your users is always the goal of UX design. One
way that you can ensure that your users understand and find the important areas of your
design is by using emphasis. Emphasis means that an object or element is attracting
attention. When part of a design has emphasis, the user’s eye is drawn there when they look
at an app screen or webpage. There are several ways to add emphasis to your designs.

Size

Implementing changes to the size of elements in your designs is an easy way to provide
emphasis for users by drawing their attention to larger objects while simultaneously
conveying that one object is more important than another.

A great example of size is the visible text within an app's design. Using a larger size for the
title of the page, like "watermelon" in the image below, helps to orient the user. That page
name should be bigger or bolder than the rest of the text on that page to show the importance
of that specific text.
Contrast

Contrast is the creation of opposing visual elements to convey emphasis or comparison.

Contrast is a great way to draw emphasis to elements in a design that are different or
important. In the image below, the checkout cart and "order" buttons are colored bright red
and purple which contrasts with the otherwise white and gray app.

You can also provide contrast by changing the look of text. There are a few ways to add
contrast to text, like bolding, adding color, underlining, italicizing, and highlighting important
information that the user should take note of.

Texture

Texture is the elements within an object that add depth or a pattern to an object. Texture can
make an object stand out from other objects within a design and should be used sparingly to
draw the user’s gaze.

One way to create emphasis using texture is to place lines or shapes over an image that is
used repeatedly. Adding texture provides a break in the pattern of the same image and it gives
users something to interact with. For example, if you are designing a page to show users
information about your brand, like in the image of an app below, adding texture is a great
way to add emphasis and draw the user’s eyes to a part of the design. In the graphic, the
"80% of our shoppers" is represented by the polka dotted section of the pie chart. In other
words, the most important section of the chart is emphasized with texture.
"80% of our shoppers prefer our store brands to our competitors."

Emphasis in the real world

Check out this example of design from the Google's About page, which demonstrates the
effective use of emphasis. Google’s mission statement uses color contrast to grab the user’s
attention and emphasize the main points of the company's mission at a glance.

The design of the page helps the user identify two important things simultaneously:

 Understand the importance of Google’s mission statement with black, easy-to-read

font on a white background that doesn’t distract the reader from their interaction with
the page.
 Color contrast highlights Google’s brand pillars, the most important areas within the
mission statement.

These design choices add emphasis and help guide the user’s attention to a specific area on
the page.

As you design, consider why a user would come to your website or use your app. By adding
emphasis to a certain place on the page or screen, the user doesn’t have to work as hard to
find what they need. And that helps users have a better experience interacting with your
design.

Activity Exemplar: Apply visual design principles to your portfolio project mockups