Design Challenge
Exploring Obscure UX: Sketch to Web
As a design challenge for Wonderland, I was given two hand-drawn sketches to turn into interactive designs in just two days.
Specs
Context
Design Challenge to make geometric sketches interactive | Wonderland | Winter 2016
Creative(s)
Victoria Flores
Process
Brainstorming > Sketching > Ideation > Technical Research > Wizard-of-Oz Prototyping > Implementation > Iteration & Usability
Tools
Illustrator, HTML, CSS, jQuery & D3.js
Approach
For both sketches provided by Wondelrand, I began by ideating how the designs might lend themselves to interaction. I re-sketched them to find simple ways of breaking down their geometries, then did technical research to find ways in which I might functionalize them with code. Many of my ideas would take too long to perfect (design and code) in 4 days time, so these are an example of time constrained design.
Deliverable(s)
CodePen Implementations of both sketchs.
Sketch #1: Process
I first created a vector version of the graphic to understand its form. I found multiple ways in which I could form the shape but most would be overly arduous to code and breathe life into. Then, I realized the hexagonal form was made up of overlapping Escher cubes. From this, I found css3 transforms would be a great option to recreate the form for interacton.
Extrapolating Geometry
Sketch Asset Provided
Finding Forms Within
Assembling 'Escher' Cubes
Sketch #2: Process
After seeing the sketch, and taking it apart visually, I discerned that the circles were partitions of larger circles of rays. To illustrate the 'obscured' theme, I decided to illustrate the invisible lines making up the image-- to show how something that might seem complex is actually part of a simpler figure. Next, I aimed to have the partitions demonstrate their interference in rotation (added bonus with complimentary colors crossing one another).
Extrapolating Geometry
Sketch Asset Provided
Finding the Partition
Identifying Overlap
Wrap-up
This sketch-to-web project was a challenge in many ways. It was my first time out of college working with web languages. With only four days to concept, design and implement a solution I found it tricky to prioritize. Anything I could 'concept' might take too long to finesse visually, anything I could design might take too long to code, and any new libraries might take too long to learn its quirks and work out the quinks.
For the Escher sketch, I spent a considerable amount of time working with voice input... which proved to be very hard to calibrate responsiveness. In light of this, I decided to optimize simplifying the concept of showing what was hidden or obscure about the graphics.