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.
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.
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.
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).
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."
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.
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! :)