More and more, designers are expected to code. For designers who don’t code, coding can seem incredibly intimidating and uncreative — equal parts tedious, insipid and unyielding. The reality, though, is that the line between designer and coder is blurring, and an incredible amount of creativity and imaginativeness goes into coding a website, app or program. In fact, designers posses unique knowledge that give them a head start to writing clean, usable code. Below are a few ways visual design principles that can help improve the quality of written code:
Hierarchy
Code should be logically structured and easy to peruse through consistent indentation of your markup. The logic you use to structure your CSS can vary based on your project. For example, if you’re working on an app that has a lot of navigation items and toolbars, you could keep them together so they’re easier to find and quicker to style. A simple marketing site can be structured similarly to the visual layout — header, navigation, content, and footer.
Modularity
Have an element you use often? Make everyone’s life easier and take it out of your main layout. Put it in its own file, then include it into any page using your backend language of choice. This is handy for footers, headers, navigation, you name it. Give your repeatable element a distinct and consistent class name — we’ll get to that next — so it will have the same style no matter where you place it.
Chunking
This is similar to modular HTML elements, but with styles, and for a different purpose. Separate your CSS files into individual files based on the elements you’re styling. For example, put button styles in buttons.css, navigation in nav.css, and so on. This makes it easy for people new to the project to hop on board and begin editing.
Consistency
Use consistent names for elements, and consistent labeling systems. For example, we use all-lowercase-hyphen-separated variables throughout Foundation. If you have the same functionality in different places throughout your app, make sure you use the same label and similar code to represent those actions. Doing so will make it easier to repeat those elements. You should also be consistent with your coding style. For example, don’t alternate between multiple and single lines for CSS rules. Pick a style you’re comfortable with and stick to it.
Framing
Set expectations correctly by clearly framing your code: first by using clear comments, and then by adding descriptive and detailed commit messages to your code versions. As a practice, commit messages should be searchable and descriptive of the changes contained within.
Yes, designers can and should code. Using the principles of design to write beautiful code will make your code a joy to read, edit and maintain for your team.
This post was derived from and contains portions of our blog post: “Designing Code: How to Use Design Principles to Write Beautiful Code”
