Balsamiq

Introducing: UI Design 101

August 28, 2017 · Posted by Jessica in UX · 1 Comment

Designing good user interfaces is a craft.

Being able to select and arrange user interface controls on a screen in an way that matches users' mental models and solves their problems is a skill that used to come only from years of experience.

Fortunately, Interaction Design has evolved to the point where much of this experiential knowledge has been distilled into proven solutions to typical usability problems, in the form of UI Patterns.

There's a myriad of components we can throw on to a screen to materialize our ideas, but doing it right requires the right knowledge and resources. This is the reason behind our new initiative: UI Design 101, where we'll help you learn how to design great interfaces, one element at a time.

UI Design 101 Collection A collection of UI patterns

Back to Basics

We've developed a new section on our website consisting of a collection of UI patterns. We included the most common elements people interact with everyday as users and more importantly, as UI designers.

Each component in the collection is examined in detail in order to understand how and when to use it to create great experiences, and is accompanied by best practice recommendations and real world examples.

Radio Buttons or Checkboxes?

Our goal with UI Design 101 is to help you learn. But not only that. There are other situations in which this UI palette can come in handy, such as:

to help you choose the elements that will give form to your interface,
for a quick review of how components are most often used,
to help you educate stakeholders about design decisions (e.g., "This is why I used radio buttons and not checkboxes.")

If you can think of any other pieces of information we can add to our UI component breakdown to make it more useful, we'd love to hear it! We'll try to fit everything in this resource so you can rely on it as a reference guide for your design projects.

UI Pattern Radio Buttons and Checkboxes Types of Radio Buttons and Checkboxes

More Resources

We've also got a ton of supporting information behind our UI lessons.

Head to the the resources section of the Balsamiq Support site to see our collection of User Interface Guidelines, which lists the best guidelines about UI design from Apple, Microsoft, Google, and more.
Meanwhile, our page on User Interface Galleries links to visual examples and books like "Designing Interfaces", the follow-up "Designing Web Interfaces", and many more. These galleries will show you examples of good UI design for mobile apps, landing pages, forms, and whatever else you are designing.
Finally, for designing UIs from Balsamiq templates, check out Wireframes to Go!.

We're only at the beginning of this effort; we plan to expand it to many more patterns to make it a living resource that you can keep coming back to. And your feedback can make it even better.

That's it! What are you waiting for? Go check out UI Design 101!