Advertisement

In honor of the new redesign of GraphicDesign.com, which we hope you are enjoying, I wanted to start discussing important principles of Graphic Design applied to web design. Visual literacy is the ability to interpret, negotiate, and make meaning from information presented in the form of an image. Designers develop a creative tool belt of basic shortcuts and methods by studying other great design methods. The first step to becoming a great graphic designer for the web is the mindful growth and conscious development of visual literacy and keeping a fanatical eye for detail. Also, it’s always good to remember that you have to know the rules to bend and break them.

Contrast

Contrast by definition means the state of being strikingly different from something else, typically something in juxtaposition or close association. If two items aren’t exactly identical, then contrast is needed to make them feel like individual entities. Stronger contrast adds a level of interest to the page that will engage the users eyes. It’s also about organizing the information on the page by finding a good balance. Headers, Titles, Links, Sub headers and sections on the page should be easy for the user to look at in contrast to each other. The user should never have to make awkward jumps with their eyes; everything should feel comfortable, warm and inviting. Create focal points.

contrast big small

Don’t hesitate to create large items vs. smaller items. If the user is interested in the larger content, they will make the effort to read the smaller sections print.

Spacing is king. One thing that I learned from an old colleague is once you have a solid design concept, back up a bit, squint your eyes a little and look at the site design, this allows your eyes to see the comp without the heavy context. It’s almost as if you are viewing a wireframe. This helps to define comfortable spacing and which sections your eyes are drawn to (or lack thereof). Different typefaces help to add contrast. Also colors, spacing between different elements, textures, gradients, shapes, rules (lines), backgrounds.

texture

A subtle texture pattern is used to create contrast between sections.

Another way to ensure this is make sure you are using the proper amount of white space. Try not to use colors, lines, graphics, icons, images and typefaces that are too similar.

orange balance

Spacing doesn’t always have to create contrast too. You can layer elements to create a complementing effect.

Repetition

Unifying different parts of a design to make it feel whole is essentially repetition. Repeating different design elements amongst pages helps to create aesthetic unity and consistency.

comments

The use of orange is repeated to help balance the page when the content and sections are heavy. The blue section adds contrast and balance.

Examples of repetitive elements could be a type of bullet or icon, color, design elements, different shapes, spatial elements, a bold font, etc. The subpages of the website should feel just as strong as the homepage. I’ve seen too many site designs where you enter the subpages and feel like you are on a completely different website.

spacing

Subpages have similar elements but also present new layouts. With the repeating branding elements in place the user still feels engaged in the same seamless web experience throughout the site, no matter what page they are on.

Repetition is control. Designers control the users eyes and how they will move down and across the page. With strong, repetitive elements it’s possible to nudge the user along the page so that they focus on what you want prominent on the site. Once they are in the section as well it’s important that the content still feels comfortable even if the content and elements are heavy.

heavy

There is a lot going on here, but the content is presented in a way that it feels like 3 simple sections, complemented by the “Job Board” title.

In the next article about design principles I’ll be talking about Alignment and Proximity.