Web UI design examples

Website popularity depends not only on quality of the content but also on how easy it is for users to work with it. And here’s where website UI design comes in. In this article we are going to show you some UI design examples and talk about which elements are essential for good website UI design.

How can we access UI quality?

To access UI quality you can use MAYA principle introduced by industrial designer Raymond Loewy. MAYA stands for Most Advanced Yet Acceptable. In practice it means that interface has to be innovative yet understandable enough so that not to confuse the users. You can check whether MAYA principle is implemented correctly relying on the following criteria:

  1. Usage of standard metaphors. Actions that users can perform on your website have to correspond to those in real life (for example, scrolling reminds about turning pages and archivation — about putting paper documents on the shelf or into the drawer).
  2. Traditional functions availability. Of course you are the one who decides on how innovative or traditional your interface is going to be based on the technical skills of the target audience. But in any case it should contain familiar elements that help users to feel themselves more comfortable.
  3. No unnecessary steps in standard processes. Complicating standard procedures you only irritate your users.

Best examples of UI web design not only help to improve user experience but also win numerous awards, such as Webby Awards. Below we take a closer look at three UI design examples.

Web UI design examples

MailChimp

A famous service for email marketing is an excellent example of service build with user interface design principles in mind. After registration new user doesn’t see an empty space (since he or she hasn’t created any campaigns yet) but is presented with a short tip explaining what is campaign, what to click in order to create one and a blue arrow pointing to the respective button:

Web UI design in MailChimp

Advanced options are shown to those who would like to have more flexibility in a so called menu-on-demand:

Menu on demand in MailChimp web UI

Templates for campaign are shown as schematic previews and users can identify the one the need without even reading descriptions:

Templates for MailChimp web UI

Templates are edited in the editor that uses icons that a standard for this kind of tool and drag-and-drop blocks which are explained at once.

UI for editing template in MailChimp web UI

All the elements that are important for testing design and saving template are also available. Special attention is given to informing user about saving procedure: “We’ll autosave every 20 seconds” so that he or she knows that their data is safe and there’s no need to hit that Save button all the time.

Menu at the bottom of the page shows user on which stage of campaign creation he or she is and allows to go back to any of the previous steps if they need to be changed:

Specifying current step in MailChimp web UI

When user makes a mistake when creating campaign, he or she will see a message that something went wrong:

Error message in MailChimp web UI

And next the system suggests how to fix it and even provides button for doing it at once — how smart is that?

Tip on fixing error in MailChimp web UI

After the user has completed some of the campaign preparation steps, in getting started guide shows Good job! signs next to the respective steps and crosses them off.

Completed actions in MailChimp web UI

MailChimp is definitely a beautiful sample of flat UI design.

Hootsuite

Popular service for managing social networks uses fixed menu for its landing page and offers three bright buttons for registering with social networks that attract attention:

Hootsuite landing page

But if user prefers to register with an email address after clicking on “or create new account” he or she won’t be taken to a new page — system will simple display a window with illustrated fields:

Simple registration form in Hootsuite web UI

Hootsuite encourage users to fill in data and start using the service by displaying information on how much time it can potential save them:

Inspiring statistics in Hootsuite web UI

After registration and adding social networks users are shown an interactive getting started guide:

Getting started guide in Hootsuite web UI

What’s important, it can be skipped by clicking Skip tour:

Skipping getting started guide in  Hootsuite web UI

In Hooutsuit menu with icons on the left can be opened to have access to other sections, such as settings and advertising:

Side menu in Hootsuite web UI

Field above is used for creating messages. Icons are used to give access to such functions as adding file, planning publication, adding geolocation data and choosing privacy settings.

Publication field in Hootsuite web UI

Save button also contains a menu offering not only save but also several other options.

Multi-functional Save button in Hootsuite web UI

Website uses tabs just like a web browser that can be added, deleted and edited:

Tabs in Hootsuite web UI

In publisher users are offered easy to follow hints on managing publications:

Tips on managing publications in Hootsuite web UI

My Energy

My Energy site for tracking energy, gas and water usage and spending does great job explaining users why it needs particular data and shows that registration is done in three steps at once:

3-step registration form in My Energy web UI

After the user has entered an address service shows map and Close enough! button in case map service wasn’t able to identify the house 100% accurately:

Using maps in My Energy web UI

Depending on user location website immediately offers opportunities for tax rebates when using certain technologies:

Tips in My Energy web UI

And here’s how tips on saving energy and questionnaire on home characteristics look like:

Useful tips in My Energy web UI

On the screenshot above we see two menus. Since they are both fixed users have quick access to main functions even when a lot of data is displayed and users need to scroll through it.

The menu below is responsible for usage statistics, comparisons with users living in the same area, building charts and creation of reports that are easy to understand:

Easy to understand My Energy web UI

Section with saving tips deserves attention too:

Tips on saving in My Energy web UI

Users can use it to check off advises they already follow, include them in to-do lists and quickly look through tips using filters, Saving Impact and Effort Required indicators presented in the form of gradient circles:

Gradients in My Energy web UI

As you can see from examples above modern UI design have to be friendly to beginners, use already known patterns and elements and provide explanations and examples where it is needed.

We, studio stfalcon.com, offer development UI for websites and mobile apps and will be happy to create modern UI design that will keep your customers satisfied.

About author

Designer
Max always keeps best user interests in mind and creates web designs and mobile prototypes that are always a pleasure to use.

Related posts

Return to list Return to list