Category: 317_F16

Dec 9 – Work Day

Topics

  • Course Surveys
  • Copyright forms.
  • Work Day

      • Due on December 11 at 11:59pm

      • Final prototype assignment, process books and time sheets on Google Drive

      Due on December 14

      • Presentation of web consultation findings and proposed solutions (prototypes). Presentations are done as a group and should be between 15-20 minutes.
      • Complete survey on collaboration and teamwork in group — can complete during the final.

      REMINDER: The final is from 8-10am on Wednesday, December 14.

Dec 5 – Critique

Topics

  • Critique
  • User Testing with Dave and Chris
  • Work Day

Due December 7

  • Complete HTML of prototype, validate and have teammates check
  • Start mobile styles

Dec 2 – Critique

Topics

  • YMCA Brand Guide
  • Use of Cache via Monotype’s student program
    • Licensing: Monotype’s Student Font Pack (see page 3)
    • Font-weight for Book is 300, for Medium is 500 and for Bold is 700
    • The font-family ‘Cachet W01’
    • Add this <link type="text/css" rel="stylesheet" href="//fast.fonts.net/cssapi/02709ad9-3bd9-4ba1-9fa4-076dafaf5778.css"⁄> to the head of the HTML files
    • Note: this will only work for student projects hosted on the Oswego domain
  • Usability Hub for User Testing
  • Critique

Due December 2 at 11:59pm

  • Revised versions of reports

Due December 5

  • Revised prototypes

Nov 14 – Visiting Designer

Topics

  • Dan Rose Visit

Due Nov 16 at 4pm

  • Any and all revisions to Project 2. Please be sure to label all revised files with the date the work was last revised (example project2_website_revised_Nov14).
  • All extra credit write-ups (Dan Rose talk at 4pm and Get Worked Up).

Nov 9 – Work Day

Topics

  • Discuss collaborative writing strategies as follow up to Stephanie Pritchard’s visit on Monday
  • Work in groups

Due Nov 9

  • Prepare for Review Questions on Friday

Nov 4 – Work Day

Topics

Remember that Rebecca is at a conference today. If you have questions, you can reach her on Slack. Use today to collaborate with your team so that you are prepared for Monday’s writing workshop.

  • Work Day
  • Remember to keep track of your time on this project using an app like Toggl or in a Spreadsheet. Specifically, track the date, the task, and the time on that task

Due Nov 7 – Team

Due Nov 7 – Individual

Now that you have had some distance from project 2, you are in a better position to evaluate your design work. Answer each of the questions below separately (number in the file you turn in). Submit written evaluation on Google Drive as a PDF (yourname_p2evaluation.pdf) in your Project 2 folder.

  1. Evaluate the effectiveness of your typographic choices. Support your claims with evidence, examples and screenshots. Use appropriate vocabulary. Address what you could do in the future to make the typography stronger.
  2. How strategic is your design? Consider your personal goals and the goals/needs of your intended audience. How did you address these goals/needs? What could you have done to address these goals/needs more effectively?
  3. Evaluate the overall user experience. Is the site functional? Is the site usable? Is the site desirable? Explain. Be sure to address how the site is organized, how well the site works across screen sizes, the navigation (if there is any), and what makes your site stand out in a sea of other job applicants (what is unique or memorable?). Evaluation requires that you look at both the strengths and the weaknesses of your design.

Nov 2 – Advisement

Topics

Due Nov 7 – Team

Due Nov 7 – Individual

Now that you have had some distance from project 2, you are in a better position to evaluate your design work. Answer each of the questions below separately (number in the file you turn in). Submit written evaluation on Google Drive as a PDF (yourname_p2evaluation.pdf) in your Project 2 folder.

  1. Evaluate the effectiveness of your typographic choices. Support your claims with evidence, examples and screenshots. Use appropriate vocabulary. Address what you could do in the future to make the typography stronger.
  2. How strategic is your design? Consider your personal goals and the goals/needs of your intended audience. How did you address these goals/needs? What could you have done to address these goals/needs more effectively?
  3. Evaluate the overall user experience. Is the site functional? Is the site usable? Is the site desirable? Explain. Be sure to address how the site is organized, how well the site works across screen sizes, the navigation (if there is any), and what makes your site stand out in a sea of other job applicants (what is unique or memorable?). Evaluation requires that you look at both the strengths and the weaknesses of your design.

