As interactive designers, it’s crucial to consider new ways in which we pursue website design. Diving deep into our digital design, it’s important to keep in mind not only the brand and site concept, but also the experience the website offers to its users. In our industry, it’s critical to use visual design to enhance functionality and usability, while strengthening the client’s brand; and not to see visual design as the center of the universe.

This article will walk designers through some key factors in creating a better user experience for websites, without compromising the quality of their final design.

Usability and originality

When beginning a new website project, I gather inspiration from various online and offline sources to build an inspiration portfolio. An inspiration portfolio is specifically tailored to each client’s brand, voice, and uniqueness. This portfolio helps give direction to your designs by sparking new ideas and styles that align with your client’s brand.

At this time, it’s also helpful to consciously decipher a usability index. An index of this sort consists of web interactions that complement your client’s site. This could consist of parallax options, sticky navigation, and certain scroll effects. Your usability index is just another resource for you to use when it comes time to design your website.

Also consider:

  • Who the site is for
  • How or why it will be used
  • What will make it function more efficiently
  • How to properly portray the necessary information

To find success in these answers, you’ll need to test different scenarios to enhance your design options. When doing so, remember to always recruit users that meet your target demographic, and make sure you’re running fair and successful user tests by following these steps. Designing should be original and inspiring, but also provide a flawless experience for users, and there is no better way to create something that is flawless for users than by testing it with real users.

Mobile first

Because more and more users are viewing websites through their smart phones, it can be a step backwards for us to be creating ‘desktop first.’

Some trending design features for mobile that provide better website usability include:

  • Less visual clutter
  • Large elements
  • Already mobile optimized
  • Optimized navigation based on users’ needs
  • Minimalist or essentialist design

Designing for mobile first helps narrow down content to just the most pertinent information, leaving less room for confusion. This provides more negative space, giving users a chance to take a mental break between images or content. In addition, large text helps with readability, large images help create drama and intrigue, and large forms are easier to fill out.

When these new trends in interactive design are implemented, a better user experience is generated and design is enhanced.

Gestalt psychology

Gestalt psychology proposes a unique perspective on human perception. The premise of this theory is stated as, “Beauty alters how we think and behave” proving that a well-designed site is crucial to catch users’ interest. Kevin Rhodes, designer at Illumina, gives his two-cents on this topic, stating, “Gestalt psychology offers one explanation for this: people perceive the entirety of a thing before they see their individual parts.”

Meaning that before users can understand content and nail down the details of your website’s functionality, they already have an opinion created from the aesthetics of the website. If the page is stunning, it will have a positive effect on users, producing a good overall user experience.

Adapting designs from mobile to desktop

Using the premise of Gestalt psychology, with what techniques and elements does design beauty take affect? And how can you transfer these elements from mobile first in order to implement a user friendly desktop experience?

For designers, there are several design styles that complement this new mobile first application while also bettering the desktop design, including:

  • Large imagery
  • Typography
  • Conservative elements
  • Maximizing negative space
  • Limited color palettes
  • Flat imagery, icons, patterns, and textures
  • Grid layouts
  • Content placement

Large imagery

Right now, large background images and larger than normal ecommerce images are trending and have positive user results. Reasons for this include the enticing factor of large images and their ability to persuade viewers.

When using large images for aesthetics or product sales, the following are good rules to follow:

  • Must serve a real purpose pertaining to the site’s information
  • Must not be distracting to viewers
  • Any overlaid text must be legible
  • Understand the image file sizes and how site performance is affected

Typography

Better use of typography is always a plus. Larger than normal type can be a good way to persuade and entice viewers, while ensuring users of all ages can easily read your website’s copy. Additionally, interesting type can help better engage audiences, develop more diverse hierarchy of content and fill negative space created from fewer elements.

Conservative elements

Organizing and structuring your content strategically, such as eliminating extra menu options and miscellaneous text, helps conserve elements on your site and gives your users a better experience. For example, when a user comes to your site, they’re quickly looking for answers to their question(s). Ensuring that there are no distractions positively impacts their experience and allows them to find the answers they’re looking for.

However, when consolidating and conserving elements, be careful not to hide critical items from users such as links, forms, or important navigational items.

Maximizing negative space

Negative space is a great style addition that can positively impact your website. Whether on mobile or desktop, creating areas with negative space allows users to rest their eyes, retain information, and bring hierarchy to the information presented.

But when implementing this design, be aware. Too much negative space could leave users confused and lost when trying to find important information.

Limited color palettes

Limited color palettes are another style that tests well with users. When implementing this design style, make sure to think about where and why you’re using certain colors. For example, accent colors should be used intentionally and consistently to highlight important information or CTA’s (call-to-actions).

Currently, grey tones are popular amongst monochromatic sites. However, when designing, try not to be ‘too trendy’ as the nature of a trend carries the potential to fade over time and become obsolete. Rather, use current trends only after you’ve tested it for yourself and know that it’ll work with your brand’s voice, target audience, and positioning.

Flat imagery, icons, patterns, and textures

Flat imagery, icons, patterns, and textures are great styles to use with mobile first design because they’re minimal and precise. However, with flat design, hierarchy can be lost in translation. So when using flat design, make sure to let the users know what information is critical, what is clickable, and what is not. With the correct use of icons, users can comprehend content and concepts efficiently and effectively. It’s also important to note that while icons may appear to be more minimal than a traditional label, often times icons are not well enough known by users. This results in having to pair the icon with the label to improve the user experience, but can sometimes hinder the design.

Grid layouts

Grid systems are mathematically based containers that help assign content into more structured layouts for better readability and viewability. Grid layouts in modern web design are continually improving, showcasing multiple items such as articles, images, and objects for ecommerce. When implemented successfully, these layouts are very helpful for user comprehension. They’re also great when designing responsive sites, as they collapse for mobile with ease.

Content placement

Users may react positively or negatively to content, depending on its placement within a website. This can greatly impact how users interact with your site as well as their overall impression on the company.

When placing content on your site, I recommend the following:

  • Keep the menu in a consistent and familiar area – i.e. towards the top
  • Use hidden menus sparingly as they have potential to hinder a user’s experience
  • Make the menu obvious and easy to find
  • Repeat valued content

When discussing content placement, The Huffington Post shares, “Repeat what works. If you’ve written great copy that keeps visitors coming back for more, repurpose it elsewhere online. Don’t simply duplicate it, however, because search engines take note of that. Rework the material and add a new viewpoint, update the information, or increase the details.”

Essentialism

Some of these elements remind me of the idea of essentialism, rather than the minimalist theories of current web design. The idea behind essentialist designing is to make the most important information the most readable and accessible—the way Greg McKeown, writer, would describe it. McKeown refers to essentialism as the “Disciplined pursuit of less but better.” This is how I approach all my designs; making sure they serve a purpose and provide the user with understanding.

Now it’s your turn

These tips or suggested elements are in place to help enhance our designs, based on ample research, years of experience, and endless user testing.

When creating a new website, be sure to keep in mind the mobile first tips listed above. In conjunction with tests and research, these design tips will help create a clear, easily understood, and well-functioning website, while ensuring a great aesthetic.