I’m a developer, not a designer. But my customers expect the web applications, online platforms, websites and administrative panels I build for them to look at least ‘fine’. For big projects I usually work together with real designers, but in smaller projects there isn’t always a design budget. Still our applications should look nice and our customers should be happy to work with them.

To get more feeling for design, I watched a lot of talks, followed tutorials and read blog posts from designers. These designers usually make great things, but I find it hard to practice their advices and make something beautiful. A possible reason for this discrepancy might be that a designer knows exactly what it means to use a larger font size. Or to add a bit of spacing between blocks or some saturation to the background color. As a developer, I like to know how many pixels is ‘a bit’ and what hex code I should use for the background.

Based on the information I gathered in recent years, I have been able to put together a guide for developers who need to create a decent design for their customers. It’s basically a summary of practical advises from different courses that are easy to use for every developer because it takes the guessing out of play. Nowadays I always use these guidelines when I have to build a web application without a designer.

In this post, I will describe the design guidelines I use for the most important aspects of a layout: grid, fonts, margins and colors. Then I will apply them to an app that was recently developed by my colleague.

Grid

When the elements of a page are placed in a grid, the page looks cleaner than when they are randomly positioned. Bootstrap has a great grid system and makes use of 12 columns. Placing all elements in one or more of those columns is a first step.

To obtain some structure for the horizontal grid rows we need a vertical rhythm. Choose a base unit and make sure that the height of each element (including its margins) is a multitude of this base unit. I often use 24px as base unit, meaning that elements will have heights of 24px, 48px, 72px, etc.

Font sizes and margins

Text is an important part of many web pages, so we have to choose good fonts and font sizes.

First identify which types of text you have. For example, paragraphs, lists, and two levels of headings (h1, h2).

Body text

For paragraphs and lists I use the following guidelines:

• for the line height use the previously defined base unit: 24px.
• text is easily readable when the line height is 1,5 times the font size, so 16px in this example.
• usually a paragraph or list needs some space on top or below. I often use a margin top of 0, and use the base unit (24px) for the bottom margin again.

With these guidelines, paragraphs and lists fit in the vertical rhythm.

Headings

A h2 should be larger than a paragraph and a h1 should be larger than the h2, but how much? Type scale can help. Choose a scale and use it to calculate the sizes of the headings. I like the augmented fourth, a ratio of 1,414.

So our paragraphs have a font size of 16px. This means the h2 gets a font size of 16*1,414 = 23px. For line height, we multiply the font-size by 1,5 so this will be 34px. Our vertical rhythm determines that elements should be multitudes of 24, so our nearest possible size is 48px. This means h2 elements get a margin bottom of 14px.

For the h1 we follow a similar procedure:

• The font-size should be 1,414 times of the font-size of h2 (23px): 33px.
• The line height will be 1,5 times the font-size: 49px.
• We use a margin bottom of 23px to make sure that the total height of the h1 element fits the vertical rhythm.

Other elements

For any other element, define rules such that the total height is again a multitude of your base unit.

Improving your design

You get a decent layout when you follow these guidelines, but it might look a little boring. If you have some feeling for design, deviating from your own rules makes your design more interesting.

I normally use the following approach: first make sure that all elements at a page follow my guidelines. When the full page is finished, identify parts that can be improved. This might be difficult, because I am not a designer. It may help to ask a colleague or look at a page from a usability point of view. Maybe form fields are too small or menu links are too close together making them difficult to click on smartphones. Try to make some adjustments, but when it isn’t a clear improvement change it back.

Sidebars

One part where deviations from the vertical rhythm are often an improvement, is the sidebar. The content in the sidebar is usually less important compared to the rest of the page, so it makes sense to make it a bit smaller.
For sidebars the following approach can be used:

• For paragraphs, decrease the font size by 2px (14px). Keep using a line height of 150%, so this will be 21px. This 21px is also the new base unit for elements in the sidebar.
• Make sure that all elements in the sidebar have a height that equals a multitude of the new base unit (21px).
• For the font sizes of headings, repeat the calculations as described above, but start with the new paragraph font-size and base unit.

Font families

Another important aspect for the look and feel of your web application is the font family. Google fonts are easy to use and free. Safe choices for body text are Open Sans, Lato, Roboto, Raleway and Pt Sans, but it’s up to you. When you choose a different font, make sure it has enough styles to display text in different font-weights, both in italic and normal style.

