mdinfotech.net  



Class Discussion: Use the following articles to answer the questions below in a Google Docs document:
  1. Read 9 Principles of Good Web Design
  2. Read 4 Key Principles of Basic Web Design
  3. Read How to Achieve Visual Hierarchy
  4. Web Design Trends to Watch
Questions to Answer in a Google Docs document:
  1. Complete the table below using the article "9 Principles of Good Web Design"

    PrinciplePurposeHow to Achieve it









  2. Why should a grid system be used in design?
  3. What considerations should be taken when choosing fonts?
  4. What considerations should be taken when choosing colours?
  5. What considerations should be taken when choosing images?
  6. What is visual hierarchy?
  7. What are 3 ways to achieve visual hierarchy?
  8. Complete the table below using the article "Web Design Trends to Watch"

    TrendWhy is it useful?









Exercise:
  • Create a new document in Google Docs called Web Design tips. Add a section titled "RWD Basic Principles".
  • Read the w3Schools RWD Design tutorials from the intro to images and add notes to your Google Doc:
    1. RWD Intro
    2. Viewport
    3. Grid
    4. Media Queries
    5. Images
  • Take a look at the code for some responsive templates provided by w3: https://www.w3schools.com/css/css_templates.asp.
  • Watch and program along with Learn CSS Grid in 20 min
  • Modify the code from the video to create this grid:
    grid
  • How to hand in: this will be marked in class. 10/10 if complete correctly and validates, 8/10 if any mistakes, 6/10 if you tried.
  • Additional Resources

  • w3 Grid Layout
  • Grid Layout Using Grid Area's.
  • Using Media Queries, Autofill and minmax with Grid.
  • Watch and code along with this video: Using CSS Media Queries To Create Responsive Web Layouts.


    Useful Resources
  • Watch and code along with Build a Responsive Grid CSS Website Layout From Scratch.
  • Complete this website as shown.
  • Validate the HTML and the CSS
  • This will be marked in class. 10/10 if complete correctly and validates, 8/10 if any mistakes, 6/10 if you tried.
    Lesson based on: w3Schools RWD Design tutorials: https://www.w3schools.com/css/css_rwd_intro.asp

    Exercise:
    1. In your Google Docs called Web Design Tips. Add a section titled "Screen Sizes to Design For".
    2. Read Designing for Mobile First. Add tips for responsive design to your list.
    3. Look at Global Web Stats https://gs.statcounter.com/. Answer this question in your document: What are the 5 most popular screen sizes being used right now?
    4. Make your browser window full size. Now go to What size is my browser window? http://howbigismybrowser.com/. Answer this question in your document: What is the size of your browser window?
    5. Answer this question in your document: What breakpoints do you plan to use for your website modernization project?

    Read: How to Create a Website

    Visit EBLES.org.

    Your assignment is to redesign this website using the principles of modern design. Look here for examples of modern design: Website Designs to Inspire You

    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.

    Milestones
    1. Milestone 1: Build skeleton template for the home page. Include all the screens you need. Finish the top screen (hero image, title, and additional content). Navigation does not need to be completed yet. The screens below the home screen may be empty but with different background colors. Validate HTML and CSS. If you need assistance getting started, start with Ms. Wear's template under Student_Shared < Assignments < Web Dev < ebles OR choose a responsive design template from w3 schools CSS Templates.
    2. Milestone 2: Build your header, footer, and navigation, and add to your home page template. Validate.
    3. Milestone 3: Complete the content of your entire home page, and complete the content page template. Validate.
    4. Milestone 4: Complete the rest of your content pages. Validate.

    Final Due Date: tba tba

    Marking Criteria
    1. 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)
    2. Code /10
      • HTML Validates
      • CSS Validates
      • All JS in external file
      • All CSS in external file
    3. Copyright Rules /10
      • no images break copyright, proof must be provided in a credits.txt file
      • all copy is from original site or written by you
    4. Content and Organization / 10
    5. 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
    1. Sketch a layout design on paper for the homepage (front page) and the content pages (all other pages).
    2. Build the layout for both with div tags and the CSS Grid system. While designing the layout, put different background colors on each div tag so you can see where it is and how much space it takes up. These background colors can be removed when you start adding design and content. You should end up with two templates: a home page template, and a content page template. If you are unsure about building your template, use one of these: w3 Templates or one of the templates from any of the web building videos you have done.
    3. Validate HTML & CSS.
    4. Test that both templates are responsive by changing the size of the browser viewport, and use the Chrome Dev Tools phone emulator.
    5. Decide how images will be used in the layout (logo, backgrounds, banners, content)
    6. Get your images.
    7. Pick a color scheme, perhaps from your images, and decide how it will be applied to text, logo, links, backgrounds etc.
    8. Add the color scheme and images to your template.
    9. Validate HTML & CSS.
    10. Duplicate your content template for each content page of your site. You will have one CSS file and many HTML files.
    11. Add your text and image content to each page.
    12. Stylize your text and image content to each page.
    13. Validate HTML & CSS.
    14. You are done!
    As a class, we will pick a layout to build together.
    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

    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. Watch Vector Graphics Explained.
    2. Watch and code along with SVG for Newbs Part 1
    3. Watch and code along with SVG for Newbs Part 2
    4. Your At Home Assignment: Create an original piece of 'artwork' by coding basic SVG shapes. It will be marked for completion marks in your next in person class.
    Resources:
    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.

    Resources:
    1. w3 Schools SVG Tutorials
    2. Inkscape Tutorials

    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. 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 questions below. 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: mdinfotech.net uses the following colors:
      TEXT: #333 (dark grey) on white
      Highlight Colors: 1) #337ab7 (blue) 2) #735fd0 (purple)
    1. Watch Using Google fonts
    2. w3 How to - Google Fonts, Google fonts
    3. Your Assignment: Pick 3 Google fonts you think might work as titles in your website modernization project. Paste the name of these fonts in your Project Plan document under the heading "Possible Heading Fonts".
  • How to Add a Favicon to your website.
  • Draw your own or upload an image: Favicon.cc
  • How to display content, fast loading time, https://www.w3schools.com/whatis/