In this tutorial you will learn how to create a website mockup using Adobe Illustrator. Some techniques used in this prototype design tutorial are aligning elements, creating gradients, creating colour palettes, slicing, and editing the outputted HTML.
1. Create a new Illustrator document with the right size:
2. Find some inspiration
In this tutorial, I am going to build a business website that has a warm and inviting theme. If you don’t yet have anything in mind as to how you want your design to look, choose a website online and try to adopt a lot of it’s elements like layout, colour scheme, and behaviours. A good technique to start with is to print out the web page you want to prototype, and with a pen in hand, draw squares around the main sections and give them appropriate names. Common section names are ‘header’, ‘article’, ‘footer’, ‘nav’, and ‘section’. This will not only help you design the prototype, it will also transfer over into the code when you start doing the custom HTML and CSS. Your goal is not to create an exact replica of an existing site, it is to draw some inspiration so you aren’t left staring at a blank screen.
3. Setup your colour groups
In this tutorial, a colour swatch is going to be a colour. A colour group lets you group similar colour swatches together in the Swatches panel.
Under the ‘New’ menu in the Recolor Artwork dialogue box, you should see the colours change as you select a different colour group. What this does is map each colour from the Current Colors to the New colours. This is convenient for when clients request to see how the entire design would look if colours were different.
By selecting a different colour group, you will automatically change the associated colours in your graphics.
I like to create an additional palette for stand out colors, such as for call to actions, menus/navigations and links. To do that, just follow the same steps you just completed but with a vibrant colour. I initially went with red, then opted to go with green as my vibrant colour.
4. Draw the different areas of your site
Most of the work you will be doing in web page prototyping is with Shapes- most notably of which is the Rectangle Tool from the Tools panel.
To ensure that your colour choices work together, stick to the saved swatches that are all of different shades. When you want to lighten one of your swatches, adjust the Opacity found at the top of your workspace.
For the site I am building there will be many sections (listed from top to bottom). The upper area is for the logo and branding. Below that, there will be navigation. Then we will create a page specific banner with an image, headline, preview text, and a link to read more. The next area will be to showcase our most popularly visited articles. They will have a heading, an image, and introductory text. Finally we have the footer containing our contact information and logos of our happy clients. Continue using the rectangle tool to map out each section of your site.
It will be helpful to lock each layer in place before adding more rectangles on top.
5. Place the stock images provided to you by clients about the business. Ensure that that you have copyright permission to use these.
6. Add a gradient
7. Add headlines and text.
8. Make the navigation
Next, we can use our prototype to build the working site with HTML & CSS.
9. Choose between slices or custom CSS and HTML
Search engines really love semantic code. This means that they want to be able to decipher the type of information that is displayed on a web page. Using slices is not always the best approach to make the search engines happy. Keep in mind, using proper HTML and CSS for text based items, such as navigations and articles is best. Though, graphic artists will more greatly benefit by using slices when they aren’t interested in coding. For this tutorial I will demonstrate how to use slices.
File -> Save for Web & Devices… -> Save -> Change Format to HTML and Images:
10. View the finished product in a browser:
Adobe Illustrator is a great tool for prototyping websites. It doesn’t take too long to be able to design a professionally looking markup that you can use to get client feedback before developing.
About the Author
Michael Sadler teaches professionals in how to learn web development. He has a Commerce degree from the University of Alberta School of Business in Management Information Systems and a certificate as a Web Developer from NAIT. He founded New Venture Websites, a custom website development company. He is found on Twitter: New Venture Websites.
Today, I am giving away Web Design Riches, the ultimate guide on how to run a profitable web design business. Enter your name and email below to get instant access.