How to properly assemble and layout a website in Illustrator

It is worth creating a 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, since 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 portrait 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 that you want to add to your web page. Add colored rectangles to divide areas of a page, such as the header, body, and footer.

  • When finished, lock the layer so as not to move these elements.
  • Create a new layer to place the elements of the web.

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 a 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 disable the guides at any time by pressing the Ctrl + semicolon keys .

Insert web elements

Now add all the elements that your website has. Add the logo to the header along with the title or banner. Images and graphics are important to give it a real finish, as well as 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 the gray blocks in each area of ​​the website . Assign the color to each area such as the header, the body and the footer.

You must also assign a color to the other elements such as figures or texts within the site. 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

In the professional development of any website, the analysis process 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.


Leave a Comment