Utilizing Illustrator to Create Website Wireframes
Pluralsight
Course Summary
In this series of tutorials, we'll talk about some of the steps that you'll go through when using Illustrator to build a website wireframe. Software required: Illustrator 17.1.0.
-
+
Course Description
In this series of tutorials, we'll talk about some of the steps that you'll go through when using Illustrator to build a website wireframe. We'll start by talking about the purpose of our site and our client needs. We'll set up our artboard for our home page and talk about the importance of the 960 grid system. We'll go over the 12 column grid and how it can help us now and further along the development process. Next we'll talk about the great tools in Illustrator that help us quickly and easily create elements for our wireframe, duplicate them and reuse them for other pages. We'll also go through the process of taking a wireframe from low-fidelity to medium-fidelity. We'll finish by talking about responsive design and creating a wireframe for a tablet and a smartphone. By the end of this training you should feel more confident when using Illustrator to create website wireframes. Software required: Illustrator 17.1.0.
-
+
Course Syllabus
Introduction and Project Overview- 0m 53s
—Introduction and Project Overview 0m 53sUtilizing Illustrator to Create Website Wireframes- 1h 21m
—Setting up an Artboard for Wireframes in Illustrator 5m 31s
—Creating Columns and Guides for Website Wireframes 8m 32s
—Wireframing the Home Page Elements 9m 12s
—Wireframing the Services Page Elements 7m 11s
—Wireframing Elements for the Staff Page 8m 3s
—Creating a Wireframe for the Contact Us Page 6m 33s
—Transitioning from a Low-fidelity Wireframe to a Medium-fidelity Wireframe 9m 17s
—Fleshing Out the Rest of Our Wireframes 10m 32s
—Illustrating Responsive Design for a Tablet 8m 31s
—Illustrating Responsive Design for a Smartphone 8m 19s