April 24 – April 28: Enhancements

April 24: Topics

April 26: Topics

Deadlines

  • April 26: Review Questions and Critique (minimally template should be live)
  • April 28: Site revisions for client approval. Client approval must be obtained for this project, even it it requires the team to work past the May 1 deadline.
  • May 1: Process Book (remember that decisions throughout the process should be well-documented) and survey (Will not be released until April 28)
  • May 1: Final Exam/Project assigned.
  • May 3: Last set of review questions.
  • May 5: Work day.
  • May 10 at 8am: Show and tell of final exams/projects/

April 21 – Work Day

Topics

  • Work Day — check in with your Creative Director (or assistant Creative Director). Alex will be available for coding help.
    • Alex’s Office Hours

      • Saturday, April 22 — 11am to 2pm (in Tyler Art Gallery)
      • Saturday, April 29 — 11am to 2pm (in Tyler Art Gallery)

April 17 – HTML

Topics

  • Collaborative Coding Tools: Code Your Cloud (Get started with Alex’s Quickstart Guide), Cloud 9
  • Design an HTML Template that contains all modules for site (do not work on individual pages)
  • HTML Forms: form, fieldset, legend, label, input (text, date, number, checkbox), select, option, button.
  • Forms Exercise

Homework

  • READ When Pages are Not Paper
  • READ CSS Positioning 101 (be sure to click on all of the example links so that you can see a visualization of each of the concepts introduced).
  • Sticky Nav Exercise: Download the HTML code (with internal stylesheet) and edit the CSS so that the Navigation sticks to the very top of the page (centered horizontally) and does not scroll. You will need to add 4 lines of code in total.

April 10 – Work Day

Topics

  • Reminder: Presentations to client are on Wednesday! Keep presentations to about 10 minutes and plan for up to 5 minutes of Q & A
  • Reminder: Amy Shutter, Graphic Design Alum and Web Designer, will be speaking on Wednesday at 4pm in 34 Lanigan
  • Reminder: There is no class on Friday.

Homework

  • Study/review for Review Questions on Wednesday
  • Prepare for presentation on Wednesday

April 3 – Work Day

Topics

  • Announcements and Reminders
  • Preparing for Client Presentations

Homework

  • Continue working on design for Simulated client project.

Note: There is no class on Wednesday (Quest), therefore there will not be review questions this week.

March 22 – Client Communication

Topics

  • Process Notebooks
  • Does the client know what they want? What is appropriate to ask Client vs. Creative Director
  • Finish up Personas and identify key user tasks
  • Core Model Worksheets for Strategic Planning
  • Client Communication Workshop with SCMA Writing Fellow, Stephanie Pritchard

Homework

  • Reach out to client for clarifications on goals/intents of site
  • Core Model Worksheets

March 8 – Accessibility

Topics

Due Friday, March 10 at 11:59pm

  • Complete Accessibility testing on Object Blog Website
  • Complete revisions to Object Blog Website
  • Submit Object Blog Project on Google Drive including
    • Notes from all critiques, user testing findings and accessibility testing AND analysis of findings and interpretation of feedback and including what actions you took in response to the feedback and why.
    • Personas (2)
    • Articles/Posts (at least two drafts of each)
    • Sketches
    • Mockups and Revisions of Mockups
    • Original site (due Monday)
    • Revised version of site after user tests and accesibility testing
    • Shortcut to live website
    • Written Evaluation

REMINDER: meet in Tyler Art gallery on Friday.

March 6 – User Testing

Topics

Homework

  • USER TESTING: Complete a User Testing script that includes 3 tests. Use that script to test your website with at least three people. Make sure you test your site on a variety of devices (but only one device per person). At least one of those individuals has to be within your target audience. None of the these individuals should be familiar with your project. Type notes from each testing session.Test with additional individuals if you need more information to draw conclusions from your test. Write up a one page analysis of your findings. What did your testing tell you? What will you change about your site and why?
  • A revised version of your site will be due on Friday. Begin implementing changes based on your tests now. I highly recommend that you test your site again after you make changes to see if the changes have made a difference.

Topics

Homework

  • Complete Object Blog Project. All files shoud be submitted before the start of class on Monday.
  • Bring all completed worksheets related to the Object Blog project to class: Empathy Map, Defining Audience, Article Text Peer Review for Article 1 (2), Article Text Peer Review for Article 2 (2), Blog Post Mockup Critique, Blog Post Coded Critique
  • Read Chapter 9 in Don’t Make Me Think by Steve Krug

