Sometimes when designing a new project we get stuck and need a little inspiration. The problem I find is that all the design galleries are focused on websites, not web applications. Since marketing websites usually follow different design patterns, I don’t find them very helpful for inspiration on web app projects.
So here are a few of my favorite interfaces. Here I am mostly focused on aesthetics, but for some (Gumroad in particular) you should check out their user experience first hand.
YouVersion uses great simple typography to create a clean, focused interface. They don’t overwhelm the user with too many choices. In fact, they even have an icon-only navigation bar (you have to hover over the navigation to see the label).
If there is anyone who pays attention to details in software design, it’s Gumroad. Not only do they have a great design style, but subtle details, like the color bars animating when you save, really bring the design to life. Oh, and their product is amazing. I use it to sell my books.
Metalab took styles that were successful on iOS and brought them to the web. Popovers, modals, and navigation bars really shine in their interface. It is a pixel-perfect interface that is fun and easy to use.
Start by dragging music into a playlist, then go find even more great music. Grooveshark’s interface is quick and snappy, with lots of clean edges and crisp lines. It helps that they have great album art to showcase.
You may not consider AirBnB to be a web application, but with their user accounts, wishlists, and other interactive features, they definitely qualify. They use a surprising number of bright colors in their interface, but since everything is separated by whites and light grays, the colors don’t clash.
Black, white, and beautiful. Squarespace uses clean typography, simple icons, and lots of great whitespace to create a sophisticated website creation interface. Just goes to show how often removing elements can improve your design.
When designing an interface that will be used all day, every day, you need to use restraint. If your colors and fonts are too bold they will quickly become tiresome to look at. Zendesk does a great job maintaining a great design, while keeping it focused on the content.
The user experience on this application is incredible. They took A/B and Multivariate testing, which is a complicated and confusing process, and made it simple and easy. I set up a new multivariate test within a couple minutes, all without having used the application before. It doesn’t look half bad, either.
Drew Wilson put this payment app together in 5 days and it looks great. Clean and simple. Each page is focused on the main task, without extra distractions to get in the way. The colors and fonts are clean, plus it’s responsive so it looks great on mobile devices as well.
Simple has a modern, classy style. They use sharp, trendy elements, while still keeping enough of a classic style to make it feel trustworthy. Plus, I love the idea of simplifying my online banking. Their safe-to-spend balance is a great idea.
What We Can Learn
Let’s take a look through again to see what we can apply to our own web applications.
Design for repeat actions.
Since web applications are often used dozens of times per day by the same person, it is important that you keep the interface clean and easy to use. Too many bright colors, moving backgrounds or annoying textures will get old pretty quickly. Just keep in mind that what may look fun and cool the first time you see it will be tiring after you’ve seen it a hundred times.
Pay attention to the little details.
Follow the example of Gumroad and Simple by adding simple animations and subtle details.
Simplify the process.
Visual Website Optimizer is remarkable because they reinvent a process that used to require creating multiple pages, carefully editing HTML, and managing statistics. That entire process is replaced by a visual editor where you can quickly make any change to an existing page.
Gumroad lets you make a purchase with just a credit card number and an email address, cutting out the name, address, and many other often unnecessary fields. Always look for what you can remove to make the process easier.
Use visuals to add life to a design.
The Grooveshark interface takes advantage of beautiful album art to bring it to life. Looking at these images is so much better than just reading song or album titles.
AirBnB uses brilliant photography of their rental listings to enhance their design. Does the content of your web application provide any nice visuals?
Keep it clean.
All of these designs are clean and focused. They make it easy to accomplish a particular task, while staying out of the user’s way and focusing on the content.
I hope you now have some inspiration to take back to your project.
About the Author:
Nathan Barry is the author of Designing Web Applications, a complete guide to designing beautiful, easy-to-use web software. He also writes about design and business at NathanBarry.com.
10 Beautiful Web Applications for Inspiration
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.