10 Design Principles That Will Dramatically Boost User Experience

This article was contributed HubMonks.

A strong user experience (UX) is instrumental in your online marketing success. Increased engagement results into increased leads, which translates into greater revenue.

In this article we will specifically dissect the design principles that influence the extent to which your web page performs for users.

Page Objectives

 

It is not enough to say that you want an excellent website with a good user experience. See the difference between UX and UI here. It is vital to define what your visitors and your business should achieve from the web page. It should be understood that your goals and the audience’s goals may differ. Your visitors’ goals are about finding information or getting a downloadable eBook, while your goals may include increasing engagement, form fill-ups or downloads. The trick is to strike a balance to create a win-win situation for both users and your business. Your goals should help you in establishing the following:

• Who the target audience are?
• How to craft effective content?
• How to organize the website?
• How to measure the effectiveness of the website?

In order to understand marketers’ vision it is important to have the key team-members of the design team while discussing online goals in an organization.

User Journey Mapping

User-journey mapping is a visual or a graphical representation of the overall storytelling from the user’s first touch point with your organization, to building a perspective around your service or product or brand, and communicates with them through various mediums. This process is very narrative in nature and requires a text-based approach to describe the nuances of the customer experience.

The story is told from the customer’s perspective, but also lays importance on the important intersections between user expectations and business requirements. Here are the key points that you will have to include in user journey mapping

• Visual demonstration of the journey.
• Understand user behaviour on the existing website analytics.
• Understand the interactive elements that will help them achieve their goals.

Visual Hierarchy

Source: http://edgemm.com

The above picture clearly defines the purpose of visual hierarchy. Visual hierarchy covers almost all the considerations of design; however it tends to give importance to the vital elements of your web page where you want to draw the user’s attention. A robust visual hierarchy also groups similar elements and organize them into meaningful patterns to carry an effective communication process with the viewer. How does a designer actually create a good visual hierarchy? Well, they just need to look for that in their inventory! Here are the key components:

• Size: Using size as a hierarchal tool is a great way to guide them to the key components of your web page.
• Colour: Colour is a great organizer and also infuses personality. Bold and contrasting colors will demand attention.
• Contrast: When audience see something on the web page that is a deviation from the others, they want to know more about it. You could differentiate an important part of the page from the core content of the page with the help of contrasting colors.
• Proximity: If there are multiple sections in a web page, how you place related objects of a section is what defines a good proximity. It helps in clearly associating similar content.
• Density and Whitespace: When you populate a section of the webpage densely, it looks unfavourable in terms of UX. Similarly, keeping too much space between elements will break the link. So, the elements need to be placed and separated with whitespace to differentiate which elements are related and which aren’t. 

F-Pattern Scanning

Visual signs in text such as headings, sections, bolding help users take shortcuts while scanning through the web page and they don’t need to read everything. When they don’t find these signals, they are left to help themselves. Users create their short while scanning the web page and make out if they would like to engage or not. According to this study by Nielsen Norman Group, the pattern of this scanning behaviour forms the shape of the letter “F.”

Source: Monsoon Consulting

If you want to ensure that your users’ attention is drawn towards the most important elements of the web page (Calls-to-action, forms, images, videos), it is highly recommended to follow an F pattern and place your elements accordingly. 

Responsive Design

Responsive design is like a jigsaw puzzle! Responsive web design requires movement of various elements of the page that changes the initial design. Organizing elements to fit could be a great challenge with responsive design as larger pages and their elements will have to shrink to fit on narrow platforms for a mobile phone or tablet. We have listed some vital considerations below:

• Consider a mobile-first strategy.
• Include a hamburger collapsible menu (or similar) in case of multiple items.
• Optimize image for all the types of devices (desktop, smartphones, tablets).
• Optimize the content for mobile devices as the content for desktop will occupy too much space.
• Check the loading speed once the pages are live and check if certain design components are reducing the load speed.
• Implement Google’s AMP (Accelerated Mobile Pages) that is meant to optimize the content load time on mobile phones.

Calls-to-action

Calls-to-action play a vital role in boosting your website conversions. A single call-to-action is empowered with the responsibility to attract attention and later get clicked on. These two factors will race your website towards a high ROI. So, what are the key principles of a call-to-action that designers need to consider?

