Design for WWW (50:080:346:01)

Fall 2013

Course Description

Prerequisites: 50:080:213, 331, or permission of instructor. May be repeated for credit with permission of instructor. Graphic design and production techniques for web publishing. Applications used to create dynamic interactive web pages and sites. Building upon basic design skills, the student creates a variety of assignments. Emphasis on clarity of visual communication in this new medium.

Course Objectives

  • To understand web technology
  • To gain web/interactive design skill sets
  • To complete two web design assignments

Grading Policy

  • Participation/Attendance — 20 pts
  • Course Assignment #1 — 30 pts
  • Course Assignment #2 — 50 pts

Contact Information

Ryan Johnson

ry.johnson@gmail.com

856-381-1197

Downloads

Download Syllabus Updated (12/5)
Links

Inspiration

Resources

Reading

Helpful Sites

Lectures
Week
01
Back
to Top

Topics Covered

Weekly Assignment

Find two sites that you like (visuals, functionality, etc.) and be prepared to talk about each site next week.

Weekly Reading

Week
02
Back
to Top

Topics Covered

  • Discussed article Tips for young designers/developers
  • Discussed article Interactive Guide to Blog Typography
  • Design Trends
  • Discussed article Grid-Based Web Design, Simplified
    • History of Grids
    • History of Interactive Grids
    • Brief overview of Responsive Web Design
    • Grid Variations
    • Layout Variations
    • Sketched alternative layouts for CNN homepage
  • Download Week 2 Lecture PDF

Weekly Assignment

Create at least 3 sketched layout variations for your portfolio homepage and work page. Be prepared to explain in a critique next week.

  • Must include Logo and some type of navigation
  • If you plan on creating a single page, or scrolling site, you must still have a dedicated page for each project
  • Example
  • Grid PSD

Weekly Reading

Week
03
Back
to Top

Topics Covered

Weekly Assignment

  • Continue to refine your sketches to prepare for creating wireframes next class.
  • Begin working on logo options (2-3 options)
    • Can be your name, your company name, initials, iconography, etc.
    • Focus on just B&W for now.

Weekly Reading

Week
04
Back
to Top

Topics Covered

Weekly Assignment

  • Continue to refine your logos based on feedback and begin adding color and finalizing
    • Use colors that will ultimately be used throughout your portfolio site
  • Finalize your wireframes and sketches in preparation for moving into design next week
  • Begin Codecademy Web Fundamentals Lesson
    • Create an account
    • Focus only on Introduction to HTML (HTML Basics I & Build Your Own Webpage)

Week
05
Back
to Top

Topics Covered

  • Logo critiques
  • Final sketches/wireframes critiques
  • Began creating our practice website
    • Ordered/Unordered Lists
    • Nested Lists
    • Divs and Spans
    • In-page styling
      • Font size, color and family
      • Background Color
      • Text alignment
      • Italic and bold text
      • Element width and height
      • Margin vs Padding — Example
      • Element borders

Weekly Assignment

  • If necessary, continue to finalize your logos
  • Begin designing your portfolio website
  • Continue Codecademy Web Fundamentals
    • Focus only on HTML Structure: Using Lists (HTML Basics II & Social Networking Profile)

Week
06
Back
to Top

Topics Covered

  • Using Cyberduck
    • Logging into an FTP
    • Creating files and folders
  • Continued building practice website
    • Creating page structure with HTML
    • Using in-page CSS element styling

Weekly Assignment

  • Continue designing your portfolio website
    • We will have a critique of progress next week
  • Continue Codecademy Web Fundamentals
    • Focus only on Introduction to CSS (CSS: An Overview & Designing a Button for Your Website)
    • HTML Structure: Tables, Divs, and Spans is optional

Weekly Reading

Week
07
Back
to Top

Topics Covered

  • Built a resumé with HTML
    • Practiced external stylesheets

Weekly Assignment

  • Continue designing your portfolio website
  • Continue Codecademy Web Fundamentals
    • Focus only on CSS Classes and IDs (CSS Selectors & Sorting Your Friends)

Weekly Reading

Week
08
Back
to Top

Topics Covered

  • Continued building resumé
  • Web Inspector Overview
  • Remotely connecting to Rutgers VPN

Weekly Assignment

Week
09
Back
to Top

Topics Covered

Weekly Assignment

  • Continue Assignment #1 (Due 11/6)
  • Continue designing your portfolio website

Weekly Reading

Week
10
Back
to Top

Topics Covered

Weekly Assignment

  • Begin Assignment #2 (Due 12/20)
    • Begin building your portfolio website
    • Start with homepage header & navigation
  • Continue designing your portfolio website

Weekly Reading

Week
11
Back
to Top

Topics Covered

Weekly Assignment

  • Continue Assignment #2 (Due 12/20)

Week
12
Back
to Top

Topics Covered

Weekly Assignment

  • Continue Assignment #2 (Due 12/20)

Week
13
Back
to Top

Topics Covered

  • Thanksgiving Break — No Class

Weekly Assignment

  • Continue Assignment #2 (Due 12/20)

Week
14
Back
to Top

Topics Covered

  • Worked on portfolio site

Weekly Assignment

  • Continue Assignment #2 (Due 12/20)

Week
15
Back
to Top

Topics Covered

  • Worked on portfolio site

Weekly Assignment

  • Continue Assignment #2 (Due 12/20)