Web-Design for engineer

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.

medium

Medium’s colour scheme

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.

fedex

FedEx logo: Space matters as much as letters

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.

contrast

“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.

pop pop

First row, same sizes — Second row, same sizes and 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.

filter

adding filter on background

The most popular aphorims in design is “less is more

less

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.

The end

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

Andry R.
Andry R. Développeur Fullstack
comments powered by Disqus