UI Fundamentals

Introduction

In order to give my brain sometime to figure out a solution to the problem I addressed in my previous post. I have started taking the Design Course UI/UX course

Design Course is a bit underwhelming. The main focus is using Figma to create designs by following videos. There are independent projects to practice what you've learned; however, there is a $50/month fee to get these graded on top of the initial $100 price of the course. All in all, you pay $100 for videos and an opportunity to pay $50 for actual feedback. I understand that with a highly subjective field such as UI/UX it would be very difficult to auto grade. Luckily, Figma has a lot of plugins that check if you are properly following UI fundamentals.

UI Fundamentals

1.White space:
White space is dependent on space availability (view-port), number of components, alignment, and consistency. This is highly subjective.

2.Contrast
Contrast separates elements off color opacity. This needs to follow UCGA guidelines. UCGA guidelines are as follow:

• Large text is considered 14 point (18.66px) bold or 18 point (24px) not bold. Small text is everything smaller than large.🫥
• Small Text needs to have a mid-range contrast (AA) of 4.5:1 or high contrast (AAA) of 7:1.
• Large Text needs to have a mid-range contrast (AA) of 3:1 or high contrast (AAA) of 4.5:1.

3.Scale
Text should be no smaller than 16px. Focal points need to be larger.

4.Alignment
Elements should follow some sort of consistent alignment. The column of alignment can be subjective; however, more columns is typically caused by poor alignment.

5.Typography

• Tracking: space in between letters. This can be higher for titles, labels and watermarks but everything else should stick to default
• Leading: space in between words vertically and horizontally
• Font-style: font must match tone of the words or the message.
• Font-weight: For visual hierarchy.

6.Color

Should use no more than 3 hues: primary, secondary, and accent color.
Should illicit an emotional response

Color Attributes

• Hue: full color saturation (color picker)
• Tint: lightness
• Shade: darkness
• Tone: greyness

Color schemes

• Monochromatic: set hue with different tint, shade, and tone
• Analogous: Next to each other in hue
• Complementary: Opposite of each other in color wheel

7.Visual Hierarchy
Highly subjective but not at the same time. This uses all the previous rules to make certain parts of the page stand out more than others. Everything has a visual hierarchy even the human face: eyes, smile, eyebrows, nose, ears. It reminds me of this image. Your page should work the same way.