Thurs, 4/17 - Main Points to Glean from Design 5405 - Web Communications

Final Project Presentations Continued

Here are the final clickable color prototypes:

614 After Hours

Fisher Collect

Flip Side

Food For Thought

osUdate

Oval Portal

Wut the Fork

Main Points to Glean from Design 5405: Web Communications

Creating the web is a Collaborative process. Creating the web in teams of specialized individuals who each have specific technical or content knowledge is vital to the success of a web site. Creating a professional web site or software on a broader scale requires a project manager or director, art director, front-end UI/UX designers, graphic designers, programmers, admins who specialize in security and servers or systems analysis, copywriters, etc. Even motion designers and choreographers are hired on projects as the animations/motion of elements becomes important with the advent of touch screens.

User-centered design is the design process vital in creating the web. Idea generation, information architecture, research, competitor analysis, creating personas, wireframing, usability testing, and prototyping is vital to creating a finished product.

Here are some diagrams which illuminate the user centered design process in their specific workflow/projects:

The web is constantly evolving. It is important to keep up on current web practices as new practices are made standard, as technology progresses as far as computing power, availability of web access and web devices, graphics and the technology used to create graphics are improving, and as new web languages are born. Thus it is a different type of animal - it requires keen sense of design, technical skills (coding), logic, insight/research/analysis into what prior examples and web practices already exist, creativity, and an eye for business.

The ultimate judge of your web designs and work should not be for a grade in a class, but your portfolio, which is what employers will be looking at. I encourage you to keep tweaking and progressing your designs, as well as learning some coding! You may even enlist or hire outside help such as programmers to help create the back-end of your product and realize it! Creative skills and technical skills are valuable assets in the workplace, even if you're not becoming a web designer. It's good to showcase these skills you have learned - put it on the web! Connect it to your LinkedIn, portfolio site, or professional site (or create a portfolio/professional site). You could host it for free on U.osu.edu. I guarantee this skill will be useful.

Anyone with a good idea can create a successful web business. You don't have to be a world-class designer or programmer to start a successful web business (although it helps). You just have to have good ideas you believe in and that others believe in and want to invest time and money into. Some of the best CEOs of startup companies majored in psychology. Why? Because they had keen insight into the mind of THE USER!!!!!! They could predict & address what the user's wants and needs were more successfully. For instance, Mark Zuckerberg was studying psychology and computer science at Harvard before he dropped out to start Facebook. You all created mini-startup companies over the course of a semester - people would pay good money to have those realized into a final working product!

Consider participating in Hackathons or project crowdfunding tools like Kickstarter!

I encourage you to keep flexing web design skills and creative skills. Keep progressing, learning, and creating in some way, even if you don't continue through life as a professional web designer! Humans by nature like to create and it keeps your mind sharp and your spirits up. Whichever medium you choose to create with, never stop creating and learning!

Thanks for having me! I really enjoyed teaching this course!

Tues, 4/15

Final Project Presentations

Presentation order is reverse of last time (all groups should be prepared Tuesday just in case):

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

Rubric for the presentations are the same as last time, but will be 3 points for each category:

• Organization/Preparedness
• Content
• Demonstration of Material / Critical Analysis
• Clarity, Legibility, Conciseness of Information
• Participation

Remember, your presentation is on the last half of the class. You can summarize some of the info from the first part of the class that you covered in your mid-semester presentation to introduce this final presentation, but focus on the Wireframes, Usability Testing, and Color Prototype.

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!

You may consider taking screenshots of your wireframes and prototypes and put them into your presentation, so you are not clicking through navigation when you talk about each page.

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.

Grades for presentations will be updated this week, as you finish them.

All grades for final presentations and individual participation will be updated next week

We will not need to utilize finals week - You will be free after Thursday!

Web Trends - The State of Websites in 2014

Check this link out - it has some interesting data visualization and talks about growing trends in web practices (these features differentiate "old" web design from new web design). The internet is moving away from less-usable browsers like IE and more towards Chrome, using Flash less, increasing sizes and number of images, using custom web fonts, implementing fancy scripts and responsiveness, and ditching the GIF for the PNG:

Brand & Capture | The State of Websites in 2014: Stats & Facts You Need to Know

Thurs, 4/10

Clickable Prototype Due, Usability Testing & Analysis Due

We will begin class by conducting another usability test of your final, clickable prototype (considering your outside-of-class usability tests were probably with your wireframed version).

Use your updated script - you should have updated it twice already (and adjust if needed).

Tack the results on the end of your blog post for your outside-of-class usability tests with an if___then____ because____ statement paragraph and analysis.

In the remaining time, we will conduct mini-critiques. Each group will show their final prototype, click through the design, and walk us through the design process and choices they have made since the black & white prototype versions. Each group will have 5 minutes each to present it and receive comments/suggestions for improvement.

