Basic Graphic Design Skills All Web Developers Should Know

In the world of website creation, there are two main roles that complete the equation for a great website; the website designer and the website developer. With the amount of “do it yourself” website builders like Wix and Squarespace, and front-end builders like DIVI, the line between web development and web design have become a little blurry. Knowing the following basic graphic design aspects may help any web developer work easier.

The difference between a web designer and a web developer is that a web designer is the one that designs what the site will look like and the developer is the one that builds it with code (HTML, CSS, Java and more). It’s quite common that one person does both things with the help of all the new tools available for website building.

Hardcore web developers, on the other hand, are the ones building the sites that cannot be built with drag and drop builders. Web developers can code anything a web designer can create visually. But web developers also need to know some basic design skills for improved performance.

In order for a web developer to transform a visual composition into a working website, it will help them greatly to understand some aspects of design. By knowing some design basics, developers can appreciate good design and not feel completely detached from what they are building.

Are you a web developer wanting to know how to take your skills to the next level? These are the graphic design basics all web developers should know. It’s never too late to learn new things!

Graphic Design Basics for Web Developers

Composition

The way in which elements are set up in a space is the basic definition of composition. The main element of composition that can help a web developer is the use of grids. Grids separate the visual area in a way that helps set up the elements in a balanced way.

Grids

There are many types of grids that can help a web developer. The most common grid for a website is a hierarchical grid or composite grid. Other types of grids that can help visualize a balanced composition is the rule of thirds and golden mean.

Balance

Balance refers to how all elements in the visual space are balanced to each other and the background. Sizing and spacing between elements needs to have a visual balance. Grids are great helpers for this as well!

Contrast

Inside the realm of balance, we must also consider contrast. The contrast of size, of color and of depth. Dark and light areas need to balance out so that focal points call attention seamlessly. Contrast also applies to how text looks in relation to its background.

Hierarchy

Putting together the tools of composition, grids, balance and contrast, it is also important to know how hierarchy works. The most important areas, like the header, could have a much higher hierarchy than the menu.

Hierarchy rules the way in which focal points are seen and followed, from most important to least important. If there is no hierarchy, the focal points are confused and the User Experience of the site is compromised.

Branding

The branding of a website is a concept created by the graphic designer or the brand specialist working with the owner of the website that is being built. It is everything from the logo to the color scheme and the typography used. Brand specialists set up mood boards and brand guidelines that must be followed at every level of creation, from the website to the printed materials.

When a web developer understands the concept of branding and its parts, it will be easier to build the site using the correct colors, fonts and shapes. Branding will mark a general feeling that the website must have. It is the visual backbone of all the designs for a specific client.

Typography

The typography used in a website is more important than it might seem. The type or font used for headers, buttons, body text and menus needs to be of the right style, shape and size to work well. Not all fonts look the same at the same size, knowing this will help greatly when building text blocks and other areas of the site.

Colors

Knowing basic color theory can go a long way. The kinds of colors used in a website and how they relate to each other is very important to the final design. Colors are not just little numbers, they are carriers of personality and human reaction.

Gestalt Principles

Gestalt principles are laws that help understand how the human eye and brain perceive visual elements. The main idea is that when a person sees a composition, they don’t see the individual parts that make it up but rather the entire thing as one linked composition. The gestalt principles help explain how people see things in terms of similarity, continuation, proximity among others. These are the Gestalt Principles:

• Similarity
• Continuation
• Closure
• Proximity
• Figure/Ground
• Symmetry and Order

Learning Resources

There are a few ways that a web developer can learn these skills. The best way is to take courses, either in a physical college or institute or even online. There are lots of great online courses you can take in your free time. Try the following learning sites:

• Udemy
• Coursera
• Alison

Look for courses on basic principles of graphic design and start from there. Knowing these graphic design basics will not only improve your finished work it will also improve your relationship with the designers you work with!