Vinyl Monsters Updates

Motorcycle Subculture Billboard & Web Banner Final Crit

Updated Design

Message:

OpenRoadJourney.com will provide you with the means to get out there on the road to  see America. If you document your trip and submit it to the site they will pay you for your adventure. 

Rider Lingo:

Hammer Down -

“Full throttle all the way”

Values:

• Patriotism - America

• Independence - Getting out of the city

• Socializing - Sharing great roads with other bikers.

Goals:

• Financing - Keep taking trips.

• Financing - Bike customizing.

Visual Approach:

• Image of the Rocky Mountains an American landmark that I took myself on a road trip. 

• Dusty / Treated image to reflect the motorcycle vintage & historical roots. Especially regarding cross country trips. Easy Rider

• Rain drops & Reflective Flare helps create the feeling of one being behind the wind screen or looking through a helmet.

The bike is not in the image because the coded language of Hammer Down speaks to the bikers without giving away the message to those who are not part of the motorcycle sub-culture. 

End of Animated .gif Banner AD Design.

Web Banner in context on Motorcycleforum.com

Placement:

MotorcycleForum.com

Dimensions:

Large Leaderboard 728 x 210

Animation:

An image of the Rocky Mountains fade into the scene through three separate frames.

Steps:

“Hammer Down”, “Across America”, Openroadjourney.com, Hammer click pointer 

Billboard in context off of the highway. 

Placement:

Inner city, primarily major cities, inner & outer corridors. Traffic congestion enforces the message. 

Dimensions:

Large Leaderboard 48ft x 14ft

Imagery:

Static image of the Rocky Mountains. 

Vinyl Monsters Progress Update

Home Page

Infographic #1

Infographic #2

Infographic #3

Infographic #4

Infographic #5

Infographic #6

Infographic #7

Motorcycle Banner Ad & Billboard process

Web Banner. 

Images I am working with that I shot myself during a trip to Colorado. I will be using one of these to replace the image that I had been using that wasn't mine. 

Banner in context on the website. 

Billboard in context

Billboard in the city setting that I envisioned. 

Mutual Mobile Internship

I am excited to say I will be interning this summer at Mutual Mobile in Austin, TX! Mutual, focuses on mobile web, iPad, iPhone, and Android development / design. This is something I am really excited to have a chance to explore on a professional level.

Designer Toy Collection Website Three Directions

Direction #1 - Vinyl Monsters

"A collection of creative creatures"

Vinyl Monsters, utilizes a roll over navigation that shifts from archer regular to bold on mouse over. The homepage features the complete collection of vinyl toys heads alone. On mouse over the full body would appear. This theme is also serving as a test for use of the drop shadow on my vectors and some aspects of information display for example the collector information. My header typeface is Spring. The little monster image in the header is taken from the face of the Superdeux Dunny which happens to be the most popular of those in my collection. 

Note for Marty: Personally I'm really questioning the use of the heads alone for a roll over. I think a drop shadow on mouse over or something simular might be more visually pleasing and not as harsh. I really like the use of drop shadow but I think I just have to be really careful with the amount of it that I use. Thanks for letting us submit the work this way so we can attend the workshop. I'm looking forward to your feedback. 

Direction #2 - Plastic Planet

"A collection of designer toys"

Plastic Planet, is about the collection as a whole. Plastic referencing the primary material that designer toys are made out of and planet to tell the user that there are many toys to look into on this site. The header typeface is Ribbon, and the other copy is futura book, and bold. After creating this one I have decided that I think two rows of toys works better than three. 

Home screen. This particular concept does not utilize a roll over image function like the concept below. 

Toy profile with collector data and infographic. 

Direction #3 - Unboxed Ltd. (Unboxed Limited)

"Unleash your vinyl side"

Unboxed Ltd. is a direct relation to the unboxing of a designer toy the first time you purchase and open the box. Typically designer toys come in blind assortments which makes certain ones much rarer than others. Which is why included limited. This is much of the appeal of designer toys. The hunt. Hence the limited colors. Most sites that I have researched in the process of this project utilize a formula some what simular to this. Lots of white space and black text. Max contrast with the bright imagery.This concept is supposed to be the tough guy / i'm a bad ass kind of concept. You have to drink a red bull to even open the page. Maybe I can do that through HTML5 or augmented reality... haha. 

Home page shows each toy's head

Roll over state shows full body. 

Toy profile, with facts, and infographic. 

iC - Preparation for design / App functionality.

Branding & Packaging Components: 

Logo - iC (I see) branding. Centered Size: 3"x3"

Start up Screen - iC logo w/ sound mark.

Background - Depth of field shifting gray scale.

UI - Clean, Large

No rotation.

Sections:
*Where to find an optometrist. Using the GPS.
* The different kinds of eye issues that one can have.
* Advice - Taking care of your eyes, have regular eye tests, take regular breaks, invest in quality lenses, ask for personal lenses,
* About the application.

Things to avoid:
Static or moving imagery outside of the beginning.
Small UI.

Warnings:
* Add note about how this is not a professional method of testing your eye sight. Waver.
* Terms & Conditions.