Any remaining time will be used for presentation preparation, but most of you will likely have to meet outside of class this weekend for that.

Presentation order is reverse of last time (all groups should be prepared Tuesday just in case):

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

Tues, 4/8

Last Work Day - Clickable Color Prototype Work Time & Preparing for Final Presentations

Thurs, 4/3

Clickable Color Prototype Work Time

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

Thurs, 2/27

Creating {B&W or Greyscale} Clickable Wireframes

• Next order of business for our group projects is to start converting our mockups to a more interactive product - starting to make the interface using web language and making each element "clickable" which makes the product more readily visualized and easier for the users to understand during usability testing.


• What Are Clickable Wireframes?
• A Beginner's Guide to Wireframing
• Example clickable wireframe page.
  Notice this page was created with "rapid wireframing/prototyping" software. Most projects use this method before they create mockups as there are more resources available nowadays, i.e. web sites where you can go to create them. It expedites the process, as well as allows non-technical members of web and software design teams to contribute and help visualize the final product. We will be completing this step the old fashioned way, because it will help you learn web design skills the more you practice. Also notice this clickable wireframe is starting to use color and other styling. Our designs for this stage will be black and white or greyscale ONLY!!!!!!!!!!!! Also, not every widget or page feature is actually clickable and functioning, but you can see how it is fully realized with placement, different size of text in headers, etc. In this sense, "clickable" means the main page-to-page navigation is hammered out and visuals are planned out without the full visual realization of a mockup/prototype.



Guidelines for "Clickable Prototypes:

---

• In your group, start with a simple HTML page - a header, a body, navigation, and a footer.

---

• Start creating div tags for all your page elements using a stylesheet. Use white for the background color and black or dark grey borders for the div boxes.

---

• Once you have realized one page with the overall outline (page wrapper or container with all your main divs placed carefully in place in accordance with your wireframe layout you have already realized with Photoshop/Illustrator/etc.) with div boxes, you can create the rest of your pages. If you have created the static wireframes to scale in Photoshop or Illustrator, you already may have an idea of the widths/heights for your boxes which will make the process faster.

---

• Once the pages are created, you may add content - headings & simple descriptions into the div boxes in the form of headings that have simple descriptions in their content areas, or lorem ipsum. Even if you have created logos and you are tempted to use them, DO NOT USE THEM yet. No images that contain any fully realized graphics should be used yet. Formulate a system for showing where the images go... maybe add a description or a pixel width spec in the div box where the images are supposed to go? Maybe shade out the box with a darker or lighter shade of grey?

---

• If you have search bars or dropdown menus, you may simulate the forms with a simple div box that has a border around it. For medium-difficulty features like dropdown menus, you may either code them or simulate them with images. For video players or audio players, you may also simulate these with images to save time. DO NOT simulate everything with images. Remember this thing is CLICKABLE!

---

• ... which leads us to making your wireframe clickable! Link all the pages to each other! If something links to an external source, or a page that you haven't created yet, you can use this to make the link a "dummy" link: < a href="#" >Dummy link< /a >, or you can link to a page you have yet to create and make SURE to create the file by the same name. For instance - you know your next page is going to be called "contact.html" but you have not created it yet - in the navigation, create a link to the nonexistent page, then afterwards be sure to create a page with the same name - contact.html.

---

• You may also start shading the boxes with grayscale to start establishing visual hierarchy as the Example clickable wireframe page has done as a final step for your b&w or greyscale clickable wireframe.

• This is Due one month from now on 3/27 along with a Usability Testing Plan and Script

  When we are done creating these clickable wireframes, we will be usability testing them in class again, and then finalizing a more evolved script and plan for testing ACTUAL users you may find from your user groups, or 3-5 people outside of class that you test IN PERSON and BEST REPRESENT YOUR TARGET AUDIENCE.

Girl Develop It Columbus

If you are a girl and are interested in learning coding /getting some coding help - just FYI if you're interested: http://www.meetup.com/girldevelopitcbus/events/162381512/

Tues, 2/25

"Usability Testing" of your Paper Wireframes, Introducing CSS Zen Garden

"It takes only five users to uncover 80 percent of high-level usability problems" - Jakob Nielsen

• We will start with a group activity involving "usability testing" with your printed wireframes
• First, fill out your wireframes with a description in your blank boxes - roughly describe the content that goes in each box.
• Then formulate a Usability Testing Script using the Quick Guide in the blog post below these instructions.
• Once you have created a script to test out your web site, you will delegate one person for each of these roles:
  
  
  1. One person in your group will be the "Conductor" meaning they will conduct the test and asking the questions without revealing too much. They will pretend the paper wireframes are actual web pages, and have the user point to the links/pages they will navigate to. They act as a computer browser, presenting each wireframe as if the user were navigating through a real web site.
  2. One person will be the "Recorder" and will either record the conversation using a microphone app from your smartphone (this is ideal), or typing rapidly lots of notes and transcribing them to full sentence observation later. This person CANNOT chime in when the conductor is performing the test - must stay quiet.
  3. One person will be switched over to the group next to them to be the "Target User". He or she should be conducting the test using "free association" which is just a fancy way of saying "brain vomit" - run through the tasks and questions you are given and narrate your thoughts the whole time. Do NOT ask the conductor or the recorder any questions about how to use the site or what things mean until the very end. Just try to run through the tasks as best you can and give your honest thoughts about the site and how it functions.
  4. The 2 [now] groups of 2 will become a group of four. You will have two dual conductors/recorders, one from each team - they can take turns performing the test - perhaps halfway, the second conductor can switch wireframes and test with the questions for their site.
  
  
