GD 50

Web Design

Spring 2020

Week One: 1/13-1/17

Monday

  • In Class

    For Next Class

Wednesday

  • In Class

    For Next Class

Friday


    For Next Class

  1. Watch Don't fear the internet No. 1 NOT A SERIES OF TUBES
  2. Log into Linked in Learning through Fresno State and poke around. Maybe start a playlist of videos that look interesting.
  3. Click around on the website resources

Week Two: 1/20-1/24

Monday

  • NO CLASS
  • Martin Luther King, Jr. Day

    For Next Class

Wednesday


    For Next Class

  1. Extra credit attending artist lecture Th 3:30 in PB 191 and art opening Th 5:00 Perspectrum Write a short summary of the exhibit and what you learned or took away from the show.
  2. Start the first two sections of Introduction to HTML from CodeCademy. Take a screen shot after you complete.

Friday

  • Remote Class
  • Complete the first two sections of Introduction to HTML from CodeCademy. Take a screen shot after you complete.
  • Watch: 1. Overview of HTML and 2. Basic Page structure and take the quiz after each. Screen-shot your finished quiz page
  • After completing the codeCademy exercise and Linkedin Learning videos draw one page of sketch notes about HTML.

    For Next Class

  1. Upload your screen-shots of the linkedin learning quizzes, finished CodeCademy page and scanned image of your sketch notes.

Week Three: 1/27-1/31

Monday


    For Next Class

  1. Pick font, do visual research and sketch different mock up options
  2. Adobe Scan App

Wednesday


    For Next Class

  1. Work on Mock up and add to Google Slides by Friday at 10AM for digital critique
  2. Start watching Css Basics section 1 getting started, 2 core concepts, and 3 the box model

Friday


    For Next Class

  1. Turn in the PDF of your mockup, visual research, Sketches, and crazy 8s in our class google drive by Monday
  2. Add your final P1 to the Final Presentation Slides

Week Four 2/3-2/7

Monday


    For Next Class

  1. Read: TECHNICAL WEB TYPOGRAPHY
  2. Read: AESTHETIC WEB TYPOGRAPHY
  3. READ: Typography Summary of Key Rules
  4. Watch: Don't fear web typography
  5. Watch: Web fonts 3m 26s from Web Technology Fundamentals
  6. READ: Taking the “Erm..” Out of Ems

Wednesday

  • In Class
  • Visual Idea translated to code using wierframe
  • Activity: In codepen take the 3 wierframe images and code them using HTML5 tags insted of DIVs like header, footer, section, article, hgroup, etc.
  • 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
  • Adding webfonts
  • css tricks Grid Guide
  • CSS Grid Layout Crash Course
  • Activity: Grid Garden

    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

Friday


    For Next Class

  1. Bring Code to class on monday (try to have content and HTML outlines done on Monday with a start on the css)

Week Five 2/10-2/14

Monday

  • In Class
  • Intro FTP to the Server
  • Review Adding webfonts
  • Work on P2 desk critiques

    For Next Class

  1. Add Links (link to codepen, or html and css files on google drive.) and screen shots to critique presentation

Wednesday

  • In Class
  • Activity: FTP to the Server
  • Review Adding webfonts
  • 10:30 Final Critique for P2
  • Work time on P2

    For Next Class

  1. Turn in P2 before next wed
  2. Take a screen Capture of your finished site with adobe Captive or other free screen capture softwear
  3. Screen Capture Adobe Captive tutorial

Friday

  • Remote Class
  • Digital Critique of P2
  • P2 Due on Wed 2-19-20
  • Make a list of things/topics you are interested in and would like to make a fan website for.

    For Next Class

  1. Turn in P2 by Wed 2-19
  2. Take a screen Capture of your finished site with adobe Captive or other free screen capture softwear
  3. Screen Capture Adobe Captive tutorial

Week Six 2/17-2/21

Monday

  • NO Class
  • HOLIDAY – Presidents’ Day

    For Next Class

Wednesday

  • In Class
  • Present P2 sites
  • Intro P3 Fan Site
  • uploading to server filezilla tut
  • Intro Linking Images, Linking html pages

    For Next Class

  1. Practice: Adding Images
  2. Practice: Adding Links (local vs destination)
  3. Watch: Working with figure and figcaption
  4. Pick a topic for P3 and start gathering content
  5. review: Screen Recorders

