Skip to main content

Designing Websites in Illustrator: Effective Workflow

Lesson 9 of 11

Working with Frameworks

 

Designing Websites in Illustrator: Effective Workflow

Lesson 9 of 11

Working with Frameworks

 

Lesson 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 Description


Get a complete overview of your options for designing websites with an assist from Adobe Illustrator in this web design class with Brian Wood.

Brian is a veteran web developer and educator and Designing Websites in Adobe Illustrator: Effective Workflow, he’ll help you understand the state of the web today and review your best options for designing for it. 

You’ll learn how to:


  • Create a working mockup
  • Design with hosted web fonts 
  • Add dynamic buttons
  • Use styles and symbols to simplify your process

Discover just how much you’ll want to integrate Adobe Illustrator into your web design workflow and best practices for using Adobe Illustrator’s features and functions for wireframes and designs.


There are endless options when designing for the web – learn to how Illustrator can help in Designing Websites in Adobe Illustrator: Effective Workflow with Brian Wood.


Software Used: Adobe Illustrator CC 2014

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

Nikkita Cohoon
 

The class was very useful and offered a number of tricks and techniques I found useful. The PDF mentioned appears to be missing, and I think there should have been a video that touches on best practices for exporting.