Project: Designing and developing for TEDx
In November 2016, I was asked to be a part of the tech team for an upcoming TEDx event in my university. Below, I attempt to summarise my endeavours to create innovative designs for the event.
Task 1: The coming soon page
My first task was to design an interactive coming soon page for the event website. The page could only contain the name of the event i.e. TEDxDTU. To develop a page that piques the viewers for the upcoming website, I had to think of a creative and interactive idea to showcase the event name.
Concept and execution
Going through the TEDx logo guidelines, I realised the importance of the ‘x’ in the logo. The idea was simple: I planned to reveal the logo following the unified system for TEDx logos as the user places the ‘x’ on the stencil image.
It was formulaic that I chose the colour scheme with only red, black and white. To establish the interactivity, I replaced the mouse movement of the cursor with a hand with the letter ‘x’ from the logo. As the mouse hovered, I made the stencil pop up, to indicate that the object had to be clicked. A help text was added at the top to guide the user. On clicking the stencil, the ‘x’ was placed at the logo and the hand animated down the screen. With a delay of 2 seconds, the background transitioned to white as the logo turned into the bright red colour of TEDx while revealing the name of the university. Below it, as per the guidelines, came the subtext, revealing the complete logo and the essential “Coming Soon”. I added the social links for the event for the users to follow the event on social media till the main website was setup.
Task 2: The theme reveal
The more engaging task I received was after a month while working on the main website. Our organising team had decided that the theme for the event would be “Because grey matters”. The team decided to reveal the theme for the event to the interested participants (mostly students from various colleges around Delhi) on social media and to create a theme page for the website. I had to conceptualise, design and code the webpage for the theme reveal. Again, this had to be done to engage and intrigue users about the theme.
Concept
The theme seemed really captivating. Grey matter had always been a topic of my interest and the wordplay of the theme gave me a lot of creative ideas to showcase it. A while back, I watched a TED-ed video about ‘The neuroscience of imagination’ where I learnt that our brain thinks of words and ideas by the synchronous firing of neurons. I used this concept to create a relevant and engaging experience for the users to reveal the theme. I hadn’t thought that the video would help me in real life while watching it, however, I realised the cogency of this statement:
You can only connect the dots looking backwards — Steve Jobs
The idea was to design the inside of a brain with various particles that represent neurons. The user would have to connect five neurons to unveil the theme. I thought of creating an interface to show the user that we are entering his/her brain to discover the theme. Each time a neuron was found, a few letters from the theme would appear. Having an easy and aesthetic interface was extremely important for the implementation of this idea.
Execution
The page starts with a little play button. On clicking play, the screen slowly fades to the tutorial. I added small one line sentences in the tutorial to clearly explain the objective and to give an intuition for the theme. After the tutorial ends it fades to the inside of the brain.
I used canvas and particle.js to create the particles. The mouse move was adjusted to link and bubble the particles. It was crucial to make the mouse movement as impressive as possible. I wrote a few lines in JavaScript to move and rotate the particles with the cursor to produce a 3D perspective.
Eight nodes were generated randomly using my script that would glow yellow when hovered. An SVG generated line was added between two nodes as each node was discovered. I used the dash array and dash offset property of the lines to create a glowing spark effect that connected the two nodes. To simplify the experience, the nodes were set to glow every ten seconds revealing their position. As five of these nodes were discovered, the final pattern produced was preserved with the theme written on a translucent black background.
With the mission of TED in mind— “Ideas worth spreading”, I wanted to document (and share) my pursuit of making artsy, albeit somewhat pretentious work for this event. Shout out to the tech team for allowing me to experiment my bizarre ideas.
Link to the theme reveal website: http://abhinavthukral.in/lab/tedxdtu-theme/
