Category: 317_SP19

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 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.

April 30 – Development

Class Topics

  • Strategic Coding
    • Develop a pattern library/reusable modules. What is the list of modules that you need? Start with typography (headings, subheads, paragraphs, text links, etc.)
    • Collaborative Coding: Use class time to code, iterate so that you have older versions of code to go back to.
      • Github: Version control and project management. Free.
      • Multihack: Web collaborative coding environment, extension for Brackets has more features available (in Brackets go to File > Extension Manager > Search for Multihack > then click install). Code simulataneously in real time. Make a new copy of the code folder every time you start a collaborative session just to make sure you have a good backup. Free.
      • Codeshare: Web collaborative coding environment. Has good formatting. Need to back up files. Free.
      • Codepen: Online development environment. Has ability to build multiple page prototypes that are coded and live on the web (even with free account). Can collaboratively code on higher end accounts. Can make “forks” on individual files for version control.

Timeline Reminders

  • Tuesday, May 7 at the start of class: Critique of coded mobile design
  • 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.

April 25: Testing

Class Topics

  • Designing useful user tests
    • Don’t lead the witness.
    • You are testing the product not the tester.
    • Use open-ended questions.
    • Ask the user to share their thought process out loud.
  • Designing useful proofs of concept
    • Consider the essence of the product or service.
    • Consider key user flows.
    • Build less by being strategic.
    • Consider accessibility from the beginning.
  • Website Case Study: Adobe Creative Types Quiz, background information on the quiz available in “We all have a creative type” by Carolyn Gregoire in Adobe Create Magazine.

April 16 – Planning

Class Topics

  • Work on Pitches
  • Planning
    • 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)
    • 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)
    • Layouts and userflows: thumbnails and paper prototypes (Google Rapid Prototyping, Low Fidelity Prototype Testing of EE App, Paper Prototyping Techniques). Start with thumbnails to generate lots of ideas and then prototype when you think you have settled on a couple of ideas worth exploring more deeply. Prototype critique/testing is next Wednesday, April 25.

Homework

  • Prepare for pitches. Dress the part. Practice. Bring presentation in more than one format including on a USB drive in case the internet decides it is nto going to work. Consider bringing printed materials if relevant. Presentations will start at 11am. You will have from 9:35-11am to rehearse, prepare and get set up.

April 11 – Research

Class Topics

  • Team Communication: Shared Drive and Slack Channel
  • Establishing Group Roles: Project Manager, Lead Visual Designer, Lead Developer
  • Brainstorm: Ways a website can address the problem your team identified in Dragontown. You need to run five different ideas (not variations of the same idea) by your Creative Director today in class.
  • Audience: Who is the primary audience for each proposal? Why? Who are the secondary audiences? Why?
  • Research: Personas and Competitive/Peer Analysis
  • Goals: Client Goals and Audience Goals

Homework

  • Complete all research and goal setting in preparation for pitch development in class on Tuesday. Start thumbnails and moodboards.

April 9 – Presentations

Class Topics

Homework

  • Brainstorm ways a website could address the issue your team identified in class today. Come up with as many ideas as possible.
  • Review assignment sheet and write one page discussing what you need to do to make you and your team successful on this project. Remember that the assignment is worth a large percentage of your grade, so you need to plan for success.

March 5: Thinking in Sketches

Class Topics

  • Thinking in sketches: Making and using effective and useful thumbnails and wireframes
  • Open Type Features: ligatures, small caps, old-style figures, lining-figures, tabular figures, fractions, etc.
  • CSS Properties: font-variant-ligatures, font-variant-caps, font-variant-numeric, font-feature-settings, text-rendering (See Adobe’s Syntax for OpenType Features for more help)
  • Punctuation: spaces and dashes
  • Google Font Open Type feature resource (notice that this resource is not pefect and is not supported by Google)

Homework

  • Wrap up Exercise 4

February 26: Typographic Rhythm

Class Topics

  • Horizontal Rhythm: tracking, kerning, indentation (p+p selector), hanging punctuation)
  • Vertical Rhythm: Baseline grid
  • Checking browser support with caniuse.com
  • Check baseline grid with Chrome Add-on: Baseliner
  • Introduce Exercise 4

Homework

  • Work on sketches and wireframes for Exercise 4
  • Implement horizontal rhythm and baseline grid for mobile in Exercise 4.
  • Read chapters 7 and 8 in Better Web Type

February 19: Images

Class Topics

Homework

February 5: CSS and Copyright

Class Topics

Homework

  • Complete Exercise 1
  • Read Chapters 4 & 12 in Better Web Type
  • Play Perfect Paragraph Game. Submit screenshot demonstrating a 75% or higher on Google Drive

January 31: Snow Day

Class Topics

Snow day: class is canceled.

Homework

  • Join our Slack group and get familiar with Slack! There are some great getting started tutorials on their website.
  • Make sure you’ve created your Google Drive folder and shared it with me as per the instructions in your syllabus.
  • Continue working on Exercise 1
    • On your computer make a folder called Exercise 1.
    • Download and install Brackets (a free text/code editor) on your computer.
    • In Brackets go to File > New
    • In Brackets go to File > Save As and save the file as index.html in your Exercise 1 folder.
    • Follow your notes from class on Tuesday to create the basic HTML page for Exercise 1. The only thing that will be different is the heading and paragraph text that you include.
    • Use the sideways lightning bolt icon in the top right hand corner of the application (the live preview button) to see your webpage in a browser. Make sure the content you expect to show up does.
    • Remember to save and save often!
    • When you are done go the the HTML Validator in your web browser (I recommend using Chrome, do not use Safari). Click on the “Validate by File Upload” tab at the top.
    • Use the choose file button to find your index.html file on your computer, then click “check”
    • If you don’t have any errors or warnings you are all set. If you have errors or warnings pay attention to what line number those errors/warnings are on and go back into brackets to see if you can figure out what is not working. If you can’t figure it out, take note of what the error is and ask about it in class on Tuesday!
    • Back up your exercise 1 folder to an external hard drive and upload it to your folder for this class on Google Drive.
  • Read Chapters 1 & 2 in Better Web Type, Copyright Basics (Circ. 1), and Teaching Copyright: Public Domain Frequently Asked Questions