This project, created by my student, Marco Vasquez, is from a few years ago, but it remains in my list of favorites. In the Intermediate Web Design class at Art Institute, students dig further into designing for the web and learning the HTML and CSS necessary to produce those designs.
Navigation and providing pathways to content is a major point of discussion in this course. Even though we all know the web is non-linear, it is very hard to get used to designing for an environment where your audience could enter at any point, have some set of things they want from the website, be able to achieve their goals and have the experience they want.
This particular solution, by Marco Vasquez really captured the spirit of the project, and created a great example of what I want from students, which is the ability to conceptualize a design solution, and then do the necessary production.
Shown here is a screen shot of Marco’s Photoshop file, which is well organized with layers and well defined guides for his grid. You can also view the finished HTML and CSS version of the page.