Woah, chapter 2 is out
Hi guys! Sorry for the delay of the chapter (got a lot of commissions and stuff to work, can’t focus on writing chapter 2 but here it is)
Professional UI Designer Raising Guides
For beginners to start their UI designing career.To those who haven't read chapter 1
Although chapter 1 and chapter 2 has no relationship at all but I recommend reading chapter 1 if you are new to the UI designing industry. Chapter 1 can be found here:Table of content
- Introduction to components
- Why components are so important?
- How to choose a suitable component for your UI?
Introduction to components
If you have played LEGO before, you probably know what is components and UI does have them, as well. They are pretty similar to LEGO, they are interactive building blocks to create an user interface.Here’s a few examples of components:
This is a button, they are for users to take actions or make choices with a single tap.
This is a snackbar, which is used to notify users.
Why components are so important?
As you can tell, components are used to build UI, aka, if you don't have components, your UI will be blank, apart from that, they can make UI designing much easier.
How to use suitable components for your UI
Components are so useful but do you know how to use them properly?Here’s a few example of component misuse:
Example 1
(from material.io)
As you can see, this UI is using a component called Radios, which is for when user have to select one option from a list.
Now, after explaining, you should know why it is considered misuse;
Radio is for users to select one option, meanwhile, this UI allows user to select more than one options and each can be toggled.
A solution to this:
Use switches
Switches are used to toggle the state of a single setting on or off, which totally fits in this UI!
Example 2
This is a picture of a survey form, you might ask:
Why this is considered misuse?
I wonder what happen if you add more games to it.
Result: You now have 50000000 pixels of height
Solution:
(meme)
How to avoid misuse in your final design
In your inital design, check whether every UI components is being used correctly (note: look at the examples above, as well as the UI design guidelines you are using if you are using one)After that, ask for feedback, asking for help is better than asking yourself!
In your final design, ask for feedback again (double checking always better than just once)
“Jesus, this took me way too long to write this but it is worth doing so.”
Thanks for reading Professional UI Designer Raising Guides chapter 1 & chapter 2. I was planning to just do chapter 1 but I decided to do more, since the chapter 1 don’t have enough resources.
If you have any suggestions (edits etc), let me know by replying or DMing to me.
If you need help with UI designing, try asking in DevForum or DM me. I would be glad to help you.
