GD 50

Web Design

Spring 2017

Week One: 1/16-1/20

Mon. 16th or Tue. 17th


  1. For Next Class
  2. 1. Complete Intro Survey (T/TH) OR Intro Survey (M/W)
  3. 2. Read though syllabus GD50 Syllabus (T/TH) OR GD50 Syllabus (M/W)
  4. 3. Log into Lynda.com though Fresno State
  5. 4. Join Google Classroom

Wed. 18th or Thur. 19th


  1. For Next Class
  2. 1. Watch Don't fear the internet No. 1 NOT A SERIES OF TUBES
  3. 1. Watch Don't fear the internet No. 2 HTML

Week Two: 1/23-1/27

Mon. or Tue.


  1. For Next Class
  2. 1. WATCH:CSS Box Model video (3m)
  3. 2. Watch: DEVTIPS:HTML5 Basics
  4. 3. Finish: Div activity in code pen from class

Wed. or Thur.

  • In Class
  • Presentation: Html5 element tags vs div tags
  • More CSS
  • Activity: code out wireframes using html5 tags in code pen. (label 3.1, 3.2, 3.3, ect)
  • Presentation:File structure, Links, and Images.
  • http://laurahuisinga-design.com/GD50/_IMG/IMG_3425.jpg

  1. For Next Class
  2. 1. Compleate Codecademy Learning HTML and CSS part 1 (Lesson 1,2,3,4)
  3. 2. Watch: CSS Basics (Part3) — Selectors and CSS Basics (Part4) — Property and values
  4. 3. Watch HTML5 Basics - Display Types and HTML5 Basics - HTML5 Tags

Week Three: 1/30-2/3

Mon. or Tue.


  1. For Next Class
  2. 1. Review:Website organization site
  3. 2. READ: Taking the “Erm..” Out of Ems
  4. 3. Finish Navigation and save folder to be turned in at the begining of class via file share.

Wed. or Thur.

  • In Class
  • Review Presentation: Intro to Web Typography
  • Presentation: Save images for web and css floats
  • Activity: Save for web
  • Activity: Fork code pen Add Css Styles and edit CSS
  • Work time: finish code pens or ask questions

  1. For Next Class
  2. 1. READ:Mystery of css float property
  3. 2. Watch: CSS Basics for GD50 (all 7 videos 37m)
  4. 3. Take short video quiz
  5. 4. Watch: Don't fear starting from scratch (part 1) Don't fear starting from scratch (part 2) Remember we do not want to use inline styles, or internal css. Always use external style sheets for class. And Don't fear specificity

Week Four: 2/6-2/10

