317_SP18

Web Media I

May 9 – Final

May 2 – Testing

Deadline Reminders

  • Group Components: Website and Copyright Documentation (Due Friday, May 4 at 4pm)
  • Group Components: Final Presentation (8-10 minutes) and Website Exhibition Poster (Due Wednesday, May 9 at 8am)
  • Individual Components: Process Book, Portfolio Documentation, Survey (Due Wednesday, May 9 at
    11:59pm)

April 30 – Critique

  • Critique: be sure to document feedback in your process book, as well as what changes you have made in response to that feedback.

Homework

  • Develop a User Test script. Include a 5 second test and identify 2-3 specific tasks a user would try to complete on the site.

April 27 – Navigation

Homework

  • Prepare template files for critique on Monday.
  • Final coded websites will be due at 4pm on Friday, May 4. I will be available for last-minute drop-in help from 11:30am – 1pm that day.

April 25 – Menu

Homework

  • Make sure code is validated and commented. Take advantage of the cascade in CSS.

April 23 – Development

  • Strategies for modular design and development.
  • Working with templates.
  • Navigation exercise.

Homework

  • Finish up HTML of templates.
  • Revise any content or assets after geting feedback in class.

April 20 – Wrap up Planning

  • Review solution to RQ20
  • RQ21
  • Planning for development starting on Monday
    • User Testing
    • Initial accessibility testing
    • “5 second test”
    • Content and asset development/creation
    • Identify pages that need to be developed
    • Prototype basic user flows

April 18 – Work Day

  • Work with group to refine concepts.
    • Develop a complete site map.
    • Determine key pages that would need to be built for a working prototype.
    • Work on needed content (text, image, video, audio, etc.)
    • Refine mockups. Consider multiple screen sizes. What are the templates you will need?
    • Double check your content to make sure that you are not preferencing one species or reinforcing stereotypes. Check text, images, and accessibility features.

Homework

April 16 – Client Pitches

  • Pitch the client.
  • Critique with members of other groups.

Homework

  • Refine chosen concept.

April 13 – Work Day

Reminder: Rebecca is out of town for a conference.

  • Prepare for presentations.
  • Remember to keep your process book up to date.

April 11 – UI Patterns

Homework

  • Prepare for pitch on Monday.

April 9 – Pitching

Homework

April 6 – Competitive Analysis

Homework

April 2 – Simulated Client Project

  • Review Questions
  • Character mapping from the “ethnographies” we read.
  • Introduce Simulated Client Project
  • Meet with teams for final project
    • Team 1: Johnna, Heng-Hao, Mariana (stop specie profiling)
    • Team 2: Stephanie, Olivia, Kim, Claire (open communication to build community)
    • Team 3: Sean, Ashley, Hanye (consider ethics of eating species who live in the community)
    • Team 4: Deandrea, Tsai-Ning, Ben, Nick Z. (redefine housing standards, especially in rural areas)
    • Team 5: Nick L., Kelsi, Sydney, Alyssa (improve citizen safety training)

Homework

  • Set up Slack channel for team (make sure it is public and that you invite Rebecca and all team members)
  • Create personas for Simulated Client Project. All students must create at least one persona. For consistency, use the Persona Core Poster introduced in the reading assigned last week.
  • Review the answer key to the Products Page and the answer key to the Landing Page. Compare your own solution. Come to class on Friday with questions.

Mar 26 and Mar 28 – CSS Grid

Homework Due Monday, April 2

March 21 – Troubleshooting

  • Troubleshooting
  • Critique

Homework

  • Due 3/23 at 11:59pm Promotional website and copyright documentation
  • Due 3/36 at the start of class Process Book

Mar 19 – Review and Critique

Homework

  • Revise Promotional Website for critique

March 6 – Images

  • Review Questions
  • Images: Content or Decoration?
  • HTML Tags: img, figure, figcaption
  • CSS Properties: background-image, float, clear, overflow

Homework

  • Continue working on Promotional Website. Make sure you have implemented any HTML entities needed. Complete CSS for typography.

February 28 – Work Day

Homework

  • Read chapter from Don’t Make Me Think
  • For Monday, March 5 you need to have a complete plan for the website and the HTML (minus the images) written.