• Size: Decide the size of the call-to-action by ensuring that it gets noticed amongst the other elements of the web page. If the call-to-action button should be placed below a form, the size should be equal to that of the fields of that form.
• Text: If the marketer has decided on the text for various pages and sections, they should be communicated with the designers with the copy. This will help them in determining the ideal size.
• Colour: Colour plays 70% of the role in attracting the viewers’ attention. Ensure that it stands out from the rest of the section by smart usage of colours.
• Button Shape: If there are various sections and smaller objects in a single webpage, how smartly you define a button by carving its shape is important. Ensure that the shape stands out from the rest of the objects.
• A/B Testing: The best practice to gauge effectiveness of a call-to-action is by creating different variants of colour, text, and fonts. Monitor which CTAs are more successful. At HubMonks we insert the CTA from the HubSpot marketing tool for all our HubSpot COS web development projects so that clients are able to measure the button’s performance. 

Forms

There is a huge difference between forms and advanced forms that boost UX. Even forms have various design principles that help users understand its hierarchy and helps designers utilize less space with all the important fields included.

• Label alignment helps users identify the field with its corresponding label. Proper alignment also consumes less space that ultimately boosts the psychological factor to get form-fills.
• Placeholder text is a great innovation in forms, wherein the user is able to see the label inside the field which disappears once the user brings the cursor on the box.

Cognitive Load

 

Cognitive load in web design refers to the amount of thought process a person has to give while they are engaged in the buyer’s journey. The cognitive load theory is differentiated in two types for user experience:

• Intrinsic cognitive load: It refers to minimal usage of copy so that the user is not hampered from completing a specific task on the web page.
• Germane cognitive load: It refers to the effort devoted to process information and how user understands the pattern of the information by mentally organizing categories of information and any relationship among them.

Hick’s Law

Source: My Site Auditor

Designers could explain this law to the marketers so that users are not overwhelmed with too much information or options. Hick’s Law tells us that the time taken by a person to make a decision depends upon the number of choices available to him or her. See here for more psychology principles.

Interaction Design

Source: colossom.com

Interaction design is dedicated to creating engaging interfaces with prediction about the user behaviour. It is essential to know how users and technology communicate with each other. Here are some questions that you should consider when designing for the best interaction:

• How users can interact? Which parts of the website will be interacted by the user with mouse, finger, or stylus?
• Which clues will make it easier for the users to interact? The colour, size, shape, text will differentiate the objects and helps users in understanding these interactive points.
• Is information chunked into seven items at a time? Users tend to keep only five-nine items in their short term memory.
• Are various sections of the website differentiated with the help of edges and corners? Elements like menus need to be differentiated by these design considerations. Moreover, they form a boundary stating that the finger or the mouse cannot be moved beyond that boundary.

Conclusion

The whole concept of user experience is centered around having a clear understanding of the targeted users, their needs, their values, abilities, and their limitations. It takes into account your business goals and objectives. The best practices of UX works towards promoting the quality of how the user interacts with your website and the perceptions of the product and all related services.

When you are running a marketing campaign, you tend to pull interested prospects and make them a part of your marketing funnel. At every point of this funnel, your users need guidance to move smoothly towards their journey with your organization. The points discussed in this article will help you create an exceptional user experience that helps them achieve their goals and boost your business initiatives.

—

Dev is the Head of Marketing at HubMonks, a HubSpot content optimization system (COS) partner for major inbound marketing agencies and brands. You can contact him on Facebook and Twitter. Top photo by PhotoSpin.

New Illustrated Lettering Class with Gemma O’Brien

Fellow Aussie, Gemma O’Brien (aka MrsEaves), is a talented award-winning artist who I started following a few years back when I saw her speak at a design conference. She creates incredible, envy producing lettering, illustration and typographic work.

The good news is that she has just released a brand new Skillshare lettering class.

In the class, you’ll create an intricate, illustrated letterform — and level up your skills with new creative approaches to typography, drawing, digital layout, and more.

Every lesson breaks down her step-by-step approach, while also sharing illustration and composition techniques you can add to your personal repertoire and bring to projects of your own.

All are invited to join this class and flex their creativity. Whether you’re new to illustration and looking for a weekend project, or a seasoned artist aiming to create a complex piece, you’ll gain insights and skills for use again and again.

Once you dive in to Gemma’s creative lettering, you’ll never look at illustration the same way again.

2 Free Months of Skillshare Premium!

Get unlimited access to this premium class and 17,000+ more with Skillshare Premium. .

» Get started for free

Designing a Great Logo: Tips & Mistakes to Avoid

This article was contributed by Krzysztof Gilowski.

Although the recipe for a perfect logo does not exist, the knowledge of the features that distinguish legendary designs from the average ones, will allow you to get closer to greatness.

