︎

Web Design
SPRING 2021


Artwork by Peter Tarka - www.petertarka.com

COURSE SCHEDULE

︎ Art 175/Web Design Spring 2021 Syllabus

Day 1 – Weds, Feb 10 – INTRO TO WEB DESIGN


IN-CLASS:
  • Welcome/Intro to Web Design
  • Look through Email Etiquette
  • Intro to Moodle/OneDrive
  • Create folders in OneDrive (see my example)
  • Watch video on how to use the OneDrive (below)
  • How to use Word and OneNote 365


VIDEOS:


EXERCISES:


DUE NEXT CLASS:
  • Bring a sketchbook for next class
  • Watch these videos:
    - Web Design vs Web Development
    - How much do Web Designers Make?
  • Finish Exercises -
    - Exercise 1 - Website Comparison
    - Introduce yourself on Moodle forum



Day 2 – Weds, Feb 17 – ELEMENTS OF WEB DESIGN, FAKE NEWS DESIGN


IN-CLASS:
  • Presentation - Design and Credibility - How to Identify Fake News

  • Watch these videos:
    – How to Identify Fake News (Washington post)
    – Fake News WIRED

  • Read through the following handouts:
    - Identify fake news through design
    - How to detect fake news




DUE NEXT CLASS:
  • Finish: Exercise 3
  • Watch:
    - Web Design Jobs
  • Read: 
    - White Space is Not Your Enemy – “Intro to Design”   
    - Reading Response #1 – answer questions in 250-300 words
    - Save in OneDrive as a Word document: reading response 1_your first and last name


Day 3 – Weds, Feb 24 – VISUAL HIERARCHY & ALIGNMENT


IN-CLASS:
    - Design principles: Visual hierarchy   
    - Design principles: Grid systems & alignment


  • Introduce Project 1 - Museum Website ReDesign (Look at P1 Handout)
    - Look through each of the different museum websites
    ︎︎︎ Notice how the design relates to the type of musuem/objects they show 

VIDEOS:

DUE NEXT CLASS:
  • Read: 
    - White Space is Not Your Enemy – “layout”
    - Reading Response #2 – answer questions in 250-300 words
    - Save in OneDrive as a Word document:reading response 2_your first and last name


Day 4 – Weds, March 3 – MOODBOARDS, START PROJECT 1


IN-CLASS:
  • Intro to Moodboards
  • Watch:
    - Creating a Mood Board for UI
    - Intro to Canva
    - Import an Image/Screenshot in Canva
    - Creating a Moodboard in Canva

  • Create your moodboard using Canva
 
Work on Project 1 - Museum Website ReDesign (Look at P1 Handout)
    - Look at museum websites
    - Choose 5 or more to use as inspiration
    - Create Moodboard with screenshots of 5 museum websites, with color schemes and font ideas (Save as PDF)
    - Select the Museum you will be redesigning
    - Answer Part A questions

  • Sign up for WIX


DUE NEXT CLASS:
  • Project 1 - Museum Website ReDesign (Review P1 Handout)
    - Finish Moodboard (Save as PDF)
    - Finish Part A research questions
  • Watch:
    - Why You Should Always Start with a Wireframe
  • Watch WIX videos:
    -Menus & Pages Part 1
    -Menus & Pages Part 2
    -Header & Footer
   

Day 5 – Weds, March 10 – DEMOGRAPHICS, WORK ON PROJECT 1


IN-CLASS:
  • Review Museum selections
  • Check that you are saving everything correctly, per the P1 Handout.

  • Presentation - Demographics & Psychographics
  • Look at Psychographic Categories

  • Watch
    – Defining the Audience
    – Defining Audience | Demographics
    – Defining Audience | Psychographics 

  • Museum demographics Presentation

    - Answer Demographic/Part C Questions 
    - Remember to save in OneDrive Project 1 folder

DUE NEXT CLASS:
  • Finish - Demographics Exercise
  • Project 1 - Museum Website ReDesign (Review P1 Handout)
    - Finish Part B demographic questions about museum website
  • Watch WIX videos:
    - Strips
    - More on Strips
  • Read: 
    - White Space is Not Your Enemy – “Research & Audience”
    - Reading Response #3 – answer questions in 250-300 words
    -Save in OneDrive as a Word document: reading response 3_your first and last name


Day 6 – Weds, March 17 – WIREFRAMING, WORK ON PROJECT 1


IN-CLASS:
  • Review Demographics for Museums

  • Wireframing Presentation
  • Look at Wireframing Symbols
  • Sketching wireframes – be quick, but intentional
  • How to Photograph your wireframe sketches
    - Watch: How to Photograph your work

  • Watch these videos on wireframing:
    - Tips on Sketching Your Wireframes
    - UX Design Sitemaps
    - Planning a Website

    ︎︎︎upload to Exercise folder

  • Using Figma to wireframe
    Follow directions from videos below (use wireframe template below)
        - Figma For Beginners (1/4)
        - Figma - Alignment & Distribution
        - Figma - Grids
    Choose file to duplicate from Figma Community
    Use templates like this or this
    Use the wireframe symbols from their asset libraries

    ︎︎︎upload to Exercise folder

  • Work on Museum Website ReDesign (Review P1 Handout)
    - Sketch Wireframe of Current website
    - Answer Part C questions
    - Start 10 Wireframe Sketches of Redesigned site

