Introduction
Greetings, I am a UI Designer & Logo Designer off-site and on-site. I have been designing for roughly seven years. I've worked on many websites, apps, games, and more. I've taken on creating tutorials and guides for upcoming and talented designers alike. You can find some of my work on my profile!
UI Designing has many principles and rules to follow, which I've learned my designers don't know. I've met and helped many designers and have had to help them with the same thing repeatedly! Hence the decision to make a tutorial to help everyone.
Tools and Softwares for designing
-
Paid Programs and Tools
∘ Adobe Programs | Illustrator, Photoshop, XD
∘ Sketch
∘ InVision Studio -
Free Alternatives
∘ Figma
∘ FramerX (up to three projects)
(Illustrator is my preferred program for most of my designing)
What is UI Design?
UI design in general according to the Interaction Design Foundation is, "the process designers use to build interfaces in software or computerized devices, focusing on looks or style. Designers aim to create interfaces which users find easy to use and pleasurable." which in short means the process which designers create interfaces for consumers and users to interact with.
What is UX Design?
Before we dive in further, I would like to go over UX design. User Experience designing is the backend side of designing, though they go hand in hand. UX Designers typically deal with things like User Research, Problem Solving, and basically how the user will interact/experience the interface. These are things that you should be considering while designing the interface as well.
The Principles of UI Design
Visibility
Although it might sound simple, visibility in design is often an issue seen in many interfaces. Optimizing your designs will likely have to kind some context, such as large bodies of text or weapon statistics behind buttons, to make the UI more visible and accessible.
The idea behind visibility is to make interfaces less cluttered by putting less important and or extra elements behind links, buttons, or other menus in an interface.
As you can see, the one on the bottom hides the unnecessary text seen in the first image behind a scroll which doesn't take away from the focus on the page ordering the burger and what the burger is. Making changes like this allows users to navigate and interact with the UI easier and puts less stress on reading everything on the page.
Consistency
Another frequent issue seen in UI is a lack of consistency. In short, it means having repeated elements in your design such as font, colors, and styles. UI that has consistency throughout tends to be received better and appears better. Though a simple concept, it is another primary principle that you should consider when designing interfaces.
As seen above, consistency applies to all aspects of designs, from the spacing to icons in different styles. Ensuring that elements in a design are consistent can reduce downtime and appeal to the general audience much more.
Hierarchy
The two types of hierarchy I will be going over are element hierarchy and type hierarchy. Element hierarchy is structuring your UI to display important and key points of the UI over minor things. Overcrowding key parts of the UI can cause users to miss information and spend more time figuring out what they are supposed to be doing. Type hierarchy displays text based on importance; similar to element hierarchy, organizing text by what is important and what you want to read first will improve the UI's readability and functionality.
By changing the type weight and size, the aesthetics and readability are significantly improved. Like many of these principles, it's a simple thing that people tend to forget or not understand, which in the end damages the appeal and function of their UI.
Contrast
People often misinterpret how to add contrast to your design palette. Typically when we think about color palettes, we are told about complementary colors like putting green and purple together or cyan and pink, but that is not how you should be implementing complementary colors. Making sure that your palette has contrast is extremely important, especially when considering accessibility; it's important when designing to remember those with disabilities and impairments which may limit their capability in interacting with our interfaces. For example, according to ColourBlindAwareness.org, 1 in and 12 men and 1 in 200 women in the world have a color vision deficiency. Of course, not every design can be tailored to them, but making sure that enough contrast is in a design can make it more accessible and visually pleasing.
Although orange is the complementary color of blue in the first UI, it's quite clear that it does not look nice on top of the blue. Using different values and saturation blue, the UI was easily improved and nicer to look at. Once you are comfortable making palettes like the one on the bottom, I encourage you to experiment with more abstract palettes that still go together. Like I have below.
Text Contrast
While on the topic of contrast, I'd like to go over contrast in type quickly. A golden rule of design is to never put pure white text on black backgrounds and vice versa. Though it is common, research has shown that people reading pure black text on bright or white backgrounds and white text on dark gray or black backgrounds experience eye strain. Eye strain is a serious problem we all deal with, and a way to help decrease this is by making sure we have proper contrast in our text, as seen below.
Conclusion
There are five principles to think about when designing, and there are many more things I'd like to go over in the future. If you have any questions, comments, or requests for future guides, please feel free to reply. I hope some of this helps you improve your designs!
Thank you for taking the time to read the guide I have created for upcoming and established designers alike!
PictureFolder