317_F19

ART 317: Web Media I

Resources

December 4 – Documentation

Class Topics

December 2 – Revisions

Classes are canceled for today.

Homework

  • Project Revisions: Issues have been filed in your team repositories for various required group deliverables. Please review and address the items in each issue as a team no later than Monday, December 9 at 8am to receive full credit for the team portion of the assignment.
  • Complete this short form to indicate the individual contributions you completed for the group assignment including the required UI pattern and any advanced specifications you took on. Please complete no later than 11:59pm tonight (December 2).
  • UI Sketchbook: A portfolio is one of the most important self-promotion sites you can make for yourself in this field. Usually web and ux portfolio are full of case studies and follow an article list pattern where the homepage has small teasers that lead to full-fledged case studies that outline the solution as well as the process. For this assignment develop 5 options for the article list page of your future portfolio. Each sketch should include details like sketches of the images you would include and basic text content. Each option should include a sketch of both the narrow screen (mobile device) layout/composition and a large screen size (like a lab computer, not your laptop). NOTE: This is the last sketchbook assignment and will be checked on Wednesday, December 4. See the UI Sketchbook assignment sheet for a full overview of all sketchbook assignments. Sketchbook assignments from November 11, November 18, November 25 and December 2 will be checked on WEdnesday. Assignments prior to that are no longer being accepted.

November 25 – Survey

Homework

  • Team Survey: Due by 11:59pm on Tuesday, November 26.
  • UI Sketchbook: Create a suite of 5 custom icons that could be used on a specific website. Start by identifying what website you are designing for and how the icons could be used and what the icons are meant to represent. Note that social media icons are not an option for this site—develop something custom. Create at least 20 sketches for each icon (so that is 20 thumbnails times 5 icons or 100 thumbnail sketches in total) before choosing the final set of 5. A specific/site and brand is helpful in creating an effective and unified set of icons.

November 18/20: Preparation

Class Topics

  • Changes to Adobe Software
  • Monday, November 18: Team (317) and Individual (417) appointments with Rebecca to review work
  • Wednesday, November 20: Work Day (Rebecca will be at a conference). If you need help send Rebecca an email. If you need help on code you should make sure the code is updated and committed on GitHub and a live link should be shared with Rebecca for review. Rebecca will not address issues sent after 3pm on Friday.
  • Monday, November 25:
    • Presentations: Each presentation will be 5 minutes followed by Q&A. Morning presentations will start at 10:15am (Dragontown then advanced students). Afternoon presentations will start at 3pm.
    • Projects Due at 11:59pm (all files, no exceptions). Please review the specifications for you as an indivudal and for your team for the the grade you would like to earn. The link to the required team review will be posted on the class website on Monday, November 25. You should not fill this out until the project is complete. Surveys will be accepted until 12pm on November 26 (plesae remember that the survey is required to earn credit for this assignment)
    • Revisions and Late Work: No attempts of the professional development assignment or the web design foundation assignments will be accepted after 11:59pm. No exceptions. Do not wait until the last minute. Physical papers that are not in my mailbox before I arrive on Tuesday, November 26 will not be accepted.
  • UI Sketchbook (final checks on Wednesday, December 4): Choose a specific screen size and create a 404 error page for your Dragontown website. A 404 error page loads when the page the user is looking for does not exist. The tone of the text is generally apologetic and helpfully indicates that the URL does not exist in plain language. Do a little research on examples of 404 error pages and create 5 different options. Each sketch should be detailed with specific text, layout and imagery. Designs should align with your brand. NOTE: all remaining sketchbook assignments are posted in the User Interface (UI) Sketchbook assignment sheet.

November 11 – Critique

Class Topics

  • Alerts: Indicate that the site is a prototype
  • Critique with Rebecca: have a live mobile version ready for review

Homework

  • UI Sketchbook: Identify a type of marketing or newsletter email that would be common for the Dragontown organization you are designing a site for. Create 10 sketches of different layout options for a laptop screen. Include key text, images, etc. Draw sketches at scale. Focus on typography and layout.

NOTE: Sketchbooks will be checked on Wednesday November 13 and Wednesday December 4.

November 6 – Code Tips

Class Topics

  • Helpful Visual Studio Code extensions:
    • Code with multiple teammates in the same file at the same time: “Live Share Extension Pack” login with GitHub credentials
    • Want to brainstorm while coding at the same time?: use “Live Share Whiteboard”
    • Preview in a browser: “Open in Browser” by TechER (option + B to open in a browser window)
    • Make code easier to read: “Beautify” (use the F1 key)
  • Code examples: Navigation, Accordion, Picture

