Tutorial - Design and Prototype for the responsive web (APCHI 2013, Bangalore)

5 Sep 2013 - 1:41pm
2836 reads

Apologies for cross posting. 

Call for participation in the tutorial for designing and prototyping for the responsive web being conducted at the 11th Aisa-Pacific Computer Human Interaction conference being held in Bangalore, India. 

Crowne Plaza, Electronics City Bangalore: Tuesday, 24th September


Design and Prototyping for the responsive web

Sketch.Design.Prototype - The responsive way

Learn about fundamentals of responsive web and mobile first paradigm through real life implementations and hands on prototyping. The tutorial introduces and makes a case for a prototype driven approach for responsive environments using open source web frameworks like Foundation and Bootstrap. We will discuss challenges involved in designing for the responsive web along with participants' experiences while designing responsively. You will learn strategies for quickly iterating ideas through rapid sketches and subsequently converting them to a flexible grid based design and prototype.  

With the fast growth of internet enabled devices capable of displaying the full web, designing responsively is quickly becoming the new standard in web design and development. With the fast adoption of modern web standards across all the major browsers, responsive design is no longer a strategy for niche and small scale design and development. It has been successfully used across business domains like news sites (eg. Time Magazine and Boston Globe), e-commerce (eg. Hiut Denim, Starbucks) and even corporate websites (eg. Microsoft, KiwiBank).

This is a hands on tutorial, broadly broken down into two sessions. The first would introduce the participants to the fundamentals of the responsive web and examples of real life responsive web implementations along with a discussion on the mobile first paradigm. We would then take an illustrative example of a web application and create concept sketches along with the participants. We would start the second session of the workshop with a discussion around interaction design patterns centered around the responsive web followed by a discussion on development of a grid system for a responsive web application. The concept sketches developed by the participants would then be converted to a grid based block diagram followed by a 2-3 screen mockup in a live coding session.

Tutorial Format

Session 1: 4hrs
Intro to Responsive Web - what, why and how, Examples of successful Responsive Web Implementations (1 Hour)
Intro to Responsive UX Prototyping - Mind mapping, Mobile First, Responsive Frameworks (2 Hours)
Sketching Ideas (Concept Sketches, Detailed Sketches, Condensing Ideas) (1 Hour)

Session 2: 4hrs

Dive into Responsive UX Prototyping - Interaction Design Strategy and Reviews (45 Mins)
From Sketches to Grids (1 Hour)
Block Level Prototypes and Grid Validation (30 Mins)

Prototyping components and pages (1 Hour)
Device Deployment Tricks (Actual Device Previews and Testing), Starting With the Visual Strategy, UX and Responsive Web - challenges and opportunities (30 Mins)

Q & A, Feedback (15 Mins)



This tutorial is meant for practitioners as well as project managers who deal with responsive design projects and workflows within their teams. The primary goal is to familiarise and discuss a hands on approach to mobile first responsive design - without getting overly technical and detailed about UI development. The tutorial hopes to attract experienced interaction and visual designers, project managers and people with a hands on bent  interested in getting their hands dirty with user experience and prototyping basics (Basic HTML familiarity required).


Tutorial Conveners

Sumit Pandey is an UX Designer at Clarice Technologies. He is a designer and engineer by training and a hacker at heart who loves tinkering with all forms of technology and building things that move, light up and delight. http://in.linkedin.com/in/sumitpandeyg

Milind Sonavane is an UX Design Lead at Clarice Technologies. He is an experienced designer and a budding developer. He loves breaking anything and everything into grids and geometry. http://in.linkedin.com/pub/milind-sonavane/5a/415/1a5

To attend the tutorial, please register at: http://in.eregnow.com/ticketing/register/APCHI2013

More information about the conference: http://www.apchi2013.org/

Syndicate content Get the feed