Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
One of the great things about using Illustrator for web design is that it's so versatile in performing a variety of different tasks. For example, we already know that it can create web graphics itself, but there is a lot more to web design than just creating the graphics. There's also a planning stage involved. In fact, more so in web design than any other type of design, the more time you spend planning things out in advance, the better off you are going to be. One of the reasons for that is because there are so many different people involved in the process of building a web site. Quite often as a designer you may just be one part of a larger process.
There may be marketing people involved, clients themselves, and of course, developers you may actually be building a web site, and you need to make sure that you can communicate clearly with all these different people. Perhaps one of most important things, before you actually get started building a web site, is creating what we call a sitemap or a wireframe. This is a document that clearly defines what each of the pages are inside of your document. This will be helpful for you when you start building navigation, when you start building pages and know where the links need to go, and perhaps most importantly, it gives both the client and the developer a much better picture of the scope or the scale about what this web site actually will entail.
It will also help both you and your developer or if you're both a designer and developer, it will help you, ultimately decide which technologies to use to build your web site, be it Flash, HTML, CSS, or what type of scripts you might need. As you can see here in this document, I've created a sitemap or a wireframe here which clearly shows all the pages that will exist inside of this web site, and it also identifies which pages will start using additional functions or features, such as forms or ainteractive user interface, like Flash or Ajax.
Another benefit actually build in this sitemap is that if you are going to be hiring a developer to build this web site, the developer can use this sitemap to get an accurate idea of what the need so they can give you an accurate quote for their services. However, for me the most valuable part of this process is getting the right idea in your head about what you need to do, and from a user experience perspective or a design perspective, you can figure out exactly how to design this web site. It's also a great way for your client to visualize exactly what your web site will entail. Of course, another reason why it's great to design this sitemap here inside of Illustrator is that you can print it out in any size, which is great for presentations with clients.
In addition, it's really easy to just simply save yourself a PDF file that you can quickly e-mail to other people, so they can view the sitemap and comment on it as well. So remember, when you get started building a web site, don't worry too much about the visual design just yet. Focus on the entire structure or the wireframe of your web site first, and you'll be far better off in the long run.
Get unlimited access to all courses for just $25/month.Become a member
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.