Web Design

Monday Jan. 15th

• No Class
• Martin Luther King, Jr. Day
• Google Doodle for Martin Luther King, Jr. Day

For Next Class

Wednesday Jan. 17th

• In Class
• Presentation: Introduce GD50 Syllabus
• Question Time; create accounts for quizizz.com
• Activity: Sign up for code pen, make first pen
• Join Google Classroom

For Next Class

1. Create profile headshot for class accounts, and intro survey
2. Take Intro Survey
3. READ: Syllabus GD50 Syllabus
4. Log into Lynda.com through Fresno State
5. Watch Don't fear the internet No. 1 NOT A SERIES OF TUBES

Monday Jan. 22nd

• In Class
• Introduce Classmates
• Take entry assessment
• Presentation: What is HTML and CSS Overview and HTML elements
• Text Generators
• Presentation: CSS box model and Div demo
  • - AtoZ CSS Screencast: The CSS Box Model
  • - AtoZ CSS Screencast: The ID Selector
  • Inspect Element
• Activity: Follow on codepen, and create a collection for our class. All class activity codepens should be added to the collection.
• Start Codecademy Learning HTML section 1 Introduction to HTML and Common Elements (skip the pro sections)

For Next Class

1. Watch Don't fear the internet No. 2 HTML
2. WATCH:CSS Box Model video (3m)
3. Watch: DEVTIPS: HTML5 Basics
4. Finish Codecademy Learning HTML section 1 Introduction to HTML and Common Elements (skip the pro sections)

Wednesday Jan. 24th

• In Class
• Activity: use code pen to recreate these images using div's, padding, and margins. Save each image as a seperate pen named ex2-1, ex2-2, and ex2-3
• 
• Presentation: Html5 element tags vs div tags
• More CSS
• Presentation:File structure, Links, and Images.
• http://laurahuisinga-design.com/GD50/_IMG/IMG_3425.jpg
• Activity: creating basic HTML template documents in sublime

For Next Class

1. 2. Watch: CSS Basics (Part3) — Selectors and CSS Basics (Part4) — Property and values
2. 3. Watch HTML5 Basics - Display Types and HTML5 Basics - HTML5 Tags

Monday Jan. 29th

• In Class
• Activity:In codepen take the 3 wierframe images you coded out and create new code using HTML5 tags insted of DIVs like header, footer, section, article, hgroup, etc. Due by Wed. Feb. 1st
• If you are still struggling with the 3rd wireframe try using the css property display:inline-block and give each column a specific width.
• Refer to: DEVTIPS: HTML5 Basics, HTML5 Cheat sheet or w3school

For Next Class

1. 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
2. Review:Website organization site

Wednesday Jan. 31st

• In Class
• Presentation: Fun with Fire Alarms
• Watch the videos listed on google classroom before the end of the week.

For Next Class

1. READ: Taking the “Erm..” Out of Ems
2. Watch the videos listed on google classroom before the end of the week

Monday Feb. 5th

• In Class
• Presentation: Navigation and styling
• Activity:Create Nav and 2 different styles in codepen. See presentation slides for discription.
• Presentation: Web Typography
• Activity: Styling text with CSS in codepen
• Web typography resources

For Next Class

2. Finish styling Navigation
3. Read: AESTHETIC WEB TYPOGRAPHY
4. READ: Typography Summary of Key Rules
5. Watch: Don't fear web typography
6. Watch: Web fonts 3m 26s from Web Technology Fundamentals

Wednesday, Feb. 7th

• 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

For Next Class

1. Read: TECHNICAL WEB TYPOGRAPHY
2. Get started on P1

Monday, Feb. 12th

• In Class
• Presentation: Layout Positioning, Floats, images, flexbox, and CSS grid
• CSS positioning 101
• css tricks Grid Guide
• CSS Grid Layout Crash Course
• Activity: Grid Garden
• Wireframes (visualize the code and physical containers or boxes)
• Work Time: P1 (part 1)

For Next Class

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

Wednesday, Feb. 14th