February 26 – Content & Copyright

  • Review Questions
  • Copyright Reminders
  • Critique on revised Moodboards

Homework

February 23 – Critique

  • Review Question: download rq12.html. Your goal is to design this page of typography resources so that it is easy to skim. Add this file to a project folder, create a stylesheet and start styling! Submit on Google Drive.
  • Moodboard and Logo Critique
  • Empathy Maps

Homework

  • Complete Empathy Map Exercise
  • Read chapters 1-5 in Don’t Make Me Think by Steve Krug by Wednesday, February 28.

February 21 – Visual Research

February 19 – Brainstorming

Homework

  • Complete the Moodboards for Web Designers course by Sue Jenkins on Lynda.com (http://oswego.edu/lynda to log in). The course is about an hour. You will need to provide a certificate of completion (in Lynda click your name in the top right hand corner > certificates). Print your certificate and bring to class.

February 16 – Review

  • Review Questions
  • Complete typography blog exercise. Make the site live. Test on large screen, iPads, and at least one phone. Identify issues (document those issues in a Google Doc) and then revise your design to address the issues.

Homework

  • Evaluate the typography your final Typography Blog design.
    • An evaluation requires that you identify and explain the criteria you are evaluating with.
    • An evaluation is not an argument for why you deserve a good grade. A good evaluation looks as the design critically and demonstrates a good understanding of best practices.
    • Remember to address the following: the tone established, legibility, readability, horizontal rhythm, vertical rhythm, chunking, hiearchy, punctuation, etc. Do not forget to consider how well the typography works on all screen sizes.
    • Be specific. Point to very specific elements of the design and specific design decisions that you made.
    • Show as well as tell by including screenshots of your website to illustrate what you are talking about.
    • 500 word evaluation
    • Submit as a PDF on Google Drive and Lisa French. Bring a printed copy to class

February 14 – Challenge

  • Challenge: Write a love letter to typography. Pick one element, aspect or concept to focus on. The letter should include an opener and a closer. Create a webpage to “hold” that letter. Type is image. No additional content is allowed.
  • Bonus: Create a webpage for one of the provided quotations about typography. The typographic choices should reflect the content of the quote and the designer who said the quote.

Homework

  • Complete in class exercise.

February 12 – Testing

  • HTML: metadata
    • <meta charset=”UTF-8″>
    • <meta name=”description” content=”Put a short description of your site here.”>
    • <meta name=”keywords” content=”search phrase 1, term2, search phrase 3, keyword4″>
    • <meta name=”author” content=”author’s name”>
    • <meta name=”designer” content=”your name”>
    • <meta name=”viewport” content=”width=device-width, initial-scale=1″>
  • SFTP
    • hostname is rocky.oswego.edu
    • username and password are your laker credentials
    • upload a project folder to the public-html folder
    • URL is http://oswego.edu/~yourLakerID/projectFolderName

Homework

  • Exercise: Test, Publish and Revise
    • Add metadata to HTML
    • Check HTML code with provided markup
    • Validate HTML and CSS. Address all errors and warnings.

    • Make code live

    • Test on large screen in lab, on iPad, and on a phone. Make notes about what needs to be revised at each screen size. Use the Chrome add-on Measure to check your line lengths.
    • Use the Wave Evaluation tool to check for accessibility issues.
    • Revise your files, make live, and retest (repeat as necessary).

    Submit your testing notes, final version of the site, and a shortcut to the live website.

  • Check to see if you have a public-html folder when logging in to FTP. If not, file a ticket with CTS today!

February 9 – Typographic Details

Homework

  • Read chapters 10-12 in Better Web Type. These chapters will cover typographic details you will need to implement in your website project for Monday.
  • Exercise: create a copy of the last exercise folder for this exercise. Implement appropriate Open Type Features, punctuation and special characters. Refine the overall design. Make sure you have added any necessary attribution or other details required to abide by copyright law and the licenses of the assets used in the project. This will be the final version of your website, which will be published live on the web (refine accordingly).

February 7 – Critique

  • Critique
  • Vertical Rhythm: baseline grid (applied to the vertical space on the site), chunking, modular scale (applied to the type sizes)
  • Modular Scale Tools: ModularScale, TypeScale

Homework

  • Exercise 8: Make a copy of exercise 7 and add the following:
    • Revise design based on feedback during critique.
    • Implement a modular scale.
    • Implement a baseline grid.

February 5 – Vertical Rhythm

  • Review Questions
  • Q & A
  • HTML: unordered lists, ordered lists, list items, span
  • CSS: box model, media query, list-style
  • Vertical Rhythm: baseline grid (applied to the vertical space on the site), chunking, modular scale (applied to the type sizes)
  • Modular Scale Tools: ModularScale, TypeScale

Homework

  • Exercise 8: Create a copy of the exercise 7 folder for this exercise. In this exercise you will
    1. Add media queries where your design falls apart (usually because the line length gets too long). In each media query consider the font-size, line-height and line length of both the paragraph and heading text.
    2. Implement any necessary changes to the horizontal rhythm in media queries (letter-spacing, kerning, text-align, text-indent, etc.)
    3. Improve the vertical rhythm of the page across screen sizes by implementing a baseline grid, chunking and a modular scale.
    4. Adjust the page composition to take advantage of the visual interest that asymmetry brings.
  • Prepare for critique next class.

February 2 – Horizontal Rhythm

Rebecca will not be in class today because of a family emergency. Although there is not class, there is still work to be done in preparation for Monday. For class today (Friday) you should have the mobile design for your webpage implemented. Use class time today to start exercise 7:

  1. Create a copy of exercise 6 and use the copy to complete this exercise.
  2. Add space between your paragraphs by adding the property margin-bottom to the p selector in your stylesheet. Em would be the appropriate unit.
  3. Invent a name for the website and add it to the header of the webpage.
  4. If you used a sans-serif typeface for your body text, find a companion serif typeface to use for your headings. Likewise, if you used a serif typeface for your body text, find a companion sans-serif typeface to use for your headings. Use your text for guidance on how to choose a second typeface (a similar x-height is necessary). Implement your new heading styles.
  5. Use the CSS-Tricks Almanac to look up the following CSS properties that impact horizontal rhythm: letter-spacing, kerning, text-align, text-indent, hanging-punctuation. Use this information to improve the horizontal rhythm of your headings and your body text on your small screen design

Help each other out. Ask the advance students for guidance if you get stuck. If no one can help, post a question on Slack and I’ll help you out.

Homework

  • Read Chapters 7-8 in Better Web Type
  • Finish exercise 7.

January 31 – HTML and CSS

  • Review Questions
  • Q & A
  • Copyright protections:
    • Reproduce work in copies
    • Create derivative works
    • Distribute copies to the public (sale, rental, etc.)
    • Perform the work publicly
    • Display the work publicly
    • Perform the work publicly by means of audio transmission
  • HTML: doctype, html, body, head, meta, title, p, h1, h2, h3, h4, h5, h6, div, article, header, footer, main
  • CSS: reset, font-family, font-size, color, line-height, width, padding
  • MDN HTML Element Reference
  • CSS Tricks Almanac
  • HTML Validator
  • CSS Validator

Homework

  • HTML Exercise: Create a folder for this exercise. In that folder create a file called index.html and markup the content of the provided typography blog post. Attach a stylesheet and implment the optimized paragraph design for mobile from the paragraph sketches exercise. Make sure you validate your code.
  • Read chapters 5 and 6 in Better Web Typography.

January 29 – Readability

  • Review Questions
  • Q&A
  • Installing fonts on a Mac
  • Exploring Open Type features
  • Readability: line height, line length, type size, type color

Homework

  • Exercise 4: Play Better Web Type game until you get at least an 85%. Submit a screenshot of your score on Google Drive.
  • Exercise 5: Create 3 paragraph sketches for each of the following screen widths: 400px, 1200px, 2000px. Consider weight, style, leading, and size. Sketches should be made in Illustrator.

January 26 – Body Copy

Homework

  • Choose Font Exercise
  • Complete copyright documentation for Typography Blog project
  • Read Chapter 4 in Better Web Typography

January 24 – Content vs Style

Homework

January 22 – Introductions

  • Introductions
  • Brain Dump: What is web design?
  • Hopes and Fears
  • Review Syllabus

      • Homework

      • Read Chapters 1&2 Better Web Typography