Episode Links

Abridged Transcript

Gary
So, the first question I wanted to ask you comes from a statement you made in our email conversation. Could you explain what you meant by, “I strongly believe that we’re currently witnessing an organic merger between traditional design philosophies and the interactive space we fondly regard as web design.”
RuSean
What a wonderful time this is to participate within this industry. I’ve found that where we are right now with web design is a merger, where these traditional mediums such as what we would regard as the print space can be applied within an interactive space. We see the advancement of browsers such as Firefox and Chrome and Safari allow interactive designers a full range of opportunities to employ a very robust creative experience that is also applicable to the web…excuse me, the viewing experience on the web. In the past we would see websites that might be image-heavy; we would have to slice websites or slice images which didn’t necessarily apply very well towards performance. Today we can have very robust approaches to typography in addition to CSS animations, there’s just a brand new world available to interactive designers.
Gary
So, to expand on that a little bit further, when you mentioned the more robust typography or, specifically the performance and you can’t just throw images up on a website and expect it to be completely functional. To me, those are new design fundamentals. I don’t think they existed; some of them that you just mentioned didn’t exist before. So, what do you think are the new…what are some new design fundamentals that we need to add to our tool-belt?
RuSean
Well, certainly we have to begin to think perhaps on a different plane, because of responsive design, for example, the concept of a grid has evolved. A grid on the web today is transformational from one media device to the next. That’s something that particularly for a young designer or a student they’re going to have to think beyond the static grid and begin to work towards a grid that is flexible and fluid, depending on your device, with your device type.
Gary
OK, so up until this semester, I’ve been teaching a very HTML, CSS-heavy web design course because I wanted students to be able to test their responsive designs and interactions on real devices and browsers. This was problematic because we didn’t have enough time to focus on the visual design because of the learning curve involved to understanding and being able to use HTML and CSS. This semester, I’ve backed off the HTML and CSS thanks to new tools like Adobe Experience Design and Sketch and InVision. So, what are your thoughts on this balance between code and design?
RuSean
I think the approach that you’re beginning to take I think is excellent. There’s a happy medium there. I will say, I’m a very strong advocate that all designers, regardless of your particular area of expertise, need to learn how to code; I think it just makes designers a little bit more broad in that range, or that space rather. But I would say that there is a happy medium where students can then learn to prototype. It allows those concepts to then come to life without them being perhaps overwhelmed by limitations with learning some of your web languages such as HTML or CSS. For example, InVision is such an excellent tool; designers can show their comps or show their prototypes but also present it in a way that for example, a client can see in real time how this concept would work, function on a mobile device or on the tablet or a desktop presentation.
Gary
OK! Do you want to talk to us a little bit about your process, what you’ve experienced?
RuSean
InVision changed my life. Before, we were taking a lot of time to simulate what a website, a static image, would look like within the browser. InVision allows just a very quick and rapid response, just in terms of being able to get your work to clients and allowing clients the opportunity to provide feedback and it’s a very seamless opportunity. In terms of process, what I would say is that regardless if you’re wireframing or actually building out a high fidelity comps, certainly that moment when we can put that concept before the client and be able to speak to the vision in how this site is ultimately going to perform; I think that provides…that makes a designer’s life a lot easier.
Gary
OK, so like I said, previous semesters I would teach HTML and CSS because I wanted them to be able to put something in the browser, because I don’t think they could truly critique the typography until it was in a device that it was going to be viewed upon. Same way with columns; you had to be able to see them in the browser. And so that’s the one problem I see right now with experience design, with InVision or…InVision’s making a plug-in; they bought Silver Flows which is now Craft so to be able to do this right inside of Sketch is, OK. In responsive design, you kind of…you don’t have a tablet view; you don’t have a desktop view; you don’t have a mobile view. You have views that it looks good at this size but then once it shrinks, it starts to break down and it’s no longer appropriate. So, that’s how you determine your break points when the typography gets too scrunched and the optimal reading lines has gone. Or columns become too skinny and content flows in a very awkward way so then you have to go from four columns to three or to two, then down to one. How do you go about determining that with…because that’s not built into InVision, or that’s not built into Adobe Xd CC? You’re stuck at pre-determined sizes which really isn’t responsive.
RuSean
I think that there’s some trial and error with experience and certainly after you experiment and certainly make some mistakes along the way, you have a tendency of resolving some of the limitations of presenting static comps at various different screen sizes. One thing I would say, for example, is I would know that in some instances, if I go down to a mobile view, I might have to increase the size of my typography a bit. This isn’t an exact one to one translation, perhaps if you’re designing in Photoshop, if you’re designing in Sketch, but with experience, I find that we learn from some of the mistakes that we’ve made and really work towards optimizing performance and optimizing the viewing experience for the user.
Gary
OK, and this is the process that I’ve tried to work around this semester, since this is the first time that I’m doing this and what I’m doing is, I’m having them do their static mock-ups in either Sketch, Experience Design; basically I’m having them do it in any program they want that they can either prototype in or export to InVision and I’m having them do a large format and then a small format and then I’m going to have them kind of take that and dump it into a CSS grid, a framework, so I’m figuring that at least if they put it in there, if they then just start expanding and contracting, they can see where this…oh, in this grid, where this thing starts to break down and they’re not encumbered with learning so much HTML and CSS; they just have to kind of learn to plug it into the grid so they have to have base knowledge of HTML and base knowledge of CSS. What do you think about that as a process?
RuSean
Certainly I think it’s experimental; let me just firstly say, let me thank you for really being at the forefront of teaching responsive design; it just shows you how the industry has evolved, where we’re now thinking of ways of teaching up and coming designers better processes towards achieving these goals. I think that plan, actually it seems experimental but I think that it could work. The ultimate challenge is, how do we take a visual concept that might be flat, two-dimensional and it doesn’t interact and allow students to really see the light at the end of the tunnel, how it work. There’s that period where maybe your ability to code might be lacking and you might not always be able to see or understand the polished, finished product, so I think I’m really encouraged to see that you’re pushing that type of strategy forward.
Gary
Well, thank you, and it comes back from…so I’ve been doing this podcast for almost a year now and everybody’s process seems like there’s no universal process and everybody’s doing everything differently and it just dawned on me, more so with the release of Adobe Experience Design that the industry itself is struggling with how do we do this.
RuSean
I don’t know if there has to be a right answer. And I think that there’s beauty in the sense that we’re all learning; even the professionals, even those who’ve been in the industry; someone with twenty five years of experience in the interactive spaces has had to evolve quite a bit and this is just…we’re just in this current phase; it’s going to continue to evolve, so I think that the experimentation, particularly from the standpoint of one who’s teaching, is really necessary into eventually applying a standard: perhaps further down the road we’ll arrive at what we would regard as a standard of teaching responsive design, for example, but we’re still at a phase where we’re experimenting.
Gary
Totally; I’ve been working with HTML and CSS for a long time! Before there were actual HTML editors, before there was CSS I was actually designing in tables and so I quickly forget that responsive design, the technology to do media queries is only six years old. This is a fledgling profession, if you really want to think of it, because the ability to do it has only been around for such a long time. So it is exciting to be around this time because the industry itself, we’re pioneers; everybody at this stage is figuring out how we’re going to handle this thing. So, on a different train of thought: you’re currently a working professional but you’ve also taught in the classroom. So, as I’ve been doing this podcast I’ve been getting a lot of feedback that students aren’t prepared to be in client meetings and be part of the dialogue. Then it hit me: when I assign a project, I’m giving students all the details; I’m not giving them a chance to work in a process that mirrors what the process is like at a firm or an in-house agency where you’re asking questions, you’re getting insight from the client. So, having worked in both the classroom and the industry, what can educators do to fix this or replicate client meetings along the way?
RuSean
I don’t think there’s any real substitute for actually working with a client. I think that students need the opportunity to intern; they need the opportunity to interface directly with individuals within the business community and work towards meeting the needs of that specific client. However, I will say within the academic space, every student, I believe, it’s my philosophy that every student should have a voice. I’m not afraid to present a project and allow students to re-definite the project for themselves. What is your voice? What is your vision? So, in so much within the graphic design field, it’s really an exercise of problem-solving and that’s what we’re doing for clients: we’re solving a problem through creative means. Sometimes those problems are complex. So, having an understanding, to be able to articulate your vision, making your creative decisions purposeful and not arbitrary, so maybe you can speak to why you chose this value of blue, or this value of blue is neutral enough that I can then use a wider array of colors that will harmoniously interact with this neutral value of blue. If you can articulate that to a client, that’s very important and perhaps trying to explain why you’re arriving at the decisions that you’re making, other than the simple fact that, well, I like blue. Well, that’s nice! So I think that visual communication that is expanded upon as a problem-solving exercise, if students can grasp that idea and that concept then I think they’re actually on a good footing.
Gary
I’m glad you mentioned the problem-solving. The way I look at it, when I traditionally used to hand a project to a student, I’d say: you’re going to design a website that’s going to serve this purpose, I kinda get a feeling that they’re not really doing any problem-solving at that point because I’ve already gave them…I’ve said the problem is X, website is solution; now decorate solution. And so I think we’ve kind of gotten into this weird realm of we’re decorating pre-canned solutions instead of really stepping back: whoa, is a website even the right solution for this problem? Maybe an interactive email campaign would probably be more beneficial: we’re kind of denying the students the process of determining if what the client thinks the need is, is the actual need. Does that make sense?
RuSean
Yeah, I think…there’s some grey area there certainly. I like to think that there’s a problem and a learning opportunity within every aspect of life, perhaps, more broadly. But certainly if you’re handing the student the website, or the project, saying you need to design the website, perhaps it’s the concept that they’re employing: maybe it’s beyond just simply designing a website. Maybe that space, or that problem that you present to them will lead or evolve into something that is much more robust or dynamic than just simply a static website. Maybe it’s involving gestures; maybe they’re redefining what the concept of a web page is or the web viewing experience. So, I think when you allow students to experiment and you challenge them to think beyond what the problem that you’re presenting as a professor will be, then I think that you’re really in that sweet spot of learning.
Gary
I’m glad you mentioned that because that was one of the other observations that I’ve been having with…so, when I teach HTML and CSS, I could see students wanted to do things that couldn’t be done with their current understanding of HTML and CSS, so they just stopped innovating because, well, I can’t do it. So I’m hoping with this switching back to like, no, we’re going to do these mock-ups, we’re going to do these prototypes and this will open up their creative freedom: no, I want to try this, I want to try this and I want to try this and they don’t have to worry about can it physically be built: they just need to be able to demonstrate it, and so I hope that opens up some of the experimentation that I think is currently lacking in the way I go about things. You have a lot of experience working in the interactive design industry. From your experiences, how prepared are entry-level students from print or print-heavy programs, how prepared are they to work at an interactive agency?
RuSean
That’s a very good question. It’s interesting: I can only think back to my own experiences. My first job, I graduated from Maryland Institute College of Art and was very fortunate to be able to get a job working for an interactive agency. I had a ton of creative ability and an ability to design and a technical understanding of how to use design tools. But I didn’t know how to code and I was very fortunate that I was in an environment where there were peers of mine or co-workers who really taught me how to code HTML and code CSS at the time and the funny story is, when I finally got it, it’s almost like that scene in The Matrix when Neo begins to see in code; I’m like, wow! It was such an empowering moment when I figured yes, I can now be able to create the types of websites that I want to create. So I think that certainly, you’re seeing more students who are prepared, particularly from fluency of being able to use, being able to code HTML or CSS. But I also think those entry-level employees, many of them will have to learn and learn fast. I have the philosophy that all designers should know how to code. It isn’t necessarily a requirement but I think that it certainly makes a team a little bit more well-rounded. In addition, when you’re transitioning between, as a designer, maybe you’re going to work, hand your designs off to a front-end developer. Well, it really helps if you have an understanding of how the design translates into a fully functioning website. For example, if it’s using typography, if it’s the arrangements of your composition within a given grid; maybe you’ve used a bootstrap grid so your design should hopefully employ perhaps what the bootstrap grid is and then you can then hand that off to your developer, which might make for a more seamless working experience.
Gary
Yeah, that’s something that I’m…well, let me back up on this. Definitely they need to know…how much HTML and CSS do you think they need to know because I think it’s a really crazy fine line between understanding HTML and CSS so you can work well with others, but knowing it enough…but then all of a sudden you’re almost in the realm of, now you’re a front-end developer. Do you know…do you foresee…where do you think a good balance is in that?
RuSean
Yeah, I think that I’d like to know, and this is just me personally speaking; I don’t speak for all designers. It’s good to know how the design that you’re producing is going to be executed. And even having a game-plan in your mind of what I’m designing is going to then…this is kind of the plan in my mind of how this is going to be built. And I think that that makes for a very seamless transition towards actually building that site; whether you’re coding it or building it yourself or whether you’re handing it off to another developer, even if you’re a freelancer, you’re going to hand your design off to another front-end developer or engineer for them to build, I think it really empowers the designer to really have an understanding, perhaps not a comprehensive understanding of HTML, CSS or even JavaScript, but I really do think it’s a benefit to know it. How much should they know? I think enough to understand a structure, particularly within HTML, understand a structure of your divisions or your sections, how you want to lay out, if it’s a responsive design, how your code is going to break down. It makes a difference how you arrange your layout so that it can naturally collapse into a functioning, responsive piece.
Gary
You know, let me ask you…this is something I’ve been thinking about and I haven’t actually really bounced it off anybody yet, but as we…when print design…purists would want to be on press; they would want to go and they’d want to…they would understand the paper, they would understand the offset press, they would want to be there to check color consistency: they would understand…they didn’t have to be master printers, but they had to know how an offset press…and same with typography or same with silk-screening. That was this hand-craft that really helped you understand, if you knew how to…there’s a couple that I really admire, they’re called The Little Friends of Printmaking and they had this poster that was black ink on black paper. If they didn’t understand the printing process, they never would have known that you could do that and then you could actually see it because there’s two different tonal values because the paper was matt, the ink had a slight varnish to it. So I think HTML and CSS is almost the same kind of principle where, do you need to know it? No, because you can hand off a mock-up to a developer, a front-end developer and they can make it work for you, but you’re not going to know the subtleties that you can achieve using HTML and CSS, just the way you don’t know that those subtleties that you can do with printing or with silk-screening or with offset printing, or letterpress printing. How does that analogy sit with you?
RuSean
I think it’s a very artful metaphor. I would…yes, I think designers should be vested in the process; they should be vested in the process of not just how the website looks, even before, we’re talking about right now about HTML and CSS but there’s often a strategy that goes into work on the web. Understanding the marketing strategy maybe: what are the needs of the client and what are you designing for? How are your, in the industry we have, action items that we call “Call To Actions”: these are links that probably need to be clicked on. So, having an understanding of the overall strategy and then having an understanding, or at least a competence, of how this website is going to be built. So I guess the term that I like to use is, I like designers to be vested, fully vested in the entire process.
Gary
Yeah, and I think performance comes in under that umbrella as well because in print, you know…oh, I can’t afford to have four color printing: I can only do one color. In web, there’s a performance budget, just the same way as there’s a print budget, so I think there’s a lot of those parallels that we need to be looking more at.
RuSean
It’s interesting, you mention silk-screening. My own experiences with screen printing, I did it enough where I understood how to do it. I think that perhaps I’d rather have someone else do it for me, so maybe that directly relates as an interactive designer where you know how to code but maybe you’d prefer for your front-end all-star to produce that for you.
Gary
I’m with you, because I know how to silk-screen; I had my own screens and I was going to print something for my wedding, I wanted this big poster that people were going to be able to sign as kind of a like a guest book and I was going to silk-screen it and I was like, you know what? I’m going to hand this off to somebody else. I’ll work with them but I’m going to let the expert do this, and I’m glad I did because there’s no way I could have done something as big as I did and done it as accurate as they were able to.
RuSean
So, we’ve come full circle because we’ve fully compared silk-screening or even maybe letterpress to web design, so it all works together.
Gary
Yeah, it really does, it’s just that there’s those new things like in letterpress, you don’t have to worry about your columns shrinking and you have to have…they’re fixed, so like you said, I think that grid is…I like how you said that that grid is that one thing that’s…how do we handle that responsive grid, more so than really anything else. So, we’re coming close on time so I have just one more question I would like to ask you and so that is, just ten years ago, design was a print-heavy industry and the standard identity system consisting of a logo, business card and stationery set, along with a gig or social cause poster, maybe some kind of book and a brochure with a mix of typographic exercises, that’s all you needed to see in a student’s entry-level portfolio to be able to judge proficiency in design. So, as somebody who’s been in the industry both pre and post, we’ll say media queries, is that type of portfolio still relevant in interactive design or is it lacking?
RuSean
Absolutely, I think it’s still relevant. Certainly things are going to evolve and we’re going to probably want to see our students learn more and get more exposure to the industry and to the changes and advancements within the industry; I think that we’re going to see portfolios change a bit but one thing, for me, I often look at the execution of typography. One of the questions that I often ask, perhaps on an interview might be, what’s your favorite typeface? And if you’re really vested in learning or actually applying yourself within design, you tend to find you’re drawn towards certain aspects of it, and it’s similar to print: in so many ways, we’re just learning a new medium to apply our ability to communicate visually and right now the medium is certainly interactive; these experiences, they’re in our cell-phones, we have an intimate connection with design, whereas perhaps in the past, it might have been a brochure, it might have been a poster, it might have been an identity package, so we’re really living with it. Everyone, for the most part, seems to have a connection whether it be like social media or whatnot, so I think that ideally I’d like to…it’s a very good question; I think students or entry-level employees…it’s OK to have the more traditional pieces but I think things are going to change as we continue to evolve.
Gary
Just one follow-up question: the reason I ask that is, literally, this popped into my head the other day was, I saw…business cards still relevant, but I saw stationery and that was like the vehicle to apply your logo and your corporate colors. I was wondering, how relevant is that? Wouldn’t it be probably better to have students, instead of designing a logo on a letterhead, wouldn’t it make more sense to have them design it on a Facebook page? Or in an email or on their Twitter feed? Designing it within those contexts because those are radically different than stationery and maybe because I’m an educator, I can’t remember the last time I’ve seen anything on stationery.
RuSean
That’s a very good point! It interesting; I’ve actually recently been designing some business cards and stuff like that so I guess, as an interactive designer, I still have my toes in the traditional print space somewhat. But I think it’s a both end solution: understanding the difference between designing for on-screen for 72 dpi, maybe resolutions are changing now because of retina devices and things of that nature, but let’s just say RGB versus CMYK, being able to understand the different modes for the different platforms that you’re designing for I think is certainly important, so yeah, you’ve brought up a very good point, it’s like the world is a lot more broader than just simply designing for a stationery letterhead, which were traditional mediums back then and when you consider, we’re really putting this into the context of business, the web presence is so important, so I really see your point I think yes, it’s very relevant to see email newsletter templates or a Facebook page design, a logo placed on a Facebook page: I think that’s also important, but I wouldn’t necessarily throw away some of the old guard techniques as well.
Gary
Alright, RuSean. Before I let you go, is there anything you are personally working on that you would like to share or something you want to promote?
RuSean
Yeah, I want to give a special shout-out to my students at Towson University, teaching Graphic Design 1. I’m very proud of the work that we’re doing at Towson University. Also I want to recognize the company that I work for: Center Tech Solutions. I believe we’re at the cutting edge of really taking a progressive approach to…many of our clients are within the healthcare space, so clients like Rush University Medical Center: I’m very proud of the work that we’ve done for clients such as that; please follow me on Twitter @ruseanmyers and Gary, thanks for bringing me in; it’s a very enlightening experience.