In this article you will get to know the rules that underlie the designs of some of the most valuable brands in the world.

Recognizability is everything

The best logo designs communicate the whole brand image in no time. Lego embodies the joy of children playing with toys. The Mercedes’ logo expresses luxury with an elegant typeface and a geometric abstract symbol.

The most famous logos have a story to tell and that makes them unique.

Simplicity is the key to success

What do the  world’s most recognizable logos have in common? The McDonald’s “M”, Nike’s swoosh, or the Apple’s apple with a bite (or byte) taken out of it? They are all extremely simple.

“The only mandate in logo design is that they be distinctive, memorable and clear.”

-Paul Rand

A good logo is original, but it is not exaggerated. An extremely complex logotype will not make your brand look sophisticated. It will only mean that the designer did not understand the meaning of simplicity.

Versatility – saving your nerves and money

A logo should present itself well in every possible format: small and large; in black and white (positive / negative); vertically and horizontally. It must be equally effective displayed on a variety of media – smartphones, tablets, computer screens and printed advertising.

Make sure the logo is recognizable after reversing the colors and decreasing the size. Check out how it looks on a stamp and on a truck. Don’t be afraid to make different versions of your logo (aka responsive logos).

A good logo must be timeless

The most beautiful and effective logo is not based on the current trends in the market. These are timeless pieces of work. Their authors, thanks to their experience in design, can predict whether the logo will still be valid in 10, 20 or 50 years.

The BMW’s logo is an example of such a graphic sign. The original logo was designed in 1916 and has changed very little ever since. The style keeps being altered according to the era but the concept remains the same. See more logo evolutions here.

6 rules followed by logo designers

1. Start with black and white

In the early stages of the design the colors are of secondary importance. Moreover, they can draw people’s attention away from the logo itself. Most of the recognizable logos start with black and white drawings and sketches.

2. Use three colors at most

Examples of valuable logos that would break this rule are rare. Do not try to make an exception here – reality shows that it does not pay off. Paradoxically, a timeless logo that would be memorable is very simple and minimal colors.

Use the right colors depending on the mood you want to create. Learn color psychology.

3. Use one or two fonts

To keep your logo clear and transparent, you may want to limit your design to one or two types of fonts. Depending on the nature of your business, use fonts with sharp or soft lines. See here for great font combinations.

4. Choose practicality over originality

Your logo has to be easily remembered. Accept the principle that a graphic design should be easy to describe on the phone.

A good logo should be easy to describe on the phone.

Something that will stay in someone’s memory should not be very complicated. Always choose practicality over originality.

Below you can see a case study of 1500 people attempting to draw logos from memory. It’s difficult!

5. Avoid unnecessary details

Remove anything that is unnecessary from your design. The ideal logo is not the one that cannot have anything added to it. The best one is the one that cannot have a single element removed from it.

6. Do not use ready-made graphics

Under no circumstances, create a logo with ready-made items (stock graphics, cliparts, pre-made designs). Creating your logo from ready-made templates and pictures makes your logo non-unique and replicable. Not to mention that a part of your logo may be legally used in your competitors’ graphics.

4 major characteristics of projects that lack professionalism

If you are looking for a logo design, the following tips will help you evaluate the effectiveness of your designer’s work.

1. Materials full of defects

The files with logo designs that you receive from your designer should not contain any technical imperfections. The curves should not overlap and should be as smooth as possible and the nodal points should be minimized. If the logo is symmetrical, then the symmetry should be perfect such as below.

Remember that the presentation of a logotype in a different scale, such as zooming and placing it on a truck, will expose all of its possible errors and defects.

Below is a logo by that has been designed by Jeroen van Eerden with a grid system to avoid these defects.

2. Monogram as a starting point

An inexperienced designer often cannot resist the temptation to create a logo based on the company’s initials (for example, the name “Great Company” would create the logo form ‘G’ and ‘C’).

While this seems like a good idea, it’s hard to build company’s credibility or convey branding information with that kind of logo. It’s quite common in the fashion industry although they have huge marketing budgets. Monograms do not work for all industries.

3. Shortening the name to acronym

It is often a mistake to try to shorten the name of a new company to acronym size. Yes, this is an effective strategy, as demonstrated by the IBM’s, KFC’s, or AOL’s logos. However, the names of these companies became acronyms only after many years of market presence and costly exposure.

4. Using graphics programs does not guarantee quality

A logo created in Photoshop or Gimp may not be usable when you want to engrave it or significantly enlarge it. A professional logo should look just as good on different devices, but a raster logo (presenting the image with a pixel grid) does not assure that effect.

