Astagram Studios- A Creative Studio- Official Blog

Beginners Guide to Using the Power of Color in Web Design

2010-05-19T13:56:10Z

Good color choices should never be taken for granted in web design. A bad color selection or combination can have the same negative effective as poorly layed-out content or can create the same frustration as an excessively slow loading page. So, underestimate the power of color at your own peril.

Even with a myriad of colors, the chances of stumbling into good a eye-pleasing color by mixing two or more together are very very slim.

To help make a good color selection or arrangement, the situations when two colors are in a harmonious combination have been split into six color categories or schemes. They are: Monochromatic, Analogous, Complementary, Split Complementary, Triadic and Tetradic.

In this post we will take a look at each, and highlight some effective examples of there use within web design.

1. Monochromatic Color Harmony

As the name dictates, this calming color scheme uses only a single color as a base and allows its various shades, tints and tones to be included with in its palette.

← A Monochromatic Color Harmony or Scheme

Using monochromatic harmony expresses unity and and instills elegance, while at the same time is neither powerful or bold enough to to allow you to focus on any particular aspect of the design (due to its lack of color contrast).

Here are some beautiful examples of Monochromatic Color Schemes within web design:

1.1 Loewy Design

1.2 TagDiri

1.3 WilsonMiner

1.4 nclud

2. Analogous Color Harmony

Analogous color schemes are basically made up of colors that are directly next to each other on the 12 point color wheel.

← An Analogous Color Harmony or Scheme

Compared with the monochromatic scheme (above), the analogous offers more nuances, but suffers from the same defect – a lack of color contrast.
To use this scheme effectively, you have to choose one dominant color, a second to support and lastly a third color, that is used as the accent, which will give your web design a dramatic impact.
It is also recommended not to use too many hues and avoid the combination of cool and warm colors.

Here are some examples of Analogous Color Schemes within web design:

2.1 ustvarjalko

2.2 Ecoki

2.3 Outlaw Design Blog

2.4 Whooray Records

3. Complementary Color Harmony

With complementary color schemes we finally have recipe for good color contrast.

← A Complementary Color Harmony or Scheme

This scheme basically uses two colors located on opposite ends of the color wheel (such as, red is opposite of green and orange is opposite blue…meaning they are complementary…).

Due to the huge effect and power of the contrast, web designers will choose one domintant color (usually the background) and another to highlight the most important elements of the page (the content).
Any shade or tint of a color can be used in a complementary color scheme, but desaturated colors should not be used, as you will lose positive contrast and the sites overall impact will greatly decrease.
Such as red is opposite of green…meaning they are complementary.

Here are some examples of Complementary Color Schemes within web designs:

3.1 Gobierno Federal Mexico

3.2 Douglas Menezes

3.3 Frenzy Labs

3.4 Blogger BakeOff

4. Split Complementary Color Harmony

To ease the contrast of the two colors from the complementary scheme (see above), split complementary schemes use a combination of three colors.

← A Split Complementary Color Scheme

They are formed by combining a primary color from the color wheel with colors on each side of its complement. (Or, in layman’s terms, in the formation of the letter Y).

Here are some examples of Split Complementary Color Schemes within web designs:

4.1 Apps Templates

4.2 PSD Chimp

4.3 Nuances Communication

5. Triadic and Tetradic Color Harmony

Triadic Color Scheme
As its name suggests, triadic uses the power of three colors which are situated at 120 degrees from each other (these points are determined by an equilateral triangle) on the 12 step color wheel. There color harmonies tend to be bold and vibrant, even if you choose to use pale or unsaturated versions of the original hue.

← A Triadic Color Scheme or Harmony

This harmony could be considered your best color scheme option, with its effective contrast. You could use one color for a background and the two remaining for content and the highlighted areas. The colors should be carefully balanced – let one color dominate and use the two others for accent.

Tetradic Color Scheme
Yes, you have guessed it, tetradic uses a combination of four colors, determined by a square or rectangle placed over the color wheel. To create different harmonies, the square or rectangle can be rotated, which will result in the creation of a new harmonious tetradic schemes.

← A Tetradic Color Scheme or Harmony

In a logical deduction this scheme has the greatest number of combinations, it is based on two complementary pairs. This can be a double-edged sword though – it does offer the biggest option of color, but can give problems for good harmony. Be very carefully when choosing these colors.