• Record the script and 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.
• This blog post will help you later when we conduct more usability testing with functioning versions of your prototypes - your User Testing Script will be more in-depth later on, and you will have solved some usability issues even before the wireframe or prototype is made "clickable" - so it will have evolved by then.




---





Usability Testing Quick Guide:

Usability Testing Quick Guide - Conducting a Usability Test





PART I - DO NOT SHOW THEM THE SITE, YET



1. Make them feel comfortable:
   Thank them for taking time out of their day Ask about their trip, stay, weather etc.


2. Tell them who you are what you are doing, without telling them who you are and what you are doing. Meaning, you don’t want to tell them too much about the project or your intentions, but you want them to know you have good intentions.
   ”I work for _____, and today we will be looking at a web site to find out how well it performs."


3. Say the “HOLY TRINITY” of Pre-test Statements:
   • NOT BEING TESTED
     “Although this is called a Usability test, you are not being tested. We are testing how well a web site performs, so you can not be wrong today”
   • NOT THE DESIGNER
     “I am not the designer, so feel free to speak freely” – ok perhaps a little white lie, but this helps open people up as they are looking at your web site. (Would you rather tell the chef or the person sitting next to you if the food was not prepared very well?)
     
   • THINK OUT LOUD
     “I encourage you to think out loud. This helps me understand your thought process” – The beauty of usability tests is you can actually learn something if they didn’t talk at all (by watching them), however, expressing internal dialog is good at helping understand why a decision was made.




PART II - SHOW THE HOME PAGE



4. Have them look at the Home page site and…
   • Find out if they get the purpose of the site, the purpose of the business.
   • Ask if they know what the main sections of the site are
   • Ask where they would start




PART III - TASK-BASED TESTING



5. Ok, the real testing begins. At this point you should have specific questions ready, geared at what the site must do well to be successful. The questions should be in the form of a scenario, especially if the user falls outside your immediate audience.
   ”If you were a business owner and looking for new cheeses to sell, where might you go?”
   ”You want to start a new bank account, how might you do this?”


• TIPS:
  • Be patient, let them muddle their own way
  • Avoid leading questions, such as: “Looking at the buttons on the right, where would you go?” or “When you see this box here, what do you do now?”
  • Do not direct them in any way, remember they are right (no pointing, don’t grab the mouse)
  • Don’t feel confined to your initial questions. Feel free to make up questions based on their actions. “From here, how would you go home?”
  • You can comment on any action they did and that THEY completed first, such as “I saw that you went to About Us, when you were there, how would you contact the business?”




PART IV - THE FOLLOWUP



6. Ok, now that you have watched them perform, you can now loosen up a bit. You can ask them why they did certain things. You can tell them what the intentions of the site are and ask why they thought differently. It’s a good time to also ask about design or branding things. Think of this as the “Focus Group” part of a usability test.




---





CSS Zen Garden - 2nd Individual Assignment

• Go to CSSZenGarden.com.
• Download the example HTML file. You will need this. You may also download the CSS file for your use as an example from this page or from the featured designs on the right, or the archive.
• You may participate in this demonstration of CSS design by creating your OWN CSS design, using their HTML template and changing this HTML file as LITTLE as possible. Create a stylesheet for this page and build the page using a design of your choice.
• You may use your creative/artistic abilities or you can look at minimalist examples and see how their solutions use little illustration and rely instead on carefully placed and styled fonts and page elements created with CSS.
• Begin by looking at the name of all the divs in the html page that are referred to in your nonexistent stylesheet. These are what you will call your CSS rules, and the html content for your divs are already existing! Add background images, padding, placement, text styles, h1, h2, h3 tags, etc.
• My example can be seen here and you can look at its CSS as well but my design was created by ME. Do not use my design, meaning my layout choice, fonts, and illustrations. The changes I have made in my HTML file are minor - I added Javascript and a link to an external stylesheet to host Google fonts, changed the author, and that's about it. The "extra" div tags at the bottom are for div tags that you may add to the design that are extra and might include visual content or whatever else is needed for your design apart from the pre-existing divs that you MUST create rules for.
• For more guidelines look at the FAQ Page. You may use CSS3 if you want to.
• The cool thing about this is that if you are finished with your design you can submit it as well for them to use as an example... if yours is chosen, people all over the web can then see your design and learn from it!



