Scan your Sketch and make a Wireframe in Illustrator
● Design Always Begins with Paper and Pencil!
● Then move to the computer and create a Wireframe to present your ideas to clients for approval before coding.
● Think in terms of BLOCKs of information: Text, pictures, colors, links, all grouped in orderly rows & columns.
Sketch your Design
Design Always Begins with Paper and Pencil!
✓ Sketch the layout for your web site design on a blank piece of paper …
Text • Borders • Backgrounds • Margins
Padding • Header / Logo • Navigation
✓ Include EVERYTHING in your Drawing:
Buttons • Links • Banner • Header
Images • Colors
✓ As much detail as you can - interactive elements like:
Video • Java Slideshows • Content Areas • Ads
Photos • Galleries • Contact Info Area • Footer
✓ Let your imagination go. Don't worry about coding yet. Better to overestimate your abilities rather than underestimate.
✓ The closer your "mock up" design is the better the end product will be.
Then Move to the Computer:
These are Wireframes created by students following this Tutorial.
Step #1: Open Illustrator ~
✓ Open a new Web Document in Illustrator …
✓ Set your dimensions to 1280 x 1500 pt:
Step #2: Rectangle Tool ~
✓ Get the Rectangle Tool or hit the keyboard shortcut letter (m) …
✓ … and click somewhere on the artboard.
✓ Set your rectangle size to 900px x 1400pt.
Step #3: Align ~
✓ Open the Align panel by going to: Window > Align, click the Fly-Out menu and select "Show Options" and select Align to Artboard …
✓ Make sure your box is selected and click “Horizontal Align Center” … >
✓ … and “Vertical Align Center” too.
✓ Your box should now be centered inside your document.
Step #4: Guides ~
✓ Turn this box into a guide by going to: View > Guides > Make Guides or use the keyboard shortcut: Cmd(⌘)+5
✓ You should now have your “live area” guide in the center of your document:
Step #5: Another Rectangle Guide ~
✓ Get the Rectangle Tool again (m) and make another new rectangle 860px x 1360px …
✓ … and align that box inside the artboard again so you will have a margin of 20px between them …
Step #6: Split into Grid ~
✓ Before you turn this box into a guide, go to: Object > Path > Split Into Grid …
✓ … and select 3 columns with a 40px gutter:
Step #7: Make Guides ~
✓ Finally, make everything into guides by going to: View > Guides > Make Guides.
Step #8: Layers ~
✓ Open your Layers palette by hitting F7, lock the layer and rename it …
✓ … and make a New Layer BELOW the outline layer by holding down + and clicking
Step #9: Scan your Drawing ~
✓ Scan your completed layout drawing and go to: File > Place and paste it onto your new document - (you may need to zoom out for this next part
✓ … and use the Selection Tool to adjust the size of your scan to fit the available space.
✓ If Necessary, hit Embed to make sure your scan is fully attached to your document.
✓ If Embed isn't clickable, it's already done, don't worry about it!
Step #10: Template Layer ~
✓ Since you’ll be working over the top of this reference image and you want it to remain untouched, you’ll need to make a template out of it. Open the Layers palette, click the drop down menu in the upper corner of the Layers Palette and select Template.
✗ Changing a layer to a "Template" layer reduces the Transparency to 50% so you can see what you're doing, turns the eye in to the template icon and locks the layer .
Step #11: New Layer ~
✓ Make another new layer above the template layer …
Step #12: Smart Guides ~
✓ Make sure Smart Guides is on by going to: View > Guides > Smart Guides …
✓ Remember: Most web pages consist of 5 main components: Header - Navigation - Content - Container - Background
Step #13: Header ~
✓ Start with the header: Open the Swatches icon or go to: Window > Swatches …
✓ … if you've chosen your Kuler colors already from this tutorial pick the color you want to use (or choose the closest equivalent) and get the Rectangle Tool or hit the keyboard shortcut letter (m) …
✓ … and draw a box to indicate where your elements will be.
Step #14: Continue ~
✓ Draw a box for every element on your page, including your Navigation: Horizontal or Vertical?
<= OR =>
✓ Add a content areas, footers, backgrounds, everything. Label all the areas. Include hex colors, links, logos, background images - everything you've got at this point in your design process.
✓ The idea of a wireframe is to help your client understand what your design will look like so add as much detail as you can.
Last Step: Save Your Project & Attach ~
✓ Go to: File > Save as.. and save it as an .ai file
Other Resources: Very artistic designs: http://www.beljaev.com/. Maybe they will inspire you to create something really spectacular.
More examples: http://www.webstyleguide.com/page/grids.html Still more examples: http://www.webdesignfromscratch.com/current-style.cfm#simple-layout
Why You Should Create a Wireframe First - Propaganda Party
Jason Santa Maria | Gray Box Methodology
WWF | And all that Malarkey
Web Site Wireframe's – Samples, Examples : FatPurple
Website wireframe - Wikipedia, the free encyclopedia