10 Tips To Improve Your Design Skills

This is a summary of a talk I gave at the last Open Code. The goal was to present basic design tips in a very accessible way to an audience mostly comprised of web devs and coders. So nothing too theoretical, just a personal list of simple practical things that I’ve learned throughout the years.

1. Plan your work and identify your constraints

Planning your work is a very good first step to put all the chances on your side. This means outlining content; important text in case of a website, or menus and sections in a web app. This is exactly like planning a recipe when making food. The more you know what ingredients you’ll need to have, the better you will be at putting them all together step by step.

2. Choose a flexible typeface

Choosing and combining typefaces is an art in itself. Subject, medium and context are all very important factors that drive your decisions. Still, a good first indicator of an all-around typeface is the number of weights it offers. The more weights, the more flexibility. Open Sans is a good example of this principle, especially when you compare it to the once very popular Arial as seen in the image above.

3. Establish a simple typographic hierarchy and respect it

Having a wide variety of typographic styles in a single context makes your content feel cumbersome and complicated. Here you can see an example of two very simple yet typical website typographic hierarchy: This may seem simple, but there are many decisions involved: typeface choice, size, weight, placement and color. The challenge is not only to create it but to keep yourself from dwelling too far from it. If you can manage to limit yourself to a simple and consistent typographic hierarchy, you will improve the clarity and quality of your design.

4. Do not underestimate details in typography

Typography is often about details, and here are a couple I think you should keep in mind:

• Watch that line-height: A good basic line-height will be around the 1.4 ratio, but that can significantly change from one typeface to another.
• Always use smart quotes “” instead of simple quotes "".
• For small-caps headings, use the small-caps version of a font when possible (for example: FF Meta SC).
• Mind that font-antialiasing. With the newest changes to Photoshop CC you can now use the “Mac” and “Mac LCD” antialiasing methods. They correspond respectively to -webkit-font-smoothing: antialiased (only for Chrome and Safari) and -webkit-font-smoothing: auto (or subpixel-antialiased). I suggest sticking to the default value (Mac LCD in Photoshop CC) since you want to favorise consistency across browsers. However, it can be justified to use the antialiased mode like in web apps for example.

5. Forget Twitter Bootstrap and friends; free yourself from the evil 12 column grids

I have written a bit about this in my last post on responsive web design, but I want to stress how evil can the 12 columns grids be.

First it constraints you in a falsely flexible columns disposition that prioritizes layout over content. It misleads you into thinking that you can do anything with it, but you will most probably fall for the obvious and ubiquitous layouts. You will be limited in the number of choices you think you can make, and that’s really not what we want.

In the case of front-end frameworks such as Twitter Bootstrap or Foundation, of course you can always tweak everything, but this is just reversing the workflow and making your CSS a lot heavier than it should really be.

My solution is to start with the simplest and most flexible of all grids: the edges and center points of your browser. Deciding where the edges of your container should be is already a big decision that directly impacts your design. Just look at how Layervault used this at their advantage by creating a drastically narrow container which clearly differentiates them from their competitors. You can then build on top of that to create a custom grid-system based on your content and constraints.

6. Think about the space around elements as much as the elements itselves

If you can at least remember one thing from this post it’s that whitespace is as important as content. Realizing this completely revolutionized how I saw design in general.

That being said, a good rule of thumb is to always have a symmetrical spacing around your elements. As if they solidly “sat” in their container. In the example above you can see a simple mobile app layout with bad whitespace on the left, and with a simple consistent spacing on the right. Note how each element has the same space all around it, and how it seems to feel a lot better.

7. Be consistent in your measures

Consistency is the second very important aspect of whitespace and one that is a lot harder to maintain. Here you can see a very nice example of a Stripe dashboard redesign by Benjamin De Cock in which I’ve highlighted the consistency of whitespace. Benjamin probably did not even need to calculate it as precisely as I did, proof that an experienced eye can be very precise.

8. Avoid shiny embellishments

Shiny buttons and text-shadows seem to have disappeared with the flat design trend, but it’s still good to remember that you should always prioritize alignment and layout of an element over any other embellishments.

9. Harmonize your colors

This is a trick from an old blog post that I found to be very useful to give a final touch to my projects. It’s very simple: you get all your main colors and add a color layer on top of them at 10-15% opacity with an Overlay or Soft Light blending mode, as shown in the example above. You can even simply add a Color Fill on top of all your comp and get a similar effect. This will help bring your colors together and bring a similar “light” to your design.

10. Watch out for these CSS details

First, you can create a feeling of depth by simply darkening either the top (for text inputs) or bottom line of your input (for buttons or select elements). Second, you should always add a tiny bit more padding on the bottom part of a button.

Be brave and push yourself

These are very practical things that I wish I could have known when I started out three years ago. I am still far from being an accomplished designer, but if there is something I have learned throughout my short career, is that getting better at design requires practice. No matter what your current level is, if you push yourself and train your eye at seeing things differently, you will become a better designer.