Week 3: Applied Design Fundamentals

In Figma, frames and groups are the same. 

No

They both help organize your file by nesting or grouping layers together. However, frames supply a lot more functionality like independent sizing.

You have made great progress
learning about UX and UI. You also had a brief
introduction to Figma. Now it’s time to
expand your knowledge, which will help you improve
the little lemon website. In this video, you will explore how to use
the layers panel, how to drag and organize layers, and how to construct shapes. You will also identify
how to duplicate, scale, group, and
then align elements. First, let’s cover a
few concepts in Figma. They are frames,
layers, and groups. Let’s start with frame. In other design tools, this may be referred
to as an Artboard. Think of it as a container
where your design lives. Now let’s define
what a layer is. A layer is an object
within a frame. As you add an object to a frame, a new layer will be created. The next concept to
cover is a group. In a group, multiple
objects can be combined, and once combined, a
single top layer is created which contains
all the objects. Frames and groups
appear very similar. They both help
organize your file by nesting layers or
grouping layers together. However, frame supply a lot more functionality
like independent sizing. You will cover this in more
detail throughout the course. Now, let’s explore these
concepts in practice with Figma. A frame is a container
for elements. Think of it as a
screen on an App. For example, Screen 1 is
the first screen you see, and Screen 2 is the second. If you add another frame, that would be the
third, and so on. To create a frame, you click the frames icon
up on the top toolbar. You then click and
drag out a frame. Another way of making a frame is to select
the frame icon. Go over to the
right-hand panel where Figma has created lots
of frame presets. In this instance, I’ll
use a desktop frame. To navigate around
your frame or Canvas, go up to Zoom menu in the
upper right of the screen. It will tell you the
current Zoom level and has some useful reminders for
shortcuts related to zooming, such as Command or
Control Plus to zoom in or Command or Control
minus to zoom out. To pan across your screen, you select the hand
icon on the toolbar, or you can use Shift
on your keyboard. Now, let’s draw some shapes. I select the frame and go to the basic shapes Tools
menu in the toolbar. I click the arrow next
to the circle icon to open the Shape Tools
and select a rectangle. I click and drag
out a rectangle. If I want a square, I select the rectangle icon and hold shift on my keyboard
to create a square. It’s the same process
to create a circle. I selected the ellipse
and hold the Shift key. To duplicate the rectangle, I select it and I press Control or Command
D on the keyboard. The rectangle has been duplicated and can be
placed wherever I wish. Let’s look at the
properties of these shapes. I select the square. Over on the right-hand side, I can see its x and y
coordinates and the width, height, rotation,
and corner radius. Let’s just change
the radius to 100. As you may have noticed, every shape by default has
a gray fill and no outline. To change this, I go to the field section and click the little rectangle that
opens the color palette. Using the circular icon, I click to select
a color I like. If I want a different hue, I drag this slider across. I can also change
the transparency or type in a color
reference number. Here, I can also
apply an outline which is called the stroke,
and choose where I want it. Inside, outside, or center. In this case, I choose
the outside option. On the right-hand side, there are advanced
stroke settings where it can change
its line type. I can also add an effect. I click the plus icon
and add a drop shadow. In the layers panel on the
left-hand side of the screen, I can see my shapes as layers in the order
they have been drawn. I move the circle shape
on top of the square but decide I want the square
on top of the circle. All I need to do
is drag and drop the squares layer on top
of the circle layer. Now, it’s important here that you keep the layer’s
name correctly. I rename Rectangle 2, to square and Eclipse
1, to circle. There are also other features
within the layers panel. I can switch layers on and
off as well as lock layers, which just means it
cannot be moved. We’ve got the rounded square
and the circle that are two independent elements
that work separately. But if I want to make them
move and act as one object, I select them and I right-click and we
choose Group Selection, or Control G, or Command G on your keyboard. This allows these
elements to move as one. If you want to alter
one of the shapes, just double-click
inside the shape. Now that you have explored the fundamentals
of frames, layers, and basic shapes,
why don’t you just play around and create
your own elements? In this video, you
learned the basics of Figma frames,
layers, and shapes. I encourage you to practice using these basic
tools yourself. Note the differences in the layers panel between
groups and frames.

To create a fixed-size text box, you can click and drag to the size of the text box that you want. 

Yes

I can click and drag to create a fixed text box with specific dimensions. 