Both of these (triadic and tetradic) color combinations are difficult to interpret, most websites will use a combination of four colors based on these color schemes, making it difficult to highlight with examples. Throw a stick into the the deep recesses of the web, and the chances are you will wind up hitting a site with either a tiadic or a tetradic color scheme.

About the Author

This article has been written by Daniel Pintilie a freelance writer working for Go-Gulf, Dubai based web design company that provide web design solutions in the Middle East.

Negative Space in Webpage Layouts: A Guide

2010-05-19T13:51:45Z

Negative space is often misunderstood as a tool to implement in certain designs that call for a simple aesthetic.

However, it is in fact something you should pay attention to and carefully structure in every design you create.

This guide discusses what negative space is and how to effectively use it to analyze and improve your designs.

What is Negative Space?

Negative space, also known as whitespace, can be loosely defined as the area of a page not occupied by content. More appropriately, it is the space between specific items on the page.

Negative space does not have to be white, or even solid in color. It can contain gradients, patterns or background objects.

In the example below, you’ll see that it contains complex graphical content, yet it still employs negative space between the headline and the search bar.

Negative Space is Not Minimalism

Contrary to popular misconceptions, proper use of negative space has nothing to do with minimalism.

It is true that minimalist designs are characterized by lots of negative space, but even the busiest of designs implement negative space either effectively or ineffectively.

Why Does Negative Space in Web Layouts Matter?

There are no absolute rules that separate good designs from bad ones. However, there are plenty of rough guidelines and general principles to follow in the quest for a strong layout.

Designing a webpage layout involves taking diverse objects and arranging them in an attractive, logical, and functional manner.

The key concept to remember is that designing a webpage layout goes well beyond the attractiveness of the design elements you use. You can feature beautiful artwork made by the most talented artists in the world and still have an poorly-designed and unattractive web design.

Just as important as the aesthetic of the elements is the physical space being occupied by each element in relation to other items on the page.

If you’ve never properly studied design theory, then you probably intuitively position objects without really knowing why you’re doing what you’re doing.

However, as with many skills, if you want to improve, you should work on turning your intuitive ability into explicit knowledge. This will help you power through design ruts and identify what is and isn’t working in a particular layout. It will help you rationalize why things are they way they are.

You must learn to logically analyze both complex and simple arrangements of items, and identifying and using negative space is the key to this discipline.

Learning to See Negative Space

To use negative space effectively, you have to retrain your brain to look not only at the content on a webpage, but also the inverse of the content.

The old cliche example is the wine goblet/faces illustration below.

You can trick your brain into making two distinctly different interpretations of the image. You will either see a wine glass or the faces of two people looking at each other.

Negative Space in Logo Designs

Many logo designers have mastered the use of negative space and have utilized the concept for decades to create some excellent visual double entendres.

Perhaps the most famous of these is the FedEx logo with its hidden arrow between the “e” and “x”.

One of my favorite examples of this kind of logo design is the superb logo below that features a mix of both positive and negative shapes to create a golfer and the head of a Spartan.

The examples above are merely meant to get your brain ready to begin thinking about negative space instead of focusing on the content.

In webpage layouts, the negative space is rarely used so cleverly and pertains more to the simple spacing between objects.

Simplifying a Design to Basic Shapes to See Negative Space

The easiest way to master the art of seeing and using negative space in webpage layouts is to simplify your layouts to basic shapes and examine the spatial relationships of the objects.

For example, let’s take the design below and apply this method to it.

To eliminate all unnecessary distractions, we’ll convert it to black and white and reduce all of the objects to simple rectangles.

Now we can quickly and easily make clear mental distinctions between content and negative space.

Remember to focus on the shapes that the white areas are making in addition to the black areas. A strong layout is subtle and it’s all in the gaps.

As you can see, this design actually uses very little negative space. Never let anyone tell you that this is a bad thing. Good layouts are not defined by the amount of negative space, but by the distribution of it.

For example, notice how the complex design above has a carefully structured volume of negative space between objects. Unique objects have been given similar spacing, while groups of objects have been placed closer together. This is the concept of proximity.

Simply put, if two items on the page belong together conceptually, place them closer to each other than to other objects.

Visually speaking, if the objects on the page are equally spaced, it’s the items that break this trend that will stand out.

Again, this may seem a bit obvious, but the key here is to really start paying attention to these concepts in your own designs.

Analyzing and Improving Negative Space

Now that we’ve outlined a method for simplifying a design, let’s apply this technique to see if we can improve a layout.

