Key design principles behind user interface

There’s no magic equation to superb interface design, but when you see it, you know.

Most can recall a moment when they encountered brilliant UI (user interface). Maybe it was the first time your tiny iPhone screen powered on and greeted you with a grid of pleasantly organized square application buttons, or when Google opened-sourced its attentive Material design patterns, or simply a unique website you stumbled across and bookmarked for future inspiration.

These are all experiences that invoke a connection from us to the design and end-use of a product.

Whether design is the primary focus of your website or a supporting element, we all want the things we create to not only work well, but look nice too. Of course, design can be subjective, but striving for well-thought and engineered design that solves a problem is a designer’s responsibility, and when it is achieved, it’s typically unilaterally recognized as such. We can all agree to having instinctive reactions to great design – it’s part of what makes us human.

The 💜 of EU tech

The latest rumblings from the EU tech scene, a story from our wise ol' founder Boris, and some questionable AI art. It's free, every week, in your inbox. Sign up now!

Not long after computers did graphical user interfaces (GUI) arise. It’s no wonder that early graphic interfaces emerged out of necessity. They were easier to use than their steep-learning curve counterparts, command-line or text-based interfaces. Fast-forward several decades and enter screens of all shapes, sizes, and forms attached to devices that move with us.

Now more than ever, user interface (UI) is being applied and strategized.

It’s funny to compare to the printed world, but similarly, as more platforms for absorbing content emerge, the more design becomes in involved. We now distinguish ID and interaction design (IXD) as two symbiotic entities within UI design. ID and IXD are entangled just as UI and UX – they are reliant on each other.

In the digital world, well-executed design may never be the predominant feature of a site, app, or piece of software. Some will argue the optimally designed interface is that which stands in the background, quietly navigating a seamless user experience. In other words, the best design is that which you doesn’t distract you, but allows you to intuitively find information or perform a task.

On the opposite end of the spectrum resides design that reels you in and garners your attention.

Whichever camp you belong to, both light and heavy-handed applications of design necessitate the same underlying principles.

For example, within the design of a website, two main areas of focus are organization (or layout) and interactions.

Gone are the days of a limited set of interactions and formulaic button behaviors. Mobile design especially has opened the door to the way we think about interactions. Apps and mobile sites allow us to be a part of the experience from any environment and access information in-context.

So, where to begin with achieving successful UI design?

Like the aforementioned print world, ID shares the same helpful set of principles. Many of the same rules govern the design of printed works and screen. In fact, there are deep-seated psychological reasons supporting these patterns.

Consideration of these elements of design and their interplay is a great jumping-off point:

• Balance: Balance is the impression of equilibrium. It is often referred to as symmetrical, asymmetrical, or radial.
• Emphasis: Emphasis refers to the created center of interest, the place in an artwork where your eye first lands.
• Movement: Movement refers to the suggestion of rhythm through the use of various elements.
• Pattern: Pattern refers to the repetition or recurrence of a design element, exact or varied, which establishes a visual beat.
• Proportion: Proportion is the size relationship of parts to a whole and to one another.
• Variety: Variety and unity complement each other. Variety refers to elements being different enough to be interesting.
• Unity: Unity is achieved when the components of a work of art are perceived as harmonious, giving the work a sense of completion.

Seasoned designers will advocate conceptualizing anything from paper first. From there, rapidly prototype, test and resist the urge to follow any one idea into complete realization or become too precious about any feature.

It’s also helpful to start with use cases. Imagine who your user is and keep them in mind at every step of the process. UX experts will generate a storyboard and profile(s). This is a great way to initialize the design process as well.

One the most practical ways to achieve great design is to establish rules up front.

For minimal guidelines to your ID, simply start with a limited and consistent color palette and set of fonts (and icons if necessary.) This will make your life easier. For more thorough boundaries, full pattern libraries exist and are wonderful resources to gauge the vast array of components that might need to be taken into account in your design system.

Lastly, don’t design in a vacuum. Trust your intuition, but welcome constructive criticism and user testing. It’s amazing some of the things we all casually overlook until someone else points them out, or vice versa, hiding in plain sight. Don’t be afraid to iterate, iterate, and then iterate again.

Design is a practice, and like anything else is learnable and scalable. Be inspired by others – check out examples, competitors, and other like-minded designers.

The best designers continuously learn and grow their visual vocabulary.