In interface design, fonts
play a very important role. The font you choose
will determine the readability and the
appeal of your text. The color, size, spacing, and width of text all deliver a message of your
product to the users. In this video, you will cover the basics of using the
text and font tools. To get started, let’s explore the text properties and the design panel on
the right sidebar. There are two ways to
create a text element. To begin typing, I
click the “T icon” in the toolbar on the top. I can also use the T
keyboard shortcut. Then I can start typing. This creates a text box with
an auto-resize feature, which allows the width
of the text box to grow horizontally along
with the text. I can also click
and drag to create a fixed text box with
specific dimensions. Since the text box size
has been established, the auto-resize is fixed. This allows longer strings
of text to move to the next line once they reach the edge of the fixed text box. To edit an existing
text element, I double-click
inside the text box. To allow the textbox
to auto-resize, I go to the design panel in the right sidebar and change the auto-resize value to height. Now, when I add new text, the bounding box will enlarge vertically but not horizontally. When I use this setting, I ensure the height of
the text box is sized based on the line height
specified in the font style. A text box that is
sized too small for its contents will automatically resize to the height to fit. When creating texts in Figma, three resizing loads
can be applied. Grow horizontally,
which is the default when you click wants to
make a new text box, fixed the default when
you click and drag to make a new text box
and grow vertically. To customize texts in Figma, I can use the dropdown and the design panel in
the right sidebar. I can then select a new font. I can also type in the field to search for a specific font. I search for the Oswald font. To further customize text, I can select from
the drop-down menu to choose the style or U shortcut keys
such as control V on Windows or command
B on a Mac for a bold, control or command
I for italics, control or command
U to underline. I can change the font
size by typing it in or selecting the new field and pressing the arrows up or down. I can also change the amount of space between each line of text. The default is auto, let’s increase this to 43. To the right of this property is the character spacing option. It adjusts the spacing or kerning of a certain
character combination. By default, Figma uses
percentage values. However, if I type
in a pixel value, it will change the
unit to pixel. For example, let’s change
the spacing to four pixels. Now, let’s explore
text alignment. Horizontal alignment defines how text is distributed
within its bounding box, left, right, and center. On the other hand, vertical alignment
determines how the text is distributed
vertically, top, bottom, and middle. When I go to the three dots at the bottom of the
text options section, it brings up three
additional tabs. In the Basics tab, you can choose how you want your text to resize
horizontally, adjust the horizontal
alignment of the text, apply decoration to text, like strike-through,
and underline. Change the spacing between
paragraphs of text. Offset the first line of text with a paragraph indentation, create numbered or
bulleted lists, or change the text case. In the Details tab you can
apply settings such as style, position such as superscript, subscript, and fractions. You can also access any open-type features
like letter forms, character variance, and
horizontal spacing. Finally, in the Variables tab, you can adjust the fonts
variable axes setting. There are other attributes not within the Text
Properties panel, which can be used
to modify text, such as changing the
color of the text, adding a stroke, or adding an effect. Let’s make this text green
by changing its fill. Now, let’s add a green one-point stroke
to this text layer. Then add a drop shadow to this text layer by
adding an effect. I’ve applied a couple
of effects to the text. In this video, you’ve
covered some text and font tools that are
available in Figma. I encourage you to take some
time to practice using them.

Do grids help organize content?

Yes

Grids organize the content on the page and create alignment and order. 

Everyone wants a mobile
version of their website. One design for all screen resolutions. For example, on a phone, the user would
see content shown in a single column view. A tablet might show the same
content in two columns. This is where responsive
design comes into play. Responsive design, is an approach to web
page creation that makes use of flexible layouts which removes the need to
design layouts to suit every device. In this lesson, you will learn how to
create a responsive grid system for desktop, tablet, and mobile devices. A web page or app is built of squares and
rectangles, which are contained within a grid system or a structure of
invisible lines and columns. They organize the content on the page,
and create alignment and order. They form the basic structure
of the user interface. Let’s see how we can design in figma
with responsive web design in mind. Let’s start by creating responsive grids. To get started, I select the frame
icon on the toolbar on top and press f on my keyboard. Which brings up the frames panel. Then I select the desktop frame,
1440 by 1024. On the right side bar,
there is a section called layout grid. There was a plus icon on the right. When I click it by default, a simple
10 pixel by 10 pixel grid will appear. If I click on the nine dots below, a pop up will appear which gives options
to adjust the size and color of the grid. They are static and pixel fixed. Which means, that if the frame is
adjusted the grid stays intact. There was a drop down menu offering
three different types of grid. I will start with the column grid. The column grid helps to
order content horizontally. When it is selected, the grid inside
the frame changes to the default 5 column grid with the gutters
the pieces in between. The most common number of columns
are 12 on desktop, 8 on a tablet, and 4 on a mobile. The common gutter size is 20 pixels. So, let’s change the grid
to a 12 column grid. I keep the type to stretch, which means
the width of the column will automatically grow or shrink when I resize the frame. To keep the grid responsive,
I changed the margin to 70. This is the space between the content and
the left and right size of the screen. And I keep the gutter at 20. Now, let me add some order vertically. Here, I bring in the eight point grid, as most of the popular screen
sizes are advisable by 8. And it’s a base for space and consistency. So, I select the frame and
head over to the right sidebar and click the plus in the layout grid
section to overlay another layout. In the dialog box,
I change the grid layout to a row and change the count or
the number of rows to 1000. Then I changed the type top and
the height to 8. Finally, I set the gutter to zero. Now we have a vertical and
horizontal grid. So, let’s add content blocks. You will notice now that
everything snaps to the grid. This makes things simpler to arrange and
makes all measurements consistent. And everything is divisible by 8. If I want to view the frame
without the grid system, I click on the zoom percentage in
the top right corner of the screen. This will open the view settings menu. Then I can find an option
to turn grids on or off. Alternatively, I can use the keyboard
shortcuts to toggle layout grids off. On a Mac, it’s control G and
Windows it’s control shift 4. By using the same command,
the grid will be displayed. Constraints are another
benefit of using a grid. I select the content boxes in the desktop
version and give them constraints. Constraints are used to fix content
on a layout to the left, right, top, bottom, and center of a grid. Here I apply left and right constraints. And now, if we altered the frame size,
the contents act responsively and change size also. In this video, you covered how to
create a responsive grid system and learned how to constrain
the elements within the grid.

