The Kodeco Podcast: For App Developers and Gamers

Learn about Mobile Design with Alli Dryer!

Welcome back to season 3 of the raywenderlich.com podcast!

In this episode, learn about mobile design with Alli Dryer, creator of capptivate.co – how to learn design, how to find designers, common design mistakes, and more!

[Subscribe in iTunes] [RSS Feed]

Transcript

Note from Ray: This is our first time adding a transcript to the podcast. Let us know what you think, and if this is something you’d like to see us keep doing!

RWDevCon

Mic: Hey, Jake.

Jake: Hey Mic, how are you doing?

Mic: Not so bad, you?

Jake: Pretty good, pretty good. It’s been a good week.

Mic: You all set for RWDevCon next week?

Jake: I am still getting set yes. I’ll be ready when the time comes. Okay, how about you? Are you ready?

Mic: Just about yeah.

Jake: Got all your presentations in order?

Mic: I’m just doing the final run through of each one now. The prep work’s done; this is just the final, final, final check before I send everything over to Ray to package up and distribute off to the guys that are coming, but yeah, pretty much there.

Jake: It took a lot more prep work than I thought it would, but I think because of that it’s going to end up being a pretty good conference. I feel like when it comes I’ll be quite well prepared.

Mic: Yeah, I think it’s going to be epic. I think I put a thing on Twitter a while ago – I’ve been to a few conferences and I’ve spoken at a conference before, but I’ve never known as much work and planning and effort go into a conference that at least I’ve been to as this.

I think it’s going to be really enjoyable. I think the fact that it’s tutorials rather than just sit and watching somebody talk for 30 minutes you’re going to come away really feeling that you’ve learned something in each session which I think’s going to be great as well.

Jake: Yeah, I agree. I agree I think people will feel like they really, I mean when you go to a conference I think it’s hit and miss. Sometimes you come out feeling like wow that was packed I learned so much. Then, other times you’re like it was interesting but I might’ve enjoyed a session, but you don’t necessarily feel like I’m going to hit the ground running tomorrow when I start using this or whatever.

Mic [02:00]: Yeah, I definitely think you’re going to learn some skills in the conference that you can definitely take straight and start applying them to whatever you’re doing. I definitely think it’s the way to go for this particular conference. I’m really, really looking forward to it.

Mic and Jake’s Experience w/ Designers

In this episode of the podcast we’re going to be talking about mobile design: design inspiration, developers doing their own design work, that kind of thing. I know that you tend to do a lot of contract work Jake. Do you, more often than not, work with a designer or do you a lot of the design work yourself?

Jake: I do usually work with a designer, so it’s interesting. In the earlier days of the iOS ecosystem when I was getting started I did most of the design myself. I did a lot of games. I didn’t necessarily do the graphics but I would work with other programmers that were doing graphics or I would do the, I didn’t necessarily draw sprites or game art, but I would do backgrounds and I would do menus and layouts and stuff like that.

As the iOS ecosystem as gotten more competitive and the polish level has gone up, I found myself doing less design work because I’m not a designer. I’m pretty weak at least when it comes to actually drawing a button or picking out a color scheme or whatever. That’s certainly not my strong point. How about you?

Mic [04:00]: Yeah, in the early days, like you, did much of my design work myself. I do know me way around Photoshop and more recently Sketch. I can do design work, but I have also worked with designers and I find that preferable because what might take me a few hours to do they do it relatively, turn it around relatively quicker.

Also, those are the ideas guys. A lot of the stuff that I do I take inspiration from others. I won’t directly call it copying, but you can definitely see into my designs which apps I’ve been inspired by. But obviously if you’re working with a designer they tend to … they’re the guys that come up with that stuff which I think is another bonus of you can work with somebody that’s really skilled.

I worked with a guy based in Canada who was fantastic. He worked a lot with the contrast guys, you know Logic Pro and that kind of stuff. He’s done a lot of work with them. I’ve also worked with, when I worked on the Duck Duck Go, they had their inhouse designer who was fantastic to work with. Between doing my own design work or working with a designer I would definitely choose a designer I think every time.

Jake: Yeah, I’ve worked with a couple of design shops where basically they do, all they do is design websites and apps and stuff. They contract out their programmers. I’m independent, but they don’t necessarily have the iOS skills in house so they bring me along.