Next Week at a Glance

  • Monday: Making Sites Live, User Testing
  • Wednesday: Accessibility Workshop
  • Friday: Visit to Gallery and Design Challenge

March 1 – Flexbox

Topics

  • Review Questions
  • HTML and CSS Questions
  • CSS: Flexbox
  • Flexbox Quickstart Guide
  • Flexbox Worksheet and code files
  • Want more help with Flexbox? You can watch CSS:Flexbox First Look on Lynda.com. Keep in mind that the this series was produced in 2013. Since then Flexbox has experienced wide browser support and browser prefixes are generally not necessary in new browsers. Use my resources page (CSS > CSS-Layout-Flexbox) for additional up to date resources for syntax and code examples.

Homework

  • Finish Flexbox Worksheet
  • CSS for small screens for homepage of Object Blog

Feb 27 – Landing pages

Rebecca is out sick today. Use today to catch up on things (see below).

Due for Wednesday

  • Get feedback on your mockups and wireframes (specifically the HTML tags you labeled) and make revisions.
  • Complete HTML for homepage. You can get started on the CSS but focus only on typography elements that are different from your articles. Keep in mind that you will use the same stylesheet you have been using (in other words, your project should have only one stylesheet).

Feb 24 – Landing Page

Topics

Homework

  • Complete mockup for landing page for both large screen and small screen. When possible, use the styles you already have set up for the article/post pages. Only introduce new styles where relevant.
  • Create a wireframe for both the large and small screen versions of the landing page. Label each element in the wireframe with an HTML tag.

Feb 22 – Critique

Topics

Homework

  • Revise CSS for posts for large and small screen sizes. Address any issues on mid-sized screens.
  • Read Article List Design Pattern. Review all 93 examples providing on the site. What five examples would work the best for your Object Blog? Why? Use these examples to sketch out 5-10 ideas (be sure to include a small screen and large screen version of each idea).

Feb 20 – Media Queries

Topics

  • CSS Q&A
  • CSS Media Queries
  • Designing Landing Pages
  • UI Design Patterns: Article List Pattern
  • Homework

    • Complete CSS for posts for large and small screen sizes. We will critique on Wednesday.
    • Read Article List Design Pattern. Review all 93 examples providing on the site. What five examples would work the best for your Object Blog? Why? Use these examples to sketch out 5-10 ideas (be sure to include a small screen and large screen version of each idea).

Feb 17 – Images

Topics

  • Saving Images for the Web: SVG, JPG, PNG (Alex)
  • Images in HTML: <img>, alt attribute, file structure (Alex)
  • Images and CSS: float, clear (note that elements you plan to float should have a width set. I recommend setting widths in % rather than px or em.)
  • Watch Lynda.Com Video CSS Fundamentals: Floats for a quick overview and Chapter 3: Working with Floats (Floating Elements and Clearing Floats) in CSS Page Layouts for a more detailed look.
  • Need more help with images or floats? Watch Rebecca’s video 14 Images and Floats

Homework

  • Read and take notes on Web Aim: Alternate Text then implement alt attributes on all images in your HTML files for the Object Blog assignment.
  • Validate your HTML for both blog post files AND Validate your CSS
  • Complete CSS for blog post pages on small screens (typography, layout, images, etc.).
  • Read Chapter 3 and Chapter 7 in Don’t Make Me Think

Feb 15 – CSS Layout Basics

Topics

  • Review Questions
  • Saving Images for the Web
  • CSS Layout Basics: the Box Model
  • CSS Layout Properties: margin, padding, box-sizing, width, min-width, max-width, border
  • CSS Pseudo Classes for Clickable elements: :link, :hover, :focus, :active, :visited
  • Implementing custom CSS Classes

Homework

  • Complete Typography CSS for Object Blog and begin layout for small screens

Feb 13 – Metadata + CSS

Topics

  • HTML: Metadata in the <head>
    • <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=”your name”>
    • <meta name=”designer” content=”your name”>
    • <meta name=”viewport” content=”width=device-width, initial-scale=1″>
  • HTML Validator
  • Introduction to CSS: selector, properties and values
  • CSS Reset
  • Typographic Properties in CSS: font-family, color, font-size, line-height, font-style, font-weight, text-align, text-indent, text-transform

Homework

  • Add Metadata to HTML for Object Blog
  • CSS for typography on small screens for Object Blog

Feb 10 – HTML

