core interaction

think interface

4_23 Final Exercise

Resources

Take a look at these examples:
beyrouth collection
wires

Study the JQuery Easing Plugin

Exercise

Use the templates provided in class and add a background image to the site plus 5 images with transparent background in each section. Add text if you want. Upload everything to your studio account by Wednesday April, 25 before class


Beyrouth Collection by Nour Kays


4_16 final project

Option 1

Create a website that explains a simple scientific or cultural phenomena in an accessible and “infotainment” way. You are free to chose the topic/content and you might use HTML 5 to spice up the user experience. Make sure you learn enough about the topic to be able to create a decent information architecture. Think about storytelling and learning outcomes.
Final: functional prototype, technology: HTML/CSS
April 23: Present your idea by using the elements you have learned in class: mind map, mood board, case studies, scenarios, stakeholders, personas, wireframes, …
May 14: Final presentation

kinetic: what is life?
digital invaders
Eames: Power of ten
Theo Jansen: strandbeest
tokyu-agc
Analog mapping
Travel diary by Carine Teyrouz

How stuff works: Fat-cell
How stuff works

Option 2

Create an app for a virtual museum that has no physical counterpart but is depending on the participation of the user. This can also be understood as an archive of images that is build by a community but also offers curated (online) exhibitions, ratings, social networking elements… You are free to chose the content of the museum (street art, architecture, people,…) the more specific you are the easier it will be to design the front-end. Think about the situation the app is used in, mobility, storytelling. Plus at least a one page website.
Final: functional prototype (interactive PDF, Flash) for the app, 1 page website: HTML/CSS
April 23: Present your idea by using the elements you have learned in class: mind map, mood board, case studies, scenarios, stakeholders, personas, wireframes, …
May 14: Final presentation

What the face
Streets are saying things
1001 Stories of Denmark
Museum apps for the iphone

Option 3

Create the interface for a site-specific terminal that provides information about an NYC landmark or point of interest. Gather all available information about the sight and come up with an information architecture that fits the user need in that specific moment (Public Information Kiosk System).
Final: functional prototype (interactive PDF, Flash) for the app, 1 page website: HTML/CSS
April 23: Present your idea by using the elements you have learned in class: mind map, mood board, case studies, scenarios, stakeholders, personas, wireframes, …
May 14: Final presentation

LIBRARY OF CONGRESS VISITOR EXPERIENCE


4_11 Parallax

explore this

Silicon Valley is desperate for designers on CNN money

Momentary and temporary trends in webdesign: parallax scrolling, new becomes old within months. One of the first: http://www.nikebetterworld.com/about New: http://www.nike.com/jumpman23/aj2012/

More samples of parallax scrolling on webdesignledger

Parallax tutorial and sample files

One more time: Saving Images for the Web by Joshua Johnson

Tutorial: Creating animated gifs for the web

Slides: a slideshow plugin for jQuery

do this

I uploaded two short movies to coursekit that explain again how to prepare and optimize your images for web usage. See both movies and then optimize and integrate all pictures to your website.

Exercise 5
Use HTML and CSS to markup your redesigned homepage with all functional areas (navigation, logo, teaser, content, search, social network, …) in a wireframe style. Add the menu and copy text.
Make sure this is uploaded to your account by Friday 12.00pm

For Monday
Finalize your webproject. You can have a final critique on Monday. FINAL deadline will be April 20, coursekit upload.



Old technology that still makes sense. Animated gif by davidope
Follow on: tumblr

4_9 Soul and Details

explore this

Simple color picker by w3schools

kuler by adobe

Create a tiled background with background generator

The Comprehensive Guide to Saving Images for the Web by Joshua Johnson

Check your design in several browser window sizes

YOUR DAILY DOSE OF UI INSPIRATION

do this

There are two online readings to be worked through for Wednesday: Give your website soul and The elements of navigation.

Exercise 5
Use HTML and CSS to markup your redesigned homepage with all functional areas (navigation, logo, teaser, content, search, social network, …) in a wireframe style. Add the menu and copy text.

For Wednesday
Print your homepage and 3 subpages. Make sure they are up the wall before class starts.



The world map displayed within the Data & Time system preference panel changes with the seasons.
Source: LITTLE BIG DETAILS

