LA in Lights: Behind the Scenes

Our team recently moved into a new space and we needed a fun, memorable focal point to greet visitors near the front door. 

After several iterations, our final design proposed the letters "LA", hanging in lights as large as possible from the beams above. 

There were a couple of constraints right off the bat-- I had access to plans, but no elevations, and access to the new space was forbidden while construction was underway. There was an optimal amount of bulbs in order for "LA" to be legible, and they had to be spaced properly as not to collide. Luckily with some leftover knowledge of architectural standards, I had a pretty good estimate of the height of the walls. From there, I could estimate the tallest height for "LA" between a comfortable head clearance and with enough room for the conduit/ housing to be properly installed. 

Iconography for Wang Insurance

I had a wonderful time collaborating with Wang Insurance to design this set of illustrated icons representing their services in insurance. Check out the final images in their full glory at



Here's a little animation inspired by today's events. 


Tackling Food Waste

Some teaser screens from a mobile app I've been working on designed to help reduce food waste. 

The Evolution of Colored Plans

Check out how far we've come in representing floor plans in color. 2005 on the left, 2015 on the right. 

Zooming Out: Textured Map of the World

After splashing around in Mapbox Studio some more and encountering browser woes, I discovered Safari was the answer to resuscitating my missing SVG patterns. I was able to take a pass at turning the hillside countours from tones into dense hatches. 


Verwall Alps

The read is just as strong but it has more of an atmosphere to it with linework. I can't seem to avoid that secondary tiling effect that is a result of non-pixel-perfect SVG editing. 

Here are some more of my favorite shots with this map style. 


Bengaluru, India

Bengaluru, India

Hong Kong

Hong Kong

The Hague

The Hague

Tokyo, Japan

Nolli 2015: Progress Shots

Some slow but steady progress is happening with the interactive Nolli map. Today I have taken on the challenge of line types and special strokes. It took me a bit of digging to find out how to control stroke styles in Mapbox Studio without editing just primary lines. Additionally, it's hard to assign multiple styles to a single layer, which mean some strategic duplicating /overlaying of the same data set, which I'm always a bit wary of. The "Gap Width" settings seem to exhibit stroke-as-outline behaviors that I am accustomed to in Illustrator, though slightly harder to control (especially as they need to sync with the scaling of the primary stroke they are built off of). 

Similar to the polygonal data, stroke styles can be mapped with an SVG pattern. This helps me achieve a more handrawn look than just a standard linetype. The only problem with mapping a hand drawn SVG to a line is controlling the way it terminates. The lines tend to die without the finesse of some hand-drawn intervention. Choosing a proper scale and length of the pattern can probably ease this transition with a bit of further studying. 

The centerline dash in the image above was actually an unintentional effect from setting my gap widths too far apart, but I'm happy with the result. 

Adding a gentle stipple pattern to the park land designation helped give the map a nice collage-like quality that scales and tiles elegantly. The small stippling is accentuated by the contour shading, which I would love to migrate from tones to gentle hatches. 

Although all of the lines are the same weight, their density begins to suggest a gradient that I think will work well as a series of overlays. Slowly eliminating the use of tone and replacing it with hand drawn patterns will help this map have intaglio-feel at farther zoom levels. 

After I test out a computer-generated hatch like the ones above, I draw over them with a stylus for more natural variation. Check out this side-by-side of a computer generated hatch versus a hand-drawn hatch: 

The hand-drawn hatch to the right has a much richer texture, which is totally worth the extra steps. My biggest wish for the next version of Mapbox studio will be a smoother and more intuitive SVG upload process-- on my browser it tends to snag. Without a lot of trial and error, it's hard to take a guess what lineweight and dimension of tile will look best on your map. I can see building and applying patterns becoming a future chapter in the guidelines documentation.  

Next steps will include more robust stroke styles, some river bathymetry, and unique illustrated points of interest. Take a look at some of my favorite screen shots from around the world:


San Francisco

Shoot I forget where I screencaptured this one. Hot guess on Germany...

Super high densities next to thick forests in Kyoto, Japan.

Looking at Nolli in 2015

Mapbox Studio beta is in the works and ready to be taken for a spin. I've just barely scraped the surface of what this tool is capable of, but am so far impressed with the intuitive interface and clean layering system. It's easy to start with one of the pre-made templates and transform it into something thats "yours" in just a couple of hours. 

My first test drive in Mapbox Studio is a modern recreation of the Nolli map of Rome. The Nolli map took architect Giovanni Battista 12 years to survey and even more to engrave. The Nolli is famous among architects for it's figure-ground representation of urban forms-- the interiors of major civic buildings such as the Pantheon and St. Peter's Basilica are represented as void, illustrating them as public open spaces. For this exercise, I'm not clinging onto the architectural pedagogy. It would take some serious data mining to find proper plans of every civic building in the world. What I've always loved most about the Nolli plan is the illustrative distinction among land uses.

Land use designations are readily available to be downloaded and applied to Mapbox creations. Most of the template map styles already have a great selection of land uses as layers: wood, shrub, grass, parks, snow, etc. It seems like since this polygon data is global, the scale does not have great fidelity down to the finer zoom levels of city-scale, but it's a great starting point. 

Mapbox uses SVG's to achieve pattern mapping onto polygonal data. This means drawing up my own illustrative land use textures in a way that can read fluidly in a square tile pattern. I like the imperfect hand-drawn aesthetic of the engravings, so I used some stock illustrator stroke styles to achieve this effect. It's hard to guess off the cuff how the scaling of the SVG will turn out, so this took a couple of tries.

So far I've only achieved the grass, forest, and building textures. It's a challenge to get the hand-drawn quality of the lines without creating a secondary unintentional tiling pattern-- definitely something I would love to tackle in a deeper dive. The other challenge is building out patterns and overall shapes within the constraints of a square tile. These are small first steps, but you can see how the patterns are starting to tell a story about building density and land use in these different cities:

There's a long ways to go before this map is as rich and meaningful as the Nolli-- but Rome wasn't built in a day. I'll keep coming back with updates as I continue to explore this new tool. 

Fritty Wap

Fritted glass is all the rage. It can be used for shading, for articulation, for bird safety, and much more. Printing the little ceramic patterns on glass is a fairly easy and adaptable manufacturing technique, so the options of patterns and designs to implement can stretch as far as the imagination will go. If you're a designer, this means studying options until the end of time. 

It took me a just one tower frit study to realize how much of a pain this can be. First, you have to consider what the frit pattern should be. It takes a bit of dusty middle-school math to calculate the proper coverage to get the size and density right. The pattern then must be drafted by hand in CAD, given a proper hatch, and then scaled and applied as a texture map to your 3D geometry. 

Middle-school math is my least favorite step in this arduous process so I cut it out by using a script.  The two variables I want to be able to control is the percentage of area covered by the frit, and the size of the ceramic dot. The script creates a hexagonal grid of any X / Y dimension you delegate. At the center of each cell, a circle is drawn whose radius is defined by some reverse-engineering based on the percentage of coverage desired. 

Since Grasshopper does all of the calculations for me, I can jump straight into texture mapping and visualization. Here's a comparison of 25% coverage on spandrel panels with varying scales of frit:





This is only two of a series of 10 comparisons, but you can start to see how dramatic the same % of coverage can appear by just adjusting the size of the frit. We went with the subtler 1/8 inch diameter frit for this design.  Adding a gradient to the pattern a new trend I've been seeing on glass louvers. This one is achieved by setting a domain and range of coverage percentages. 

I'll be updating this post soon with the script available for download. Stay tuned!