Join Justin Seeley for an in-depth discussion in this video Using symbols vs. libraries, part of Illustrator for Web Design: Wireframing.
- The wireframing process is usually one that can be expedited by creating prebuilt objects called user interface elements, and in this chapter we're gonna be talking about how to build up your own wireframe library so that you can easily pull these elements into your compositions to expedite your sort of thinking process as you create these wireframes. So the first thing I wanted to address is something that I've never really had to address before in one of these courses because, for the most part, I would use the Symbols panel to create and manage all of the assets like this that I create.
However, recently Adobe has released something called the Adobe Creative Cloud Libraries, which makes it easy for you to sync assets from one Creative Cloud account to another. The Libraries panel inside of Illustrator can be found by going to Window, Libraries, and that will bring up something that looks mostly like this. So when you first start off, you're just gonna have this blank library inside of it. You can see I've already been playing around with it a little bit and created my own user interface library that you see here. But the My Library panel is what you'll see when you first start it up. Now, I talked a little bit about symbols before.
Well, that's the panel that I used to use for stuff like this until libraries became the new thing to do. So a symbol, if you're not aware, is a way in Illustrator of preserving a certain piece of artwork for use later on, and repeated use throughout the course of a project. Symbols have traditionally been the repository for all of my user interface elements and where I stored all of it because I could easily then save those out as a Symbols Library and transfer them from one computer to another if you have either an application like Dropbox or using a thumb drive or syncing it up to my Creative Cloud account or whatever I use.
Symbols have almost entirely been phased out for my workflow in terms of this because I now use Creative Cloud Libraries. So you might be wondering a little bit about what the difference is. Well, first of all, let's take a look at the workflow differences between symbols and libraries. So when we are working with symbols, if I wanted to add one of these to the Symbols panel, all I have to do is just drag and drop it over. It would then ask me what I wanted to name this, so I can name it something like Thumbnail. You would then choose what type of symbol it is.
For this case, it doesn't really matter. I'm gonna select Graphic, set my Registration point to the center. And if you want to enable 9-Slice Scaling or Align to Pixel Grid, you can do so. If you need more explanation on what any of this stuff means, you can check out my Using Symbols in Illustrator course here at Lynda.com. And then once I hit OK, that's going to create a new symbol for me. And I would, of course, repeat this for every single instance on the page, which is not too difficult, but somewhat tedious when you have to set up all of those different options. The Libraries workflow for adding artwork is very simple.
You come up here first and you get to create your own new library. So for instance, I could create a new library and call this something like Wireframing. Hit Create. Then as I select objects onscreen, I click this button, Add Graphic, and that's gonna add that in there. The one thing that I wish would change in this panel is when I add the graphic, it does not give me the opportunity immediately to rename it, so I have to then go in, double-click on this and then rename it. So in this case, this would be something like Thumbnail Large.
Then I would take the second one, add it in, double-click, Thumbnail Medium. And you get the idea. So you would go through for each individual one of those and do that and build up your own Wireframing Library. So why do I use libraries instead of symbols now? I use libraries for one specific reason: I can easily create multiple collections of stuff inside the Libraries panel just by clicking Create New Library. In the Symbols panel, I can create new symbols libraries, but it is a little bit more involved to do so.
I can't manage multiples at one time, usually, when I'm creating them. Now, when you have multiples saved, you can always have multiples open, but it's not so easy when you're creating them. Also, with libraries it's going to automatically sync this library up to my Creative Cloud account. And since, with Creative Cloud, you can be signed in to two computers simultaneously using the same user ID or Adobe ID, you can then access these libraries on a different machine. So, for instance, I might be working at home on something on my laptop, creating a wireframe, saving up libraries, that kinda thing.
When I go to the office, if I'm signed into the same Creative Cloud account, all of those assets I created at home are now available to me. Or let's say I'm creating something on my computer and then I go to a client who wants me to use their machine when I'm presenting. I can sign in on their machine using my Creative Cloud ID, everything syncs down. I can quickly and easily show them what I've been working on. Also, Libraries have this new feature where you can drop this down and you can say Collaborate. When you choose Collaborate, you'll be taken to a screen where you can enter in an email address and share this library with other people.
So if you are in a workgroup environment or you work for a big company that you have to have multiple people sharing one resource, this is a great way to manage that. Whereas before, with symbols, you would have to constantly be sending out symbol libraries. Any time something changes, you would have to initiate the change, tell people about it, send the new file, et cetera. This way, in a collaboration environment, you can have multiple people working on the same library. Managing, deleting, moving files, it doesn't matter. You can collaborate with them using the Libraries panel. It just makes more sense and since most everything is going up in the cloud anyway, I think it's time to really get aboard that train and start using this type of setup.
So again, you can still use symbols. Symbols is still a very viable way of managing your user interface components. And if you're somebody who's not on Creative Cloud or if you just don't want to use the Creative Cloud sync features for whatever reason, you can certainly continue to use symbols. I just wanted to point out that for the remainder of this course, I will be making use of libraries. Now, the unfortunate thing is that I can't share my libraries with you as we go, so what I'm going to do is suggest that you go through and build your own. So what we're going to do, for the rest of this chapter, is we're going to go through and we're gonna build our own user interface library, and then at the end we're gonna make sure everything's in place inside of that library so that as we go forward throughout the course, we all have the same type of stuff in our library that we can easily and quickly create a wireframe out of.
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