Creating a wireframe - High Fidelity - Illustrator
Questions
Student Gallery
Be the first to share something.
Course info
Overview
- You'll need a copy of Adobe Illustrator CC 2017 or above. A free trial can be downloaded from Adobe.
- No previous design skills are needed.
- No previous Illustrator skills are needed.
- 45 lectures 4 Hours 7 minutes of content!
- You'll learn to design a website with in Adobe Illustrator.
- User Interface essentials.
- 27 Completed files so you never fall behind.
- Learn how to wireframe at all levels
- How to design for a responsive website.
- Downloadable exercise files & cheat sheet.
- Forum support from me and the rest of the BYOL crew.
- Techniques used by professional website designers.
- Professional workflows and shortcuts.
- A wealth of other resources and websites to help your new career path.
- This course is for beginners. Aimed at people new to the world of web and UI design. While no previous Illustrator experience is necessary.
Course duration 4 hours
Daniel Walter Scott
Founder of Bring Your Own Laptop & Chief Instructor
I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.
Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.
Downloads & Exercise files
Transcript
But if you are pretty confident with Illustrator already... you might want to skip along this one. First of all I'm going to grab my rectangle tool. We could just use wire boxes. I like to use just a little bit of gray in the box... and a black stroke on the outside, with 1 pixel, '1px'...
which just means I'm going to draw the box. It’s going to represent where my logo goes, about there. I like that kind of off-white just to make it... easy and clear with the different elements. Now, in terms of elements, to impress people, when you are at your meeting. Call it page furniture, and keep a straight face.
it's kind of a name for these types of things, the furniture on the page. Kind of stolen from print, but impresses people. Sounds like you are in the business. The other thing to do is, try not to design this far away. I'm going to zoom down at 50% just so I could see the different artboards... but you want to be designing this thing, or at least mocking it up.
and at actual size, so it’s going to look like on an actual website... not kind of zoomed in, or zoomed out too far... because you're going to make some poor decisions in terms of design. To do it, you hit 'Command 1', or 'Control 1' on a PC... or the long way, 'View', 'Actual Size'. That's what it's going to look like on an actual website.
So I feel that logo is now a bit too tall. And you got to make sure, when you're dragging these boxes... that you do it in the columns. Don't try and do that, where it kind of straddles one of these gutters. It has to line up with the edge of one of these columns. It can't go across one of the gutters, so column to column.
And I'm going to add a bit of a type just to indicate that this-- I'm going to click ones down here, and type in 'Logo'. Font sizes... don't worry about it. 16 pixels is about 12 points in real life. So if you have to print this off, it's nice and original. I'm going to start drawing this out, I'm going to copy and paste this guy...
by selecting both of them, holding 'Shift', and then go 'Copy' and 'Paste'. That's 'Edit' 'Copy', 'Edit' 'Paste', or 'Control C', 'Control V'. And I'm going to make this my navigation. Remember, not straddling, put in the columns. And in terms of the text here, I'm just going to drag it over. It can be a little hard to drag, this text...
especially when you are zoomed out a little bit. You see they're kind of dragging the edges a little bit. The more you zoom in the easier it is to move things around. Or you can just use your arrow keys on your keyboard. If you hold 'Shift' while you drag using arrow keys on your keyboard... it kind of like does it in big chunks.
So I'm going to stick mine in the middle there. I need to change the text. I'm going to dump it across a little bit. Okay, back to 'Command 1' on my Mac, or 'Control 1' on your PC, actual size. Sometimes it's really hard to see with all these columns on as well. So there's a really nice shortcut to turn the columns on and off.
The long way is under 'View', 'Guides', 'Hide Guides'. But you can see here, this is the shortcut... 'Command ;', or 'Control ;' on a PC. I'm holding down 'Command' and just tapping ';' I use this all the time when I'm designing... because it's like, need it lined up, need to see it. Next bit is, there's going to be a nice big, what's called a Hero box So I'm going to grab my rectangle tool here, pick on my colors, and things...
so off-white, black around the outside, one pixel. I'm going to draw-- It's called the Hero box, that kind of big slab in the middle. sometimes it rotates, but it's that big kind of like... "Hey, this is us, and this is what we're doing. Welcome." So that's our box, and I'm going to add a bit of type to it. What I've done previously is I've clicked once...
and typed, it types on forever. What I want is what's called the fixed width box. I'm going to delete that using delete on my keyboard. And what I'm going to do is grab my type tool again... which is this guy here, the capital 'T'. And I'm going to make sure I start on this side of my column.
I'm going to click and drag, and if you drag a box out... it means it's going to have like a fixed width. This means, it's going to kind of like bang up to the edge... and then loop back around. Now this text is far too small, I want this big. Like an inspirational, 'Come, do work with us' thing...
we're going to put there, and I'm just going to bump off the file size. So the file size, not too something quite large. A cool little shortcut is, with it all selected, like it is here. You hold down the 'Command Shift', and tap the full stop key. So, 'Control Shift' on a PC, and tap the full stop key on your keyboard. And it just makes it nice and big.
A comma makes it smaller. They're kind of next to each other, up and down. So we have something that looks like that. If you hate hyphens like I do, you can do a select it all. So I kind of triple clicked it, kind of selected it all. And you can go to your 'Paragraph' tab here and turn 'Hyphenate' off.
I'm probably going to have to triple click it again. I want my font a little smaller. It sits in here, I grab my black arrow. I've got this box just to kind of-- that's what I want. The next thing I want is going to be-- There's a 'Call To Action' button down here. Why it goes there?
I don't know. It becomes a style. You need big inspirational quotes that defines you. And then you need a button underneath. That's your 'Call To Action'... your 'Come buy this thing', or 'Contact me', or something like that.
So, there's my button, and you can see mine's kind of come... and defaulted to black, center, but no stroke on the outside. I want it to be like the rest of the buttons, so what you can do is... you can start using the eyedropper tool. so this one, the eyedropper tool, select it, and I click on this guy. And you'll see he'll steal the styling from this guy...
this navigation along the top. I'm going to click on this, grab my logo, copy and paste it. You're going to be my 'Amazing Call To Action'. I probably won't put 'Amazing' on it if I'm sending it to a client. I get very professional about it all. Nice!
So the next thing I want to do is... I want to put in some thumbnails underneath here. I'm going to put three of them... and they're going to span four columns each, to make up the twelve. But the bottom of the page is stuck down here... so I'm going to grab the Artboard tool.
I want to zoom out a little bit so I can see it all. And I'm going to make it a bit bigger, so I'm just going to grab the bottom. You can make it as long as you like, I tend to make it just really long. And then, when you're finished... drag it out rather than keypadding to move it down. Back to 'Command 1' to get to the right size.
So, rectangle tool, I'm going to have a fill of my off-white. I'm going to have-- Oops, I've got that selected, can you see? My text's selected when I was changing there. and that means that it's changed my text to have that off-white color. It's there but it's the wrong color, so we'll undo that, 'Edit', 'Undo'. I'm going to have nothing selected, black arrow.
Click on the background, done, grab my rectangle tool. I'm going to draw something else roughly about that size... it's going to span 4 columns. Now, to indicate that it's not a button kind of thing... to indicate it's an image, people put a cross through it... or they use these special image size, you can see it over there...
kind of like landscape looking thing. So what we're going to do is grab the 'Line Segment Tool'... and we're going to draw that. I could start dragging this one over, but I want to get the angle right... so it's easier to grab the black arrow, click off... make sure you've just got this guy selected.
I want to go to 'Edit' 'Copy', 'Edit' 'Paste'. And up the top here, we can go to 'Object', 'Transform', 'Reflect'. I'm going to use horizontal. Click 'OK', and it'll just kind of flipped it over. Now, I'm just kind of jam it close to it, not worried too much... because I'm going to select all three of them.
and there's one up here that says align horizontally, and vertically. I want my rectangle back up. I'm going to group them, I'm going to go to 'Object', 'Group'... and I'm going to hold down 'Alt' key... and click and drag one out, and it kind of makes a duplicate-- oh, we're dragging, so hold down 'Alt'. You'll notice that when we hold 'Alt' it just kind of moves it across.
And often it lines up, and you can force it through, while you're dragging... so holding 'Alt', you can hold 'Shift' as well. It just makes everything lined up. Straight up and down. Great! So, a lot of time I just do these crosses, people fancy it up.
You can see this graphic here, it's like an universal Ironman image. You can add that extra complexity to it. There's no real drama for it, you might like it. You can just use the line segment tool and start drawing mountains. You might have to increase the stroke width to match that. And if you're looking for the Ellipse tool...
it's just under the rectangle tool here. And you can mock up your own version of that. So I've got my images, what I want to do now is... I want to finish off a couple of things. This is where you might skip along... because it's just going to be a little bit repetitive.
and what I'll actually do is I'll probably stop... this video right now and the next video you can skip... because that is me just filling this out. And I'm going to line up the tablet version as well. It’s not going to be super exciting, but-- I'll see you in the next video, or the video after that.
How do you create a website wireframe in Illustrator?
Use simple rectangles and text to block out your logo, navigation, hero section, call to action and image placeholders. Work at actual size, align elements to your column guides, and keep the styling consistent with pale grey fills and thin black outlines. Group and duplicate repeated elements to save time.
Creating a Website Wireframe in Adobe Illustrator
Key takeaways
Build a clear page layout with simple boxes and readable labels.
Use actual size and column guides to judge proportions properly.
Create a hero headline with fixed-width text and a button underneath.
Copy styling quickly with the Eyedropper tool.
Make reusable image placeholders for a three-column thumbnail row.
A wireframe can look wonderfully unexciting: grey boxes and some type. Nice and simple. The important part is making it clear where the different bits of the page belong, without getting caught up in the finished design.
For this layout, we’re building a header with a logo and navigation, a large hero section with a headline and call to action, and three image placeholders underneath. Start with an artboard that already has your column guides in place. The thumbnail row will use a twelve-column grid.
1. Draw the logo placeholder
Grab the Rectangle tool and draw a box near the top-left of the page to represent the logo.
You could use a plain white box. I prefer a little grey in the fill, with a black, one-pixel stroke around the outside. That slight contrast makes it easier to distinguish the page elements from the white artboard.
Keep that styling consistent as you build:
Fill: off-white or very pale grey.
Stroke: black.
Stroke width: one pixel.
If you want a slightly grander name for these layout elements, call them page furniture in your next meeting. Keep a straight face. It’s a term borrowed from print, and it does sound rather professional.
Check proportions at actual size
Zooming out is handy when you need to see several artboards, but it’s not a great way to judge the size of a logo or a button. Something that seems perfectly reasonable at 50% can feel much too tall once you return to the intended scale.
Use View > Actual Size, or its shortcut:
Mac: Command + 1.
PC: Ctrl + 1.
Return to this view regularly. If the logo box now feels too tall, shorten it before carrying on.
Align the edges to columns
Your rectangles should start and finish on column edges. An element can span several columns and the gutters between them, but its outer edge shouldn’t finish halfway through a gutter.
Think column edge to column edge, rather than somewhere vaguely close. That applies to the logo, navigation, hero box and thumbnails.
2. Add labels and build the navigation
Select the Type tool, click once and type a simple label such as “Logo”. Move it inside the rectangle.
You don’t need to agonise over the exact label size. Around 16 pixels is a useful starting point, roughly equivalent to 12-point type, so it remains readable if you print the wireframe.
To create the navigation placeholder:
Use the black-arrow Selection tool and hold Shift to select both the logo rectangle and its label.
Copy and paste them using Edit > Copy and Edit > Paste.
Move the duplicate to the right-hand side of the header.
Resize the rectangle, keeping its edges aligned to the column grid.
Change the label to “Navigation” and position it inside the box.
The copy shortcuts are Command + C and Command + V on a Mac, or Ctrl + C and Ctrl + V on a PC.
Move small text without fighting it
Small labels can be fiddly to drag, especially when you’re zoomed out. You can end up grabbing an edge rather than moving the text.
Zoom in temporarily, or select the label and use the arrow keys to nudge it. Hold Shift while pressing an arrow key to move it in bigger increments. Once it’s positioned, return to actual size.
Toggle guides while you work
Column guides are brilliant for lining things up. They’re less brilliant when you want to see the layout without a forest of lines over it.
Use View > Guides > Hide Guides, or toggle their visibility with:
Mac: Command + semicolon.
PC: Ctrl + semicolon.
This becomes a useful little rhythm: guides on to align things, guides off to check the result.
3. Create the hero section
Below the header, draw a large rectangle using the same pale fill and black outline. This is the hero box, the big introductory area that establishes who you are and what you do.
Some websites use rotating content here, but you don’t need to build that detail into this simple layout. For now, the large box marks out the space.
Use a fixed-width text box for the headline
Clicking once with the Type tool creates text that continues along a line as you type. That’s fine for a short label, but not what we want for a headline that wraps across several lines.
Instead, select the Type tool and click and drag a text box inside the hero area. Align its starting edge to a column guide. This creates fixed-width text, so the words wrap when they reach the right-hand edge.
Add placeholder text to establish the headline’s size and shape. It’s standing in for a large introductory message, perhaps an invitation to work with you.
Adjust the font size quickly
Select the text and use these shortcuts to test its size:
Make it larger: Command + Shift + full stop on Mac, or Ctrl + Shift + full stop on PC.
Make it smaller: Command + Shift + comma on Mac, or Ctrl + Shift + comma on PC.
The comma and full stop sit next to each other, which makes it easy to bump the size up and down until the headline feels right.
If hyphenation starts chopping up your headline, select the text and turn off Hyphenate in the Paragraph panel. Then adjust the font size if necessary so the visible text fits comfortably.
Finally, use the Selection tool to bring up the bottom edge of the text box, leaving only the height you need.
4. Add a call-to-action button
Draw a smaller rectangle underneath the hero headline. This is the call to action: the button that asks someone to buy something, contact you or take another next step.
A large introductory message followed by a button is a familiar layout. We’re marking out that relationship here, not finishing the button’s visual design.
Copy the styling with the Eyedropper tool
Your new rectangle might inherit a black fill and no outline. Rather than resetting everything manually:
Leave the new button rectangle selected.
Select the Eyedropper tool.
Click an existing placeholder, such as the navigation rectangle.
The button picks up the existing object’s appearance, giving it the same fill and stroke.
Copy and paste an existing label, move it into the button, and change the wording. A straightforward label such as “Call to action” is enough for this stage. You can make it sound amazing while you’re working, but I’d keep the wording professional before sending it to a client.
The headline and button establish the main message and the next action.
5. Make room for the thumbnail row
We’re adding three thumbnails underneath the hero section. Each will span four columns, making up the full twelve-column grid.
If you’ve run out of space at the bottom of the page, select the Artboard tool, zoom out enough to see the lower edge, and drag that edge down.
I often make the artboard generously long, then pull the bottom back up when the layout is finished. It saves repeatedly extending it every time another section needs space.
Return to actual size before drawing the thumbnails.
Avoid changing the wrong object’s colour
Before setting your rectangle’s colours, check what’s selected. If a text label is still selected, choosing an off-white fill will recolour the text instead. It hasn’t disappeared; it’s just become very difficult to see.
If that happens, use Edit > Undo. Then switch to the Selection tool and click a blank area to deselect everything before drawing the new rectangle.
6. Build a reusable image placeholder
Draw the first thumbnail rectangle across four columns. Use the Eyedropper tool to apply the same pale fill and thin outline as the rest of the wireframe.
A plain rectangle could be mistaken for a button or another content box. To show that it represents an image, put a diagonal cross inside it.
Create matching diagonal lines
Select the Line Segment tool and draw one diagonal across the rectangle.
Switch to the Selection tool, deselect everything, then select only that line.
Copy and paste the line.
Choose Object > Transform > Reflect.
Select Horizontal and confirm to flip the duplicate.
Move the reflected line into the rectangle.
Select the rectangle and both lines, then use the horizontal and vertical centre alignment controls.
Reflecting the first line is easier than drawing the second one by eye and trying to match the angle. The alignment controls then bring all three pieces neatly together.
Group and duplicate the placeholder
Select the rectangle and both diagonals, then choose Object > Group. Now the placeholder moves as one unit.
Hold Alt, or Option on Mac, while dragging the group to create a duplicate. Hold Shift as well during the drag to keep the movement straight.
Repeat for the third thumbnail, placing each copy across its own four-column span and leaving the gutters between them.
Each grouped image placeholder spans four columns, creating a tidy row of three.
Keep image symbols simple
The diagonal cross is usually enough. If you prefer the familiar landscape-style image symbol, you can sketch mountain peaks with the Line Segment tool and add a small circle using the Ellipse tool, found under the Rectangle tool.
Adjust the stroke width if needed to make the symbol consistent. There’s no drama either way, but extra detail isn’t necessary just to communicate “an image goes here”.
Check the layout before adding more detail
You now have the main desktop structure: logo, navigation, hero headline, call-to-action button and three thumbnails.
Return to actual size, hide the guides briefly, and check that the proportions feel sensible. Turn the guides back on to check alignment. The remaining page content can be built with the same rectangles, text boxes and duplicated groups.
A tablet layout is a separate next step. For now, keep this wireframe clear and consistent. It doesn’t need to look flashy; it needs to explain the page.
Key terms
Wireframe
A simplified page layout made from placeholders and text. Here, it shows the position and relative size of the main website elements.
Page furniture
A term borrowed from print for elements that furnish the page. In this layout, it’s a useful way to refer to the structural boxes and labels.
Gutter
The space between columns in a grid. Elements can span multiple columns, but their outer edges should align with column edges rather than end inside a gutter.
Hero section
The large introductory area beneath the header. It contains the main message and, in this example, a call-to-action button.
Fixed-width text box
A text area created by clicking and dragging with the Type tool. Text wraps when it reaches the box’s right-hand edge.
Call to action
A prompt to take a next step, such as buying something or making contact. In this wireframe, it is represented by a labelled button beneath the headline.
FAQs
How do I show or hide column guides in Illustrator?
Use Command + semicolon on Mac or Ctrl + semicolon on PC. You can also use View > Guides > Hide Guides to hide them.
How do I make headline text wrap inside a box?
Click and drag with the Type tool to create a fixed-width text box, rather than clicking once. Text will wrap at the right-hand edge of the box.
How do I give all my wireframe boxes the same appearance?
Select the box you want to change, choose the Eyedropper tool, and click a correctly styled box. This copies its appearance to the selected object.
How do I duplicate an image placeholder without losing alignment?
Group the rectangle and its diagonal lines first. Hold Alt, or Option on Mac, while dragging to duplicate it, and hold Shift during the drag to keep the movement straight.
Written by Daniel Walter Scott — Founder of Bring Your Own Laptop & Chief Instructor
