Practice and reflect on the skills you learned in this course.
Learning Objectives
- Synthesize the skills you learned in this course.
- Reflect on what you learned in this course and the next steps in your journey.
Graded Assessment
Video: Course Recap for Principles of UX and UI
This course covered the principles of UX and UI design, including:
- Introduction to UX and UI design, differentiating between the two, and understanding UX goals and quality components
- User-centered design, empathy tools, and personas in UX design
- Evaluating interactive design, including evaluation methodologies, designing for accessibility, and best practices for navigation and form design
- Applied design fundamentals, including working with Figma, iterative design principles, wireframing, prototyping, and usability testing
- Designing UI, including enhancing designs, creating component-based high-fidelity designs, using mood boards, and creating design systems in Figma
- Creating high-fidelity design prototypes, including micro animations in UI, and animating and testing prototypes
The course concludes with a practical assignment to design a booking table on the Little Lemon website and a graded assessment to test understanding of the course material.
In this course you learned about
the principles of UX and UI design. Let’s take a few moments to recap
the key topics that you learned about. In the opening lesson you covered
an introduction to UX and UI design. During this introduction you are able
to differentiate between UX and UI. Describe what UX is, its goals and
quality components and defined UI and different types of design. You also got started with Figma and
explored user centered design and the concepts of empathy tools and
persona in UX design. You then moved on to
evaluating interactive design. In this topic you explored
evaluation methodologies and covered designing for accessibility. You also examined best practice
principles of evaluation by studying practical examples of navigation and
form design. You then progress to learn about
applied design fundamentals. In this topic, you explored
the fundamentals of working with Figma and reviewed principles of iterative design
including wire framing, prototyping and usability testing. Next you moved on to
explore designing your UI. Here you learned how to
enhance your design and create component based
high fidelity designs. You also learned how to use mood boards
and how to create design systems in Figma. Then you covered how to create
a high-fidelity design prototype and include micro animation in UI. Then you learned how to animate and
test your prototype. After all that you are now ready for
your assignment, booking a table on the little lemon website
to put in practice what you learned. Then you will take the grated
assessment to try out what you learned in this course. Good luck.
Reading: Exercise: Booking a table on the Little Lemon website
Reading
Overview
You will design and prototype the reserve a table feature for the mobile version of the Little Lemon restaurant website. This task will include, designing information architecture, and incorporating text, animations and graphics of branding and content.
You are encouraged to follow the steps you learned throughout this UX UI course. Therefore, you will be expected to create a solution to the problem, a persona, a journey map, wireframes and an interactive high-fidelity prototype. You will need to submit:
- A text description of the problem you are solving,
- A link to your persona in,
- A link to your journey map in Figma,
- A link to your wireframes in Figma and
- A link to your prototype in Figma.
Instructions on how to share your Figma designs are described in the last few seconds of the Animate and test your prototype video in this course.
Define and research
- Define the problem you are solving. Little Lemon currently has no online reserve-a-table feature which is what you need to design in this exercise.
- Use research to create a persona and a journey map representing your target market. Think about who your users may be and why they would want to reserve a table online.
- Create a user persona.
- Create a user journey map.
- Use research to inform design concepts and identify what features are required.
Design and functionality
- Create low-fidelity wireframes in Figma to define the features and functionality of the reserve-a-table element. You should create a minimum of two wireframes
- Create an interactive, high-fidelity visual design Prototype in Figma for the reserve-a-table feature of the Little Lemon website, considering all the best practice design principles learned within the course.
- Include at least two interactive components such as the button and radio buttons already created in a previous exercise. Link the pages together, starting from the reserve table button on the home screen.
- Link at least two screens together.
The file provided below contains the Figma home screen and the style guide. They will assist you in completing your assignment. You should download it to your device and then upload it to your account in Figma.
Reading: Solution: Booking a table on the Little Lemon website
Quiz: Final course quiz: Principles of UX and UI
What types of grids are used to organize multiple elements on an interface?
Block grids
Column Grid
Baseline grid
Block grids
A component like a button can be reused on a website or an app.
True
False
True
Correct! A component is any part of your design that can be logically grouped, which is thought of as stand-alone and can be reused.
Is responsive design an approach to web page creation using flexible layouts?
Yes
No
Yes
Correct! Responsive design is an approach to web page creation that uses flexible layouts, removing the need to design layouts to suit every device.
Is the following statement one of Ben Shneiderman’s 10 Principles of Good Design?
“Strive for consistency.”
Yes
No
Yes
Correct! This is one of Shneiderman’s 8 Golden Rules of UI Design. It is critical to maintain uniformity throughout the site, whether it’s the layout, the size of the button, the color code or the tone used when writing the page.
Can a button be considered a component?
Yes
No
Yes
Correct! Rather than creating a button from scratch, you could simply construct a button component and reuse it.
Which of these are not the best practices for form design?
Clearly label your form
Make use of inline form field validation
Keep forms simple and straightforward
Sort your form fields from the simplest to the most difficult
Use many columns
Use many columns
Correct! When possible, use a single-column web form layout. This is especially important when creating long multi-step forms. Single-column layouts are more straightforward for visitors to follow, understand, complete and submit than forms with multiple columns.
Figma has various functionalities. What functionality does Figma not have? Select all the apply.
Develop a website
Web-based
Comments
Prototype
Collaborative
Develop a website
Correct! Developing a website is not used as a web development program.
Is a serif a stroke or foot-like element connected to the end of the main strokes of some typefaces?
Yes
No
Yes
Correct! A serif is a stroke or foot-like element connected to the end of the main strokes of some typefaces.
What is white space in typography?
The space between columns.
The space between blocks of text
The space between blocks of text
Correct! In typography, white space refers to the space between blocks of text. White spaces can make content more appealing and improve readability when used correctly.
Course wrap up
Video: Congratulations, you have completed Principles of UX UI design
Here’s a summary of the message:
Congratulations on completing the Meta UX/UI course! You’ve developed new skills and demonstrated your understanding of UX/UI principles through the course assignment, creating a table reservation element for the Little Lemon website. You’re now able to:
- Apply UX/UI principles using a user-centered design approach
- Evaluate interactive design using design methodologies and best practices
- Apply design fundamentals in Figma
- Follow an iterative design process using wireframes, rapid prototyping, and usability testing
- Create component-based, high-fidelity designs
- Use mood boards and create design systems in Figma
The course has given you a solid introduction to key areas of UX/UI, but there’s still more to learn. Consider registering for the next course to continue your growth.
The final assignment has not only consolidated your skills but also provided you with a practical design that you can showcase in your portfolio, demonstrating your skills to potential employers and highlighting your self-driven and innovative approach.
You’ve reached the end of
this meta UX/UI course. You’ve worked hard to get here and developed a lot of new
skills along the way. You’re making great progress
on your UX/UI journey and you should now understand
the principles of UX and UI design. You are able to demonstrate
some of this learning, along with your practical UX/UI
skill set in the course assignment. By creating a table reservation element,
for the little lemon website. Following your completion of this course
in meta UX/UI, you should now be able to, apply UX and UI principles while using
a user centered design approach. Evaluate interactive design,
using design methodologies and best practice principles and
apply design fundamentals in Figma. You should also be able to,
follow an iterative design process using wire frames, rapid prototyping and
usability testing. Create component based,
high fidelity designs. Use mood boards,
create design systems in Figma. The key skills measured in the created
assessment revealed your competency in those topics. So, what are the next steps? This meta UI course has given you an
initial introduction to several key areas, you probably realize there’s
still more for you to learn. So, if you found this course helpful and
want to discover more, then why not register for the next course. Whether you’re just starting out as
a technical professional, a student or a business user, the course and projects
prove your knowledge of the value and capabilities of UX/UI. The final assignment consolidates your
abilities with the practical application of your skills in UX/UI. But it also has another important benefit,
it means that you’ll have a real design that you can reference
within your portfolio. This serves to demonstrate your
skills to potential employers. And not only does it show employers that
you are self driven and innovative, but it also speaks volumes
about you as an individual, as well as your newly obtained knowledge. Thank you, it’s been a pleasure to embark
on this journey of discovery with you, best of luck in the future.