Friday


    For Next Class

  1. Bring in your visual research and sketches for P3 to class.

Week Seven 2/24-2/28

Monday


    For Next Class

  1. Start outlining your HTML structure, try to have your home page HTML roughed out by Wed.
  2. Bring in your visual research and sketches for P3 to class.
  3. Remember to refer back to W3 school, and previous videos while working on your HTML and CSS coding is all about knowing where to look up references you do not need to have everything memorized to successfully code a web-page.

Wednesday

  • In Class
  • Present P2 slides
  • workday in class
  • Desk critiques

    For Next Class

  1. Really start styling your homepage with CSS shoud have homepage HTML finished
  2. Get started on secondary pages HTML

Friday

  • Remote Class
  • Continue working on code spend at least 1.5 hours coding today
  • Make a list of any questions you have as you are coding.

    For Next Class

  1. Should have HTML for all your site pages and working links connecting your site.
  2. Have most of your styling together for the homepage
  3. Start working on the styling for your secondary pages.
  4. Consider attending International Womens Day Tech Conference at Bitwise on March 7th (all are welcome!)

Week Eight 3/2-3/6

Monday

  • In Class
  • Small group critiques
  • Work time on Code

    For Next Class

  1. Remember to Vote tomorrow, Tuesday March 3rd
  2. Work on finishing P3 website, screencast and Processbook

Wednesday


    For Next Class

  1. Turn in P3 Review the deliverables
  2. Google Drive: Folder with index.html file, 2 more html files, images, style.css, video mp4 file and process book
  3. FTP: Folder with index.html file, 2 more html files, images, style.css to your server space.
  4. Canvas: Link to google drive folder and live site
  5. Presentation: Link to live website, insert screen capture of website and 3 screenshots P3 Final Presentation

Friday

  • Remote Class
  • Log onto Canvas
  • Project 3 Due at 10 am
  • Watch UX Overview and submit the compleation certificate on Canvas
  • Read: Human Centered Design Problems with Recycling System Take one page of sketchnotes about what Human Centered Design is based on this article.

    For Next Class

  1. Consider attending International Womens Day Tech Conference at Bitwise on March 7th (all are welcome!) Extra Credit on Canvas
  2. Have your website picked out for P4 to evaluate

Week Nine 3/9-3/13

Monday

  • In Class
  • Present P3
  • UX UI overview
  • Work time on P4

    For Next Class

  1. Catch up on any late work and turn into Canvas/google drive
  2. Work on P4

Wednesday


    For Next Class

Friday

  • Remote Class
  • See canvas module for fri 3/13
  • Watch: UX Foundations: Usability Testing Upload the certificate screen of video compleation
  • Continue to work on P4 (aim to have steps 1-5) compleated by the end of day on Monday. Start gatering and designing steps 1-5 in your UX report.

    For Next Class

  1. P4 Steps 1-5
  2. Catch up on any videos you havent watched yet.

Week Ten 3/16-3/20

Monday

  • NO Class

    For Next Class

Wednesday

  • NO Class

    For Next Class

Friday

  • Remote Class
  • Review todays module on Canvas
  • Read about remote UX testing and set up your protocol.
  • Create a schedule for yourself
  • Remember to take exercise and meditation breaks
  • Practice Zoom

    For Next Class

  1. Work on steps 6 and 7 6. Develop a protocol, task list and exit survey for your user test. 7. Find users and Test! (At least 5 tasks and test at least 3 participants )

Week Eleven 3/23-3/27

Monday

  • Remote Class
  • Individual Zoom Meetings, general check in and review of remote UX testing protocol
  • Conduct Remote User testing on your website

    For Next Class

  1. Finish up remote user testing
  2. Work on step 8. Create a report of your process and findings. (Have content from all seven steps. Including your initial analysis, experimental data, and an analysis of your data.)
  3. What are your design recommendations based on your testing?

