May 10, 2022

Web UI Design Examples

Website popularity depends not only on the 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:

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

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

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.

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:

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

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

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.

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:

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:

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

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

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

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

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.

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

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

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

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:

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:

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

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

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:

Section with saving tips deserves attention too:

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:

Our Experience

Airfarm

To delve deeper into the project's intricacies, we employed job stories, a well-suited approach for long-term development initiatives, enabling us to explore multiple potential implementation routes.

We meticulously crafted a clickable design mockup for the interface.

Stfalcon seamlessly integrated into the client's team, offering invaluable support in various aspects:

SMILEFOOD

Stfalcon's mission was to revamp and devise a blueprint for a new app due to the shortcomings of the existing application:

• It was built on the Ionic framework and essentially replicated the website.
• It featured functionality that consistently faltered with each update.
• It frequently froze or malfunctioned during use.

Our Solution Entailed the Following Steps:

We conducted an in-depth Discovery process, which involved:

Bottom Line

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

Our dedicated team offers development UI for websites and mobile apps and will be happy to create modern UI designs that will keep your customers satisfied, just contact us, a complimentary consultation is available.