Wireframing is the practice of drafting a layout before building a fully functional web site.
In the earliest stages, this is often done on good old fashioned paper for rapid sketching and prototyping, or white boards when collaborating in a team.
The next step is often creating the layout using vectors, in a program like Illustrator. Photoshop is also commonly used, though I have no idea why. (Probably because a lot of people are comfortable with Photoshop, even if it's not ideal for this kind of work.)
There are a handful of programs designed specifically for this task. Some of these programs even allow designers to test interactivity like button hovers and animations. We're just going to use Illustrator though - most of you are already familiar with it, and lots of people in the industry use it.
Most of the time wireframing is done in grayscale. This allows designers to better see how objects interact with one another on the page, what takes precedence, where your eye is drawn, etc. Precision is also really important here, so you'll want to use Illustrator's tool palettes for sizing and positioning elements. Get familiar with guides, typing coordinates, and the alignment tools!
Though there isn't really a strict industry standard for how to make one, a wireframe should be detailed enough that it can be translated directly into a web page. This often requires additional annotations and notes. Always put those on a separate layer.
Here are some general tips to get you started:
- Width can either be a common screen width, or the width of your web site.
- Height should be tall enough to show the header, sidebars, and the footer of the page. The screenshot above may or may not be a little short, but you can always change the artboard size later.
- Units: Pixels, since we're designing for screen.
- Color Mode: RGB, since we're designing for screen.
- Raster Effects: 300dpi. Gradients and effects will look better, and most computers should be fast enough to handle that much pretty.
- Preview Mode: Pixel. Again, since our output medium is primarily screen not print, this will emphasize half-pixel imperfections and alignment issues when rendering shapes on the screen.
- Reference Point - on the selected object, this is the point of origin for the X and Y values. Changing the width and height will happen relative to this part of the object too.
- You can use
shift + up/down arrowto increment by 10 at a time. Also supports basic arithmetic. Try it!
20 px +70
- Links or unlinks width and height proportionality.
cmd + r
cmd + '
cmd + ;
cmd + opt + ;
cmd + y
cmd + 1
cmd + 0
cmd + opt + 0
Tools, Objects, etc.
cmd + 2
cmd + 3
shift + o("oh")
cmd + f
cmd + b
cmd + opt + shift + v
click + opt + drag
click + shift + drag
- Don't forget you can also use the grid to help with aligning objects!
- If you've never played with the symbols palette, now's a good time to start.
- Creating graphic styles for buttons and other repeated elements allows them to scale easier.
- Use "place" for other Illustrator documents, to create linked source files that can be updated in one place.
- You can simulate floating elements by selecting the placeholder and choosing Object > Text Wrap > Make.
- Change the color mode in the color palette to grayscale. This won't affect the document's color settings, it just makes it easier to select shades of gray.
- Need a grid or columns? Draw a rectangle outline and choose Object > Path > Split Into Grid.
- Change a font in all objects in one step: Type > Find Font.... Better yet, create a paragraph style!