Hi, I'm Pete Lada ☕

Framer X Avatar Component

I recently created a simple avatar component for Framer X. Avatar components are quite simple, and often a starting point for design systems, but it was a fun exercise nonetheless. Learning about how Framer X structures its components, and allows for distribution on their store, was invaluable for mastering the tool.

The component supports photos and initials, any corner radius, male/female, and any arbitrary size. I’ll be adding the ability to override the photo yourself, shortly.

An example of the component in use.

You can’t currently link to components in the Framer X store, but it appears under the “recents” section.

An example of the component in use:

Let me know if you use it in your designs!

Sketch Redline Helper Symbols

If you still have to redline specs (like I do on occasion) and don’t want to use Sketch Measure, and still haven’t transitioned to Figma for some reason, you may find this collection of symbols I created helpful. The symbols are a set of redline helpers – both width/height measurement as well as area measurement. They use some relatively hacky Sketch methods to get the label backgrounds to expand automatically, but they work.

An example of the redline symbols in use.

Let me know if you find them useful!

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:

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.

App Store Style Progress Button

Update

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!

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!