4_4 Breadcrumbs & Co, Grid and Navigation

explore this

Pattern library compiled by welie.com

Huge collection on flickr

Design Pattern Collection by yahoo

Khoi Vinh – on the grid

960 Grid System for the web

Mark Boulton on grids for the web (The article is written 2005 so the 600×800 is not what you should design for. But the concepts are still the same)

GuideGuide A helpful little tool if you work with photoshop

To take screenshots of a whole website you can use paparazzi on a mac or browsershots.org

do this

Visit the core interaction tumblr website again and re-check all posts related to web typography. Some might be a good inspiration for your project.

Revise the design for the homepage and the template for the section page.

Set up the grid for all pages and bring it printed for the lab session on Monday.


The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropiate to his personal style. But one must learn how to use the grid; it is an art that requires practice.
JOSEF MULLER-BROCKMANN

4_2 Common Sense/Web Usability

explore this

www.sensible.com website of Steve Krug (Author: Don’t make me think)

What are webfonts?

Current status of browsers supporting webfonts

Video: Typekit tutorial: What are web fonts?

Google web fonts (open source)

Typekit (commercial)

do this

Exercise 4:
Chose a font from the open source google web font list that you find decent for the headlines of your web project. Design a background texture and combine both with a letterpress effect as demonstrated in this tutorial Upload this to your studio account. In general typo effects should be used only selectively. Consider this as an exercise and nothing you HAVE to use for your project later.

Download the new reading on COURSEKIT: Steve Krug, Don’t make me think. Read chapter 1, 5 and 6.

Revise the homepage for your web project as discussed in class. Add ONE chapter page and bring both PRINTED to class on Wednesday.


3_28 Typography, typography and typography

explore this

Khoi Vinh gives a talk on Wed, March 28 at PARSONS 6:00 p.m. 2 W 13 Street, 10th floor loft. Check his website and his project Mixel

Comprehensive: Thinking with Type by Ellen Lupton

Useful Traditions: Web safe fonts

Remember to appreciate the details. The Kerning Game

And the base to connect everything: The Grid System

do this

TUMBLR
Read these two articles on typography and the web: 1. A list apart, by Jason Santa Maria and 2. A Guide To Web Typography on ILoveTypography. Select a website that uses typography in a way you like and evaluate it (must: contrast, size, hierarchy, space – use other categories if you want) Put a screenshot and a 100 word essay on the tumblr site. Places to start looking for a site: www.grid-based.com or sexy serifs on the web (line 25)

YOUR PROJECT
Design 3 alternatives for the homepage in Photoshop. You can go into 3 different directions if it makes sense. Make sure the width of the page stays below 1024 pixel and that important aspects are within the 768 pixel height. Compile the three alternatives in one PDF. We will meet in the same lab as last week on Monday! (see below)


3_26 The Box Model

explore this

The Box Model

Tutorial to learn the positioning of the DIVs with CSS

CSS Reference

How to center content in the browser window

Test your web safe fonts

Web Developer Toolbar for Firefox and Chrome

do this

Use HTML and CSS to create a wireframe of the existing NGO website. You might use shades of grey instead of black outlines if you prefer. Upload the wireframe to your studio website.

Read this article and evaluate the existing website – especially the homepage. Think about ways to improve the information architecture and the layout. Be prepared to talk about it in class on Wednesday



The Box Model.
Source: w3schools

3_21 Non-Profit

do this

Finalize your work on project 2. Submission is on Monday, March 26 – as the PDF will include your mood board you should not link it to your account but give it to me during class.

Find a website of a Non-Governmental-Organization / Non-Profit-Organization that you will re-design for project 3. Take a screenshot of the homepage and two other pages and save these! The website might change during your work period. Analyze the existing homepage and draw the wireframe of it. Bring this to our lab session on Monday in lab D701 (East 16th Lab 6 E 16th Street, 7th floor, Building D)


3_19 Identifying Archetypes

explore this

The new iPad 3 Retina display

do this

Reflect on the critique you received during class and make sure you design all the details in a consistent way. Read chapter 16 of “Designed for Use” about consistency. Focus on having the same visual appearance, aligned positioning (use your grid) and the same behavior throughout the app.

Print your screens/wireframes for a final critique on Wednesday


