An interface is a means by which a user interacts with a computer, service, or product. It’s a way of simplifying a complex system so that it’s easy to use. In this day and age of modern digital services and businesses, interfaces are omnipresent. Every day, we interact with websites, apps, and even voice assistants that all require some sort of interface for us to use.

For a business, having a well-designed interface for your app, website, or even your internal dashboards or CMS means easier actions and easier ways for users to find information. This ultimately ensures that your users take advantage of your product in a seamless way. A good user interface is one that’s largely unnoticeable. When a user starts noticing clashing colors, misplaced buttons, or unreadable text, they may feel frustrated and leave, never to return.

The practice of designing interfaces can take years to master and teams of people to execute. An interface is the result of the collective thinking of user experience (UX) designers, visual designersdevelopers, and other business stakeholders, whose different perspectives ensure that each user’s experience is simple and clear. UX designers plan and structure the interface, assuring that has been tested with users, works properly, and meets their needs. They then work with visual designers to craft the interface’s appearance so that it’s easy to use and actions are simple and clear to understand. This is all done in close collaboration with web developers, who build the interface in code and bring it to life.

It might seem like a lot of work, but interface design fundamentally rests on a few simple guidelines and principles. If you ask these questions and follow these steps, you’ll have an interface that enables your users to easily take advantage of your what your business has to offer.

Who Are Interfaces Designed For?

Like with any product design, it’s important to set a clear direction and goal before you actually pick up any tools. A “user experience” or “understanding your users” phase helps you research the business goals of your product and the people for whom you’re designing it. Before you embark on any design for your product — especially one for its interface — try answering these questions:

Having the answers to these questions informs every decision you make with regard your interface design and helps to avoid any confusion about what it needs to do.

Using Wireframes to Plan an Interface

Wireframes are the digital equivalent of a house’s blueprint. They provide a clear understanding of how an interface will function — the layout of the text, buttons, images, and more. Most importantly, creating a wireframe helps you establish hierarchy (the order in which you want your users to read information on your interface). Wireframes are meant to be quick and dirty, which helps you focus on your design’s logic rather than its looks.

picture

Wireframes are simple ways of demonstrating the layout of your interfaces and how they will work.

Wireframes should be low fidelity; i.e., you shouldn’t pay attention to how they look, but rather how they work. Use only three shades of gray, along with clean and simple fonts, symbols, and iconography. These elements only represent the structure of the interface, so there’s no need spend a lot of time crafting it. Think of it this way: If your interface doesn’t work when it’s low fidelity, then it’s probably too complicated.

While there are many approaches to creating wireframes, they all share a common goal: to plan what you need to design for your interface with a solid framework and demonstrate how it will function. As long as your wireframes achieve these goals, your method doesn’t matter!

How Visual Design Powers Usable Interfaces

The common misconception is that adding visual design to a product is only “making it look pretty.” While attention to visual elements does make a interface good-looking, it also makes it more usable, as colorstypography, and images can all provide clarity to a user when they’re using your product. When it comes to your interface’s visual design, consider the following techniques.

Grids

Grid guides give you a framework, making it easier to fit all of your interface’s elements together and maintain consistency within the structure of your site.

A grid is the first thing you should include when designing an interface, as it provides a rigid structure in which all your elements will sit. It is a set of lines that helps designers align elements and fit them together (like a giant puzzle). Grids guide a natural flow of information on interfaces and ease the strain on development. Here are some considerations to keep in mind when creating your grids:

Typography

Text not only helps your interface present information, it also adds depth to the overall look and feel of the design. As it is your design’s main carrier of information, a subtle, clean font is best. Choosing the right typography for your site can be difficult, so keep the following rules in mind to avoid getting caught up in the complexity of it.

Typography

Creating typography guidelines can help you control how your font looks and, more importantly, how readable it is.

Color

Color Wheel

Color wheels help you choose colors that work together because of their relationships.

In interface design, color adds visual cues and draws attention to key actions a user can take. Here are some general rules to follow.

Buttons and Interaction Elements

Buttons

Adding color to buttons helps draw attention to specific areas of an interface, making it easier to understand.

Buttons and interaction elements such as carousels and image galleries encourage users to explore your interface and complete an action. Keep the following rules in mind when deciding how to design these elements.

Experiment, Test, and Reiterate!

Remember that your interface is constantly growing; you’ll always be testing and iterating to improve it. If you’re getting feedback that some parts are difficult to use, then try different colors, interaction elements, buttons, etc. until you find the best ones for your users. There is no shame in getting it wrong and improving your design.

A simple, usable interface is no easy feat, but if you follow these guidelines and principles — and keep your users at top of mind — you’ll be able to design one that helps you and your business grow.

Interface Design at General Assembly

At General Assembly, students learn to apply interface design in a variety of disciplines. As aspiring professionals in our Web Development Immersive, taught on campus and remotely, they design and develop interfaces for websites and applications. Coding students also explore interface design in our part-time Front-End Web Development course, as well as our self-paced, online HTML, CSS, & Web Design program. Students take on interface design from a user experience perspective in our full- and part-time UX courses, while students in our part-time Visual Design course dive into interface-related typographycolor theory, and more.

Ask a Question About Our Design Programs

Meet Our Expert

Paolo Sta. Barbara is a multidisciplinary experience designer with a passion for innovative design thinking and problem-solving. With a background in animation and digital design, he focuses on designing experiences that are not only user-centric, but also crafted and memorable to use. After working with some of Australia’s top digital agencies, Paolo is now the lead experience designer for WiTH Collective (part of Isobar), working on a range of clients, including Qantas, Foxtel, and NRMA. He also teaches various visual design workshops and courses at General Assembly’s Sydney campus.

Paolo Sta. Barbara

“Learning design gives you the skills to define the experiences that affect everyday lives. More importantly, you’ll learn to innovatively solve problems and stay a step ahead of the ever-changing landscape around you.”

Paolo Sta. Barbara, Visual Design Instructor, General Assembly Sydney