Class Discussion: Look at the following three websites and make a list of things to consider when designing a basic website:
  1. Web Design Fundamentals
  2. Easy Tips for Better Web Design
  3. Basic Web Design
Class Discussion:

Read: How to Create a Website

Find an existing website that looks like it was designed before 2002. Look for one with enough content to justify a website with 5-7 scrolling screens.

Your assignment is to redesign it as a one page, modern designed site using principles of modern design. Look here for examples of modern design: One Page Design Inspirations

Begin with a responsive design template from w3 schools CSS Templates.

No copyright may be broken. All written content on the site must be copied from the original site or written by you. All images must be from the original site or be licensed for use on a commercial website. Include a credits.txt in the folder containing your website with links to all images you found online with their licenses.

  1. Due Wed Sept 18: Pick a website to redesign.
  2. Due Friday Sept 20: Create a folder on Google Drive called "Web Dev Assignment 1". In that folder create a document titled "Project Plan". In that document, under the heading "Content", create a numbered list describing the content of each screen (5-7 required) on your website.
  3. Due Friday Sept 20: Draw a structural representation of your website (on paper or using a drawing program)
  4. Due Monday Sept 30: Complete your grid layout as designed in the previous Milestone
  5. Due Mon Oct 7: Complete your banner, and 2 additional screens.
  6. Due Wed Oct 9: Complete 5 screens.

Final Due Date: Wed Oct 16

Marking Criteria
  • Navigation, Byte Size and Functionality /10
    • Byte Size less than 2 MB? or justifiably up to 3 MB? (/5)
    • Home page called index.html (/1)
    • User Friendly navigation, everything works ( /4)
  • Code /10
    • HTML Validates
    • CSS Validates
    • All JS in external file
    • All CSS in external file
  • Copyright Rules /10
    • no images break copyright
    • all copy is from original site or written by you
  • Content and Organization / 10
  • Graphical Design and Appearance /20
    • Consistent look and feel, modern design
    • Responsive Design looks good in all sizes
    • Use of Principles of Design: Emphasis, Scale, Alignment, Repetition, Balance, Heirarchy
    • Use of typography
    • Tasteful use of colour scheme
    • Easy to read
    • Appropriate Favicon
    No copyright laws may be broken in your Personal Website project.
    Video: Image File Formats
    • Recall the img tag
    • How to create Web Friendly Image from a high resolution photo:
      1. use a high quality image
      2. minimize byte size
      3. crop it, before downsizing
      4. make it the actual size it will appear in the webpage
      5. use jpg for images (85%), png for graphics with transparency, gif for animation
    • More on Different Image Formats
    Watch Vector Graphics Explained.

    SVG is a language that uses XML format to define vector-based graphics for the Web. Every element of SVG can be animated. SVG can be written directly into the HTML document or created with a vector drawing program like Inkscape.

    1. w3 Schools SVG Tutorials
    2. Inkscape Tutorials
    In Class Exercise (/10)

    Create a small svg image in Inkscape with at least two different geometric shapes and some text. Save it as optimized svg, manually remove the meta data (unless you need it) and add it to your hello.html page.

    How to pick a colour scheme for your website.

  • Watch
    1. Watch Beginner Graphic Design: Color
    2. Watch Color Psychology In Web Design
    3. Watch How to Choose the Right Color Schemes for Your Brand or Website
    4. Watch Amazing Color Resources For Designers
  • Additional colour resources:
    1. Web Developer's Guide to Colour
    2. Colour Scheme Generator - good preview options of your colour scheme.
    3. Material UI Colors and Coolors - great color pickers
    4. Adobe Kuler - will generate a colour scheme from a photograph.
  • Do this in class today:
    1. Find a colour scheme for your website modernization project by picking colour codes (or names) for each of the following. Record these questions and colours in a Google Docs document titled "Website Plan".
    2. What is the color of your main content text? What is the background color of your main content text?
    3. Choose 2-4 additional colours for the rest of your website. Rank them in order of heirarchy. That is, list the colour that will be used the most first.
    4. For example: uses the following colors:
      TEXT: #333 (dark grey) on white
      Highlight Colors: 1) #337ab7 (blue) 2) #735fd0 (purple)
  • How to Add a Favicon to your website.
  • Draw your own or upload an image:
  • How to display content, fast loading time,