Episode Links

Abridged Transcript

Gary
So, my first question is, how do the visual designers at Planit go about creating designs and then testing them in a browser to ensure the typography is appropriate across all devices, the content and the grids flow properly across all sizes. How do they go about that? How do you?
Meagan
Well, first we do initial designs at mobile and pre-determined desktop or laptop size and scale things up or down from there. I’m used to staring at my giant Apple display all day, but most people are using touch devices now or smaller laptops so it’s much more fun to design on a larger scale but we try to focus on optimizing the experience there and then scaling things up for larger screen sizes. But as far as, initially, when we’re putting designs into InVision, you can pull, for a mobile design you can pull it up on your phone in InVision; you can scroll through, you can see if the font sizes are readable because in general, even experienced designers will make things very small and hard to read on mobile so it’s helpful to look at things in InVision and just kind of get an idea of how that looks visually, but then once things are in dev, especially when some front end’s finished, that’s when we usually do the optimization for the different screen sizes and then we’ll provide recommendations to the developer, so to save ourselves, too, from needing to design each break point, we’ll usually just sketch a rough of how things will stack and break so we use the same grid: not the same grid for every project but we use the same grid across the board for that project and then we can just kind of do a rough and tell the dev how it’s going to break down.
Gary
Do you want to briefly explain the grid? Because that’s the one thing that students…they fight it. I don’t quite get…there’s a…they don’t like it!
Meagan
I think some people, some designers don’t like it either!
Gary
Yeah, but you can break it; it’s a really good starting point to keep things consistent…
Meagan
…consistent. Totally, yeah and I think too you’re not married to a twelve column grid; you can have a fourteen column grid or you could have a twenty column grid; whatever it is that you need to achieve that website. So I think a lot of it, as far as even other people I’ve met who don’t like using a grid is that it really locks you into a structure and especially if you were taught print design first; you’re used to having a blank canvas and so there’s nothing really hemming you in, in any sort of way. For me, I find some boundaries to be hugely beneficial in designing because it helps me narrow my focus more quickly and I can really provide the best solution for that problem if I have some sort of boundaries. If things are really open-ended, it’s really hard, but do you want me to go into specifics about what the grid is, exactly?
Gary
No, no; we get the general idea of it, it’s just the students really…they don’t use it. It’s like, let’s see your grid structure and they don’t have it.
And even though we tell them to do it; and really, when I go about trying to explain it to them it’s like: it’s not the grid; it’s about relationships. The grid’s just a tool for you to make things relate to each other. You could easily do that without a grid because it’s just all lining things up. You don’t need a grid to do it but no, it just makes it easier in the beginning and then you get experienced, you can do that without having a handy tool and I’m just curious…you answered the question.
Meagan
I think too I just…it’s a loose structure and you can make it however you want to make it but especially, again, it’s that thing of working in a vacuum. Unless you are a designer and developer, you’re probably not going to be working in a vacuum and so the grid structure is something that developers just…I mean, they know all that. That’s how they build a website and so it not only saves them time because if you have a grid structure they can very easily break it down intuitively, they’re going to know how stuff stacks based on that and it’s also good for you as a designer to just be spatially aware of what’s going on with your site because sometimes you’ll design things and you’re looking at a long comp and you won’t be thinking of how things are breaking out in the visible screen and so I think having the grid there just helps you organize it that much better.
Gary
And I think that’s a great way to explain it to the students: I’m going to paraphrase this to make sure I’m on track, is that you have to hand this off to somebody else, so if you want to ensure the accuracy of what you send off looks like what you envisioned using the thinking or the system of a grid which is easily understandable by the developer, it’s going to help you get consistency!
Meagan
Absolutely and I think too, it saves you from having to micro-manage someone because of course, nobody wants to be micro-managed, but if you’re not following a consistent grid, you’re going to have to sit with the developer or provide very, very detailed annotations about every break point, every screen size: everything, because there’s no sort of structure there but obviously everybody’s not having the exact same experience when they’re visiting a website from a different device but the grid just helps it fill…I guess, fill in the blanks is a good way of putting it.
Gary
All right; so, back onto my…back on track, I was thinking about how I handle Responsive Web Design. I still think visual designers need to learn HTML and CSS, because they need to understand the medium they are working on which is a heck of a lot more complicated than understanding ink, paper and the different printing processes. So, from your experience, stopping short of producing the mythical unicorn, just how much HTML and CSS would you like your visual designers to know? You can give specifics.
Meagan
I do. I don’t think that every digital designer needs to have the full capabilities of a front end developer, but definitely a working knowledge of HTML and CSS is important. Specifically, and a lot of it has to do with typography; digital typography where different line heights and font sizes, as well as column widths are more readable on different devices and screens so you can’t just scale up and down indiscriminately and it’s not something a developer will always pick up on because they’re not as focused on the visuals, so it helps if you can tell the sizing, letter spacing, font weights, etc that you would recommend and to kind of add onto that, as far as the typography goes, thinking of the structure of all of the HTML elements you’re going to need and keeping them consistent across the board so a lot of newer digital designers will have a wide variety of headline and body copy sizes and there’ll be inconsistencies with even things like links and unordered lists and so when you’re framing your design and you’re thinking of typography in those ways, kind of anticipating the developer’s needs, it just makes things go so much more smoothly and the other thing I was going to mention is the grid structure, like we talked about before; they’re really complicated but it is a nightmare for developers if you don’t understand what you’re doing and you’re using a variety of grids in a single project so again, it’ll be more intuitive for them if you’re using a consistent grid and you can hand it off and it’s all done.
Gary
Yeah, well I think the key term there is consistency; as long as you’re consistent. The grid is a tool to improve consistency.
Meagan
Absolutely.
Gary
Style guides are a tool to improve consistency.
Meagan
Right. Oh, and the other thing I did want to mention too is having that, just a working knowledge of HTML and CSS; you’ll know immediately what’s possible to build and what’s impossible and I think every new digital designer ends up designing their first website and it looks like a print piece: type is really small, you see long stretches of screen space where there’s not a lot of information because they’re looking at the whole canvas size rather than the visible screen and there is a lot of practicing that goes into designing a great user experience but it’ll save a lot of time if you already know what’s possible and impossible from a development perspective.
Gary
Yeah, I know; I think my favorite example of the print comparison to that is there’s a…they do silk-screen, they’re called The Little Friends of Printmaking and they make these awesome, awesome illustrations and posters and one of them was black paper with black ink.
Meagan
Oh yeah!
Gary
I mean, intuitively, why would you design that because that’s obviously not going to work, unless you know the medium of silk screening, you know you can have that the black ink will actually show up because it’s not going to match the tonal value of the black paper and it’s going to have this really amazing effect.
Meagan
Yeah, that looks awesome.
Gary
And you don’t think to do it because, unless you understand the medium, and I think that’s where we need to get to with HTML and CSS: you understand that medium, you can then bend it!
Meagan
Oh, absolutely.
Gary
Do things that people haven’t thought of before. All right, so, another area where I’m having trouble is with micro-interactions and you kind of mentioned them earlier. By that, I mean animating drop-down menus and buttons, page transitions, modals, alerts; all that stuff. So, to improve the user experience. So, if I want my students to focus on micro-interactions, I’m either teaching them After Effects, so they can mock them up in that, or I’m teaching CSS animations which is probably more complicated and leaves very little time for the actual visual design, so I feel like that stuff is just like an afterthought right now. So, how does Planit handle the visual design of micro-interactions so the client and the developers can visualize the end result and go about actually making them.
Meagan
I know, that’s really hard because After Effects is such a complex program that just teaching basic proficiency in that I imagine is really difficult: you could probably spend the whole class on it. We do use After Effects to animate visual comps. Sometimes too we will just find a precedent elsewhere on another site to get the feel across and we also will have developers mock something low-fi up just, this is how the menu’s going to load, or this is how this transition will work, just to give a client an idea of how that goes. I do think that as far as students go, maybe it is less about the digital design here and it is more about showing what you’re doing but kind of like how Dribbble is in those little snapshots; maybe it is just part of the class is just developing a few little snapshots in CSS; doesn’t have to be visually designed so well, but just to give an idea of timing and also that knowledge of the CSS animations or the After Effects animations, whichever way you go with it, but timing is an important thing and that’s a big part of being a digital designer too is transitions and when stuff’s coming in and how it’s staggered, so that would be another thing that would be great to incorporate if possible.
Gary
And one thing that’s worrisome for me, and you’re not the first person to say this, but will grab something that’s already done as an example and then re-build that and the other one that I’ve heard people say when I ask them the same question is, we already have house styles for that.
Which is, I mean, it works but it doesn’t lead to…it’s kinda like a closed loop; it doesn’t lead to exploring and coming up with new ideas and so I think that’s where…it’s an exciting time; we can actually really push the envelope on what we can do.
Meagan
Absolutely.
Gary
A concerted effort to make that change.
Meagan
Well definitely as a student, if you’re setting…if you’re beginning in that closed loop of just, I’m going to grab a precedent and I’m going to use that and you’re not actually creating or learning the different options or…that will be limiting for you in the future whereas I feel like as a more experienced designer, art director, maybe you’re short on time and so you are for a certain project finding a precedent from another site works way better than coming up with something custom for this client but you definitely don’t want to inhibit anyone’s creativity, especially starting out in school.
Gary
Well no, and it’s also I understand budget; they come with the budgets: OK, you can have this custom experience or you can have this pre-canned experience. Totally makes sense and it’s worthwhile but if we just keep defaulting to the pre-canned experiences, we’re not learning to push the envelope…I hate to use that term!
Meagan
Another…one thing that I find really useful is there’s a blog called Codrops and they’ll have…you’re familiar with that, but that’s really helpful for just those little things that maybe you’ve done a select field a thousand times and you’re running out of ideas on it and they’ll just kind of refresh your creativity so there it’s less borrowing that as a precedent and it’s more like…oh yeah, I don’t have to think of select fields in the same way I’ve thought about them the past twenty times…they don’t have to be an afterthought, I can do something exciting with these, even though it’s just a part of a form.
Gary
I don’t know what it is about those; they’re just awful. Alright, so my last question in regards to critiquing and testing visual designs has to do with performance. Do the visual designers or digital designers take performance into consideration, or does that happen after the project is handed off, if you’re not working like that Agile design process where developers and designers are sitting side by side?
Meagan
Right. And performance is absolutely important and it’s something that the designers and art directors are considering from the beginning, so in that initial client brief that I was telling you about, we’ll get the target audience and device information and we can design accordingly for that. Usually device it is across the board, stuff has to work on every device. If it’s directed at younger audiences, generally that’ll be some sort of tablet or mobile more often than it’ll be a desktop but that can help inform how we’re designing moving forward but checking the speed of things is really important, so load times, minimizing the number of typefaces and weights; having conversations about how we’re handling video if we’re streaming it from YouTube or Vimeo or if we’re hosting it and optimizing photography is important too because often we find that people aren’t used to saving stuff for the web so they’re not optimizing jpegs or they’re uploading huge files to websites and of course that will slow your site down so much, so, knowing where you can cut corners to optimize things whilst still keeping the visual integrity of your site is really important.
Gary
I would love for beginning photography classes to start doing photography for the web. For example, you’ve got portraits where you’ve got these really…a person standing and they’ve got this beautiful backdrop of Central Park and the thing is, that’s a massively huge file but if you just simply changed your depth of field, depth of focus where the background’s now blurry but still enough visual information that you know it’s Central Park but the person is in full focus, it almost cuts the file size in half. And nobody’s…not that I’m aware of…nobody’s really teaching it from that perspective of performance.
Meagan
Right, exactly.
Gary
How to make your file, take your photographs better so they’re more performant from the beginning and then the optimization, we should be just doing that, the file size, we should be doing that from the beginning.
Meagan
Well even things like, on something I designed recently, we had an image where a woman was on an isolated background and there was texture to the background but it was a pretty large image and so we just clipped out the woman and we put her in there as a .png and then we used a gradient color background in CSS for the background of that, so it ended up making things a lot more lightweight. Thinking of things in those terms too where, how could I make this load faster? How do I translate this into something that works better digitally? That’s all really important.
Gary
That’s really smart, and understanding the medium. If you know that you can have a background image, you can have a gradient background that replicates texture; if you don’t know that you can do that in CSS you don’t know that you could do that.
Meagan
Right. You just plug in an image and large file size.
Gary
That’s me. I never would have thought of that. That’s pretty cool. All right, so, based on your experiences, what are interns and entry level interactive designers missing that design educators should be addressing in the classroom?
Meagan
I do think it’s hard to be trying to learn the basics of design and composition and also this more trade-specific practical knowledge. The workflow information is so important so I’m really glad you’re addressing that. And the understanding of the structure in HTML and CSS and like I mentioned before, I would say even simple things like optimizing files for the web and specific user experience knowledge would be very useful. Not just user behaviors either but also things like wireframing and information architecture. It’s not the most glamorous stuff but it’s definitely practical knowledge that we use daily and it would give young designers a leg up, so I know that some young designers that I know, in their first job were thrown into a position where they had to wear a few more hats and their boss would be like, right, we’ll wireframe this; bye! And they’d just be kind of stuck: what is a wireframe? So I think focusing on the structural elements too; it could just be glossing over but it would be really helpful.
Gary
We’re getting close on time, so I don’t want to take up too much more, but I do have a follow-up question about wireframes, because I’ve talked about it in previous episodes and I’ve come to the conclusion with wireframes we’re as educators or in the classroom are using them kinda wrong. When we tell the students to wireframe, it’s not information architecture: it’s a rough sketch for a visual design. Is there a difference between the two? Did that make sense, what I just said?
Meagan
No, it totally does. I don’t think wireframes should be designed at all; they’re very much just like, these are the structural elements we need based on user statistics or the data we have; this is how people are behaving so we need a call to action here…performance stuff and basically it would just be yes, to plan out the structure of your page but more so to make sure that you have all the elements there. I don’t think that wireframes are always best client-facing; I think they are a stronger internal tool because clients have trouble visualizing stuff; they’d almost rather see the final design than a wireframe, so we certainly do show clients wireframes here but for me personally, I feel that using them as an internal tool to make sure all of your boxes are checked is a way better way to go.
Gary
Yeah, because…and I think that’s what happens when we tell them to do a wireframe, they think of sketching out their ideas visually and so the clients see it the same way: they look at that as a design piece, not an information piece.
Meagan
Yeah, absolutely.
Gary
And so that’s a trouble. All right. Specifically, what types of projects or experiences would you like to see design educators incorporate? These could address problems you’ve just identified or be something that you have been thinking about.
Meagan
Again, like I said before, as much as I hated the group projects in college, I think that’s such an awesome idea because again, even if you’re working in a small company in this field, you’re probably not going to be working in a vacuum, so, letting go of your own ego and relying on team members for their expertise is important. I think also basic program proficiencies and maybe that’s an after hours extra credit thing. I learned a lot about the Adobe Suite and how to develop HTML and CSS from after-hours; at my first job, I was doing a lot of Lynda tutorials and investing my own time into Code Academy and taking things apart and putting them back together, but it definitely made me a much stronger digital designer and I think finally, I think the user experience sort of thing and maybe that’s just a part of a class, but I think that is really helpful because in my opinion, one of the greatest things about digital design and why I prefer it over print is that we’re solving problems and really at the end of the day, the end user is what matters to us, so the client could want anything; I personally could want anything, but that doesn’t really matter: it’s about getting the right results and delivering that final user with the right products.
Gary
Can you just define a little bit more what you mean by user experience, so you can put it in the context that you…there’s a lot to user experience!
Meagan
Oh yeah, no, there is and I think that that’s everything from…we do research on demographics and get data from Google Analytics about who’s going to the site and I think it’s as subtle as knowing what appeals to Millennial soccer mums versus what appeals to a different target audience; that’s something that you don’t really think about usually and then it can be kind of uncomfortable to think about once you’re in a job and you’re like, I have to really narrow down to these broad specifics of what this group likes, but there’s a certain way you would approach those people. Maybe there’s a certain tone too that you would take that you wouldn’t take in another way or for another group. And then, user experience too in the sense that…is your design going to get the results that the client is looking for? Is it going to solve the problem? Are those people who are coming to the site, are they going to be able to find the information really quickly because you don’t have a lot of time to capture their attention, so is it easy to navigate? Is it loading quickly? Those sorts of things. Is the structure easy to understand; the flow, is it easy to read and scroll through? All of those little things I think are…and again maybe, just to gloss over it, I’m thinking you need to spend a whole semester on it but just incorporating that into a curriculum would give people…
Gary
Well, I think that’s the difference between I give them the design brief versus I go in as the client and say, this is what I want. When I’m the client saying what I want to achieve and who the audience is, then they have to figure out all of that stuff that you said, but when you just hand them the brief, it just becomes an exercise of just visual decoration.
Meagan
Right, absolutely, I agree.
Gary
OK, Meagan. Before I let you go, is there anything that you are working on personally that you would like to share, or is there something that you want to promote or anything I forgot to ask?
Meagan
A lot of the really cool stuff that I’m working on right now, I can’t talk about yet because it hasn’t gone live, but I will say, especially in reference to this…teamwork thing that we’ve been talking about and the group projects, one thing that I’ve been working on that I’ve been really loving has been a fantastic example of a group of totally different team members but coming together in a really short, tight timeline and it even extends to the client-side team because they are wonderful collaborators with us and they’re working with us to provide the best solutions so it’s really been a Dream Team of collaboration and it’s been really great to work on and I can send you a link probably in a month or so!