UX

10 Design Principles That Will Dramatically Boost User Experience...

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

10 Design Principles That Will Dramatically Boost User Experience...

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.”

10 Design Principles That Will Dramatically Boost User Experience...

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

10 Design Principles That Will Dramatically Boost User Experience...

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

10 Design Principles That Will Dramatically Boost User Experience...

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

10 Design Principles That Will Dramatically Boost User Experience...

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

 10 Design Principles That Will Dramatically Boost User Experience...

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

10 Design Principles That Will Dramatically Boost User Experience...

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

10 Design Principles That Will Dramatically Boost User Experience...

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.

10 Design Principles That Will Dramatically Boost User Experience... 10 Design Principles That Will Dramatically Boost User Experience... 10 Design Principles That Will Dramatically Boost User Experience... 10 Design Principles That Will Dramatically Boost User Experience... 10 Design Principles That Will Dramatically Boost User Experience... 10 Design Principles That Will Dramatically Boost User Experience...

Top Prototyping Tools And The Importance Of Prototyping In Your W...

Top Prototyping Tools And The Importance Of Prototyping In Your W…

Did you ever try to work in a straight line from the beginning to the end of a design project? If yes, you may have discovered that your design concept didn’t work out quite as planned. Perhaps, it didn’t even work out at all.

Prototyping is an effective way to prevent such occurrences from happening. Any extra work involved in building a prototype usually pays good dividends!

Prototyping significantly speeds up the design process. Moreover, it helps spot errors that would involve greater expense during later stages.

Finding the right prototyping tool need not take a lot of your time. The three featured here, are the best of the best.

Proto.io

Top Prototyping Tools And The Importance Of Prototyping In Your W...

Both low- and high-fidelity prototypes serve useful purposes. Whether you want verification that your design concept is valid and workable, or you wish to user test your design before handing it over to a developer, Proto.io will be a great choice. It is a powerful and easy-to-use prototyping tool.

You can start using it right away, since design or coding skills are not required to use it.Once you add Proto.io to your toolkit, you’ll be able to do your design and prototyping work, share information, provide previews, and collaborate with project stockholders – all on a single platform.

Proto.io’s Dashboard helps you maintain strict version control and supports your collaboration tasks. The Editor provides the functionality needed to build your prototype(s). The Playerplays an essential role when you need to share a prototype with others, conduct testing, or view change results on your browser.

You have the option of designing a prototype from scratch using the Editor, or importing design and design information from Photoshop or Sketch.

Design Systems by UXPin

Top Prototyping Tools And The Importance Of Prototyping In Your W...

If you’re in the market for an end-to-end UX design tool, UXPin is your best bet. The market is saturated with prototyping tools, but UXPin seems to be the only tool that doesn’t just excel at prototyping, but also tackles the more complex challenges of workflow, design consistency, and developer collaboration.

This cloud-based platform supports the whole UX process in one place: design systems, prototyping, documentation, collaboration, and developer handoffs. UXPin also integrates with Photoshop, Sketch, Jira, and Slack to create a more connected workflow.

One simplified workflow we found useful was creating your design system in UXPin with Sketch assets, then quickly prototyping in UXPin, collecting feedback in UXPin and sharing in Jira, then generating specs and style guides for developers in UXPin.

Fluid UI

Top Prototyping Tools And The Importance Of Prototyping In Your W...

Fluid UI is a user-friendly wireframing and prototyping tool designed to improve communication between web designers, developers and product managers.

Without ever leaving the platform, you can design, start interactive video sessions and chat and comment in real time whether designing or just previewing. Fluid UI is especially effective when working with distributed teams – whether in the same office, or on the other side of the planet, it doesn’t matter.

Fluid UI also contains a comprehensive series of built-in libraries that support wireframe and prototype design, material design, and design on iOS or the web. You can also upload your existing designs.

Three subscription plans are available, but you might first want to see what Fluid UI has to offer by signing up for its single project, “Free Forever” plan. Unlike other tools, Fluid UI also has the advantage of allowing you to store your data for free between projects.

Why Prototyping is so Important

To ensure you’ll accomplish your goals, it’s important to test your ideas as you progress. This is much more preferable than work straight through.

Prototypes provide insight into the performance of a site’s functionality. They tell you when changes are needed to ensure the product will be a pleasure to use.

Prototypes help you:

  1. Define your design goals and ideas, refine them, and allow them to evolve

How to get the maximum benefit from prototypes? You need to create a series of them to check your design as you progress.

