ryan troy ford ryantroyford

a little while ago, we added an animated video to our homepage. replete with monsters and robots, it gives a quick rundown of mapbox - our services, skills, and products. i had a ton of fun making it, and i want to share a little bit about how it came together. we're all about being open, after all.

when i first started, an entertaining and engaging video was first on my to-do list, so saman, eric, and i sat down and hashed out a storyboard, discussing the main concepts we wanted to emphasize. visually representing the points we aimed to highlight took some trial and error, so everything started on paper - specifically notecards on which we had quickly drawn the ideas for each individual shot.

we set to work arranging shots into cohesive scenes that flowed from one to another. after locking down the story, i got to start doing my favorite part of an animated project: everything.

more specifically: designing characters.

Mapping Monsters

Replete with monsters and robots, our new video shows how social maps are, and how they are part of everything mobile.

For starters, I hashed out a storyboard. Visually representing the points we aimed to highlight took some trial and error, so everything started on paper - specifically notecards on which we had quickly drawn the ideas for individual shots.

The shots were arranged into cohesive scenes that flowed from one to another. Once the story was locked down, I got to start doing my favorite part of an animated project: everything.

More specifically: designing characters.

i used this on my jekyll site, works like a charm. not sure how far back the browser support goes, but works on all modern ones.

this was largely figured out by Young Hahn and Garret Miller.

<div class='vid-frame' style='width: 100%; height: 0px; padding-bottom:56.25%; position:relative;'>
<iframe mozallowfullscreen='mozallowfullscreen' src='http://player.vimeo.com/video/YOUR-VIDEO-NUMBER-HERE' webkitAllowFullScreen='webkitAllowFullScreen' allowFullScreen='allowFullScreen' frameborder='0' height='100%' width='100%' style='position:absolute'> </iframe>

the illustrations need to convey a collective sense of risk and reality, and that what we're doing is audacious and bold. that's not to say they can't include some whimsy and playfulness, but the overall feeling should be one of motion, adventure, progress, chance, danger, excitement, and possibility.

with such a calculated and elegant UI, i think these pages could benefit from a grungier, more sketchy & raw illustration style, which is the way i've been leaning with earlier iterations. the compositions are still of utmost importance when trying to grasp all the concepts listed above, but style can also be a hugely important element in this pursuit. the juxtaposition of a clean interface and a less-restricted illustration style can help carry across our scrappy-but-refined, subversive ethos.

given the nature of our product and content, stylized illustrations aren't necessarily expected to be part of the experience. at the present stage of spaceship, we have a nice flow, clean and quick animations, and rel

Instagram Queue

[MapBox Satellite] (http://www.flickr.com/photos/mapbox/10711696573/) : "our awesome satellite team is growing. we're going to win with team. join up - drop us a line at [email protected]" - this is good, let's roll with it. i think we should just use the poster for now - anything more might get too cramped.
[Istanbul Satellite] (http://www.flickr.com/photos/mapbox/8392669195) : i have no idea what to say about this, but it sure looks cool. "space maps R radical" check with charlie about that one.
4sq check-ins - how about a close-up shot (or divide the canvas into four and have four separate photos) of somebody on our team using fousquare to check in somewhere, maybe with a beer in the background to imply a bar/socialization.
[Fire frequency] (http://www.flickr.com/photos/mapbox/7172026980/) this would be another "check with the people who actually know what they're doing" one.

for sale:

large capacity bolt-on HD leather bags. these fit a ton of shit in them. kept them on my bike for 10k miles, so they have some normal wear & tear, but still in great shape and have a lot of life left in them. they retail for $530, asking $250.
medium height sissy bar with cushion. looks like this, but it's the whole assembly, not just the pad. you'll need the docking hardware kit (runs about $30), but after that you can easily pop it on and off at your convenience. it's also seen some miles, but is basically in perfect shape. they retail for about $250, asking $100.

to-do

new seat. contenders:
mother road customs distressed brown

	// Put this file in Program Files\Adobe\Photoshop\Presets\Scripts\
	// In PhotoShop menu File > Automate > Scripts: layersToSprite.js

	// Arrange layers into a sprite sheet.

	if (documents.length > 0)
	{

	// --------------------------
	docRef = activeDocument;

	old-school:

	http://midcenturymoderndesign.tumblr.com/
	http://uzicopter.tumblr.com/
	http://rekall.tumblr.com/

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<script src='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.js'></script>
	<link href='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.css' rel='stylesheet' />
	<style>
	body {
	margin:0; padding:0;
	font:15px/1.67 'Helvetica Neue', Helvetica, Arial, sans-serif;

	// Put this file in Program Files\Adobe\Photoshop\Presets\Scripts\
	// In PhotoShop menu File > Automate > Scripts: layersToSprite.js

	// Arrange layers into a sprite sheet.

	if (documents.length > 0)
	{

	// --------------------------
	docRef = activeDocument;