Meta Refresh 2014

On the construction of user interface on the web

CSS 3 Animations and Transitional Interfaces

Submitted by Raghu Nayyar (@raghunayyar) on Nov 27, 2013

Section: Crisp talk Technical level: Beginner Status: Confirmed & scheduled

Abstract

The main objective of the talk to give the audience an idea about one of the most important aspects of web design, transitions, and how they can be used to enhance the information architecture and flow of a web page.

Outline

CSS(3) animations have always been considered as a treat to the eyes if used properly but how about collaborating it with some JavaScript to make something amazing.

Say, if a user clicks a delete button, a span of elements, just vanishes? How about making it slide out or disappear relatively slow? Neither information is literally thrown at a user nor snatched away from him. Infact, such transitions can provide context to information and hence enhance the user experience.

I will be talking about how to effectively use transitions in simple events like onhover or onfocus to slightly complicated ones like seamless appearances/disappearances, movement within an application. The mathematics behind CSS 3 Animations and how to use them can also be a included if time allows.
This will help to bridge the line between the user experience designers & developers and help them give users something out of the world.

Requirements

The talk will deal with the basics of how transitional interfaces are built. For that, basic knowledge of HTML, CSS, CSS3, JavaScript(jQuery) will definitely help.

Speaker bio

I am Raghu Nayyar, a 21 year old Interaction Designer and Front-end Developer currently busy writing code with some really amazing Open Source Projects like ownCloud, Diaspora(Frontend and Interaction Design), openSUSE. I have been working with HTML,CSS and JavaScript for almost an year and a half now.

Links

Comments

{{ gettext('Login to leave a comment') }}

{{ gettext('You need to be a participant to comment.') }}

{{ formTitle }}
{{ gettext('Post a comment...') }}
{{ gettext('New comment') }}

{{ errorMsg }}