Web-Design for engineer
I often hear engineers telling me “they are not good at web-design” because “they are not artists”.
And they’re right, if you work in a fancy web agency making fancy websites, you need some kind of artistic sensitivity.
But working on a functional web-app like Airbnb, Facebook, Product Hunt, has nothing to do with art, it’s about respecting patterns and simple graphical rules, and mainly stealing others work.
“Good Artists Copy, Great Artists Steal” — Picasso
So here is some efficient rules to have good looking website without reading any design book:
1. Don’t play with fancy colours
If you’re not born a designer, just use the ‘gray scale’ and bring colour with small touches. That’s exactly what Medium does, using mostly gray values and a nice flashy green in very light touch.
2. Space matters as much as objects
The space that surrounds an object (text, image, etc..) is as important as the object itself. It creates boundaries and helps identify the different zones on the screen.
3. Our eyes need contrast
We can’t differentiate between contents without contrast. If everything look the same, then we don’t know where to look. We need graphical guidance. Here is an obvious example of contrast between a main title and a secondary one.
“Same size” is not “same proportion”
It’s not because images have the same width and height in terms of pixels that they have harmonious proportions.
4. Backgrounds need filters and effect
When images are too contrasted, you need to put a filter on top of them to make your texts readable.
The most popular aphorims in design is “less is more”
Separation of concerns
In computer, separation of concerns (SoC) is a design principle for separating a computer into distinct sections, such that each section addresses a separate concern. — Wikipedia
SoC also applies very well to design. Let’s imagine you want to make an image rounded with a red border. For that you can write this “design task” and give it a name, like:
Rounded-with-red-border: border is red + corners are rounded But you can also separate those two tasks under two different names:
Rounded: corners are rounded
Red-bordered: border is red The second option is much better since you separate elementary design tasks. Then you can either combine them or use them independently. Separation of concerns is not just for software and backend. It also applies very well to design.
I hope this article will offer interesting and useful insights to developer who think they’re not designers or designers who want to structure their approach.
If you want to see a fancy website, made by talented designer and front developer click here