Working with Frameworks
Lesson 9 from: Designing Websites in Illustrator: Effective WorkflowBrian Wood
Working with Frameworks
Lesson 9 from: Designing Websites in Illustrator: Effective WorkflowBrian Wood
Lessons
Understanding the "Responsive" Web Today
15:26 2Getting Started
08:03 3Set up your Design Document and Layout Grid
11:58 4Setting up Artboards to Mock up Device Sizes
05:51 5Work with the Pixel Grid, Live Shapes, Pixel Precision
10:44 6Design with Web Fonts
21:47 7Using Styles and Symbols to Make your Life Easier
22:46 8Mocking up Dynamic Buttons
12:09Lesson Info
Working with Frameworks
Let's say we're working with a framework we decide that we want to work with, like, I don't know Twitter, bootstrap or something like that. And we want to able to use a lot of the icons that are built into that framework. Well, one of the things about Illustrator is that it doesn't have these different like you I libraries built in. It's not a lot of libraries that we can work with, and some programs have that they're specifically built for this kind of stuff. But in Illustrator, we have a couple options. We decided we wanna go grab buttons, two different things. Here's one thing we can do now. This is part of the creative club. Okay, so you need a subscription, you get this. But as a credit clause, describe er we actually have the ability to go up to our creative cloud ap if you will to call their desktop app and we have things like file font market. You're going to see right here that we actually have a marketplace. So it's part of credit. Cloud is called the critical market, I belie...
ve, and the idea behind this is that there's royalty free content that we can just grab and use in our projects. This you can use it for everything pretty much. You can look at the royalty free thing if you want, but so if I go to the market here, you're going to see that I can. If I want to go in and do all kinds of stuff, I can say, All right, Why don't you just show me things like vector content or you y elements? They categorize it by different things. This is actually cool. They have four placement. They have, like, full PS D's layered PSC's up here that you can download and using your work and I do anything. I mean, you could produce do anything with it. I could say, OK, you know what? Show me. You I So I'm gonna click on user interfaces, and what's gonna happen is here. This is This is a community of people that upload these. But you're gonna start to see things like, Oh, I have a calendar. You why I've got a social. You I've got all this kind of stuff that I can work with and what some people will actually do is they'll go in and give you an entire you I kid so you can pull down a kid if you want to. You, um, think these were actually pretty cool? Some of these things you got to be really careful of is that with some of these, these kits or somebody's you elements is some of them are r p STs or some of them are raster okay? They may not necessarily be vector, so we gotta gotta be careful with that. But like, here's a log. And you I I'm looking for something I could say. OK, I'm gonna add it. We talked a little bit about libraries, but I'm gonna add it to my library on what it's gonna do is it's gonna sink it. It's basically gonna pull down in my machine and let me use this. So this is one thing that we have that's available, And like I said, creative Cloud illustrator kind of tied together, and if I look over here, it's probably gonna be there yet, But look in the library, okay? It's coming in. You can see it right there. Logging wire frame. There it is, and you'll notice it is photoshopped. Okay, Now we can If we want to sort based on vector, we can do that too. But if I were to drag this out, take a look at it. It's actually going to be usually like a ping file or something like that. So this is something that way may not use You might use for wire framing quickly, but not content. So that's kind of something. You can look at something interesting. Another thing we can do is there are Thanh of websites out there that we can go to to grab you elements. I find it much. All I did was I actually went and did a search for you. I, um, and find a whole bunch out there. There's actually if you go in search for bootstrap, um, gooey g u I somebody had put together. And this is actually pretty cool. And I should know the name of this website. I could probably find it, but they put together an entire you I from from bootstrap. So if you look, this is awesome. You look in here, you'll see that they give you all of the vector elements for all the buttons for all the objects etcetera and if if you are working with that specific you y you can just go in and basically take this content. And unfortunately, wow, it's not group together. What? I could do this. Take it, use it. It's all vector artwork. So if I'm gonna put in some kind of form, you know, I could just copy go to mine and use that and be working with those. You can also then take these you elements. And if you want to put them into your own symbols your own libraries and make them part of your template, you could do that. As long as you look at the user, they let you do that. Okay, but this is something that you could really, really use. I use these for bootstrap. Uh, I use them for I was a ton of amount there. I'm forgetting every single one. Except for boots drug. There's a lot of anyway, you go find a whole bunch of so you just if you're using a specific framework skeleton, etcetera, Just go search for skeleton, Gooey or skeleton. You Why? And you might find on L Street. If I So do graphical styles get uploaded to the creative cloud for use on other machines. Yeah, it's no. Unfortunately, it's usually just the base type style, so it's kind of like it's kind of copy paste, and I mean, so this styles aren't going with it, unfortunately, that actually libraries are pretty new. There really are. And they really have been trying to work on and work on them, work on them. They keep getting feedback from people that maybe later number. Right now, it's just the actual appearance. So So this is a good resource. These air, good resource is things that you can do. And so, yes, you're gonna go, go search for that. You can find those out there on the Web.
Class Materials
Bonus Materials with Purchase
Ratings and Reviews
user-ef521b
Quick introduction to Illustrator's website prototyping use. What I needed for better understanding of designing for retina screens, designing at pixel level, smart guides, and wireframes. I like the real-world suggestions for how to show website plan to clients efficiently. Hope to find the next course on best practices in exporting website from AI.
a Creativelive Student
wonderful thank you
DaVita Lynette
I haven't been able to catch the whole class yet but I've heard lots of good information with some new resources I hadn't used before. Thanks!
Student Work
Related Classes
Web Design