Web Design Tutorial: Making an Intuitive Interface for Your Website Users

web design tutorialSuccessful visual communication depends upon key principles of graphic design. Organization and economization can bring consistency, navigability, and simplicity to your interface. Typography and color can show emotions, concepts, and facts, ensuring that the interface’s elements are easily accessible and understandable for users. All of these principles come together to direct the User Interface (UI) Design that is seamlessly useable.

New to website design? Take a design course in Adobe Photoshop at Udemy.com.

Design Principles

Organize

Organizing in design uses consistency and clarity in the structure.

Consistency

  • Follow conventions and rules when designing the interface.
  • Follow cultural conventions across user interfaces.
  • Make conventions consistent with real-world experiences.
  • Innovate only if it is clearly beneficial for the user.

Screen Layout

An excellent way to display the layout spatially is to use a grid structure, which can help you place the elements on the interface and make the screen look less cluttered and more understandable. You can also group related elements using the golden principle of phi, which is found in nature, mathematics and geometry. Generally a 2:1 ratio of grouping is close enough to please the eye.

Learn how to design web interfaces in this master class from Udemy.

Relationships

When grouping, pay attention to relationship and link similar or related items together. Sometimes it is best to have user testing with card sorting because people group things differently. It will give you a clue as to how your users would logically expect relationships to be grouped.

Navigability

Navigation helps the user know where to look and helps them along the process throughout the site. A convention is to use a navigational pane horizontally across the top, and/or vertically on the left side. Sometimes you will see vertical navigation on the right side, but that breaks convention and is harder for users to find.

Economize

When you economize, you do more with less. You can achieve this through simplicity, clarity, and emphasis.

Simplicity

Keep it simple is a common statement. It is just as true in UI Design because simplicity is user friendly, yet so smartly designed. It is not simple for the designer, but simple to use for the user. When they are almost invisible to the user, interfaces are best.

Clarity

Design your elements with clarity of meaning. If they are at all ambiguous, redesign them. If your interface is not understandable, it is not usable; and therefore, it is not correct.

Emphasis

Emphasize the elements that are the most important for your user to see. Detract focus from items that are not critical so that they will not compete with the critical elements. This emphasis can be done through typography and the use of color.

Typography

When selecting typefaces and formatting, remember that the display must be easy to read, and it must also be attractive. Use universal typefaces, and avoid script or novelty typefaces to keep the fonts legible and appealing to all readers.

  • Select typefaces which are legible, clear, and distinctive to look professional.
  • Use a maximum of 3 typefaces with a maximum of 3 point sizes to avoid a cluttered look.
  • Use a maximum of 40-60 characters per line of text to make it easy to read.
  • Avoid centered text in lists and short justified lines of text to make it easy to scan.

Color

Color can bring your design alive and become a powerful communication tool when used correctly. People remember information from color better than from grayscale displays. Combine colors so they visually make sense. An online color wheel which uses the Pantone color system can be a great help to find dynamic or subdued color combinations.

How to use color

Color should be used to group related items. Similar colors show similarity. Be complete and consistent when grouping objects by the same color. Once a color coding scheme is established, the same colors should be used throughout the interface.

Color should be used where the meaning must be remembered to heighten black-and-white information

Color should be used in strong contrasts to draw the user’s attention to the most important information. Confusion can result if too many figures or background fields compete for the viewer’s attention.

Color Symbolism

Color communicates. Color codes should respect existing cultural and professional usage. Take different cultures into consideration: color connotations should be used with great care. Research, and use conditional values to dictate colors for different world cultures that meet their conventions.

Designing an Interface

Having the graphic design principles in mind, you are ready to prepare to design your interface. Prepare? Absolutely! You now can think of your user. When designing an interface, you must know your users; understand their tendencies, goals, skills, and preferences. I was a professional writing major: in every class I took from UX Design, to Document design, to technical writing the first thing we did was an audience analysis. It is not a step you can skip. If you don’t know your user, you miss the mark and the result is an epic fail leaving you wondering why. After, and only after you’ve analyzed your audience, while keeping graphic design principles in mind, consider these ideals when designing your interface:

Make it intuitive

Users do not want to figure out how to navigate a site, they want direction, they want flow, and they want it to be intuitive so they don’t have to think about it. It can be smart, only if it surprises the user in a good way, such as remembering something or learning their habits, and making suggestions based on their previous choices.

Consider context and location

When designing for users, often personas are created of users, based on research. With these personas the designer will create a scenario to help know how best to design the application. These scenarios can help you design better interfaces for context and location. For instance, it is far different to pay online bills at a desk than it is with a smartphone in a moving vehicle. Keep these things in mind when designing.

Give Value and Rewards

Value is important to users, rewards surprise them. Consider the real world; in the way we shop, it is no different online with interfaces. You can reward your users by getting through your design; you can design it so they can do it quickly. Positive reinforcement and value go hand in hand to produce users who will return. It is no surprise that gamification is on the rise in web applications. The enticement of a potential reward and gratification in receiving it drives many users to repetitively visit.

Learn jQuery UI Design at Udemy.com.

Don’t play hide and seek

Conventional elements help the user navigate. There are established design patterns that work were well for users. It is fine to use what has been established.  You don’t want to frustrate them like Facebook does every time they change.

Ensure the system communicates with the user

Always inform your users of location, errors, actions, or changes in state. Use the various UI elements which can communicate status and reduce user frustration.

Don’t default on defaults

Anticipate the goals your users will come to your site with through scenarios. Create defaults that reduce the burden on the user.  For instance, in form design, fields can have drop-down choices or be pre-filled to assist the user.

Conclusion

Developing better visual communication is an important part of making computer graphics that communicate effectively and efficiently through graphic design. Keeping usability in mind assists these designs in being helpful for the user and the business. Remember creativity is not about being cool, it is about problem solving.