#proj03

[msudenver-cwi-sp15]

Connecting to the server via FTP

The expectation is that before the start of the crit Wednesday, your project 3 will be uploaded to the multisaft.com webserver, and you will have your browser open to navigate to your project 3 website. You can find the files at multisaft.com/cwi-sp15/.

To upload your project 3 files, use Filezilla and refer to the screenshot below or follow these instructions:

1. Go to File > Site Manager… (or type Cmd + S).

2. Create a New Site (using the button below the left pane).

3. Type the host name: multisaft.com

4. From the Encryption dropdown, choose ‘Only use plain FTP (insecure)’.

5. From the Logon type dropdown, choose Account.

6. Enter the User name: [email protected]

7. Enter the Password. (Email classmate or instructor if you do not have it.)

8. Enter an Account name. I used ‘CWI’.

9. Select ‘Connect’.

10. Wait. Filezilla should connect to the multisaft.com webserver within about 30 or less. You’ll see the green success text in the top pane of the Filezilla window.**  

11. Once it’s connected, use the right side windows to navigate to your student folder. Then drag your whole project 3 folder into your student folder.**

13. Once uploaded, please rename your project 3 folder to ‘proj03′. Context-click (e.g. right-click or ctrl + click on Mac) to rename the folder.

**Email JP or ping them on Slack if you have trouble connecting or uploading files.

[msudenver-cwi-sp15]

For Mon 5/4

Continuing to use Zurb Foundation, have 3 screens (minimum) coded to ~90%: • navigation • grid • buttons • text • image placeholders (use placekitten.com or placehold.it)

[msudenver-cwi-sp15]

Deliverables for Final Crit on 5/13 @ 3:30p

From the Project 3 page:

Milestone 4: Digital Prototype (using Foundation)

Finally, you will translate your paper prototype into a digital prototype using Zurb’s Foundation framework. Your digital prototype will be a refinement of your paper prototype, informed by findings from your usability test, and will be minor reinterpretation of form. Your digital prototype should enable users to walk through a given task and should show each state of the interface as they complete each step of the task. The interface should be cohesive and as comprehensive as you can get it (with regard to completing the task) and should give feedback to your user.

Required deliverables – due Wed 5/13 at 3:30pm:

5 screens, minimum, of your prototype (with some post usability test revisions) coded in Foundation

consistent, user-friendly, navigation across all screens (instructor recommendation: use Top Bar for desktop apps or Icon Bar for mobile apps)

upload your project 3 files to the multisaft.com webserver via an FTP client (like FileZilla); ping JP if you need help

your process compilation as a PDF that includes:

cover page: cover image, your name, date, class name, instructor name, university name

statement of intent

your taskflows (scans of all versions you created)

your wireframes, v1

images of each screen of your paper prototype

your usability findings report

for each screen you code, a screenshot of your code paired with a screenshot of the browser rendering your code

a thoughtful reflection on 1) your user-centered design process over the course of project 3 and 2) how you could apply this process in future projects

[msudenver-cwi-sp15]

Icon Bar, an alternative to Top Bar

If you’re prototyping a mobile app, there’s a good chance you’ll want to use Icon Bar instead of Top Bar. I couldn’t find a video tutorial for it, but if you watch the Top Bar tutorial (video link in the last post), and read the Foundation documentation, you should be able to figure it out, you smart person, you!

[msudenver-cwi-sp15]

for Mon 4/27

Your mission for this Monday is to play around with Foundation for a minimum of 2 hours before the start of class. (The tutorials below should take you 1–2 hours, depending on your own speed.)

I want you to become comfortable with Foundation setup, the grid, and 2 global navigation options. Below are some good places to start (some of which I’ve posted before—watch them again and follow along!).

First, here’s a really clear 5-minute video tutorial on just how the grid works.

Second, read about setting up your javascript links in the HTML < head >.

Third, follow along with 1 of these 3 overview videos – 

Responsive Websites with the Foundation 5 Grid (video): This one is a bit slower than the next and doesn’t include any images, so it may be easier for you to follow (type) along with it. The tutorial covers using the grid system + a custom stylesheet to create an HTML wireframe. It also touches on the HTML 5 elements header, footer, article, and aside.

Foundation 5 Introduction (video): This one moves a little faster and includes images, so it may be harder to follow (type) along with. It explains the file structure and the Javascript ‘<script>’ links. It explains how the math for the 12-column grid system works (in case you’re still confused about that). In it he creates a simple page that includes text, images, and the Foundation Top Bar navigation UI component.

Zurb Foundation Grid (video): The dev is a little goofy (in perhaps a charming way), but his tutorials are pretty comprehensive. The first part in his series covers Foundation setup, the grid, and navigation. Keep in mind that he’s using the nifty Emmet plug-in that I showed y’all a couple weeks back. (You can too, if you’re feeling adventurous!) Correction: He’s using the Jade templating language, which works similarly to Emmet but may be a tad more complex.

Fourth, follow along to create some navigation:

Here’s a 21-minute video tutorial on just implementing the Top Bar Navigation.

Here’s 5-minute video tutorial on creating responsive navigation.

If you make it through each of these 4 sections, you should feel pretty comfortable with using Foundation! We’ll discuss in class on Monday.

[msudenver-cwi-sp15]

Familiarize yourself with Foundation

Watch the first part of this video series to learn about how Foundation works! The dev a little goofy, but his tutorials are pretty comprehensive. Keep in mind that he’s using the nifty Emmet plug-in that I showed y’all a couple weeks back. (You can too, if you’re feeling adventurous!)

[msudenver-cwi-sp15]

for Wed 4/22 (part 1)

At the start of class Wednesday, please be prepared to hand in (via email) the following 2 documents as PDFS:

1. Your Discussion Guide (v2) that you used today for your usability test (blank, sans notes). Include your name, class name, and date (4/20/2015).

2. Your Usability Findings and Recommendations Report. Please follow this outline:

cover page: include your name, title: “Usability Testing [app/product name]”, date, awesome photo/ action shot from usability test)

high(er)-res photos of your paper prototype (If you want, you can pair these with the corresponding tasks.)

intro to your product app: purpose, audience) - minimum 1 paragraph

goals of the test - minimum 2 numbered bullets

taskflows and/or tasks being evaluated in usability test

what you heard: summarize impressions and key findings for each participant (3–4 sentences per participant)

photo storyboard (3–4 photos) of action shots, ideally from the same test. You can use the video you took to grab stills.

what it means to you: analysis and synthesis of key findings based on what you heard (1–2 paragraphs)

your recommendations for design revisions or refinements (min. 1 paragraph)

your personal reflection on the paper prototyping & usability testing process (2 paragraphs)

Note: Once you’ve completed the above, please (re)familiarize with Foundation’s Docs and Kitchen Sink. (You can skip the part about SASS.) I’ll post a couple tutorial videos soon.

Heads up: Scans of your process to this point will be due Monday.

[msudenver-cwi-sp15]

reading: Prototyping ch06

Now in Dropbox, chapter 6 of Todd Zaki Warfel’s book, Prototyping, has a lot of photos, tips, and tricks for creating a crafty paper prototype. Check it out.