Home

6. Color Gradations Add Appeal

Leave a comment

Color gradations can be better than solid colors for page or section backgrounds. Fading means the transition from a color to a lighter color or tint of the same color, or to a darker color or shade of the same color. (Tint: a color mixed with white in greater or lesser amounts.)(Shade: a color mixed with black in greater or lesser amounts.)

Tinting or shading a color gradient are the same concept, just a matter of direction. In one direction you’re shading the starting color darker, in the other direction you’re tinting the starting color lighter.

Blues and grays are the most common backgrounds to fade, although any color can be used. The background color must match the theme of the site, and follow Color Theory as described in Section 5.

Here’s two examples of fades, the first from white to light blue, the second from light gray to white.

Of course, fades don’t have to start or end in white. Fading from a light gray to a lighter gray is common and is a nice look. Fading from a blue to a lighter blue can also look elegant. There’s no hard and fast rule for when to fade and when not to fade; experimenting with different looks will help choose what looks best.

Here’s the same two swatches from above, but instead of white a lighter blue or lighter gray is used. This is a more subtle change, yet still gives a pleasant look and feel.

If the initial design for a UI results in it looking spartan, adding a fade to the background can give it some flair.

Another technique is fading from one color to another, known as a blend. Blending from a color to a gray gives a nice look, but care must be taken to match the tint or shade of the color to the proper tone of gray.

Green

This concept can be used when gray is part of the website theme, part of the look and feel of the site. Adding a gray blend when the gray is not otherwise utilized adds a random color into the site’s theme and can look jarring.

Blending from one color to another is tough to pull off. They can be great for certain websites, however for desktop apps this is way other the top. If you have a great sense of color and follow the Color Wheel accurately, you can achieve a nice look. It’s tough to pull off though, so if you’re just starting in app design, leave it alone.

Here’s a couple of examples where fades have been used to good effect on websites. Note that these are not apps, however they show the use of a faded background to make the page easier to read and add an aesthetic.

Advanced applications of the fade are demonstrated with these two images:

The sky background uses the fade principal to great effect, going from blue to white. The ocean image uses blue and a turquoise-blue, two different but closely related colors, fading from dark-to-light blue on top, then a transition with the beach and a very slight fade of the crystal clear water. Very eye catching, not boring, and can make a website pop.

Important Note: It’s very unusual for an app to use images for a background, as the use of an image is to capture interest and attention for a marketing purpose, to get the viewer to interact with the site.

An app typically requires the user to perform functions and you want to focus the user’s interest and attention on the actions to be performed. Using a simple color gradation adds an aesthetic without pulling attention away from the functional aspect of the app. These image examples are used to illustrate how color gradients are used for both apps and websites.

Here’s another color gradient with the ocean and sky, staying in the blue theme entirely. Both the sky and the water lighten as you move towards the center. This use of a color gradient in an image really focuses the viewer’s eye on the center of the page.

Ocean2

Applying the image version of the color gradient to a website, it really makes the site pop and focuses the viewer’s eye right where you want it.

PicLens

Notice that the background has a gray fade going on, while the image uses real-life elements of blue to white from left to right to lend dramatic effect with the powder (snow) indicating action and excitement, and the vivid blue sky, which has its own dark to light gradient going from top to bottom.

The image banner really works, and the subtle gray gradient in the background adds a pleasant element.

Wix.com has this website template ready for use. It uses color gradients and different shades of blue with the ocean to make the image interesting. It captures interest and certainly conveys an idea to the viewer! Notice that the insert is in a green, a cross between the green vegetation on the land and the blue of the water, without resorting to turquoise.

Wix

Somebody has been paying attention to Color Theory, keeping the website theme constant on the page. Not only does this showcase the color gradient, it’s an excellent example for Section 5 as well.

While the images are an advanced application of the use of color gradients, notice how the color gradient works in them, adding visual appeal for the viewer.

Advertisements

5. The Use of Color

Leave a comment

Companies often have a color associated with them. The company logo has a predominant color and this color is carried through their branding. Take the Green Bay Packers, the green and gold is nearly synonymous in the minds of football fans with The Pack. Their website uses the green and gold theme in the design of their website to good effect, with titles and fonts, highlights and backgrounds, adhering to the theme. The use of images that showcase the green and gold as well is a subtle but effective application of this principle.

