How to Assemble and Layout Correctly a Website in Illustrator (Example)

Is not more create one visual image of the appearance you want your website to have. Layout your website before building it, it can give you an idea of ​​what the elements will look like and what you need. It is a simple process that you can do from Illustrator.

How to build a website in Illustrator

Any version of Illustrator can be useful, as we will only use basic tools of the application. Before starting, keep in mind that all the elements of a website must be one click away and less is always more.

Set up the document

  • Open the Illustrator application.
  • Create a new document, use the shortcut command Ctrl + N.
  • Enter the name of the file.
  • Enter the dimensions of the sheet. These measurements correspond to an image on a large monitor.
    • Width 1024 px.
    • Height 1479 px. This value may vary according to the elements you need to add to your website.
    • Choose Vertical orientation.
  • As it is a design focused on a digital result, choose the RGB color mode.

Organize the areas of the website

At this point you should be clear about the elements you want to add to your web page. Add colored rectangles to divide the areas of a page, such as the header, body, and footer.

You may also be interested in:


  • At the end lock layer not to move these elements.
  • Create a new layer to place the web elements.

Within each area make a subdivision for each content. For example, a box to mark the place where an image goes or rectangles to mark the place of a text.

  • Lock this new layer and create another one for content like buttons, images, and text.

Add guidelines

Use the guidelines as reference so that each element of the web is placed properly. The images, the text, the logo and the buttons have to be well structured.

  • Simply click on the ruler on the artboard and drag the cursor to a point on the sheet.
  • You can deactivate the guides at any time by pressing the keys Ctrl + semicolon.

Insert web elements

Now add all the elements that your website has. Add the logo to the header along with the title or a banner. Images and graphics are important to give it a true finish, as well as the social media icons.

Add the text of the page taking into account the style of the font you are going to use, as well as the buttons. As you progress, you can see more clearly which elements you need and which you can do without.

Add colors

Finally, unlock the two previous layers and remove gray blocks in each area of ​​the website. Assign the color to each area such as the header, body and footer.

To the other elements like figures or texts within the site you must also assign a color to it. When everything is ready save the document with the File / Save for web option, to save it in a lightweight format.

Reasons to layout a website

Analysis and design of a website before doing it

In the professional development of any website, the analysis process it is essential for the project to be successful. The idea is to be able to graphically interpret the appearance of a site and save many hours of programming.

By designing a site you can understand how it works and if the initial approach meets the requirements to be a viable solution. Showing a graphical image of the site to the customer before starting saves a lot of time on redesign.

The initial design gives you an idea of ​​the behavior of the page and the layout of the content. The simpler this initial image is displayed, the easier it is to interpret.

How useful did you find this content?

Click on a star to rate!

Average score 0 / 5. Counting of votes: 0

So far, no votes. Be the first to rate this content.

I'm sorry this content was not useful for you!

Let me improve this content!

Tell me, how can I improve this content?

You may also be interested in:

Deja un comentario