Consistency is the agreement or harmony of parts or features to one another or a whole.
Merriam Webster Dictionary

3_7 App Visual Elements

explore this

Everything spring break has to offer

do this

TUMBLR Interface blog
Download the Reading “Emotional Design” by Donald Norman from the courskit site. Required reading: pages 21 to 24. You might want to sneak around the following pages too. Upload a picture of an interface (ticket machine, mobile app, website, object, any other device) that you encounter during spring break for the very first time. Take what you learned from the reading and describe your reaction towards the interface talking about the three levels of processing: visceral, behavioral and reflective.

Select one screen of your app that includes the menu and any important function. Design 3 alternatives for this screen. Of course you have to follow your branding but you might play with background colors/patterns, shapes, font details, system buttons vs your own buttons. Save the three alternatives on a one page letter PDF.

Save all wireframes in another letter PDF – you might use as many pages as you need.

Send both PDFs to my newschool address before Monday, May 19 – 11am


Three Levels of Processing: Visceral, Behavioral, and Reflective
Emotional Design, Donald Norman

3_5 iOS Wireframing & Design

explore this

There are different techniques to wireframe but common sense is the usage of black lines (squares, boxes, arrows, type,…) on a white background. The final design proposal can be shiny and polished. This is a good example

Simple minimal tutorial to design iOS buttons with Photoshop

NYC BigApps

do this

Create one PDF with 2 pages and send it to me before Wednesday 11 am.
First page: Your mood board
Second page: 2 different screens of your app in the suggested final design (same design for both screens)

Also bring the outcome of your app test.




2_29 iOS User Experience

explore this

All elements for the iPhone Retina display in a psd template

Movie about the Vimeo app that uses a timeline and editing

Screenshot of the fb timelineversion for iPhone

The developer library for iOS by Apple provides a lot detailed information.

Make sure you check the design patterns for the iPhone on http://pttrns.com/

do this

Print for the next session:
Mood board and logo trials for your app
Sketch all wireframes and add the action of your choice
Revise the tangible interface

Read chapter 13 and 14 of Designed for Use


2_27 iThink

explore this

The best way to start your wireframing for the app is to simply take pen and paper. In case the white letter format is bothering you in the beginning you can try these templates (simple iphone outlines) iPhone templates by “full of design” and iPhone templates by “interactivelogic”

Both – wireframes – and final design have to be based on a grid. For example this Photoshop template by Andy Stone

The combination of a mobile app with a gadget: Jawbone UP. Though it fails it brings up interesting aspects on improving the experience. Nike has another trial of the same concept.

do this

Revise the tangible interface and the branding for project 1 and bring prints to the next session.

Read chapter 12 of “Designed for Use”

Install a peer-recommended app and test it. Think about user experience and usability in general but consider also details like icons, buttons, grid, fonts, colors. Bring at least 3 screenshots and be prepared to give a 5 min presentation.


2_22 Tangible Interfaces

explore this

Jeffry Shaw: The legible city

Camille Utterback: TextRain

Sommerer/Mignonneau: NanoScape

Milk and Tales: Gamelan Playtime

Reactable

Sifteo cubes

Loop loop for Sifteo Cubes

Henry Markram builds a brain in a supercomputer on TED

Brain-to-brain communication over the Internet on gizmag

do this

In 20 years from now an app will allow us to upload, edit and share our brain. In your 2.project you will design the user experience of uploading and editing/sharing your memories (on a mobile device). The detailed briefing will be distributed on Monday Feb 27.

Create a storyboard that describes the process of uploading a digital copy of your brain. If you use any device for this use photoshop to design a mock-up – think of affordances and feedback. Think about a name for this app and sketch first ideas for a branding. Bring all items printed (min size letter) to class on Monday.

Upload a screenshot of an iphone (or android) app to the tumblr site and describe why this is a good interaction design. Reading this article about mobile app design on mashable will help you.

Finalize the work on Project 1.


“The winners of the first-ever Interaction Awards, recognizing 26 projects from all over the world for their excellence in interaction design. The criteria for evaluating the entries were based on context, impact, craft and overall presentation, and selected by an international panel of Jurors.”
IxDA Interaction Awards 2012

2_15 (Paper) Prototype

explore this

For your Core Interaction Homepage: Listamatic

For your paper prototype: Using InDesign to create an interactive PDF

