Monthly Archives: August 2016

Create a Perfect Color Scheme

Nothing can make a project stand out or identify your brand or business like color. Just think: What would the “Golden Arches” of McDonald’s be without the signature red and gold?

When it comes to creating the perfect color scheme, there are plenty of things to consider. Established branding is important and should be honored if colors already exist. But if not, the world of color is open for you to explore.

Much of the design theory involved in creating a great color palette starts with the color wheel. The somewhat abstract illustration depicts the relationships between primary, secondary and tertiary colors, as well as tints, shades, tones and color combinations. Understanding the theory of the wheel can help you create and establish color schemes that are harmonious and beautiful.

There are plenty of ways beyond theory to create great color schemes as well. While the most common color schemes contain a dominant color and several secondary colors, every palette is somewhat different. You can pick a color from a photo or nature to get started or just an online tool or swatch builder as a reference point.

The colors you choose can impact the meaning of projects. Each color comes with distinct associations. Some are universal, while other color associations can have cultural ties. It is important to think about your audience in relationship to color choices so that you end up with a good fit.

No matter where you start, the idea is to create a color palette that grabs the attention of users, sets the right mood for a project and helps deliver content effectively.

Are you ready to get started? We’ve got a great infographic to help you create the perfect color scheme.

 

UX Design Tips

Dropdown menus have come a long way thanks to modern JavaScript and CSS3 effects. But not all dropdowns are created equal, and some UX strategies work better than others.

In this guide I’ll cover a handful of design techniques for building usable dropdown navigation menus. This includes multi-level dropdowns and mega menus which all rely on the same core design principles.

 

Markers For Sub-Menus

It’s a good idea to include markers for links that have sub-menus attached. These small visual indicators let users know where links are placed and how to access them.

And these rules apply to all menus whether you’re designing with 1 tier or 4 tiers of links.

The Threadbird navigation is a fantastic example of this effect in action.

Some of their links have sub-menus while others don’t. In fact some of their links have sub-sub-menus which you can only discern by their unique marker next to each link.

Threadbird uses the right-pointing double angle quotation mark, simplified to raquo. Web designers prefer this symbol over a single arrow because it’s bulkier and easier to notice at a distance. Plus it holds its shape well even at smaller sizes.

One thing I don’t like in this design is the sub-menu arrow style. The arrow icons only appear while hovering a menu item, even though all the other links have submenus too. Good design practices would encourage keeping these arrows visible at all times.

But I do like the simplicity of the TutsPlus design. It’s a perfect example of how tiny little markers can go a long way towards better usability.

Web Design Style Guide

Creating websites is getting more and more complex and is usually not a one person job. It is important to ensure that design is consistent and optimized to meet business objectives and create enjoyable experiences for users.

One of the ways to ensure that team is on the same page when designing separate parts of the website or saving designs from developers is to create design documentation or a web design style guide.

It is beneficial to have a style guide in order to create a cohesive experience among different pages. Also it helps to ensure that future development or third-party production will follow brand guidelines and will be perceived as part of the overall brand.

Luke Clum has touched the surface of using style guides as your first step in web design last year and I would like to take a more in-depth look on how to create a usable web design style guide for your projects.

 

What is a Style Guide?

A style guide is a collection of pre-designed elements, graphics and rules designers or developers should follow to ensure that separate website pieces will be consistent and will create a cohesive experience at the end.

 

Why Is It Important?

It is extremely important when multiple designers are working on a big website or web app to ensure that they don’t interpret too much and don’t alter or adjust styles based on personal preference. In development, having defined elements of the website makes it easy for developers to reuse these elements. Moreover, it can make it easier because they will get what elements they have to code and will see exactly how they need to look from the start.

In order to make developers lives easier, it is the designer’s duty to include all possible interactions such as hover, click, visit and other states for buttons, titles, links, etc.

 

Creating a Web Design Style Guide

1. Study the Brand

First, you need to study the brand so that you understand what it stands for. Get to know the story behind the brand, observe the team and figure out the vision, mission and values of the company. It is important to dig deeper into the brand so the style guide you produce will visually and emotionally represent the organization.

If you’re a designer who can’t code, simply open Photoshop and give your document a title and a short description of what the document is and what it is for.

If you can code, it is better to create an html document with pre-coded assets so they can be easily reused.

2. Define Typography

According to Oliver Reichenstein, typography is 95 percent of web design.

You must get typography right because it is one of the most important communication tools between visitors and your website.

Set hierarchy and identify it. There are headline types: h1,h2, h3, h4, h5 and h6. Then body copy, bold and italic variations. Think about custom copy that will be used for smaller links, intro text and so on. Provide font family, weight and color.

Reviews for Web Designers

A great UX review can do wonders for any website. By looking over the entire design you can learn what’s working, what’s not, and maybe find solutions that can increase the UX and ultimately increase revenues.

But learning how to conduct a review is the first step to solving problems and creating a better experience. In this guide I’ll cover the basics of a UX review and how you can get started running your own.

This does require some background in UX design but it also relies on basic principles of making great websites. If you’re willing to learn and put in some elbow grease then a UX review of your own website can be a great opportunity for growth.

 

Conducting a Review

The goal of a UX review is to comb over an entire site and find spots for improvement. These spots could be obvious or they could be small, but you should aim to improve the site as a whole.

If you’re working on a personal project then you can set the metrics yourself. But client projects require collaboration because you’ll need to know what the company wants to improve.

How you conduct the review and how much information you gather will differ based on the client. Larger businesses can require more information where you’ll need to compile everyone’s goals into one big strategy.

The initial stage of a UX review is about information gathering moreso than anything else. Once you have enough raw data you’ll begin to see patterns, and these patterns can lead to insights for solving the tasks you’re faced with.

Planning Specific Goals

It’s easy to keep asking yourself questions and never really coming to detailed conclusions. But with specific goals you’ll be forced to study certain metrics and try to solve for very specific end results.

Think about the goals you need to aim for and what they mean. A high bounce rate means people leave the first page they enter. But are they on that page for a while? If yes, then they’re probably finding the information they need and leaving.

But what if it’s a landing page? Then people are leaving because they’re not interested. But why? Maybe they just don’t see the CTA button to sign up, or maybe they don’t understand what the page is for.