This process is often referred to as rapid prototyping. Such approach will help you deliver a high-quality design in less time.

  1. Determine what works, what doesn’t, and what could be made to work better

A cool idea doesn’t always magically morph into a stellar design. If you’re going to make a pitch to a client, it’s not a bad idea to first see if your design idea is practical and feasible. Low-fidelity prototypes are particularly effective in demonstrating the practicality of a design concept.

Once practicality established, further prototyping can be extremely useful. Use it to validate and improve your design’s performance characteristics and functionality!

  1. Identify easy to overlook design errors or problems

You don’t have to wait until user testing to uncover any remaining problems. Doing so can cost you extra in terms of time and money.

Problems detected early on are generally easiest to fix. By using prototypes, you’re more apt to detect problems that would otherwise go unnoticed.

  1. Collaborate and communicate more effectively

Prototypes, especially interactive ones, contain vastly more valuable information than text or slideshows.

Prototyping can reduce a day-long product review meeting to an hour or less in many instances. This is also relevant when communication tools like video or live chat are put into play.

Summary

A prototype can be viewed simply as a useful design aide, but a good prototyping tool offers much more. It does not only speed up the design process! It provides an excellent means for early-on detection of hard-to-find design errors.

Those chosen here, stand for the best of the best in terms of functionality and performance.

Read More at Top Prototyping Tools And The Importance Of Prototyping In Your Workflow

Drill Hole Example

4 Simple Ways to Upgrade Your Website for Brilliance

Last year I engaged in a campaign with Liquid Web Hosting on How to Build Something Brilliant and a few months later I’m here to offer some advice on how to “Keep Building Brilliant” by upgrading different aspects of your website.

Disclaimer: This post was written by me through an activation with HireInfluence on behalf of Liquid Web. Although I received compensation for participating in the campaign, all thoughts and opinions are my own. Follow along with the hashtag #KeepBuildingBrilliant.

1. Improve the Visual Design / User Experience

a) Simplify based on Goals

What is the purpose of your website? Is it to provide information, sell a product or service or simply to grow your email list? Asking yourself these questions will allow you to simplify your website, based on your goals. For example, if your main goal is to get an email address, then your website’s design should be focused around this goal and one way of achieving this, is by reducing clutter and having a clear focus. See here for the top 5 design mistakes killing your conversions.

b) Reduce clutter

Can pages or sections of your site be removed or reduced? Can more white space be added to guide the user and improve the user experience? What aspects are distracting from your main goals? See here for some tips, case studies and best practices for doing just that.

c) Sell benefits, not features

Tell a story, rather than hard sell your customers. What benefits will they derive from your product or service?

An old ad age is the drill and hole example… User’s aren’t looking for a drill, they are looking for a hole so sell them on the end product of “drilling perfect holes with ease”, rather than on the drill itself.

2. Build a following

Why would user’s want to follow you or your business? What value are you offering them? Always keep this in mind when building your list or followers.

a) Build your email list

Email marketing is one of the best ways for your audience to stay engaged and connected, but how much attention are you paying to building your list? Add some lead generators to your site. I personally use the service ‘OptinMonster’ for gaining emails and offer a free logo design eBook ‘lead magnet’ to entice users to sign up.

b) Remove or reduce advertising

How much money are you actually making from those Google ads? Generally, they’re just adding unnecessary clutter. Consider removing them and focus on your goals of gaining important leads, not just a few bucks.  

3. Increase site speed

Increase Site Speed

The speed of your site is going to directly affect not only the experience of the user, but also your search engine rankings, so pay special attention to your website’s speed.

a) Upgrade your Web site platform

What platform are you using for your Web site and is it best suited for your business’s goals? Maybe it’s time to ditch that slow DIY website and upgrade to something more professional. A popular choice would be WordPress, and there are literally thousands of professional themes to choose from. See how to start a website or blog here.

b) Make more mobile friendly

Your website should be responsive by now… if not, then crawl out from under that rock. But don’t just stop at being responsive, consider what elements can be removed or reduced entirely to ensure fast loading speeds on mobile. See here for some tips on making your mobile site load faster.

c) Use a CDN

Hosting your files on a CDN (content delivery network) is one of the best ways to speed up your site, and can often save up to 60% bandwidth.

CDNs work by hosting your files across a large network of servers around the world. When a user visits your site from New Zealand, they are downloading files from the server that is closest to them. This reduces the load on any single server, making the site faster.

See here for getting started with a CDN.

4. Upgrade Your Web Host

