Senior Project Links

Links to the final versions of my three projects:

Sarah Jerns/Pan Pan site:
http://sarahjerns.com/

Overset book store:
http://emmaj.net/bookstore/

Synesthesia mini music video:
http://vimeo.com/12415184

Book store intial comp

Here is an comp of the home page layout for Overset books. The idea would be that the home page shows a selection of random books that display their title on a hover. The images of the books themselves will be cropped to fit in a 150 by 150 px square so that the book images can align neatly to the grid. The rest of the site is going to be based off the same 150px grid system, with all of the divs either being 150, 300, or 450 px wide.

Links for Techtonic

Interactive:

http://emmaj.net/ikea/IKEAscraps.html

Video:

http://emmaj.net/wbr.aspx

Synesthesia video – concept/inspiration

I want to create one more motion graphics piece for my portfolio using Aftereffects. I plan to tie this video into my other project and work collaboratively to create a short music video with Sarah Jerns. The video is going to center around the idea of sound-color synesthesia:

Cytowic calls sound → color synesthesia “something like fireworks”: voice, music, and assorted environmental sounds such as clattering dishes or dog barks trigger color and simple shapes that arise, move around, and then fade when the sound stimulus ends. For some, the stimulus type is limited (e.g., music only, or even just a specific musical key); for others, a wide variety of sounds triggers synesthesia.

Sound often changes the perceived hue, brightness, scintillation, and directional movement. Some individuals see music on a “screen” in front of their face. Deni Simon, for whom music produces waving lines “like oscilloscope configurations—lines moving in color, often metallic with height, width and, most importantly, depth. My favorite music has lines that extend horizontally beyond the ‘screen’ area.” (Taken from Wikipedia)

I want to animate various shapes/colors to move organically and abstractly with the music. My focus will be on create audio/visual sync in which the shapes respond to various instruments, tempo changes, rhythms, etc. within the song.

At this point, I haven’t decided on a song yet. I may see if Sarah can create an original piece for this project, but if not I am leaning towards a song she wrote called Fog Nills (http://www.myspace.com/thepanpan)

Some inspiration for this video:

I was inspired to do this project partly from DSGN 312. We looked at a series of abstract music posters from Josef Muller-Brockmann.

Book store wireframes

SJ Refined comps

Intro Page:

Secondary page, showing scrolling vs. static content:

Another color option:

SJ – initial comps

Bookstore ideation

CONCEPT

A while ago I created a bookstore site in PHP for MIS 314. The site functions well, but the design is not portfolio worthy. I plan to redesign the site from the ground up. This will include entering new books in the database to create a limited and unique product line.

Currently, the site features a very small database of books about web development. I am planning on creating a new database of books that have to do with all areas of graphic design. I decided to choose this topic both because it is something I am familiar with and because many of these books have visually interesting and well designed cover art.

WORD LIST

modern, bright, colorful, graphic, geometric, patterned, stand out, eye catching, bold, saturated

SITE MAP

Since the structure of the site already exists, I mostly need to focus on the book categories I would like to include in the browse menu:

• general
• typography
• layout
• color
• production
• web design
• motion
• professional practices
• thinking
• illustration
• logo/branding

COMPETITIVE ANALYSIS

http://astore.amazon.com/logdeslov-20

http://www.artbook.com/

http://www.phaidon.com/store/

http://www.peachpit.com/index.aspx

SJ – Wireframes

SJ Research

Description

My friend Sarah and I have been discussing working together to create a website for a while now. She is a music major at Western and heads up a band called Pan Pan. For one of my projects, I am going to create a personal online portfolio to showcase her work and capabilities. As well as being a public profile for her fans, friends, and family, Sarah also would like the site to appeal to important people in the music industry.

The site will be detailed and informative and include audio and video files of Sarah’s work. It will also link to the various existing Pan Pan sites/social media pages. To make the site more interactive, I plan to create a blog in which Sarah will be able to post content and upload media through a password protected admin page.

Goals

• create an informative promotional site that can be easily updated

• become more familiar with using media (music, video) on the web
• learn about search engine optimization
• design a site with a unique layout (ie no logo in the upper left corner, nav bar at the top etc.)

Technical

The site will be created in HTML and CSS. The blog, since it needs password protection and the ability to upload content, will be created in ASP.NET using Visual Studio. I may use some jQuery as well.

Currently Online

http://www.myspace.com/thepanpan

http://www.facebook.com/#!/pages/Pan-Pan/61135314628?ref=ts

http://www.sonicbids.com/epk/epk.aspx?epk_id=224997

http://www.last.fm/music/Pan+Pan+%28US%29

http://www.youtube.com/sarahjerns

Competitor Analysis

http://www.rocketclub.info/

http://www.thespecials.com/index.php

http://www.matkearney.com/

Word List/Inspiration

music, jazz, classical, portfolio, senior recital
band, Pan Pan, promotion, instrumental, piano, horns
haunting, melodic, soothing, layered, complex, raw, emotional, subtle

Some pics from Sarah:

Site map

HOME (will have a blog/news feel… show the latest post(s) with the option to look at older posts)

1. Front-end:
   • music (upload via admin page)
   • video (upload via admin page)
   • bio
   • shows (editable via admin page)
   • links/contact
2. Back-end/Admin pages:
   • music upload
   • video upload
   • edit shows
   • add post to blog/news feed