Make your icons recognizable.
I bet when you look at the three icons above, that three distinct things come to mind in terms of the Internet: home, email and print. These are three examples of universally recognized web icons that can be used in a graphical user interface design within your website. How does something become universally recognized you ask? Exposure, the more you see something visually associated with an idea or something verbal, the more you continue to associate the two naturally within your brain. Our minds have been so constantly exposed to these visual images on the Internet and the purpose they serve, that it has become natural for us to associate the visual image with the functionality behind it.

Use text for support.
If you are looking to use icons that are not universally recognizable, this is a good opportunity to use text for support. The last thing that you want to do is confuse your user within your graphical user interface, prompting them to click all sorts of random buttons, only to eventually get confused and leave your site. “Easy to use” is a key component to a successful graphical user interface design. This is usually accomplished with a simple rollover of the mouse.

The question mark icon is widely used across the Internet, but it doesn’t always mean the same thing for everybody. A “?” to some people may mean Frequently Ask Questions, where as within other graphical user interface designs it may direct the user to the “Help” or “Support” area of the site.

Although the areas are related, they may not be the same across all user interfaces, highlighting the opportunity to support your icon with text.

Always use in moderation.
Although icons are fun and can be visually pleasing, too many icons within a user interface design can become confusing and often times overwhelming. Much like the downfall of a user clicking on an icon where they are unsure of its functionality, if there are too many items to click, users may find themselves being taken to different parts of the site they were not searching for. Keep your icon use in moderation to avoid confusion and it will be easier for visitors to navigate within your graphical user interface. The easier it is to navigate, the happier the visitor will be.

Be creative.
Although your icons should be universally recognizable, it doesn’t mean that your graphical user interface design has to be boring and look like every other site out there! Be creative with your icons while allowing them to maintain their ability to be visually recognizable.

Perhaps your icons have a three-dimensional quality to them or have reflections that appear on the background of the site.

Don’t feel as though you have the throw every bell and whistle that exists at them either. Just make sure they are true to the overall look and feel of your site and your brand identity and they support the message that your website is presenting.

Create a family.
The icons on your site should not only support your overall brand identity look and feel, but should also feel like a family. Use consistent colors, style and treatment for all your icons. Consistency across your icons will help your users recognize them easily and be able to distinguish that they are icons representing a certain function.

Consistency.
It is equally important that your icons remain consistent in functionality. If you are using the same icon more than once within a site, it should always be representing the same function. The same is true in the reverse. If you are using an icon to represent the same function in multiple areas within your user interface design, make sure you consistently use the same icon. As mentioned earlier, consistency across your graphical user interface design will help your users to identify icons/functions that will aid them in being able to easily navigate within the site.

Interested in creating effective web icons for your site. Contact us!

Family resemblance.
Have you heard the phrase “family resemblance”? Think of your brand identity and collateral designs as members of a family. The head of the family is your brand’s graphical manifestation; your logo. Everything that falls below that, such as your letterhead, business card, flyers, and brochures (essentially everything that is embodied as collateral designs of your brand) should share a “family resemblance” not only to your logo, but to each other. You want a commonality between all the elements within your collateral design that identifies them as a family, which supports your overall brand identity.

Finding strength in numbers.
Having a visual commonality between the different elements of your brand identity helps your brand become more identifiable. The more elements that you have within your collateral design that embody the look and feel of your brand identity, the more support your brand will have. When you have too many different elements that do not tie together, or use a multitude of colors without having one common feature to tie them together your brand becomes more obscure. These elements can range from the treatment of your logo, to the fonts you use, to various design elements. People need to see visual relations in order to associate things as related. The more you visually relate your items and the more creativity you use to do so, the more your brand will become more memorable. The ultimate goal here is for people to recognize your look and feel through extension of your logo design. When it works, your logo can become a stand-alone symbol of your brand. Think of the NIKE swoosh.

Target. Enough said.
The more you can reinforce your brand the more successful you will be. Each element, whether large or small, should embody some part of it. Take the company Target for instance. I bet you are already picturing the little red and white target/bulls-eye logo mark that represents their company. This is a pure example of effective brand identity and collateral designs that has helped to expose and continue to support a brand everywhere, from the store sign to their letterhead and business cards to their circulars and television ads. By integrating this one visual element into their various collateral designs, they have built a great support system for their brand that makes it easily recognizable and memorable. They do this through something as simple as a bulls-eye logo design. Every time you see that bulls-eye, I bet you think of Target.

