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 14 – Challenge

  • Create an e-greeting inspired by the candy hearts provided.
    • Project must be contained in a single file.
    • At least one photo or scan of a candy heart must be included.
    • Bonus: Include motion.*
    • Bonus: Send the greeting via email (and not as an attachment) by the end of class.*

*Graduate students must complete one bonus as part of their challenge.

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 7 – Challenge

  • CHALLENGE: Present Work in 5 minutes; you have 30 minutes to prepare
    • Show original magazine layout and identify key features of the design
    • Show an overview of your process (ideation, drafts, user testing)
    • Show current solution and explain how your process informed your solution.
  • Critique

Homework

  • Revise project for Friday, February 9. Complete process book, written evaluation and portfolio documentation for Monday, February 12.

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.

February 2 – Critique Delayed

I will not be in class today because of a family emergency. Please give each other feedback today and mentor beginning students who need help. Use the class time you have to refine your work — remember that you need to do user testing, so feel free to ask students in 317 to help you out. We’ll critique your projects on Monday and will bump the remaining deadlines for the assignment by one class period. If you have questions, please reach out in Slack.

January 31 – Challenge #2

Challenge 1: “Show Love” Button Design

Show Love Button

Recreate this button using only CSS and the following HTML: <body><button> Show Love</button></body>. You may not use ANY images. Submit a single html file that contains an internal style sheet. Remember that the example above is just an image and does not show any interaction; it is up to you to decide an appropriate user feedback and interaction.

In addition to submitting your coded solution provide a written explanation of how you tackled this problem. It is not uncommon to have a hard technical test in an interview where the purpose is to demonstrate your thought process and problem solving skills and not necessarily a perfect solution.

Hints

  • Hint 1: Multiple Borders
  • Hint 2: HTML Entities
  • Hint 3: Pseudo Elements
  • Hint 4: Text Shadow & Text Transform
  • Hint 5: CSS Gradients

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 29 – Process Books

A process book documents all major design decisions and steps in the design process. Summarize research methods and key findings. Explain how findings during discovery, critiques or user testing influenced how a particular deliverable or asset was revised. Remember to both show and tell.

Other members of your design studio who might need to update or revise your project or do a similar one in the future are the intended audience of this document.

Process book will be evaluated with the department’s process rubric. The process outlined in the book, the actual design of the book, and the writing in the book are all evaluated.

Specs

  • letter size
  • landscape
  • designed for screen
  • design in InDesign (use stylesheets)
  • submit as an accessible PDF

January 26 – Body Copy

Homework

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

December 6 – Home Stretch

Homework

November 13 – Planning and Prototyping

  • Review Questions
  • Q & A
  • Project Planning
    • Project Goals: Define the project goals in your own words. Consider how you want the audience to feel as a result of visiting and iteracting with the site. Words we generated in class were: patriotic, safe, transitioning, complex identities, informative but not formal, friendly, bright, welcoming, community, open, inclusive, family and storytelling. What is the site’s value proposition?
    • Audience Needs: Who is our audience? What biases or assumptions might they come to the project with? Review the notes from our perception exercise to help. What are holes in their knowledge that the project can overcome? Why would an audience member go to the website rather than a podcast application? Do you need additional information or elements to address the needs?
    • How do you encourage an audience member to explore more than one episode once they are on the site?

Homework

  • Continue working on the Voices of Oswego Veterans project

November 3 – Reflection

  • Review Questions
  • Promotional Website Show and Tell with feedback on printed promotion
  • Feedback on Project Documentation
  • Voices of Oswego Veterans Kickoff: Perceptions, Hopes and Fears

Homework

  • Revisions to Project Documentations
  • Read Voices of Oswego content (note must be logged into Google Drive with Laker ID to access

November 1 – Work Day

Oswego County Airport

  • Brian: grid and typography — experiment with this in code
  • Maddie: slider and navigation
  • Marissa: full posts and post excerpts on pages
  • Brandon: coded prototype of contact page and coded template with needed modules

November 1 – Advisement

Homework

  • Process Books: Final drafts submitted as PDFS on Google Drive by 11:59pm tonight (11/1)
  • Print Promotion: Bring final physical prototypes to class on Friday (11/3); photographs and design files submitted on Google drive prior to the start of class.
  • Website Documentation: Bring a printed version to class on Friday 11/3. You will have the opportunity for feedback. Final PDF versions are due on Google Drive prior to the start of class on 11/6.