This picture changed the way I saw the world for a day.

After programming for 9 weeks at Flatiron School, I picked up a book on visual design. It explains design concepts like professors who, at first glance, delve into gratuitous detail… until you realize how that info germinates your understanding. Better yet, the book offers useful steps for UI beginners to improve their designs intuitively. (And the book comes in green)

Here are 3 tips I used from the book to…

improve my UI design.

1. Reduce

Identify the functionality of a given thing, then eliminate unessential clutter. The books says wisely,

“Whereas art strives to express fundamental ideas and perspectives on the human condition, design is concerned with finding the representation best suited to the communication of some specific information” (Mullet 9).

In other words, design serves a purpose, so the fundamental principle of good design is to know its own purpose. Just as how a ruby method shouldn’t do too many things, the same applies to design – too many features will limit its usefulness.

2. Balance by Rank

Chunk and label the elements of your design into named groups, then destablish a clear visual hierachy. This means ranking your named groups in order of importance from 1-7. In your design, the one or two most important elements must stand out, with others reduced to supporting roles. The process of ranking your design elements will give your creation process a purpose, as it will clarify what your design should achieve.

Adjust the size and value of elements to make them stand out. In general, maximize perception difference between groups, but minimize them within like-objects.

3. Regularize

Use a meaningful pattern to achieve a design’s purpose by repeating similar elements. As a design beginner, my approach towards finding a meaningful pattern is to solve easier problems first. Then, if I can use those simple problem-solving patterns to also solve more complex ones, then that constitutes a meaningful pattern.

Another approach is to look for repeated functionality within your app, find its simplest use case, then re-purpose it to more complex use cases.

Case Study to Re-design UI

For my team project at the Flatiron School, we’re creating a website that helps Flatiron School process applicants to its classes. One of the views in the website lets the administrator search for applicants. Before, we had 5 columns and as many as 5 lines within a cell. The view bewildered users.

To improve the design, I first focused on what the page hoped to achieve – find applicants. More specifically, the administrator searches for applicants to then take a look at their entire application. Everything else should be eliminated or de-emphasized. Ultimately, this is what was left:

I then re-used this basic design for another view where the administrator is skimming through initial applications before reading the entire thing.

By using a familiar pattern, the app can utilize space more effectively. In this case, it can fit many actions into a relatively small space because the user has become accustomed to part of the view.

Designing UI Takeaway

By identifying the purpose of a design and communicating that purpose in a simple and elegant way, you can greatly improve your UI.

Addendum

After seeing the picture of traditional book layouts, I saw the manmade world around me as exactly that – manmade! I saw the intentional simplicity of all the designs around me, and it was amazing.