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
Skill Level Intermediate
Illustrator for Web Design (2012)with Justin Seeley5h 27m Intermediate
Illustrator for Web Design: Core Conceptswith Justin Seeley1h 33m Intermediate
1. Setting Up Your Wireframe
2. Building a Wireframe Library
3. Assembling Your Wireframe
4. Saving and Versioning Your Wireframe
Versioning your projects6m 22s
Where to go from here1m 15s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.