There’s no question that in the fast moving and quickly-evolving world of web design, the more skills and versatility a designer has is valuable. Wearing many hats can be a challenge as the line between UX designer, web designer, and front-end developer all become blurred, but there are similar things to keep in mind among them all. The following suggested principles can be applied in all aspects of design, from the research and planning stage and all the way into the implementation.
1. Simplicity is Key
In his Ten Principles for Good Design, Dieter Rams pronounced “Good design is as little design as possible.” I find this to apply evenly in all aspects of design. Concentration on the essential aspects and filtering out the excess allows the purest form to shine through.
This can be interpreted in many ways in design. For the context of coding CSS, it’s finding the simplest lines of code that apply to the most elements that need it. There is no need to be overly specific when defining code. Condense as much as you can and use shorthand properties when possible. Less is more.
You can also avoid redundancies and bloat by using an optimizer or redundancy checking tool like any of the ones mentioned here.
2. Follow a Logical Hierarchy
Whether you’re creating a high level site map, setting up the typography for a blog post design, or creating CSS for a website, hierarchy is important. It structures the information in a digestible way. We can assume in any of these situations that you will not be the only person to ever lay eyes on your work. Therefore, it’s incredibly important for other people to be able to follow your thought process.
When creating CSS files, I tend to follow the advice given here. Resetting the styles is applied first, followed by main body styling. Then, the font and heading structures are applied. This lays down the basic structure for the rest of the site styles. From there, we can apply CSS styles for specific sections, making sure all sections are clearly labeled through the comments. This brings us to the next point.
3. Keep It Clean and Clear
Using clean lines in a wireframe, creating legible and clear typography, and clean code should be paramount when designing. Just as you wouldn’t want a site to be jumbled and confusing, no one should have to dig through messy code. Clearly marking and commenting each section is important to maintaining a CSS file and it helps to mark each section with it’s specific ID or class in its commented section title. This allows another editor to search through the code more easily and is also helpful when working in any tool that uses layers. Clearly marking each layer and group saves the next user from a lot of confusion, especially in files that have multiple pages shown.
In this article, I focused mainly on design principles that apply to CSS coding as well. While these tips can improve your work, it’s also important to stay current on what is happening in each field. Joining a mailing list or adding a blog to an RSS feed can help you stay up to date on news, tools, and new techniques. Simple, logical, and clear design will certainly prevail wherever design takes us next.