Packers-a

Antivirus software apps follow the color theme of the company. Symantec and Norton products use gold and dark brown (or gold and black) in their website and in their app. Kaspersky uses green. Trend Micro augments this and uses red and white, with complementary colors to highlight.

Use colors that complement each other

If you have no sense of “color style,” use a color wheel to get complementary colors (ref: Color Theory)

Some people have no sense of color. You’ve seen them—images of guys who should let their wives choose their wardrobe spring readily to mind.

For the layman, there is a tool known as a “color wheel” that displays the spectrum of colors. Googling “color wheel” or “color theory” will bring up numerous references on how to use the color wheel to choose the correct that complement each other. Several references are listed at the end of this chapter and more can be easily found online.

The wheel on the left shows the 12 major colors, called hues. The wheel on the right shows the infinite gradations blending from color to color (hue to hue).

You can also have “flavors” of a color. Starting with the standard hues, going to lighter or darker colors is defined by the following:

  • A tint adds white to a color
  • A shade adds black to a color
  • A tone adds gray to a color

The wheel on the left shows the range of tints—amount of white—in a color, with gradations from pure white to the solid hue. The wheel on the right shows the twelve standard hues with the respective tints, shades and tones.

The Color Theory charts discussed in this write-up identify what combinations of colors can be used together. In addition, you can use tints, shades and tones of a hue with the pure hue with good effect.

Certain combinations of colors are pleasing to the eye. These combinations have been codified into rules, called relationships. These rules can be found by searching “Color Theory” and “Color Wheel.” Knowing and using these rules will yield color combinations that customers find pleasing. Combinations of colors that are different than the rules are jarring to the eye.

When you select a color and theme, follow the color wheel to select your complimentary colors.

Using colors in your app from the wrong combination(s) will produce a UI that, when viewed by customers, will not be accepted and even worse, rejected and not purchased or used.

Using colors with conflicting tints, shades or tones can also result in visual displeasure. For example, orange and blue are complementary, according to the chart. But a dark blue with a light orange isn’t quite as pleasing, or a dark orange with a light blue. When using tints, shades and tones, first match the colors according to Color Theory, and then use the same level of tint, shade or tone with all colors.

  • Seth Wilson has a couple of great charts on Color Theory. Google “Seth Wilson Color Theory” to find copies of his charts, as well as related references.
  • graf1x.com has interesting information on the history of the color wheel and sells posters.
  • inkfumes.blogspot.com also has information and a source for Color Theory posters as well.

The main point of this chapter is that COLOR is important, using color consistently throughout the app is important, and the various colors used need to be coordinated. Following Color Theory will help you coordinate your colors in a way that is pleasing.

This chapter is by no means a complete tutorial on Color Theory! It points you to Color Theory and emphasizes the importance of following it. It works.

©2017 Curt Larson. All Rights Reserved.

4. Use Space as a Border and Separator

Leave a comment

Point #4 in the 12 Principles for Creating Great User Interfaces addresses a second way of using space to great advantage.

Using space between objects acts as a visual separator or border between them and works to emphasize the items. The lack of other “clutter” makes the images and text stand out.

Apple uses whitespace on their website to great effect. There are no lines separating sections on their webpage—the closest they come to a line is a light gray shading, a shadow that is almost invisible.

Point #3 addresses whitespace as a background. Point #4 emphasizes space instead of lines or borders around sections. Grouping elements together, and then grouping other elements together, with space between the two groups, gives an uncluttered look. You can see the use of space in the examples in the previous section.

Apps have more info gathered into a small space, even if it’s a browser- based UI with scrolling capability. Space between objects and text is cleaner than a line border or box and can be used to great effect. Consider using it in your app design.

I’m a car enthusiast (aka car nut) and I’ve owned a few BMWs. There’s an aftermarket parts company, Bavarian Autosport, that does on nice job on their site of using space between the different sections. It’s basically an on-line catalog and it’s a clean layout.

They have enough space between the various elements in the header, menu bar, vehicle selection section, and the catalog listings. The site is easy to read, easy to use, the eye can easily find the important info on the page.

