Week 4: Designing your UI

The most fundamental element of design is:

Lines

Correct! The most fundamental elements of design are lines. Lines are used to help communicate to the audience what they should be looking at or pay attention to.

You’ve designed your wireframes and you now want to
make them beautiful. To do this, you now
have to discover how carefully
considered elements of design can enhance
the final product. In the next couple of minutes, you will identify
the use of images, colors, and shapes and
their role in design. Consider design elements as
necessary parts of a recipe. Unlike the recipe, to visually assemble a
digital interface, these fundamental
elements are crucial. Every component of
a visual message is essential and how they
are combined effects, how the design is interpreted. Depending on what
you want to do, you can use either
one of these aspects alone or a mix of them. The main elements
are line, text, color, shape, graphic elements such as
icons and images, and space. Let’s take some time to
explore each components, function, and application
in greater detail. The most fundamental
element of design is lines. They come in a variety of
colors, sizes, and shapes. Lines of direction
can be seen or not, and can assist in directing
the eye to a certain area. A line’s thickness can convey
additional information. While bold and broad
lines can catch the eye, thin lines are the opposite. Depending on the meanings
attached to them, colors can convey a
variety of messages and specific aspects of
your design layout can be emphasized
using color and lines. Now let’s explore type. Web typography is comparable
to print typography, but it also needs to take
additional things into account to make reading easier
across all screen sizes. To make reading enjoyable, there’s some type
of graphic elements that must be properly balanced. These are typeface, type size, color, line height,
and letter shapes. The next element is color. Did you know that all
elements can be given color? Color set the mood, and it is an effective
tool for developing brand identification
and evoking emotions. Color can also highlight particular parts of
your design layout. The RGB and CMYK color
schemes are used in design. The RGB color system specifically used in digital
design are red, green, and blue primary colors when added together in
various combinations, reproduce a broad
array of colors. There are additional
colors that are made up by combining several
primary colors. Let’s explore some more
qualities of color. Color also has the
qualities of hue, tint, tone, shaded,
and saturation. Let’s discover what they mean. Hue describes how
closely or differently a hue can be compared to
the primary colors of red, orange, yellow, green,
blue, indigo, and violet. When you define a
color as blue-green, you are using two
hues to describe it. Tint is when a color can be tinted to make it lighter
by mixing it with white and tone is the process of muting a
color by adding gray. Shaded is the next element
and this is when you create a shaded version
of a hue by adding black. This graphic is an
example of hues, tints, tones, and shades. The final color
element is saturation. The intensity of a color is
described by its saturation. When the saturation is reduced, the color scenes faded
and lighter while increasing saturation makes
it richer and darker. The terms and light
blue and dark green refer to variations
in saturation. The next design
element is shapes. Shapes have the ability to draw your attention to a layout. There are three types of shapes. Geometric, organic,
and abstract. Geometric forms typically have accuracy and are
structured for example, mathematical squares,
circles and triangles. Organic shapes usually lack sharp edges and feel
smooth and natural. These shapes give
a layout emphasis. Through abstract shapes,
reality is presented minimally. A human stick figure is a good example of
an abstract shape. The majority of logos
use abstract shapes to reflect the spirit of a company using
abstract graphics. Images are also an important
design elements as a user’s experience
can be improved by using a variety
of media elements. The most popular and
accessible medium is still visual because images
are practical, engaging, and simple to
memorize and appealing to us. Images may draw in and direct the attention
of your visitors, arouse feelings and promote a sense of confidence
if used wisely. The final design
element is space. The area that shape occupies
is referred to as space. It also describes
the background in which the shape or
form is contrasted. There’s positive
and negative space. Designs area of interest
is referred to as the positive space of the design and the space
around it is negative space. Let’s explore an example. In this image there
is a white vase. This is the positive space, the black area around
that is negative. There are also two faces
in black in this image. This is also positive space and the white then becomes
the negative space. Elements in a design can be connected and or
separated using space. Narrower spaces link items to show connections
between them, whereas wider gaps divide elements to show
separations between them. Their link is enhanced
by them overlapping. You have learned that
a great products like the little lemon website, not only has to be well-made, but also has to look good. In this lesson, you’ve learned
about the fundamentals of design elements and their
role in design, good work.

You have created a style sheet that contains your logos. This could possibly include typefaces, your color palette, and how pictures and images are to be used.

True

That’s correct. You have created a style sheet that contains your logos. This can include typefaces, your color palette, and how pictures and images are to be used.

