OBJECTIVE:
To Develop a well designed HTML project that presents information on a topic of public interest that you feel strongly about or effects you personally. If you have another type of site you would like to do, just run it by me. This is the major solo project for the class, so if you have a website you have been wanting to do for yourself or someone else, this would be the time.
- You have a lot of freedom on this one as far as the topic of your site
The process is similar to the previous project
- Do a content inventory/list for the site
- You do not have to this in, but it will be valuable in your process
- Do information architecture for the site
- This is to organize the information and content you came up with while doing the content inventory. You can use draw.io, or whatever app you like for the site site diagram/sitemap, or word for an outline in text form listing your pages and their relationship to each other.
- You do not have to turn this in
- Do at least 18 sketches for design ideas
- Do some quick, small drawings to get ideas for your design.
- Do at least 2 desktop versions for at least 4 screens.
- Do at least 2 mobile versions for the same 4 screens.
- Again, thumbnails are small sketches used to explore ideas for your design.
- Get blank horizontal thumbnails here.
- Get blank vertical thumbnails here.
- To turn in the sketches, post them in the Personal Project Sketches Discussion forum in Canvas. You can take a photo with your cellphone or scan the sketches, add them to your files in Canvas, then post them in the Sketches Discussion forum.
- See Specifications for points
- Check the Canvas calendar for due dates
- Option 1: Do at least 8 Wireframes
- For the wireframes, do desktop and mobile versions of the main screen and at least 3 other screen types (8 total minimum).
- The wireframes should be fairly detailed, using actual text as much as possible, especially for headings.
- Here is a link to the GDS 072 class from last Spring with links to tons of videos and articles about figma and design in general. Feel free to take a look in your free time ;) especially if you are having trouble using figma for wireframes. I think some of you have taken GDS 072, and some haven't, but the videos and links are available to you.
- Here is the link to some sample student wireframes and comps from previous semesters
- Good wireframe examples can be seen here.
- You can do the wireframes online in figma, or using whatever software you want(figma would be best).
- You can download sample, wireframes, comps, templates and resources here (LOTS OF GOODIES!), although some are dated.
- You can turn in either the wireframes, OR, the comps below
- See Specifications for points
- Check the Canvas calendar for due dates
- Option 2: Do at least 4 comps
- For Comps, do desktop and mobile versions of the main screen and at least 1 other screen type(4 total minimum).
Comps are mock-ups of your pages usually done in Figma, Photoshop or Sketch. They can also be done in other applications. They should look like the final version of the html page will look, so you can show the client what their site will look like. You can turn these in by sharing the figma files by clicking the share button in the top right while in figma.
- See examples of thumbnails and comps here.
- You can turn in either these, OR, the wireframes above
- See Specifications for points
- Check the Canvas calendar for due dates
- If you use Figma for the Wireframes and/or Comps, please turn in exported image files in Canvas and put a COPY of your figma file in our calss Figma team, in the appropriate project.
- Create the site pages
- See Specifications for points
- Check the Canvas calendar for due dates