When working with multiple elements, it’s important to make sure they align precisely. You can achieve that by using the Design panel in the right sidebar. 

Yes

Proper alignment is important in a design. You can align objects by using the tools in the design panel in the right sidebar. 

You already know that Figma
offers some basic shapes, but sometimes you will need
shapes that aren’t available. It’s important to know how
to create new shapes from the ones available by combining
and manipulating them. In this video, you
will learn how to combine elements to
create new ones, how to align them with precision
and how to scale them. Let’s start with
combining elements. I have a number of
shapes on my screen. I want to select three of them, so I click and drag around them. Now I go to the toolbar on the top center and I
click the two squares. The drop-down shows
several options. The union option combines the
selected shapes into one. The subtract option removes
objects from the selection. The Intersect option shows where the objects selected intersect. Finally, the exclude option excludes areas where
shapes intersect. Now let’s explore how to
align and distribute objects. Designers know that
it’s important for their products to look good, and part of that
is achieved with proper alignment of objects. To align objects, I select
all the objects I want, and then I go to the design
panel in the right sidebar. The alignment tools
are on the top. There are various
options in this panel. The first six are for aligning elements in relation
to one another. They are align left, align horizontal centers, align right, align top, align vertical centers
and align bottom. Finally, the last options
distribute elements. I can select the objects and distribute them vertically
or horizontally. In addition, it’s important
to make sure that the sizes of objects correspond
to the intended design, so let’s cover how to do
that with normal scaling. Scaling an object
means to resize it. To scale an object, I select it and drag it corner. Now, let me select multiple objects to
check what happens. When I resize a group, its child elements will scale. However, effects, strokes and
text sizes will not scale. Notice how the text in the
element doesn’t scale, nor will effects or strokes. If I also want to scale
these properties, I can use the scale tool located at the top-left
corner of the screen. I select the group, click on the scale tool and drag it using the
scale controls. The scaling tool helps make sure the element or the elements
of the frame are consistent. In this video, you
learned how to combine elements to
create new ones, align them with precision
and scale them.

When creating a mask in Figma, you select the shape and the image and make sure the shape is on top of the image. You can verify their positions in the right-side panel. 

No

To create a mask in Figma, first you select the shape and the image. Then, you make sure that the image is on top of the shape. You can do that in the layers panel in the left sidebar. 

