It’s easy for a Photoshop expert to mock up a website design for a client, however without working knowledge of how the mechanics of code and web concepts work, chances are they would be submitting something that does not translate well to the code language.

This article addresses some key coding basics that can not only help designers without proper knowledge stay within the mechanics of web coding, but to also utilize some lesser known web parameters.


Coding Concepts Div

DeaPeaJay (via Flickr)

A div is an HTML tag that can essentially be thought of as the building block of the majority of websites on the internet. Divs often contain the various contents of a website, and their behaviors is what gives structure to a website. For this reason it’s especially important for non-coders to understand the basics of the div, one point of which will be covered here.

Perhaps the most important aspect to understand about divs is that they are rectangular. Therefore, by simply avoiding elements that are circular, arced, curved, and geometrically complex, a designer can form a fluent connection with the coding language.

This not only spares a web coder from needing to troubleshoot the creation of complex geometry (often with messy workarounds), but it also often allows websites to run more efficiently.

Web colors

Code Concepts Color

Web design is a unique medium in that it frees designers from the worries of print production and also liberates them in various realms, especially in that of color. In other words, computers can create some bright and saturated colors that can’t be so easily reproduced on paper, so why not use that as an advantage?


Code Concepts Hover

The internet has become a wild jungle full of effects and complex animations, so much so that some of the basic beauties of CSS seem to have been forgotten. Take hovering for example: Note how effective this simple css parameter can be when executed in a conceptually meaningful way. Even this rough example could inspire endless iterations where hidden words are revealed, or colorful perks come into play.

Loading time

Code Concepts Loading

Simon Law (via Flickr)

One incredibly overlooked aspect of the internet that should inform all web designs is loading time. The fact is, internet speed varies wildly from access point to access point. This means that someone in a coffee shop might not have the patience for an image or animation heavy website to load.

Loading time awareness allows designers to focus on rapid loading elements such as typography and solid colors to create websites that load quickly from any access point without losing aesthetic integrity.


Code Concepts Scrolling

Scrolling is one of the most basic website functions and is just about unavoidable for designers and coders. Most websites take scrolling for granted and let it serve its basic purpose, however a clever designer can think about how to use scrolling creatively.

For example, what might scrolling reveal to the viewer in an exciting way? How might scrolling be utilized by the site background image/color? How might scrolling transport the viewer through interesting negative spaces within the page?


Jumping into web design without any web mechanics or coding knowledge can be a big mistake. In fact a designer might even end up spending hours creating a design that does not translate well to the web at all; burdening the coder, and wasting time.

Ideally all web designers should have at least some working knowledge in web mechanics and coding basics. Hopefully this article works as a primer!

Featured image: Jeff Sheldon (via unsplash)

What other coding basics do you think are important for web design?