Creating a Website Wireframe File in Adobe Illustrator

In this video, we'll create our website wireframe file. Let’s begin by creating our new file. To do so, we'll go to File, New, and here we'll see our new document window along with different presets.

From here, we'll navigate to our Web presets since we'll be creating a website wireframe. We'll then select 'Web Large 1920 × 1080 pixels' and give our file the name 'website Wireframe.' We'll double-check that the width and height are 1920 × 1080 and then click Create.

Next, let's save our file by going to File, Save As, and we'll save this as 'website Wireframe' within our folder. We’ll make sure this is an Illustrator file (.ai), and click Save and OK.

Next, we'll work on our workspace. Within Illustrator's interface, we have multiple panels and tools, including our menu bar, file, toolbar, and other panels. However, to work on different projects throughout this course, we’ll want to make sure we're working within the same workspace.

A workspace is an arrangement of all the panels and bars in our interface. To edit our workspace, we'll go to the top-right corner of our interface and select 'Essentials' or whichever workspace is currently used in your interface. In this case, let’s select 'Essentials, ' and we’ll reset our workspace to the default essential settings by clicking the dropdown and selecting 'Reset Essentials.'

We’ll see that all our panels and toolbars return to the default, and we can now make some changes. The first change we’ll want to make is adding our control bar. To do this, we’ll go to Window and select 'Control.'

As we can see, we now have our control bar right under the top menu. Next, let’s add a couple of panels to the right-hand side of our screen. To do this, we’ll go to Window and this time select 'Color.'

As we can see, we now have our color panel as well as Color Guide. While we won’t be using Color Guide for this course, we can right-click on it and select 'Close.'

Next, let’s move our color panel to the right of the Properties panel. To do this, we can click on the tab showing Color and drag it to the right-hand side until we see the blue box surrounding all the panels.

---

We’ll release and see that we now have Properties, Layers, Libraries, and Color. Since we won’t be using Libraries, we’ll right-click and select 'Close, ' so we only have these three layers.

Next, let’s move the Layers panel to the bottom. To do this, we’ll select Layers by clicking on the Layers text, and then click and drag it to the bottom until we see the blue bar.

We’ll release and see that we have our Properties panel on top, Color to the right, and Layers below.

Next, let’s add one more panel to our right-hand side. To do this, we’ll go to Window, and from here we’ll select 'Color Themes.'

As we can see, Adobe Color Themes comes up. Let’s again click and drag this panel to the right, releasing when we see the blue box around Properties and Color so that it adds to the right-hand side.

If we select Properties, we can add a little more space between our Properties panel and Layers panel by clicking on the divider until we see the two arrows and dragging it down.

Additionally, we can also stretch out this right-hand side by clicking the separator to the left until we see the two arrows and dragging it to the left.

Next, let’s edit our toolbar. To do this, we’ll go to the far-left side where we have our toolbar. We can then select 'Edit Toolbar, ' and go to the top-right side, clicking the bullets icon, and select 'Advanced.'

---

By selecting 'Advanced, ' we’ll see that our toolbar now contains additional tools that we’ll be using throughout this course.

As one final change, we’re going to add rulers to our workspace. To do this, we’ll go to View, then to the bottom, where we can hover over 'Rulers' and select 'Show Rulers.'

As we can see, we’ve now completed our workspace and we’re ready to begin.

Let’s save our workspace by going to the top where we see 'Essentials' and clicking this, then selecting 'New Workspace.'

For our title, let’s type 'VDCI Int' for Intermediate and click OK.

With our workspace completed, we’re now ready to begin working on our file.

Let’s hit CTRL S on the keyboard to save our work, and in the next video, we’ll begin adding guides and start strategizing the layout for our website wireframe.

See you in the next video!

---