| summary | time | deliverables |
|---|---|---|
Create the content & design plan for your independent project. |
4 hours |
1 PDF |
Throughout the rest of the term we’ll be working on the design of a complete independent website. The subject matter independent project website is completely your choice.
For the project plan, deliver 1 PDF with all the necessary plan documents inside: content inventory, sitemap, wireframes, logo, moodboard.
Create all these subdeliverables and put them together into a PDF for submission and grading.
- Content inventory: A table showing the content for each page: text, images, video, etc.; where you’ll get it, etc.
- Sitemap: Include all 3+ pages & how they’re connected together.
- Wireframes: 3 sizes (small, medium, large) for each of the 3 pages: minimum 9 wireframes. Simple content prioritized grey boxes works well, even just paper sketches.
- A logo: Must work well (or adapt to) these sizes:
256pxwide, height whatever — your primary logo, displaying on the website64pxsquare — for mobile screens, social profile photos, bookmarks, etc.32px,16pxsquare — for favicons.
- Visual design/moodboard: Type & type scale, colours, sample components (buttons, cards, etc.), consider accessibility & performance when making decisions; Do some sample patterns in Illustrator/Photoshop/XD to give your coding direction.
Below is the rubric of expectations for this project. You will be assigned a letter grade based on your standing within the rubric.
| 0 points | 1 points | 2 points | 3 points | |
|---|---|---|---|---|
| Content inventory | Incomplete or missing | Rushed & too generic | Specific but obviously lacking research | Specific and appropriate, with good details |
| Sitemap | Incomplete or missing | Has only the pages we’re coding | Lots of important pages missing | Complete, organized and contains all necessary pages |
| Homepage wireframe | Incomplete or missing | Missing important pieces or poorly executed | Complete but not detailed enough | Complete, detailed, responsive, and a good representation to code from |
| Page 2 wireframe | Incomplete or missing | Missing important pieces or poorly executed | Complete but not detailed enough | Complete, detailed, responsive, and a good representation to code from |
| Page 3 wireframe | Incomplete or missing | Missing important pieces or poorly executed | Complete but not detailed enough | Complete, detailed, responsive, and a good representation to code from |
| Logo | Incomplete or missing | Only works well at one size | Small sizes are inconsistent with large sizes | Cohesive & uniform for all sizes, even if different |
| Visual design | Incomplete or missing | Missing important components or poorly executed | Average, could be more cohesive & considered | Cohesive & appropriate with a good sample of components |
| Professionalism | Rushed & poorly done | Okay | Average, could use more time spent | Clearly demonstrated lots of effort and consideration |
Submit the PDF to your teacher.
You’ll do an in-persion critique with the teacher on the week of submission.