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.
Using what you learned in this lecture, create 3 different grid layouts for your site's design. Use grayscale or color to distinguish the grid. Link to example sites that use a similar grid. In your blog post identify the grid type for each layout, based on the lecture.
Put your work for this assignment in a blog post and put the link to that post in Blackboard (not to your entire blog).
Take what you learned during the lecture and apply it to your own website. Create a sitemap for your website. See example sitemap.
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 high-level version of your wireframes using Illustrator (or another wireframing tool). Have these wireframes build on one of the grid layouts that you explored. See example high-level wireframes here. NOTE: this is not the pixel perfect stage for your wireframes. You will work on that later.
Put your work for this assignment in a blog post and put the link to that post in Blackboard (not to your entire blog).
Suggested Reading
Suggested Tools