You had the wireframes
for the app approved. Now, you want to turn
the wireframes into a high-fidelity design or a design that closely
resembles the final product. You add the little
lemon branding to it. In this video, you
will cover the steps from wireframes to a
high-fidelity mock-up. You received a
brand style guide. It specifies every aspect of the look and
feel of the brand. This includes typefaces,
color palette, and how pictures and
images should be used. It also includes a UI kit, which is a set of
files that contains critical UI components like font sizes, icons,
and documentation. Let me start by showing
you how to create some styles based on
the UI kit provided. First, open the UI kit. Now, I will start by
creating the text styles. I select the display
title on the UI kit and I go to the four dots on the right-hand
side of the screen. I click, “Style”, then
I click the Plus icon, I name it, Display and
click, “Create style”. The style is created. The same process is repeated
to create a color style. I’ve already created
a color style for the yellow but now I want to
create a style for the green. I select the green square. Then I go to the four dots
in the field properties. Click the Plus icon and
give it a name, Primary 1. I click “Create style”
and the style is created. My UI kit has
everything that I need. Now, let’s move
the wireframe and start adding some stylization
to the wireframes. I bring the wireframes
and I select the background on
the first wireframe. I want to give it a color. I click the four dots which
bring up the styles already created and I chose the
green or Primary 1. Next, I want to add style to the little
lemon text on top. I select it and I go to the right sidebar and
select the display style. I also want to do this for the other text elements
in this frame. After that, I want to change the color of
the display text. I select little lemon
and change it to yellow. I then change the color of the other text
elements to white. Next, I need to style
the button according to the UI kit as it is black
with squared corners. The UI kits states rounded
edges with a radius of 16. I changed that on
the right sidebar and I also want to
change its color. I go to the Fill
property and click the four dots and
select Primary 2. I also change the text color to black as white
isn’t very clear. What’s needed now, are images to be inserted. I select the image
box on the wireframe, click the Fill property
on the right sidebar and change the drop-down on
top from solid to image, a checkered box appears and it prompts to
choose an image. I select the image and it
appears in the element. I do this for the
rest of the images. I click Fill and select Image
again, from the drop-down. Then, I choose the
Greek salad image and I repeat this action
for the two other images. The high-fidelity mock-up
is complete and has gone from wireframe to
a stylized mock-up. Why don’t you try
it out yourself?

A ______________ is like a design system, but as its name suggests, it is limited to the elements and features that populate a User Interface or UI.

UI kit

Correct. A UI kit is like a design system, but it is limited to the elements and features that populate a User Interface.

Your client is delighted with how The
Little Lemon website is coming together informed by great user feedback. You now know that design systems have
fantastic resources to generate flexible, consistent and reusable designs for
the users of the little lemon website. These are also a lot of work. So you have decided to create a smaller UI
kit that you will then use to inform your design. In the next couple of minutes, you will
learn about design systems and UI kits. You will also differentiate
between the two and learn about best practice design for both. And finally,
you will be introduced to Atomic Design. Let’s start, in a previous video,
you were introduced to design systems. You should now know that a design
system is everything that goes into creating your product,
including typography, colors, icons, layouts, grids,
coding standards and naming conventions. It can also be a guide on the tone
of voice for your content. A style guide and
documentation for developers. A design system combines all of these in
a way that enables your team to develop, learn and work together. Some bigger design systems
will have a set of rules and guides that aid the reader through dos and
don’ts. Others are simply a set of components and
files to inform design layouts. A UI kit is similar to a design system,
but as its name suggests, it is limited to the elements and features
that populate a user interface or UI. A UI kit still shows a systematic
approach to design, for example, a typographic scale or a color system. It can list a set of buttons,
menu items or components but it is not as thorough as a design system. For the scope of this course
you will use a UI kit. Let’s consider this navigation bar or
nav bar or menu. In a design system this could be
referred to as a nav bar component. It is the primary
navigation on the website. It comprises of a logo, some links and a feature button to call attention to
the little lemons online ordering service. There is a space on the right with
log in and sign up information and a search option. Now that you are more familiar with
what design systems in UI kits are. Let’s explore atomic design
invented by Brad Frost. This is a thought process of assembling
design elements to create bigger design components and it is explained
through a scientific metaphor. Let’s explore this in more detail. Atoms are individual elements like text
boxes, form inputs or links and buttons. You can think of these as HTML elements. Next you have molecules which
combine atoms together. Think of an input box with a label. Inside there is a profile icon with
a link on the right that says log in. To the right of that there is a button
that says sign up, organisms are up next. You guessed it,
organisms are groups of molecules. Think of a nav bar. Moving away from the science metaphor, let’s explore templates which
are like low fidelity or basic wire frames that consist of all your
atoms, molecules and organisms together. Then you have pages which are more
specific refinements of templates. Think of actual content and images. This structured and ordered approach
to composing layouts is granular for a reason. It enforces consistency and
saves time with reusable elements. Think about a search bar. It is usually placed on the top
of a web page or an app and display similarly across
most applications. This is almost identical to the log in
molecule but with a different icon and label. As a UX UI designer and developer you
can now reference a single source of truth where all of your
files are located in one space. In this lesson you learned more
about design systems in UI kits and you were introduced to
the atomic design process. Great job

