Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
This course reveals how designers can create vibrant web graphics, wireframes, and complete web site mockups with the strong layout and color management tools in Adobe Illustrator. Author and Adobe Certified Expert Justin Seeley covers topics such as building responsive layouts with artboards, producing custom color palettes and swatches for web graphics, and making vector shapes and text that seamlessly scale. The course also explores adding drop shadows and other live effects, setting up interface elements such as forms and tabbed interfaces, optimizing and exporting different types of graphics, and speeding up your workflow with reusable image sprites and Smart Objects.
If you are new to the world of web design or simply new to using Adobe Illustrator as a web design tool, I wanted to take a moment to explain to you the process through which your designs will go through before they make it out onto the web. It's important to understand this process because it will help you streamline your workflow and also allow you to pinpoint areas that you might need for improvement, or it may simply get your brain thinking in more of a workflow-oriented way, which is very important. It should be noted that this is just my personal workflow and there is no right or wrong way to do any of this. Everyone is different, but this is something that works well for me.
All web projects start as a idea. Whether it's something that you sketched on a napkin or a quick drawing you created on your iPad, ideas are the building blocks for what we create in our little web world. Finding a way to get these ideas out of your head and into a workable form is the key. I use tablet apps like Adobe Ideas to quickly sketch things that pop into my head, and then I export those to use them as a starting point once I am inside of an app like Illustrator. No matter how you do it, it's best to get the ideas out and into some visual form so that A, you don't lose them, and B, you can share them with others and refine them into something awesome.
Once you have your idea down, it's time to create a wireframe. Wireframes are the skeleton on which we build our mockups, and in the end, full web sites. These wireframes can contain object placeholders and guidelines that will serve as a blueprint of our entire design. In my opinion, this is the most important step of the design process, because it's the foundation of the project itself. And we all know what happens to houses with shaky foundations, right? In the end, they all fall apart. After you have your foundation in place, it's time to put on a coat of paint. This is the part of the process where your creativity can shine through.
You'll need to aggregate content like logos, colors, fonts, et cetera, but most of that can be obtained from a client or created from your own mind. Either way, having a large group of assets from which to build your design is absolutely essential. Your mockup should look as close as possible to the finished product, minus any crazy animation or media that might be required of course. This will also serve as a roadmap for the development stage, which will either be handled by a web developer or, if you are a hybrid like me, you can be your own developer. In any case your file should be as "developer-friendly" as possible, so at the end of the process goes even smoother. Don't worry.
I'll give you several tips throughout this course on how to speak geek and create these types of files. When the mockup is complete you might consider slicing up your design. We cover this in depth in a later chapter, but just know that slicing in the traditional sense refers to breaking your design into multiple pieces or images which can be placed back together later using HTML and CSS. In a modern workflow, slicing is mainly used to define different content areas which can then be rendered out by a developer using coding techniques. As I said, we'll discuss this at length a little bit later on.
Once your mockup is all sliced and diced, it's time to hand it off to the development stage. If you are a front-end person--meaning you don't touch the code side of things--your job now is to work with the developer to ensure your creative vision is realized by the end product. Remember, a developer is your friend. They are the ones that take the wooden puppet and turn it into a real boy, so learning how to communicate and work with them is an essential part of the design process. If you are your own developer, congrats; you've achieved a level of mastery that very few can lay claim to. The final step of this workflow is to deliver the goods.
This could mean handing the finished product off to the client or simply uploading it to your server for your own needs. In any case, there is no better feeling than when a project comes to fruition and the final pixel has been pushed. If you make it this far, congratulations; you've just completed your first web design project. As I said, this is merely my personal workflow. Take from it what you will, but hopefully I gave you some insight on how the design process works in a web-based scenario, and also gave you a little bit of clarity if you are wondering how your designs go from something like Adobe Illustrator to the World Wide Web.
Find answers to the most frequently asked questions about Illustrator for Web Design.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.