December 4 – Documentation

Class Topics

December 2

Classes are canceled for today

Homework

  • Work on issues filed in GitHub. Documentation Posters are missing for many of you.

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

Class Topics

  • Reflect on goals set in the semester.
  • Reminders: Revisions to Web Design Foundations should be submitted by Monday, November 11
  • Be Prepared for Critique on Wednesday
  • Posters for first assignment must be completeed in class today based on revisions provided last class. Show me the content before considering it complete.

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 28 – Testing

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
  • Sentence-level markup review (group challenge)
  • Quick revision to posters before printing.

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

All components of the Print to Screen project are due on Monday, October 14. Be prepared to start class with your presentation. You will have time to work on your poster in class on Monday and will be provided with a template.

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: Critique Part 2

Class Topics

  • Critique work (again) using the same criteria as last time. Make revisions. Determine if you are ready for a critique with Rebecca.
  • List out the key design features of the print design that give the design its character. How will you still include or hint at these design elements or approaches on a small/narrow screen? Typography is one key element to pay attention to. What currently works in print that won’t directly translate to a small screen design? How will you make decisions about how to deviate? Start sketches multiple solutions and approaches. Consider the pros and cons of each approach after you generate a number of solutions. Be sure to sketch at scale.
  • Update copyright.md file
  • Begin to markup content in HTML. Start with typography as you move into CSS.

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 8: Critique

Class Topics

  • Critique: Compare original layout (in print) with your print design (also printed). You will need a ruler for this critique (you can borrow one from 33). Evaluate the following:
    • Margins
    • Column width
    • Font choice: look at individual letterforms and distinct characteristics
    • Hyphenation
    • Indentation
    • Alignnment
    • Font-size
    • Line-height/Leading
    • Letter-spacing/tracking
    • Space between paragraphs and sections
    • Style and use of imagery
    • Details of pull quotes (text might be different color and weight, line-height is likely different, etc.)
    • Font-weight and font-style
    • Overall mood/tone of the page
    • Relationship of the content to the visual style
  • Review weekly logs. Are they complete? Do they have images? Are they detailed (they should be; this is in place of doing a weekly powerpoint or a full process book in InDesign)?

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.

September 4: Print Layout

Class Topics

  • Address issues in Bio Page assignment
  • Review professional development assignment
  • Please update your readme.md file for Print to Screen Repo to include, as a minimum spec for Present & Document, Keeping the weekly log as described in 5:iv.
  • Review articles with Rebecca to choose direction for assignment.
  • Work on print layout

Homework

  • Complete the copyright primer worksheet. Use your own words to make sure you understand the concepts.
  • Complete print layout. Bring printed copy to class for critique.

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

May 9 – Final Critique

Class Topics

  • Critique at 11:30
  • Short Daily UI reflection (Submmit as a Google Doc on drive). What did you learn by doing this assignment all semester? What was your best UI? Why? Was there something different about the process or the content for that particular challenge? Be as specific as possible.

Deadlines

  • Final project due on May 16 at the final (8am). Be prepared to present your work formally at the final. Presentations should be 7-8min.
  • Daily UI blog should be complete and up to date by Monday, May 13 at 8am
  • Any missing back work is also due by Monday, May 13 at 8am

May 9 – Final Critique

Class Topics

Timeline Reminders

  • Monday, May 13 at noon: Final website (must be live) and copyright documentation
  • Thursday, May 16 at 8am: Final Presentations (Dragontown Town Board will be present) and Portfolio Documentation Due
  • Thursday, May 16 at 11:59PM: Process books (individual), timesheet, and team survey due.

May 14-15 One-on-one Meetings

Tuesday, May 14

  • 1:30 Cassidie
  • 2:00 Samantha R
  • 2:15 Ceseley
  • 2:30 Alex
  • 2:45 Carly
  • 3:00 Ally
  • 3:15 Break
  • 3:30 Frank
  • 3:45 Matt
  • 4:00 Ian
  • 4:15 Bharati
  • 4:30 Sam F

Wednesday, May 15

  • 2:00 Marina
  • 2:15 Dalton
  • 2:30 Stephanie
  • 2:45 Jasmine
  • 3:00 Dominique
  • 3:15 Kim
  • 3:30 Break
  • 3:45 Alyssa
  • 4:00 Hannah

May 8 – Interview Prep

Class Topics

  • Final presentations
  • Prepare for interviews:
    • Set up Skype account if scheduled for a remote interview and practice using, sharing screen, and using the chat window. Do a sound check. Set up a professional looking background.
    • Email your interviewer (TODAY, Wednesday, May 8) to confirm date (Monday, May 13) and time of interview. In that email introduce yourself, your professional goals (what kind of job you are looking for), share the URL to your online portfolio and/or attach your PDF portfolio, share your Skype username (if doing a remote interview), and attach your resume. You are required to CC me on any correspondence with your interviewer.
    • Dress professionally for you interview.
    • If interviewing in person, remember to bring something to show that is physical.

Final Requirements

  • May 13 at 2PM: Performance Review submitted via Google Drive and printed version submitted in my mailbox outside of 32 Lanigan.
  • May 13 at Scheduled Time: Practice Interview with Alumni
  • May 14 or May 15: Final one-on-one meeting with Rebecca in 32 Lanigan.
  • May 14: Email a thank you note to your interviewer (and cc me to receive credit). This must be done prior to your one-on-one meeting with me.

May 7 – Critique

Class Topics

  • Critique: Odds (group 1 and group 3) & Evens (group 2 and group 4)
  • Portfolio Documentation:
    • 1 Poster per team (18×24 portrait with at least 1″ margins, no bleeds)
    • Description of problem the product is attempting to address
    • The audience of the product (be very specific–mini personas could be useful here)
    • Title of the product
    • Description of the product, its intent and how it addresses the problem and needs/wants of the users. Also include information on what the product proof of concept includes and why you worked out these key user flows.
    • Screenshots of key screens and user flows mocked up on devices (use professional mockup files for this and use developer tools to take a screenshot)
    • List of all members of the design team
    • Provide key takeaways for a viewer of the poster
    • Include QR code and link to live site.

Timeline Reminders

  • Thursday, May 9 at the start of class: Critique of coded large screen design
  • Monday, May 13 at noon: Final website (must be live) and copyright documentation
  • Thursday, May 16 at 8am: Final Presentations (Dragontown Town Board will be present) and Portfolio Documentation Due
  • Thursday, May 16 at 11:59PM: Process books (individual), timesheet, and team survey due.