Liquid Web Team

A lot of the above factors are reliant on where your website files are hosted – aka your web host – and when choosing a web host, there are a number of factors you need to consider such as reliability, security, performance guarantees, customer support and more.

Do you need dedicated server hosting, managed VPS hosting, managed WordPress hosting, cloud hosting or just standard server hosting?

There are many hosting options out there, and Liquid Web Hosting is one company to consider if you’re wanting to upgrade your web host. Their vision is to be the “The Most Helpful Humans In Hosting™” so you can rest assured you’ll be in good hands for your upgrade. They have everything you need to grow, as well as managed services (not just a server) and wholly owned data-centers for your peace of mind. And just look at their smiles above…

Have any further ways to upgrade your website? Let us know in the comments below.

4 Simple Ways to Upgrade Your Website for Brilliance 4 Simple Ways to Upgrade Your Website for Brilliance 4 Simple Ways to Upgrade Your Website for Brilliance 4 Simple Ways to Upgrade Your Website for Brilliance 4 Simple Ways to Upgrade Your Website for Brilliance 4 Simple Ways to Upgrade Your Website for Brilliance
The Pros, Cons And Future Of Flat Design - WebDesignLedger

The Pros, Cons And Future Of Flat Design – WebDesignLedger

With so much information related to the evolution of the graphic design, I don’t think there is any designer who can deny that flat design is one of the latest and hottest trends in the graphic design world. Having its own roots in the minimalist design, this visually simple and simplistic style can have many different forms and definitions. But to clear the things right from the beginning, I think it’s a better option to describe flat design starting from what it isn’t:

  1. Flat design is not 3D. In simple words, the style’s name comes from its two-dimensional characteristics that are given by the usage of the flat shapes and of the details that create depth and dimension, such as shadows, textures, and highlights.
  2. Flat design is not skeuomorphic. It started as a reaction against skeuomorphism. Designed to suggest or to look like (resemble) the real-world objects or processes, skeuomorphism uses generously effects such as drop shadows, reflections, realistic textures, bevel and emboss, glows and so on.

Flat design started to be a recognizable style in 2012 and 2013 thanks to the release of Windows 8 and iOS 7.

The Pros, Cons And Future Of Flat Design - WebDesignLedger

The Pros, Cons And Future Of Flat Design - WebDesignLedger

Why is flat design so popular today?

There are many reasons for which the flat website design has taken the web world by storm. Easy user interface, bold colors, sharp images, simple navigation, distinctive fonts, easy to read the text, all together contribute in making flat design the best option for many designers and customers. Indeed, all designers know that flat design is two-dimensional, uses simple graphic design and icons and has some minimalist approach that makes especially the web design projects easy to manage. On the other hand, for the companies which embrace this style, it comes with attributes such as simple user interface, friendly aesthetics, clean, colorful, positive wire-framing effect, minimal, ease of use and maintenance and the list seems to continue.

We see today tons of SaaS companies and products leverage flat design for creating easy to understand and simple products. Here are a few resource management software tools to online banking apps, they all started to embrace flat design and absolutely nail it.

However, the web designers have to face these days not just the challenge of a new relative trend, but they also have to make sure the design is responsive enough to provide the user an easy access on other devices than just desktops.

Taking into consideration the flat design has been around for a few years and is still going strong, for sure it’s more than just a passing trend and it has come here to stay. As for any other trend, there are two sides of the same coin that each designer should know and not just blindly follow the trend.

So, let’s look at flat design pros and cons and also let’s see where it might head in the future.

The PROS

 

Flat design is trendy

As we’ve already mentioned, flat design is one of the hottest trends nowadays. You may see it everywhere, whether it’s about brand design, print, packaging or web design. Those visual projects that use flat design are on top and this style has gained the attention of many graphic designers in a very short time.

The Pros, Cons And Future Of Flat Design - WebDesignLedger

The Pros, Cons And Future Of Flat Design - WebDesignLedger

The Pros, Cons And Future Of Flat Design - WebDesignLedger

Flat design is compatible with the responsive design

Since Microsoft, Apple and other big brands have embraced the flat design, this style was also adopted as a fresh approach to delivering a great experience to the users. From its appearance until now, it has been and continues to be an excellent choice for web and mobile design – and for some good reasons.

It’s true the flat design principles fits all design categories and can be applied by all of them, but its grid-based layouts and simple visual are particularly suited to web and mobile design because they can be easily resized or rearranged to display on different devices and screen sizes.

The Pros, Cons And Future Of Flat Design - WebDesignLedger

