Development

Why hello lovely internet! I’ve been living in a work shaped hole for a while, but now I have all kinds of cool stuff to show you! Keep an eye out for even more new projects later this week.
I recently did branding and a website for journalist and writer, Melissa Gira Grant. She just put out a new book, and wanted a new platform to help her promote it. As a long time reader of her writing, I jumped at the opportunity to help her with her design and development needs.

MGGPortfolio_3

When I started talking with Melissa about her brand, she described it as “hard femme deco”. As soon as the words were out of her mouth, I knew exactly what direction to go in.
I especially like the lockup, which combined a pen nib with a flower, as well as Melissa’s initials.
Go on over to her website to check out her work, and mine.

Curbside Creamery
curbside_iphone_ipad_2

I just launched a new site for Curbside Creamery, an Oakland-based ice cream maker. The concept of Curbside Creamery is to sell artisan ice cream sandwiches, in traditional and vegan varieties, from a vending trike. For this project I developed a website, hand lettered a logo, established a style guide and designed several brand marks.

For branding, I created a custom hand-lettered logo and a silhouette graphic of the vending trike to serve as an additional brand mark. My inspirations for the logo included old-school sign painting. Specifically, for this project I was drawn to beach boardwalk signage from the fifties and sixties, such as this sign for Dolle’s Salt Water Taffy in Maryland. Here is a moodboard I put together showing my typeface inspirations. The end result ended up looking less scripty than many of the following:

curbside_moodboard

The trike brand mark is based on a photo of the actual trike that Curbside’s proprietor, Tori Wentworth, had just ordered. I started out by doing a raster sketch in Photoshop, and then vectorized it in Illustrator. The trike drawing needed to be realistic enough to represent Tori’s actual vehicle, but abstracted enough to make a good stencil drawing, vinyl cut-out, stationery header, business card graphic, etc. Finding that balance was a challenge, but I’m stoked with the result!

The concept behind the website was to have a beautiful, minimalist theme. I was lucky to have some photos, shot by Tori on film, to use for the full-screen responsive slider. The slider script was modified to add a subtle animation effect to change the color of the word “creamery” depending on which photo is being displayed. This was added to make the logo pop against all the images, because otherwise it would’ve gotten lost on certain backgrounds. The website has a CMS that will enable Tori to make changes at any time. This was important because Curbside Creamery’s flavors will change in the future.

curbside_full_length03
curbside_stationery
KaanaBelize_laptop_1200px

A new project that I worked on is live! Ka’ana Belize, a hotel in Belize, wanted to create an interactive map that displayed travel times, local attractions, and amenities for their guests.

The site is a single-page with three different maps; World, Region, and Resort. In the World section, flight paths and times are displayed based on which city the user clicks. I’m particularly stoked on the flight path animations in this section! The Region and Resort sections both allow the user to check out different places by clicking points on the map that pop up sliding image galleries.

Art-directed by the incredibly talented Amy Weibel and originally developed by PixelCrayons, the project fell in my lap when Amy brought me in to do QA. After I compiled a bug list, I was asked to fix all the bugs I caught by the client and make some creative tweaks. Additionally, I polished the art assets and added an extra layer of parallax scrolling; the water, map sections and individual land masses move at slightly different speeds, which adds dimension and movement to the map. I also had to make this site cross-browser compatible, and responsive for the iPad.

kernjs_comparison

In a boutique site of this nature, typography is everything. When I inherited the site, the kerning was not yet complete; as you can see in the example above, the spacing between the letters was very uneven. Kerning.js to the rescue! Joshua Gross’ awesome open-source library allowed me to adjust the kerning down to the letter.

kaana_ipads

Special thanks to Jared who helped me with some JS woes & thanks again to Amy for bringing me in on the project!

coilLogo
coil_hero_laptop

Back in November, I had the honor of working on the hiatus redesign of Coilhouse.net.
I also did the illustration on their goodbye post.
Back then, I promised you I’d make a more proper post about the redesign, so here it is!

My dear friend Nadya Lev had been designing the site, and ended up initially asking me to provide some CSS wizardry.
It was to be the last hoorah for this much celebrated magazine and blog, before it went dark for a few years. Even though I started just doing fill in CSS work, I ended up being development lead and also helping Nadya with a bunch of the design decisions.

The site was particularly challenging because it had originally been designed to be quite narrow, and all the images in the archive were less than 400px wide! I was concerned that such a narrow layout would make the site look dated, even though we’d just redesigned.
However, going through and upsizing the content wasn’t an option. Nadya had wanted to fill all the horizontal space with illustrations she had comissioned from the awesomely talented Jason Levesque. She had thought she would just set them as a background image- but at some point the topic of parallax scrolling came up.
Normally I wouldn’t go for something this busy for a content site like this, but since it would no longer be updating- a fun approach like this seemed appropriate.

coilgif

We ended up putting the whole menagerie of tiny illustrations into a parallax scrolling, easter egg filled layout. This solved most of my concerns about the site looking dated, as this animation technique has only recently seen a rise in popularity.
We spent hours and ours placing every illustration manually, choosing the speed it should scroll at, and making certain characters interact with others in particular ways as you scroll.

coil_hero_phone
As much as I advocate for responsive design, with a content width as small as it is, we decided to just make a standard view and a mobile view instead of the usual full range of responsive breakpoints. I’d love to go back in and optimize for a better tablet experience at some point.
Perhaps when they decide to return to the site and come out of hiatus, I’ll come back to help come up with a new theme for relaunch.
Until then, enjoy clicking around on the illustrations, and reading the massive archive of content from the past several years.

While I am sad that there’s no new activity over there- I’m overjoyed that my friends who worked on it can now take the time to pursue other things that they love.

Goodnight sweet Coilhouse.
I’ll be here when you wake up.

My dear friend Nubby Twiglet has been running her blog for 5 years!
She decided to relaunch her site with a new design to celebrate, and she asked me to do the development. I decided this would be a perfect opportunity to turn her fixed design into a super awesome responsive layout.

This is Nubby’s original design. The unusual Navbar is my favorite element, and it was also the most difficult part of the layout to code. It was a challenge getting the nav items to stay in line with the left side of the post content, while keeping the triangle on the right pinned in line with the right side of the content.

Other fun aspects of this design that were the expandable sidebar sections (hooray for jquery toggle!) and font replacement (typekit for the win!).

When the window gets smaller, the social link content on the right begins to run out of room on the screen. This brings me to the next section of the responsive layout.

Nubby didn’t have any mockups for other resolutions, so I designed some solutions to fix this issue as well as other small screen problems.
To keep the social links from overlapping with the main navigation, I simply stacked them vertically.
I used the same approach for the sponsor content in the sidebar.

I also wanted all the content to fit nicely on ipads and netbooks, so I set both the posts and the sidebar to fluid widths, so they would get smaller along with the size of the window.

For very small screens, like phones, I removed the sidebar entirely.
This allows the content to take up the full width of the screen.
The images scale as they do in the previous resolution size, taking up the full width of the content container.

I’m so happy to have had the chance to work with Nubby all these years, and I’m so excited to see what we make together in the future.
5 years of blogging nearly every weekday is no small feat!
I’m so so proud of her for coming so far.

Extra responsive layout resources