A component in Figma contains the following characteristics:

A master

Correct! A component in Figma contains a master. 

An instance

Correct! A component in Figma contains an instance.

As your redesign of
Little Lemon progresses, it becomes more complex. However, you can create
components or elements that you can reuse
across your design to make it more efficient. In this video, you will learn how to create a simple
button component. Any layers or created objects can be turned into components. These include a wide
variety of elements like buttons, icons,
layouts, and more. A component has two
characteristics, a master and an instance, which is a copy of the master. Don’t worry about that now, you will cover that soon. Let’s first check how
you create a component. To do this, you must use slightly advanced
Figma UI techniques. These are auto-layout
and component features. The first is the
auto-layout feature. This essentially converts
whatever you are creating into its own frame, giving you more control
and customization options. On the online order page, I created some category
buttons for the menu items, starters, mains, deserts,
ala carte, and so on. I created these manually by adjusting the background
button shape to fit the text. This is how I originally
created these categories. I duplicated the starters
button and typed in mains, however, the button
shape is too big. Auto-layout will rectify this. I select the mains elements and go to the right-hand panel and click the plus icon
to create an auto layout, and the button shape
automatically resizes to the size of the text. Now it has changed into an auto layout frame
in the layers panel, the icon indicates that, and the properties are
in the right sidebar. Now, if I hover over
my text element, it has an outer box around it. This is the frame. Now the button has padding or some space between the text and the top, bottom, and
both sides of the text, which is adjustable. Then I create a component
from this button by clicking the Create Component
icon at the top frame. It resembles four diamonds. This has now created
a master component. You can create instances
and variations based on this component. Now, let’s make instances
of this component. I can duplicate the button by pressing Control D on Windows or Command D on Mac, or I can click and drag on
the master button component and press Alt as I drag. The layers panel shows that
a second button was created, but the icon is a
single diamond. This tells us that this is an instance of the
master button. I rename it yellow button. I click on the yellow
button instance and change the fill of
the frame to yellow. The instance of only this
button changed to yellow. Now I go to my master component. I change the radius to eight and all instances will
retain this change. The component master
button is the master. If I want to change all
instances, I do it from here. If I want instances to have
individual characteristics, I do it inside that
particular instance. In this video, you
learned how to create a simple button component. I encourage you to keep
exploring components by covering the readings on
how to use these techniques to create a more
complex card component.

A prototype is a diagram or a set of diagrams that consists of simple lines and shapes representing the skeleton of a website’s functionality.

False

Correct! A prototype is an almost-working model or mock-up of the product which you use to test it with prospective users and stakeholders.