Taking into consideration that the number of people connecting to the internet using mobile devices surpassed the number of those who access the internet using a desktop, the reason for choosing flat design website is more than obvious. According to Ryan Allen, flat design can be used to “dynamically scale to a content-appropriate size much simpler than a pixel-perfect design.”

Flexible framework

No matter how you name it – grids, cards or modules – many visuals using the flat look tend to rely their graphics on geometric shapes, especially because this type of layout is easy to scan and navigate. The grids or modules are also flexible frameworks that can be shaped into different configurations. This allows the designers to create visuals that best suits with different design projects and display their content, rather than gather the content in limiting and pre-determined layouts.

Let’s take a look at the two examples listed below:

The Pros, Cons And Future Of Flat Design - WebDesignLedger

The Pros, Cons And Future Of Flat Design - WebDesignLedger

The San-Francisco based agency Moniker uses grids in different ways to show their work, profile, and news.

The Pros, Cons And Future Of Flat Design - WebDesignLedger

The Pros, Cons And Future Of Flat Design - WebDesignLedger

On the other hand, these brochure and flyer designs feature different geometric shapes for highlighting various design elements such as typography and icons. Also, the blocks of uniform colors and simple illustration bring the flat look for both of them.

Clean typography

Because of the lack of three-dimensional effects and of the quite simple visual, flat design also provoke the designers to approach the typesetting in a different way. Often, the result is a larger and more streamlined typography that combined with bright colors, bold and creative look makes it look absolutely stunning.

The Pros, Cons And Future Of Flat Design - WebDesignLedger

The Pros, Cons And Future Of Flat Design - WebDesignLedger

Clean and Sharp Visuals

One of the most important characteristics that make a flat design so appealing and interesting is its sharp design. The icons, shapes, lines, and buttons are all in the minimalist style, making the visual look beautiful. Also, the high-contrast features including bright colors, typography, and boldness all together make the design clean and easy to follow.

The Pros, Cons And Future Of Flat Design - WebDesignLedger

The Pros, Cons And Future Of Flat Design - WebDesignLedger

The CONS

 

Lack of Distinctiveness

In terms of visual communication, every business or brand wants its design to communicate their unique characteristics, whether they are using about brochures, posters, websites, apps or something else to convey their message.

One of the downsides of flat designs is the constraints imposed to designers by the minimalist approach and relatively strict rules. With a limited choice of principles to apply, combined with other current graphic design trends, we’re seeing a huge rise in generically designed visuals.

For instance, let’s take a look at the two apps listed below, which are unrelated to each other:

The Pros, Cons And Future Of Flat Design - WebDesignLedger

The Pros, Cons And Future Of Flat Design - WebDesignLedger

Both of them feature almost the same geometric shapes, use the same color scheme and overlapped white sans-serif text.

Compromised Usability

While they strive to emphasize the flat design’s clean and minimalist qualities, some designers fall into the trap of focusing too much on aesthetics to the detriment of usability. This is a particular risk for the web and mobile design.

The Pros, Cons And Future Of Flat Design - WebDesignLedger

Since everything is flat, it’s hard to say what is clickable and what is not. To keep it simple, flat design projects tend to have less “information density”, so, important features and actions can be hidden from the view. Therefore, many users don’t accept with an open heart the too much simplicity in interface design that characterizes the flat design.

 

Extreme minimalism

The ethos of flat design is to implement the “Swiss Style” philosophy. A philosophy that places heavy emphasis on minimalism amongst other things. But the minimalism included here is a fine line that could be easily overstepped and transform everything in a featureless site.

On the other side, it can be difficult to convey a complicated visual message in flat design. One of the arguments against flat design is the simplicity of user-interface tools. The supporters of skeuomorphic design say the effects that add a sense of realism make the tools easy to use. Frankly, I think it depends on the context.

The FUTURE

 

Flat 2.0

As the flat design has been around for few years with all its pros and cons, the designers decided to adjust the style according to their needs.

In its early days, the flat design was characterized by a strict visual simplicity. However, for both aesthetic and functional reasons, the recent developments have brought the subtle reintroduction of effects like shadows and textures. The result is a style named “Flat 2.0” or “almost-flat” design.

This style is more of a compromise: you still get the clean simplicity of flat design but add some subtitle 3D effects for a visual variety and improved usability.

Material Design

The Pros, Cons And Future Of Flat Design - WebDesignLedger

designoholic

