Topic: Graphic Design

In terms of graphic design on the web, one of the hottest topics is creating a grid layout or structure for your website. When you have a large website, it is often a great idea to structure content in a way that effectively shows users the extensiveness of the content without overwhelming them. Grid design does precisely that by giving your website sections to display different types or subjects of content. Let’s not forget that many design principles are derived from the experts that were designing before we had the internet. These experts generally worked with books, newspapers, and journals, which the vast majority implemented grid design.

So, we can all take a look at some of these old resources that have been updated for the modern web. CNN, Life Hacker, and Indiana University Library all show solid examples using grid layout to organize information. Let’s take an analytical look at horizontally divided graphic design.

Grid Design (Horizontal Division)

All of the previous website examples use grid design by dividing the horizontal width to incorporate the columns. You might notice how one grid can extend longer than the other grids, but it still doesn’t look unappealing as the user rarely reaches the bottom of a page. On the right is an example of horizontally dividing grids shown with the grids that are typically invisible.

Grid Design (Vertical Division)

While you can hopefully see how the content is divided up into section based on widths, grid design can also be a vertical division. It is almost impossible to get content that contains text to be the same height, which makes a vertical grid layout complicated. However, the working theory can be achieved by dividing after the lowest content of the “grid row”. One of the leading resources in Grid layout design shows how to use both vertical and horizontal division using grids.

The best way to learn all of this grid design/layout stuff is to try it yourself. I know that I have given you a few examples and explained it in a rather abstract manner. This is because a grid system depends heavily on what you want from it. Try creating an HTML document and a CSS style sheet. Create a series of div elements that have specific names to divide the page. Look at a few of the example websites’ source code to see how they did it.

Color Schemes are one of the most important aspects of a good graphic design. They will make people fall in love with your website or absolutely hate it. Most people tend to think of colors as art and putting colors into schemes takes an artist. However, there is actually a science to help the less artistic people like myself, called Color Theory. I won’t get into much detail about the values, hues, or saturation of colors, but I will explain a few of the most dominant color schemes. After reading this tutorial, experimenting with the color schemes is an excellent idea.

Color Combinations

It should go without being said, but just because we have color doesn’t mean that everything needs to have it. However, black and white websites that aren’t intended for some old fashion business lack creativity and often push people away from the website. When I say going overboard with color, I mean either using too many colors or coloring too much, both of which can break a design. Color Theory has given us quite a few schemes or ideas to blend our colors into our web pages, but I don’t want to overload you with all of them. So, we will discuss three primary color combinations.

Monochromatic Color

The monochromatic color scheme involves one color with different tints. This is a great color scheme for showing depth and drawing focus to certain elements.

Analogous Color

The analogous color scheme involves various colors that are in very close proximity to one another. This is somewhat close to the monochromatic color scheme except for instead of the tint and saturation changing, it is the color that is changing. The analogous colors often can portray feelings like hot or cold because of the color combination.

Complementary Color

The complementary color scheme is a composition of opposing colors on the color wheel. Complementary colors provide the highest contrast out of all of the schemes listed here. They have excellent contrast and compliment each other very well. Each color is much more intense than when the color displayed on a white background. For instance, red with green makes red seem even redder.

Well, that concludes the three primary color schemes that I am prepared to talk about. Feel free to get behind the canvas and start painting up some awesome color combinations on your website.