Start a family.
Build a family for your brand and create chatter around your company. Whether it is through something as simple as a green bar that appears consistently within your collateral designs, or the way you treat your brand logo across all the elements. Give your brand a look and a voice and make sure that all your collateral designs inherit those family traits. And don’t forget to give them an environment to live in … every family needs a happy home.

Let us help you get started on creating your brand family and introduce it to the world.

White space is our friend.

If I had a nickel for every time I heard the phrase “it looks like we have a little bit of extra space, so why don’t we add …” I would be a rich woman. In reality, people don’t pay me a nickel each time I hear this and, as a designer, it’s one thing I dread hearing. White space is a designer’s dream. It is not a hole waiting to be filled, but more an area of clarity that directs your eye to the elements of the page that are of high importance. White space helps us design an effective graphical user interface which is crucial to the user experience aspect of a successful website strategy.

White space at the supermarket

Think about page space in relative terms to a physical space such as the supermarket.

When you go to the supermarket for your essential items such as bread, milk and apples, do store managers hide the bread behind the muffins and clump all the variations of apples into one bin for you to dig through to find the kind you want? This would mean spending ten minutes digging through the apple bin only to find that the kind you want is in a completely separate bin buried underneath the oranges, instead of on a clearly labeled display in an easily locatable space. Unless you go to a supermarket on another planet, the answer would be no.

Essential items are placed in key areas around the supermarket with open aisles marked with signs pointing you in the right direction.

The same concept applies to graphical user interface design. When items are placed on a page, with relative space to one another (supported by white space), the viewer’s eye has an easy path around the page to find the items that you want your customer to pay attention to. If it isn’t relevant and of absolute importance on the page, it shouldn’t be there (even if you have a one inch x one inch cube of space in the upper right-hand corner that you think you can squeeze some size seven point font into).

Less is more.

Decide what information is most important and allow a designer to utilize the blank canvas to present that information in a visually engaging way that is digestible for your clients. Ten pounds of groceries do not fit in a five pound bag. Sure, if you squish the bread on the bottom of the bag, break seven out of the 12 eggs in the cartoon and duct tape all the apples to the outside of the bag, but do you really need all those groceries? Essential items are key, and the rest will probably just get forgotten (and moldy).

Hopefully you walk away from this with a new friend—and a little hungry. Interested in learning how to use white space to your benefit in your latest graphical user interface design? Don’t understand why your website’s user experience is failing? Come visit with MicroArts and we’ll help you craft an effective user experience.

Of course, it’s not always that easy. The trick to successful GUI design is to be able to find the right balance between familiar design and really interesting stuff! Effective online branding engages the user. The last thing you want to do is to become bland and boring in the name of almighty consistency.

Using a certain shape, but varying the color or vice versa is a very subtle way to engage users, distinguish between different design elements but still be consistent with functionality. We see it all the time in everyday life-a stop light, for example, where each light is the same size circle, yet conveys a different message.

This same idea can be applied as a directional sense in GUI design to direct users where to go. It can be as simple as using a red button to go back and a green button to go forward. Each circle represents an action to GO somewhere; the color provides the direction WHERE.

Not only is consistency important for the design of an object, it’s a crucial factor in location. Buttons, warnings, news flashes, results, and directional text should always appear in consistent locations. When a user, for example, enters information that is going to yield results, it’s important the results always appear in the same manor and same location to avoid confusion. This directs users to look in familiar places. In fact, they expect to. If the location changes, users may become frustrated searching for information and leave the site altogether.

GUI design as an element of brand design
This brings up one other important element of the GUI design: human behavior. Remember, a brand is more than a design; it’s an experience. So how can you use GUI design to enhance the customers’ experience? We won’t say that Internet users are lazy; but they don’t want to work hard. The more clicks it takes to get somewhere, the greater the risk of losing users to another site. To avoid a lot of clicks, designers need to create the most efficient use of space without overcrowding the page.

In the end, good GUI design makes the online experience as comfortable as possible. The Holy Grail remains a design that remains digestible, directional and yet still engaging. When you find that, you’ve enhanced your online branding greatly.