Oct 28 – Project 3 Intro

Topics

  • Introduction to Web Consultation Report: See student example from last year.
  • Meet with Kerrie Web, Executive Director, Oswego YMCA
    • Clarify goals of Oswego YMCA
    • How does website support goals of YMCA?
    • Who are the members of the YMCA?
    • What tasks do members or potential members of the YMCA try to complete on the website?
  • Writing surveys: informed consent, avoid bias, maintaining anonymity, etc.

Due Oct 30 at 12pm

  • Project 2 published and files submitted on Google Drive
  • Be sure that all files documenting your process for Project 2 are submitted

Due Oct 31

  • Read p1-18 of RGD Accessibilty Handbook (note that there is one section on page 2 about compliance with Accessibility for Ontarians with Disabilities Act. This obviously only applies to Canada (and Ontario specifically). In the US we have the American Disabilities Act and Section 508 (which is specific to electonric media).
  • Join #surveyquestions channel on Slack. Propose at least one survey question (with any MC answers, etc.) and comment on submissions by peers. Active participation is important.

October 26 – Work Day

Topics

Due October 28

  • Familiarize yourself with the Oswego YMCA website
  • Write up findings from 3 User Tests on Project 2 (Submit User Test Script and Findings Report as a PDF).
  • Scan and submit notes from Critique on monday (PDF).
  • Copyright Documentation for Project 2

Due October 30 at 12pm

  • Final code files for Project 2 on Google Drive
  • Shortcut to live site on Google Drive

October 21 – Mobile CSS

Topics

Due October 24

  • Prepare for in-class critique. CSS for mobile and large screens should be complete (medium screens might still need some work). Make draft site live via FTP so that you can test your site on mobile devices and iPads.

October 17 – Critique

Topics

Due October 19

  • Read Chapters 5-7 in Don’t Make Me Think by Steve Krug.
  • Complete HTML for Project 2: Personal Brand.
  • Revise module mockups.

October 14 – Planning

Topics

Note: Rebecca will out of town at a conference, however you all have tasks to complete in her absence. Attendance will be taken at a random time during the class period.

  • Share sketches, content and strategy with at least two other designers. Each designer should give you feedback on the following: meeting goals/needs of primary audience, meeting career goals, user flow, grid, organization. Type notes and save as a PDF (yourname_p2_planningFeedback.pdf).
  • Revise sketches and content as necessary in response to feedback.

Due Monday, October 17

  • Module Mockups: looking at the content and sketches that you have, identify the primary modules you will need for your site. Mockup individual modules considering what they will look like on a small screen (320px) and larger screens (960px). Examples of modules include basic typography (heading, subheading, paragraph, list, text links — using a modular scale is highly encouraged), navigation (if relevant), call to action, portfolio item, etc. Label modules with important details such as typeface, type size, line-height, hex colors, etc. to make coding easier later on. Be prepared to show these modules in critique on Monday.

October 10: Strategy

Topics

Due Friday, October 14

  • Revise strategy for project 2
  • Prepare all content for project 2
  • Multiple sketches for project 2
  • Complete written evaluation for project 1 and submit on Google Drive as a PDF (yourname_p1evaluation.pdf). Answer each of the following questions separately:
    1. Evaluate the effectiveness of your typographic choices. Support your claims with evidence, examples and screenshots. Use appropriate vocabulary. Address what you could do in the future to make the typography stronger.
    2. Evaluate how well you addressed the needs of the audience. Support your claims with evidence and examples. Explain what methods you used and whether or not each was effective. Are there additional strategies you would employ in the future? Why or why not?
    3. Evaluate the user flow of the site across screen sizes. How effective is the landing page at getting users to individual articles? Did you make compromises because of technical skill? Is the experience better on a specific screen size? What would you do to improve the experience across screen sizes in the future? Be specific. Point out shortcomings and how you would like to address them in the future.

October 5 – Critique

Topics

  • Critique: Evaluating design across devices
  • Troubleshooting in small groups

Due October 7

  • (Due at 11:59PM) Revise Project 1 and submit on Google Drive
  • (Due at the start of class) Imaging you are your future employer. Google yourself from that point of view. What search terms did you need to use? What are the results? Is there content that would be irrelevant to an employer? Is there content that would be inappropriate for an employer to see? Explain. What would you like to have show up in the first few search results? Explain. Write up the answers to the above questions and save as a pdf (yourname_google.pdf) and submit on Google Drive. Bring a printed copy to class.

Note: There will not be a set of Review Questions this week.

September 26: Space and CSS

Topics

  • CSS Box Model
  • CSS Properties: margin, padding, width, float, clear, overflow, text-decoration
  • CSS Pseudo Classes: :hover, :visited, :link, :focus, :active
  • CSS Classes
  • CSS Reset
  • Validate CSS
  • Saving Images for the Web

Due September 28

  • Resolve space issues (chunking, readability, etc.) in CSS. Resolve remaining layout issues in blog post page for small screen.

September 23: CSS

Topics

  • Review Questions
  • CSS Properties: text-align, word-spacing, line-height, text-transform, background-color, border, border-radius, width
  • CSS: id’s and classes

Due September 26

  • Complete mobile typography (CSS) for blog posts.
  • Complete Copyright Documentation

September 21: Copyright

Topics

Due September 23

  • Sketches (layout and organization with grid) of home page and article page. Consider both small screens and large screens.
  • Type Hierarchy study for Project 1 (post excerpts and posts) — do this in Illustrator or Sketch or similar. Download your font from Google Fonts. Experiment with the typographic relationships between Post title, byline, subheadings, paragraphs, captions (and any other element you might need). Focus on readability and hierarchy. Consider size/scale, leading, color, case, style, etc. Remember that paragraph text should be 16px.
  • Start copyright documentation

September 19: HTML

Topics

  • Last week’s Review Questions
  • HTML homework
  • HTML: Figure, Figcaption, linking pages
  • MLA Image Captions
  • Downloading and using typefaces in Mockups and Digital Sketches from Google Fonts

Due September 21

  • HTML for Project 1

Due September 23

  • Sketches (layout and organization with grid) of home page and article page. Consider both small screens and large screens.
  • Type Hierarchy study for Project 1 (post excerpts and posts) — do this in Illustrator or Sketch or similar. Download your font from Google Fonts. Experiment with the typographic relationships between Post title, byline, subheadings, paragraphs, captions (and any other element you might need). Focus on readability and hierarchy. Consider size/scale, leading, color, case, style, etc. Remember that paragraph text should be 16px.

September 16: Peer Review

Topics

  • Complete Review Questions: Try the review questions on your own to test what you know then you may look things up (using any notes, the web, or your classmates). Submit to Brandon Smith by the end of class.
  • Attach the Blog Post Peer Review Worksheet a copy of each blog post (the packet should have three sheets of paper: the worksheet, the legibility post, and the readability post). Do this step twice to make two complete packets.
  • Get into groups of 3 or 4. Give each packet to a different group member to review (i.e. you should end up with two complete sets of feedback). Reviewers should carefully read each post and make comments in the margin pointing out strengths and asking questions about things that are confusing or have an inappropriate tone. Reviewers should also do some general proofreading noting spelling or grammatical errors and organizational/structural issues. Once each post has been read and annotated, the reviewer should fill out the Blog Post Peer Review Worksheet. Return packets to the writers when the review is complete.

Due September 19

  • Revise blog posts. Bring digital files to class.
  • Complete Practice HTML markup for a Blog Post. Start by marking up the worksheet handed out in class (bring this on Monday) then create a typed HTML version (submit in the Google Drive folder you created the first week of class). Note that you can copy and past the content from the digital file directly into Brackets.

September 14: Chris Harrold

Topics

  • Class meets at 9:00am in 104 Lanigan for Visiting Artist Chris Harrold. Meet briefly in 35 after the talk.
  • Writing and Rhetoric

Due September 16

  • Write two blog posts for Project 1 (one on Legibility and one on Readability). Each post needs to have a title, include an image and be between 300-500 words. Remember that your intended audience is educators and not designers. Use the Legibility and Readability worksheets as outlines for your posts. Bring two printed copies to class on Friday.

September 7: Legibility

Topics

Typography References

Due September 9

  • Choose Legible Typeface Worksheet
  • REVISE THIS ASSIGNMENT (due September 7): Find a unique well-designed blog (ideally on a topic other than design). In your sketchbook recreate the layout/organization of the blog as a wireframe. Include the underlying grid. Label each module. Calculate the width of each module as a percentage (e.g. 25%, 33.3333%). Label your wireframe with the URL. Remember to do wireframes for each major template (i.e. components of the user flow) at both a small and large screen size. Minimally, this means you will have four different wireframes. Remember that you want to look at a well-designed blog whose layout/design you are drawn to.
  • Read Chapters 1-3 in Don’t Make Me Think
  • Expect Review Questions in class on Friday. Prepare a 3″ x 5″ notecard.

September 2: Modules, Patterns & Conventions

Topics

  • Review Grids: Look at Cyberthread.net
  • Review homework
  • What is a blog?
  • Modules/Components
  • Templates
  • Patterns
  • Conventions
  • Wireframes

Due September 7

  • Find a unique well-designed blog (ideally on a topic other than design). In your sketchbook recreate the layout/organization of the blog as a wireframe. Include the underlying grid. Label each module. Calculate the width of each module as a percentage (e.g. 25%, 33.3333%). Label your wireframe with the URL. Remember to do wireframes for each major template (i.e. components of the user flow) at both a small and large screen size.

Due September 9

  • Read Chapters 1-3 in Don’t Make Me Think

August 31: Grids

Topics

  • Review Questions
  • Slack Tips: @mentions, responding, channels, direct messaging (dm), reactions, etc.
  • Create Google Drive Folder
  • Imagine a Website…
  • Grids: Units, Columns, Regions, Fields, Gutters
  • Responsive Design
  • Wireframes: modules, images, videos, headings, text
  • Grid Mapping Exercise
  • Meet with Graduate Students

Due September 2

  • Review Slack Getting Started Guide
  • Read excerpt from Ordering Disorder by Khoi Vinh
  • Read excerpt from Modular Web Design by Nathan Curtis
  • Find an example of a Blog. In your sketchbook, draw the underlying grid and wireframes (lable width measurements in %, use a straight edge and draw in proportion). Draw the grid and wireframes for each page template/layout and screen size. Write a brief description of the grid (using the vocbulary introduced in class). Address how the grid change between pages or screen sizes? Complete assignment in your sketchbook and bring to class on Friday.

August 29: Intro to Course

Topics

  • Introductions: 2 Truths + 1 Lie
  • Web/Screen vs. Print
  • Emoji Design: shortcut name (:myEmoji:) and 128px square image, less than 65k
  • Web Lingo: HTML, CSS, JS, Server, Domain, URL, FTP, CMS, Social Media, Web Presence, Web Designer, Web Developer, Front End Developer, UX Designer, UI Designer, Content Strategist
  • Complete Survey. See the results.
  • Intro to Slack

Due August 31

  • Purchase Texbook and Supplies
  • Read Syllabus
  • Get Comfortable in Slack