Wednesday


    For Next Class

  1. Finish UX report and Create a summary video 1min 30sec to 3min, (Use google slides or spark to walk us through your report verbally, use images from your report. post to P4 presentation slides and save pdf and video in the student work google drive

Friday


    For Next Class

Week Twelve 3/30-4/3

Monday


    For Next Class

  1. Add your slide toCritique of P4.5

Wednesday

  • In Class
  • Critique of P4.5 Add your slide before class and comment on everyones by the end of 11:59 pm

    For Next Class

  1. Finish Code of P4.5 and turn in

Friday


    For Next Class

Week Thirteen 4/6-4/10

Monday

  • NO Class
  • Spring Break

    For Next Class

Wednesday

  • NO Class
  • Spring Break

    For Next Class

Friday

  • No Class
  • Spring Break

    For Next Class

Week Fourteen 4/13-4/17

Monday


    For Next Class

  1. Review Linked in Learning Responsive web design if you didn't get a chance to watch it before break

Wednesday

  • In Class
  • Turn in Homepage P5 by midnight

    For Next Class

  1. Catch up day, work on any late work or review videos/readings you might have missed
  2. If you are all caught up check out design/ux/code podcast and listen to an episode or two. Web Design podcast list for 2020
  3. Consider making yourself a cloth mask: How to Make a CDC-Approved Cloth Face Mask or Make your own face mask—no sewing machine required

Friday

  • Class
  • Review everyones homepages on the shared google slides and leave a comment for each
  • Work on any late work or Listen to a new design podcast

    For Next Class

  1. Catch up day, work on any late work or review videos/readings you might have missed
  2. If you are all caught up check out design/ux/code podcast and listen to an episode or two. Web Design podcast list for 2020
  3. Consider making yourself a cloth mask: How to Make a CDC-Approved Cloth Face Mask or Make your own face mask—no sewing machine required

Week Fifteen 4/20-4/24

Monday


    For Next Class

  1. Watch: What is mobile-first2m
  2. Optional Reading:Mobile First Book uploaded to canvas
  3. Visual research on mobile websites
  4. Have your website pick out and analyzed the site on mobile (can be the same as P4 or a new site)

Wednesday

  • In Class
  • Work on Responsive website
  • Create persona and scenarios based on your analysis
  • Start mobile wire-frames

    For Next Class

  1. Finish Mobile and desktop wire-frames
  2. Finish Mobile Mock up in illustrator or XD
  3. Review:W3School responsive (scroll down to mobile first)

Friday

  • Class
  • Work on Responsive website
  • Post wire-frames and mock up to google slides by 11AMP6 Mockups slides
  • Start coding our your HTML and CSS starting with mobile

    For Next Class

  1. Continue to work on your code

Week Sixteen 4/27-5/1

Monday


    For Next Class

  1. Push your in progress code to the server to share with classmates on Google slides by 10:30 am
  2. Review:W3School responsive (scroll down to mobile first)
  3. Review:An Introduction to Mobile-First Media Queries
  4. Review: Practice Media Query on code penResponsive
  6. Review: What is mobile-first2m

Wednesday

  • In Class
  • Peer In progress check in on code: View your classmates in progress work. Right-click and view page source to see the HTML, then click on stylesheet link in the HTML to see the CSS. Leave a comment for the person who posted before and after you. P6 Peer Review Code
  • Continue working on your code
  • Read over: w3school Responsive

    For Next Class

  1. Leave a comment for the person who posted before and after you.P6 Peer Review Code

Friday

  • Class
  • Continue to refine your Code
  • Create process PDF

    For Next Class

  1. Post your website on the server and google slides for P6 critique

Week Seventeen 5/4-5/8

Monday


    For Next Class

  1. Make any adjustments to your code, finish your process book and create recording of your live website

Wednesday


    For Next Class

  1. Finish demo reel for final
  2. Finish up any late work and turn in by the end of finals week

Friday

  • NO Class
  • Dead Days

    For Next Class

Week Eighteen Finals 5/11-5/15

Monday

  • In Class

    For Next Class

Wednesday

  • Final
  • Log onto canvasFinals Module for zoom link
  • Demo reels due 11 am
  • Join Group Zoom Meeting at 11 am
  • Take short: GD 50 Exit Assessment Taking this is a requirement of the final but you will not be graded on your answers. Full credit is given for completing the questions regardless of your answers.
  • Take short: Online Teaching and Learning survey

    For Next Class

  1. Turn in any late work through this Friday for full credit. Contact Dr. Laura if you have any concerns about finishing by Friday.

Friday

  • No Class
  • Have a Great Summer!
  • ballanalacat basking in the sun
  • Consider taking a summer design class. Check out Art109T Intro to Game design, or ID132 Intelligent Interiors

    For Next Fall

  1. See some of you in GD142, or GD157 next semester!