Mon. or Tue.

  • In Class
  • Presentation: Typography for web and how we read (Type basics from Ellen Lupton's Thinking with Type)

  • Activity: Find 3 websites using typography well.
    • 1. Save link and take screen shots of each website.
    • 2. What typography adjustments have they made to improve readability and ascetic quality?
    • 3. What could be improved further for readability and ascetic quality?
    • 4. What css properties do you think each site used to achieve the adjustments they made? (Refer to todays slides for font/text css properties list.)
    • 5. Add all content to a word document and save. This part will be turned in with another activity this week.

  1. For Next Class
  2. 1.READ: How we read
  3. 2.READ: Typography Summary of Key Rules
  4. 3. Watch: Don't fear web typography
  5. 4. Watch: Web fonts 3m 26s from Web Technology Fundamentals

Wed. or Thur.

  • In Class
  • Presentation: Intro Web fonts- what are they and how to use them
  • Activity: Practice adding web fonts in code pen 1st using type kit and then using google fonts. Select 2 different fonts from each. Practice using different sizes and weights on various HTML elements.
  • Introduce Project (One part 1)
  • Work time


  1. For Next Class
  2. 1. READ:Print vs Web Fonts
  3. 2. Review if needed:Using TypeKit AdobeTV
  4. 3. READ:Typographic Hierarchy Typekit blog

Week Five: 2/13 - 2/17

Mon. or Tue.

  • In Class
  • Presentation: Intro to CSS Positioning
  • Activity: Practice possitioning
  • Work Time: P1 (part 1)
  • Illustrator template with grid structures
  • Work Time: Set up file structure for P1 (part 2), using type kit or google fonts

  1. For Next Class
  2. 1. READ: CSS Positioning 101 from Alist Apart
  3. 2. Think about how you will translate your type specimen design to HTML. Sketch some wierframes to help you visually think about the code.
  4. 3. Look over CSS layout Cheat sheet
  5. 4. Turn in: Part one of project one on google classroom

Wed. or Thur.

  • In Class
  • Presentation: Understanding z-index, review of positioning, display, and float properties
  • Activity: Adding typekit and google fonts to P1 files
  • Review Part 2 of Project One
  • Work Time: Project 1 (part 2)
  • Introduce how remote classes will work

  1. For Next Class
  2. 1. Watch for Review:
  3. Working with fonts
  4. Formating Text
  5. Margin and Padding review
  6. Element Positioning
  7. Floating
  8. Remember you can watch lynda videos at 1.5 or 1.75 speed to watch them faster.
  9. 2. Watch:Don't fear layout
  10. 3. Work on P1 part 2
  11. 4. Next Mon/Tues will be a remote class. You may compleate content over the weekend if you like. You do not need to come to the classroom for class.

Week Six: 2/20-2/24

Mon. or Tue.

  • Remote Class
  • Remote class not held in classroom
  • Monday is Presidents Day no class students should compleate remote work listed below BEFORE class on Wed/Thurs.
  • Create a free codeanywhere.com account
  • Watch: What is FTP 4 min
  • Read: FTP on codeanywhere for next class. I will be setting up FTP passwords and usernames for you to use in class on Wed/Thurs.
  • Watch: What's your position11 min on lynda.com

  1. For Next Class
  2. 1.

Wed. or Thur.

  • In Class
  • Presentation: Trouble shooting for positioning, working with span tags
  • Using FTP: uploading p1 to server
  • Small group critiques of P1 part 2
  • Presentation: HTML5 review and Color on the web (hex, rgba, opacity vs alpha)
  • Activity: exploring color code pen
  • Activity Building HTML5 content exercise

  1. For Next Class
  2. 1. Watch: HTML5 into Lynday playlist 1h
  3. 2. READ: sitepoint.com/introducing-html5/
  4. 3. Finish P1 part2 (99% done) and FTP to server

Week Seven: 2/27-3/3

Mon. or Tue.

  • In Class
  • Final Critique Project One
    • 1. One think you are proud of in your design.
    • 2. One area you struggled with in the code, and how you fixed it.
    • 3. Any areas you are still struggling with?
    • 4. One thing you would like to improve about your design?

    • Feed back from the group: How is the hierarchy of the design working? How is the typography of the piece as a whole working?
  • Introduce Project Two
  • Create a one page informational website about a topic of your choice. Website will have an external css style sheet, use at least one web font, use some HTML5 tags, have images, and a link to an external website. This project will pull together all the content that we have discussed so far this semester.
  • Work Time
  • onepagelove.com
  • 14 Beautiful Content-Heavy Websites for Inspiration

  1. For Next Class
  3. 1. Make changes from critique on P1, and turn in P1 on Google classroom and FTP files to server.
  4. 2. Start to pick a topic for Informational Website and gather/create content.

Wed. or Thur.

  • In Class
  • Work Time
    • 1. Pick a topic for Informational Website and gather/create content
    • 2. Visual Reserch: Find examples of websites you like.
    • 3. Wireframe/sketch your layout
  • Small group crit of topics and Wireframes
  • Desk Crit- check in
  • Review remote class expectations

  1. For Next Class
  2. 1. Work on P2 [should finish planning before weekend and start coding]
  3. 2. Next Mon/Tues will be a remote class. You may compleate content over the weekend if you like. You do not need to come to the classroom for class.

Week Eight: 3/6-3/10

Mon. or Tue.

  • Remote Class
  • Remote class not held in classroom
  • Work Time on P2 [should spend 2.5h-3h coding]
  • Review: FTP your files for P2 using code anywhere
  • Share progress on P2 on google classroom by 5:30pm Mon. or 1:45pm Tue.
  • Comment on two other students progress before class on Wed/Thurs on google classroom

  1. For Next Class
  2. 1. Keep Coding
  3. 2. Comment on two other students progress before class on Wed/Thurs on google classroom

Wed. or Thur.

  • In Class
  • Work time on P2
  • Desk Critique

  1. For Next Class
  2. 1. Have P2 99% done for final critique
  3. 2. Upload P2 html and css files to server for critique.

Week Nine: 3/13-3/17

Mon. or Tue.

  • Monday 3-5:45 class cancelled due to illness
  • In Class
  • Final Critique of P2 (upload html and css files to P2 folder on server using codeanywhere)
  • Work Time

  1. For Next Class
  2. 1. Turn in P2 before next class to google classroom [no folder just html, and css files]
  3. 2. Uplaod P2 to the server [place your webfiles in a folder with your name] Webfiels should be any html, css, and folder of images.

Wed. or Thur.


  1. For Next Class
  2. 1. Read:What Does a UX Designer Actually Do?
  3. 2. Read:Usibility 101
  4. Reminder: There will be group work next class, very important to not miss class on M and T of next week.

Week Ten: 3/20-3/24

Mon. or Tue.

  • In Class
  • Presentation: Information Architecture, Card Sorting method, Prototyping, and Wireframes
  • Group Activity: Analyze existing architecture (submit on google classroom by end of class), prepare for Card Sort.
  • Presentation: Creating Personas and Scenarios for prototyping
  • Group work: Create personas and scenarios (submit on google classroom by end of class)
  • usibility.gov

  1. For Next Class
  2. 1. Conduct a card sort with 3 participants and create an google sheet or excel sheet for data.
  3. 2. Finish Watching: Info Architecture for GD50
  4. 3. Start Read: Chapter 1 from Killer UX

Wed. or Thur.


  1. For Next Class
  2. 2. Watch: UX Design Techniques: Overview
    3. with Chris Nodder
  3. 3. Finish Reading: Chapter 1 from Killer UX
  4. Finish Card sort and record data in google sheets

Week Eleven: 3/27-3/31

Mon. or Tue.


  1. For Next Class
  2. 1. CREATE: Mobile wireframes of home page and 3 sub navigation pages (Use information architecture and content analysis to create wireframes using the most relevant content. Refer to your personas and scenarios for how your users will use this site.)
  3. Review: UXpin Wierframing for Responsive

Wed. or Thur.

  • In Class
  • Presentation: Developing task list for user test.
  • Group Work: Creating a task list for user testing based on your scenarios
  • Presentation: Different kinds of user testing, Conducting a test, Using P.O.P.
  • Mock user testing in class

  1. For Next Class
  2. 1. Watch: UX Testing
  3. 2. Review: When to Use Which User-Experience Research Methods and Crash Course in UX design research
  4. 3. Finish any additional screens needed for usertesting and add to P.O.P.https://marvelapp.com/pop/
  5. 4. Start user testing

Week Twelve: 4/3-4/7

Mon. or Tue.

  • Remote Class
  • Conduct user testing with 3 people, record your observations.
  • Make changes to your wierframes/prototype based on the user tests

  1. For Next Class
  2. 1. Upload final task list, and observations from user test to google classroom
  3. 2. Start thinking about color pallet and UI style

Wed. or Thur.

  • In Class
  • Presentation: Final Project
  • Discussion on design phase, may want to continue to user test but not required
  • Work Time
  • Desk Crit: updated wierframes, changes from user testing and design direction for website

  1. For Next Class
  2. 1. High fidelity mock up of MOBILE homepage and browser version with color pallet, font choices and styling defined. (only need for Home page, you will code your sub pages based on the styles set up in the homepage)
  3. 2. Get started coding! Dive in!
  4. 3. Watch: Responsive Website Basics (in 3 simple steps)

Week Thirteen: 4/10-4/14 SPRING BREAK

Mon. or Tue.

  • NO Class
  • Spring Break

  1. For Next Class
  2. 1.
  3. 2.

Wed. or Thur.

  • NO Class
  • Spring Break

  1. For Next Class
  2. 1.
  3. 2.

Week Fourteen: 4/17-4/21

Mon. or Tue.

  • In Class
  • Small Group Design Critique of Mockups
  • Work Time Final Project: Dive into the Coding of the site
  • Desk Crit

  1. For Next Class
  2. 1.Code, Code, Code
  3. 2. Extra Credit: Watch Responsive Design Fundamentals and submit a copy of the course certificate on google classroom.

Wed. or Thur.


  1. For Next Class
  2. 1.
  3. 2.

Week Fifteen: 4/24-4/28

Mon. or Tue.

  • In Class
  • Work Time Final Project
  • Should finish Home page HTML and Mobile style by today; then start styling home page browser CSS using media queries

  1. For Next Class
  2. 1. Refer to Responsive code penfor media querie example
  3. 2. Finish HTML for Homepage and mobile CSS, start bowser css for homepage.

Wed. or Thur.

  • In Class
  • Small group in process critique
  • Work Time Final Project
  • Should have HTML structure finished for sub pages and styling started by end of class

  1. For Next Class
  2. 1.
  3. 2.

Week Sixteen: 5/1-5/5

Mon. or Tue.

  • Remote Class
  • Share progress on final project on google classroom by 5:30pm Mon. or 1:45pm Tue.
  • Comment on two other students progress before class on Wed/Thurs on google classroom
  • Work on Final Project

  1. For Next Class
  2. 1. Keep working on your code, remember you have a guest reviewer tomorrow so upload your code to our class website.
  3. 2. Keep working on your process PDF

Wed. or Thur.

  • In Class
  • Guest Reviewer
  • Present content so far to guest reviewer
  • Work Time

  1. For Next Class
  2. 1.
  3. 2.

Week Seventeen 5/8-5/12

Mon. or Tue.

  • In Class
  • Review: Process PDF for final project
  • Small group critique
  • Work Time on Code and Process PDF

  1. For Next Class
  2. 1. Turn in Process PDF on google classroom
  3. 2. Keep coding

Wed. or Thur.

  • In Class
  • Final Small group critique on code
  • Work Time on Code
  • Final desk critique

  1. For Next Class
  2. 1. Turn in Code files to google classroom
  3. 2. Upload final website to server

Finals Week 5/15-5/18

Mon./Wed. Class


Wait to take in class, please do not compleate before final.
  1. For Next Year
  2. 1. Have an excellent summer.
  3. 2. Kepp coding!

Tues./Thurs. Class


Wait to take in class, please do not compleate before final.
  1. For Next Year
  2. 1. Have an excellent summer.
  3. 2. Keep coding!