Brief applied to a design context

Supra Footwear Brief

Introduction/Background

In the US, the boom of signature basketball shoes in the late 1980’s provided the sheer variety necessary for a collecting culture, while the Hip-Hop movement gave the sneakers their street value as status symbols. These sneaker collector’s are also know as Sneakerheads are people who own multiple pairs of shoes as a form of collection and fashion, this culture is fueled by an obsession with limited edition releases and rare retro shoes.

Another catalyst to the cult following of this culture would be the increase popularity of skateboarding in the 90’s to the present, creating a demand for new styles and extra durable footwear.

Supra Footwear (meaning “above and beyond” in Latin) was launched in 2005 by Angel Cabada an avid skateboarder from California; under the umbrella company One Distribution.

Assignment Brief

You have been commissioned to develop an media rich online gallery for the company Supra Footwear. The main function of this gallery is an interactive web experience that will create brand/product awareness. The designed interface must align with the Supra Footwear brand presence and be easy to navigate thought whilst being visually engaging.

Specifics

Target Audience
Supra shoes are collected and purchased from a vast majority of people, However our preferred audience are males aged between 16-38 years old, who embrace the skate and sneaker culture.

Style/Tone
The aesthetic style of this project must reflect the hip-hop and skate sub cultures while retaining the professionalism of the Supra Footwear brand.

DJ Premier + DJ AM

Some insight into the sneaker culture
">">">

Papervision3d Tests

I have recently look at what is necessary to create a scene in papervison3d, this includes a scene, a camera, a viewport, 3D objects, Materials, and a Render Engine. These and the left hand cartesian coordinate system has helped me understand how
3d objects can be used in a 2D environment like flash, but still create the illusion of 3D. After understanding how vertices and triangles form 3d shapes, i started to create my first primitives that rotate in papervision3d, these are the basic building blocks of 3d objects in PV3D and may seem very basic to other 3d programs but this is just the beginning of my development with PV3D.

Beginning Of Papervision Research...

Today i started my research into Papervision3D 2.1 revision 920. This started with the initial setup and download of the Papervision class in which there are several ways to do, this will alter occurding to which software you are using Flash cs3, cs4, Flex Builder or Flash builder. I have chosen to use Flash Cs3 as this is what is in out labs and i do not want to come across any compatibility issues. After some research into the difference between compiled and non-compiled source code i have chosen to download the non compiled zip source code because unlike the swc it is compatible with Flash Cs3. After downloading the necessary files from google code i configured the authoring tool in Flash for papervision to run.

I also have done some research into trapcode particular and i have created a sample Mov of a preloading icon that will run during load time

Papervision 3d Existing Examples

SAF Recruitment portal

A interesting and dynamic way to categorize relevant information to potential military recruitment

http://rekryt.mil.se/english/

X-Prime

X-Prime is a french digital agency,and its new website is now complete with a Papervision 3D interface.

http://www.x-prime.com/fr#

TBC

This a website done by Ringo especially for TBC, a full-service advertising agency and public relations company based in Baltimore. The main website features are simplicity and originality in content presentation.

http://www.tbc.us/

Q.films

A website for Q.films, an independent film company. Its website makes great use of papervision with its interactive navigation, 3d elements and animations.

http://q-films.info/

Trapcode Related STUFF

Existing Data Visualization/Visual Search Engines

oSkope

A visual search engine that gathers data from amazon, ebay
flickr.com, fotolia.com, Yahoo! and youtube.

The start up has the ability to scale the images/content as well
as multiple viewing modes including Grid, Stack, Pile, List and Graph
And the user also has there own personal storage folder.
http://www.oskope.com/




Viewzi

Quite similar to the visual gallery spezify but veiwzi has more options
of viewing styles that are more interactive and dynamic







Cooliris

Cooliris is a browser extension for Firefox (all platforms), IE (Windows), and Safari (Mac and Windows)
that allows you to explore SERPs in a visual fashion. Once started, Cooliris goes fullscreen creating a
dynamic 3D wall you can navigate back and forth. You can search for different content among the Web,
news, blogs, images, and videos. Results can also be enlarged, shared via e-mail and, being media,
played right inside the application.


http://www.cooliris.com/



Flashmoto

Heres a more dynamic gallery using paper vision 3d
which is visually appealing but lacks in function and
can become quite annoy to navigate through at times


http://www.flashmoto.com/wp-content/upload...ject/index.html

Digg Labs



Arc is a product from Digg Labs that shows the latest Diggs, and the relationships between the users submitting and digging them.
There are two different speed modes, the slower of which is great if you actually want to read the story headlines.




Stack is probably the most useful of the visualization offerings from Digg. Stories with the most recent activity load across the bottom
of the screen and then ‘Diggs’ seemingly fall from the sky to land and create a real-time graph of what stories are popular.
Whenever a ‘Digg’ hits a story stack, the title of the story is shown at the bottom of the screen, pushing previous stories down,
and eventually off the screen.



Swarm has one of the cooler user interfaces of all the Digg Labs offerings, with stories and users flying around on the screen.
When someone ‘diggs’ a story, they fly over to the circle representing the story itself and are briefly linked up to it.
Hovering over a story or user shows its name and allows you to click.




http://labs.digg.com/

I WANT TO MAKE THINGS LOOK PRETTY, OK!!!!!!!

Technical Research
Introduction:

With the increasing popularity of user driven content and online social networking, the advent of rich media has developed into a prominent advertising format that can reach and engage with consumers in a newly enhanced experiential fashion.

Aim:

To research and consolidate an in-depth understanding of a variety of innovative advanced digital techniques that are relevant to rich media advertising and interactive design, this will then be developed and demonstrated in a coherent working prototype.

Methods and processes:

-Research and investigation into existing digital interactive based techniques and executions.

-Further develop an understanding of Adobe Flash Actionscript 3.0 and how the users experience can be enhanced with the integration of XML and Papervision 3D.

-Consolidate a comprehensive understanding of Adobe After Effects and the Trapcode plugins (Particular, Form etc...) through various experimentations.

-Investigation into the creation of 3D text using Autodesk 3DS Max and how all these newly acquire techniques can be incorporated into a fluid online experience.

Intended Outcome:

The intended outcome for this project is to consolidate and develop the technical skills produce a media rich interactive web exhibition/ visual design gallery that combines elements of Papervision 3D, Flash Actionscript 3.0, and After Effects in a seamless manner.

Applied to a design Context:

To create a visually dynamic online exhibition that encourages the user to interact and explore the sites 3D capabilities whilst advertising the displayed content.

Matt Jacobs - Workbook

New Beginnings....