November 4 — Mobile Design

Class Topics

  • Reflect on goals set in the semester.
  • Reminders: Revisions to Web Design Foundations should be submitted by Monday, November 11
  • Simulated Client Project
    • Weekly process updates (individual)
    • Mobile designs: typography should be done and modules complete for Wednesday
    • Designs should be tested and critiqued
    • Major decisions need to be approved by the creative director. You need to be checking in regularly and getting feedback.
    • Using GitHub for collaboration

Homework

  • Work on Web Design Foundations; submit by Monday, November 11.
  • UI Sketchbook: Choose your digital device that you use most often (computer, phone, tablet). Investigate the accessibility features of the device. Test out some of the features and find one that you think would be useful to use in yourn day to day life that you do not currently use. Try using it regularly for at least one full day. Record your usage and how the experience of using that feature is different from your current experience.

October 28 – Usability Testing and Modules

Class Topics

  • Usability Testing (see example of test plan from SUNY Oswego web team)
    • Test regularly and at all phases
    • Test tasks
    • Ask tester to talk about their thoughts out loud
    • Time tasks and make observations about hesitations or confusion
    • Each test should have a facilitator and a note taker in addtion to the tester
    • Critique should be kept separate from usability testing
  • Modules (see SUNY Oswego pattern library)
    • Questions that need answers before you can design:
      • What is the content of the site?
      • What tasks does the user need to be able to complete on the site?
      • What steps are required to complete those tasks (think storyboard)?
    • Defining Modules
      • Style the basics: text, lists, links, images, form elements, buttons, images, etc. At this stage you aren’t thinking about layout.
      • What are the repeating elements from page to page? Examples: Header/site-identifier, footer, navigation. What are those layouts? How do they change across screen sizes?
      • Are there repeating kinds of content? Examples: Alerts, testimonials, feature articles, cards, contact blocks, profiles, etc. What are those layouts? How do they change across screen sizes?
      • How are the modulees above combined into pages? Are there consistent page templates/layouts? For example, profile pages, landing pages, blog posts or articles, etc.
  • Sentence-level markup review (group challenge)

Homework

  • UI Sketchbook: Review recording of your pitch from last Wednesday (Go into our Blackboard course and click on “Course Recordings”). Consider your presentation and the questions you were asked. Compare your presentation with those of your peers. Address the following:
    • What worked really well in your presentation? How do you know?
    • What did not work well, and why didn’t it work?
    • What was missing?
    • What will you need to do in your final presentation to be more successful individually?
    • What will your team need to do in your final prseentation to be more successful?

Reminder: Wednesday is advisment day in the art department, so it will be a work day. Art students who need advisement are encouraged to participate in the advisement session during our class period.

October 23 – Pitches

Class Topics

  • Pitches to the client!

Homework

  • Continue to work on project. Focus on the following:
    • Revising creative brief to respond to feedback from the mayor
    • Adjusting/revising personas based on feedback from presentations
    • Creating a sitemap (outline of the website) that indicates the content needed for the full website (not just the small prototype you will build). This is important to do before you make new/revised prototypes
    • Sketch different layout options to explore a wide variety of compositional and organizational ideas for the main pages of the site
    • Build paperprototypes of the main user flows of the site so that you can explore multiple options
    • Start developing a brand identity
  • Continue to work on Web Design Foundations revisions
  • UI Sketchbook: Sketch 15 different solutions for one of the UI components (ex. a form, the navigation, an article list) you will be personally responsible to create for your group project. Note that different solutions means considering different ways to organize the content and different layouts. The focus should not be on aesthetics as much as composition, hierarchy, organization, and function. Use existing websites for inspiration (feel free to adapt and sketch based on your observations and remixes, just indicate where you got your ideas from). Sketches should all focus on the narrow/mobile screen. This will help your prototyping phase (Protip: draw to scale and in black and white so that you can easily switch them in and out of paper prototypes!)

October 21 – Research and Design

