Lecture: Define
This week we will be focusing on how to properly structure a website, create a sitemap that shows how every page is linked and creating sketches and wireframes that are the basis of any website design. I will show you examples of good and bad sitemaps, how to create sketches and properly label everything and take those sketches and turn them into refined wireframes using Adobe Illustrator.
In Class Assignment
For your in class assignment today, take what you learned during the lecture and apply it to your own website. Create a sitemap for your website. Sketch out wireframes for any unique pages on your website (i.e. for a portfolio website do the homepage, gallery page, project detail page, about page and contact us page). Once you have sketched out your idea and know where all your assets will be, create a final version of your wireframes using Illustrator. Post an image of your sitemap, photos of your sketches and an image of your final wireframes to the blog.
Lecture Video
Homework
Create a blog post listing 3 websites that you think are nicely designed with an explanation why. Also create a Pinterest account if you dont already have one and “create a board” for this class. Use this “board” as your projects mood board as a way to collect images, colors, type, layouts and anything else that will inspire you while you design your website. Post the link to your board in this blog post as well. Here is a link to the board I created for this class and below is an example of a mood board.
