Episode Links

Abridged Transcript

Gary Rozanc
I greatly appreciate you agreeing to do this. I’ve read a few of your articles on Smashing Magazine and your article in Net Magazine, but I’m really interested in an article on Brolik’s blog, titled, “From College Life to Digital Marketing Agency.” The article got me thinking you could be a great person to give insight into how prepared or underprepared entry-level designers are coming out of school. So from your perspective, are graphic design students generally prepared?
Drew
You know, I think as far as the work goes, a lot of graphic design students are pretty prepared. We can take someone coming out of college or even, a lot of times, a senior in college, and they have good typography skills, they have good design chops, usually they even have a really good knowledge of the industry. The one thing that I think might be lacking a little bit is some of the less tangible stuff—that initial email, the presentation skills, that kind of thing, which is not a student’s fault. It’s kind of like that transition from college life into real world life. So I think we don’t hold it against students, and I think most firms wouldn’t hold it against students, but there’s a very big difference between someone directly out of school and how they communicate than with someone who has two, three, five years experience.
Gary
I’ve talked to enough design firms and heads and they all keep coming back to the same thing…it’s almost business development skills. They don’t know how to present their work, they don’t know how to work with clients, they don’t know how to do all these things. And as a designer educator, I’m really sympathetic to that, and everybody’s asking for it. Where I’m kind of stuck though is is that stuff that educators should be teaching considering that we are the educators in the classroom, not the ones that have that “boots on the ground” experience in the industry working with clients on a daily basis. And how do we balance that? How do we incorporate that into a curriculum?
Drew
I don’t think it’s important to get really in depth. Like as a design educator, it might not make sense to really focus on exact wording and presentation of the individual. Presentation of a portfolio is different and I actually think that’s pretty well taken care of. We see the actual books from a graphic design candidate are usually pretty up to snuff, like very high quality, good craft and all of those little details that matter.
I think the thing that students don’t realize that educators might be able to just kind of touch on or just kind of make students aware of would be more of the…it’s almost like personal brand. So, it’s like you have a really nice portfolio and you come into an interview, and everyone pretty much knows to dress well and that kind of thing. But then they’re not necessarily prepared, like they don’t have an exact order or pacing of their portfolio, or maybe if you ask them a question that’s a little off the beaten path, they might not have an answer ready and fumble over their words. So, it’s those little things, which really by themselves are not that big of a deal.
But I think it would be helpful, coming out of school, to learn or just to be aware of the fact that an employer is going to judge you on everything from that initial email on. And not just judge you on, “Did you use correct grammar and spell the company name right?” which is actually something—a lot of people actually spell our company name wrong in the email, which is a little crazy. But it’s also are you mature; do you show enough respect in your email for the employer’s time; do you show that you’ve taken care to do a little research? Is it a personal one-off email? Because sometimes you can tell that it’s basically just a copy and pasted template email that they might’ve sent to 10 to 100 companies. I think there’s not enough teaching exactly what to do in those situations, but more like saying, “Hey, pay attention to these situations. This is an important factor.” It’s not just about giving them your portfolio link so that they bring you in. They’re judging you on a few sentences and comparing you to a number of other candidates based on a few sentences, so those sentences are important.
Gary
Great. I was lecturing my students—actually yesterday—about that, the one-off template for the email. I said, “No, you have to write something specific to each person. Do the homework.” What kind of work do you want to see in a portfolio? Again, you’re a digital agency? Is that safe to say that?
Drew
So what we do, as a company philosophy we do a lot of development work. I mean most of our work, in some way, involves the web or code. But we are a design-first shop. So all the work that we put out, whether it’s a web application, whether it’s marketing campaigns, or even we do monthly reports for our retainer clients—all of that work is design focused and designed. So when a candidate comes in, we like to see that they have some knowledge of the web, web trends, possibly even code, because a surprising number of design students, like graphic design majors, are learning code in school.
But more importantly than that, we like to see that understanding of applying the design mentality. So, not like the exact rules of print design or things like that, but taking the idea of communicating information and of organizing information and playing to the medium, those kind of soft skills—we really look for that. I think that most clearly translates into typography, and we even tell a lot of candidates when we’re interviewing that we really focus on the typography. Typography on the web has taken off in the last couple of years and it’s something that used to be really limiting for web designers and now it’s like the sky’s the limit. So, now we can take all of these design principles and apply them to web, so it’s a different beast.
So if we see an all print portfolio, that’s actually okay as long as we can kind of see that that can translate to the web or as long as something they say when they’re talking to us shows us that they’re thinking about the web and they’re thinking about different devices or how a user would interact with something as opposed to a traditional print design. You take a poster or a brochure, people might be turning the pages or looking at it but they might not be interacting with it, and that brings up all kinds of design concerns. So, it’s not about mastering those concerns out of school but it’s about understanding them and giving us a clue that the candidate can handle that kind of thing.
Gary
This is kind of an aside, my own personal question: why do you think there’s been such an emphasis on typography on the web lately? Because to me, the only thing that’s really changed is the proliferation of the fonts that you can use, because the tools for hierarchy, line height—not kerning, of course—but all those other tools were already baked into HTML and CSS, so why have they been ignored up until recently? Does it coincide with the fact that you have real sets of fonts to use now?
Drew
Yeah, you know what, I think that it coincides in that when there weren’t widely spread—when you couldn’t easily use a web font and you kind of had that choice of six system fonts or whatever it was, I think at that time as a designer it’s kind of disheartening or discouraging. So, you build a site and you’re using arial, and it might not be conveying the brand or conveying what you want to convey, so I think as designers, people just kind of give up, for lack of a better word. It’s kind of like, “Why am I going to really treat this type or really care about the line height when it doesn’t look how I want it to look anyway?” That’s not really a correct way to think obviously, and there have been people, since day one of the web, who’ve cared about type and who’ve done nice things with the tools we had.
But yeah, I think as soon as basically Google web fonts…I think Google web fonts being free and being really easy to integrate spurred all the other web fonts into popularity. But I think just seeing a different font or seeing the ability to combine two fonts in a nice bold header font with some really easy to read body copy—I think those things just kind of encouraged designers to take it to the next level and to start caring about whatever—line height, kerning, all that kind of stuff.
Gary
That brings up another problem that I run into, that I’m wrestling with as an educator. So, I will teach design principles, I will teach HTML, CSS, responsive design, and I’m doing all this technical stuff, but I’m not teaching exploration, and I think that kind of comes into the typography. Like, “Yes, you couldn’t use fonts, but you could explore hierarchy, you could really push that in size and scale to achieve the same thing.” So, there’s this lack of exploration on pushing the medium of web design. I use Firstborn—they did this Pinterest bomb, where they took over Pinterest and they just basically used this print campaign that utilized the web medium in ways that nobody ever thought humanly possible. I’m starting to wonder myself—is that lacking? Like, that exploration in web that has been there for years upon years in print. Are we just stuck in doing the same ’ol thing?
Drew
Yeah, I think there’s a lot of that. There’s even people who write about it as far as the kind of boilerplate design that people do and that kind of thing. But I think also, at the same time, the only way that the web as a medium has grown is by people exploring and pushing those limits. So, I think what it probably is is it’s a handful of people who are saying, “I’d like to do more. How far can I push this?” and then those kinds of things eventually become standard on the web.
And then there’s this much larger population of people who are web designers by trade maybe, and whoever else who are just kind of following those trends, they’re just kind of saying, “Here’s what I have to work with, so here’s what I’m going to produce.” Instead of saying, “How can I make this happen?” even if it’s a really big challenge and even if there’s all these concerns, they just kind of say, “Oh, you can’t do that on the web,” and they stop. I think that there are enough people who push it that it’s not detrimental to the web as a medium, but it would be amazing if more people would think of it as an evolving, growing organism and not think of it as, “This is the web, this is what you can do,” more as “What do I want to do on the web and what can I make happen? And where will the web be in two, five, ten years?”
Gary
Yeah, I’d love to figure out a way to incorporate that in the class, but it’s a Catch-22 because they need to be able to make something to then figure out how to do more advanced stuff. It’s this logic loop that I keep getting stuck in.
To get back a little bit on the topic of students, where you see them not being prepared in presentation, like in what type of email to send…There’s so many resources on your blog. Are you going to be doing one of those?
Drew
Yeah. We’re in the process right now of creating just that resource. And actually, it came about—so, we weren’t thinking, “How can we teach students to be more prepared to go into an interview process or to get a job?” We actually came to this idea because we wanted to do a marketing campaign for ourselves where we weren’t really marketing ourselves, something where we could give back a little bit; something where we could get some traffic and maybe they see our logo but it’s not a hard sell, just because we do other things that are harder sells. We did one very successful kind of “give back” campaign, and frankly we benefit a lot from it. It does benefit us but it can also benefit other people. So we’re thinking, “What can we do? What do people want? What do we see that could help people?” From there, we came to this idea of what we’ve been calling a toolkit or a survival guide, which is kind of like a quick guide to getting a job and getting out there into the world.
So, it’s going to be like a microsite, is the best way to describe it; a couple of pages where you can enter and you can say, “I’m a designer” or “I’m an interactive designer,” “I’m a developer,” a couple of different options. And then you can just see some really good, helpful, quick resources. So, we’re including things like that email stuff I was talking about, like what to say, how to send an email, some quick tips. Then we’re going to have even some little snippets, some examples of “This is good and this is bad.” We’re going to have publications you should read, specific articles you should read, even people that you should follow on Twitter, things like that, and just kind of give a quick overview so someone can feel prepared, so they can kind of say, “This is how I keep my finger on the pulse.” From that resource, in theory they can explore forever and find everything they need to know but it’s not going to be too overwhelming at first.
Gary
I can’t wait for that because, in addition to helping the students, I think it will also really help us as educators. If you’re taking time to, say, give this advice, it’s obviously something that’s a need that you see is missing.
So I think that’s valuable feedback to educators. Like, this is what the industry sees missing from the work and this is how we see we can help fix that gap. I think educators can also kind of take a look at it and see, “Oh, okay. I can easily spend half a class, make them write an email as part of a project.”
Drew
That’s what we’re hoping for, too. If we do it right, it’s going to be something that educators will want to share with their classes and maybe even want to share with other people just because it’s a great resource.
Gary
I’m definitely looking forward to it. I’m actually also really interested on your take on motion. I think motion is a formal design element for hierarchy and emphasis is critically under-taught in design education. So, you’ve written the article, “Motion: The New Skeuomorphism,” and using motion for user experience on apps and websites on that subject. Can you elaborate on this importance of motion?
Drew
Motion is becoming a popular topic. Like, I think we’ll start to see a lot more of this. But the idea is that web has been breaking away from print as a medium, there’s all kinds of things people are realizing and it’s changed so much. At one point in my career, I was telling people, “Remember: the web is not print,” like it’s important to know it’s a new medium, because it was very much like print. I feel like now it’s very much on its own, and I think part of the evolution of the web is kind of like, “Hey, we can move things on a page and we can add transitions and do little interesting things that aren’t actually visual and aesthetic, they’re functional.” So in real life, when something changes it’s not like you snap your fingers and it changes. In real life, everything has transitions and everything moves and that kind of idea.
So, why not take that into our designs, because it’s only going to help usability and it’s only going to improve experience for someone? When they click a button for a menu and that menu slides out instead of just popping into place, that’s a much better experience and they kind of get some context on where that menu came from or why it happened, and it feels much more natural. So for me, I am very big on responsive design and writing about that and pushing that, but at this point it’s very accepted. I mean, responsive design is web design now. I don’t need to be on a soapbox about responsive anymore because in general people buy in and people get it.
I was on this kick for a while of, “What’s my next soapbox?” more or less, and I realized that this concept of motion can be huge and it can be really important just as far as creating a better experience. It’s really cool to do motion and to do little bells and whistles—I like that. But that’s not meaty enough for me. What I need is I need that user experience element and something to say there’s a function behind this. And because there’s a function, then it kind of took off in my head and now I’m very big on it; I’m incorporating it into all of my work, and like you mentioned, I’ve written a few articles so far and hopefully more to come.
Gary
As you mentioned, it’s no longer “responsive web design,” it’s just “web design.” So, design education is still catching up to that. So, it doesn’t surprise me when I see mostly print-dominant portfolios, this lack of motion to draw attention to an element; it doesn’t surprise me that we don’t see more of it. So I’m wondering, how do you train somebody to do that? How do you expose this to employees when they come in? How do you make them aware that motion can be used in this powerful way that they haven’t really thought of?
Drew
The initial explanation, the initial a-ha moment for someone—that takes a little bit of effort. So, I can show someone my articles or I can just explain this concept, but actually once people get it, it really makes a lot of sense. I feel like most everyone I’ve explained it to, and definitely the people on my team here, just got it. It’s like, “Oh, yeah, that makes sense.” And not only does it make sense, but it’s fun. So for a designer, it’s kind of like, “Wow, that’s functional and better for the user, but also this is kind of awesome. I can spice things up, I can try new things.” That part is pretty easy.
I think the slightly trickier part is something else that I alluded to in my article, which is the first step is getting the motion in there, but the second step is doing that motion right. You know, kind of listening to the laws of physics so that it looks correct, because people brains are used to the real word so they need to see some of that easing to start, easing to stop and some of those kind of things, where if you don’t do the animation right it actually stands out and detracts from a website. So, I think that’s where…I mean, that’s also fairly easy to teach because it’s more or less you add some easing into your motion, you make sure that context is there, that things make sense with where they’re coming from and where they end, and then people get enough that they can kind of take it from there and explore on their own.
Gary
Yeah, I wish I could remember where I heard this from, but somebody basically said, “If you think it’s the perfect duration for the animation, cut it in half and then it’s perfect.” Because yeah, there’s something magical about motion for designers—when they see it, they’re like, “Oh wow, this is so amazing and I love it,” and they go a little bit overboard on it.
Drew
Oh yeah, and it comes from animating, like moving something on a screen, and you watch it as a designer, and you watch it slowly start and then slowly stop and it looks really great and you just forget for a second that the user is not going to be watching it, they’re just going to be subconsciously taking it in. So yeah, all of a sudden you have this really slow, potentially beautiful transition, but yeah, it’s twice as long as it needs to be and actually not very usable.
Gary
With the animation, does your agency stick to just basically doing CSS animations or do you go into jQuery and JavaScript animations?
Drew
Yeah, I mean we try. Basically, just out of good practice we try to stick to CSS first. So if it’s possible to do an animation in CSS, we will, and if it’s at all possible to use like a translateY instead of moving a margin…there’s little things that we’ll do that we think are better for performance. So, we definitely stick to that. But in the end, if you can’t do what you want to do in CSS, move to jQuery. We do JavaScript stuff without jQuery sometimes but mostly we just use jQuery because it just allows—especially designers, who aren’t as “in the woods” with the code—it allows you to animate things easily. But that’s more like the universal concern of “Don’t rely too much on JavaScript.” And I think most people rely a lot on JavaScript and we rely a lot on JavaScript, but you don’t want to unnecessarily have something rely on JavaScript. So, basically that mentality would translate into the motion.
And then the other thing we’re doing recently, which is really cool at least on a personal level—I mean, I’ve been loving it—is doing a lot of SVG animations. The way we do it a lot of times is actually CSS, but that gives you some really cool control and it’s a little more like merging Illustrator or a vector artwork program in the web, and so that’s been really fun too.</dd>
Gary
Your last answer leads me to this next question: in addition to design, you list a lot of development projects, including creating a CMS and jQuery plugins that you’ve done. How did you get these development skills and how important is it that students be that mythical unicorn that can code and design?
Drew
Yeah. So, I got all of my development skills, or at least 99% of them, from Google.
Yeah, and I love telling people that because a lot of times people just think it’s this crazy thing and you have to go to school and all this, and I’m sure that I would’ve learned a lot faster if I were a CS major. But what I did was when our company started we actually weren’t doing web design at first, but we saw this opportunity in web design. So as the designer of the company, I was like, “Well yeah, I’ll learn to code.” And so it literally was typing every question I had, as it came up, into Google. In the beginning it was like, “How do I change a link color?” and I would just write that. And then to now, I still to this day will use Google to help with things, but it opened up at one point. So now, I can go find my answer in two seconds flat, whereas when I started I would weed through a lot of stuff I didn’t understand, and there would be trial and error, and I would look something else up in the process of my original question. So I think that way is definitely how I learned and I took it much further than I would say the average designer would need to, especially if you work for a company that has developer.
Back then, I was doing both design and development. Now we have 16 employees, so now it’s a little different. We all collaborate and we’re all multidisciplinary, but we have dedicated developers. So the designers, they don’t have to know the really deep code, but at the same time, we really encourage—I might even say require, but it doesn’t need to be a requirement, everyone wants to do this—we encourage all of our designers to know that front-end stuff. So, at least to know CSS, to know enough jQuery that you can work your way through. So even if a designer can’t do something complex in jQuery, they might ask a developer to help them, they can go back in after the developer has written it and tweak things and really get that pixel-perfect attention to detail that is important for design. But yeah, it’s more like the more code you know, the more of a bonus that is. But you have to know at least enough to speak to a developer and hopefully enough to tweak your own design, to get that last final polish onto your designs that you originally created.
Gary
I’m going to ask you just one more question before I let you go because I know your time is valuable, but it has to do with mock-ups. How do you want to see designers do mockups nowadays? Because I think that’s fundamentally changed. It’s no longer just, “Let’s throw something in Photoshop and that’s a mock-up.” you need to be able to show that animation, that motion; you need to be able to show these different breakpoints from the different devices it’s going to be viewed on. Has how designers do mock-ups changed?
Drew
Yeah, I think it’s currently changing and it’s been extreme. I think for us, we definitely, like most design firms, started out where we were doing full Photoshop comps of every page of every website we built. It made total sense and it was actually very important for clients to see that a lot of times. It wasn’t like you could just have a client trust you on a design. They’d want to iterate on a design and have revisions before it even gets to code.
But now, all the things you mentioned and especially since responsive design has gotten popular, everyone is kind of trying to figure out the best way to not only design efficiently but to also present that to clients efficiently. Because it makes a lot of sense from a design perspective…I could use Photoshop, or there’s a lot of Photoshop competitors that are doing really well—I could mock something up for myself, I could take it to a certain level where I understand it and then move right into code. But that doesn’t work for a client and it especially doesn’t work for a client who’s paying a lot of money and they need to make sure that everything is on track.
What we’ve done is we’ve moved from the “all Photoshop every page” comps to this in between system where we’ll design maybe one to five top-level pages and then we’ll design, if there’s a specific feature or something that stands out on their site, we’ll design that, and then we’ll do a UI kit. We call it a UI kit; people call them all different things—style guides, style tiles, which I guess are technically slightly different but the same idea. And then we combine that with wireframes. So, we’ll do full wireframes to show a client every page, but we combine wireframes and then those system designs. And we have to show a mock-up of the homepage usually just because clients still need to see that, but I imagine that might even go away at some point. But for now, it’s the mix of the wireframes and the system design.
And to account for responsive, we use UXPin for wireframing, which is a great tool. I know a lot of other people that feel the same way. But you can actually show them a lot of the responsive stuff in there and you can make little notes in there; they’ll put a little pin, and so when the client views the UXPin presentation, they can kind of roll over these pins and see notes. So a lot of times for motion or if there’s something a little more complicated, we just put in a note and then we get on a phone call with the client and explain it to them.
Gary
That’s great. Drew, before I let you go, is there any advice you’d like to give design educators, or are there any projects you’re working on that you’d like to share that we didn’t discuss already?
Drew
Well, as far as projects, I think the most appropriate and exciting thing we’re doing right now is going to be this toolkit survival guide or whatever we end up calling it. I think that is going to be something really cool and hopefully something that we can get a lot of traction with, so I think I’ll leave it at that.
As far as the design educators, kind of what I touched on as far as the emails and the initial presentation, I think to wrap that up into something that would make sense to teach: I think it’s this concept of being an adult first of all and being a respectful equal when you approach a company. So, if we get an email from a student—typically a student has no idea, they’re nervous and they have no idea what a normal work interaction is like, and they don’t know the person they’re emailing, they don’t know if they’re really big and scary or if they’re really approachable and nice. I think a good concept that educators could potentially help get across is just that everyone is a human. So if you’re a mature and respectable human, that should come across in all of your communication and conversation, and kind of that idea that you’re ready to be an adult, for lack of a better word.
Drew
Yeah, and it’s really an advantage more than anything else for the people that do it, because it’s not like I hold that against someone. But I definitely notice when someone comes in and they approach an email or a phone call like they’ve had five years experience and not like they’re brand new, not knowing what they’re doing.