I was recently asked to critique a design that would be a perfect example. When I told the designer that I liked his design in general, but thought that his use of whitespace needed work, he was quite confused as to what I meant.

To illustrate, I’ve recreated the basic layout below.

This is a perfect example of why filling your designs with lots of whitespace isn’t always a good idea. The layout above utilizes tons of whitespace — so much so that the designer didn’t know what to do with it all.

Let’s break this down using simple shapes like we did with the previous design.

As you can see, this makes it really easy to spot troublesome areas. Nearly everything on the page is distributed oddly. There are large, unequal gaps that distract your attention rather than refocus it. Additionally, many elements are crammed too far to one side of an area, creating an asymmetric design.

The designer was no doubt attempting to replicate a layout that he’d seen before, but failed to apply any sort of logic to the spacing of the elements.

What’s Wrong with It?

Let’s take a look at some of the problems with the negative space in this design.

The diagram above points out just a few of the problems with this layout. As you can see, the objects in the header are misaligned.

Also, the negative space between the top of the page and the bottom of the header is too large for the sparse elements that it contains.

Furthermore, the screenshot (on the right of the layout) seems oddly small in its space.

There are strong arguments for surrounding an object with whitespace to better draw your attention to it, but this technique just isn’t working in this case as the page is too complex for this to work effectively.

Finally, the headline and sub copy aren’t aligned with the logo at the top left and could use some size adjustments to make better use of the space they’re in.

Fixing the Problems

Keeping your design in a basic wireframe, adjust the size and positioning of the elements to address the issue outlined above.

Try to pay close attention to gaps all across the page that should be similar in volume, and break this trend when you’re using proximity to visually connect distinct elements.

Here we see a much more logical distribution of negative space. The header area has been reduced and the elements within centered vertically in the space.

The screenshot and headline have been enlarged to eliminate awkward gaps and give the page clear areas of focus.

The area under the sub-copy was looking a little empty, so an element has been added here to help eat up the space (notice in the screenshot below that this creates functional benefits with the addition of a button).

Here’s what the example looks like when we apply our changes to the actual layout.

More is Not Necessarily Better Than Less

Notice that the negative space on the page has actually been decreased overall.

Don’t misinterpret this as an argument that less negative space is always a good thing, there are many cases where the opposite is true.

Effective use of negative space is not a matter of quantity (e.g. “more is better than less”), it’s a matter of proper utilization.

Many discussions of negative space often wrongfully focus only on situations that call for an increase in negative space and tend to pitch minimal layouts as a miracle cure-all for bad design.

In reality, improving your layouts means analyzing the current amount and appropriateness of the empty space in your design, and then deciding which areas have too much and which areas have too little.

Negative Space in the Wild

To conclude our discussion of negative space in webpage layouts, let’s take a look at a few sites that use negative space in completely different ways to accomplish a particular aesthetic.

Wide, Open Spaces

Designs that properly use lots of solid negative space typically appear classy and upscale. Simple, uncluttered layouts make the content easy to sort through visually and are ideal for highlighting a specific area of the page such as a product shot or JavaScript slider.

100% Organic

Not all whitespace is strictly structured to conform to the guidelines above. Organic designs specifically break these rules to provide a sense of natural randomness to the design. Remember to look at the gaps and not the content. The designs below are characterized by irregular spacing and sizing of the objects on the page.

This method tends to come across as informal or even fun and is particularly well suited for sites with lots of illustrations.

Busy Space as Negative Space

Some designers fill every nook and cranny of space with swirls, text, complex artwork and other random elements. If you look closely, you can see that the page still contains an underlying structure with primary content and plenty of negative space.

The difference is that the negative space has been disguised with intricate details to add visual interest to the page.

Negative Space in Grid Layouts

The last type of layout we’ll look at uses strict whitespace distribution. Grid-based layouts eliminate most variations in the sizes of gaps between elements.

This is ideal for organizing lots of content in a fairly small space in a regular and systematic manner.

Closing Thoughts on Negative Space

To sum up, negative space isn’t something to pull out of your bag of tricks. It’s a major feature of every design that largely determines how a page is read and what type of impact it has on the viewer.

Learning to see and use negative space is the key to creating strong, consistent layouts with clear visual hierarchies.

About the Author

Joshua Johnson is a Graphic Designer/Web Designer with over six years of experience working with a major international marketing agency. He is also the Editor of Design Shack, a web design and development blog. Check out his recent work and follow him on Twitter: @secondfret.

