Author: admin

October 14 – Finalize Design

Topics

Self-organize to accomplish the following tasks in Rebecca’s absence:

  • Review Miranda’s Mockups and troubleshoot layout issues.
  • Review Dave’s HTML files and Halle’s CSS file.
  • Finalize how images will be handled on the site.
  • Choose strategy to deal with collapsible content to pursue.

Due October 17

Assign these tasks and post who is assigned to what in Slack.

  • Working prototype for collapsible content (coded and separate from main project).
  • CSS across screen sizes (layout, type, etc.). This should be the most basic version of the site fully implemented for critique.
  • Share graphics for social media (graphic + text to post in social media and direct link to particular content in the site). Think about the share graphics that would be appropriate for all of the personas created.
  • Progressive enhancements like animations or other complex details. (develop these separate from the main project)

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 10: Ready, Set, Develop

Topics

  • Finalize HTML for the site
  • Finalize Style Guide — send to Vote Oswego
  • Revise Grid
  • Finalize design for header/footer
  • CSS for Typography
  • Adopt CSS taxonomy
  • Progressive Enhancements

Due 11:59pm on Oct 11

  • Dave: Content
  • Trevor: Photography options for feeback
  • Rebecca & Alyssa: Revised Style Guide

Due 11:59pm on Oct 12

  • James: HTML markup for all pages
  • Yaneczka & Alex: markup for header/footer

Due 11:59pm on Oct 13

  • Miranda: Mockups for large screen
  • Halle: CSS for Type
  • Dave: Final HTML template and directions for file management
  • Everyone: Muliple sketches (ideally digital) for collapsable content on mobile

October 5 – Design, Design, Design

Topics

  • Field trip update
  • Staying organized
  • Tracking time
  • Share and critique work
    • Info Architecture
    • Visual Style (color, type and images)
    • User Interface elements
  • Plan next steps

    • Due October 7

    • Photography: Miranda and Trevor
    • Wireframes: Halle
    • Content: Dave
    • Type: Alyssa
    • Color: Rebecca
    • Social Share: James
    • Count Down: Alex
    • Navigation: Yaneczka

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 30 – Design Starts Now

Topics

  • Info Architecture
  • Visual Style
  • Big Idea Vignettes + Prioritization

Due October 5

Please keep track of the time you are spending on this project. Keep an excel file or use a tool like Toggl. Document the time spent on each separate task. If you haven’t already please think back to the start of the project and include those hours (even if estimates). Don’t forget to include class time. We’ll talk more about this next class.

  • Rebecca: Color
  • Alyssa: Typography
  • James: Social Share module
  • Alex: Persistent Dates/Deadlines
  • Yaneczka: Navigation
  • Halle: Images (Illustrations + Photos)
  • Trevor: Images (Illustrations + Photos)
  • Miranda: Revise Info Architecture, Organize Content and Create Content for Homepage
  • Dave: Revise Info Architecture, Organize Content and Create Content for Homepage

September 28 – Personas and Brainstorm

Topics

  • Personas – Story/Journey
  • Big Idea Vignettes

Due Today (September 28) ASAP!

  • Revised personas using the revised template. As a collection they should be diverse and should reflect all of the activities and situations we discussed in our initial brainstorm today. Please post in Slack when your persona has been updated. There should be 5 personas in all.

Due September 30

  • Proposals for Visual Direction: Moodboards or Style tiles. Must expand color palette and include typography. (James, Rebecca, Halle, Trevor, Alyssa)
  • Proposals for Information Architecture: Site Map and page organization. Must show how users get from social media/emails to specific parts of the site. Organization must make sense from the perspective of our Personas and the goals of Vote Oswego. Consider using a Venn Diagram or similar to think through how the personas and Vote Oswego goals align and diverge so that you can make informed decisions. (Dave, Alex, Miranda, Yaneczka)

Note:Please design these in a way that would allow someone else the ability to edit or build on your work in the future. Each person should work independently so that multiple ideas can be presented next class. Post questions in Slack.

September 26: Vote Oswego Workshop

Topics

  • Address questions from last chapters of Designing for Touch
  • Develop Shared Understanding of Project
  • Project Hopes and Fears
  • Stakeholder Map: Expectations and Relationships
  • Share Research