A vector logo (which defines points mathematically) created in software such as Adobe Illustrator or Corel Draw will provide appropriate image reproduction on any scale – without the loss of quality.

Do you have any further logo design tips or mistakes to avoid?

—

About the author: Krzysztof Gilowski is CEO at Juicy – a company that creates memorable brands for small companies. Check out their guide on designing a restaurant logo on their blog.

20 Famous Animated Logos for Your Inspiration

This article was contributed by Anil Parmar.

Looking for logo animation ideas? You’ve come to the right place.

Animated logos have the power to draw attention and communicate messages in ways that a static logo can not. Get inspired by these 20 famous animated logo designs.

Amazon

The Amazon logo not only delivers a smile but it also depicts that they sell everything from A to Z.

Takeaway

Define the services you provide in the logo itself.

Mozilla Firefox

The well-known browser shows a fiery fox encircling the earth conveying its global reach around the entire world. The fox represents the blazing speed of the browser.

Takeaway

Convey your brand’s values within the logo. eg. speed

Google

This name needs no introduction. The animation demonstrates the Google Speak Now functionality in the brand’s colors.

Takeaway

Use color and motion to convey your brand in its simplest form.

Intel

Intel is the world’s best commercial microprocessor chip making company. The logo conveys this, showing that it makes processors for tablets, computers and mobile phones.

Takeaway

Make your animation show your unique selling point, such as Intel’s chips.

Burger-King

The Burger King logo is animated in piece by piece, in a 3D manner.

Takeaway

Consider giving dimension to your logo animation.

FedEx

A well known courier delivery service uses the arrow for demonstrating its service.

Takeaway

Use your logo’s key feature / negative space to convey motion.

Hype Film

Hype film is a production company and camera film revolves around a loudspeaker to spell HYPE.

Takeaway

Don’t be afraid to add new elements to the logo animation sequence such as how HYPE uses film to build their loudspeaker.

Pixate

 

Pixate runs mobile app prototypes and the black background with four colorful leaves shows the creative side of the app.

Takeaway

Speed is crucial in animation, making for a smooth animation.

Nat Geo

The National Geographic’s famous yellow border is broken up and brought in piece by piece.

Takeaway

Don’t be afraid to split your logo into separate pieces for the animation.

Mail Chimp Snap

Send simple email newsletters from your mobile. (now discontinued)

Takeaway

Build your logo up, with dimension.

Fanta

The bubbly fun nature of the type and orange circle shape is brought to life with animation.

Takeaway

Use your logo’s key attritbutes for the animation such as the type and orange circle in this case.

Uber

Building on the line ways points of a map, it creates a nice sequence to reveal the logo.

Takeaway

Use elements from your app or brand for the animation.

LinkedIn

The professional network connects business people all over the world, which is conveyed by the bouncy man and case.

Takeaway

Business can also be fun!

Instagram

The photo sharing app owned by Facebook combines the traditional camera and polaroid to form their text based logo.

Takeaway

Illustrate your brand’s key features and then the logo itself.

Vimeo

Vimeo’s video sharing platform uses video buttons such as play, pause to illustrate their service.

Takeaway

Make the logo functional and leave subtle hints to the brand.

Master Card

Mastercard illustrate’s its multifaceted uses such as experiences, travel and food. Priceless.

Takeaway

Show how diverse your product is by illustrating various elements.

Dell

Dell’s high-performance laptops  and PCS are illustrated by 4 icons coming together. The ultimate collaboration of security, handling documents, analytics and cloud storage.

Takeaway

Depict the most effective characteristics of the product you supply to your customers.

Spotify

Get instant access to millions of songs with Spotify.

Takeaway

Pick the logical part from the service/product and give it motion.

Pinterest

The logo in the animation shows a pin / P followed by written text ‘Pinterest’, a platform to discover information globally, by images.

Takeaway

A single symbol can show the entire motive of the brand and its identity.

Flickr

Flickr is one of the most significant platforms for sharing videos and photos. The logo conveys a world of creativity and inspiration.

Takeaway

A simple idea is often the most effective. Two dots can evolve into something so large!

Nike

The Nike Swoosh animated with bright vivid paint, highlighting the active nature of the swoosh.

Takeaway

If your logo already has motion, use it to its advantage.

Do you have any other favorite famous animated logos? Let us know!

—

Anil Parmar is the co-founder of Glorywebs that aims to help clients with professional web design services, app design & development, digital marketing and more. Find him on Twitter @abparmar99.