UI Design and the Fundamentals


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.

Asset 2@2x



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 it 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 chancing 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 making 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 vise versa. Though it is a common thing to see, research has shown 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's are just 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 your time to read the guide I have created for upcoming and established designers alike!

Asset 16@2x PictureFolder

80 Likes

This was very informative, thank you, I will keep all these design hacks in mind

4 Likes

Glad I could help! Plan on making more guides in the future.

3 Likes

Very informative this is going to help me with UI stuff.

3 Likes

Happy to hear; I hope to see some of you work whenever you make some!

2 Likes

Of course, I’ll try my best to make a good UI (even though I’m a starter lol)

1 Like

Any tips on stylized ui? I.e, making medieval, fantasy, similator ui for example.

1 Like

It’s always a good idea to look at your competition, for example, other medieval games on/off-site, and see what kind of design elements and styles they went with. Understanding your competitors and what works can help guide the functionality and look of your UI. However, you shouldn’t just directly copy using the inspiration and open yourself to more ideas. For stylized UI you should always keep consistency throughout the whole UI, meaning if your shop menu is a scroll, the rest of your menus should follow that type of detail and look maybe not the same scroll but something in that time period.

TLDR: Keep your UI consistent and related to the genre/age of the game you’re designing UI for.

1 Like

Nice one, this taught me so much in so little time, thanks alot!

1 Like

No problem! I am glad I could help educate. I will be writing more on more specific topics I feel I can go more in-depth on.

I have a tip for you. You should add a section that is called “Inspiration”, as it’s really important for new UI/UX designers to get inspiration from big titles to make their UI, so it feels high quality.

1 Like

In an upcoming guide I am working on; I have intentions to go in-depth on how to use inspiration and references properly!