Color Psychology pt 2

If you haven’t yet, take a look at our first post on colors. This follow-up will focus more on the marketing potential in color and how to utilize that.

First off, you have probably seen a color wheel, but do you know how to utilize it?  These terms may be helpful:

Color wheels are a helpful tool for assembling colors and intensities that complement each other. The hue is the brightest form of the color shown on the outside of the wheel. These are the purest form of the color and are not diluted with any white, black, or grey. Next is the tint, which has been mixed with white for a more pastel version of the same color. Third on the wheel, nearing the center, is the tone, which is the hue mixed with true grey for a more muted version. Lastly, closest to the center, is the shade which is the hue mixed with black for a rich, deep result.

Often in marketing, tints are used for female products while shades promote products geared toward men.

Think of the common colors we see around us. Pink is often associated with confectionary shops, red with fast food, calming greens with bookstores or organic markets, while blue is a common color in insurance companies and banks.

Color’s influence cannot be overstated.

The most important thing is that your design promotes readability. Blunt, complementary colors keep the text from fading into the background without contrast. For images or logos, colors schemes with the central item being the brightest color will focus attention without straining your viewers’ eyes.

Color schemes that consciously direct the eye’s path are often the most successful. For example, a website with a grey background, black text, and some red framing. If you organize the red so that it is associated with buttons, essential elements, and action, readers will be “trained” to recognize the highlighted sections as important.

Color Psychology

Color is a very important tool for conveying tone, encouraging emotions, and connecting with your viewers on a subconscious level. Used correctly, the color tones you use can be harmonious with each other and your textual message. Incorrectly used, colors can repel viewers, clash, and appear in disagreement with your website or blog’s message.

While colors initially may seem self-explanatory due to our societal and cultural cues (blue = sad, yellow = happy, etc), the hues can have deeper contextual messages for your readers. Here are some important color connotations:

Red: enthusiastic, powerful, confident, energetic, protective, exciting, prosperous. Most exercise products and companies use this color to encourage energy and assurance.

colored pencilsOrange: active, healthy, social, friendly, warm, fun. This can be a risky color to choose as a central piece of a logo or background, as people usually have a strong innate negative or positive response to it.

Yellow: communication, mental stimulation, optimism, enlightenment, happiness, creativity. Even though yellow is typically representative of happiness in American culture, in Greece it signifies sadness and in French culture yellow represents jealousy.

Green: soothing, mentally and physically relaxing, harmonious. As a naturally pervasive color, green makes an excellent dominant color in backgrounds etc as we are so accustomed to seeing it around us.

Blue: calming, trustworthy, cooling, intuitive, commitment, stimulates productivity. Like green, blue is common in nature in the sky, oceans, and lakes and provides a connection to the natural world.

Purple: uplifting, creative, calming, royal, mystic, balanced. The color has the connotation of peaceful compromise as it is a perfect equilibrium of two primary colors.

Pink: energetic, youthful, fun, active, confident, passionate. This color encourages friendliness. It appears open-minded, eager, and flexible.

White: purity, clarity, cleanliness, new beginnings, peace, safety, happiness. Used effectively, white can be more than simply a default background. It can emphasize without being obnoxious.

Gray: intelligence, sobriety, calming, efficiency, authoritative, elegant. As a perfect neutral, gray is the ideal background color.

Black: sophistication, confidence, potential, authoritative, weighty, important. While too much can be oppressive and overwhelming, the dark color provides an idea of restful emptiness and the urge to fill it.

Brown: security, responsibility, comfort, warmth. It can be a difficult color to pair successfully, but when used correctly can provide a homey, earth tone.

The next step is knowing how to pair and identify the colors you wish to incorporate in your website, logo, or blog design. Check in soon for a follow-up piece continuing on color selection, influence, and pairing!

Principles of Graphic Design

Graphic design is an excellent tool for attracting attention, delighting your viewers aesthetically, and showing off the creative aspects of your department.  It is easy and fun to play around with designing your own logo, website banner, a letterhead, or an event announcement.  With today’s available programs, it is very possible to produce a professional design that does not hint at being homemade. 

Alias-Marketing-and-Design-Studio-Tallaght-Dublin-Graphic-Design-icon-240x240There are six fundamental principles of design: alignment, balance, contrast, proximity, repetition, and space.

Alignment goes hand in hand with proximity.  It has less to do with making sure that everything is (for example) centered or left-aligned and more to do with keeping the individual elements consistent.  If you have words arranged at a slant, make sure they are evenly spaced and at the same angle.  It is all about keeping organization and order within the separate elements.  If you have elements scattered about the page, carefully ordering them within themselves keeps the whole picture from appearing chaotic.

Balance ties everything together and provides structure.  The placement of elements will distribute the weight across the page.  For example, if you have a large piece in the center of your design, adding a small piece on the edge keeps the visual from feeling lopsided.

Contrast means balancing colors and using them to highlight or emphasis central elements.  The use of color can suggest certain emotions or reactions, make your design pop, and direct the eye to important parts of your message.

Proximity involves arranging elements as to guide the viewer’s eyes from piece to piece of the message in a controlled and thought-out path.  Related elements should be positioned together for unity and continuity.  This means breaking out of linear arrangements and arranging elements of the message in a more stacked or waterfall flow, with visual connection.  Not only is this aesthetically pleasing, but it gives the eyes a clear path to follow.