do this

Design and upload your CoreStudio: Interaction homepage to your parsons account. By now you will have two menu items or entries: A link to “Envisioning Information” and “Wireframing The NewYorker”. Both links will lead to an extra page with only the images. Make sure you use .jpg or .png and the size of the images is not larger than 1024 pixel width.

Use your mobile phone cam or your digital cam to take a picture of a physical button that you 1.like 2.dislike. This can be switches, door nobs, buttons on sound stations from the seventies, your gas stove in the kitchen. Just physical. Post both into the category “buttons” on tumblr and state BRIEFLY why you like/dislike what you post.

Read chapter 11 of Designed for Use

Finalize the work on Project 1.


It doesn’t really matter if you do your paper protoyping digital or analog – but it is very important to be clear about the task that you are going to test. Do not make the mistake trying to test the whole website. Make sure you define a specific assignment to the test user.

2_13 Wireframing

explore this

1.Sketching // 2.Wireframing on slideshare

Samples to explore – not all are wireframes but somehow related.

Even though there is no sharp definition how to do the wireframing there are some aspects of common sense. Pulled together by fuzzy math

do this

Use pen and paper – absolutely no other tools! – to draw a wireframe of these two pages. Use a letter format, if needed attach a second page to it. 1.The New Yorker Homepage, 2.The New Yorker Article

Continue the work on Personas, Interviews and Card Sorting.


2_8 Affordances

explore this

Design Research Project by frog Masiluleke

IDEO work portfolio

do this

Revise your exercise1 and send me a PDF on or before Feb 12.

Read Chapter 9/10 of “Designed for Use”

Read “Affordances” taken from “The Design of Everyday Things” by Donald Norman (on coursekit)

Upload an image of an interface to core-interaction.tumblr.com that shows clear affordances and in 100 words how your image relates to the text of Donald Norman.

Continue the work on Personas, Interviews and Card Sorting.


A good designer makes sure that appropriate actions are perceptible and inappropriate ones invisible.
Donald A. Norman
The Design of Everyday Things.

2_6 Creating Usable Hiearchies

explore this

Elements of User Experience Design by Jesse James Garrett

More Card Sorting techniques on Boxes and Arrows

Card Sorting in the Design Process

do this

individually: Read Chapter 1/3/7/8 of “Designed for Use”

Revise your User Experience/Infodesign exercise and bring it printed (min letter) to the next session

As a group: Create 1 Persona and find questions for interviews.



Source: Streets of Beirut

2_1 Envisioning Information

explore this

Find “Overview of milestones in information mapping”and the first chapter of “Envisioning Information” by Edward Tufte on coursekit.com. Use the code provided to log in

ISOTYPE by Neurath/Arntz

Play with these two interfaces: SlaveryFootprint and Kinetic

do this

individually: Take statistical data about New York that has a social relevance. A starting point might be: Facts about Being Homeless or Alzheimer. Any other topic you find relevant is ok. Decide for numbers&facts that you want to spread – make sure you have at least 3 different numbers you include. Design the experience of how these are communicated to the people on the streets by using the whole urban “canvas” that is available. Create a simple mock-up in Photoshop and bring this printed to class on Monday and send me a PDF before class.

As a group: Gather in a group and think about a topic that is related to the improvement of sustainable living in NY. At this point you only have to collect ideas withtout details.
Visit the following links to see services that connect to facilitate sustainable living: Tap it Water, Fareshare NYC, Netgranny

Buy your copy of our textbook “Designed for Use” (see Syllabus for details)


1_30 Memex & Xanadu

explore this

5 Lessons / Report from the Interaction Awards 2011

Apple Lisa Commercial

Ted Nelson

Vannevar Bush

His article “As we may think”

EauDeJardin by Sommerer & Mignonneau

do this

create your own tumblr blog and send me the link so I can follow you. Think about an Interface that you really like. This can be the interaction with an object, a situation or any other thing you can think of. Post a picture if this to the class tumblr blog like demonstrated in class and write in 100 words why you like this interactive situation (material, process, colors, easiness, …)

Buy your copy of our textbook “Designed for Use” (see Syllabus for details)


Interaction Design is not limited to screens but permanently existent. Raise your awareness for situations and moments that were designed to make your life “just nicer”.