I found that in that case specifically I feel good with laying out workflows and things like that and functionality. Even things like the way an iOS app is supposed to work where the buttons go. Conventions I feel good about all of that.

A lot of times the design firm they’ll deliver this beautiful design, but they don’t necessarily have the familiarity with iOS and buttons are in weird places or they should be using a tab view navigation controller and they’re inventing some random thing. They’re doing something that looks more like an Android app.

I’ve had that too where I look at a design and I’m like this is gorgeous, but functionally it’s weird and it’s awkward. It depends on what part of design you’re talking about. Definitely when it comes right down to the point of drawing a button I would much rather have somebody who’s skilled do that for me because I just, yeah, I’m not good at that at all.

Mic: Where are you helped in your own design, so I’m talking specifically since iOS7 now? Have you found it easier with the transition to the new interface style, that flatter look? How is your morphism and is, well, just flat really because there’s no shadow. There’s no leather, no green stitching.

Jake [06:00]: Yes, I’d say yes and no. It’s much easier to use stock controls where you select the color palette and you put something together with stock controls. That looks passible and I certainly am capable of doing that. I find it harder to make things look like stand out good with this flat design.

Mic: No, I think so and I think that’s probably where working with a designer comes in because as somebody who’s not that way inclined naturally say you can only go so far. It’s working with people who specialize in that area that know the little touches that set goods to great.

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.

Capptivate and raywenderlich.com

Mic: Yeah, we actually use it a lot on the websites when we’re putting the tutorials and the video series together. If we’re looking for inspiration and that’s exactly how I use the site. I go through the, I can’t remember exactly what the menus called, the drop down menu where you’ve got all those listed.

You can go through and you can click and it’ll bring back just those where they apply. We use that if we want to. If for instance a recent video series we did on collection views we were looking for particular animations about how to move the cells around.

First port of call is Capptivate; let’s have a look at how other apps do that. Also, it helps us as well because we can relate or rather our audience can relate what we’re teaching them to an app that’s in production. It’s not just something that we can say that we’ve done this, but also we were inspired by such and such an app. Therefore they’ve got that one to one correlation between what they’re learning and then they can go and play with it. It helps us on all sorts of different levels.

Alli: I’m really glad to hear that.

Learning Design

Jake: As I mentioned earlier I feel comfortable with some elements of design, but when it comes right down to actually picking out a color palette and starting to put assets together I’m pretty weak. If I want to improve my, if I want to become a great iOS designer, how would I do that? What would you recommend?

Alli: I think there are a couple of sources I would probably direct you to. There are websites that can help a lot with color palettes like Cooler and things like that. Also, if you just take some time to hone your observation skills.

When you see something that’s working take a hard look at it and think how many colors are there in this screen. What is the relationship? Are they warm colors, are they cool colors? If you want to really nerd out, which can be very fun sometimes, but I can understand that’s going pretty deep, is read a book on color theory because you can learn pretty quickly that there are some principals that designers are applying when they’re picking colors, for example, that anyone can learn.

Another really great resource that’s out now is a book called “Design Plus Code” and I think it does a very good job of giving an overview of how to take that design driven approach towards your project and gives really concrete examples of a highly productive design and code workflow. I would check that out as well.

Mic [18:00]: Many of our listeners are in perhaps a similar position to Jake and I where we have got some visual design skills, but we want to improve them. If we were looking to say spend a couple of hours a day for a few months to do that what would you recommend was the best way to start? Obviously you’ve just mentioned reading a couple of books, but is there anything else that we can do and do repeatedly to improve those skills?

Alli: One of the things that, an exercise that I did when I was first starting out in architecture school, was to literally trace elevation drawings of buildings that other architects had created. I remember very distinctly sitting down in from of a Xerox copy of a drawing of the front of Monticello in virginia, Thomas Jefferson’s house, and just taking out my ruler and my pencil and just tracing it.

I think that if you wanted to spend a little time trying to recreate screens that you see that you think are particularly well done it might be an interesting discipline to do. Okay, I’m going to sit down and recreate this affect and see what does it take? How is this design layered? What affects are being applied? Just try to make it because I think you can learn so much by pulling apart the work of other people and analyzing the component parts. Once you get comfortable with those components then you’re in a position to attempt to recombine them in brand new ways that are uniquely yours.

Mic: I think now that’s really good advice because I think for a lot of people that don’t quite understand design, I’ve learned through working with good people, much of what you explained there, Alli. When I was a little more naïve you would look at a screen and you would try and recreate that screen from start to finish, top to bottom in one go.

Breaking that screen down into smaller chunks and looking at an animation or how a particular view is formed and how everything stacks on top of each other. I’m pulling it apart. I’m looking at each part individually is a much better way to understand what’s happening. I definitely think that there’s value in that and that’s helped me personally from working with designers.

Alli [20:00]: Yeah, I think just that process of tearing it down and trying to build it back up again you really understand why certain things are happening. I also think you start to understand the relationships that happen between elements on a screen and some things about the information hierarchy. Why is this type larger? Why is the designer trying to draw your attention here and what’s the effect of that? Why does it move in this way?

Hiring Designers

Jake: One thing I’ve noticed in the communities that I run in, I attend my local Cocoa Heads meeting for example, is that it doesn’t seem like the us coders and the designers, even who are both working on mobile apps, tend to mix very much.

I know some professionals just from working on different projects, but sometimes these are people that are working at firms and can’t actually afford to hire them as designers. Do you have any advice on where I can go to find good design for affordable prices?

Alli: I think that there are a lot of people who are posting on Dribble that you can reach out to if you like their work. I also know that a lot of the designers at these big companies sometimes do freelance projects on the side. If they’re really interested in what you’re doing sometimes you can get them involved in their spare time.

Yeah, I think the best way to find a designer like that is just to get familiar with their work and contact them. If you have a compelling problem to solve I think sometimes there’s a designer just can’t resist that.

Jake: Yeah, that makes sense. I feel sometimes the exact same way as a programmer. If somebody brings you a project that’s just really cool you’re like I want to work on this. I’ll do whatever it takes.

Alli: Yeah.

Jake: I know there’s some auction sites where it’s like a bidding war where, do you recommend those or do those have pitfalls?

Alli [22:00]: I can’t personally say I’ve ever gotten involved with that type of work, so I’m not sure what you’d be getting when you bid in that auction environment. What I can say is that I think any project where the parameters aren’t well designed and the communication between team members isn’t really good, you’re just going to run into problems and frustrations.

When I’m talking to people who are interested in working with me, I always spend a lot of time trying to figure out if they are making an ask that they really understand. That sounds kind of strange, but sometimes people will say I want an app, but they don’t have a nuanced understanding of what they’re asking for.

Those are the type of clients or partners that generally steer a little clear of just because it’s hard enough to come up with a really good idea and to realize it and to build an app. The undertaking is very difficult, but if you’re going to be changing your mind midstream or things come up and the team doesn’t work well together it can just be so much harder.

I think with some of those sites of auctions, I’m not sure you have that deep level of communication prior to singing up with those people. I think that you might potentially be a little more at risk that way.

Working with Designers

Mic: Okay, so let’s assume then that I’ve got my idea for an app as a developer. I’ve contacted a designer who’s willing to work with me to realize this into something that we can ship. I’m still a little bit naïve as to working with designers because this is first time I’ve done so. What advice can you give would be teams of developers and designers advice on working better?

Obviously you just said communication is a big part, but what else can each side do to make sure that they can go from just sharing idea to shipping the app?

Alli [24:00]: I think that making sure that the designer has a really good understanding of your technical capabilities and what your interests are can really help. There are times when a designer will not have a keen awareness of what the developer is interested in building or able to build and will propose something that will require a huge amount of technical complexity that the developer might not be interested in implementing.

I think that that can damage the relationship between the two disciplines when there’s just not a clear understanding of what each person can do and is good at. I think it’s another way of saying communication, but just being really clear about what’s feasible and what the goals of the project are and working back and forth and building on things and being iterative.

Design Inspiration, Mistakes, and Communication

Mic: Okay, that’s great advice. Moving on from we’ve got this team. We’re working really well together. You’re going to crack on now with the design work. I’ve pitched you the idea, you’ve already got some ideas for me. As a designer where would go to source some inspiration or is just the idea itself enough?

Alli: No, I would definitely look at other similar apps for inspiration. I would go to the patterns sites. I would check out Dribble. I would also try and conduct some kind of research depending on the project. It could be something like talking to potential users. If it has to do with some kind of environment, I would go to the environment. I would just try to immerse myself in all the details that are specific to the project so that I could get an inspiration that way.

Mic: Okay, great, just so going back a couple of steps for developers that are going to go out on their own rather than going with a developer. Could you list a few of the common design mistakes that developers should look out for?

Alli [26:00]: Yeah, one of the things that I think is very important when you’re making an app is just to think about the needs of the user possibly ahead of the conveniences of the platform. Thinking about what the experience will be like for people when they’ve got this app in their hand and when they’re using it in their life as opposed to maybe like what’s slightly easier to build or you already have the library for could be one thing.

Then, just from an aesthetic level try to limit the number of different fonts and type that you have onscreen and being more constrained about the color, like not using a ton of different disparate elements, but rather trying to limit yourself to just a few can really help the design feel more cohesive.

Jake: I mentioned earlier I got some designs from a developer and it looked like they were more familiar with the Android platform so they didn’t position things in the right places. I had to negotiate on that. Are there things that as a developer I may not understand about the way the designer thinks that would help me communicate or better present my idea to them? Does that make sense?

Alli: Yeah.

Jake: Things that I might not understand in that same vein. Where maybe they don’t understand how a tab interface works on the iPhone. What do I need to understand from a design point of view?

Alli [28:00]: I think designers are trained to always be looking for a series of visual principles. These are things like contrast or unity or harmony or the different colors that they’re using need to have a complimentary relationship. There’s basically this entire visual and aesthetic language that designers get trained in and they’re applying.

Sometimes that training causes a designer to approach a design for a screen in a certain way where they may be ignorant of platform conventions. I think that if you are a developer and you have that awareness it’s really important to make sure that the designer understands that they need to navigate both.

Both systems matter so much in this type of design it needs to be aesthetic, all of things that go into visual design. Those principles are really important, but they’re not going to work if when the user encounters them it’s in this wild new environment that doesn’t make sense or is sometimes antithetical to the way they’re used to interacting with other apps.

I think that what you’re seeing when the designer’s not demonstrating mastery of the platform is that they’re probably focused primarily on these visual elements. That’s a really great opportunity to educate. Both parties can educate because the designer can explain I grouped these things together up here because it’s visually balanced. They can talk to you about what that means. You can explain that we wouldn’t use tabs in this setting.

Where To Go From Here?

Mic: Okay, I think some really solid advice that we can all take something from. I think that’s as good a place as any to wrap things up. Thanks again for joining us Alli.

Alli: Thanks so much for having me.

Mic: It’s been a pleasure. We’ll be recording next week’s episode from RWDevCon. If anyone is heading out to DC for the conference then do come and find us and say hi as both Jake and I will there running sessions. That’s it guys for another episode. As always if you have any questions or feedback then don’t hesitate to get in touch by at podcast@Ray Enderlich.com.

If you do enjoy the podcast then please don’t forget to leave your review on iTunes. Hope you’ve enjoyed the podcast. Thanks for listening and we’ll see you again next time.

Our Sponsor

Interested in sponsoring a podcast episode? We sell ads via Syndicate Ads, check it out!

Links and References

• capptivate.co (Alli’s site)
• pttrns.com (another good inspiration site)
• Mobile Patterns (yet another)
• capptivate.co iOS app
• Design + Code book
• Dribbble (good place to find designers)
• Alli on Twitter

Contact Us

• Jake Gundersen on Twitter
• Mic Pringle on Twitter
• Email the Podcast Team

Where To Go From Here?

We hope you enjoyed this episode of our podcast. Stay tuned for a new episode next week! :]

Be sure to subscribe in iTunes to get access as soon as it comes out!

We’d love to hear what you think about the podcast, and any suggestions on what you’d like to hear in future episodes. Feel free to drop a comment here, or email us anytime at podcast@raywenderlich.com!

The post Mobile Design with Alli Dryer – Podcast S03 E03 appeared first on Ray Wenderlich.