Let your personality, creativity and skill do the talking.
Assignment Brief
Design and code an HTML portfolio showcasing you and your work.
Objectives
- To showcase your individuality, creativity and skill
- To translate good web design into valid structure using HTML tags
- To translate good web design using CSS (Cascading Style Sheets)
Specifications
- Must use HTML & CSS only
- Must be viewable online at your domain
- Must showcase at least 3 projects
- Required primary pages:
Home, project category & project detail - Required secondary pages:
Contact, Biography & Resume
Deliverables
Always be ready to present or turn-in at the beginning of class.
Research & Thumbnails: Thumbnails and documentation of research should be saved to the AVC server in PDF format.
Wireframes: Rough and final versions of wireframes should be saved to the AVC server in PDF format.
Interface Design: Rough and final versions of interface design should be saved to the AVC server in PDF format.
HTML Portfolio: Final portfolio website should be uploaded and viewable at your domain. Website usability and visuals should be refined to a 2000 level. HTML and CSS code should be error free.
Timeline
Project hours: 36
Six weeks of the semester are assigned to complete this project. Late work will not be accepted or critiqued. See semester schedule for deadlines.
Week One
Research & Ideation: Research well-designed and innovative websites. Document proof of your research with links and/or printed screenshots. Thumbnail 3 unique layouts detailing all required page elements. Your thumbnails should clearly show concept (if applicable), consistent use of grid and the beginnings of visual hierarchy. Research and thumbnails should be saved to the AVC server.
Week Two
Wireframes & Interface Roughs: Choose the most appropriate and innovative layout. Using your thumbnails as reference design wireframes and roughs for 2 different visual styles. Export a PDF of each visual style for on-screen presentation and group critique. Roughs should be saved to the AVC server.
Week Three
Wireframes & Interface Finals: Based on critique feedback choose the most appropriate and innovative of your two visual styles. Further refine your wireframes and interface design. Export a PDF of the refined visual style for on-screen presentation and group critique. Finals should be saved to the AVC server.
Week Four
Beta Critique: Focus on the technical requirements of your website. Create a functional website based on the final wireframes and interface design. Ensure all HTML and external CSS code is clean. Upload your website for on-screen presentation and group critique.
Week Five
Beta Launch: Focus on the aesthetics of your website. Refine both the functionality and aesthetics of your website. Refine website usability and performance. Ensure all HTML and external CSS code is clean. Upload your website for on-screen presentation and group critique.
Week Six
Launch: Continue to refine both the functionality and aesthetics of your website. Ensure all HTML and external CSS code is clean. Upload your website for on-screen presentation and final class critique.
Inspiration
Advice
- Think simple
- Think typographic
- Think unobtrusive
- No more than 2 typefaces
- No more than 2 or 3 colors
- Use deliberate hierarchy
Scale, Color … - Use shape
- Use line
- Use pattern
Questions to consider
- What do I want to communicate?
Message and/or Impression - Who is my audience?
- How will I promote my online portfolio?
- Should I include PDFs?
resume & portfolio samples
Warnings
- Document your research
- Use an obvious grid
- Use thumbnail grid
- Use browser template
Adobe Illustrator Browser Templates
Wireframe Samples