Skip to content

Patterns and Systems

When it comes to creating templates from static mockups, there are a couple of approaches that you can take. One is to follow the mockup and create exactly what has been made available, and another way is to create a system which can be used and re-used as the site evolves and grows.

This systematic approach is one that I now adopt on almost every project I work on, creating as many layout agnostic elements as I can, so that when it comes to creating the layout these elements can be added in anywhere. Website designs by their nature have a level of consistency in terms of colour and typography which will be repeated throughout the site. By creating a system first before creating the layout of the site, I find that lends itself to writing less CSS and creates a more flexible codebase.

A couple of examples of these systems are Jeremy Keith‘s Pattern Primer¬†and Paul Robert Lloyd’s Styleguide and Barebones project, which I both use on a regular basis. I feel this makes creating templates much easier but also makes maintaining a site much easier as well.

I tend to create a styleguide which will have a list of almost every HTML element styled in a consistent manner, but I will also include examples of any common JS that is included such as lightbox scripts so that if another developer comes to work on the site they can see at a glance what is being used on the site and avoid any duplication of code.

I now take this approach on each project and I would recommend it to others.

© 2020 Graeme Pirie