5 coding concepts that can inform web design

workerbee

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.

Divs

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?

Hovering

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.

Scrolling

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?

Conclusion

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?

Related articles

The fundamentals of responsive website design

The fundamentals of responsive website design

The days of designing a website for a single desktop screen are well and truly over. Technology and the expansion of mobile websites are pushing web designers to re-think how their work is displayed across various devices. Think about it: how much browsing do you do every day on your phone vs. your desktop? Enter:…

The new Google Fonts is a win for designers

The new Google Fonts is a win for designers

Google launched Google Fonts in 2010 to provide web fonts free of charge. Over the next six years it grew considerably, becoming very popular with web designers—for the obvious reason of affordability. The original website was definitely what the startup world would call an MVP: minimal viable product. It got the job done, but it…

Current Design Contests

Designers, check out these contests so you can start building your career.