Some might say it’s not sexy, but it works very well and is a good example of both the use of whitespace for background and space between objects.

Bavarian Autosport: http://www.bavauto.com

cropped-afsa-2014-4xc-125h  ©2017 Curt Larson. All Rights Reserved.

 

3. The Use of Whitespace

Leave a comment

Apple is famous for their use of whitespace on their website for good reason—it works! Whitespace sets off the objects and text on top of it, giving them greater emphasis and clarity.

Other colors can be used but you must maintain SIMPLE with your design.

For apps, white can be too plain and apps need framing and background besides the Windows border to work visually. Light grays work well as a backdrop for apps. Darker colors work well for navigation bars, title bars, headers and footers, contrasting with a white, light gray or light color body background.

When using other colors as a backdrop to create space and achieve a similar effect, particularly with apps, it requires more skill and color coordination. White works with anything, while a color background must be coordinated with the other colors. (This is described in detail in principle #5.)

Darker colors can also be used for background but care must be taken to prevent overwhelming the eyes with the background color. Apple has gone with a black background for the iPhone 7 webpage, giving a very dramatic look. It’s harder to make a dark background work but when done well, makes the page distinctive and stands out from the crowd.

Samsung has taken their cue from Apple and made their own distinctive page. It’s not quite as “clean” as the Apple site, but it does use white space and black background to good effect.

Sony, on the other hand, has embraced more of the Metro look and placed a number of images in a tiled arrangement. The page is a lot busier and crams a ton of sensory input into a given size.

The advantage of whitespace is it highlights, emphasizes and helps to focus the attention on the important elements on the page. With a page like Sony’s, every element is competing with every other element for attention. While exciting and visually stimulating, if this was an app it would be confusing to use.

The Sony page is more like a dinner buffet–everything is presented at once and in bulk and the user must sift through all the info to pick what he wants. Apple’s site moves the user through from beginning to end, clearly presenting each concept so that the user understands it. It’s like a five-course meal at a nice restaurant, where each course is presented to the customer and the visual appeal adds to the experience.

With an app, the page needs to focus the user’s attention on the actions the customer needs to take, and move the user through a sequence of actions or thought processes, with the end goal of the user easily doing the action (or actions) required.

Whitespace helps. When executed well, it adds an aesthetic quality, focuses the user’s attention properly, and separates distinctive elements or sections smoothly.

iPhone 7 page (black background): https://www.apple.com/iphone-7/

iPad page (white background): https://www.apple.com/ipad/

Samsung Galaxy page: http://www.samsung.com/us/mobile/galaxy/

Sony page: https://www.sony.com/

©2017 Curt Larson. All Rights Reserved.

2. The Importance of Aesthetics

Leave a comment

Much can be written about aesthetics and defining what constitutes an aesthetic look and feel. The condensed version is this: aesthetics are pleasing to the eye and elicit a warm reaction. Aesthetics are critical to customer acceptance.

Most people cannot describe or define what makes a UI look good. However people do respond well to aesthetic layouts, and react with difficulty, confusion, a slight frown, or other lesser reactions when the aesthetics are off-kilter.

As a comparison, people often object to loud music. Closer studies show that the distortion present in poor quality sound systems contributes to the objection and when the sound quality is clear a higher volume can be tolerated (for music not to the taste of the listener) or enjoyed (for music the listener actually likes!) .

In the same vein, the visual aesthetics of an app or webpage contribute to the user experience and their positive reaction to what they’re working on. UIs that have good aesthetic qualities elicit positive customer reactions and greatly contribute to the success of the product.

There are three parts to aesthetics that must be considered and they work in concert with each other:

  1. Balance
  2. Harmony
  3. Color

Balance

Balance is how well items are arranged on the page. Top to bottom, left to right, there’s an evenness and a logical order to how the page is laid out. Don’t overload content on one side of the page with very little on the other.

If you’re showing images with text to one side, be consistent: all text on the left and all images on the right (or vice versa), or switch text-left/image-right with image-left/text-right and follow that pattern.

Don’t cram content together. Don’t overload any section with vibrant color or a “heavy” image while other sections have lighter images.

The exception to this is when you’re deliberately focusing attention with a vibrant color, font or image. When you’re purposefully focusing attention, following the relevant UI Design points contributes to a positive customer reaction.

Harmony

Harmony is how well everything works together. While color impacts harmony, we’re really addressing how well the elements work together. Elements are similar in size, shape and appearance.

Elements can also be complementary in size, shape and appearance. For example, there can be a banner image that spans the width of the page. Then the page itself is in two columns below that, with images contained within each column the same size.

Don’t mix and match sizes of graphics. If graphics are different sizes, have them be the same ratio of bigger or smaller, such as 100%, 75%, 125%. Or 100%, 67%, 33%. The eye notices these ratios. DON’T have a second image at 75% the size of the first, then a third image 112% the size of the first. This is subconsciously jarring to the viewer.

Whether they are similar or complementary, the elements work together in a consistent, orderly and pleasing fashion.

Icons are similar. Text boxes or data entry fields are the same height and length, or in a couple of lengths. Proportions match. Artistic design is consistent throughout the page—rich, vibrant images are not interspersed with water color-type images (unless you’re showcasing an art gallery). There’s no jarring impact from elements on the page. Rather, all the elements work together, they’re in harmony.

Color

Color is so important that it’s discussed separately in more detail. The overall sense of color and interplay of color conveys an aesthetic. The use of color works in conjunction with a balanced page and a harmony of elements on the page to create an aesthetic.

You have to work all three elements together: balance, harmony and color, to achieve a great aesthetic.

cropped-afsa-2014-4xc-125h ©2017 Curt Larson. All Rights Reserved.

1. KISS–Keep it Simple, Stupid

Leave a comment

The simpler the UI, the better. Put the main stuff on the first page, move the lesser-used stuff to other pages. Make the pages straightforward and easy to read.

The layout itself needs to be simple. Organization of the page is important. Group related content together with a logical flow from left to right, top to bottom. When looking at a website or an app, our eyes go towards the center upper first, then upper left, followed by moving to the right and scanning down, unless there are compelling images or attention-grabbing elements on the page. Perhaps it’s our years of reading, left to right, top to bottom, and those habits continue when looking at software UIs.

Make use of that natural tendency when you arrange content on the page.

Don’t overload the page with content—too busy is daunting and causes the viewer to withdraw. Always strive to make the page look simpler, cleaner, easier to understand.

“Make everything as simple as possible, but not simpler.” –Albert Einstein

And just like the title says, this post is simple. Make your UIs simple.

©2017 Curt Larson. All Rights Reserved.

The Twelve Principles of Great UI Design

Leave a comment

The sub-title of this series of blog posts addressing UI Design is: “Creating User lnterfaces for Applications That Are Easy to Use, Look Good, and Drive Customer Adoption.”

The twelve principles of UI Design focus a designer’s or developer’s efforts towards these three points:

  1. Easy to Use
  2. Look Good
  3. Satisfy the Customer

That’s what you’re trying to achieve, and if you create UIs that are easy to use, look good and satisfy the customer, you will drive customer adoption. So that fourth point is really to not only satisfy the customer, but to get that customer or potential customer so satisfied that they will buy and use the product–and the word-of-mouth creates a tsunami of growth.

Thus the three points become:

  1. Easy to Use
  2. Look Good
  3. Drive Customer Adoption

That’s WHAT you want to accomplish. HOW to accomplish it, that is the six million dollar question!

And thus we have twelve principles of UI Design that, when followed, result in killer User Interfaces that ARE easy to use, look good, and customers buy it. In volume.

The Twelve Principles

  1. KISS—keep it simple, stupid.
  2. A sense of aesthetics.
  3. White space is good for background!
  4. Use space as a border and separator
  5. Consistent color theme
  6. Color gradations add appeal
  7. Ergonomics: Functionality wins!
  8. Alignment! Alignment! Alignment!
  9. Organize the page into logical groupings
  10. Keep fonts in a similar style or family
  11. Have actions clearly visible to execute
  12. Shade alternate rows or columns with a light hue of the main color.

I’ll cover each of the above points in much more detail in further posts.

 

©2017 Curt Larson. All Rights Reserved.

Older Entries