• In Class
• Presentation: Intro Project 1 (part 2)
• Presentation: Understanding z-index, review of positioning, display, and float properties
• Activity: Adding typekit and google fonts to P1 files
• Work Time: Project 1 (part 2)
• Activity:

For Next Class

2. Review videos if needed:
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. Watch:Don't fear layout
10. Work on P1 part 2

Monday, Feb. 19th

• NO Class
• Presidents’ Day Holiday

For Next Class

Wednesday, Feb. 21

• In Class
• Critique for P1p2 Type specimen code (upload HTML and CSS files to student shared file in class)
• Activity: work time to edit code

BFA 2018

Come to the BFA application meeting at noon Wed. 2-28-18 in room CA 212

For Next Class

1. Keep working on project 1
2. Due date for P1 moved to Wed. Feb 28th

Monday, Feb. 26th

• In Class
• Presentation: Code Review, and using FTP
• Activity: set up CodeAnywere and FTP connection to class server. Upload P1 files FTP LogIn
• Work Time on P1 and Process book

For Next Class

1. Turn in P1 on google classroom and FTP to Server

Wednesday, Feb. 28th

• In Class
• Presentation: Introduction to P2, Review of linking web pages together, Review FTP process, review Color, and HTML5 tags
• Activity: Work Time on P2

For Next Class

Monday, Mar. 5th

• In Class
• Presentation: UX UI Overview
• Activity: Work time on P2

For Next Class

1. Start Coding P2
2. GD Club Meeting Wed March 7th at Noon in CA 212

Wednesday, Mar. 7th

• In Class
• Presentation: Ethics in Webdesign
• Webstock ‘13: Mike Monteiro - How Designers Destroyed the World
• Activity: Worktime on P2

For Next Class

1. Attend Artist Lecture Thursday, Mar. 8th 5:00-5:50 pm in CA101 for 25 extra Credit Points
2. Monday March 12th is a REMOTE Class.
3. Read:What Does a UX Designer Actually Do?
4. Read:Usibility 101
5. Review: Center for Human Technology Website

Monday, Mar. 12th

• Remote Class on Google Classroom
• Watch What is UX Design
• Activity: Digital process critique of P2 on google classroom
  • 1. Post a link your in-progress work by Monday @ 3PM.
  • 2. Comment on your classmate's work by Monday at Midnight.
• Keep working on P2

For Next Class

Wednesday, Mar. 14th

• In Class
• P2 Critique
  • Tell us:
  • - One think you are proud of in your design.
  • - One area you struggled with in the code, and how you fixed it.
  • - Any areas you are still struggling with?
  • - One thing you would like to improve about your design?
  • socrative.com Join classroom HUISINGA
  • Feed back from the group: How is the hierarchy of the design working? Typography? Grid? Navigational flow? Wireframes?


• Presentation: introduce P3
• Activity: Work time on P2 edits and process book
• onepagelove.com
• 14 Beautiful Content-Heavy Websites for Inspiration

For Next Class

1. Turn In P2
2. Start gathering content for P3

Monday, Mar. 19th

• In Class
• Work Day on Project 3
• Desk Critique

For Next Class

Wednesday, Mar. 21st

• In Class
• Presentation: Infomation Architecture
• Activity: Break into groups, analyze existing architecture, Hearst San Simeon State Park

For Next Class

1. Read: Infomation Architecture www.usability.gov
2. Read: A Brief History of Information Architecture
3. Finish P3 and turn in on Google classroom before April 2nd
4. Apply to BFA if interested

Monday, Mar. 26th

• NO Class
• Spring Break
• Activity: Go Outside

For Next Class

Wednesday, Mar. 29th

• NO Class
• Spring Break
• Activity: Go Outside

For Next Class

Monday, Apr. 2nd

• In Class
• P3 Due
• Activity: Critique P3
  • Critique your partners design
  • -- What are you first drawn to in the design?
  • -- Does the design have strong visual hierarchy?
  • -- How could the Visual Hierarchy be improved?
  • -- What areas are working well and what could be improved.
  • Read over each others code share with your partner
  • -- One area you struggled with in the code, and how you fixed it.
  • -- Any areas you are still struggling with?