DUE NEXT CLASS:
  • Finish Wireframe Exercise
  • Project 1 - Museum Website ReDesign (Review P1 Handout)
    - Finish Wireframe Sketch of current Museum website   
    - Finish Part C questions
    - Finish 10 Wireframe Sketches of Redesigned site
    - Why You Should Always Start with a Wireframe
  • Watch WIX videos:
    - Adding Images
    - Buttons


Day 7 –  Weds, March 24 – COLOR, WORK ON PROJECT 1


IN-CLASS:
  • Color & Psychology
  • Watch 
    - Culture & Psychology of Color
    - Marketing Color Psychology
    - The Effect of Color


  • Work on Project 1 - Museum Website ReDesign (Review P1 Handout)
    - Review 10 wireframe sketches
    - Lo-fi Wireframe of Redesigned site
    - Work on WIX website


DUE NEXT CLASS:
  • Project 1 - Museum Website ReDesign (Review P1 Handout)
    - Finished 10 Wireframe Sketches of Redesigned site
    - Finished Lo-fi Wireframe of Redesigned site
    - Work on WIX website
  • Watch WIX videos:
    - Anchors
    - Publish
  • Read:
    - White Space is Not Your Enemy – “Color”
    - Reading Response # 4 – answer questions in 250-300 words
    - Save in OneDrive as a Word document: reading response 4_your first and last name



Day 8 –  Weds, March 31 – FINISH PROJECT 1


IN-CLASS:
  • How to Present your site for critique

  • Review in-progress WIX websites
  • Critique In-progress websites - WIP feedback forum

  • Project 1 - Museum Website ReDesign (Review P1 Handout)
    - Work on WIX website
    - REMEMBER! - Logo should be link to homepage

  • Remember to align based on grids (knolling) for visual consistency


DUE NEXT CLASS:
  • FINISH - WIP feedback forum
  • Project 1 - Museum Website ReDesign (Review P1 Handout)
    - Finish WIX website
    - Finish website Presentation
  • Watch video:
    - Watch this video on Critiquing
    - Design principles: Space in design



Day 9 –  Weds, April 7 – CRITIQUE PROJECT 1


IN-CLASS:
  • Present museum website redesign
  • Critique WIX Museum Redesign website


DUE NEXT CLASS:
  • Think about Personal Website



Day 10 –  Weds, April 14 – START PROJECT 2 - PERSONAL SITE


IN-CLASS:
  • Reminder - EXTRA CREDIT - Attend Artist Talk April 16th - Sable Smith (zoom link in PDF)

  • Start Project 2 - Personal Website (Handout)
  • Look at examples of personal websites that mimic what you want to do
  • Work on moodboards in Canva - screenshot at least 5 different inspiration websites 
    ︎︎︎ Remember - your moodboard should be multiple pages
  • Write out mission statement for your personal website

  • The Problem with Stock photos: 
    - diversity photos
    - pexel


DUE NEXT CLASS:
  • Project 2:
    - Finish Moodboard in Canva (save as PDF)
    - Finish Mission Statement
    - Invisible Images (Your Pictures Are Looking at You), Trevor Paglen
    - Reading Response #5 – answer questions in 250-300 words
    - Save in OneDrive: reading response 5_your first and last name



Day 11 –  Weds, April 21 – START PROJECT 2 - PERSONAL SITE


IN-CLASS:
    - Review mission statements on moodle forum
    - Write Bio/About statements
    - Review Bio/About statements - 
        - Post and give feedback on Bio in moodle forum
    - Work on Wireframe sketches


DUE NEXT CLASS:
  • Project 2:
    - Edit and Finish Bio/About Statement
    - Finish 10 Wireframe sketches
  • Listen or watch:
    - Ted Radio Hour - Debbie Millman: Designing Our Lives
    - How symbols and brands shape our humanity | Debbie Millman
  • Watch:
    - Parallax Effect in WIX
  • Watch videos:
    - TOP 5 STUNNING PORTFOLIO WEBSITES: Inspiration for portfolio website
    - Web Design: How I Made My Online Portfolio!



Day 12 –  Weds, April 28 – WORK ON PROJECT 2


IN-CLASS:
    - Review Wireframe sketches
    - Work on Hi-fi wireframe (with photos/images)
        ︎︎︎ Remember to list hierarchy order of importance.
    - Review - how to export Figma as PDF

  • REMEMBER:
    - Alignment and Hierarchy
    - Consistency across pages
    - Look at site from 5 ft


DUE NEXT CLASS:
  • Project 2:
    - Finish Hi-fi wireframe
    - Work on Personal Website in WIX
  • Reading: 
    - Reading – White Space is Not Your Enemy – Ch9 Visual Appeal
    - Reading Response #6 – answer questions in 250-300 words
    - Save in OneDrive: reading response 6_your first and last name



Day 13 –  Weds, May 5 – FINISH PROJECT 2


IN-CLASS:
    - Review In-progress WIX site
    - Critique In-progress websites - WIP feedback forum
    - Work on Personal Website in WIX


DUE NEXT CLASS:
  • Project 2:
    - Finish WIX website
    - Finish website Presentation
    - Prepare for critique



Day 14 –  Weds, May 12 (8:15-11:15am) – CRITIQUE PROJECT 2


IN-CLASS: LAST DAY ︎︎︎︎︎︎︎︎
  • Present & Critique Personal website