As a designer you will work with
images pretty much every day. So, you need to know the correct methods
of inserting and adjusting images, which will help you
create beautiful designs. So let’s explore images in Figma, in this
video, you will cover how to insert images and how to mask elements to show specific
parts of an image and hide the rest. There are several ways to insert an image. I can use the place image function,
change the fill properties or drag and drop an image. First, let’s cover how to use
the place image function. I go over to the Figma icon
on the top left hand side and scroll down to place image. Or I can use the keyboard shortcut
command shift k on a Mac or control shift and K on Windows. Now, I select an image to upload, Figma will then display
a crosshair mouse pointer. I click and
drag within the frame to place the image. I make it one column wide and square. I adjust this in the design panel after
adding the image, and I set the image to be 112 pixels wide and 112 pixels high,
which is the size of the box. Then I align the image with the box. Second, I can insert an image by filling
an object with the image I want. I select an object, then I go to the fill
section in the design panel on the right sidebar and click the gray solid color. There is a drop down menu and
I select image. A checkerboard pattern
appears with my shape, with a prompt to choose
an image to upload. Several image or photo specific options
to alter the image such as exposure and contrast are displayed. There are also options in the drop down
menu to change how the image is displayed. The default is set to fill. I can also change it to fit, fit allows
me to show the full image in my shape, but it may cause blank
space around the image. I can also crop the image that I insert. The crop option allows me to crop
the image to the size that I want. Another option to fill an object with
an image is to use the tile option, which allows me to create a pattern. Finally the last way to add an image is
to drag and drop the image onto Figma. One other effect I can
apply to images is masking, where I hide some parts of an image and
reveal others. Sometimes I want just one part of an image
and I want it in a specific shape that is different from the shape
of the original image. Masking helps me achieve that,
to mask an image, all I need is the image I want to mask
on and the shape I want to mask by. Let’s explore how to do that. I start by drawing a circle. I make sure that the images
on top of the shape. I can do this in the layers panel. Then I select both the shape and image and click the user’s mask button in the
options on the top center of the screen. Now, all I have to do is reshape
the picture to fit into the circle. A mask group will appear in the layers
panel on the left, which I can rename. I can do this for any kind of shape. Now, you know how to insert images and
how to mask elements. I encourage you to try practicing
these newly learned skills.

When creating a wireframe it’s important to include images and colors so that your user can better visualize your design and give you feedback.

No

Correct! The purpose of a wireframe is to create a basic structure for each screen in the design before things like branding, colors and images are considered. It provides a way of communicating ideas quickly, which can be refined later. You focus on the user experience and on what they need to accomplish a task.

The Little Lemon
restaurant has faced difficulties with the order online feature on their website. The restaurant’s menu is too long, requiring
endless scrolling. There are no options to order a specific number of dishes. They user has to
repeatedly select addition added to the basket. How can this be improved? You already learned
how to create grids, draw shapes, and manipulate
objects in Figma. In this video, you will learn to describe the concepts
of wireframing, and design wireframes
using Figma. The purpose of a wireframe is
to create a basic structure for each screen and the design before things like branding, colors and images
are considered. It provides a way of
communicating ideas quickly, which can be refined later. You focus on the
user experience, on what they need to
accomplish a task. I will use Figma to draw the wireframes so they can be shared with other team members, giving them the opportunity to make comments in
the same document. I’ll create three wireframes
in this exercise. First, let’s list
Adrian’s requirements. They will become content blocks, which will give me
a nice skeleton of what content will appear
in the wireframe. It will show the
Little Lemon brand about and menu categories, prices and a customize
order section. It will also show description
and photos of dishes, delivery or take-out options, the number of dishes
in each order, and an add to order button. Finally, it will show a login, and a pay section, and of course a navigation bar. Now, we have a good idea of what I need to put on my wireframes. I will begin with the
mobile version first. In UX, this is a
common practice. It’s called mobile first design. This is because most
users on the web nowadays access websites
on their mobile device. I want to make sure
that my design works perfectly on
a mobile device. In addition, it’s easier to solve design problems
on a small screen, and then adapt them
to a large one. On the first frame, I need
the content blocks to contain the navigation
bar about Little Lemon, and menu categories,
and menu dishes. I select a mobile frame and add a four-column layout
grid to the frame. Then, I construct content blocks using rectangles for each block. Next, I move these
blocks out of the frame. Then I make the
rectangles narrower, but I do not change the text. It gives me a rough outline of all the contents
in the wireframe, to use as a reference as I’m
designing within the frame. Now, let’s focus on
the navigation bar. I need to offer users a way to navigate to the home screen. So I add a logo that will take me back
to the home screen. I also include a shopping basket as it’s an online
delivery service. I chose to use a hamburger menu. When tapped, it opens
up a pop-up overlay so the user can easily navigate
to other pages on the site. For the logo, I draw a rectangle and diagonal
lines through it. This is a conventional way to denote an image placeholder. When the basket is tapped, it opens up a pop-up overlay, which allows users to track and alter what they
intend to purchase, and an option to checkout. In the about Little
Lemon content block, I want to include the
Little Lemon name, what city it is in. A brief description of what type of food it offers, a photograph. Adrian wants users to have an option to book
a table online. So I put it in this
content block as a button. When clicked, the user is
brought to another page. Now, let’s work on
the menu categories. I know they have not
been decided yet. However, I represent
them as buttons, naming them Cat 1, Cat 2, and so on. Now, I want to add some
dishes from the menu. l add them on the bottom. As this is the first
screen of the online page, Adrian wants to highlight
this week’s specials. I need a title,
the name of dish, a description, the
price, and an image. This section is scrollable vertically to see further items. I need to note that
when a dish is clicked, the user is taken
to another screen. I repeat this process for all screens in the
order online section. In the wireframe, no color
or font images are included. It is just a blueprint. All that is important here is the layout and functionality. In this video, you
explored the concept of wireframing and how to design
wireframes using Figma. You’re encouraged
to practice it, and perhaps wireframe
the desktop version of the Little Lemon website.

