-
Introduction to UI/UX 3
In this section, we are going to understand the practical definitions of User Interface and User Experience Design with relevant real life examples.
-
1.1 – Definitions of UI/UX 13 minLecture1.1
-
1.2 – Deep Dive Into UI 15 minLecture1.2
-
1.3 – Installation Theory 10 minLecture1.3
-
-
Software Download and Setup 2
In this Section of the course, we will learn how to download the software (that is, Adobe Xd and Figma) and how to install them, we will also extend our knowledge to how we can create a free account and setting up for the software
-
2.1 – How to Download 05 minLecture2.1
-
2.2 – Installations and Account Setup 10 minLecture2.2
-
-
Fonts and It's Installation 3
In this section, we will explore the definition of font, the types and how industries make use of the types of fonts in their branding and products.
-
3.1 – Fonts Downloads 13 minLecture3.1
-
3.2 – Fonts Installation 06 minLecture3.2
-
3.3 – Types and Usage 10 minLecture3.3
-
-
Getting Started with Figma Interface 3
-
4.1 – Intro to Figma Interface 13 minLecture4.1
-
4.2 – FigJam Explained 11 minLecture4.2
-
4.3 – Deisgn File and Overview 17 minLecture4.3
-
-
Understanding The Tool (Toolbars) 10
-
5.0 – Move and Frame Tool Explained 06 minLecture5.1
-
5.1 – Shape Tools Explained 06 minLecture5.2
-
5.2 – Shape Tool Full Properties 22 minLecture5.3
-
5.3 – Pen Tool Explained 08 minLecture5.4
-
5.4 – Text Tool Explained 03 minLecture5.5
-
5.5 – Text Full Properties Explained 08 minLecture5.6
-
5.6 – Add Comment Explained 03 minLecture5.7
-
5.7 – Hand Tool Explained 02 minLecture5.8
-
5.8 – Slice Tool Explained 02 minLecture5.9
-
5.9 – Component 17 minLecture5.10
-
-
Understanding Some Basic Operations and Actions 8
-
6.1 – Layer and Rulers 04 minLecture6.1
-
6.2 – Grid System Explained 03 minLecture6.2
-
6.3 – Add a Clip Mask 03 minLecture6.3
-
6.4 – Boolean operations 05 minLecture6.4
-
6.5 – Figma Inspect Panel 01 minLecture6.5
-
6.6 – Importing Design File 04 minLecture6.6
-
6.7 – Figma Plugins 07 minLecture6.7
-
6.8 – Plugins Examples 06 minLecture6.8
-
-
Getting Started with Adobe XD Interface 14
-
7.0.0 – XD First Interface 03 minLecture7.1
-
7.0.1 – XD Creating New Document 04 minLecture7.2
-
7.0.2 – XD Toolbar 05 minLecture7.3
-
7.0.3 – XD Design. Prototype Share Options 03 minLecture7.4
-
7.0.4 – XD File, Edit, Object Menu 08 minLecture7.5
-
7.0.5 – XD Plugins, View, Window, Help Menu 08 minLecture7.6
-
7.0.6 – XD Text Full Properties 10 minLecture7.7
-
7.0.7 – XD Shape Tools Full Properties 05 minLecture7.8
-
7.0.8 – XD Ruler and Layer Panel 04 minLecture7.9
-
7.0.9 – XD Shape with Mask 04 minLecture7.10
-
7.1.0 – XD Export Options 04 minLecture7.11
-
7.1.1 – XD Boolean Operations 05 minLecture7.12
-
7.1.2 – XD Opening PSD, AI Files 02 minLecture7.13
-
7.1.3 – XD Installing Plugins 06 minLecture7.14
-
-
Principles of Design Fundamental 7
In this section, we will learn the principle of design fundamentals which are the governing power of every design. they serve as the reasons why we action an action in a certain way and it's importance
-
8.1 – White Space 05 minLecture8.1
-
8.2 – Colours and Contrast 06 minLecture8.2
-
8.3 – Simplicity Vs Complexity 03 minLecture8.3
-
8.4 – Alignment 04 minLecture8.4
-
8.5 – Repetition and Consistency 03 minLecture8.5
-
8.6 – Scale 02 minLecture8.6
-
8.7 – Visual Hierarchy 06 minLecture8.7
-
-
Wireframe 2
In this section, we will learn about wireframe and how to begin with one even before we get our project started.
-
9.1 – Wireframe 07 minLecture9.1
-
9.2 – Wireframe Illustrations Examples 05 minLecture9.2
-
-
Working Smart Tricks 6
In this section, we will learn how to improve our workflow, by learning trick to increase productivity and boost performance. we will as well explore tools, ways and method to get the done well.
-
10.1 – Sourcing For Resources 18 minLecture10.1
-
10.2 – Creating Styles 06 minLecture10.2
-
10.3 – Adding Extensions 06 minLecture10.3
-
10.4 – Colour Mgt Tool 06 minLecture10.4
-
10.5 – Importing My Bookmarks 05 minLecture10.5
-
10.6 – Page Layouts 07 minLecture10.6
-
-
Getting begin With Mini Projects 2
In the section, we will begin our journey into design a mini projects, with easy difficulty level (that is, very easy to follow and do likewise), then we will raise into more real deal in the subsequent projects.
-
11 – First Mini Project – Deldronet 32 minLecture11.1
-
12 – Second Mini Project – Virtual Reality 20 minLecture11.2
-
-
Getting Started With Main Project 6
In this section, we will begin with our main project - ShowPrime
-
13.1 – Section 1 Design 46 minLecture12.1
-
13.2 – Section 2 Design 31 minLecture12.2
-
13.3 – Section 3 Design 08 minLecture12.3
-
13.4 – Section 4 and 5 Design 30 minLecture12.4
-
13.5 – Mobile and Tablet Design Section 34 minLecture12.5
-
13.6 – Section Mockup Wrap Up 11 minLecture12.6
-
-
Getting Started With UI Effect Trends 3
In this section, we will design some effects trend in UI using our software and we will understand how to create them from scratch and how to create them using plugins.
-
14.1 – Mini Projects – Glass-Morphism Effect 16 minLecture13.1
-
14.2 – Soft UI (Claymorphism vs Neumorphism) 50 minLecture13.2
-
14.3 – Soft UI Mini Project – Smartwatch 37 minLecture13.3
-
-
Designing Second Main Projects 6
In this section, we will design our second main project - Keen Marketer. A digital Marketing platform that provides services on marketing. the project comes with 3D illustration and some other UI resources making it a well designed defined and appealing UI
-
15.1 – Section 1 Design 30 minLecture14.1
-
15.2 – Section 2 Design 26 minLecture14.2
-
15.3 – Section 3 Design 13 minLecture14.3
-
15.4 – Section 4 Design 17 minLecture14.4
-
15.5 – Section 5 Design 26 minLecture14.5
-
15.6 – Section 6 Design 22 minLecture14.6
-
-
Mobile Structure & Design 9
In this section, we shall examine the structure, the basis of how to design a mobile UI with the wireframe and also how to create the a wireframe and scratch using a traditional way and other means as well to construct a flexible wireframes for our design and we will then go into design.
-
16.0 – Understanding Mobile Structure & Wireframe 35 minLecture15.1
-
16.1 – Mobile UI Design Section 1 53 minLecture15.2
-
16.2 – Mobile Design Section 2 31 minLecture15.3
-
16.3 – Mobile Design Section 3 01 hourLecture15.4
-
16.4 – Mobile UI Design Section 4 52 minLecture15.5
-
16.5 – Mobile Design Section 5 40 minLecture15.6
-
16.6 – Mobile Design Section 6 39 minLecture15.7
-
16.7 – Mobile Design Section 7 43 minLecture15.8
-
16.8 – Mobile Design Section 8 58 minLecture15.9
-
-
Prototyping 1
In this section, we will be learning how to prototype a project from scratch, which is the simulation and motion interactions between screens, components, kits and button for the purpose of testability and validating the designs
-
17.0 – Prototyping Project 59 minLecture16.1
-
-
Presentation and Sharing 3
In this section, we will learn how to prepare a professional documentations of presentations with all rudiments of variations and approach types
-
18.0 – Presentation Documentations 52 minLecture17.1
-
18.1 – Presentation 01 hourLecture17.2
-
18.2 – Finalizing Presentation 46 minLecture17.3
-
-
Conclusion 1
In this section, we will learn how to share our works on design platforms such as behance, dribble and others. we will also learn some professional tips, culture and best practices
-
19.0 – Professional Tips 45 minLecture18.1
-
Leave A Reply Cancel reply
-
-
08/05/2025
Every time I read a new post, I feel like I’ve learned something valuable or gained a new perspective. Thank you for consistently putting out such great content!
-
22/05/2025
Your positive and uplifting words are like a ray of sunshine on a cloudy day Thank you for spreading light and positivity in the world
-
04/06/2025
Your posts are so beautifully written and always leave me feeling inspired and empowered Thank you for using your talents to make a positive impact
67 Comments
Definitions of UI/UX was thoroughly explained, kudos
Wow, I actually got to understand that a device screen in itself may not be a UI per se
I like the introductory side here.
I like the introductory side here as I have learnt enough.
Nice one! Easy to understand
nice presentation
great job with the explanations and illustrations.Looking foward to the next class
I could relate to the difference between a good UI and a bad UI with the illustrations. I enjoying the class
Assignment 2
1: a) Elements of good usability are Learnability and Efficiency.
b) Design is not what it looks like rather ” design is how it works” says Steve Jobs.
c) UI fulfills two key UX needs, they are I) Interaction, Looks and Feel
iI) Access
2) No.
4) Yes.
The lesser the words, the better
Less words, better understanding. Thank you.
Exercise 2
1) As Steve Jobs said, A design is not only about how it looks but how it works. A good User Interface (UI) must serve the client’s purpose and be user-friendly, and natural to use without complication and difficulties. Its layout, typography, colors, and icons must follow the principle of design.
Also, I remember that the elements of usability are Learnability and Efficiency
Two keys UI fulfill in UX are:
a) Interaction and feel
b) Access
2) I came across a job website called Canada Vacancy, oh my goodness, is clumsy, confusing, and difficult to find your way out of how to apply for a specific job.
3) I think if things should be categorized for every job search and create a hyperlink for the other information, it would make it easier to navigate through easily. Though the information was relevant to the job application, that information is secondary.
4) It is a must for a user interface (UI) to solve problems easily (Yes)
Thank you, Sir
And sorry for the two answers, I had a little problem with my internet connection which resulted in the reloading of the page and sending the uncompleted answer earlier.
in this course, i learnt the importance of UI vz:
a) interaction, looks and feel
b) access
(Q) 1
i understand UI matters because ;
i) the people need to catch the information at ease else the people wont pay attention
ii) the people need to feel comfortable with your product else they wont come back
iii) the people wont come back if your product is too ambiguous
I also learnt what a good design is and we say; a good design considers WHO and WHAT your are designing for.
I also learnt ELEMENT OF UI: it is the laying out of application element such as graphics audio, text etc in a manner that the application respond effectively and efficiently to the user activities
(Q)2
one of the application/software I’ve found confusing is “windows 10” the first time i handle it i searched for the “shut down” button tire.. lol even till date i still find tedious to get that at ease
(Q)3
my recommendation: they should bold the “start button” and position it in a more visible area like we have in windows 7 and co,
(Q)4
yes
Exercise 2
– I can remember “Error Tolerance”; to make recovery easy and prevent errors before they happen
– Yes! PiggyVest, too clumsy so I switched to Cowrywise
– Rearrange the UI I think, reduce the tabs on each screen…
– YES
Elements of good usability
•Learnability
•free of errors
•Efficiency
The fewer words the better,
The less thinking the better
Yes
I really enjoyed this lesson alot. Infact it has helped me to be conversant with every graphic and design around me.
WoW
I got to have a better understanding of UI. it is not the physical thing we can see but the instruction we key in and the display of the result.
I understand well, AlhamduliLah!!!
thank you Sir
thank you for this
Smart watch is an example of electronic device with UI
probably, that could be a network problem. you can try using the mobile app. you can download the app from play store with the name “Aqskill”.
Thanks.
1. User interface focuses on human-computer interactions
Elements of UI: icon, graphic, touch
Access, interaction, look and feel are key UX needs that UI fulfils
2. Yes (RENEC)
3. Deal with the language issues, difficulty in navigating through the page.
4. Yes
Thanks.
UI since is essentially users interaction with products, it’s important the products are simple enough for good experience while using it, putting into consideration the age bracket that would be using the product.
1. user Interface is the point of interaction between users and devices, The layout of applications spoken, ouch and feel is the way the application responds to the User Interface. Designing is not only about how it look but how its work
2. No
3. I think you can help by leaving a comment on how you feel about the application
4. Yes
thanks for the class
1. user interface is the point of communication between the computer and another entity better understanding of user interface helps to achieve a great design.
2. I think I can help by dropping feedback in the feedback box and also my impression on how it can be better.
3. YES, the use of user interface should help solve problems easily.
4. None for now I think I try to navigate my way to get use to phone applications and gadget the i find my way.
1: I remember a (UI) deals with (icons) that interact or communicate between a computer and a person. examples of such icons on our phones: WhatsApp, Facebook, Goggle chrome, play store, music player…etc
another example of a good UI is our TV, DVD,DSTV remote control etc
– I remember that Design is not how it looks or how beautiful it is…but how it works.. that is how easily it communicate with the User
– I remember learnability, that is the ability for user to easily/quickly understand or accomplish a task on the first try on a application or platform
– I remember efficiency, that is the speed at which a task is done/completed once learned
– I remember Error tolerance,prevents errors on a platform
– I remember that a Good design convey emotions
2: There is website I came across…www.mobiletvshows…it is for free movie (Series) download… OMG 🤦🤦🤦…it is so terrible…the redirecting is frustrating
3: I think they should work on serve
4: yes
Thanks for this wonderful privilege, I am super excited to be here.
As a beginner, you have thoroughly explained what UI and UX is all about to me.
Things I have learned in the class
1. Bulky information doesn’t mean the user will understand the information you are passing across
2. Ensure the interface is always plain and simple
3. There should be room for errors and any interface should be able to accommodate such.
It was an interesting class.
1. Some of the things i remembered in the class are;
* User interface is inside your screen, not the glass, those things you are interacting with, ie the point of interaction between you and your device or gadget, for example, you are using your phone or laptop to do a transaction on a bank app or internet banking, that point of interaction is called the UI.
* Design is not what it feels like or how good it looks. rather, design is how it works.
* Designs can be confusing and misleading at times.
* A good design is a solution that serves the user and satisfy the client.
_ Natural to use, does what the users want, and helps avoid troubles.
* in making a design, one has to put the users first in mind.
* Quality of a good UI is USABILITY (learnability and efficiency))
the faster the better, the less words the better.
2. My Gotv decoder is sometimes difficult to use.
3. When i get a message for example seeing the envelop sign on my tv screen and i try to open it, it never opens, it will just be there. There should be an improvement on that. please.
4. Yes.
Thank you.
Exercise
1. I learnt the difference between a good UI and a bad UI
ii. i can also remember the quote that design is not what it looks like but how it works by steve jobs
2. I know of windows 8, up till today i don’t find it easy using that UI
3. If possible a new and a better one is designed to be substituted with that. So as to enable easy usability.
4. Yes.
Thanks for the class
Much appreciation.
good and bad design.
The lesser the word the better.
and don’t make users of your product think too much.
1.a. I learnt that a good design is a solution that serves the users and satisfies clients.
b. A good user interface should be friendly used.
c. Designs may be difficult a times.
d. User Interface is the point of interactions between a computer and another entity such as a printer or human operator.
2. Window phone
3. By making it more user friendly.
4. Yes
Great, this is getting to be interesting, I love the explanations!!
That user interface is not just about the design but how it solves the user problems or needs. How it interacts with the user and other machines.
Yes I have
Yes
Wow, well detailed.
I learnt that simplicity is the key, users must be able to understand your product at first glance.
I learnt the elements of user interface could be reaction, emotions, graphics etc and I also learnt one has to understand the user standpoint to be able to come up with a good UI. More so, I learnt the difference between a good and bad ux
1.
a. Meaning of User Interface
b. A Good design
c. Qualities of a good user interface
2. Discord: the interface is really confusing.
3. Yes
A very detailed lecture, kudos to you.
Exercise
Answers to the questions asked
1. A point in which we can communicate or interact with the device is called User Interface (UI)
some important element of a UI are Layout, Touch, Graphics et.c
Why do we need a UI. Its Because it Matters
2. YES!
This health application you find in most android phone i find it very difficult to navigate through it.
3. They should be a guild on how to use it. like you rightly said it should be learnable
4. Yes
Thank you sir
I’m actually feeling great with what I’m learning
Good Job
1. UI is the interaction/ communication between a digital device and other entity.
Element of UI: Graphics, touch or textual control in conjunction with the way an application responds to user activities.
UI tends to fulfil 2 keys UX needs:
A. Interactions, look and feel
B. Access
Why we need to care about UX/UI?
A. It’s important
B. Without these elements people won’t use our products
C. Without good UI/UX people won’t purchase our products and no referrals will be gotten also.
D. Without a good UI/UX experience users will always seek for help/ tech assistant
I remember that design isn’t about what it look like but how it works.
A user is one who uses a digital product.
Elements of a good usability: Learn Learnability and efficiency I.e the UI must be easy to use and the process/ steps should be easily understood. Then it should be able to be carried out fast and should involved step that can help users achieve their goals or carry out an action with a very short time.
Elements of good user interface
Error Tolerance: A good UI should be well designed to help users undone mistakes and avoid mistakes.
2. Yes, Sentinel App for my phone. I found it find very hard to use and very confusing as I was confused on the accurate information to fill in.
3. Guilde on how to use the app should be provided and users should be educated on the appropriate information required to fill in.
4. Yes
Thank you so much for this class, really learning alot.
I enjoyed the class
very good presentation
You are doing so well with the time management and explanations.. much anticipation on mind.
ok let’s get down to business
Detailed class I enjoyed it
– As Steve Jobs said, A design is not only about how it looks but how it works. A good User Interface (UI) must serve the client’s purpose and be user-friendly, and natural to use without complication and difficulties. Its layout, typography, colors, and icons must follow the principle of design.
Also, I remember that the elements of usability are Learnability and Efficiency
A user is one who uses a product.
Two keys UI fulfill in UX are:
a) Interaction and feel
b) Access
– Yes, the Twitter app is still very confusing for me to use/navigate.
– A guideline for how to use the app should be laid.
-Yes.
Thank you so much for this class, its enlightening.
Exercise
1. user interface is the interaction or communication between a company and entity.
*people won’t use your product , if it is not solving a matter.
* A design is not just what it look like and feel like. A design is how it works.
* A good design dose what the user need and want, and it also must be natural to use.
2.No
4.yes
1. Make the UX simple and easy to use and UX is not only all about the good design interface but the problem it will solve for the users.
2. No.
4. Yes
nice one
1. What I remember
* element of good usability
Learnability and efficiency
*Error reduction
* UI is not just about how it looks but how it works.
*good UI and bad UI
*the less words the better
2. Ice box app.. Confusing and complicated
3. Yes
1. Design is not just how it looks but how it “works”
2. Yahoo mail (web page) very stressful in login in, different inappropriate slide before you can login into your account
3. I think the design interface should be attractive, and less slides for new sign up users
4. Yes
Loving it
1. UI is how a design works, a good interface should solve problems.
2. Nokia-Microsoft phones
3. redesign the UX
4. Yes
1. Useability, is how well you can make use of a digital product.
The less word the better, the less thinking the better,
2. nothing really
3. Do more findings on the UX
4. Yes
These videos are thoroughly explained, and very understandable. God bless.
1. a) the point of interaction between a computer and another entity is call user interface
b) One of the qualities of a good design is Usability – Learnability, Error Tolerance, Efficiency, The lesser the words the better etc
c) Design is not just about how it feels or looks but how it works
2. No
4. Yes
how do I download the videos please
1. (a) Information flows in one or two direction
(b) The less word, the better
(c) The less thinking, the better
(d) A good design is a solution that serves the user and satisfies the client
2. NO
3. I think we need to understand the kind of people that will be using the user interface, so that they can have easy access and use of such a gadget or phone application.
4. YES
1. What I learnt
Elements of good usability:
Learnability
Efficiency
Error tolerance
2. My breadmaker is difficult to navigate
3. I think first should be timer before program selection.
4. Yes
1.in todays class I have learnt that a user is a person Who make use of a product. And user can be child,adult,etc.
2. Yes,Instagram. While trying to edit your Bio of your profile on instagram, the return button changes to #, it’s quite frustrating for users that do not know that you have to click on the No button first in other get the return command
3. As we have learnt from today’s class that a good design is one that is natural to use,I think that could help by reducing the complexity
4. Yes
I loved this chapter.
1. The lesser words the better; The lesser thinking the better
2. The timer on my DVD
3. It will be reasonable if it wasn’t there at all all if it cant do its primary purpose
4. yes
1, A good design is not just how good it looks but rather how it does what the user needs or want, easy to use and help aviod problem .
Also quality of a good UI is usability which involves learnability and efficiency.
2. came across a site for downloading textbook, honestly it’s really confusing and you can’t download textbook from it if you weren’t showed how to do it.
3. I think they should rearrange the website and basically use easy term that we all know already. example….. they use “Get” instead of “download”
and the position of the “get” is at the top(the first thing to see in the site) and it looks like an Ads
4. yes
After doing this course, I know that my Figma skills will never be the same
wow well explain..kudos
There are two sets of skills UI seeks to fulfil; they are
1. Interaction, Look and Feel
2. Acess
When your product is not designed properly, users will always call for Tech Assistance.
They will not buy your product nor will they recommend it.
Always ensure you do what the user needs or wants.
1.Design is how well its works, Making use of the right typography , elements, putting in consideration people making make use of the digital product. A good UI must be user friendly, efficient, error tolerance and easy to access.
2.Nairaland Website – its too clumsy and difficult to understand.
3. I think the should make the website easily accessible and more user friendly.
4. Yes.
I think the definitions are brilliant…
kudos to y’all..
simple, detailed, clear and direct