A prototype is an excellent way for you to get
valuable feedback. Adrian has asked you to create a prototype of the
meal ordering process. In the next few minutes, you will learn how to create interactive prototypes using high-fidelity designs in Figma. These prototypes can be
animated and shared with customers and colleagues for further testing and feedback. You may wonder what
a prototype is. A prototype is an
almost working model or mock-up of the product, which you use to test it with prospective users
and stakeholders. Now that you have designed
some of your UI layouts and have been populating your
design system and UI kit, let’s put it all together in
an interactive prototype. Using interactive
prototypes, you can show how the design
will act in a way that is helpful in assisting
others to understand what your design would look like and behave once the final
product is built. First, the design needs to be created. Which I have done here. I want to test some
of the functionality, so I developed a
scenario using Tilly, our persona, and I
generate her user flow. Tilly is hungry after
a long day at work. She opens the order
online option on the little lemon mobile
version of the website. Initially, she is not sure
what she wants to order. She sees the bruschetta and
wants a bit more information. She taps on the bruschetta. This provides her
with all the details she wants and options
to customize it. She decides it’s good just
the way it is and adds it to her order and is given a summary and a
breakdown of the price. She then spots an
option to add more to her order and wants to have
a look at the Greek salad. Once again, she’s given
the description on all the options to add
other ingredients. Again, she decides
that it’s good enough as it is and taps at an updated order
summary appears with an updated basket in the
top right-hand corner. There are two items
in the basket. Tilly sees she has two items and the size that she would like
to order dessert with that. She taps the back button, which returns her to
where she can browse the other menu categories and see how many items
are in her basket. Now let’s see how we link these elements and
screens using Figma. Click on the prototype
link on the panel on the right next to
the design panel. You will notice that a blue
box with an arrow appears and as well as a blue circular
icon on the home screen frame. Select it. I want to
select bruschetta. I double-click on the area until the relevant
part is highlighted. I click the blue
button on the right and drag it to screen two. I have now linked these screens. The interaction
details pop up on the right-hand
side and it states navigate on top to Screen 2. Next, I link the add
button to Screen 3. From here, I link the Greek
salad element to Screen 4, and then link the add
button to Screen 5, which is the updated
order summary. From here, I link the back button to
the home screen too. Okay. Now having
completed the links, let’s look at the
interactive prototype by pressing the blue box with the arrow in it on
the Figma Canvas. This opens the prototype. I tap the bruschetta, and I’m shown its details. I add it to basket and I’m
brought to the order summary. I tap the Greek salad, see its details, which brings
me to the updated summary. When I click the back button, I return to the home screen. Success. You have
now learned how to create a simple interactive
prototype in Figma. Adrian and the users were pleased with the
prototype you provided. Congratulations. You learned how to create interactive prototypes using high-fidelity designs in Figma. These prototypes can be animated
and shared with clients and colleagues for
further testing and feedback. Good work.

On the ____________ side of the layers panel in Figma, you will find the local components page. 

right-hand

Correct! On the right-hand side of the layers panel in Figma, you will find the local components page. 

You’re ready to prepare
the application for testing through an interactive
prototype on Figma. You can create the
prototype and share a link with users when you
are ready for testing. Let’s cover the prototype. First, I open my Figma file. Now, I can scroll
the category buttons horizontally and the
dishes vertically. I can also toggle the
categories on and off. Be mindful that it’s
beyond the scope of this prototype to make these dynamically filter the content. But it’s a great starting
point to facilitate a rich user experience for
the task participants. Let’s create both of
those effects in Figma. To replicate this, I need to delete the current set
of category buttons on the home screen on the right-hand side
of the layers panel. I go to the local
components page, which I’ve created to
store my components. Let’s create the
category buttons toggle interactive component. To do this, I create an auto layout button and
convert it into a component. Then, click the Component
button and name it master button. I hit Enter. Now, I right-click
this component, go to main component
and then add variant. This is where I put
in the variation. In this case, what happens when the user toggles
or clicks it. A perforated outline appears. Now, I want to
style the variant. To do that, I select it in the label and the design
panel, I type selected. Then, I hit Enter. Now, I customize its appearance. Select the button and change
the fill to a darker color. Next, I double-click
into the text and then change the fill of the
text to a lighter color. Now, I want to prototype what happens between the two states. Click the Prototype
tab on the right. Double-click on the
first instance, drag the prototype icon
to the second one, and the properties tab appears. You’ll see on-click change
to the Selected icon. Now, I want to
double-click and drag the second property up
to reverse the process. When this one is clicked, it will go to the
selected version. This is how to toggle
between two states. Let’s get this onto our
prototype and see how it works. I’m going to go to page 1
on the left-hand panel. I go to the Assets tab beside it and type
in master button. The button shows up. I drag this onto the auto-layout under
order for delivery. Let’s test it now. I click the Present
prototype button. The button changes when
I click it. Perfect. Let’s make some more
category buttons. I select the button
and duplicate an instance of the button
component by pressing Control or Command D. The button duplicates but they are stacking one on
top of each other. This is happening because the parent auto layout frame
is set to stack vertically. I’m going to select both buttons and make this an
auto-layout frame. Then, in the auto layout
properties panel on the right, I can change their direction. I can duplicate as many of these category buttons as I want. I type into each one to
give them unique titles. I gave each one a new label. Next, I want to make
a horizontal scroll. I double-click the frame. I can see it’s called frame 5. I’m going to rename
it to dish category. I want to limit the amounts that these buttons can scroll
within the screen. To do this, I
double-click to get into the frame and convert
it into a component. Then, I right-click and
choose frame selection. I scale it from the
right-hand side to snap to the edge of
the device window. This creates the overflow edge. I select the Prototype tab and click on overflow scrolling. Then, I click on
horizontal scrolling. Let’s check it. Now,
the category buttons toggle on and off, and I can scroll left and right. I repeat the process to
scroll the dishes vertically. To share my prototype, click the share button, copy the link and share it
with the test participants.

