Kathy E. Gill (@kegill)

Winter 2015 – week 7

We’ll learn about resizing images in Photoshop, we’ll work on projects, and we’ll focus on project planning: wireframes, sitemaps, storyboards.

Part 1. Photoshop Lab: image resizing

We’ll watch Adobe explanatory videos and edit images.

Assignment 1:

  • Image 1: resize (no edits, crops); new width: 300px.
    Save the image as image1-firstLastInitial-300.jpg (ex, image1-kathyG-300.jpg). Case matters!
  • Image 1: resize and optimize (use SaveForWeb and pick the best balance between image quality and file size); new width: 1000px.
    In a separate text note (firstLastInitial.txt, ex, kathyG.txt), explain why you picked this balance/size.
    Save the image as image1-firstLastInitial-1000.jpg (ex, image1-kathyG-1000.jpg).

 

Assignment 2:

  • Image 2: upsize (no edits, crops); new width: 1500 (50% increase)
    Save the image as image2-firstLastInitial-1500.jpg (image2-kathyG-1500.jpg). Case matters!

Assignment 3:

  • Image 3: find a free image at one of these sites (FreePhotosBank, the NOAA photo library, NASA photos, or I’mFree). Resize to a width of 1000 px and optimize.
    Save the original image as image3-firstLastInitial.jpg and the resized one as image3-firstLastInitial-1000.jpg (image1-kathyG.jpg, image3-kathyG-1000.jpg). Case matters!
    In a separate text note (firstLastInitial.txt, ex, kathyG.txt), explain why you picked this image/balance.

Please upload your final images to this UW dropbox by 10 pm tonight.
Kathy will demo. It requires that you login with your UW NetID. This is where your draft and final project files and week 10 PPT presentation should be uploaded, also, so it’s important that you understand how to access and use this tool.

 

Part 2. Project works

This week’s assignments form the basis of your project work tonight:

In your groups:

Review one another’s personas and site outline. Discuss scenarios to explain why your personas are visiting your site. How well can that story (task) be accomplished with the outline you’ve created. What scenarios might your partners see for your site that you haven’t thought of — or perhaps thought of and dismissed?

At the end of this part of class, post a note to the forum as a comment to your initial sketch/outline of site architecture — reflect on what you’ve learned about your project, what you might change, what was validated.

Here are your groups:

  • eCommerce (some sort of product “sale”)
    (a) Alyson, Caitlin, Hideo
    (b) Jorial, Julia, Sam
  • Portfolio :
    (a) Ana, Fan, Katie
    (b) Laura, Mandy
  • Services
    (a) Barbara, Heather, Issette
    (b) JessicaK, Sherry
  • Friends/Family
    JessicaB, Joe

NOTE: I am not going to use the breakouts. Use phone/private message/Skype/the Forum ….

Part 3. Site maps / wireframes / storyboards

Notes on navigation / UI

  • Where am I? How might we make it more clear where we are on the site?

    Where am I?
    Where am I?

 

  • Look at the Google search results – what does this tell us about what Google sees as common search terms?

    Google search results
    Google search results

 

  • And here’s the home page nav bar:

    MedPac home
    Home has an indicator color; why not also in the other sections?

 

Assignments for next week

In addition to the reading, we’re working each week on the final projects.

  • Week 8: by 8 pm Wednesday 25 Feb  : post to the UW Catalyst CollectIt a draft of your final deliverable for the class, with these components that we have worked on to date:
    • refined elevator pitch (should include site goal/audience);
    • three personas;
    • competitive analysis;
    • Format: whatever you want to use > eg Word / PPT / PDF / Web — but it should be “an” entity, not a series of downloads.
  • Week 8: by 6 pm Thursday 26 Feb: have two or three ideas for your website domain name

Project assignments for the remainder of the quarter

  • Week 9: by 8 am Monday 2 March: post in Moodle Forums a draft of your wireframe – high level / low fidelity / no color
  • Week 10: Everyone will give a 3-4 minute presentation (PPT slides, maximum 7 including title/closing slides) on their project. Timed! Please let me know in advance if we will need to have you phone me in order for everyone to hear you. I need your slides by noon that Thursday so that I can get them uploaded to Adobe Connect.

Video from this session:  Video 1 (the two work sessions) | Video 2 (lecture)

 

Addenda

Projects

A reminder about milestones, which are designed in a building block fashion to facilitate both development and feedback opportunities. These are assessed on a complete/incomplete scale and are part of the 40% of your points that are allocated to the project.

Based on your project types, here are our groups for our remaining time together; some have sub-grouping to keep the size manageable. See revised pitches. See draft competitor sites (17). See draft personas (only 10).

Examples from other classes

Note: competitive analysis requires that you have identified a set of tasks and you try to complete those tasks on each site. Success or failure?

Resources

 

Recap from last week: 9 design principles to tattoo on your brain

  1. Color
  2. Chunking
  3. Fitts’ law
  4. Gestalt Principles of Perception
    (1) Proximity

    (2) Uniform Connectedness

    • Gestalt design principles
      Gestalt : uniform connectedness (from The Web Style Guide)
  5. Hick’s law
  6. Readability
  7. Rule of thirds
  8. Simplicity
    • Designs should have a good signal-to-noise ratio: avoid chartjunk and its equivalents
  9. Visual hierarchy

 

Posted in Class notesLeave a comment

Leave a comment