Including many common characteristics with Flat 2.0, Material Design is a visual language developed by Google that accentuates grid-based layouts and features of “deliberate color choices, edge-to-edge imagery, large-scale typography, and intentional white space” to create a “bold and graphic interface that immerse the user in the experience”.

Considering the material as a metaphor, Material Design uses a paper-inspired approach with “visual cues that are grounded in reality” and “familiar tactile attributes” for helping users to quickly understand and navigate the designs. Also, the “fundamentals of light, surface, and movement are key to conveying how objects move, interact, and exist in space and in relation to each other. Realistic lighting shows seams, divides space, and indicates moving parts.”

As Google Material Design’s guide is free, the designers are encouraged to apply it to their own work, whether they chose to follow closely these guidelines or to pick up and use the elements and techniques they like.

Join the Discussion

Whether you are an advocate of flat design or of skeuomorphism, the two can certainly co-exist. It depends on the context and content. The tricky part, as the last years has shown and for sure the next years will prove, is to find the perfect balance between them.

Where do you see flat design moving? Do you think it is here to stay or taking into consideration the last evolution of the graphic design trends, it will rather evolve to something else? Feel free to share your thoughts and insights in the comments.

 

Read More at The Pros, Cons And Future Of Flat Design

Behaviour Flow

8 Essential Tips for The Perfect Website

You’ve been honing your craft for a while now! Your portfolio is starting to look awesome to the max.

Maybe you’ve even built up a bit of a following on social media.

However, there’s a good chance that you’ve been neglecting your website. With social media being such a powerful tool for creatives, who cares about a website, right? Wrong.

A website’s still the best way to create a hub where people can stay up to date with what you’re doing, get in touch with you, and purchase your products.

Whether you’re a pro creator with a creative studio that has gear valued at the same price as a new Cadillac, or if you’re simply a hobbyist artist who makes cool things on your smartphone, a website is easy enough to create, yet can be powerful enough to build a career off of.

In this article, we’re going to go over 8 different ideas you should keep in mind when building your website. Enjoy!

8.) Choose a platform that offers both ease-of-use and no limitations in customization

If you’re new to website creation, you might be a bit overwhelmed.

In advertising, you’ll see solutions such as Wix that you can create quality sites in a few clicks. In the marketing community, you’ll hear WordPress boasted as the most versatile way to create a website. In the eCommerce world, you will hear Shopify recommended as the best way to easily sell online. And finally, in the programming community, you’ll hear a variety of answers from using complex backend frameworks to just creating a static HTML/CSS/Javascript website.

My simple recommendation is to choose a platform that offers both versatility and ease-of-use for your needs. For 90% of people the answer is going to be WordPress. See here for how to set up your website/blog using WordPress.

7.) Make sure you are tracking valuable metrics

The most common website analytics tracker is Google Analytics. It’s powerful, lightweight, and relatively easy to use.

Most people simply look at their traffic graph to find out how many particular visitors arrived on a given day.

However, did you know that you can use Google Analytics to track sales, newsletter signups, what people are searching for on your website, and even how many times people download your freebies?

One feature that I’m really digging is called “Behavior Flow”. It shows a graphic of different landing pages on your site and where they go after viewing that particular page (ex. Going to your about page, going to your shop page, leaving your site, etc).

As a creative, some quite valuable metrics you could be tracking on your site are:

  • How many monthly visits your site brings
  • Average time spent on your website
  • What social channels generate the most traffic
  • What type of music you produce that generates the most sales/downloads
  • Behavior flow (See above example)

6.) Test your page load time and work on improvement

According to the Kissmetrics blog:

“40% of people abandon a website that takes more than 3 seconds to load.”

It’s not enough to just throw a website up and call it a day. I highly recommend – right this second – that you go to Tools.Pingdom.com, a popular site speed tester, and enter your website’s URL. What score did you get? Also, it’s recommended to test your website a few times in Pingdom, since the results will vary.

If your score was anything above 6 seconds, you’ve got some work to do. If it’s above 2 seconds, you still should try your best to get your load time quicker.

Here are some quick ways to speed up your site:

  • Enable caching – For WordPress sites, this can be as easy as installing a plugin. WP Total Cache is my top recommendation, but keep in mind it will take some configuring. For minimal configuration, Comet Cache is a really easy caching plugin to use.
  • Cloudflare – With the addition of improving site security and saving yourself from DDOS attacks, Cloudflare can also speed up your site through their global content delivery network. See here for how to set up a CDN.
  • Upgrade hosting – If you can afford it, upgrading your hosting plan is a great way to decrease the load time of your site. See here for a hosting deal with BlueHost.
  • Disable unnecessary plugins (WordPress users) – If you use WordPress, check how many plugins you’ve enabled. If you have 20+ (or even 10+) plugins enabled, there’s a good chance that’s responsible for your slow load time.

