Episode Links

Abridged Transcript

Gary Rozanc
So, in an interview you were asked, “What does print design have that web design doesn’t?” And your answer, “Another huge difference is the static canvas of print versus the fluid canvas of the web. Print designers can control the final outcome of a product in a way that designers can’t.” That really caught my interest. I’ve been caught up in the whole designers should code debate, leaning strongly to the designers should code camp. But I realized recently that I teach HTML and CSS, not because I want students to know HTML and CSS; rather, currently, there really isn’t a good way for students to show what their mock-ups look like at different screen sizes and thus that lack of control. So, how do you overcome this as a designer?
Amanda
Yes, so in that interview, what I was getting at is in print design you can really…you have your set page size and you can design right to that page size and of course in the web, that’s just not how it works. It’s fluid and so we have to take into account different screen sizes and so at Happy Cog we typically will design for small screens and large screens, so we’ll create comps for both of those sizes and then work with our developers to fill in the gaps. So, I think in the classroom it could be similar and just encouraging students to design comps for different screen sizes.
Gary
So, when you design those comps, what are you designing them in, how are you critiquing them, how are you putting them into context?
Amanda
Right, well we use Photoshop at Happy Cog and I actually am really into the new Artboard edition with the new Creative Cloud release so the Artboards, usually I’ll keep within the same file I’ll have the large screen size and the small screen size just in the same file and of course it’s just looking at it in context, so, exporting that and viewing it at actual size in a browser and then looking at it on your phone; I can just open up the Dropbox app and open up the png on my phone or even if I drop it in Slack, I can open up the Slack app on my phone so I can see what it looks like on small screens and of course that’s not taking into account every single device, but it’s a starting point for that context which is small screen and large screens.
Gary
All right, so that’s interesting, a way of doing it. Like I said, that’s why I taught HTML and CSS, because then they could (a) before we have…before there was Sass and all these live browsers, like Browsersync and stuff like that, they could upload it to a website and then just look at it on any device, but now that they can do that on, just like you said, Browsersync or something like that and can look at it on a device lab as a way to critique, is this the right font size, is this button the right size for the context? So apparently I was over-complicating it a little bit there.
Amanda
No, I don’t think those are…but yeah.
Gary
Well, have you been paying attention to Adobe Comet?
Amanda
I have. I’ve heard that it’s not releasing ’til early 2016 but I did sign up for that.
Gary
Does that look like and I don’t want this to become a promo for Adobe Comet, but this idea of that there’s a tool specific for interactive designers so they can prototype in context seamlessly, instead of doing that work-around like we’ll have two Artboards in Photoshop and kick that over to Dropbox, because if you stop and think, Photoshop isn’t the best tool for typography.
So, and it’s…yeah, it’s just not…it really wasn’t meant for that. How do you see this helping or are you interested in this idea?
Amanda
Yeah, I am really looking forward to the release of Adobe Comet because I think it just simplifies the process for educators as well to just, I mean, at least that’s the hope, so that educators have to introduce less tools to the students because it’s changing so fast and we have a lot of different tools that we can use but it’s a lot to teach students to show them InVision and possibly even more advanced prototyping tools like Quartz Composer, like those visual prototyping tools and then just getting into HTML, CSS, JavaScript, JQuery. There’s a lot to introduce to students but I think at least for the visual design and interaction design level, to be able to have that in one program I think will be really great. But that’s just the hope: we’ll see if it lives up to it!
Gary
Yeah. Nothing’s ever perfect but hopefully, and honestly, I’ve really be reflecting a lot lately about that and that’s what I keep coming back to is that I’m spending so much time teaching tools, not because they need the tools as a visual designer; I’m basically teaching them to be developers. They don’t need to be developers but if, like a poster, you can literally hang the poster on the wall, then you can stand back from it, critique it: is the typography the right size? Is the layout working and doing what you want it to do? Because you can’t see that on the screen and so I’m really looking forward to that. So, do you think that’s a good approach, giving them just enough HTML and CSS, just enough, or teaching them how to use an existing framework like Zurb or Bootstrap so they can do maybe more advanced critiquing of their layouts?
Amanda
I think personally it is really important to know the basics, if you want to go into web design, and I think like, an undergraduate I did not learn web design; it was focused more on print and branding and there was an option to take an elective in web design but it just wasn’t as exciting a field then and I went back to Grad School for many reasons, but one of them was that I wanted to shift my career more into digital work and I honestly was kind of afraid of code for a while, but once I got over that barrier of just understanding and being able to write HTML, CSS and knowing enough JavaScript to be able to take some JQuery plug-ins, that was just so empowering and I think now I don’t necessarily do that in my day job but I’m able to have conversations with our developers and understand what’s possible and so I do think it’s really important to just at least have students know the basics and if they’re compelled at that point to take that learning and advance that with more advanced programming then let that be up to them but I think if you want to go into digital, it’s really important to know the basics. And it’s not that hard!
Gary
This is…yes, it’s hard for everybody; it’s intimidating for everybody if they haven’t ever seen it or been introduced to that programming logic before.
But the problem that I see is, you can get them over, it’s the experimenting to figure it out: that seems to be the stumbling block, at least that I see in students every time I’m teaching is they don’t…there’s this comfort to…I don’t know if it’s a fear or a…I don’t understand what it is, but there’s this real hesitation to just try something. Do you have any suggestions? What got you over to, OK, I’m going to try this and if it fails, no big deal, or you probably didn’t even have that problem!
Amanda
No, I found I was the teaching intern, GTI they call them, it’s like a TA for a basic web design class and the students there actually ended up having designs that were too complex to implement and so I think that was the biggest learning obstacle for them was just to be able to design something simple enough that you can actually implement but I do agree, once you get the basic understanding it’s encouraging students then, just try something completely out of their comfort zone; I don’t know how you do that! I do think though, going back to your question about Bootstrap that Bootstrap is a really significant tool to just…it’s super-easy to pick up the basics and then you’re able to view that across different screen sizes and then build off of that, so I think that’s another thing that’s useful in the classroom.
Gary
That’s what I’m trying now, well, instead of using Bootstrap or Zurb I basically teach them floats, layouts and then, but quickly enough, and then I said, OK now we’re going to make a grid CSS file and then this way you can just plug your modules in, no matter how developed or under-developed and you can just see how they flow when the screen resizes or when the screen is in different devices and I’m happy with it, but it’s still…I’m spending so much time teaching the tool that I’m not really, oh that’s…stop doing the hero image three images underneath; stop doing these repeating patterns and let’s do something new.
Amanda
And the web is starting to all look the same!
Gary
And I think that comes back to design education, because we’re not pushing that experimentation like we’ve had a thousand years of printing on paper to push what we can do with it.
Amanda
And I do think to that that is the problem with some of these tools like Bootstrap where they start to look the same because they’re built on the same kind of foundation, so yes, it’s a conundrum! I’m not sure how we get past that.
Gary
All right, well, another thing I’ve been thinking about and this is one I’m really excited to talk to you about because you’ve done both print, you’ve done both web and interaction. So the one thing that I think varies greatly from print design to web design is actual interaction. The interaction of print design is limited and…well, it’s not limited but it’s debatable but the interaction isn’t given a considerable amount of time in the classroom where, unfortunately, this is carried over into web and more broadly, interactive design, so how something acts when clicked: does it slide in, does it slide out? Shake if information isn’t entered correctly, zoom in, zoom out, you know, all the different ways that you can animate and make something interact with the user. That’s fundamental to interactive design but isn’t properly stressed in design programs. So, how much time do you spend designing those interactions and what types of interactions do you design and think about?
Amanda
Yeah, it’s super-significant in web design. At Happy Cog we are always considering interaction and just like you said, it’s hover states, what happens onclick, things like that, and we do that just with comps and then just having conversations with our developers, so I’ll design a comp that is before click, just a link, and then this is what it looks like on hover and then if it has some kind of special animation or transition, I’ll probably send a link to the developer just showing, this is what I’m aiming, this is kind of what I want it to look like and then we’ll have a conversation about, just giving feedback: do you think that will work? Do you think that makes sense? How can we achieve this? How can we…do you think it’s possible? So that’s how we do it; it’s just static comps and conversation.
So, in that class that I was a TA for, the students learned basic HTML and CSS and we taught them CSS3 transitions and so they had to make a web page that had different animations just using CSS and so they had to create hover animations, click animations and then scroll animations and just throughout and have that communicate as well; not just do it because you can but have that be intentional and be able to defend why you’re using a hover state for that button and why are you using the click state for that other button; just have it make sense and be communicative and beyond that as well, I think beyond CSS, then they can move into JavaScript and JQuery.
Gary
That’s an interesting approach. Well let me back up. The reason I’m saying that’s an interesting approach is, when I teach web design, I’ve done it both ways: I’ve started with the simple single column, let’s focus on typography then let’s mobile first approach, then let’s go into layouts and then let’s then talk about the interactions. I’m just curious if…just approaching this is on a screen, you’ve got one interaction, you’re not looking at it in the context…are you looking at it in the context of the website or is there other content around that button or do you just go like a screen with a button on it and you’re just critiquing that interaction and talking about that?
Amanda
No, it’s definitely always within the content of the whole page, yes.
Gary
OK, so do you give them that content or has it been iterative where they’ve made that content around it, then they put in the button, then they design that interaction?
Amanda
Yeah, it’s iterative and in this example, they had to create or determine an object that they wanted to make their website about, so an object that was personally important to them and then they had to write a story about that object and then have at least three different pages that were linked to throughout that website and then the animations, interactions were just linking them to those three different pages within in the website and each page described something else about the object. So the content was pretty simple and minimal, but they did have to develop it themselves.
Gary
OK, yeah. Have at Happy Cog or at other places, have you seen anybody use After Effects or Flash or Keynote to try to prototype out those interactions?
Amanda
I have seen Keynote and also InVision is pretty limited but we do use InVision at least to show a user flow but not After Effects; at least, not at Happy Cog.
Gary
OK. Just curious. Everybody seems to have a different way of doing it right now because there is no one perfect tool so everybody’s ad hoc made their way. That’s really interesting because for me, that’s the one thing that I think we are, as educators, I think we are really, truly, really, really, really behind on is the actual designing that interaction as opposed to the layout. I know it’s part of the layout but I just think that’s the one thing. Is there a print parallel to interaction, besides the only one I keep coming to is turning the page of a book?
Amanda
Yeah, turning the page of a book. I think it just depends on what the print artifact is. You’re interacting with the poster hanging on the wall; like you said, business’s cards, you can hold those in your hands or if it’s a brochure. With the book I think about Abbot Miller’s quote about a book is a movie you hold in your hands, so it is an experience but it’s just…it’s not like the web!
Gary
All right. Oh, here’s another thing that I wanted to talk to you about. In another article…no, I think it’s in the same article you wrote on Happy Cog, on their blog, you stated, “After years of working independently, it feels great to be part of a dedicated team again. So, in Graduate School, I spent a lot of time in my own head, likely over-analyzing every last detail of my own work. Now, I’m building a website collaboratively and working on complex projects that I’d never be able to do solo. The many perspectives brought to the table improve the work and it’s more fun too.” So, I struggle to bring a truly collaborative working process to the classroom, especially at the undergraduate level. For example, I have students work in groups, guide them in how to divide up the work so the sum is greater than its parts, but in the end, each student wants to work on their own creative vision. How can an educator replicate that team approach to design practiced in digital agencies?
Amanda
Yeah, that’s very challenging. I think the best way to do it is to have it be multi-disciplinary if it’s possible to implement that at your University, because then it’s not…you don’t have five designers that really want to do the visual design and have their own vision for what the visual design UX looks like. If you have a multi-disciplinary team then every person is bringing something else to the table, something different to the table and everyone’s going to have a different perspective so I think that’s in my experience too been some of the most successful projects that I’ve done in school is when you have a couple of visual designers on the team and then you have…I’ve been on projects where actually in Grad School, so it isn’t an undergrad, but in Grad School I was on a project team with like I said, two visual designers and we worked on the visual design and the UX, then there were two social designers on the team and they did a lot of the design research with us and then we had a computer science major. This was with another school as well, so not just …computer science major and a journalism major and so everyone was bringing different perspective to the table and it just, it makes for really great conversations and it really pushes the work forward and in many ways that’s replicating what’s happening in a studio as well; you’ll often work with other designers or course but you also have project managers and the developers were bringing something different, sometimes even a content strategist who are bringing their own expertise to the table so again, I just think multi-disciplinary is the best way forward.
Gary
You know, this is like one of those Aha! moments that I feel dumb for not realizing that you’re right: I’m relating it to a class I’m teaching this semester; I gave them a choice of either working in groups or working individually and a few, they formed two groups and everybody else went off on their own and one group has continued to do a group project, where the other group, they had to split up and now that I go back and look at the makeup of it, the one group that split up, I think each one of those students identified as a visual designer, where the group that didn’t break up, I think that one of them identified solely as a visual designer; another one looked at himself as a front end developer and then the third one was like, I do both. And so I think that is why that…that’s a really great observation. That’s probably why that one worked, is they were different enough to be compatible.
Instead of the same. And I would love to be able to collaborate with other departments across the University but that gets challenging just because of credit hours and logistical stuff that I think Faculty probably would but it just becomes like how do you marry the two classes and it’s just logistics: how do you get them together for credit is tricky and so that’s why I don’t think we see a lot of it.
Amanda
I was just saying, it’s definitely easier to do that at Graduate level.
Gary
Yes, yes it is because they’ve got…it is, just the way the credit system works, the classes are meant to be more like that at Graduate level. But that’s really good insight. So, following up on that, on collaboration and the working process at a digital agency, can you describe a recent or memorable interactive project that you’ve worked on and how the working process from the introduction of the creative brief and getting or generating content all the way to completion of a project, how that process is different from how projects are assigned in the classroom?
Amanda
Sure. So, I am fairly new to Happy Cog; I’ve been there about six months so I still have yet to be on a project completely from beginning to end. I’ve dove into a couple right when I started that were half way through and I’m on a project now that I’ve been on since the start but it’s ongoing. There’s a lot of ways that it’s different from the classroom but I think what’s great about Happy Cog in particular is that designers are not just working on visual design; we’re given a lot of responsibility and I love that; we’re able to think about content, we’re able to do wireframes and user experience and think about not just what something looks like but how it works, so I really appreciate that at Happy Cog and I think that’s probably similar to the classroom though in that, as a student, you have to come up with everything: you’re not necessarily always on a group project where you have other people to fill in those other roles for you. So, I like that about Happy Cog. I think what’s different is that you have stakeholders and clients that are going to have to weigh into how something works or what it looks like that you don’t have in a classroom. In a classroom you’re able to completely control what the outcome is, which is very different from the real world situation!
Gary
No, that’s…and it’s designers critiquing designers gets a little bit cannibalistic there. The reason I asked that question is, I’m just going to use Airbnb for an example. Somebody had to design that. But they had to design that experience; they had to design the look; they had to design the interaction; they had to design all those different parts to it and I don’t know for sure, but I’m assuming that they weren’t done in isolation from one another.
And so, given theory that they were all done together at the same time, I’m trying to think, how would I replicate that in the classroom? But also, still teach the modularity, the minutiae that you need to teach but also this broad spectrum that you need to teach. Am I assuming right on that process, that you’re involved in everything?
Amanda
Yeah. I think what’s difficult to replicate really in the classroom is end users.
Amanda
If there’s any way that you could just tell your students that even though this is a student project, you have to keep in mind how would someone use this, what is this communicating and if possible even bring that to potential users or even if it’s testing with your classmates or students in other departments that aren’t necessarily well versed in design. Being able to test it on other people is really an important step in the process. So, that might be a way to bring some of that more real-worldness to a classroom.
Gary
Do some more good, old fashioned user testing. All right. On user testing, is there…you’ve probably got a lot of that from Ohio State, I bet, right?
Amanda
Well, like I said earlier, I didn’t learn web design at Ohio State but because it was just, at that point, people were coding with tables, it was a different era of web design but I did get a solid foundation in process and design research at Ohio State.
Gary
So, what were some of…some of that research that he did or that you did at Ohio State, what were some of those that translated well that helped you in Grad School, helped you at Happy Cog?
Amanda
It’s a long time ago to my days at Ohio State but it’s definitely provided a really solid foundation for me in both my experience working in branding and now working in digital web design. Just the basics of like I said, knowing how to approach a design problem, knowing how to conduct design research and thinking always about the audience and the end user; that’s so significant and that applies to whatever field, whatever aspect of the design field that your students are going to go in, that foundation is going to help them.
Gary
So, now that you’ve gone through both an Undergraduate and a Graduate degree, successfully worked in the field and teach classes within a design program and you understanding the constraints of the classroom, what would you do in a design program, or in a class to prepare students for entry level interactive design positions at agencies like Happy Cog?
Amanda
That’s a good question! The class I currently teach is Typography 1 and then next semester I’m teaching Typography 2 but I really would like to consider maybe for next year a web design class and so I’ll be thinking about that in the coming year, what I would include in a class like that, but I think it’s trying to do some of the things that we’ve been talking about in the classroom context, besides just the solid foundation of graphic design principles and working with type. Having good type skills is super-important and so introducing that, especially in of course a screen context; introducing how to work with web fonts, that would be really great to do in the classroom and then of course, like I said earlier, user testing would be really important and then prototyping, with whatever tool is used at that point.
Gary
Yeah, and that’s how I actually approached Beginning Typography when I do teach that is, it’s almost like a compare and contrast. I say OK, we’re doing a typographic hierarchy exercise. Here it is for print; here it is for screen. So they can see that, then OK, let’s work with a substantial amount of typography in a blogpost versus maybe it’s a spread or something that there’s more reading focused as opposed to just dealing with the hierarchy of information.
Amanda
And you do that in a Type 1 class?
Gary
Yeah.
Amanda
Wow!
Gary
I go back and forth, just one to next because, I don’t know, it makes them see that there’s a difference, that it’s what you do on the screen in InDesign, Photoshop, Illustrator is different when it gets printed out on a piece of paper but it’s also radically different when it’s actually put into a browser or put into a phone.
Amanda
I found though in Type 1 at least, and this is my second time teaching it, I found that for the most part, the students aren’t quite ready for screen based type!
So, this semester I’ve started just a very, very basic introduction to screen based type by just having them take a print project, so right now they’re designing posters and then creating what I did a lot of on the Obama campaign; creating share graphics for social media, so it’s basically I describe it’s like a digital billboard so you’re taking the essence of that poster and putting it on your social media share graphic and imagine what it looks like in a Twitter feed or a Facebook feed.
And that is interaction but it’s still just step one of this is what your design looks like on screen.
Gary
No, that is awesome because I keep saying that email is the most under-designed but most widely used piece of communication out there but I don’t know anybody, I’ve never at any portfolio review I’ve been to, any educator I’ve ever talked to, any student I’ve ever talked to, nobody’s ever assigned, let’s make an HTML email.
So I love that you’re doing that with the social media and starting to.
All right, so Amanda, thank you for your time, but before I let you go, is there anything you are working on that you would like to share or something you want to promote?
Amanda
Sure, sure. I think it’s important to introduce students, of course, like I said earlier, to a really solid foundation of respecting the design process; teaching them that iteration is key to getting successful design and also that they need to know how to present their work. Being able to talk about their work and defend every design decision beyond just, I like this, or it looks good and going along with that is being able to write about their work.
And produce their own content. I think it’s really difficult to get students to do that but it’s again, really empowering for them to be able to create their own content, at least basic content to use in their own projects. So that’s all I would say is just make sure that you’re introducing those things to them in the classroom.
Gary
Do you have any suggestions for doing that, for the writing? Jeffrey Zeldman is constantly writing. Frank Chimero is constantly writing. Anybody who’s at Happy Cog is constantly, the whole entire team is constantly writing. And it’s so important for designers to do that nowadays, but how do you…is there a way that you promote that in the classroom or is there ways that you would, oh I would like to do this, to get them to do it more?
Amanda
Well, in the classroom, ways that I’ve done it is when they have to develop their own content, like right now I just introduced a new project, and they have to write their own content for their type specimen books and so what I’m doing is having them create a presentation before they actually start the design work where they have to gather content that will go into their books, beyond just…it’s a type specimen book, but beyond just showing the character of the typeface and all of the glyphs in the typeface; beyond that I want them to also dive into tell me why it was designed; tell me what was the designer’s intent; tell me who the designer was and any historical information, so having them make a presentation about it I think is really important because that forces them to do the research and come up with at least a starting point for their content and I encourage them to put their own personal touch on it in some way, so that’s a very basic way to force them to get to start creating content. But as far as writing, I think it’s, at least at Happy Cog, I’m constantly writing in my Evernote if something comes up in the middle of a design project and I just think, oh I need to make sure I investigate that later, that could be a blog post, something like that, so I use Evernote all the time for just snippets of thoughts and things that I learn as I’m going through a project and then I think it just really helps to be forced to write blog posts; the hardest part is getting started but once you start, that’s the hardest part.