11 great UI designs

Your UI design can make or break the success of your website or app: here's how to get it right.

In web design, great user interface, or UI design, is all about helping the user to accomplish a given task as simply and efficiently as possible. While the look and feel is undeniably important, at the core of a great UI is function: in terms of navigation, it should be intuitive to the point of being invisible. As soon as a user gets lost, or can't work out where to go, the UI has failed.

This list of websites and apps may have different design principles and different functions, but they have one thing in common – effective UI design that satisfies all of the above and more. Read on to find out why they're so successful.

01. Tilt Brush

Virtual reality is very much frontier territory as far as UI and UX is concerned, its designers and developers having to make stuff up as they go along, with naturally mixed results. What works on a flat screen doesn't necessarily work so well in VR, and building an effective and useful VR app that you can use for hours without getting motion sickness can be quite a challenge.

So it's great to see a VR product like Google's Tilt Brush - which lets you build up 3D paintings in a virtual environment - that not only works, but is so intuitive to use with such great results that artists are already incorporating it into their creative workflows. Head this way for some excellent pro tips on getting started with this game-changing creative app.

02. Patterning

Patterning's circular, minimal approach makes it easier to roll your beats

Olympia Noise Co's iOS drum machine, Patterning, is unlike any you've seen before, and with good reason. Rather than sequence your rhythm on a grid like every other music app, Patterning uses a circular interface for the basic business of laying out your beats, with colour coded drums so that you can easily see what's what.

And beyond the basics, Patterning's smart but minimal UI makes the more complicated business of sequencing longer songs out of individual patterns a lot less challenging, enabling you to easily create variations on patterns and then fit everything together. It takes a similarly straightforward approach to making everything sound better, too; both its mixer and FX interface are thoughtfully laid out with bold visual cues that help you get the sound you want without getting bogged down among inscrutable controls.

03. MailChimp

UI design MailChimp

MailChimp's design is clean and flat and largely tyopographical

Enewsletter creation and management may not be the most exciting task in the world, but the beautifully designed, intuitive user interface design of MailChimp makes it that much more palatable. Since its recent redesign, the web UI is clean, flat and primarily typographical.

When your account is first set up, the classic 'empty account' problem before your first campaign gets off the ground is balanced out by helpful, visually pleasing user guides. There's plenty of white space, and clear calls to action walk new users through every step of the process - in some cases even incorporating a subtly-animated pointer to indicate where to click.

User interface design MailChimp

Helpful calls to action prevent you getting lost in MailChimp

04. Authentic Weather

UI design Authentic Weather

Straight to the point

On his Behance page, German-born, New York-based designer Tobias van Schneider outlines his reasons for creating yet another weather app - with tongue firmly in cheek. The most important reason is to "get to the point", and Authentic Weather certainly does.

Combined with a simple line-drawing icon, the app delivers such charming insights as "it's fucking raining now" and "freezing cold like a fucking fridge", set large in Akzidenz-Grotesk - fulfilling another of van Schneider's goals, to show off the classic "more beautiful than Helvetica" typeface. Swipe up to share; swipe down to look at tomorrow or the day after; and pinch to show the temperature. And that's it.

UI design Authentic Weather

Authentic Weather keeps things nice and simple

05. Paper for iPad

UI design Paper for iPad

Paper is designed to be intuitive to use

A multi-award-winning app designed to help users be creative in a more intuitive, natural way, Paper lets you draw with your fingertips with a surprising level of detail - although it also works with a stylus if more precision is required.

Designed exclusively for touch, Paper's UI design has no buttons or settings to worry about - just a series of specialised tools. The versatile fountain pen-style Draw tool comes free, while Sketch (soft pencil), Outline (bold marker), Write (ink pen), Color (watercolour brush) and Mixer (colour blender) come as in-app purchases.

UI design Paper for iPad

Rather than buttons, Paper has a set of specialised tools

06. GlobeConvert

UI design GlobeConvert

GlobeConvert Pro helps you sort out your currency