• This is due March 20th - Approximately one month, at least 30 min before class on that day.

  
  I did the assignment last weekend, but it took me a while. I do not expect you to be able to complete a well-thought out and executed design the day before it is due. Learn from last time and begin your individual projects ahead of time, as we will complete our group projects MOSTLY in class. I think this assignment will help you understand better as you will have many many examples to look at and dissect and you already have the framework and set of rules for your own creation.
• And finally, test in browsers WHILE you are creating your CSS - NOT DREAMWEAVER. You may edit with Dreamweaver, but do NOT use the split view to go by how your site looks unless your html file is opened in a browser window. Have your browser windows open and constantly refresh to see how your code is rendered while you make it.
  
  • Minimum test in these 4 browsers:
  • Internet Explorer
  • Chrome
  • Firefox
  • Safari
  • Stretch the windows around to see how the site behaves with different screen sizes.

Thurs, 2/21

Rest of Midterm Presentations

• We are finishing up with the remaining 3 groups for presentations
• For Tuesday, I would like you to PRINT OUT all your wireframes for ALL of the pages of your site and bring them to class. If you do not print them out, you will lose participation points because you will not have the materials necessary to be prepared and participate.
• READ & REACT: Usability Testing
• READ & REACT: Watch this video as homework. It will help you understand the process of usability testing. A man is sitting down with a user, and asking her questions about herself to gain demographic information, and then asking her to perform specific tasks, and asking her to narrate the process unfiltered. He is using a script and going through it with her. We will be doing a simple activity and conducting "usability testing" of your sites in paper form:
  Steve Krug's Usability Demo - PLEASE WATCH!

Tues, 2/18

Remaining Web Site & Group Project Presentations

• We will begin class by finishing up the critique with student sites we have not seen yet:
  • Leandra's Site
  • Morgan's Site
  • Rhayssa's Site
• Then, midterm presentation order is as follows for Tuesday and Thursday (All groups should be prepared though for Tuesday just in case):
  
  
  1. Payton, Michelle, Yunqi
  2. Mohammed, Morgan, Mallorie
  3. Lee, Leandra, Dave
  4. Caitlin, Erica, Ryka
  5. Anthony Z, Christine
  6. Anthony M, Katie, Nicole
  7. Rhayssa, Anna, Gina


• 15 minutes will be allotted for each presentation. All group members must be involved in the presentation and participate.
• You may present your group project deliverables any way you see fit - whether that be in an organized way on your blog, a pdf or powerpoint that you've compiled - whichever way is easier for you.
  
  

  I am looking for:

  • Organization / Preparedness
  • Content
  • Demonstration of understanding of your project and the material and ability to analyze it critically
  • Clarity / Ease of legibility - Break your information down to clear, concise ideas that fit into the time frame
  • Participation (everyone participates)


• Make sure you know which parts you are presenting individually or as a group, make sure you can present your research in an interesting, creative, engaging and simple-to-understand way!


• You will cover BRIEFLY all aspects of your project so far:
  
  
  1. Research Plan/Charter & Re-Evaluation
  2. User Research
  3. Competitor Analyses (Your 3 As-Is Analyses and a VERY brief conclusive summary)
  4. Personas
  5. Affinity Diagram
  6. Site Map
  7. Black & White Wireframes


• I am also checking for the completion of all these items Tuesday - if you have kept up with the project deliverables, these should all be finished!

Thurs, 2/13

La Fogata Web Sites!

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?
• Legibility - Is the text and the information/images legible i.e. an appropriate reading size, line spacing, sans serif, etc.?
• Page widths - Are all the page widths consistent? Would the page width function for a web site (not evaluating for mobile)?
• Consistency - Is the branding, colors, fonts, layout design etc. consistent throughout the site?
• Contrast - Does the site provide adequate visual contrast for the best legibility? Also, visual hierarchy of contrast?
• Templates - Does the template work and create consistency? Is there something not working well with the template?
• Page Structure - Does the web site structure make sense? Does it have a header, body, footer, etc.?
• Global Navigation - Can you easily navigate to every page from every page?
• Usability - How usable is the site? Are there broken links? etc.

• Allison's Site
• 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
• Lee's Site
• Mallorie's Site
• Mohammed's Site
• Michelle's Site
• Nicole's Site
• Payton's Site
• Ryka's Site
• Yunqi's Site

You get the weekend to finish your assignments and re-upload your zip files - We can revisit the ones we missed on Tuesday for a mini-critique before presentations, but I will only grade your final file structure that you upload.

Some of your sites mysteriously look very similar and use the same images from my site. Remember you are using your own design! My design was made quickly and hastily in a day. I want you to think about how you can one-up me!

