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.
- Due Wed Sept 18: Pick a website to redesign.
- 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.
- Due Friday Sept 20: Draw a structural representation of your website (on paper or using a drawing program)
- Due Monday Sept 30: Complete your grid layout as designed in the previous Milestone
- Due Mon Oct 7: Complete your banner, and 2 additional screens.
- Due Wed Oct 9: Complete 5 screens.
Final Due Date: Wed Oct 16Marking Criteria
- 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)
- HTML Validates
- CSS Validates
- All JS in external file
- All CSS in external file
- no images break copyright
- all copy is from original site or written by you
- 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
- Recall the img tag
- How to create Web Friendly Image from a high resolution photo:
- use a high quality image
- minimize byte size
- crop it, before downsizing
- make it the actual size it will appear in the webpage
- use jpg for images (85%), png for graphics with transparency, gif for animation
- More on Different Image Formats
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.
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.
- Beginner Graphic Design: Layout and Composition
- Look up web design galleries for inspiring layouts.
How to pick a colour scheme for your website.
- 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".
- What is the color of your main content text? What is the background color of your main content text?
- 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.
- For example: mdinfotech.net uses the following colors:
TEXT: #333 (dark grey) on white
Highlight Colors: 1) #337ab7 (blue) 2) #735fd0 (purple)