When conducting usability testing, do you use personas?  

No

Correct! Usability testing is the process of getting actual people to use a real website, app or other product you’ve designed while tracking their actions and reactions. 

Now that you explored wire framing
to improve the food ordering element of the Little Lemon website, it’s time to cover how you can
test your design for usability. In this video, you will learn
to define usability testing. Identify the players involved and describe
the different types of usability testing. Usability testing is the process of
getting actual people to use a website app or other products you’ve designed while
tracking their actions and reactions. Usability testing is crucial to
ensure you create an effective, efficient and
delightful experience for your users. Users are given tasks to perform while
being observed by a researcher to see where they run into difficulties or
become confused. If many people run into the same issues, recommendations can be made to
fix these usability issues. It offers opportunities
to make improvements. There are many types of usability testing,
but the facilitator, the participant and the tasks given
are the leading players in most of them. Let’s cover them now. The facilitator gives
the participants tasks. They monitor the participants behavior and listen to feedback as they
complete these tasks. The facilitator may also ask
follow-up questions to get further information from the participant. The participant is a user of the product
you have designed or a similar product. Practical actions that the participant
might carry out in every day life are used as the tasks in a usability test. Depending on the study objectives and
the usability testing, they may be highly detailed or vague. When conducting usability testing,
task phrasing is crucial. Minor inaccuracies in the tasks wording
can lead participants to misinterpret what they are required to complete or
affect how they carry out the task. The facilitator may read the task
instructions to the participants or they may be given to the participants
on writing in task sheets. Participants are often asked to
think aloud while completing tasks, allowing the facilitator
to follow their progress. Knowing which task
the user is completing and that the participant has read
the instructions correctly. There are different usability testing,
let’s explore them now. First, qualitative usability
testing aims to gather insights, results and narratives about how
users interact with the product. Qualitative usability testing is the most
effective method for identifying issues with the user experience compared
to quantitative usability testing. This type of testing is more prevalent. On the other hand, the goal of
quantitative usability testing is to gather metrics that capture
the user experience. Tasks, success and time on task are two
metrics frequently collected in quantitative usability testing. The most effective method for gathering benchmarks is
quantitative usability testing. Depending on the type of study, different
numbers of people are required for usability test. The Nielsen Norman Group advises
utilizing five participants for typical qualitative usability
research of a single user group to identify the volume of a product issues. Let’s now cover other types
of usability testing. Usability testing can be done online. Online testing is popular,
because in-person research, usually requires more time and money. You can have moderated and
unmoderated online usability testing. Online facilitated usability tests and in-person testing operate
pretty similarly. In an in-person environment, the facilitator assigns the task
speaking with the participant. But online, there is a physical
distance between the facilitator and the participant. Facilitated tests can typically be held
using screen-sharing applications. In contrast, remote unfacilitated
usability tests do not have the same participant facilitator interaction. To setup written tasks for
the participants, the facilitator uses online remote
testing technology to deliver the tasks. The participant works alone and
at their own pace to do the tasks. A session recording and
metrics like task success are sent to the researcher when the participant
completes the test. In this video,
you learn to define usability testing. Identify the players involved and describe
the different types of usability testing.

Congratulations, you completed this
module on applied design fundamentals. In this module, you explored the Figma
fundamentals and iterative design. It’s now time to recap the key points and
concepts you learned and the skills that you gained. You began the module exploring Figma. After you completed the first lesson,
you are now able to use frames and layers, manipulate basic shapes, described
the principles of layered design. You also covered how to use type and
text, and you can now describe responsive design and
use grids and constraints. Finally, you learned how to
manipulate elements and images, and to describe design principles. After you covered some Figma fundamentals, you progressed to lesson two where
you focus on iterative design. In this lesson, you learned how to
create wire frames from your designs and identify rapid prototyping tools and
methods. Finally, you learned how to
perform usability testing. You now have an understanding
of some design fundamentals. You learned about Figma and
how to use it to create wire frames, applying design principles and
best practices. That’s another important
step in your UX UI journey. Well done.