I am a designer and front-end developer. I spend my time fussing with pixels in Photoshop Sketch or pretending I know how to use vim. I live in the cheerful Bay Area and love coffee. ☕

Nice! 0

January 16, 2016

Guidebook's Feed Animation


We recently released a major update to Guidebook, which included the new activity feed. It was a big milestone, and something I’ll write more about in the future, but I wanted to share one thing that I worked on to help promote it which I thought was cool.

We wanted to display the feed on our site, but didn’t want simply a static image as that wouldn’t show off enough of what the feed offered. We also shied away from a video, mainly due to difficulties in updating it and translating it to other languages. I decided to create a series of animations using pure css and javascript in order to show the feed “in use”. I think the result turned out nice:

A representation of Guidebook's new activity feed, using css transitions.

The solution was fairly simple. I created a few views which contained screenshots of various states of the feed. I would then transition between these views using css transitions. The “finger taps” were also simulated using css transitions and some simple javascript. The entire thing is run on a super minimal javascript animation timeline.

The obvious benefits of this approach is that you can easily update screenshots, views, etc as the app evolves. Its also much easier to translate to other languages, as I’d just have to dump in translated screenshots rather than having to re-record a video. Its in an iframe right now, but if you were to directly insert it into your codebase, you could hook into various animations and adjust other sections of your site accordingly. The obvious downsides (relative to video) is that its not a true 1:1 representation of what the app can do, and you lose out on some of the more granular interactions.

If there is more interest in this I can throw it up on github to show how it was done.

More about the feed Share on Twitter
Nice! 0

December 06, 2015

App Store Style Progress Button



We had a lot of positive response from this component, so we decided to open source it! Check out the project on github, and let me know if you use it!

I was recently inspired by Apple’s progress buttons in the app store, so I decided to create my own to use within Guidebook. This is a screen recording of the actual button running in the app (not a prototype).

Guidebook's new app store style progress button.

Let me know what you think on Twitter!

View on Dribbble View on Github Share on Twitter
Clean lines (ha) 0

August 03, 2015

Guidebook Logo Redraw


I recently redrew the logo for Guidebook as I had some free time and was inspired by all the logo redesigns happening lately.

Guidebook’s logo was originally created from a slightly modified version of Rockwell. The initial modifications were minimal: cleaning up a few lines, some minor alignment, weighting and kerning. With this redraw, I took the existing logo and manually redrew each glyph, adjusting as necessary to achieve our objectives. We were attempting to adjust the logo to create more uniform construction, better alignment, consistent spacing and improved clarity.

Below is a quick .gif showing a comparison to the old logo, as well as some of the guides we created. I’ll post in more detail about the process at a later time.

My redraw of the Guidebook logo.

Let me know what you think on Twitter!

View on Dribbble Share on Twitter
Helpful 0

January 31, 2015

How to create an animated and stateful toggle using only CSS (no Javascript!)


I recently posted a shot on Dribbble demoing a component I worked on for a web project we’re working on internally at Guidebook. The component is a simple binary toggle, but with a caveat: it was constructed using only CSS (and HTML of course). I had some requests to show how it was done, so I’ll detail how to create your own CSS-only toggle here.

"Binary Toggle" for a web project at Guidebook. Created using only CSS and some markup.

The Markup

Let’s start with the HTML. The toggle is, at it’s core, an input checkbox. This is how we store the state of the toggle without using Javascript – the input element stores it’s checked state internally.

The markup consists of a container label, an input element of type checkbox, and some additional elements to create the toggle background and switch.

<label class="tgl">
  <input type="checkbox" />
  <span class="tgl_body">
    <span class="tgl_switch"></span>
    <span class="tgl_track">
      <span class="tgl_bgd"></span>
      <span class="tgl_bgd tgl_bgd-negative"></span>
Continue Reading View on Codepen Share on Twitter
Helpful 0

November 19, 2014

Prototyping with Framer at Guidebook


I have been using Framer for prototyping for a while now, but have recently started to make a concerted effort to use it on a daily basis to improve my interaction prototypes. I have quickly found it to be an invaluable tool — something which makes communicating with, and inspiring, developers a simple task.

I wanted to share some of my work with the community, so I put together an interaction prototype the other day based off some experimental views we are working on at Guidebook. The prototype is honestly a little too complex for an actual prototype — the idea behind them is that you should be able to quickly pump them out and iterate on your existing designs, not spend huge amounts of time refining. But in any case, its fun to work on a more complete view prototype, so here you are.

"Guide search" interaction prototype for Guidebook, created with Framer.

The prototype consists of five primary interactions: searching, redeeming a code, scanning a code, pulling to refresh, and scrolling the view. The view, to give some context, is an experimental way to display your guides within Guidebook.

Download the Framer file with the button below. The code is not super organized or well documented, but hopefully it helps someone learn a bit about what you can accomplish with the tool.

Download Framer file Share on Twitter
Page: 1 of 2