Due September 27

  • Send Rebecca a DM in Slack indicating what skills you want to work on and improve during this project. Rank your list (#1 is most important to you). Examples include (but are not limited to): leadership, communication, typography, visual design, animation, coding (html, css, js), research, planning, user scenarios, user interface design, modular design, mobile design, etc.

Due September 28

  • Brainstorm list of potential site users and their characteristics (the start of personas…). For each user on your list create a needs statement by filling in the italics of this sentence: The User’s name needs a way to do something that addresses their need so that they benefit directly. An example is, “Sarah needs a way to look up her polling place so that she knows where she is able to vote on election day.”

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: Vote Oswego

Topics

  • Introduce Vote Oswego Project
  • Introduce Vote Oswego Research Study
  • Vote Oswego Project Survey
  • Q&A with Vote Oswego Representative
  • Show and Tell

Due September 26

Due September 28

  • Written Evaluation of Paper Inspired (turn in as a PDF or Google Doc titled 417_yourname_paperInspired).
    • Question 1: Evaluate how well your solution conveys the essence of the original paper piece. Identify the criteria you think is important in the evaluation. What are the strengths of your solution? What are the weaknesses of the solution? Explain. Use specific examples and provide specific evidence to support claims you make. Use screenshots where appropriate.
    • Question 2: What did you learn from doing this assignment? How did you grow as a designer? How will this experience impact how you approach future web design, ux or ui problems?

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 14: Inspired by Paper

Topics

  • Chris Harrold Visit: View (and document) objects from the Strathmore Archive.

Resources

Due September 16 @ 2pm

  • Read Chapter 5 Designing for Touch. Download a new app (that you have never used before) and learn how to use it. Evaluate how easy it is to learn. How discoverable are the features? How did the app employ concepts from the chapter like coaching, leveling up and power-ups? Be specific and provide examples.Turn in as a PDF on Google Drive (discovery_yourname.pdf).

Due September 19

  • Be prepared for in-progress critique of Inspired by Paper assignment

September 12: Experiments

Topics

Due September 16

  • Read Chapter 5 Designing for Touch. Download a new app (that you have never used before) and learn how to use it. Evaluate how easy it is to learn. How discoverable are the features? How did the app employ concepts from the chapter like coaching, leveling up and power-ups? Be specific and provide examples.Turn in as a PDF on Google Drive (discovery_yourname.pdf).

September 9: Experiments

Topics

Due September 9

  • Complete any research needed for Interview Design Project (to be worked on in class on Friday

Due September 12

  • Read Chapter 3 & 4 Designing for Touch. Look at an interface you have designed on a mobile device. Consider the concepts introduced in chapters 3 and 4. Identify ways that you could make your interface less cumbersome, more efficient, elegant and intuitive that are within your personal current coding capabilities. Note: page 129-137 is highly technical and generally beyond the scope of this course. Skip if you have trouble following along. Turn in as a PDF on Google Drive (gestures_yourname.pdf).
  • Be prepared to present your solution to the Interview Design project.

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 7: Experiments

Topics

Due September 9

  • Complete any research needed for Interview Design Project (to be worked on in class on Friday

Due September 12

  • Read Chapter 3 & 4 Designing for Touch. Look at an interface you have designed on a mobile device. Consider the concepts introduced in chapters 3 and 4. Identify ways that you could make your interface less cumbersome, more efficient, elegant and intuitive that are within your personal current coding capabilities. Note: page 129-137 is highly technical and generally beyond the scope of this course. Skip if you have trouble following along. Turn in as a PDF on Google Drive (gestures_yourname.pdf).

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

September 2: Portfolio Development

Topics

Due September 7

  • Read Chapter 2 Designing for Touch.Open your most resolved responsive or mobile design on your phone. Physically measure all of the touch targets with a ruler. Do they fall within the guidelines introduced in this chapter? Explain. Do the same activity on a tablet. Turn in as a PDF on Google Drive (accuracy_yourname.pdf).

Due September 12

  • Read Chapter 3 & 4 Designing for Touch. Look at an interface you have designed on a mobile device. Consider the concepts introduced in chapters 3 and 4. Identify ways that you could make your interface less cumbersome, more efficient, elegant and intuitive that are within your personal current coding capabilities. Note: page 129-137 is highly technical and generally beyond the scope of this course. Skip if you have trouble following along. Turn in as a PDF on Google Drive (gestures_yourname.pdf).

August 31: Experiments

Topics

  • Create Google Drive Folders and submit homework
  • Review Homework
  • UI Design Challenges (use HTML and CSS, no JS)
  • CSS Animation: Transforms, Transitions, SVGs, Sprites

Due September 2

  • Complete UI Design Challenges (above). Feel free to revise the first two that you completed in class. Submit as CodePen URLS or folders with HTML and CSS files for each challenge in Google Drive (in the folder you created in class).

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: Warm Ups

Topics

  • Introductions
  • Slack: Icons and Emoji
  • UI and UX
  • Using Touch Devices
  • Review Syllabus
  • Complete Survey

Due August 31

  • Purchase Texbook and Supplies
  • Read Syllabus
  • Get Comfortable in Slack
  • Read Intro + Chapter 1 of Designing for Touch. Consider your most resolved responsive design project to date. Based on the concepts introduced in this chapter, what should be reconsidered about the design? Why? Explain. Turn in as a PDF on Google Drive (comfort_yourname.pdf).

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