Making It or Breaking It with Design

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

1. Three Note Coil Ascending Picking Patterns [Guitar]
2. Custom Fields in Wordpress
3. New Blog

Stevenson, Washington and the Columbia River

Yesterday I came across a method to update your webpage or blog posts through the Wordpress interface, rather than going into the code. For example, you have a jQuery slider on your homepage, but in order to update it you have to go into the template (or page / post) and edit it there. After staying on that road for sometime, I knew there had to be an easier way to do this through the Wordpress interface, rather than diving into the code (and defeating the purpose of using Wordpress altogether).

So I stumbled onto Custom Fields. Custom Fields are those little boxes below the area where you update your post, that I’m assuming most people glance over once and never look back. After searching for a method to update the slider for a project, I found a method for doing this via Custom Fields.

Open up your Wordpress panel and make sure you know what I am talking about in the first place. Click on the picture below for confirmation.

Now that you know where Custom Fields are located, enter in a name and a value. If you’re familiar with programming, the “name” will be your variable name, and “value” will be the value of that variable. If you’re NOT familiar with programming, a variable is used as a container that holds a value (remember Algebra anyone?). You can later specify the name of the variable and the value will be displayed.

For instance, for the “name” you entered example and for the value you entered “This is the value for the field “example.” Now remember when you call example the value that you entered will be displayed, including any pictures that you decide to enter.

So now, you have to enter a php script for this value to be displayed in your post. Also, this post is meant for people that have a general understand of Php and Wordpress, but if you don’t, head on over to the Wordpress Codex and start reading up.

So find the spot where you would like your “value” of your Custom Field to be displayed and enter it, as in the picture below.

The only part you will need to change in the code is where it says $example and ‘example‘ (it is listed in three places) as this is the “name” of your custom field. If you remember, we used this as our example above. So change that to the name of your custom field.

And now you’re set to go. Feel free to enter in as many custom fields as you would like, and enter them in the same template or page and start making life a little easier on yourself.

—

I’m also very interested in hearing your opinions of this method. If you have a better option, I’m all ears.

1. New Blog
2. Designing Visually Appealing Artwork