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

Motorcycle Tailored Communication Moving Forward

Moving Forward with my tailored advertising I have selected to work with: 

Saftey, Customization/Gear Head/DIY, Independence, and Money/Socializing.

Why: Safety (Object)
What: Motorcycle Weather App. (Product)
Who: Kickstand Tech LLC. (Private)
How: The Motorcycle Weather App is an easy to use application to check when its safe to ride your motorcycle at the touch of a finger.
Where: Motorcycle Forum.com web banner. (240x400px Fat Skyscraper Size)

Why: Customization / Gear Head / DIY (Behavior)
What: Motorcycle forum that offers advice, news, and DIY information for all kinds of riders. (Service)
Who: MotorcycleForum.com (Private)
How: MotorcycleForum.com is the worlds largest community of motorcycle enthusiasts (who share advice, DIY information, and news)
Where: Point of sale advert. (8.5x11in standing ad)

Why: Independence (Characteristic)

What: Motorcycle Riding Clubs. Net provides a connection for riders to find local family friendly riding clubs in their area. (Service)
Who: Motorcycle Riding Clubs. Net (Private)
How: Motorcycle Riding Clubs solves the issues of trying to find a local family friendly riding club in your area.
Where: J&P Cycles.com in box postcard. (6x4.25in)

Why: Money / Socializing (Characteristic)

What: Open Road Journey.com provides you with a way to ride by yourself or with others on your favorite roads and get paid for it by documenting (Service)
Who: Open Road Journey.com  (Private)
How: Get paid to ride with you and your friends to ride the greatest roads in America.
Where: Billboard. (48x14ft)(in)

Why: Object, Characteristic, Values

What: Product, Service, Cause (Item/object) 

Who: (Who is selling the item) (sponsor)

How: (Why + Why) (Slogan)

Where: (Location)

Motorcycle Sub-Culture Chart

Designer Toy Collection Round 2 Infographics

The three updated methods of sorting I have chosen for my objects:

• Order In Which I Purchased Them
• Color (Neutral to Saturated):
• How Much I Like Them (Personal Appeal Ranked 1-15): 

Infographics 

• DIY Designer Toys Size Comparison
• Top 10 Hard to Find Toys
• Munny Customizing
• Western and Eastern Division of Designe Toys
• Manufacturing Origin and Types of Materials
• Top 10 Most Collected Designer Toys
• Most Popular Designer Toy Platforms
• Types of Bearbrick Designer Toys in Packaging by Percentage
• Munny Customixing Tools