Research Notes:
Visual Acuity
Astigmatism
Duochrome
Colour Test

Links:
http://3sidedcube.com/#work/vision-test-2
http://indesignsecrets.com/turning-indesign-files-to-ipad-apps.php

Motorcycle Tailored Ad Notes

Moving forward I will be:

Look at the values again. 

Read the verbal audit again. 

Storyboard.

Make quick iterations. 

Visual:

Showing no bike is more powerful.

Treated image is working well on (Page 2, #4)

Copy:

To better tailor the text I need to find a balance between Lingo "scoot" + Value "Independence" 

Chrome and Freedom - Chome is a goal. 

Born to live, live to ride - Ride is a good value.

Still not tailored enough. 

How can motorcyclists get it since the bike is removed?

Channels:

(1)Web Banner:

Animated .gif (5sec?)

Placement: Motorcycleforum.com

Two banners running at the same time?

Take advantage of time!

(2)Billboard:

Adjustments to the billboard as opposed to the web banner: Larger type (message + address)

Placement: In the city. 

Billboard Concept: New directions & Iterations

After last class / crit I felt that I needed to return to the drawing board.

I decided to move forward to the billboard channel that promoted the service openroadjourney.com which pays riders to do what they love while they document the best roads in america to share with other bikers. They are typically off the beaten path finding new territory to chart, and following their own wanderlust in the process. 

I made the choice to try and bring in more of the motorcycle culture. Its wordage and style. I also replace all of the prior copywriting with script that would appeal more to the personal benefit of being a biker doing what you love while using the service openroadjourney.com instead of just financial gain. 

Motorcycle First Three Concepts

Billboards to inspire and inform riders to get paid to ride through openroadjourney.com:

Insert into a parts box about where to find a riding club:

Web Banner for an App that warned you about bad weather.

Designer Toys Vectors

Designer Toys In Class Progress

Moving forward I will be using the vector rendering method with an icon or head shot of the render as the roll over image.

In class I managed to create the body for the gray "Sleeper" designer toy which was just a head icon prior and began work on the first Dunny.

Progress Report / Four Typeface Comparison & Found Signage Example

First steps towards our visual direction now with the about section. 

My results next to one another. Something more comprehensive will be posted soon. 

I'm sorry about the quality of this image. I had to photograph it as my file was lost in a photoshop crash. 

Rendering Tests

What the iPad 3/HD Display Means for Designers

Borrowed from Mutual Mobile's site which can be found here

As March 7 draws closer, it seems certain that Apple’s next iPad will have a Retina-style display. While the hardware specs are unknown, the 9.7″ display will be doing a lot of work to push almost as many pixels as Apple’s 27″ iMac.

Why 2x?

Apple always pursues elegance in their hardware and software, so the likelihood of them introducing a device at any scale other than 2x isn’t likely.

Marc Edwards of Bjango explains why pixels matter and why deviation makes it difficult and more costly to pursue perfection:

If the design and screen grids don’t match, pixels get blurred. Quality is lost. Every single element on the screen is subject to these rules — elements drawn in code, as a vector or as a bitmap (if they’re scaled, bitmaps lose even more quality than things drawn in code or as vectors).

Putting the New iPad Display in Perspective

How will we design for such a display? Even their 27″ iMac and thunderbolt displays wouldn’t be be tall enough to fit an entire iPad Retina screen in landscape without cropping it by 96 pixels. Hopefully Apple will release a new, higher resolution display or people will be scouring eBay for an old Apple Cinema HD to make life a bit easier.

Here’s a comparison of the following screen and device sizes:

• iPhone 4/4S: 960×640
• iPad 2: 1024×768
• Samsung Galaxy Tab / Motorola Xoom: 1280×800
• 13″ MacBook Air / 15″ MacBook Pro: 1440×900
• 15″ MacBook Pro (Hi-Res): 1680×1050
• 17″ MacBook Pro: 1920×1200
• 27″ iMac / Thunderbolt Display: 2560×1440
• iPad 3: 2048×1536
• 30″ Apple Cinema HD: 2560×1600

Dealing with 2x: Easiest for Designers

We’ve been through this before when the iPhone 4′s Retina display was introduced. You don’t get beauty without some effort, but Apple makes it easy to use higher resolution assets with their @2x naming method.

Want to save yourself headaches as mobile devices continue to get higher resolutions?

• Always use vector objects and layer styles with Photoshop or graphic styles in Illustrator.
• Don’t embed text in your buttons, instead use stretchable buttons and generate text on the device.
• Do all of your initial work at 320×480 for iPhone or 768×1024 for iPad to make sure that your design scales properly when you convert it to 2x.
• Bjango offers some more detailed advice when designing for Retina devices; here’s a link for Part 1 and Part 2.

Bodoni Typeface Test vs Helvetica / Futura

A visual comparison of Jessi Wilson's typeface testing with Bodoni on top, Helvetica in the middle, and Futura at the bottom. 

We will be continuing testing regarding Bodni, Comic Sans, and if we can attain it Dyslexie. 

Design Toy Collection Website Wireframes