GDS 46

Personal Project

Personal Project Instructions


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.

  • 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

  1. Do a content inventory/list for the site
    • You do not have to this in, but it will be valuable in your process
  2. 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, 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
  3. Do at least 20 sketches for design ideas
    • Do some quick, small drawings to get ideas for your design.
    • Do at least 2 desktop versions for at least 5 screens.
    • Do at least 2 mobile versions for the same 5 screens.
    • Again, thumbnails are small sketches used to explore ideas for your design.
  4. Option 1: Do at least 8 Wireframes
  5. 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 Photoshop or Sketch, or maybe figma. 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.
    • 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
  6. Create the site pages
    • See Specifications for points
    • Check the Canvas calendar for due dates

Project Description and Examples

Point Breakdown

Project Grading Scale Possible
Sketches 5
Wireframes or Comps 10
Project Specifications 15
Design and Finesse 20

Specifications (15 points):

The Minimum Requirements Are

  • 5 linked web pages
  • Turn in Wireframes OR Comps (See below)
  • Use CSS Grid somewhere in the site
  • Use responsive images
  • Use at least 1 Web font by either including and using the font files in your site folder, or by using a font service that hosts the fonts remotely (This requirement may not be in the video description on this page, but it is required.)
  • Create a responsive design with at least 2 breakpoints (3 design changes)
    • For example, you start with a mobile, 1 column design, and then make changes at 2 more browser/viewport widths
    • You can see how your page would look on different devices by using these browser features(instructions are linked below)


Design & Finesse: (20 points)

  • Communicate the message
  • Design fits the content
  • Proper optimization of images
  • Good composition of pages
  • Good color harmony
  • Good functionality/usability
  • Intuitive and functional navigation
  • Type should be legible, use appropriate fonts for the design
  • Final Presentation to the class