About half of you used uppercase letters or lowercase letters to name your files in the code or vice versa, while actually naming your files the other way - servers are extremely picky about this. Make sure all your files have lowercase letters and always use lowercase in naming conventions just so you never confuse this. Your main file should be called "index" and should always be located within the main directory of a site.

I went back and fixed all your naming issues so your sites work - ALSO MAKE SURE that when you link items, you are linking them like so: < a href="index.html >< /a > or < img src="file/image.jpg" > and NOT < a href="C://mycomputerfiles/filefolder/filefolder/lafogata/index.html" >. This is a specific file path that will ONLY WORK on your computer. Again I changed all of yours so the files work today, but for Tuesday go back and fix this - about half of you had this problem.

Thanks... looking good! I know it is a lot of work but now hopefully you understand the challenges of designing for the web!

Tues, 2/11

Bring your La Fogata Projects in Progress for Technical Help!

• Your individual HTML/CSS assignment is due Thursday 4/13. Bring the individual project in progress with question for me!!!!
• Groups who have had missing members can catch up on finishing the group activities such as the site map, wireframes, etc.
• Remember you are creating a black and white wireframe in the design software of your choice for EACH page of your site (Your site maps show which pages you need to make wireframes for - all of them!).
• The affinity diagrams, site maps, and black-and-white wireframes for EACH page of your site is due on the 18th, same day as your graded mid-project presentations. To make your blog more organized, you can keep these three items on one blog post.
• Find time with your group to finish these activities and prepare for your presentation outside of class if you need to.
• Presentations on the 18th and 20th will be 15 minutes for each group. Each group member must contribute to the presentation of your deliverables thus far.

Attendance is Mandatory

• I have noticed a lot of you have been arriving late and some have been leaving as you please without warning me ahead of time with a VALID excuse. A valid excuse means it is something such as a family emergency, or an illness that you have a note for. Interviews, vacations, etc. are NOT valid excuses. Otherwise you are marked absent. We are doing in-class activities with your group projects, and when you do not show up and/or do not participate, you lose points. When I was an undergraduate in Design, I missed class ONCE and I notified my professor in advance. Please respect and be aware of my time, as well as the time your group is dedicating.
• As it was outlined in your syllabus, attendance is mandatory and IS part of your grade.
• This is a reminder that 4 absences is automatic failure, and 3 tardies is equal to one absence.
• Please be on time and participate in the class activities. When you decide not to show up, your group also has to do more work.
• Thanks

Thurs, 2/6

Creating Wireframes with Paper Prototypes

