My Final Site! Project #2

http://web.pdx.edu/~jakouka/ART%20342/popsnap/

This is Popsnap! A site meant to mimic the feel of opening an unexpected package. This always follows the process of finding the box, opening it up, popping the bubble wrap (of course, and finally finding out what’s inside.

The site is relatively responsive, though the media queries were all handled by plug-ins. Links at the bottom will send you off to purchase an item you found!

Thanks for checking it out!

Jordan

What I’m working on!

Currently working on a new aesthetic direction for my project 2. I couldn’t get the photo-realistic direction to look decent without looking tacky.

Since I’m trying to develop a site, optimized for smartphones, I’m using a lot of jquery mobile plug-ins like Menu (menu slide-out to look at your collection of items) Jquery Flip (Photo-flipper). Device.js (which detects what orientation the phone is being held in)

Thanks!

My Directions!

I love bubble wrap. It’s tangible and is incredibly satisfying. My first idea involves the unpacking process of opening a box, going through it’s bubblewrap and finally revealing an object or toy to play with. It will involve photorealistic assets and hopefully be deployed on a smart phone to make good use of it’s touchscreen.


Directions-02 Directions-03 Directions-04Directions-01

My other idea involves the feeling of playing with simple toys as a young child. I’ve based it around a toy box that you get to open and interact with the different objects inside. There is also a simple game mode in which you are timed to “properly” interact with each toy. This could involve pulling a car back and release to make it go or releasing a yo-yo. Drawing with crayons, etc. Again this is going to be deployed on a touch device.

Directions-05 Directions-06 Directions-07

Jquery Research

Chartist

This would work well for showing facts of the planet. (especially over time)

stickUp

I may be able to use this to navigate to different frames in the main animation.

jBox

This would work very well to allow the user to investigate elements further by mousing over or clicking. I’d love to reveal more about a specific element to include more levels of information.

Vide

Full-screen video plug-in. I may be able to use parts of this to play and stop the video at specific parts.

Impress

The 3D elements may be used to create the illusion that the text is part of the animation/video in the background.

Move.js

This would work well to track the parts of the video/animation that need to be called-out.

Hopefully I can put some of these together to create something pretty neat.

Mock-ups!

Extending one of my topics to include space!

The first concept involves using the scrollwheel to progress through footage (scrub forward and back). Call-outs will appear with the option to click on them to reveal more information.

Untitled-2-01 Untitled-2-02 Untitled-2-03 Untitled-2-04

The second concept involves a rotating earth (again controlled by the scrollwheel (or arrow keys) As the Earth rotates call-outs will be revealed allowing the user to investigate closer.

concept2-01 concept2-02

The third concept is a simple scrolling website in which photography fades in and out while paragraphs of text slide in to educate the user on what is being shown onscreen.

concept3-01 concept3-02