In part one the underpinnings of a good design were laid out. This helped to arrange the content and establish a hierarchy of information in your design. However, there is more to creating a successful piece than just spectacular organization. For a more complete picture we turn to the artsy part of design- the things that are easily visible to your viewers and will make people want to look at the content. The simplest of ticks with these elements can create a sleek modern look, a page full of rustic charm, or an exotic beauty. It all depends on how you use them.
Adding the attention getters- The Elements of Design
Line – Line is the most important element in web design as we use it to define breaks in sections and separations between navigation. Thinner lines (1px) will give a sleek minimalistic look while heavier lines (5px) can create nice borders around elements. Giving a line varying thickness can also create a unique feel, such as the stroke of a calligraphy brush or the hand crafted lines of art.
Shape- As we work on the web world, the square and rectangle are the first shapes that pop into our minds when it comes to design. After all, they are easily stack-able, arrange-able, readable, and the way our mind orders things. However, when it comes to things that aren’t content, other shapes used in a design can make your site stand out from the crowd.
Direction- Most layouts are horizontal, and with wide-screen monitors becoming more and more the norm, websites are becoming more focused on wide open layouts. This is not to say that vertical isn’t important, because if you work your design right, people will want to scroll down!
Size – Consider your positive space and your negative space when dealing with size. Most screens can now handle over 900px wide layouts, so you’ve got a good area to work with. Use size to single out important or eye-catching elements.
Texture – Yes, you can have texture in a site. Subtle textures, such as those found in photos, can be overlaid on a color to help add character and that little extra personalization to a site .
Color and Value – I’m placing these two together since they’re the major players in design. (Value is the lightness or darkness of a color, so we’ll just incorporate that into talking about color.) A Design relies upon colors. Be it black, white, red, or blue, all designs have color. What you need to keep in mind is that the best layouts have either 1 or 2 main colors and then the rest are accent colors. Having more than 2 main colors tends to overwhelm the eye, so keep your 3rd color as an accent by using it sparingly and in smaller doses around your page. Moving on, color combinations are tricky- lots of things like culture and personal preference tend to hold sway over things like this, but I can say don’t have every color the same value. Vary the lightness and darkness in your chosen colors to get a better result when you combine them. A bunch of different colors all at the same value can lead to a confusing page if not handled correctly.
Color Theory
Since color is such a big part of design, here are a few helpful insights into color theory.
First off are your primary colors which consist of blue, yellow, and red. It is these colors mixed that create all other colors. You cannot create these 3 colors out of any other color. Your secondary colors are when equal parts of two primary colors are mixed which gives us green, violet, and orange. Add more of one primary color than the other to a secondary color and you’ll get the tertiary colors of yellow-green, blue-green, blue-violet, red-violet, red-orange, and yellow-orange.
The above color wheel, starting from top and going clockwise: yellow, yellow-orange, orange, red-orange, red, red-violet, violet, blue-violet, blue, blue-green, green, yellow-green
Complementary colors are a pair of colors that are opposite in hue. What this means is that the primary color and secondary color do not share a primary color. For example the complementary color for blue is orange, a combination of red and yellow. Complementary colors put together at the same value tend to enhance both colors in a way that makes them stand out more or become stronger.
Complementary pairings are: red and green, blue and orange, yellow and violet
To show how complementary colors affect each other, a green square has been placed in a red one and a red square has been placed in a green one. (Both colors remain the same color and value in each square.)
Analogous colors are colors next to the selected primary color on the color wheel, like blue and green or blue and violet. They tend to ease the eye into each color and don’t stand out as much creating a less jarring contrast. More often then not, you’ll be using analogous colors as your main colors and a complementary as your accent.
To show how analogous colors work together, a violet square has been placed in a blue one and a blue square has been placed in a violet one. (Both colors remain the same color and value in each square.)
A good place to further study color theory would be at Tiger Color’s Color Harmonies. It shows the grouping of colors in complementary, analogous, triad, split-complementary, tetradic, and square ways.
In closing…
You can use these basics of art in design and create wonderful websites. Just remember that the above are merely helpers and good advice for you to think about when designing. For more information on design, I would recommend hanging around the fine art section of your local library or bookstore and perusing the books. You’ll find a lot of inspiration and great design.