5.) If you’re selling anything, your website must be professional

Whether you only take donations, sell designs online, or simply blog, you need to come off as professional and trusting.

Luckily, you don’t have to be a professional web designer to create great looking sites anymore.

However, it’s still easier than ever to create a bad, unprofessional looking website.

A great way to achieve an astounding looking website without too much effort is to purchase a premium theme for WordPress. The most versatile website creation platforms – whether you’re using WordPress or Shopify – will have some sort of theming system where users can create and sell their custom-coded themes.

Buying a $50-$100 theme from a reputable developer can be a very wise investment that will instantly increase the trust your customers have with you when making a purchase.

4.) Remember that simplicity is the key in web design

Take a look at the JUST Creative homepage. It’s very simplistic – in a good way.

Call to action

When a user hits the homepage of JustCreative, there’s only two main places to focus on. Notice in the above graphic that the two places to focus on are 1.) the call-to-action (asking to view Jacob’s Portfolio) and 2.) the navigation, with ONLY the most important links a user should visit.

On the topic of navigations, this is where many people make a big error. A lot of people put so many different links in their navigation which makes the decision process harder for the end-user.

Still think your navigation menu is perfect even when having a ton of different links? Try this.

  1. Download the Google Page Analytics browser extension
  2. Go to your home page and enable the extension.
  3. Look at the percentage breakdown for your navigation

You will see something like in the image above.

Now the question is: “What navigation links of mine get zero clicks?”

Stats

3.) Make it easy for people to contact you and also follow you on social media

I run into situations a lot where I come across sites that are just impossible to contact. Sometimes the contact forms are even broken!

Make sure it is dead-easy for someone to contact you on your site. Usually, I like to put an email address contact form, my Twitter, and Facebook. This way, no matter what a user’s preferred communication platform is, you’ve got them covered.

Making it as easy as possible for someone to contact you is the difference between making a sale and missing one.

2.) Each page of your site must have ONE clear goal in mind

Going back to the idea of simplicity, you’re going to want each page of your site to have ONE clear goal in mind – not several.

If you’re working on a product page for selling an item, you’re not going to want to have other focus areas – such as promoting your social channels, displaying your most recent tweets, etc.

Keep it simple. Keep it focused.

1.) Build an email list of fans

Email is possibly the oldest online marketing channel out there.

However, still in 2017, the power of the email list is cherished by everyone from fortune 500 CEOs, to worldwide superstar musicians, to your friend that makes a few bucks in beer money every month from his t-shirt designs.

Think of an email list as the most stable form of communication you can have with your audience. With social media marketing – On Facebook, Twitter, Snapchat, or whatever pops up tomorrow – an algorithm can be released tomorrow that will cut your fan reach in half. This happened with Facebook a few years ago and many people who depended on their Facebook page to pay their bills, had their income cut in half overnight.

Meanwhile, an email list is much more predictable. With the innovative email marketing tools we have today, you’ll be able to easily segment (or categorize/label) your subscribers & customers and send them email that’s most relevant to them.

There’s three steps you can follow to start building an email list:

1. Sign up for an email marketing service

MailChimp has a free plan with a lot of features, so I recommend starting there. There’s also other options such as aWeber, Drip, ActiveCampaign, and ConvertKit that are worth exploring as well.

2. Create a signup form and put it on your website

Email marketing services such as MailChimp typically have form builders. However, there’s a plethora of other tools you could as well.

To make being on your email list more enticing than simply “Sign up to stay connected with me”, you could offer a free download. Some example headlines you can use on your form are:

  • Download Three Of My XX For Free!
  • Get 10 Awesome XX You Can Use In Your Videos
  • Receive Exclusive Deals On My XX

Final Notes

Remember: Simplicity is often the best answer in web design. Keep simple goals in mind when designing pages on your website.

And don’t forget to get feedback from a second pair of eyes! There are many little details in your design that you don’t notice – or think are a big deal – that might turn off your visitors.

8 Essential Tips for The Perfect Website 8 Essential Tips for The Perfect Website 8 Essential Tips for The Perfect Website 8 Essential Tips for The Perfect Website 8 Essential Tips for The Perfect Website 8 Essential Tips for The Perfect Website