website sketch

Summary:

Scan your Sketch and make a Wireframe in Illustrator

    ● Design Always Begins with Paper and Pencil!


Learn About:

    ●   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.

  •   This tutorial is part of the Design Your Identity, Art Genres and What in the World? Projects.


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

sketch your layout

website-layout-sketch.jpg

sketch your layout

 

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

web document

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.

900 x 1400


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” … >

horizontal align center

… and “Vertical Align Center” too.

vertical distribute


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  …

860 x 1360

… and align that box inside the artboard again so you will have a margin of 20px between them …

guides


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 lock the layer and rename it …

… and make a New Layer BELOW the outline layer by holding down +cmd key 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 lock.

 

wireframe backgtround


Step #11: New Layer ~

Make another new layer above the template layer …

new layer above template layer


Step #12: Smart Guides ~

Make sure Smart Guides is on by going to: View > Guides > Smart Guides

smart guides


Remember: Most web pages consist of 5 main components: Header - Navigation - Content - Container - Background

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


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) …

rectangle-tool-ai.png

… and draw a box to indicate where your elements will be.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player



Step #14: Continue ~

Draw a box for every element on your page, including your Navigation: Horizontal or Vertical?

horizontal navigation

<= OR =>vertical navigation

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.

content

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.

wireframe detail


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

http://www.mightymeta.co.uk/responsive-web-design-sketch-sheets/

http://www.sccc.premiumdw.com/web200/creating-a-website-wireframe-in-illustrator/ and https://moqups.com/#!/