Topics

  • Go over Review Questions
  • Introduction to HTML
    • Root Element & Basic Structural Elements: <html>, <head>,<body> (note: each of these will only be used once on each page)
    • Sectioning Elements / Document Outline: <article>, <header>, <footer>, <main>
    • Content Elements: <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <figure>, <figcaption>, <img>, <ul>, <li>
    • In-line Text: <a>
  • HTML Markup Exercise

Homework

  • HTML markup for final blog posts
  • Finish any revisions to Mockups — be sure that all text uses styles

Feb 3 – Legibility

Topics

Homework

  • Revisions to Blog Post 1 and 2. Remember to submit on Google Drive and on Lisa French. Also remember to bring the feedback you received on both posts to class.
  • Read Use of Fonts from AIGA’s Design and Business Ethics.
  • Read Chapters 1 and 2 from Don’t Make Me Think by Steve Krug (course textbook).
  • Choose typeface/family for Object Blog

Feb 1 – Peer Review

Topics

  • Submitting work on Google Drive:
    • Certificate of completion for UX Design Techniques: Creating Personas (YourLastName_PersonasCertificate.pdf)
    • Certificate of completion for Writing for the Web (YourLastName_WritingCertificate.pdf)
    • Folder titled YourLastName_ObjectBlog containing: 2 Personas (YourLastName_persona1.pdf, YourLastName_persona2.pdf), Empathy Map (scan or type and save as YourLastName_empathyMap.pdf), Blog Post 1 (YourLastName_post1.pdf), Blog Post 1 Revision (YourLastName_post1_revision.pdf), Blog Post 2 (YourLastName_post2.pdf).
  • Review Questions
  • Peer Review
  • Work on revisions to blog post.

Homework

  • Complete Blog Post 1 Revisions. Bring two printed copies to class.
  • Write Blog Post 2. Bring two printed copies to class.

Jan 30 – Writing for the Web

Topics

Homework

  • Read Chapter 5: Omit needless words in Steve Krug’s Don’t Make Me Think (class textbook).
  • Write one Blog Post/Article for Project 1: Object Blog. Remember that your article must include title of article, byline, 300-500 words, and at least one image. Bring 2 printed copies to class.

Jan 27 – Personas

Topics

  • What assumptions did the Lynda.com Personas course make about its audience?
  • Vocab: UCD, Site Visit, Ethnography, User Test
  • Writing Prompt: Think of a design project you completed in the past that you consider to be successful. Who was the target audience? How did you do in your design solution to address the needs/wants of the user? How did you test the effectiveness of your solution?
  • Creating and Using Personas
  • Create 2 Personas for your object blog. One persona should reflect someone who is the same generation that you are. The other persona should be based on the generation assigned last class (via the reading assignment). In both cases, use the empathy map you created and the audience worksheet from last class to inform the content you include in your personas. Remember that personas should be realistic and not idealistic. Use this template to get started, but feel free to design as you wish. Keep to one page per persona. Bring a printed copy of each to class on Monday.

Homework

  • Finish Personas
  • Start the Writing for the Web Lynda.com course. Complete through Chapter Two for class on Monday (this will take you 30-35 minutes). You will have time in class on Monday to complete the course.
  • Brainstorm name ideas (and taglines if you would like) for your website. Generate at least 20 ideas. Narrow to five to discuss with peers in class on Monday. If you feel extra motivated or bored and want to get started on the visual side, consider sketching the names of wordmarks. The mark will need to scale on screens from 300px to 2000px without losing any quality. Be careful about names that are lengthy or hard to remember. Wordmarks will ultimately be created as scalable vectors.

Jan 25 – Audience

Topics

Homework

Jan 23 – Introduction

Topics

  • Introductions
  • Complete Web Design Survey
  • Review Syllabus
  • Introduction to Slack.
  • Basic Web Terminology: HTML, CSS, JS, URL, FTP, Server, Hex Code, Domain Name, Hosting Space
  • Discussion: What makes a blog different or unique from other types of websites? How are they similar?
  • Introduction to Project 1

Homework

  • Buy textbook and class supplies
  • Sign Up for Web Media Slack Group and post a description of the objects and the audience marker you have chosen for Project 1 in #317_sp17 channel by 11:59pm Jan 24. Respond to a post by at least one other classmate prior to class on Jan 25. Review Slack Video Guides if you need help getting started.
  • Review syllabus

Reminder: A set of Review Questions are given every Wednesday, including next class.