It’s common to use a different font for body text and headings, but which fonts combine well? Fontpair is a useful resource where you can select a (google)font and fontpair will show nice combinations. Another useful tool to find great font combinations can be found here.

Colors

Colors are an essential part of design, but in my opinion it’s one of the most difficult tasks to choose the right ones if you don’t have a feeling for color. To make it more challenging, there’s not a single ‘perfect’ color palette. Luckily, there are tools to help you.

Color palette generators

There are several websites and online tools that collect nice color palettes, for example coolors.co, colorhunt and colourlovers. Colormind gives you a bit more flexibility, because it gives you the possibility to generate a palette based on a color you chose before.

Pick a color palette you like and make sure that each element of your website has one of those colors. Sometimes you have to add some additional colors to those palettes, because it may happen that a suitable color for body text or a background is missing. Those palettes usually consist of 4 or 5 colors. Depending on your website or platform, you may need some additional variations of those colors. Below I will describe how to get shades or tints of the colors in your palette.

Create your own palette

Another option is to create your own palette. Of course, plenty of procedures may lead to a great palette, but I will describe just one that should work (remember, we are not trying to become designers, we just want our website or platform to look good).

We start with defining four colors: a primary color, a secondary color, a color for the body text and a color that is suitable for backgrounds (text in those backgrounds should be clearly readable).

Primary color

First, pick the primary color. This can be the main color of the company you are working for (e.g. a color from their logo) or any color you like. Also the subject of your website may help: a candy shop is often associated with pink and purple, while for a website about nature green is likely more appropriate. For this example, we use orange with hex code #f4b27b as the primary color. We will use the primary color for the most important buttons and call-to-actions, optionally for the headings and for other elements that need some color.

Secondary color

Next, we need a secondary color, for example for buttons that are less important than the primary ones, for links in the body text or for other elements that need a bit of color other than the primary color.

Choose a color that has a sharp contrast with the primary color, but still looks nice together. Two tools can help you with this task:

• Paletton: enter the hex code of your primary color, switch to the adjacent, traid or tetrad color mode and pick one of those colors as you secondary color.
• Color-hex: again, fill in the color code of the primary color. Scroll down and take the complementary color. Alternatively, pick one of the analogous or triadic colors. For this example, we go for the complementary color, which is blue with a hex code of #7bbdf4.

Body text color

We stay at color hex for the color of the body text. Choose one of the darker shades of the primary color, but not black because black is boring. I choose for the color #493524 (darkbrown).

Background color

For the background color, for example to highlight alternating table rows or separate a sidebar from the main content, choose a tint of the primary color. Body text should be readable on this color, so make sure it has enough lightness. To check the lightness, open your developer tools and switch from the hex color mode to the hsl color mode. The value for lightness (l) should at least be around 95%. Based on this, I picked #fef7f0 for the background.

We now have four colors in our palette: #f4b27b (orange) as primary color, #7bbdf4 (blue) as secondary color, #493524 (dark brown) for text and #fef7f0 for the background. Depending on the website you’re developing you maybe need some more colors. In that case, use shades or tints of either the primary or secondary color, but try to limit the amount. Determine how many extra colors you need, select them with the help of Color-hex and add them to your palette. Then stick to your palette.

In some situations, a primary and secondary color are not enough. For example, on a dashboard with widgets that contain some key values, you want to give each widget a clear, distinct color. In that case, pick some of the analogous or triadic colors.

Applying the guidelines

Now. it’s time to apply these guidelines to a real app. My colleague recently build an inhouse app. He’s a typical developer with even less design skills than I have, so the look and feel of the app could use some improvement. Below you see two screenshots of the app with the original styling and the styling after applying the guidelines as described in this blog.

Personally, I’m happy with the result and strongly prefer to work with the improved design of the app. And maybe more important, my colleague really enjoyed following the guide and even started experimenting with further design improvements.

Alternatives and summary

When you need a nice design, there are more options than hiring a designer or do it yourself. There are plenty of themes available, both for free and paid. They usually have a more advanced, original design than you would get when you follow the guidelines of this blog post. However, it comes with a downside. In my experience, most themes are not really optimized for performance. They contain a lot of css and javascript, while I only need a small fraction. Stripping the unused css and javascript is a lot of work and may break things.

I guess it just depends on the requirements of your project and your personal preferences what is the best solution. For cases in which you want or have to make the layout yourself, I do believe that by defining guidelines for layout and following them, it’s not too difficult to create a website, tool or online platform that looks good.

Are you a developer or designer and do you have tips to easily improve design? Let me know in the comments below!