• What is poor usability
  • Minimize Cognitive Load to Maximize Usability
  • A Theory of User Delight

For Next Class

1. You may make any changes or updates to P3 based on your critique feed back. Turn in again on webserver and update HTML/CSS in google classroom.
2. Answer Question about Poor Usability on google classroom

Wednesday, Apr. 4th

• In Class
• Presentation: Intro P4 UX and redesign
• Presentation: Card sorting, UX data analysis,
• Group Activity: Analysis Info Arch and map out, Discuss pain points, develop task list to conduct card sort for new Info Arch.
• 1
• 2
• 3
• 4

For Next Class

1. Conduct card sort with 3 people and bring for Monday to analyze data in your group
2. Watch: Overview (13min)
3. Watch: Card Sorting to determaine Information Architecture (1m 40s)
4. Watch: Personas (1m30s)

Monday, Apr. 9th

• In Class
• Presentation: data analysis review and building personas
• Activity: First as a group build 3 personas turn in by the end of class
• Activity: Analyze your data as a group, talk about the pros/cons of different info arch. (Analyze the data together but You may develop a new Info Arch as a group or separately)

For Next Class

1. Finalize Information Architecture for your redesign (diagram out by hand or on computer. )
2. turn in Cart Sort data after analysis
3. build 3 personas

Wednesday, Apr. 11th

• In Class
• Presentation: Css Web Animations
• Animation activity in class
• Code pen bouncing ball
• Code pen robot from lynda
• css animation Lynda

For Next Class

1. Start picking color scheme and fonts for website redesign
2. Turn in Cardsort data and Personas on google classroom if you haven't yet

Monday, Apr. 16th

• In Class
• Presentation: Responsive coding
• Activity: Code Pen
• Crazy 8s for mobile wireframes

For Next Class

1. Wire frames for all mobile screens (Design Mobile first)
2. Low fidelity with Code hints and Higher sketch style fidelity to show design

Wednesday, Apr. 18th

• In Class
• Group Code Along: Set up HTML Shell and Media Query
• Presentation: review requierments for UX process book
• Presentation: Prototyping your Wireframes using Marvel App
• Activity: Using PoP/Marvel App, and creating task lists with your group

For Next Class

1. Start coding based on wierframes
2. finish wierframe prototype, based on task list
3. Please Log into BlackBoard and select our class to take the course evaluation.

Monday, Apr. 23rd

• In Class
• Presentation: Usibility Testing
• Activity: Finish task list, and walk through your own test with prototype
• Pair up and conduct test with prototype
• Write down any updates or chages you need before testing 3 other people (not classmates for GD50)

For Next Class

1. Finish 3 Usibility Test of your prototype (3 tasks on 3 different participants)
2. Summary of what you learned during testing for your process book And Turn In on Goggle Classroom for Monday. And
3. Get Coding

Wednesday, Apr. 25th

• Remote Class
• Finish 3 Usibility Test
• Write a summary of what you learned during testing for your process book
• Sketch out any design changes and add to wierframe
• Get Coding

For Next Class

1. Have Mobile Home page coded and styled by Monday
2. Start desktop style

Monday, Apr. 30th

• In Class
• Activity: review your code with partner (what you did and why)
• Presentation: Desk Critique on Homepage code
• Activity: Work day on code Should have HTML structure set up for subpages by end of class, and under construction html page for all broken links.

For Next Class

Wednesday, May 2nd

• In Class
• Presentation:
• Activity: review your code with partner (what you did and why)
• Activity: Work day on CSS for desktop homepage and adding style to subpages

For Next Class

Monday, May 7th

• In Class
• Activity: review your code with partner (what you did and why)
• Presentation: Desk critique
• Finishing up CSS and any modifications to HTML

For Next Class

Wednesday, May 9th

• In Class
• Presentation: Final UX Report and Process Book Due for P4
• Activity: Give Hi-Fives and ask any questions about your code before Monday.

For Next Class

1. Final is at 3:30-5:30 Monday, May 14th