Jump to content
Slate Blackcurrant Watermelon Strawberry Orange Banana Apple Emerald Chocolate Marble
Slate Blackcurrant Watermelon Strawberry Orange Banana Apple Emerald Chocolate Marble

Recommended Posts

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's not doing its job, and there are plenty of examples of painful UI fails to demonstrate what you shouldn't be doing.

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. Montreux Jazz Festival

UI design: Montreux Jazz Festival

Here's a fantastic way to build your own tailor-made festival programme with a few swipes

There's nothing like being at a festival to get your FOMO levels through the roof; sure, you might be enjoying the act you're seeing now, but maybe there's another even better one happening elsewhere that you don't even know about. No matter how many times you comb through the long list of performers, there are bound to be a few absolute gems that you miss. But this great piece of UI design for the Montreux Jazz Festival aims to help you ensure that you get the very most out of your time there.

It keeps things beautifully simple, presenting you with six binary choices that you can swipe left or right to build up an impression of your musical preference – for example, do you prefer DJs over bands? – and once you're done it'll present you with your own personalised programme based on what it thinks you'll enjoy, complete with links to buy tickets.

UI design: Montreux Jazz Festival

Lizzo! How did they know?

It's easy and intuitive and, while you'll doubtless want to double-check the full programme anyway to make certain that there's definitely nothing you've missed, it's a brilliant way to help you drill quickly through a lot of information to find results.

02. Tilt Brush

Virtual reality is very much frontier territory as far as UI and UX is concerned. It's 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, and 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.

03. Patterning

UI design: Patterning

Patterning's circular, minimal approach makes it easier to roll your beats [Image: Olympia Noise Co]

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.

04. MailChimp

UI design: MailChimp

MailChimp's design is clean and flat and largely typographical [Image: MailChimp]

Newsletter 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 [Image: MailChimp]

05. Paper for iPad

UI design: Paper for iPad

Paper is designed to be intuitive to use [Image: FiftyThree]

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 [Image: FiftyThree]

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

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.

08. Figure

UI design: Figure

Figure's designed to help you bang out tunes on the go [Image: Propellerhead]

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.

09. Kennedy

UI design: Kennedy

Kennedy adds context to your memories [Image: Brendan Dawes]

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.

UI design: Kennedy

Kennedy's added details make a rich alternative to dry notes [Image: Brendan Dawes]

The result is that instead of a dry note that won't really mean much down the line, you capture a particular moment with fuller context, 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:

View the full article

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×