A large part of UI design is graphic design. Many of the techniques in graphic design, such as the use of a grid, the CRAP principles (contrast, repetition, alignment, and proximity), and color theory etc, are transferrable and can be applied to UI design as well. However, there are certain techniques that don’t work quite as well. I didn’t realize this until recently. Those techniques fell flat when I tried to use them to design the UI of a feature. I reflected on why it backfired and here are the two reasons.
Fixed Content vs Fluid Content
UI designers love to use “lorem ipsum” as placeholders, this is because content on a screen is often fluid. It’s also probably the biggest of the reasons why not all graphic design techniques work well in UI design. Some design techniques require specific, fixed content to start with, and therefore are non-scalable.
Here’s an example of a non-scalable technique related to images. We knock out the background of an image to extract the object in the foreground. We then place that object on top of a grid to add visual interests. This is non-scalable because not every image has a clear definition of foreground and background, and it’s hard to remove the background automatically and perfectly every time.
And here’s a non-scalable technique related to text. We are given the title of an article or a poster. We pick a display typeface based on the mood of the content, break the title into phrases or words, and place them like Tetris to create visual interests. Again, this is non-scalable because the mood, the sizes and the shapes of the phrases or words differ from title to title.
Before applying a graphic design technique, consider whether it’s scalable or not. For fixed content, such as a static webpage, non-scalable techniques can make the design more pleasing. However, for fluid content, these techniques won’t work.
User Intent
Users usually arrive at the UI with some sort of intent, whether that be to complete a task, or to look for information. Oftentimes, to satisfy these intents, efficiency and clarity is needed and valued. Additionally, a UI tends contain quite a bit of information. That’s why modern UI designs tend to be more flat and simple, without too many extraneous elements, so as to promote discoverability, findability and scannability. This is especially true for enterprise UIs or small screens.
On the other hand, there’s sometimes a lot of, or even too much real estate to work with on a page of a magazine, a poster, or a frame of a motion graphic reel. Moreover, people tend to consume content on these media slowly or in a relaxing, chill way. They are more forgiving and can accommodate more visual decorations like irregular shapes, lines, curves and angles, which can be used to create the vibe of the content.
Without paying enough attention to the user intent, I added too much visual decorations to the UI of a feature, which created a lot of distraction and busyness. The feedback I got from the design review helped me course correct.
Final Thoughts
Not all graphic design techniques are suitable for UI design because certain techniques are non-scalable and require specific content to design for. More importantly, the goal of UI design, a large part of which is about satisfying user intents, calls for efficiency, clarity and less visual distraction.
