How to draw a web header


Post 7 of 8

Ways of creating adaptive design

Greetings, dear friends and readers of my blog Today I will tell you how to draw a web header correctly! Yes, that’s right, the key word is “correctly”.

Today technologies develop very quickly and there is no point in making static pictures. A picture, as well as the overall website design, should be nice and organically incorporated in any screen resolution, it should be very adaptive.

There’s already a lot of said and explained about designing adaptive websites, but there is little said about small local tasks a designer should solve, for example, how to draw a good header. If there is, it’s usually limited to making a picture of a certain size and then resizing it artificially in a program, which is not quite correct.

I think that a confident illustrator must adapt to new technologies and adjust his artistical methods, tips and techniques to certain technological processes.

So, how to draw a web header?

To draw a header that would look appropriate at any screen resolution and on any device (tablet, smartphone) you need to decide how the composition will look like already in the sketch phase, how exactly it will adjust to different sizes.

To solve this problem, you can use two methods. One is easy, and one is hard.
I’ll start with the easier one:

First (easy) method.

You need to draw a picture in three main sizes. Practically, you draw three different types of the same subject. After that, a gadget will be pasting automatically the required picture, according to user’s device (smartphone, tablet or computer) which is used at the moment.

Second method of making a web header

Your task here becomes a bit more complicated and it requires more attention to the details of the composition. It is necessary to take into account all possible sizes, and understand clearly how a certain compositional element will work out; which elements of the illustration will be united, and which will move in screen width.

Using adaptive dimensions, you obtain more freedom, you can play with the composition, create additional dynamic to it.

Additional difficulties you might face in the process of making a web header

Every artist strives to maintain integrity of his illustration while working on its composition in a chosen dimensional frame. As I’ve mentioned before, a perfect composition is made when there is nothing to add and nothing to take away. Here we face a task, demanding from us to make such perfect illustration in all possible sizes – admit, this is quite complicated! It can happen that a picture will look great in one size, but in others (increased or decreased in size) the result will not make you happy.

But please do not feel frustrated! There are some tips that will help you solve any problem regarding dimensions of your illustration.

Lifehack from Multigon. How to draw a website header for a specific screen width.

If you’ve decided firmly that you are going to apply the second method, i.e. moving certain compositional fragments of the header, then I advice you to start your work with a width maximum. The maximum width number depends on technical requirements. If your illustration must be applied to wide-screen, then we take 1400-1600 px range. So there will be no sense for you making an illustration wider than this.

Determining the header’s height, we can now create a full illustration. Height depends on specification of the website: if it’s a media source, then there’s no need in a big header, if it’s a promo-website it will be appropriate to make a bigger header.

To show you a clear example, I’ll operate with real numbers.


1-st illustration size: W =1600 px | H = 500 px
2-nd illustration size: W =1200 px | H = 500 px

In the range between 1600 px and 1200 px the subject will be stretching, so it is very advisable to overlook some “floating” elements, so that part of the subject can be hidden in decreased dimensions and the “floating” part shrink.


3-d illustration size: W =1000 px | H = 500 px

And so on, until width minimum, which should be the smartphone width. We will not take into account all technical characteristics of various smartphones, you can look at this list for further information.

While I will take an average number for a smartphone – 4 inches will give us 640 px. So, 640 px will be our width minimum. In the end, we could answer the question of this article “How to draw a web header correctly?” in one sentence.

To draw a smart illustration, you need to overlook full range of compositional changes it should take from 1600 px to 640 px. 

And that’s all the trouble. Bye!