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.
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.
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.
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.
Typography is often about details, and here are a couple I think you should keep in mind:
-webkit-font-smoothing: antialiased(only for Chrome and Safari) and
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
antialiasedmode like in web apps for example.
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.
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.
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.
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.
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.
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.
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.
One small OS X hack for chat nirvana
A list of Dribbble profiles you should follow