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!

Optimizing Images for Websites

Images are an essential element when it comes to grabbing readers’ attention and breaking up long paragraphs of text. Images educate, emphasize, and elaborate. The more images used, however, can gradually slow your browser’s speed, increase the size of your pages, use up storage on your server, and ultimately increase the page load time for your visitors.

The answer is optimization.

The first thing to pay attention to is the image format. Most images will allow you to save them in various file picturesformats. Typically JPEG or PNG are used for the web. JPEGs are prime for photographs as they compress the colors well and don’t lose quality. PNG works better with screenshots or graphic images. Because of PNG’s higher compression quality, however, those files will be larger. Sometimes this payoff is worth it for the clear quality. Even though GIFs are usually used for animated files, the format also can be used for low-quality pictures with few colors or smaller files. Avoid putting larger pictures in GIF format, as this usually significantly reduces the quality.

Another aspect to note is which category the image compression is: lossy or lossless. A lossy compression loses quality while taking up a small amount of space. Lossless gives you the exact quality of the original image but uses a greater amount of memory.

JPEG = Lossy

PNG = Lossless 

GIF = Lossless

Most graphic editing applications allow you to save your image for the internet, usually labeled something like “save for web & devices.” You want to select the lowest size possible without losing image quality. Try to keep your images under 70kb.

Decorative images such as buttons, banners, and borders can take up more space than you can afford. Avoid this by putting simple patterns in GIF or PNG-8 format to reduce the overall size. Look for areas where you can replace pictures (such as colored sections or backdrops) with CSS styling. Are you using a wallpaper background image? Try playing around with the size. There is usually a bit of wiggle room between how much you can decrease the size before it starts visibly decreasing the quality as well. A neat trick is to crop the center of the background image out or replace it with a filled color. This will reduce the size considerably and, as long as the content covers the center, your viewers will not notice a difference!

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.