Web designPerhaps no class in school is as dynamic as Web Design.  Technology changes.  All other content-areas in school change too, but where have you seen more change than in the way we access and use the Internet?

Web design is the creative process of combining these elements :

This web is under construction

One of the greatest challenges is to design and update web so that they work on different devises that are commonly used or that are new and growing in popularity.  This is not a coding/web development class. 

Will focus on a process to design webs around a client's needs.  This will include defining a site's purpose, what a web should look like, how users would interact with it, and how content should be structured so that web developers/programmers can achieve our design:

  1. How the Internet Works
  2. Design Process:  Discovery, Exploration & Good Design
  3. Developing Web Layouts
    1. Golden Ratio
    2. Rule of Three
    3. Golden Triangle Examples (.png)
    4. Wireframe Sketches
  4. Design Balance
  5. Interviewing the Client:  Discovery phase of design process
  6. Bread-and-Butter Layout Project:  Left Column Navigation, Right Column Navigation & Three-Column Navigation (.pdf)  and Examples of Each (slideshow)
  7. Emerging Web Layouts (.pdf)
    1. Good Webs and Bad Webs (.pdf Mr. B's Takin' Care of Business newsletters)
    2. Top Web Design Trends In 2017
    3. Web Design Trends For 2018 (video)
  8. Resizing, Fixed, Fluid, Responsive Designs, Screen Resolution
  9. Web Layouts, Design, and Conversion Rates
  10. Unit 1 Study Guide
  11. Color
  12. Writing for the Web (.pdf)
  13. Typography
    1. Text on the Web & Web Fonts with @font-face
    2. Self-hosted Web Fonts & Web Font Services
    3. Text Image Replacement
    4. Letterform:  Horizontal/Vertical Spacing
    5. Text Alignment:  Horizontal & Verticle
    6. Typeface:  Serif, Sans Serif, Handwritten Fonts, Fixed-width, Novelty and Dingbat
    7. Finding Fonts:  Free Font Galleries, Commercial Font Galleries, Individual Artists and Foundries
    8. Choosing the Right Font
    9. Setting Font Size & Line Height
    10. Using Punctuation & Special Characters
  14. Imagery
    1. What to look for
    2. Legitimate Image Sources
    3. Getting Professional Help
    4. How Not to Impress: Google, Hotlinking, and Clipart
    5. Creative Cropping
  15. Photoshop Adjustments, File Formats & Resolution
  16. Enhancing Images with CSS
  17. HTML Editors
    1. Wix
    2. Dreamweaver

Top of Page