21 Adobe Air Apps For Designers And Social Media Addicts

2010-05-17T16:10:35Z

Adobe air apps are just simply great it enables any one with knowledge within ajax, Flash, JavaScript and HTML to be able to create a desktop widget, which can be created to be compatible with a range of different operating systems. This article I’ve compiled is 21 great Adobe Air Apps for Designers and Social Media Addicts.

Colors and Patterns

1. Color Browser

This application is a simple way to create and organize your favorite color palettes.

2. Kuler

New! Import kuler themes directly into Creative Suite 3 Illustrator, InDesign, and Photoshop. Select Save Theme menu to learn more. Color inspiration. Browse and search color themes from kuler (kuler.adobe.com), an online application to create and share color harmonies.

3. Color Lovers

You can use the Desktop Color Finder to search our entire database of nearly 1 million named colors and more than 300,00 user created color palettes.

4. Contrast-A

Contrast-A allows users to interact with a 3-dimensional RGB color space, experiment with color combinations, check the contrast according to both WCAG 2.0 and 1.0 and see the results for different types of color deficiency

5. Color Picker

colorPicker is a widget-like AIR application that lets you either choose a “web-safe” color from a color grid or design a color using sliders to adjust the red, green, and blue values of the color.

6. Random Patter

Easy app that renders patterns based on given parameters. Rendered image can be used as a base of a mosaic.

Design Air Apps

6. Xe-IMG Image Editor V3

Import .jpg .png .gif .swf and URL-extern Photos supported – Zoom Photo, Mask Image supported – Filters Sharpen, Enhance, Embossing supported

7. e2vector illustration application.

e2vector is an illustration application with powerful features such as layers, masks, pen-tool, gradient, undo-redo, SVG import and export, path splicing, shape union and intersection, etc.

8. Splashup Light

Splashup Light is an image editor tailored for those that want to enhance, beautify, or merely play with their photographs. Effects include Levels, Contrast/Brightness, Hue Saturation, Text Editing and Shapes and much more

9. Fractal4D

A really great design adobe air app which is easy to use and enables you create some really cool stuff.

10. JustResizeIt!

JustResizeIt! introduces a brand new way of resizing images – just drag and drop them!

10. Dot3D

Dot3D is an Adobe® AIR™ application that lets you view a 16×16 pixel picture in 3D. You can freely draw, rotate the picture on the canvas, and save it to your desktop as an image file in PNG format

11. Web Kut

WebKut is an AIR application that allows you to capture web pages, or parts of them in a very simple way.

12. Pixus

You can not only measure the screen object size with easy. With browser skins, overlay mode and screen size presets, you can also preview how your design will look in the real environment.

Icon Generators

13. Quick Icon

For developers who want to have nice icons easily but don’t have any designer for such.

14. Icon Generator

Icon Generator is a little application that lets you generate a CS3 or Web 2.0 style icon, only 3 step. Pick color, type characters, and save it. Just create 4 different sizes of the icon.

Astagram Studios- A Creative Studio- Official Blog

Beginners Guide to Using the Power of Color in Web Design

1. Monochromatic Color Harmony

1.1 Loewy Design

1.2 TagDiri

1.3 WilsonMiner

1.4 nclud

2. Analogous Color Harmony

2.1 ustvarjalko

2.2 Ecoki

2.3 Outlaw Design Blog

2.4 Whooray Records

3. Complementary Color Harmony

3.1 Gobierno Federal Mexico

3.2 Douglas Menezes

3.3 Frenzy Labs

3.4 Blogger BakeOff

4. Split Complementary Color Harmony

4.1 Apps Templates

4.2 PSD Chimp

4.3 Nuances Communication

5. Triadic and Tetradic Color Harmony

About the Author

Negative Space in Webpage Layouts: A Guide

What is Negative Space?

Negative Space is Not Minimalism

Why Does Negative Space in Web Layouts Matter?

Learning to See Negative Space

Negative Space in Logo Designs

Simplifying a Design to Basic Shapes to See Negative Space

Analyzing and Improving Negative Space

What’s Wrong with It?

Fixing the Problems

More is Not Necessarily Better Than Less

Negative Space in the Wild

Wide, Open Spaces

100% Organic

Busy Space as Negative Space

Negative Space in Grid Layouts

Closing Thoughts on Negative Space

About the Author

21 Adobe Air Apps For Designers And Social Media Addicts

Colors and Patterns

Design Air Apps

Icon Generators

Social Media apps