10 Excellent User Interface Designs to Learn From

The Web Design Usability Series is supported by join.me, an easy way to instantly share your screen with anyone. join.me lets you collaborate on-the-fly, put your heads together super-fast and even just show off.

Over the last few weeks, we've gathered together some great resources and information on constructing amazing user interfaces. Here, we'll take a closer look at 10 beautiful interfaces — five for the web and five for mobile — that you can use as reference points in your own design.

We'll start things off by taking a look at five inspiring websites and applications — what works and what could use a little improvement. Then, we'll have a look at five great mobile applications for iOS whose interfaces are impressive and inspiring.

1. The Fork CMS Website (Web)

What Is It: Fork is a modular, extendable, free and open-source content management system.

What We Like: We're enjoying the whimsical illustrative style, great use of icons, typography and the overall clean look. Information on the extensions is well laid out, and this feels like a page where it all really comes together and works.

What Could Be Better: The oversized look is definitely working well here, but some elements feel a little too large, and the features page feels a bit disorganized.

2. Mail Chimp (Web)

What Is It: Mail Chimp is one of the web's most popular email newsletter and email campaign management web applications.

What We Like: The Mail Chimp app has a unique, welcoming color scheme, with a lot of attention to detail, beautiful reports and a great approach to the "empty account" problem with helpful, visually pleasing user guides. Mail Chimp just feels fun to use and very unintimidating.

What Could Be Better: Some UI elements within the application, namely the treatment of some text, are a little low-contrast, which could impact accessibility.

3. Ronin Website (Web)

What Is It: Ronin is an SaaS web application for time tracking and invoicing.

What We Like: Ronin has a great landing page that provides plenty of information without feeling over-crowded. Similarly, the sign-up form, pricing table and tour pages are equally well organized. The overall feel is clean and open -- it's clear that precision and consistency were paid attention to throughout the process of developing this site.

What Could Be Better: Despite a great layout with careful attention to detail, something about the site still feels rather generic. The UI is great, but it's indicative of many "Web 2.0" sites and doesn't really do anything new to excite us.

4. Campaign Monitor's Worldview (Web)

What Is It: A tool that lets you view your Campaign Monitor subscribers on a world map.

What We Like: The landing page looks great, and the application interface is clean and simple. There's no clutter here, just large maps visualizing subscribers and a few simple menus for managing views. The application cuts out all of the fluff and gets right down to business.

What Could Be Better: While not a design concern, we ran into performance issues after having the app open for a while (in Firefox on the iMac), which could definitely impact the overall user experience.

5. Print Friendly (Web)

What Is It: Print Friendly takes any website and gives you a stripped-down, printer friendly view of that site, with the option to share or download a PDF file of the print-friendly version.

What We Like: There's not a lot of frivolous information or clutter here. The site simply does what it says and that's about it. The landing page gives you everything you need. Print-friendly results are easy to read, easy to print, and easy to share.

What Could Be Better: We find it interesting that the Print Friendly content is created and then placed inside of a DIV with a fixed height. It would be nice if the content box simply expanded to fit the length of its content.

6. GlobeConvert Pro (Mobile)

What Is It: GlobeConvert Pro is an application for converting units of measurement and currency between various standards and countries.

What We Like: The application is dead-simple to use -- just select what you want to convert from the menu on the left and enter the values. It doesn't get much easier, and the layout is clean and uncluttered.

7. Nike Football+ Team Edition (Mobile)

What Is It: An iPad application that lets you create football (soccer) training drills and routines, and includes instructional video and progress tracking.

What We Like: Seeing good design come out of Nike is no surprise, but we really like how it all comes together here. It's a great combination of color, typography, iconography and clean, simple layouts. Many sports apps tend to become cluttered due to an overabundance of media and information, but this one keeps it neat.

8. Tabletop (Mobile)

What Is It: A modular audio editing and mixer environment for the iPad.

What We Like: Seeing iPad applications with interfaces that mimic their real-life counterparts is nothing new, but often they tend to look a bit hokey. We like how Tabletop has pulled off the look here. There's a lot of detail within the application's UI that gives it a very polished feel.

9. Things (Mobile)

What is It: The iOS version of the popular to-do/GTD Mac App, Things.

What We Like: Things has a simple interface that's easy to use, but what really makes it shine is all of the little details. It's the combination of subtle, small things that come together to make the app look super-clean and professional; the subtle gradients, the text shadows, clean lines and detail within the icons.

10. Notably (Mobile)

What Is It: Notably is an authoring tool for the iPad, designed to give creative writers a clean, clutter-free writing environment and organized writing collections.

What We Like: Notably is spacious and clean, and the typography looks great. The subtle, off-white colors work well for reducing eye strain within the editor and give an overall feeling of warmth that makes the application feel inviting to use. The book metaphor, while commonly used, is particularly well-suited to the iPad.

Series Supported by join.me

More About: apps, features, mashable, web design, Web Design Usability Series

For more Mobile coverage: