Mobile Design with Alli Dryer – Podcast S03 E03

Design Inspiration Resources

That’s where you’re going to stand out on the upstart, but also I think you can also draw a lot of that stuff from looking at sites that curate and collect all the different interfaces of popular iOS apps. There’s many out there. Patterns is a popular one in mobile buttons. That’s Pttrns spelled P-T-T-R-N-S which is a really popular site for collecting UI from iOS apps.

I’ve often found that if I go so far with a design myself, if I really want to, if I’m not feeling that it’s quite there yet, if I go on one of these sites then you can often find, not to copy the entire UI, but it just might be a gradient or it might just be like a really subtle effect. Then, when you apply that to your UI it really brings it out and pulls it all together, kind of takes it to that next level.

Jake: Yeah, I agree. I think Pttrns is a great source to look for inspiration. I also find myself a little bit discouraged when I look at those because they are so amazing and what I’m working on in comparison usually doesn’t quite match that. Yeah, definitely when you’re looking for ideas there’s tons of great resources out there.

Capptivate.co

Mic [08:00]: Yeah, and one of those resources is Capptivate, spelled with a double P. we’ll actually lucky today to joined by Alli Dryer who is a designer at Twitter, but also the driving force behind Cappivate.co, Hey, Alli.

Alli: Hello.

Mic: Thanks for joining us today.

Alli: Thanks for having me.

Mic: Before we get into talking a little bit about Capptivate, can you tell us how is Alli Dryer?

Alli: Sure, I am a product designer at Twitter and an architect by training. I also have a side project that you mentioned called Capptivate where I post short videos of aminations that I think could be inspiring or just really great examples of the craft.

Mic: Where did the idea for Capptivate come from?

Alli: I used to work at an agency in Dallas called Bottle Rocket Apps. We would be pitching concepts to clients. I found myself making sounds effects and waving my arms around to demonstrate how the static mocks I was presenting would come to life on screen. It’s was just not a great way of communicating. Then you would get your phone out and start trying to dig out examples. Then, you would’ve uninstalled the app and all these difficulties.

I thought it would be great if there was a website that I could just reference at these points in time or where I could collect these examples so that I could have a library to access when I wanted to make a point.

Mic: When you got this idea did you then want to turn it into a fully-fledged website. Do you also have a background in web development? Is that something you did yourself or did you farm that out to somebody else?

Alli [10:00]: I am not formally trained basically at anything to do with digital design. I’ve been teaching myself for a while. The way that I even got into designing software in the first place was by hacking WordPress templates. That’s what Capptivate is it’s just a WordPress template that I found and then I monkeyed around in the CSS until it looked how I wanted it to.

The hardest thing about building the Capptivate website was trying to figure how to post the videos on the site so that they didn’t all auto play and loop at once. I had to figure out how to package a static image in front of this booby and have the image get out of the way when you hovered over it. To do that I found a tool called Hype that let me build this package and then upload it to the website.

Mic: That is a really cool effect. That is one of the things I like when I’m on that site is nothing looks interactive until you move your mouse over it and then all of a sudden it comes alive.

Alli: It can be frustrating at times because you might accidently mouse over something you didn’t mean to, but I think overall it’s nice that it’s not as overwhelming when you first land on the page.

Mic: Yeah, because I’m pretty sure it’d be quite resource intensive in the Browser as well if all those videos loaded at the same time.

Alli: Sure.

Mic: Is it just you that puts stuff on Capptivate or do you allow others to submit?

Alli: No, it’s just me. Right now I create the content that you see on the site myself. Sometimes people will submit their apps and I can take a look at them, but right now there’s no infrastructure for anyone else to post.

Capptivate.co iOS App

Mic: I believe you recently launched the official Capptivate iOS app? How has that experience been?

Alli [12:00]: Yeah, it’s been great. I got an email from a developer, his name’s Claude Sutterland, and he wrote to me and he said, “Hey, I’ve been using your site. I think it’s great. I really wish there was an app for iOS so I could see these videos on my phone. I’d this something I can build or would you be interested in working with me on it?”

I wrote him back and I said, “Look this is not a business, so I can’t pay you, but I have been working on designs for an app and maybe I would love to work together.” we just started emailing back and forth. I showed him the designs that I was working with and we bounced ideas off of each other. He actually came up with the feature that I think it makes the app ten times more useful than the website even, which is that you can drag your finger across the screen and scroll through the animation. Instead of having to watch it loop over and over and just hope that you’re catching that small effect that’s making the difference in the animation, you can just step through it and figure out exactly where it is and what’s happening.

We had a very smooth collaboration and the app hit the store and we’ve had I think somewhere around 5,700 downloads which impressed me because I wasn’t expecting that. I’ve been really happy with it. I think the major missing piece with the Capptivate app is just that I haven’t posted as much content as I should be. It’s hard to keep up with that part of it.

Jake: One of the things I notice about Capptivate is that there’s a focus on animation. Is that the primary distinction between Capptivate and some of the other Pttrns or some of the other websites that focus on design? What are some of the distinctions?

Alli [14:00]: The site is not organized the same way as Pttrns or Mobile Patterns even though it draws heavily from both of those in terms of how it’s laid out and how you interact with it. Every time I post a video of an app animation I break it down into a series of patterns and components that I made up and I defined.

I look at things like does it squash and stretch? Does it scale? Does it flip, fade, ripple, all of those things. I analyze that and I basically categorize the post according to those small components. If you get to the site and you’re interested in seeing something that, I don’t know, does a fold. You can search for folding animations and everything that has that aspect will be surface to you.

It works slightly differently in that you’re not going to be able to find a great example of a log-in flow or a sign-in page. You will see that there are some patterns that have emerged around the way these elements move and it’s meant to be a resource in that sense.