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. Web Design Trends
  8. Resizing, Fixed, Fluid, Responsive Designs, Screen Resolution
  9. Web Layouts, Design, and Conversion Rates
  10. Unit 1 Study Guide
  11. Client Presentation Planning Sheet (.pdf form)
  12. Color
  13. Infographics
  14. Writing for the Web
  15. 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
  16. Imagery/Pictures
    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
  17. Photoshop Adjustments, File Formats & Resolution
  18. Enhancing Images with CSS
  19. HTML Editors
    1. Wix
    2. Dreamweaver

Top of Page