Repetition creates emphasis and draws attention to certain elements.  In the case of bulleted lists, the repetition of bullets creates rhythm and familiarity.  Repeating a border around sections of text encourages association.

Space is a very powerful element of design.  Graphic design, at face value, might seem to focus on the concrete elements, while the element of white space is merely a background accident.  But careful use of space provides the eye with breathing room, creates a powerful message, and clears out the clutter.  Simplicity is a very potent tool.

Keeping these principles in mind is an excellent beginning as you work on your next design project.

Using Design to Promote Readability

An important aspect of running a blog or a text-heavy website is readability. This is the concept of keeping a reader interested with an understandable flow of progression and alleviated strain on the eyes.    

To start off with, avoid large blocks of text.  These are intimidating and also difficult to read as it is easy to lose your place.  Separate your text out into multiple paragraphs.  This will help ease the intimidation factor of a wall of text as well as provide natural breaks for different topics.  Adding in pictures or graphics (with a buffer border to keep the text from crowding around it) or breaking items into bulleted lists will also provide some white space and metaphorical “breathing room” for the eyes.

An easy way to point out the proper path of vision is changing font size.  A step beyond this, text hierarchy, uses several sizes to differentiate between titles, headers of sections, and the body.  This keeps the text organized and clear.

Bolding or italicizing for emphasis can be a tasteful addition, as long as it is used sparsely and specifically.  Inserting bolded or italicized words creates an invisible category in the reader’s mind, so be sure to keep it consistent.  In other words, if you have been bolding terms that you then define, avoid bolding, for instance, a warning or exclamation, as it will feel out of place to the reader and be distracting.

Emphasizing with all capitalized letters is usually a bad idea.  While it certainly draws attention, it can make the word hard to read and can slow down the reader’s train of thought.  In short titles, all caps can be acceptable.

A fun way to add character and style to your text is through changing the fonts so that, for example, the title is more unique and striking than the body text.  The best way to make sure this is complementary and not distracting is to keep all of the fonts within the same font family.  If your body text uses a sans-serif font (as is typical on the web), look for a title or header font that is also sans-serif.  This is an easy trick for finding fonts that look excellent together.

Your line-length or measure ideally should be between 65 and 75 characters.  Any longer will make it difficult for the reader’s eyes to find the continuation of the sentence from line to line.

Be aware of your audience.  If you need to use a word they might not be familiar with, provide a definition in a non-demeaning way.  A simple rephrasing of the word within parentheses immediately after its use is a safe way to make sure you and your readers are on the same page.

Kerning is the space between specific characters in a sequence.  Letters like “A” “V” and “W” fit well with most other letters, but put alongside each other can be too wide, creating an awkward space in the middle of a word.  This is where kerning comes in.  Most design programs have the ability to adjust pairs one at a time, affecting only the highlighted text.  Before you begin, make sure kerning is turned on in your program’s type preference menu.

Top 7 web design trends you must know for your website

The internet is an ever changing, ever developing platform in which creativity can soar with few boundaries or limitations. As such, web design is also a fluid stage for new ideas and vivid imagination. While this is an exciting concept, it can also be daunting. Where to begin? What is outdated and what is considered modern? Where is the line between eye-catching and obnoxious?

The design for a webpage needs first and foremost to convey the intended information. If a font is perfect for your site’s playful attitude, but is difficult for the viewer to read, then it is not doing its job. If the colors grab the viewer’s information, but go against the mood you are trying to set, the design is going to be counterintuitive.

Web design trends change quickly and can be difficult to keep up with. We’re here to help! Here are some of the most popular trends we are seeing in web design:

Long scroll UI patterns provide a natural path for the eye to follow and allow the designer to decide the most beneficial order to convey information. It is an easy interface for the user to interact with and encourages viewers to look at the entirety of the website as the design naturally sparks curiosity.

Creative animations for loading, hovering, hidden navigation screens, motion action, galleries etc. Animations draw the eyes and hold attention. They have the benefit of keeping a viewer interested while waiting for loading, encouraging the eye’s path along a page, and generally making formerly static images more interesting and engaging. Additionally they add personality and an opportunity for creativity.

Micro-interactions engage the user and affirm their actions. It helps the users see the results of their actions, engages them in communication, and can provide tips for maneuvering. Ideally these interactions occur seamlessly and without distracting from the information provided. Simplicity is key.

Card design is growing more popular as the use of Pinterest sky-rockets. The interface is familiar, easy to use, and an excellent way to display a large amount of information in an organized and aesthetically pleasing manner.

Cinemagraphs are the classier version of GIFs, bringing static pictures to life with minimal motion. These pictures have fewer limitations than GIFs and are less distracting and more mature.

Bold typography makes a quick and effective statement about your website’s mood and focus, while establishing your site as modern and unique. Even websites that are strictly focused on business benefit from eye-catching typography. With web fonts becoming more widely accessible, web designers are becoming bolder, making full use of the available tools.

According to Forbes, Natural stock photography use in web design is on the rise. Pictures are a classic method of catching attention and creating a connection with the viewer. But typical stock photos are boring and easily dismissed. Eye-catching, awe-inspiring, and amazing is “in.”

2015 was an exciting year for web development and creative new designs. It is thrilling to think of what 2016 will hold!