• Draw site features (header, body with lists, navigation, columns, footer, widgets, features, etc) with the location and name and basic visual structure of your information on pieces of paper. This page should be designed for one of your main site pages (remember we don't create the home page first - create a structure for a page that repeats the most) - Think about your branding schemes and site features - you can refer to your site map and affinity diagrams for this. You can color code each layout element that repeats on different layouts using colored paper.
• Cut your site features out and arrange them into a layout as a group - the parts can be come moveable and interchangeable to help your group decide on the best interface arrangement
• Rearrange your site features for another page
• Use the paper arrangement to create Wireframes for all the pages of your site using whichever design software you please - I gave a demo with Illustrator but you might feel comfortable using PhotoShop
• Remember that your wireframes - the versions you will be creating with design software do NOT yet include color or final logos or anything complete - they are very simple black and white versions of what a more realized mockup or prototype might look like
• Refer back to this page about Wireframes to see examples
• A quick wireframing software that design teams use is called Balsamiq
  Mockups created with this software are extremely sketchy and simple (Look at what a wireframe page for YouTube looks like as an example):
  
  
• The idea is to create rapid, quick drawings with basic interface elements, and the colors and finalized design come later
• Wireframes for all pages of your site are due 2/18 for your midterm presentations
• Here are some paper prototype examples:
  
  
  
  
• Here are some wireframe examples - you will convert your paper version to the black-and-white digital format and create these for EACH page of your site:
  
  
  
  

Tues, 2/4

Blog Posts for Research, Competitor Analyses, Personas Due!!! Bring A Stack of Index Cards for your Group!

• Within groups, Post an Identity Strategy for your business.
  Outline your proposed identity strategy. Be sure to include your strategy (what and why) around:
  • Business Name
  • Web site tagline
  • Logo - sketch some ideas and bring them to life by looking at like examples, playing with graphics and type in Illustrator
  • URL/domain name - What domain names are available for your business? What's the easiest way for a user to find your site
  • Email - info@businessname.com, contact@businessname.com
  • Facebook name
  • YouTube, LinkedIn, any other - KEEP NAMING SCHEMES CONSISTENT
  • This information will help you brand your business, create a header and think about what type of information is VITAL to your contact pages, etc. Logo and branding strategy can also get you started to think about the colors and visual elements you might later want to include on the user interface.
• Working on more advanced card sorting activity within groups - look at your Affinity Diagrams and think more in-depth about site structure specifically
  • Write titles of Pages on Index Cards - maybe include bullet points as to what the pages might contain.
  • Have your group sort your cards and decide on the best arrangement
  • Jumble up the cards, then re-arrange the cards. Does the second one work better?
  • Think about the site structure - is it a hierarchy? Is it a hub-and-spoke structure?
    Hub and spoke structure example (for simpler sites):
    
    
  • Turn these into a Site Map Diagram you create using software as a tool (Illustrator, Word, Powerpoint, etc.) and post them to your blogs - This will be due 2/18 along with your first Wireframes.
  • Think about language and visual vocabulary you want to use for your Site Map Diagram, make sure the taxonomies of titles/headers and categories are similar length and belong in the same group:
    
    
  • Some Examples. You may use arrows to indicate the direction of navigation. You may use shape, color, and proximity to indicate objects of the same group. Line connectors must indicate how pages are linked:
    
    
    
    

Thurs, 1/30

Discussion of Information Architecture, User Interface, and Personas

• Discussing the YWSG Chapters 3 & 4 (Information Architecture, User Interface)
• Discussion of Personas
• Work time for deliverables due on Tuesday

Tues, 1/28

Polar Vortex Day!!!

• Class is canceled due to winter weather conditions: significant COLD (not snow, sry) and wind chill
• On Thursday, we will be going over readings from Chapter 3, 4, and 5 of the YWSG (the last one!). In the meantime, read these chapters and make sure you remember to do your research and personas
• Continue your User Research, Competitor Analysis (which should be mostly done), and Personas for the due date on Tuesday, February 4 - you have a week
• Here are some example Personas. I can go over this a little more on Thursday. For the deliverables, you will create 2 Personas, which are user profiles for your target users. Your group is required to make 2 (TWO) Personas; a primary and a secondary persona. You may refer to this page for a description and example of what a persona might look like and consist of.
  • The primary persona must be tailored as the perfect or exact example of your target user group, and you can create a small profile to describe this fictional person that fits the exact profile of your target audience. Pretend you are an FBI agent from the television show "Criminal Minds" and this person is the UnSub - Unknown Subject. You are creating an exact profile of what type of person will use your site. While we are not criminal profilers from the FBI, we have done some research into our user groups and found some insight as to what type of user specifications a person using your site might have. This profile should include a name, a photo, quote, bullets of attributes that are important such as demographic information that pertains to your particular business, and small narrative. You can be creative and write a short paragraph that might summarize their needs as a user and what their interests are.
  • The secondary persona must be different from the primary, and must be a secondary example of your target user group. This profile should also include a name, a photo, quote, bullets of attributes, and small narrative.
  • You may use graphs if you would like to, in order to display key information, but it is not required. You can create your persona using whatever type of software you feel comfortable with - Word, InDesign, Illustrator, etc.
• Here are 2 templates and 2 examples (the first is a woman who is going to a shoe-shopping site. The second is a woman who might be going to seek out information about how to pursue criminal action in a case where someone stole money from her online; so maybe she is searching for a legal information site or an attorney's web site who specializes in this type of fraud):
  
  
• Due dates are now posted as a list for all Group Project and Individual Project Deliverables and presentations on the top RIGHT side of the blog to keep you organized. ->

Thurs, 1/23

MAIN HTML/CSS Concepts, Illustrator Tutorial, Introducing 1st Individual Assignment

• HTML and CSS lecture (Powerpoints are on Carmen):
  How HTML works
  How the Internet Works
• Short Illustrator Tutorial Specifically for Creating Wireframes and Graphics
  • Opening Illustrator and setting width/height, # of artboards, set units to pixels
  • Edit -> Preferences -> Guides & Grid to create a Grid, View -> Show Grid to show the grid
  • Create Rectangles with Rectangle tool, Stroke & Fill, Transform Controls for Exact Height and Width
  • File -> Document Setup to change the document background color and grid color
  • Using Pen tool, Text Tool, Scale Tool, Rotate & Reflect Tools to create graphics
  • Swatches
  • Saving in Illustrator vs. Export
• First Individual Assignment:
  It's restaurant week! Restaurants around Columbus create a prix-fixe menu with 3 courses.
  Your task will be to redesign La Fogata's web site!
  La Fogata is a Mexican Restaurant in the Short North on High Street. The word "fogata" means "bonfire" en español - a gathering place where people talk and roast food, and also a place with FLAMES (Notice the unsightly flames that seem to be engulfing the web site!).
  • Your site must include:
  • 5 Pages - A Home Page, A Menu Page, A Gallery Page, A Locations Page, and A Contact Page
  • You will construct the pages using HTML and a VERY SIMPLE .CSS Stylesheet that controls the page style of all 5 pages.
  • Site must include Rebranded Header Graphic and home page concept still retaining the same name "La Fogata" Mexican Grill. I am not grading you on your graphic design skills, but I have included some pics below of logos that brand this concept better. For those of you who may not have had a lot of graphic design experience, notice the Kindle Fire logotype. It can be simple! Do not use these exact logos on your site, use them only for inspiration:
    
    
  • Must have a Global Navigation Bar - All Pages must have a navigation bar or list of links so you can navigate to any page at any time
  • Home Page - Must include new brand concept and introduce site, maybe it has specials or the restaurant's catchphrase?! Maybe it has a phone number?!
  • Menu Page - Must include the information from High Street Menu using text.
  • Gallery Page - Minimum 3 Pictures. You may use some of their pictures, or maybe you can find some cleaner-looking stock photos of Mexican food that might work better and is more in-line with your new rebranded concept. This does not have to be fancy and have CSS rollover effects, unless you want it to!
  • Locations Page - Must include address of High Street Location and an embedded map using Google Maps. DO NOT use the same graphic as they have used.
    
    
  • Contact Page - Must have this basic information:
    • Phone Number - 614.294.7656
    • Email - lafogatashorthnorth@gmail.com
    • Street Address - 790 N. High Street, Columbus, Ohio 43215
  • The site must also list this information where you see fit:
    • Hours - Mon - Thu: 11:00 am - 12:00 am, Fri - Sat: 11:00 am - 1:00 am, Sun: 11:00 am - 10:00 pm
    • La Fogata takes Reservations, Walk-Ins are Welcome, Good For Groups, offers Take Out, offers Outdoor Seating
    • La Fogata offers Street Parking, a Parking Lot, and Valet Service
    • Payment Options include Visa, American Express, Mastercard, Discover
    • Include a link to their facebook page
  • You will follow page/site design fundamentals as described in chapter 6,7 & 8 of the web style guide.
    • Hierarchy
    • Typography
    • Legibility
    • Page widths
    • Consistency
    • Contrast
    • Templates
    • Page Structure
    • Global Navigation
  • Menu text and other body text cannot be comprised of graphics - but include graphics if you know how to make them and where you see fit, if it works with your brand.
  • Begin by looking at the current web site (As Is!). Look at how it currently works, its colors, its branding and how it might not be functional. Think about how you can improve usability and get the information across in a better way. Create a sketch of a wireframe for each page, and begin creating new branding - Generate Logo for the site header. Next, craft a single page using Dreamweaver and generate a stylesheet. Once this page is barebones and has the header, body, footer, and navigation, duplicate the file 4 more times and enter in the required info for each, naming each as such: index.html, menu.html, gallery.html, locations.html, and contact.html. Make sure to name your home page as "index.html."
  • This will be due February 13 and you must upload your site file structure containing all graphics, all 5 html pages, and the CSS stylesheet as a zip file in the DropBox. By graphics I mean ONLY the graphics you have inserted into the html - .jpgs or .pngs that appear in your site, NOT Photoshop or Illustrator files.
  • I can post them online and link them to the blog for the critique on Feb 13.
  • ***As a sidenote, for affordable, non-restaurant week Mexican cuisine, I recommend Los Guachos on Godown Rd. You can't be disappointed!!!! :)

Tues, 1/21

Page Structure, Page Design, and Typography Discussion, Example Site

• Going over main points of discussion for readings
• Presenting a prototype web site I made - AWESOMEsite and dissecting its HTML/CSS, QUICK discussion of wireframes
• How to make a web site using HTML. Tables and HTML-only sites are the web of the past: Check this amazingly bad HTML-Only Site and these outdated examples so you can think about what might make a site unappealing when you go to create your wireframes. Also check out The awwwards: Sites of the Day to see how these sites utilize CSS, dynamic content, well-thought-out user interface design, and good design practices.
• If we have time, Affinity Diagram Activity
• Larger ideas for site go on top, smaller ideas go below:
• Can group similar ideas/category items by color
• Use sticky notes or small sheets of paper, ex.:




• Take a cell phone pic and post it to your blogs of your agreed-upon diagram.
• Trade with another group, re-arrange in a way that makes sense. Take a cell phone pic of your new arrangement and post to blog. Make sure you include which group rearranged yours.
• Think about how these idea clouds could form a site map that might later be components on your user interface.
• READ & REACT: YWSG - Chapters 3, 4, 5
• On Thursday, I'm going to introduce your first individual assignment. Although it might be challenging, I think you will find it fun!

Thurs 1/16

Present Research Plan / Charter Informally to Class and Short Discussion on Mobile Web

• Re-evaluate Charter - In groups, ask yourselves these questions and post a blog entry to answer them:
1. What are the business goals? (What can this company do to facilitate business?)
2. Web site Goals
   • I.E. Grab attention, deliver information, consider other other services/not consider other services, easy to navigate, has easy to use tech, etc.
3. Users Tasks - What are things they want to accomplish?
   • Basic Information - Contact Info
   • Services
   • What is the cost? Why would people pay this much? What's the value? How available?
4. Differentiators
   • I.E. Cost comparisons between similar businesses, Different tech, Different business structure
5. Audience/Behavior
   • Age range, demographic of audience, socioeconomic bracket, specific occupation such as student, etc.
   • What type of behaviors are they going to exhibit? How and why would they approach your site/business?
• As Is Analysis
• How do we evaluate other sites and determine if a site is good?!
• Using the 10 Heuristics for User Interface Design, have each person in your group evaluate a competitor's web site for EACH HEURISTIC. Make a bulletted list (ten bullets for each Heuristic) with your findings. Pretend you are using their service and USE the web site, and write a short paragraph describing your observations/findings as a short Usability Analysis. Post this in your blogs as a separate entry for each person. There will be FOUR NEW BLOG ENTRIES FOR TUESDAY 1/21 (The re-evaluation of your Charter, 3 As Is Analyses complete with 10 Heuristics and a Usability Analysis Paragraph created by each group member for 3 related sites).
• READ & REACT: Mobile First. Also read How to create a mobile version of your web site just for your reference. For the scope of this course, we will NOT be focusing on creating mobile sites, unless you decide it is imperative to your business idea, you may make a mobile prototype in ADDITION to your web site for the group project.
• READ & REACT: YWSG Chapters 6, 7, 8 - PLEASE READ!!! VERY IMPORTANT IN UNDERSTANDING HOW TO BUILD WEB PAGES!

Tues, 1/14

Forming Groups / Blogs

• ASSIGN: User Research, Competitor Analysis, Personas
• User Research
  Each group, conduct 4-5 interviews, contextual interviews or survey. Can use Surveymonkey, send emails, etc. Contact group that may fit this persona. Purpose: How do people that may fit this persona use the web, make decisions - what would change their behavior?; what sites do they like?; what are their pet peeves? We will do some form of Participatory Research in class.
• Competitor Analysis
  Each group will find a unique site to analyze. Purpose: How are competitors addressing this? What are differentiators? What are they doing well, what are they not? See 10 Heuristics as a benchmark (will discuss in class). For this portion, COPY all [3] of your blog posts for your As-Is Analyses and create a written paragraph as a consensus as well - Overall findings and group summary for competitor analysis that compare the three and might differentiate how yours will be different.
• Personas
  Each group will develop a primary and a secondary persona Personas need to be believable, based on their observations/data, and different from each other. They should have a photo, quote, bullets of attributes, and small narrative. Personas: The foundation of a great user experience
• You will post summary of all on your own team blog. You will present these to "the client" on Tuesday, February 4.
• For Thursday 1/16 post a detailed Research Plan on your team blog. FIRST you must include the top 3 goals of your business/idea. Include how you are going to conduct the research, as well as a preliminary outline about what your business problem is and what your site does and how you arrived at the agreed-upon business idea, as well as a preliminary idea about other potential competitors, and who your site's target audience may be.
  
  Goals and strategies for developing a Project Charter (from the reading):
  
  What is the mission of your organization?
  How will creating this web site support your mission?
  What are the two or three most important goals for the site?
  Who is the primary audience for the web site?
  What do you want the audience to think or do after having visited your site?
  What web-related strategies will you use to achieve those goals?
  How will you adequately maintain the finished site?

Assigned Groups are:

1. Mohammed, Morgan, Mallorie
2. Anthony Z, Christine
3. Caitlin, Erica, Ryka
4. Anthony M, Katie, Nicole
5. Rhayssa, Anna, Gina
6. Lee, Leandra, Dave (as extra)
7. Payton, Michelle, Yunqi

Don't freak out, but the content deliverables for the scope of this group project will be:

• Charter
• Research & Competitive Analysis
• Personas
• Wireframes
• Clickable Prototypes of the wireframe
• Usability Testing Plan & Scripts
• Analysis
• "Functional" Clickable Prototype
• All of this will be documented on your blog; with Mid-Year and Final Presentations

Thurs, 1/9

INTRO TO COURSE

• Introduction to course, format, expectations, syllabus
• Vocabulary, User Centered Design
• READ & REACT: 5 Design Styles, YWSG – Chapter 1 & 2
• Remember to think of several (perhaps 3) common problems that you could pitch to your group as an idea for a web site or service. It can be a problem that people encounter in everyday life, a Columbus-specific problem, a problem or challenge you may face being a student, etc. We will form the groups Tuesday.
  
  Example Problems:
  
  • Bed Bugs in Columbus
  • Parking in the city
  • Making tying shoes easier for kids

Just a nice infographic of the disciplines of User Experience - This course will touch on a lot of these topics, but will be focused on the User-Centered Design Process as it pertains to the practice of building web sites, specifically as a group. Lectures, examples, and individual projects will get you acquainted with the technical practice and mechanics of web design: