Last week, we discussed what we at Stratus Interactive think are the Top Trends in Web Design this year. As an inbound marketing agency that specializes in web development in the greater Philadelphia area, we aren’t shy at flaunting our creativity. Philly itself has a beautiful history of design, from murals, to museums—and it doesn’t stop there. But, as a city that was planned well before the birth of our own country, it could be a little easier to navigate around. 

The same can be said about web design. It doesn’t matter what your website offers. It doesn’t matter how pretty it is, and it certainly doesn’t matter if you’re attached to the way it looks. If it isn’t easy to navigate, you have a serious problem on your hands. Fear not though, we’re here to set you straight with some basic best practices on user interface (UI) design. Let’s start: 

Visible Language: any graphical technique used to communicate message or context, including layout, typography, color, texture, imagery, animation, sequencing, sound, etc.

Three Fundamental Principles:

• Organization

• Simplification

• Communication 

How does each of these principles work together?

Organize

Consistency, screen layout, relationships, and navigability are important organization concepts. Items shouldn’t look like they were thrown up at the screen without rhyme or reason. It should be organized appropriately with ease of use in mind.

Consistency

There are three different forms of consistency: inside, outside, and connected. 

"Inside" Consistency: the same rules and conventions should be applied across all elements of the graphical user interface (GUI). For example, the same elements might be in the same places, yet the visual look is different. This helps viewers understand the content, regardless of how it’s designed on the screen.

"Outside" Consistency: existing platforms and cultural conventions should follow across all user interfaces. That helps users by providing consistency throughout the UI. Think of an hourglass icon; we’ve all been conditioned to understand the meaning when this icon appears on our desktops. The less a user needs to think, the more they’ll engage with your website. 

Connected Consistency: refers to existing conventions that are applicable in both the digital world, and beyond. That means, anything from stop signs, to red circles with diagonal lines down the middle—you’ll understand what it means without having to be told.

Navigability

Navigation is an important aspect of your user interface design. The content needs to be placed appropriately for viewers to easily scan, and pull information from. It also helps focus your viewer’s attention on what you want them to see, whether that be the article body, or CTA off to the side. 

Poor Design	Proper Design
Cluttered	Focused Attention
Difficult to Read	Coordinated Color
Inefficient Whitespace	Spatial Layout

 

Simplify

There are three major focuses of economical design: simplicity, clarity, and emphasis.

Simplicity:

Mostly refers to elements crucial to communication. The entire UI experience should be unobtrusive. Let your user focus on what matters to them… don’t muddy the waters for the sake of getting dirty.

Clarity:

Everything should be designed with clarity in mind. Every component of your interface must make sense; the magnifying glass should magnify, a question mark should signify help, and an arrow should point to things. Right? 

Emphasis:

Anything deemed ‘important’ should be easily perceptible. Nothing that’s need-to-know should be hidden or hard to find, because—surprise—the audience won’t expend the effort if they’re not interested, or even sure it exists.

Communication

Your Graphical User Interface MUST maintain a balance in legibility, readability, typography, symbolism, responsiveness, color, or texture in order to communicate its message effectively. It’s as simple as making sure the message is getting across. Don’t use crazy fonts that air on the side of unreadable. Use font styling to direct attention by utilizing italics, bolding, underlines, bullets, numbers, indents, etc. Also, be sure to justify most of your text (unless absolutely necessary) to the left, as a best practice for all of your messaging.

The age-old debate on color usage is burning strong, as it can be one of the more complex elements in achieving a successful design. Red vs. Blue? Green vs. Orange. The difficult thing about color theory is when to use it for visual purposes, and when to use it for emotional purposes.

 

 

What Are Some Advantages to Proper Color Use?

• Emphasize Vital Information
• Identify Sub-Content
• Portraying Time or Progress
• Reduce Interpretation Errors
• Coding Dimensions
• Increased Comprehension

Looking for more in-depth counseling? We'll help you realize the importance of a clean, focused, user interface design. Contact us today to learn more. Contact Us.