Part of the Globe family of apps - which also includes travel guide GlobeMaster and tips calculator GlobeTipping - GlobeConvert Pro makes the perennial challenge of switching between currencies and standard units of measurement much simpler as you travel the world.

The UI design is surprisingly clean and uncluttered, considering the range of options available: over 190 currencies, with dynamically updating exchange rates, and over 80 units of measurement in 10 different categories. It's as straightforward as selecting what you need on the left-hand menu, and entering the necessary values.

07. Things

UI design Things

Award-winning Things is designed to make your life easier

Available for both Mac and iOS, Things is a popular task management app with an award-winning design that's intuitive and easy to pick up, based around the familiar to-do list concept. As its creators Cultured Code point out, the idea is to make your life easier, after all.

The slick, clean user interface design comes pre-divided into lists to help you categorise your tasks: urgent things go in 'Today', slightly less urgent can wait until 'Next', while 'Schedule' plans further ahead. Each entry captures important information in one go - title, notes and due date, as well as tags if required to help categorise everything. Best of all, the Quick Entry window is accessible from anywhere using a simple keyboard shortcut - and it's all synced automatically across desktop, iPhone and iPad.

08. Campaign Monitor: Worldview

UI design Campaign Monitor Worldview

Worldview lays out complex data in an accessible way

A wonderfully original idea that puts an engaging twist on email subscription data, Campaign Monitor: Worldview overlays information about individuals who are opening, clicking and sharing your communications on a Google Map in real-time for both geographical and personal insights.

The landing page introduces the concept in an immediate visual way, with example pins dropping onto a world map - and the application interface itself is refreshingly clean, revolving around the map and a few basic menus for controlling settings. A great example of UI design with simple iconography and colour coding identifying different categories of user engagement at a glance.

09. Meter.Me

UI design Meter Me

Meter.Me relies on simple swipes; useful for when you're on the move

A fitness activity monitoring app for runners and cyclists, Meter.Me has a minimal, typographical user interface design that relies on necessarily simple swiping gestures to enable users to navigate through the different options while in the process of exercising, rather than fiddling about with menus and settings.

During the development phase, Australian designer Adam Vella conducted extensive research into the field, and found that users who tracked their workouts tend to achieve higher fitness levels - within Meter.Me, relevant data is sorted and displayed in real time, tracked, and then condensed into daily report format for reference.

UI design Meter Me

Extensive research informed Meter.Me's UI design

10. Figure

UI design Figure

Figure's designed to help you bang out tunes on the go

Yet another example of flat design making a potentially very complicated UI design look very clean and intuitive, Figure is a synthesiser and drum machine for iOS from Swedish developer Propellerhead, which is also behind desktop music production software Reason.

You can tap the touch-screen pads, hold your finger down and scroll the rhythm wheels for a range of different sounds, or swipe across the screen to play different notes in the scale. There are also wheels to control the range of notes you have to work with, the number of notes in melodies and bass lines, and various tabs to tweak the sound in a variety of ways.

11. Kennedy

Brendan Dawes' Kennedy adds context to your memories

There's nothing quite like scrolling through a load of your old Twitter updates and wondering what in the hell you were thinking of when you posted that thing six months ago. Lack of context can often mean that something that made perfect sense at the time can be rendered meaningless months or years down the line.

Kennedy, a diary app from the ever-excellent Brendan Dawes, is designed to add context to your memories. You can use it to create text notes of what you're up to, just like you might type into Facebook or Twitter, and maybe add photos to the notes while you're at it. The clever touch, though, is that Kennedy then adds an extra layer of context by adding your location, the date and time, the current weather conditions, a news headline and, if you're listening to music on your phone at the time, the name of the track you're listening to.

Kennedy's added details make a rich alternative to dry notes

The result is that instead of a dry note that won't really mean much down the line, you instead capture a particular moment a lot more fully, complete with plenty of prompts that can help bring back a memory in much more detail. And Dawes' clean design and smart UI keeps everything simple and good-looking.

Related articles: