web ui designUser Interface (UI) Design is about creating visually pleasing layouts that allow users to fluently use the site. The user is the one who will decide, so UI must anticipate what is going to be used.  It is not about looks alone; nothing matters if it is not usable. If it cannot be used, it should not exist. Learn how to design web interfaces in this master class from Udemy today.

Interaction design, visual design, and information architecture come together to create UI Design.

Interaction Design

According to usability.gov, “Interaction design focuses on creating engaging interfaces with well thought out behaviors.”

Visual Design

According to usability.gov, “Visual design focuses on the aesthetics of a site and its related materials by strategically implementing images, colors, fonts, and other elements.”

Information Architecture

According to usability.gov, “Information architecture focuses on organizing, structuring, and labeling content in an effective and sustainable way.”

What Is Good Web Design?

There are many articles that discuss how to implement the details of effective web design, and I will be posting a UI tutorial based article soon, but for this purpose I will focus on some great principles of design as a basis of how to think when designing UI.

How to design UI interfaces in jQuery

The first step in designing UI web pages, you must learn how users think. Habits do not change much from the brick and mortar stores to online shop fronts. Vistiors will scan text, meander toward the thing that catches their eye or looks like what they came for. There are parts of the page they will not look at just as they will not go into parts of the store. If they do not find what they wanted, they will click the back button and start the process over.

Make it Intuitive

Conscious decision making by users in not what they want. They don’t want to be stumped, trying to decide what to do. In Steve Krug’s book about usability, Don’t Make Me Think, he says that a web page should be obvious and self-explanatory. Going from point A to point B must be intuitive for the users. Provide visible cues, for instance: make links easy to read, but don’t underline anything that is not a link unless you want your user clicking repetitively and swearing.

Patience is not a virtue for Web Users

The less action that is required of your user to test your service, the more likely they will do it. A random visitor who is not sure they want to use your site again will not be willing to fill out a long form of account information at the on-set. Trust them to explore without forcing disclosure of their personal information. Users do not consider it reasonable to offer up their email address for access to a site. They are more likely to want to give their email in return for something they already have seen and approved. In an ideal world, all barriers would be removed, but if you must require information, make it simple, quick, and unobtrusive.

Focus the User’s Attention

Your site will provide both static and dynamic content. Images, headings, bold text, and videos are dynamic and will catch the attention of the user. Use this to your advantage guiding the user from point A to point B without them having to pull out their GPS to get there.

Aim for an F, ignore the A

Users tend to scan web sites in an F-pattern. Look at the page, and see what falls in this pattern. Is that what your users should see first? Second? Third?

Expose the Features

Modern websites are often criticized by their 1-2-3 approach with big elements, but these designs are very affective for usability. The user is guided through the page without having to think about it. If you let the user clearly see which functions are available to them, you are following a fundamental principle of successful user interface design. How successful UI Design is achieved is not as important as the outcome. If the content is well-understood and visitors feel comfortable interacting with the system, you have done your job well.

Design UI Elements in Photoshop

Write Content Effectively

Writing for the web is different than for print. Adjust the style accordingly:

The user’s preferences and browsing habits should dictate what is included:

Avoid cute or clever names, creative marketing names, company-specific names, and any unfamiliar technical names. Keep it business worthy. For instance, if you want the users to create an account, use the words sign up. Start now is a bit unclear; explore our services is outright sneaky.

Keep it Simple

Keep it Simple (KIS) should be the primary goal of your site design. Users are rarely on a site to view the design. Actually, they are often at the site in spite of the design, looking for information. Complexity does them no favors, so keep it simple. Many designers disagree with the KIS notion. They believe it means the user is simple, but this is not the reason designers must keep it simple. The most intelligent user appreciates a simple to use design that is intuitive. It’s a hospitality service we give to our users.

Leave Breathing Room

White space is your friend. It is the friend of users. It breaks up clutter. It gives users room to breathe. You cannot underestimate the importance of white space.

If you disagree, look at this website: http://stillwatersresort.com/ Stillwaters is a lovely resort which I have stayed at, but I specifically chose their website as my class project redesign in my UX Design class during college because of the cluttered look. I immediately opened the site, which is stuffed with every piece of information you need, but I felt overwhelmed just looking at it.

Compare this to http://www.healthequitylabs.com/ , a company I do some writing and researchfor, their site is not white in color, but it contains plenty of white space. Yes, their mission on this site is more simplistic, but it is easy to look at and not at all overwhelming.

Even a site like http://www.amazon.com/ which has much more to include than the resort site includes enough white space to allow the user to breathe.

Take this article as another example. If no hierarchal headings with the extra space they provide were added, and the article was one large block of paragraphs, would you have read this far into the article? We left textbooks behind when we left college. Don’t give your users one to read, they won’t do it.

Communicate with “Visible Language”

“Visible Language” is an idea conceptualized by Aaron Marcus in his papers on effective communication. Marcus describes “visible language” as the content that users see on-screen.


Strive to provide the user with clear and consistence conceptual structure. The important concepts of organization are consistency, screen layout, relationships, and navigability. These should be applied to all elements on every page of a site.


Be concise: do the most with the least amount of visual elements. Consider these four points: simplicity, clarity, distinctiveness, and emphasis.


Include only all the elements which are most important for communication.


No ambiguity is allowed in any components.


Important properties of all necessary elements must be distinguishable.


The most important elements should be perceived easily.


Think about your user. What education level do they have? Write for them, not for you. You might like those $12 words, but your user might not appreciate them. Match your presentation to the user in writing and content. In order to communicate successfully, the user interface must keep these in balance: legibility, readability, typography, symbolism, multiple views, and color or texture. A good rule of thumb is to keep to a maximum of 3 typefaces, in a maximum of 3 point sizes, with a maximum of 18 words (or 50-80 characters) per line of text.

Stay Conventional

Conventions are helpful to the designer and user, but it does not mean that the result will always be boring. Conventions are useful because they reduce the learning curve. In regular life, every store keeps products in the same placement; a road keep signs a certain height, and lines the same color. Imagine the mess we’d have if life didn’t follow conventions. It is no different online. People are busy, be kind to them and place elements where they expect them to be. Following conventions gains user trust and confidence, you look reliable as your credibility is proved. Krug suggests that you should only innovate if you truly know that your idea is better. If you don’t know, stick with conventions.

Even if a page is in a different language than the user’s own, when conventions are followed the site can be navigated. And think of the disabled, with screen readers, shouldn’t we allow things to be in a logical order they are used to?

Test Early, and Test Often (TETO)

Usability tests provide crucial insights into significant problems to a layout, which cause issues for users. Test early, test often, and test for the right reasons. Most design decisions are local—not universal. Some points to consider:

If you want a great site, you must test it.


Don’t make the user think or squander their patience. Focus their attention, and expose features. Write effectively, while keeping it simple. Use white space, a visible language, and conventions. Test early and test often. Udemy can teach you more about it. Keep reading, take some classes, and you’ll design great usable web sites.

Top courses in User Interface

More User Interface Courses

User Interface students also learn

Empower your team. Lead the industry.

Get a subscription to a library of online courses and digital learning tools for your organization with Udemy for Business.

Request a demo