I think a fun fact about interactions is
just how often you encounter them when you’re using an app most of
the time without realizing them. Micro interactions are meant
to be very simple and clear so you might not even notice that
you’re exiting out of a dialogue or you’re seeing confirmation that
you did something on your app. Micro interactions are small interactions
that you’ll encounter many times when you’re using an app. They serve a single purpose and usually
it’s to bring more understanding to a flow that you might be going through but
it’s also to bring a more emotional and human aspect to your app as well. Micro interactions make it clear to a user that an action they just
took was successful or it triggers them to complete another
action or go to another step in a flow. They really bring a level of
understanding to what the user is doing. One example of a micro interaction on
facebook dot com is when you hover over the like button and you see a little bar of all
the reactions you can take on a post. This micro interaction is really
clear in what it’s supposed to do. The user is supposed to tap
one of the reactions so that they can quickly
react to someone’s post. It also brings a level of
delight to the app as well. If you ever hover over the like button, you’ll notice that
the interactions are animated, it kind of just brings them more fun and
human aspect to using facebook as well. Micro interactions benefit the user
because they give them a really clear understanding of where they are in the app
and like if the system is in a good place, for example, if you’re filling out
a form and put in your name for let’s say a price, you might see
an error pop up on the form and it’s really clear to you that your action
hasn’t been submitted successfully and that you need to actually
change the form input. If we didn’t have a micro interaction
there, you might not know whether you actually like purchased that ticket or
completed that flow successfully. So micro interactions are really important
for giving almost a status to the user of. Did you do this successfully? What should you do next? And giving feedback to the user. So a lot of micro interactions
are actually conceptualized in the design process. Usually designers will
design a certain flow and to end and have a different design for
each screen of a flow. What should happen when you tap
a certain button and so on. Engineers build out these micro
interactions and sometimes we might realize there’s a gap in some sort
of interaction when you press a button, nothing happens. So in the testing phase we kind of
realize where we need to add more micro interactions or when a micro
interaction is super annoying and not really beneficial to the user as well. Since joining meta. I’ve seen how many micro interactions
are used all over our products. Many I’ve used subconsciously and when
I’m building a product now, I’m really thinking about the things that happen when
someone goes through a flow successfully or what hap happens when there’s
an error that they might encounter, luckily here at meta we have a bunch of
reusable components that we can use for micro interactions. An example is a toast and
a toast is something that appears in like the bottom corner of your
screen when you complete inaction. So if I were to try to create a facebook
event and I do so successfully, A little toast with like a green check mark would
appear in the corner if something happens, say your internet goes out and we’re
not able to create the facebook event. A little toast will appear in
the corner with a warning sign, so it’s really clear to
the user what’s happened and it brings a level of understanding
to their experience as well. I would say my biggest piece of advice
is don’t overthink micro interactions. Sometimes people will learn how to do a
really fancy animation and think that they have to include it in every single
micro interaction on the site. I think the biggest thing about micro
interactions is that they should be very clear and understandable and most of
the times that means simple as well. You don’t want to include two too many
micro interactions and you don’t want to make the micro interactions that you
do include very fancy and distracting for the user as well. Usually people don’t think of micro
interactions when they’re trying to design a product, but it’s really important that
you think about them in the design process and also in the testing process,
I use the product a bunch of times. I don’t even notice when I’m missing
a little con for Formacion toast or a little error dialog. So it’s really important that you
think about these details and that you’re putting your product in front
of people so they can also see these gaps. And you can close them as well. Best of luck learning more about micro
interactions and just know that they will bring your app to a high quality bar
and make sure that users really understand the flows that they’re going through
on your new product or idea.

Congratulations, you’ve reached the end of the fourth module
in this course. Let’s take a moment to recap
on some of the key skills you’ve gained in this
module’s lessons. In the first lesson, you learned how to
enhance your design and should now be
able to identify the use of images,
colors, and shapes, and explain their
role in design. In lesson two, you learned
about UX/UI design principles. Now that you’ve
completed this lesson, you are able to explain the importance of
good form design, implement best practices
to improve form design, describe component driven
products and design systems, and explain how component
driven products and design systems deliver
captivated audiences. We then moved on to
the third lesson in which you learned
about prototyping, sharing, and testing
your designs. Having completed this lesson, you are now able to create
interactive prototypes using high fidelity
designs in Figma, and also describe how these
prototypes can be animated and shared with
customers and colleagues for further testing
and feedback. Having completed this module, you should now be able to
enhance your UX/UI designs, apply good form design, how components are
created in Figma, prototype and share your design. Great work.