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. Grid

UI design: Grid

As its name suggests, Grid is built around a satisfyingly simple grid-based UI design that brings order to potentially chaotic information. The app's primary purpose is to organise all the different component parts of your projects - notes, pictures, people and places - in a personalised, easy-to-understand way.

Grid has a bespoke user interface called Maestro, which uses a selection of gestures to create a grid structure for any given task, and organise it as you see fit. It's also fully collaborative, so users can share joint plans and contact each other from within the app. It'll be available on the App Store soon - you can sign up for updates, and watch a demonstration video, on the website.

UI design: Grid

02. MailChimp

UI design: MailChimp

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

03. Authentic Weather

UI design: Authentic Weather

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

04. Paper for iPad

UI design: Paper for iPad

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

05. GlobeConvert

UI design: GlobeConvert

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.

06. Things

UI design: Things

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.

07. Campaign Monitor: Worldview

UI design: Campaign Monitor: Worldview

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.

08. Meter.Me

UI design: Meter.Me

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

09. Google More Than A Map

UI design: Google More Than A Map

Another Google Maps-based UI design, this time created by the Silicon Valley giant itself. More Than A Map is a neat microsite that's geared up to showcase everything that's possible with the Google Maps API.

It's split into six core categories - Base Maps, Satellite, Street View, Places, Routing and Data Visualization - each of which has a series of interactive demo using examples from all around the planet. Eye-catching flat colour icons, large imagery, clean animation and minimal type make navigation a breeze, and video case studies from Australia, Thailand, Kenya, Germany and Brazil add depth and colour.

10. Figure

UI design: Figure

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

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.

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.

Have you seen a great example of UI design? Let us know in the comments below!


Nick Carson is editor of Computer Arts magazine.