Class Topics

  • Midterm Grades
  • Planning & Designing
    • Content First: To meet the goals of the website and the needs/desires of the audience what content do you need? How long is that content? Is the content text? Are there images, video or sound? How will this content be organized? (Work on list of content and how it would be organized. Develop content once you know which project you will pursue)
    • Thumbnails
    • Paper Prototypes: (Google Rapid PrototypingLow Fidelity Prototype Testing of EE AppPaper Prototyping Techniques).
    • Check sketchbooks and weekly process updates
    • Visual Approach: Brand/Style Guide, Moodboards (this will be iterative and should be the start of a conversation about visual direction; these will need to be refined once you know what your content is)
  • Prepare for pitch:
    • Pitches should be 5 minutes long. Practice ahead of time.
    • Pitches will start at 9:30am/2:20pm. You must have your presentation materials ups and ready at that point. Make sure you show and not just tell.
    • Your pitch is a formal presentation with your client (the mayor and her assistant). Dress the part.
    • You should not show anything to the client that you have not run by the creative director
    • Remember to start with what the problem is and then explain how each web proposal will address that specific issue.

Homework

  • Continue to work on project
  • Continue to work on Web Design Foundations revisions
  • UI Sketchbook: Sketch 15 different solutions for one of the UI components (ex. a form, the navigation, an article list) you will be personally responsible to create for your group project. Note that different solutions means considering different ways to organize the content and different layouts. The focus should not be on aesthetics as much as composition, hierarchy, organization, and function. Use existing websites for inspiration (feel free to adapt and sketch based on your observations and remixes, just indicate where you got your ideas from). Sketches should all focus on the narrow/mobile screen. This will help your prototyping phase (Protip: draw to scale and in black and white so that you can easily switch them in and out of paper prototypes!)

October 14: Final Project Launch

Class Topics

Homework

  • Read Section 1 in AccessAbility
  • UI Sketchbook: Complete detailed sketches (to scale) of the site you audit for the final project. Sketch the homepage plus one interior page. Label each UI element using UI Patterns naming conventions when relevent.Sketchbook assignments for all prior weeks will be checked during Wednesday’s class, so please have them with you.

October 7: Accessibility Testing

Class Topics

Homework

  • Read the following children’s books on reserve at the library in preparation for our final project: The True Story of the 3 Little Pigs, The Three Pigs, and There’s a Wolf at the Door. These books will serve as “ethnographies” to learn about the community we will be doing design work for. Take detailed notes on what you learn about each character, perceptions of each character, motivations of each character, and barriers for each character.
  • UI Sketchbook: Imagine you are designing a new To-Do list app. Sketch 5 different ideas about how the user would either add or remove/clear items on the list. Think about this as a user flow–what are the steps you would need to accomplish the task? What would those steps look like? Be sure to sketch at scale.

October 2: The Site

Class Topics

  • Review Legibility writing assignments
  • CSS Grid Q & A
  • Navigation: Semantic Markup
  • Navigation Challenge: Use css grid to make a one column navigation on narrow screens convert to a multi-column single-row navigation on larger screens. Remember to make navigation keyboard accessible.
  • Troubleshoot CSS Grid invitation exercises
  • Introduce Campaign Website Activity

Homework

  • Revise writing assignments (if necessary)
  • Revise and commit changes to CSS grid assignments
  • UI Sketchbook: For your assigned campaign website assigned in class, sketch (with detail in grayscale) the full user-flow of the donate/contribute module on a narrow screen (like a mobile device). A full-user flow includes all steps of the donate/contribute process once you arrive on the initial donate/contribute screen.

September 25: The Page – Grid

Class Topics

Homework

  • UI Sketchbook: Find an example of a strong layout on a large screen (must be at least the size of a monitor in the lab). Identify the strengths. Replicate the layout in a sketch that is to scale. Be sure to include the visual imagery and text. The sketch should give us a good feel for what the page looks and feels like.
  • Web Design Foundation: Basic Grid
  • Web Design Foundation: Grid Experiment

September 23: Revision

Class Topics

  • Today is a work day. Use the opportunity to revise your work and get help and feedback from peers.

Homework

  • Revise and resubmit any of the Web Design Foundation assignments for credit without penalty by Wednesday, September 25 at 11:59pm
  • UI Sketchbook: Find an example of a strong layout on a large screen (must be at least the size of a monitor in the lab). Identify the strengths. Replicate the layout in a sketch that is to scale. Be sure to include the visual imagery and text. The sketch should give us a good feel for what the page looks and feels like.

September 18: The Page Part 2

Class Topics

