Join Justin Seeley for an in-depth discussion in this video Creating a layer structure for your wireframe, part of Illustrator for Web Design: Wireframing.
- Another tool that I make use of all the time…when I'm creating mockups inside…of Adobe Illustrator is the Layers panel.…The Layers panel is a great way…to add different layers, as it were, (chuckles)…of interactivity and notation…to your mockups inside of Illustrator.…So what I'm going to do now is open up…the Layers panel and drag it out onto the screen,…and as you can see, inside of this file…I actually have four different layers.…And this is the usual layer structure…that I use when I'm creating app mockups…or wireframes inside of Illustrator.…
So what I start off with is a basic, generic UI layer.…This layer is where all of the basic UI elements…for the app or the website that I'm creating go.…So all of the buttons, all of the images,…all of the text, everything like that,…that all goes on this layer.…If I'm adding any sort of chrome to it,…like, for instance, the iPhone silhouette…that's out here, that also goes on this layer as well,…and as of right now this is the only layer,…besides my Notes layer, that is currently visible.…
Miss part one? Check out Illustrator CC for Web Design: Core Concepts.
- Choosing a color scheme
- Creating a layer structure
- Targeting specific devices
- Building a wireframe library
- Adding UI placeholders
- Assembling your wireframe
- Saving and versioning a wireframe