Contact Us

Use the form on the right to contact us.

You can edit the text in this area, and change where the contact form on the right submits to, by entering edit mode using the modes on the bottom right. 

           

123 Street Avenue, City Town, 99999

(123) 555-6789

email@address.com

 

You can set your address, phone number, email and site description in the settings tab.
Link to read me page with more information.

DeW 2014

Work - Blog

DeW 2014

Abhas Sinha

DeW (Design Workshop) is the annual inter-disciplinary design workshop and symposium organized by IIIT Jabalpur and the Ministry of Foreign Affairs, Japan.

Every year, DeW focuses on a new theme, and is home to talks from industry specialists on the importance and growing inclusion of design in the professional world, and to numerous workshops, where attendees and participants (who are from diverse fields) get hands-on experience on areas such as user interface design, product design, visual communication amongst others. 

For the 2014's DeW, I worked in a team to develop a visual identity on the prescribed theme "user centric design." The idea was to create an identity that was aesthetically very simple, yet colorful. 

The DeW color swatch.


The DeW color swatch.

Some of the earlier "doodle" icon concepts.


Some of the earlier "doodle" icon concepts.

We developed doodle-esque iconography, and chose colors from the CYMK swatch and the Indian flag. A special teal was prescribed for the DeW logo highlight as a digression from the warm colors it had previously been associated with.

Click on the image to view the website.


Click on the image to view the website.

A culmination of these efforts can be seen the Dew 2014 website (http://dew2014.iiitdmj.ac.in). 
The website was hand-coded using HTML and CSS. And teeny bits of jQuery.

Background and Iconography

I had received prescribed content for the website, after which, the first step to making the website was to lay out the sitemap – which page should have what. Under the mentorship of my professor, Dr. Jayesh Pillai, we decided to have a unique navigation style that would place the pages as a fork in the road at first go. 

We decided that the page for registering for DeW and the page for registering to participate in the Student Design Challenge should be of prime importance – so they had to be relatively bigger. The other sections dealt with the schedule of the event, about the event, and a page that would allow communication. I came up with the following layout based on importance, the icons designed, and the color palette.

icon-clouds.png

The navigation model was designed to be very distinctive. I started with the idea that it was floating in the sky (representing the sky in Jabalpur, where the host is located). 

Typography

For typography, we chose rounded display fonts – "Multicolore" and "Hero" – to match the iconography; the former for headings and all-caps labeling, and "Hero," for secondary body text, and wherever lowercase was required. This was chosen as part of the identity

For the website, I worked with "Multicolore" for labels and icons, and the overall font for the website was "Open Sans."

Concept Generation

Visual Feedback – CSS Animations

Another distinctive feature of the website was the way the main navigation provided feedback to the user. Hovering over an icon brought about keyframed animation – filling it up with "material" (akin to Google's Material Design). 

Each of the icons was animated by drawing a separate frame (10-13 frames each) which would be played in a span of 0.3 seconds. 

Frames from the "Register" icon

Frames from the "Register" icon

The underlying method to do this was to make the icon play like a filmstrip on hovering, using the same principles as, well, a filmstrip.

 

Try hovering over the icon

 

Images and Consistency

In an attempt to maintain site-wide consistency, every page has a header 300px tall, 100% wide. (1000px). In a similar fashion, the website displays images (still or as a slideshow) with the same dimensions – used as separators or to elaborate upon the content. 

And that's that I guess. Hope you have a look at the site and you like it! :)