Homework

  • Revise any exercises previously submitted on GitHub if you know you did something incorrectly.
  • UI Sketchbook: Find 20 examples of how designers handle glossaries or definition lists. At least 10 of the examples should be from print. Identify how hierarchy and readability is established in each example. (HINT: do this before the definitions exercise!)
  • Web Design Foundation: The Page: Definitions
  • Read pages 46–52 in AccessAbility (PDF)
  • OPTIONAL: Read Guide to Combining Fonts

September 15: The Page

Class Topics: The Page

Homework (all due on Monday)

  • UI Sketchbook: Find 20 examples of how designers handle glossaries or definition lists. At least 10 of the examples should be from print. Identify how hierarchy and readability is established in each example.
  • Web Design Foundation: The Page: Definitions

September 11: The Sentence

Class Topics

Homework

September 8: The Paragraph

Class Topics

  • Copyright
  • The Paragraph
    • The Equilateral triangle (font size, line-height, line-length)
    • Tone and space: tracking and line-height
    • CSS Properties: font-family, font-weight, font-style, font-size, line-height, max-width, letter-spacing, margin, padding
  • Useful Tools and Resources

Homework

  • Web Design Foundation: The Paragraph
  • Review Typewolf: Typography Cheatsheet
  • Read Fontology Level 3: Numbers, Signs and Symbols (click in to each of the three sections)
  • UI Sketchbook Prompt: Find an example of good readability on a website with long-form text (specifically an article page of some sort). Look at the design on a mobile device, a large screen and on a laptop or computer in the 24hr room in the library. Sketch (at scale, measure the screen sizes) the layout, with an emphasis on typography hierarchy and space. Sketches should be in grayscale but should convey when something is darker or ligher than something else on the page (use the noCoffee browser add-on to convert layout to grayscale if you are having trouble imagining what it would look like in grayscale).

September 4: The Letter

Class Topics

  • Review Professional Development assignment
  • Q & A about HTML
  • Publishing webpages via SUNY Create
  • Running the Accessibility Insights for Web checker
  • The Letter / Glyph
    • Type anatomy (see Thinking with Type and Fontology: Type Anatomy)
    • Glyph Comparison: describe the similarities and differences between the same glyph in four typefaces
    • Legibility: tall x-height, distinct and balanced ascenders and descenders, distinct counters, open apertures, distinct forms, low stroke contrast, letter-spacing
    • Glyph Comparison #2: compare related glyphs across multiple typefaces. What makes each glyph distinct?
    • Typeface Comparison

Homework

  • Complete The Content exercise. You may make revisions to your original submission.
  • Complete the Letter/Glyph Exercise
    • Choose one of the four type specimens handed out in class to write about for this assignment. Start your assignment by identifying the typeface you have chosen.
    • Describe ten legibility features of the typeface, referring to specific glyphs and using specific type anatomy.
    • Use complete sentences.
    • Use images to demonstrate at least 5 of the features. This means showing blown up images of letter forms and highlighting the relevant anatomy or features in individual glyphs that you have also described in words.
    • This assignment should be typed and printed.
  • Complete the copyright primer worksheet. Use your own words to make sure you understand the concepts; do not copy the language from the copyright readings assigned.
  • Read p27–32 in AccessAbility
  • Read Equilateral Triangle of a Perfect Paragraph. Try the game at the end of the article to see how much you’ve learned.
  • UI Sketchbook:
    • Find 5 printed books that are different sizes and different genres (this is a quick activity in the library!). Make a copy of one 2-page spread in each book.
    • For each spread measure and note the size of the page, margins of the page, and the width of each column of text.
    • For each spread count the number of characters (spaces and punctuation count) on the longest and shortest lines of text.

Aug 28: The Content

Class Topics

  • Presentations
  • What is content?
  • How and why do we make content machine readable?
  • Who is content for?
  • Introduction to HTML: Relevent HTML Elements reference
    • Basics: html, body, head
    • Metadata: title, meta
    • Sectioning: article, section
    • Heading: h1, h2, h3
    • Embedded Content: img
    • Interactive Content: a
    • Form Content: form, input, label, legend
    • Phrasing Content: br
    • Flow Content: p, ul, ol, li,
  • Publishing Content on the web

Homework

Aug 26: Getting Started

Class Activities

Homework

  • Read p33–45 in AccessAbility
  • Review the syllabus and come to class with questions.
  • Prepare for Website Evaluation Exercise presentation