In this post I am going to explain how to create visually appealing elements in your graphic and web design. I will do this by dissecting an the image above from a current project of mine and explain how and why I did what I did.

This project’s goal is to reflect a modern image of the company, while also make is very for users to navigate the company website. While this may sound generic, the design is certainty not.

The first thing you’ll notice are the edges on the red banner. The banner is filled with a gradient that fills from a lighter red into a darker red (giving it the appearance that light is shining from above with a three dimensional feel). It provides your eyes with an assurance that this is the edge of the object that you are looking at.

The edge used is one pixel in width and created from the lighter red color which wraps nicely around the banner. It disappears at the top (since they are the same color) but reappears as the gradient darkens.

To make the banner look like it is on top of the blue frame, a slight drop shadow was added and offset vertically to a negative value. This keeps the design consistent with the image (light shining from above).

The next thing you’ll notice is the sharp edge on the blue container. The container is filled with a dark solid blue without a gradient. I didn’t add a gradient because I wanted the blue container to be set in the background and not take away from the heading / red banner. The edges were created by using a slightly lighter blue as it’s immediate edge, followed by a dark grey (almost black) edge. The light blue edge combined with the dark grey edge gives the sense that the image has depth, complimenting the three dimensional feel of the header but like I said, not taking away from it. Also, the hard edge assures your eyes that this is a solid container and allows you to read the contents inside of it easily.

And now for the text. When you zoom in closely like the picture above, you’ll notice there have been two drop shadows added (without blur) to the text. This gives the text an inset feel as if the text is inset into the object. You’ll notice the dark shadow acts as a shadow, while the lighter drop shadows acts as an edge that the light hits to complete the look. Take a look at the original image and you’ll see what I mean. It’s amazing how easy this effect is to create while how realistic it can look to the human eye when zoomed out.

Lastly, take a look at the shadow for the white container. Chances are, you didn’t even notice this the first time around, but it can make all the difference in the world at completing a design like this. The shadow is created at a negative vertical offset (again, completing the lighting) and giving the container depth as well. It makes the container look as if it’s just right above the blue container as a separate object.

—
The most important thing you can do taking away from this is paying attention to the details in your designs. Designing is not just about grabbing a rectangle and filling it with color. It’s thinking through the entire design such as lighting, depth, and attention. Always make a mental image of what your design would look like in the real world. Where is the light coming from? What are my materials that I am working with?

When it doubt, always check for a real world example. Look at the keys on your computer right now. How is the light reflecting and where are the shadows being casted?

—

As always, if you enjoyed this post share it with your friends

Posted on February 2nd, 2010