UI UX Tips for Developers

Image of Author
October 6, 2022 (last updated October 18, 2022)

Design is not an afterthought

It's not easy. If you avoid CSS and design, it's because your subconscious knows this truth. If you don't give yourself the space and time to try eight different approaches to a layout, you might not (1) grow in your skills, (2) build the design you wanted.

Design features, not pages

This one is a bit self-explanatory. It is compelling to start by getting the "cruft" out of the way and designing and building out the basic components you always use. But, this is a corner you don't want to paint yourself into. You might have a hard to fitting your unique components in to the otherwise standard layout. Plus, you might find yourself in a situation where you imagined much more content in some part of the page than what you will initially begin with.

The inverse approach is healthier. Design the feature you want, and then what "cruft" components need to go around it to create a good experience will more readily fall into place.

Visual hierarchy is important

Visual hierarchy is the relative importance of content, taken visually. A quick glance at a page can give you a sense of its visual hierarchy. What stood out? The question of why it stood out is interesting. Font weight, text size, strong contrast. All of these are good candidates for increasing or decreasing visual hierarchy.

High contrast stands out, low contrast blends in.

Hue Pointers

Hue is essentially the "base color", like red, blue, teal, magenta, forest green, etc.

Dark hue vs true black

True black can look unnatural, or jarring. Instead, choose a dark grey, or a dark shade of your chosen hue. That can keep the text looking "natural" in your environment while still providing the strong contrast you are looking for.

Light hue vs grey

Similarly, grey in the context of a dark hue can look unnatural and actually lack the contrast experience you were hoping for. Keeping things "on hue" is helpful when trying to create a coherent, consistent experience. But, you might want things to rise and fall in the visual hierarchy, and so need to "grey out" some less important text. Instead of actually using grey, use a lighter shade of the same hue, instead.