In this project you will be designing and developing an online portfolio or website that represents you. You will research and determine a site concept, create a design based on this, and finally build it with HTML and CSS. How do you want others to see you and your work? What do you want them to notice first? What do you want them to take away?
You may already have a portfolio site hosted externally; you don’t have to replace it. Instead, take this as an opportunity to find a different way to represent your work.
Each of these three categories will be graded on a A(4) - F (0) scale. Outstanding or exceptional work will receive As, good work will receive Bs, sufficient work that does nothing more than meet requirements will receive Cs. The final grade will be an average of these three scores.
- conceptual creativity
- aesthetic quality
- technical skill
Part 1: Content and References (Due 4/10)
Before you begin building anything, it is a good idea to first prepare a design document that outlines the goals of the site, the user experience, and the overall design. This document will guide you through the development process. We will begin by thinking about the content you want to include in your website, and examples of other websites you find inspiring. Please create a document that includes the following. This can be a digital file, or you can print it out.
- References — Find at least four examples of artist or designer websites or portfolios that inspire you (you are looking for inspiring websites, not just websites of inspiring artists/designers). Include a screenshot, a sentence that tries to sum up their “design concept”, and a sentence about what you like about the site and why.
- Content — Choose at least four works that you would like to include in your website/portfolio. More is fine, but focus on quality over quantity. Include an image of each and note what kind of documentation you have (image, video, text, sound recording, etc).
Part 2: Design Concept and Sitemap (Due 4/12)
Please add the following two pieces to your design document. This can be a digital file, or you can print it out.
- Concept (1-2 paragraphs) — Who is your target audience? What do you hope to convey about yourself and your work with this site? What will be the key elements and concepts behind the experience of your site? How will you leverage the medium of the web?
- Sitemap — A diagram of the pages of your site and the links between them.
Part 3: Wireframes and Mockups (Due 4/17)
For Tuesday, we will be completing the design document with the final two parts – wireframes and mockups. Please bring hard copies to class, be prepared to discuss.
- Wireframes — Make diagrams showing the structure and functionality of the pages of your website. Include your homepage and one of each other page type.
- Mockups – Come up with two different, distinct design directions. Use Illustrator or a similar program to create a mockup for each, including at minimum, the homepage and one additional page. Consider typography, iconography, color.
Part 4: Final Portfolio / Website (Due 4/26)
The final part is to build the site you’ve design with HTML and CSS. I would suggest doing this in steps, something like this:
- Create an HTML file for each page, and add the basic HTML structure.
- Finalize the navigation and make sure the pages link correctly between themselves.
- Add a stylesheet and define the basic layout of your pages.
- Populate the HTML with content.
- Further implement the design with CSS, tweaking HTML as necessary.
- Test with users, iterate as necessary.
The final version should have multiple pages and include at least four works. The navigation should be clear and the design should be engaging and coherent. Your site should communicate who you are and what you do to the audience that you outlined in the design document. At minimum, it should look correct at standard laptop and desktop scales. You will have three minutes to present your site to the class, followed by a few minutes of feedback and critique. In your presentation you will want to make clear the concept, functionality, and structure of the site, as well as where you could see taking it further in the future.