UI techniques: While I definitely specialize in UX, I am a designer at heart. As such, it's important to keep my UI skills sharp. Here are some of the techniques and processes I use to create beautiful and coherent designs.
Color balancing (web/app)
Choosing a color pallette
First, I decide on a varied color pallette that is on brand for the project. It's important to keep in mind what colors will be problematic for users with colorblindness at the beginning stages of the process. I test each of my color pallettes using a simulator at color-blindness.com. It's a wonderful resource!
60-30-10 Rule
Next, I break the color pallette down using the 60-30-10 rule. This will help inform the usage of each color in the final design. The 60-30-10 rule reinforces the purpose of each color to the user and makes the overall product easier to digest and less overwhelming as a whole.
Create color balancing rules
Next, I set up squares utilizing the primary and secondary colors so I can test which colors work well together and which colors clash or just don't fit. This will eventually provide me with some basic color rules as I begin to layout the website or app.
It's important to keep in mind the 60-30-10 rule during this process. I want to avoid over-usage of the accent colors so as to protect their importance when they do appear as buttons/calls to action in the final design.
Proof in black & white
Throughout the balancing stage, I proof the colors in black and white to make sure the values of each color make sense in relation to one another in each square. Proper contrast between color values helps me further identify problem color combinations early on and make adjustments.
This is also a crucial step that helps ensure the the design will be accessible for users who are color blind. I make sure to check all my designs for accessibility at https://www.color-blindness.com/coblis-color-blindness-simulator/
Layout
Lo-fi wireframe
Experimenting with a quick wireframe, I can plan out the rough size and shape of elements I want to use in the final design. I can also get a general sense of alignment and proximity.
Visual hierarchy
When users interact with the elements of a website or application, it's my responsibility as a designer to define the order in which that occurs to maximum comprehension and engagement.
Rule of 3
Repetition really helps to unify the design as a whole. Our minds are pattern recognition computers and 3 is the smallest number you can use to create a pattern.
Desktop
Mobile (iPhone 13)
Tablet (iPad Mini)
Loading state
