Discover The Best UX Design Techniques

website snapshot with bright colors

bright color website sample

Color

Color usage on the web changed dramatically in 2016. Brands around the world took a huge leap of faith & started integrating much more vibrant, bright, rich colors into their marketing. We see this trend taking off into the mainstream in 2017 as more people see the ripple effects of this type of change.

Brighter vibrant colors can change a user’s opinion of a brand without the user knowing a single thing about the company. Color psychology tells us that positioning a brand with a bright color palette makes the user feel that company is hip, trendy, and new. This technique is great for companies trying to differentiate themselves from other similar companies in a competitive industry.

An unexpected kickback from this trend was a resurgence in the use of gradients. Gradients are making a comeback in a major way, but the use of them is entirely different from the early 2000s you may remember. Gradients in combination with a bright color palette can now be used on large backgrounds to draw attention to specific copy.

 

 

website grid sample

startup grid web design sample

Breaking The Grid

Until recently, because of the rise in mobile-first design, most designers stuck to the traditional 12-column responsive grid framework. When you think grid layout, you think symmetric layouts with defined boundaries and equal whitespace all around. Late 2016 brought the rise of designers breaking that mold with a few different approaches.

One of those approaches takes a page out of retro web design with overlapping elements. Traditionally designed elements have been isolated into their own section of the grid and they don’t spill over into other sections of that grid. It’s clean, it’s organized and it pulls the user’s attention to very specific areas. The issue that came out of this practice over time is a lot of websites started to look the same with very basic layouts.

Clients and designers alike have advocated for more unique designs with a sense of depth. Breaking the grid in subtle ways, such as an image spilling over into the content section of the grid, allows for just that. It makes the brand stand out as unique and modern without creating confusion and calamity. In some instances, depending on technique, it can even guide the user’s eye from an image to important copy.

The breaking-the-grid trend has also created open composition layouts which are composed of loosely suspended elements that give a more open feeling to the design. Besides being an appealing design technique, this type of layout, from a UX perspective, enables you to put greater emphasis on high value copy and imagery. This technique requires a vast amount of open whitespace to draw the user’s attention to the sparse content on the page.

 

 

website animation sample

website sample with animation

Subtle Animations & Micro Interactions

Possibly the most apparent trend that took over 2016 and is leading the way into 2017 is the use of engaging animations. Animations are no longer used for design sake; they’ve actually been proven to decrease bounce rates, increase the time on site, and increase engagement in general. One of the best ways to use subtle animation to increase time on site is to have animations from page to page. Websites like capitalofchildren.com takes the user from page to page without them even realizing they’ve loaded a new page. This type of seamless transition gives the user the illusion of being on a one-page website and, in turn, increases the amount of time spent on the website.

Interesting and engaging animations make simple layouts become captivating interactive experiences. They can add an entirely different dimension of value to the User’s Experience while browsing. Sites like lookbook.quechua.com rely entirely on animations to pull the experience together and truly immerse the user into the website.   These types of subtle animations can create a story and pull users in, which can decrease bounce rates and increase engagements.

 

 

typography in website designs

website typography sample

Rich Purpose Driven Typography

Typefaces have also dramatically shifted over the past few years, which has lead designers to bravely branch out with their typography usage. Some examples of this practice are the resurgence of serif fonts, the use of handwritten fonts, and even the integrated use of animation into the typography, thanks to SVGs.

Serif fonts have made a comeback in a huge way.  Serif fonts have historically been thought of as the more professional, serious option in the font world until now. Designers have taken a bold approach over the past few years by combining sans serif and serif fonts in the same design, something that was considered too taboo only a few years ago. This combination of font styles has changed the perspective of serif fonts in the public’s opinion. When you use the fonts together it creates a balance of professional and modern, which works perfectly in law, medical, and other professional industries.

Another creative approach to differentiate a brand through typography is the use of handwritten cursive looking fonts. This is a bold choice for a brand that wants to be seen as modern, trendy, and different. Using handwritten fonts on an important headline enables you to immediately pull the user’s attention to that copy due to its unique differences from the rest of the site. This type of approach should be used sparingly, though, as too much handwritten cursive font can quickly become tacky and overwhelming to read on a site.

 

 

menu techniques in web design

New Menu Techniques

Since the dawn of the internet, most designers created a top aligned menu that hasn’t changed much over the years.   Many UX experts still advocate for using a traditional menu simply because that is what a majority of users are accustomed to. The use of mobile and responsive designs have shifted the normal usage of navigation to be a simple icon that, when clicked, reveals a hidden menu. This practice has been in use on mobile for years, but only recently is the UX community taking those techniques to the desktop version.

Why would UX experts break from a norm that users have become accustomed to for over 2 decades?  To understand the answer, you have to take a step back and understand why some UX experts hate mobile menus on desktop. General usability principles dictate that the fewer clicks a user has to take to get where they are going, the better your conversion rate will be. To pile bad news on top of bad news, only 52% of users over 45 are able to identify the purpose of a hamburger mobile icon.  Also, hiding the menu limits the user’s immediate ability to explore the site on their own.

This is where we can flip the switch on the discussion. The new approach to UX design lays out the elements on the site to guide users where you want them to be by strategically placing appropriate copy and calls to action.   By not having a traditional top navigation immediately apparent, the user is more likely to be pushed down the homepage where the designer wants them to go, not where the user thinks they should go.

Another argument for a hidden menu is human behavior. Have you ever had to decide where to eat out with a significant other? Sometimes it feels like a losing battle in which you get nowhere.  Half of us give up and just eat a bowl of cereal in our underwear on the couch.

When given too many choices, like a traditional navigation provides, most people will statistically choose to do nothing at all. Some studies have even shown users are up to 10 times less likely to act if they are given multiple choices. By eliminating the decisions and guiding a user to the goal of the page, you are eliminating their ability to get overwhelmed and leave (bounce rate).

The Future of UX Designs

UX Design trends have dramatically changed over the years for the better. As 2017 kicks off, brands online need to discover new ways to engage users. Strategy is no longer just in a board room, but delivered on digital devices.

At Creative MMS, we provide interactive website solutions that businesses can use to their advantage. Get in touch with our expert user experience designers to discuss your new project.