Tues, 4/1

Work Day - Guidelines for Visually-realized, Color Clickable Prototype

Must be clickable (navigation exists between all pages of site), built off of your wireframe

Must include final graphics - your logo in the header, your branding, slogan etc.

Must include final copy - no more lorem ipsum

Must have added CSS style and significant improvement in the CSS from wireframe version.

Color. Look to the Visual Hierarchy you have already established to decide on color schemes, or you may choose to use a tool such as the Color Scheme Designer

Text styles added since wireframe version - body, h1, h2, h3 header styles. Implement a web font, add color, change sizes, letter-spacing, etc.

Again, complex functionality can be "simulated" with graphics, simple functionality (such as dropdowns/secondary navigation, bookmark functionality, responsiveness (I see some designs that tackled this), forms that exist on the page but don't necessarily integrate all functionality yet, etc. can be added with HTML/CSS if you have time. I don't expect this but I know that some of you enjoy coding... as long as it doesn't detract you from the aforementioned goals you should be accomplishing.

Remember to be conducting your 3-5 Usability Tests, due April 10, the same day as your Wireframes/Final Prototypes. The Usability Test guidelines were explained last class time.

Remember that on the 10th, the 3-5 Usability Tests and analysis for each are due on the blog, and the final versions of the Wireframes and Prototypes are due in SEPARATE zip files (if you haven't already uploaded the wireframes), and can be uploaded by one member of your group.

You will then have one weekend to prepare for final presentations. Final Presentations on the last half of your projects will be conducted the last week of class - we will do reverse order of last time.

The presentations last time were great - But some things to consider - condensing of information on each slide, and legibility of graphics and text would improve your presentations. Make the text as big as you can, and reduce the words on each slide! Presentations should only have simple, short points to drive the message home, lots of visuals, and you should be explaining the rest. You may use whatever tool you like to present with; Powerpoint, PDF, Prezi, even straight from the blog if you format it, etc. Keep it to 15 minutes.

Thurs, 3/27

2nd "Usability Testing" In-Class Exercise with Clickable Wireframes, Revising Script & Planning for User Testing of 3-5 Individuals in Target User Group

• First, refer back to the previous session of Usability testing you conducted, and copy the script. You may need to refer back to The Quick Guide on the Tuesday, 2/25 Blog Post.
• Update any changes you need to your script to account for changes between your paper wireframe version and your clickable wireframe version. The task-based testing questions might be ones you need to update since your project has most likely changed bit. - Perhaps add some new questions because your app has probably had some issues resolved and more added features, as it is now in an interactive & non-paper format.
• Post this new script in a new blog post with the changes
• Run through the Usability test as we have in the previous class time with the Conductor, Recorder, and User in YOUR OWN GROUPS. Refer back to the blog post if you need to.
• Also in your blog post, include what we did last time:
  • Record the user's answers on your blog
  • Then, write a short paragraph that summarizes your findings using "If, Then" statements. If the user was confused about _____ and ____ , then we should change_____ about our site because _____. I expect you'll have a lot to say here, but keep it to a maximum of 500 words.
  • Once we finish this, we will switch with members from other groups as the "users."
  • Record the user's answers on your blog
  • Then, write a short paragraph that summarizes your findings using "If, Then" statements. If the user was confused about _____ and ____ , then we should change_____ about our site because _____. I expect you'll have a lot to say here, but keep it to a maximum of 500 words.
• At the end you should have a blog post that contains your new script with revisions, answers from the 2 different people (one user from your group and one user from another group) and you should be able to transcribe/summarize answers to your questions and observations they make pretty easily because you will have an audio recording on your phone. You should also have two paragraphs with if_ then_ statements and findings.
• The next 2 things that will be due in two weeks, which you should all be working on are your Usability Testing Analysis for 3-5 People that you find from your target audience outside of class. You should take this revised script, and usability test users from outside of this class who fit within your target audience - each one individually or one at a time without the others listening in.
• Write each user's answers (You can rename the user for anonymity if you'd like) and a short paragraph using the "If the user was confused about _____ and ____ , then we should change_____ about our site because _____." format as well as other summary observations you may find that might lead you to changes in your next Prototype.
• In these next two weeks you will also be "fully realizing" your wireframe into a color prototype. This means it has the final "look & feel" of the application. It will have final graphics and branding, images, text, colors, titles, block elements. You will progress your stylesheet to colorize and beautify your clickable black & white wireframe. There should be no lorem ipsum (but your real text/paragraph info), and again things can be simulated with images (like video players) but they will have final colors/styling.
• Look at this web site for explanation for converting wireframes -> color prototypes
• You will then have one weekend before the last week of class to prepare for final presentations - or the second half of your progress on the project.
• Final, Visually-Realized Clickable Prototype & 3-5 Usability Testing Analyses on people NOT in our class - these both will be due on 4/10
• On 4/10 we will run through another Usability Test before you can tweak the final version to turn in. The other half of the class you will have a bit of time to work on preparing for your presentations. We shouldn't have to utilize finals period times.

Tues, 3/25

Final Work Day for Clickable Wireframes

Quick Discussion of Search Engine Optimization

READ THIS AS HOMEWORK: Search Engine Optimization Guide from Google

Formulate a plan for Usability Testing your Clickable Wireframes on the target audience and explain answers to these questions in a blog post:

• Where can you find 3-5 individuals from your target audience to test this web site on?
• How can you solicit for these individuals to take your test?
  • Will you require flyers/marketing around a certain area or building?
  • Will you send out emails to a particular group of people on or around campus?
  • Will you ask 3-5 friends you already know for assistance that might represent candidates from your user group? Think back to your personas and which people might fall into a similar category as the theoretical personas.
• How has your site changed since your paper-prototype version?
• How do you foresee differences in usability testing from the paper wireframe exercise we did in class - will you have to modify your script?

On Thursday, your clickable wireframes will be finished - the pages of your site should all be connected to one another and the site should be navigable. We will then modify/update the usability script to accommodate for any changes in the layout and function of your site, test the wireframes within your group, and then test the wireframes with a member from another group.

Thurs, 3/20

CSS Zen Garden Critique

Let's Evaluate our Web Sites in Critique based on:

Hierarchy - Hierarchy of visual and text information - Where does your eye immediately get directed? Does it point you to the main information right away?

Typography - Are the fonts harmoniously occupying the space with one another? Does the font help communicate? This is crucial for a design with less emphasis on illustration or art.

Legibility - Is the text and the information/images legible i.e. an appropriate reading size, line spacing, etc.?

Consistency - Is the branding/images, colors, fonts, layout design etc. consistent throughout the page? Does everything occupy the space together harmoniously?

Contrast - Does the site provide adequate visual contrast for the best legibility? Also, visual hierarchy of contrast? Colors largely play a part here.

Usability - Does the CSS Redesign allow for the same usability as without the style?

Adherence to CSS Zen Garden Rules - Was the HTML left alone (with the exception of adding web fonts)? Did you use CSS and/or CSS3 for the redesign? Other types of code can support the design, but CSS/CSS3 should be the main tools used for the redesign.

• Anna's Site
• Anthony M's Site
• Anthony Z's Site
• Caitlin's Site
• Christine's Site
• Erica's Site
• Gina's Site
• Katie's Site
• Leandra's Site
• Lee's Site
• Mallorie's Site
• Mohammed's Site
• Morgan's Site
• Michelle's Site
• Nicole's Site
• Payton's Site
• Rhayssa's Site
• Ryka's Site
• Yunqi's Site

You have the weekend to make changes to your site, and I will email you with feedback/suggestions for improvement.

Design Exhibition at the Urban Arts Space

For anyone interested, undergraduate design projects, graduate design projects [and my thesis film in-progress] will be on display at the UAS. Come check it out:

2014 Ohio State Design Exhibition

BSD

• Industrial Design
• Interior Design
• Visual Communication Design

MFA

• Design Research + Development
• Digital Animation + Interactive Media

---

OSU Urban Arts Space

• 50 West Town Street
• On display 26 March to 3 April

Professionals Night

• Tuesday, 1 April, 5–8 p.m.

Friends + Family Night

• Wednesday, 2 April, 5–8 p.m.

---

The Columbus Commons Parking Garage is located at 55 East Rich Street, with entrances on Main and Rich Streets between High and Third Streets. The Underground Garage is located at 191 South Third Street, with an entrance off of Third Street, between State and Rich Streets.

---

Department of Design
The Ohio State University
design.osu.edu
accad.osu.edu
design@osu.edu

Tues, 3/18

Technical Forum for CSS Zen Garden Projects

• Work time for your CSS Zen Garden Projects, which are due Thursday, 3/20
• You may also work on your Clickable Wireframes if you have made progress on your Zen Garden Projects
• If you need a place to meet or work outside of class, you may work at The Digital Union in Stillman Hall, or at Thompson Library. Computer labs in both places will have Dreamweaver and/or you may use Codio and all you need is a computer with internet access.

Tues 3/11 & Thurs 3/13

Have a great Spring Break and St. Pattie's Day!

Here's some fun ascii art to get you excited for the time you'll be spending apart from your web designing:

                                       .-----.   ()()
                                      /       \ .'()
                                      |__...__|/
                                      |_....._|
                                    .-'  ___  '-.
                                    \_.-`a a`-._/
              __ .--. _              (|\ (_) /|)
           .-;.-"-.-;`_;-,            ( \_=_/ )
         .(_( `)-;___),-;_),          _(_   _)_
        (.( `\.-._)-.(   ). )       /` ||'-'|| `\
      ,(_`'--;.__\  _).;--'`_)  _  /_/ (_>o<_) \_\
     // )`--..__ ``` _( o )'(';,)\_//| || : || |\\
     \;'        `````  `\\   '.\\--' |`"""""""`|//
     /                   ':.___//     \___,___/\_(
    |                      '---'|      |__|__|
    ;                           ;      ;""|"";
     \                         /       [] | []
      '.                     .'      .'  / \  '.
        '-,.__         __.,-'        `--'   `--'
         (___/`````````\___)


                          ***          ***
                       ***....**     **...***
                      **........** **.......**
               ***    **..........*.........**    ***
            **.....**  **..................**  **.....**
          **.........**  **..............**  **.........**
         *..............*   *..........*   *..............*
          **..............*   *......*   *..............**
            **..............** *....* **..............**
              *......................................*
            **..............**........**..............**
          **..............*    *....*    *..............**
         *..............*      *....*      *..............*
          **.........**        *....*        **.........**
            **.....**         *....*           **.....**
               ***          **....*               ***
                          ** * * *

                 _   _   _____   ____   ____   _     _
                ( ) ( ) (  _  ) (  _ \ (  _ \ ( )   ( )
                | |_| | | (_) | | |_) )| |_) ) \ \_/ /
                |  _  | |  _  | | ,__/ |  __/   \   /
                | | | | | | | | | |    | |       | |
                (_) (_) (_) (_) (_)    (_)       (_)
  ____  _____     ____   _____  _____  ____   _   ___   _   _  _  ____
 (  _ \(_   _)   (  _ \ (  _  )(_   _)(  _ \ ( ) / _ \ ( ) ( )( )(  _ \
 | (_(_) | |     | |_) )| (_) |  | |  | (_) )| || ( (_)| |/ / |/ | (_(_)
 _\__ \  | |     |  __/ |  _  |  | |  |    / | || |  _ | , <  '  _\__ \
( )__) | | | _   | |    | | | |  | |  | |\ \ | || (_( )| |\ \   ( )__) |
 \_____) (_)(_)  (_)    (_) (_)  (_)  (_) (_)(_) \___/ (_) (_)   \_____)
                        ____    _____  _     _   __
                       (  _ \  (  _  )( )   ( ) (  )
                       | | \ \ | (_) | \ \_/ /  | /
                       | |  ) )|  _  |  \   /   |/
                       | |_/ / | | | |   | |    _
                       (____/  (_) (_)   (_)   (_)

But for some of you, your clovers will look more like this....


        __ _.--..--._ _
     .-' _/   _/\_   \_'-.
    |__ /   _/\__/\_   \__|
       |___/\_\__/  \___|
              \__/
              \__/
               \__/
                \__/
             ____\__/___
       . - '             ' -.
      /                      \
~~~~~~~  ~~~~~ ~~~~~  ~~~ ~~~  ~~~~~
 ~~~   ~~~~~   ~aloha!~~   ~~ ~  ~ ~ ~

Thurs, 3/6

Work time for Clickable Wireframes, CSS Zen Garden

Tues, 3/4

Work Time for Clickable Wireframes