I first picked up CSS like a lot of self-taught web developers do: gradually and then all at once. I had no formal training and I never consulted the documentation--I just wanted to make stuff look cool. This led to me developing some terrible (but common) design habits, and I constantly found myself frustrated with my design ‘skills’. My projects often came out looking amateurish, no matter how many CSS tricks I invoked. For a long time I resigned myself to believe that I was probably just bad at design.

Fortunately, people much smarter than me figured out years ago that anyone can learn to apply sensible design principles. With just a few concepts under my belt, my layouts really improved and so did my confidence. These tried-and-true fundamentals have made the biggest difference in how I approach web design and development now. I decided to compile a short list of the design concepts that have been the most useful to me.

Topics Covered

• Step 0
• Sketch the layout first.
• Add more padding.
• Systemize your color palette.
• Pick one typeface.

While these don't need to be learned in any particular order, in practice, the first principle (Step 0) should always be the implemented before any designing starts. Without further ado, here are 5 useful design conventions that can set a well thought out design apart from a undeveloped one:

①   Step 0

Before we even fire up our editor, we should know the parameters & purpose of our project. Every element of our design should convey that goal, purpose, or meaning; whatever it is, make it obvious. That means that every design choice we make must have a reason behind it.

②   Sketch the layout first.

Our layout is the foundation of our project; it is where our content lives so it should take the shape of whatever content we have (not the other way around). Before we start styling, use this time to arrange the layout with a pursposeful visual hierarchy, as this is how we will justify the importance of that content and provide users with a meaningful viewing experience. If our image/text/style elements are not organized to aid the users eyes across the page, our meaning may become lost on the user. But 1 layout may not be enough; keep in mind that the layout for mobile devices should be just as considered and meaningful as layouts designed for desktop. If our project needs to be responsive, it’s recommended that we start with the smallest version of our layout and scale up for each breakpoint. It is more efficient to add on to our design as it grows larger than it is to undo our design to make it fit a smaller environment. Learn more about layouts in Wireframing a Mobile-first Design.

③   Add more padding.

Negative space is an incredibly effective way to convey meaning quickly. Briefly put, negative space (also called whitespace, although color is irrelevant here) refers to the blank space between elements in design. It’s the distribution of blank space that matters more than the amount of it. we can manipulate the negative space of our layout with proper alignment and spacing between elements; for example, we may choose to group related items closer together, or isolate a single element in the center of the page. On a smaller scale, consistent padding, margin, line height, and line length values can increase readability and provide a natural contrast between different elements on the page. For example, the line height for body text should be 1.2 (unitless). H1 elements should be 1.6 (unitless). Consider using a variable for margins and padding values to force yourself to be consistent. Learn how to leverage negative space by reading up on the Gestalt principles.

④   Systemize your color palette.

Color is used to bring additional context and nuance to a design. Think about it as you would any other design element: to convey or enhance the content’s meaning. Color theory is commonly considered to be both an art and a science. But we don’t need to be an expert on color theory to intelligently bring in colors to our design. There are lots of free color palettes and color palette builders already available to us. But if we need to build a custom palette, we can implement a reliable process for building a simple color palette from scratch. Read up on this simple color workflow to construct a palette for our next project. A color palette for web projects should include at minimum 1 base color, 1 accent (i.e. complementary) color, and 2 corresponding gray colors. For our purposes, we will try to limit the number of colors, including all the possible shades of gray used for borders and backgrounds, to 15 or less.

A note on color accessibility: Complementary colors are great, but don’t rely on just colors to communicate meaning.

⑤   Pick one typeface.

Oliver Reichenstein put it simply, ‘Typography in practice is... mak[ing] the text as easy to read as possible’. The art of typography is closely linked to the field of information architecture, which is concerned with the most appropriate structure, flow, and labeling of content for the end user. Before falling into a rabbit hole of typography principles and font libraries, consider this: our typography choices should always be in the service of our content. Don’t let the type distract from the information. Use no more than 2 typefaces, but take advantage of font-sizes and font-weights to create hierarchy in the layout. There should be a noticeable system offont-sizes in our design system. For a deeper understanding of type in web design, I recommend reading the key rules of typography, typography for web design, and typography for developers.

Conclusion

In web development, our design does not exist in a vacuum. It should be tightly knitted to the content, revealing things that the words and images on the page do not or cannot. This visual context may seem negligible, but it can be quite powerful; a well-designed element can give confidence, spur action, shift moods, inform, abridge, warn, comfort, accommodate...the possibilities are endless. It’s up to us to advocate for the user by wielding these fundamental design principles with care. Designer Cameron Moll put it memorably: "When in doubt, don’t just decorate; communicate". Obviously, just knowing the theory won’t make you an expert overnight, so keep at it. We iterate, declutter, realign, and repeat--until it’s time to stop and move on. Good, purposeful design can be boiled down to conveying exactly what we need and nothing more.