Episode Links

Abridged Transcript

Gary
Welcome Steph. So, thank you for taking the time to meet with me today; I really appreciate it. So, before I get into the first question, I just give the listeners a little bit of a background. So you’ve recently made a big career switch, going from working at a digital agency with multiple clients to working remotely for a company specializing in email. This single thought could fill an entire episode twice over in my mind, so let me start off with a statement: I’ve been thinking a lot lately about the careers I’m training my students for. The way I instruct my students is geared towards preparing students for entry-level positions at digital agencies. So, my first question is, how different is working at a digital agency versus working remotely in-house for Outstand?
Steph
Sure. And hi, great to be here. So, I’d say there’s a huge difference. Working in a digital agency is, I’d say a lot more fast-paced than where I am currently. There’s definitely…you’re collaborating with a lot of different people, you’ve got designers, developers, project managers, UX designers: you’ve got a lot of people that you’re working with on a day to day basis and the projects will vary and it kind of keeps you on your toes a little bit so you might have a video project, I mean, depending on the type of role you have in the company, you might have a video project or you might have a website or a logo the next week; it really sort of depends on the project. So, you’re always building skills in different areas. In-house is a little bit more contained and I think that it’s definitely not a bad thing and I really enjoy it but you have a little bit more freedom to…build out or work on certain aspects of the project if you want to, so if I’m working on workflow, then I can decide I want to test something: oh, I don’t know if this color blue is going to work well with our audience; maybe we’ll test it. Or, I don’t know if I want to work on this screen right now, let’s table it for a few and work on something else, so you’re really working for yourself so there’s a lot of freedom there and you can sort of, I don’t want to say do what you want, but you can think of how you want to build that project out for yourself and how you want it to succeed.
The difficulty with that though is that you have to be careful that you’re not working in a vacuum so you need to make sure that you’re staying up to date with all the current trends, you’re making sure that you’re aware that we might…this looks good to me but I need to get it out in front of people to see what they think, or maybe I need to check with a team member first before I move forward with this, so there’s a lot of self-management, at least for me in terms of making sure that I’m meeting my goals rather than just meeting deadlines like when I was at a digital agency. So I think it’s very rewarding but it requires a little bit more management on my end just to make sure that I’m delivering something that makes sense but is filling my needs but also filling the user’s, so I think there’s just two main things where it’s very fast-paced in digital agency. It’s a little bit slower in-house, but I think the freedom is definitely something that I really enjoy about it.
Gary
So, two questions that I follow up. The first one: what do you design at Outstand?
Steph
Sure. So, right now, I work on mostly I’m a UX/UI Designer Art Director but right now I’m working on the actual email CRM, so a lot of the UI elements when you are sending emails; I don’t design the actual emails themselves; I’m mostly working on what you see in that dashboard sort of environment, so we’re pushing out a product soon that’s just going to be kind of skinning what’s currently there but then we’re also going to be launching a brand new product next year to go along with that, so I work mostly on product design. Like I said, I went from a lot of client work, digital agency, to now doing mostly product design which is a huge switch for me but I’m really enjoying it.
Gary
All right, so the reason I ask that is, at least me in design education when I’m training students, I’m teaching them to create stuff from scratch, but it seems to me like if you’re…whether it’s a start-up or whether you’re working for an in-house firm, you’re not starting from scratch; you’re redesigning and I guess it’s the same skillset, but at the same time I’m wondering if it is different enough that maybe we should be doing something to address, OK you’re going to be doing a lot of redesign: this is how you would approach it. Do you have anything that you do differently for re-design versus…
Steph
Yeah, that’s a really great question. I think definitely that was for me when I was at Savannah College of Art & Design we were doing a lot of stuff from scratch as well and I’d say ninety…like eight per cent of what I’ve done from my digital agency past and even now is just re-designing what’s there. And yeah, I’d love to see more students have things in their portfolio where they just re-design something different. There’s a lot of stuff, I see on Behance and Dribbble, things like that where people just say, here’s an alternate version of this site, or whatever, and so I really…I would like to go back to doing some stuff from scratch because I don’t see it very often but I think most of the stuff that if you get…if you’re in a design firm, unless you go maybe towards branding, that sort of thing, if you go towards web you’re going to be doing a lot of re-designs because a lot of stuff is already there, but yeah, I think branding is really great. I think the thing I like about starting from scratch, especially being taught in Schools is that those are where you’re going to get a lot of your fundamentals and a lot of your basics: you’re going to learn a lot about type and color theory and things like that from just starting from scratch, I feel, whereas if you’re redesigning, you throw in client objectives there too and sometimes it can kind of stifle that creativity in a way and it’s good to have those skills of starting from scratch just because when you’re working within…with a client project, I feel like you can take those skills that you’ve learned from starting from scratch and apply it to a re-design.
But that said, I would like to see probably more re-designs in portfolios, just to see how they would take a different direction because sometimes when I’m starting a project, when I was working agency and sometimes even freelance which I do right now, I’ll take one…I’ll take a site and then I’ll just take it in a completely opposite direction for a few different iterations and just see how that looks, just because it’s good to see the complete opposite of the spectrum, or like, what if we…you’ve got this big header image currently on your existing website. What if we took that down and we did something featuring more like typography at the top or you have a photo there: what if we put a video, stuff like that, so maybe just thinking a little bit more outside of…pushing it a little bit more with re-designs, that would be something I think I would like to see.
Gary
Yeah, I think I can do that just on a very easy level, like at the start of this semester I’m just going to assign, you’re going to redesign; pick one thing you’re going to re-design and you do it on your own.
Steph
Yeah! Yeah, and one thing…
Gary
And come back later!
Steph
Yeah! And one thing at my previous job before Mindgrub, there was a firm I worked for where we would, as an intern test, we would ask interns to put together a few elements of like in a collage, like here’s this website: I think we used adultswim.com or something; we were like, here’s this website. Take this site and how would you redesign it and you don’t have to do a full page comp or anything like that; how would you take a few of these components? Here’s a news-block, here’s events, here’s a quote. How would you style those if you were to do a redesign? So it’s interesting because it also kind of gets them thinking in terms of component libraries.
Gary
I don’t know how to explain this because it’s something that I’m working through. So, I have my students design Element Collages and so they’re…the whole idea of atomic design, design elements and so this is the first time that they’re really kind of exposed to web design: they can’t do it. They need the context of the page to design the element and I’m like, you can do that but you’re just creating extra work. What you really need to do is focus on this button, you need to somehow get your imagination, that abstraction is really hard for people who haven’t done it before.
I’m just…I’m struggling finding ways to make them realize that no, you don’t have to…put the entire page to design the button…design the button.
Steph
Yeah, yeah, like a lot of times…and I still struggle with that sometimes. A lot of times if I do an Element Collage and then it goes to…and I create a page comp afterwards because the developers still want to see page comps, so I’ll still provide comps to developers even though I myself might be designing at a component level, so that’s something that is still a challenge for me but what I like to do is I’ll either, if I’m working with a UX person I’ll have them do a wireframe first or if not, I’ll do a wireframe and then I sit it side by side with my Element College and I’m like, OK, well I need to have this box and this and this and this and then from there it kind of helps me visualize how the page is going to be and then depending on the speed that you’re working at, I think it’s OK to start building out a comp while you’re working on an Element Collage if that helps you, if that helps kind of train your brain away from that thinking. A lot of sites are so in chunks in everything, but so it gets you thinking about that if you’re just maybe seeing them side by side an Element Collage and a Page Comp at the same time. I hope that makes kind of sense!
Gary
Yeah, no, it does. I think for this semester I introduce…I had them wireframe earlier. I had them wireframe so they could use the wireframe as a map of, OK, this is where the button is going to go to help try to remove that abstracted, this is not just something random, it has a place, has a purpose, but you’re just not putting it all together yet. And it helped but I think I needed to…this is the first time I’ve coincided the two so I just think I need to do a little bit better job if…yeah!
Steph
Yeah, I mean, element collages are great. I think they’re a good way to…one of the things we, at my first firm, NewsCity, we started presenting element collages instead of page comps to clients and one of the reasons was because we don’t want to pour thirty hours into two or three different home page designs, just to have the client throw that away. It was quicker to get an Element Collage up and going, or put together and then if they don’t pick it, you can just kind of reuse those components and skin them for other projects. It sounds terrible but it’s a really efficient way and a lot of times those collages get picked to. A lot of things are…we’ll repeat, especially in web design and it’s good for developers too because if they see that something has been skinned then it’s really quick for them to put that together, they get the site up, front-end gets done faster, client’s happy, it’s really not a bad idea, so I think presenting element collages first before they see a comp is always something that I would stress. That said, I think it’s helpful to just maybe build a comp at the side, if it helps you think in that…in terms of components just to get something put together.
Gary
One problem…OK, so I’ve been doing that and this semester I actually had, and we had a client and I had the students present style tiles, get feedback, move to Element Collages, get feedback and now we’re putting together our final comps, but the problem…dang it, I lost my train of thought…
Gary
The problem with the…oh. My problem with the Element Collages and it’s not a problem, is finding examples, so and I’ll give you what I mean by that is…Element Collages, at least the way I take it, are a brain-dump of just working on stuff and working through different things and working through as much as you can. But all the examples of online of Element Collages are these perfectly polished, you know, the ones that they’re presenting to their client. Are they…is that different? I mean, do you…you know what I’m getting at?
Steph
So…are you talking about the Element Collages, if you look on mine they’re just very polished, they’re not as rough and messy?
Gary
Yes.
Steph
I think that there’s always…you always want to…Element Collages are really hard for clients to grasp; they’re really difficult so I think…and there’s some cases where I’ve even worked on projects where we take the Element Collage and we’re like, OK, the client’s not getting it, let’s dot out a page comp and then show them that. So, I think they’re really hard for clients to grasp so I almost I think they should look a little bit more polished, that might be why you’re seeing a lot of them but they always…you need to kinda like polish them up a little bit maybe organize them a certain way so that they…and they kinda need to flow so that the components balance out on the page because I usually like to have one or two elements that are a little bit more dominant or a little bit more heavy, heavier on the page, just so that when you’re presenting it to them, they still feel like…the thing that I miss about presenting page comps is that there’s like a…oooh, like a grand reveal and you don’t really get that with Element Collages; you always hear, what am I looking at? So I think it’s good to…people are still excited to see it but I think it needs to be a little bit more polished. For putting it together, are you saying that it’s…they’re a little bit messy looking, in production or…
Gary
Oh no, that’s just it, the students only see examples of like, beautifully done ones…and they don’t see the messy ones and so they’re like, again, they’re trying to make…they’re trying to line everything up in columns, they’re trying to organize the stuff and I’m like, no, no, it’s just…doodle, it’s a doodle.
Steph
Yeah, yeah. Yeah, no, I think that’s really…yeah, like you can’t use a grid in an Element Collage! It’s very much like just brain dump of here’s all the different things that we can use and even when I present them, they’re polished looking as in when I show them the components are arranged in a way that makes it easy on the eyes but if you look at, I don’t use a grid for those and there might be…two fonts; its’ not…it doesn’t…I leave enough abstraction there where I can maybe go back to it later in the page comp area; I’ll do maybe like two fonts and then show…here’s two different header styles, something like that; I kind of leave it a little bit up to imagination there so that when I’m actually working in the page comps, I can kind of flesh out some of that stuff more if they like certain things, but they really should be like rough and messy just so they can give the client an idea of the look and feel and the style and they can start getting the client to think in terms of components rather than a full comp. But yeah, absolutely, I think that…no grid, don’t use a grid, don’t worry about arranging things so they’re pixel perfect in an Element Collage; I think that it’s really hard for us to think of it that way but when we’re so used to everything being so pixel perfect, especially when you toss in the fact that the developers need something that’s perfect but this is the part where you really get to have fun and you get to play so just go for it, make it crazy!
Gary
Yeah, I think I just need to start reaching out to some professionals who do use Element Collages and say hey, can we have your pre-cleaned-up ones, your original, because I need to…that’s what the students needs to see; they don’t need to see these beautiful arranged ones that you could tell that there’s some kind of linear storytelling that they’ve set up for a client meeting. Not the…oh, I wanna do this. Plop!
Steph
I should send you some of the ones that I’ve done previously! Because they’re kinda messy and they’ll have…because I do them all in Sketch and so I’ve got components outside the artboard; crazy, symbols aren’t linked or anything like that, the file is a mess but it gets the style across, so…
Gary
And this is another question and I’ve been thinking about it lately; I’ve been letting students use Adobe XD because they already have to pay for Creative Cloud. I think I’m going forward, I think I’m going to force them to use Sketch or Studio or InVision Studio and just be done with it. No. XD is off-limits. How do you…because the industry is just using Sketch and I’ve played around enough with the pre-release of Studio that it mimics the thinking of…it mimics Sketch; they use Sketch as their muse to create their own, so there is, I don’t see a big learning curve between if you go from Sketch to Studio, if Studio ends up getting a strong foothold but…how do you feel about that?
Steph
Yeah! I think the industry is pretty much over Adobe. I still use it for Illustrator, maybe editing a photo in Photoshop; I use it for After Effects too but for the most part, Adobe isn’t really used in web besides creating vectors and things like that. I use Sketch and InVision are the industry standard. InVision Studio, I played around with it too and I’m not like…right now I’m at the point where when I was using it I was like, why do I have to learn something again? I’ve got…it basically just does everything that Sketch does already so I’m waiting for it to offer something else to me that makes it worth using a different program and Sketch is still used, our Developers use Sketch; my Chief Creative Officer uses Sketch. And it’s an easy to understand pick-up so everyone’s using Sketch right now. For the most part everyone’s pushing those designs to InVision, creating prototypes and then Principle is being used to sort of mimic animations.
Gary
And see, so that’s why I’m interested in Studio, because Studio, supposedly already has that.
Steph
Yeah, it has some animation capabilities in it.
Gary
But it’s nowhere near the level of Principle or Marvel or anything like that because they’ve been around for a while. OK, so that’s what I’ve…and so that’s the reason why I want to work with…that’s why I want Studio to pick up because of the animation features because otherwise, like you said, I’ve been having my students do mock-ups of animations in After Effects and that’s not that big of a learning curve but it’s enough of a learning curve that if you’ve only got one class to teach web design, and now you have to teach prototyping software, you have to teach animation software, you have to teach this, who cares about if learning the actual design process for interactive design.
Steph
Right, yeah, it’s a lot. Principle I only use really for mocking up animations. After Effects is still good if I need to help out a developer with building that animation. There’s a tool, there’s a plug-in called Lottie which was developed by an Airbnb Developer and so what it does is that an animation, a vector animation that you’ve created in After Effects, it’s a plugin that will push it…will convert it to a JSON file, essentially, so I worked on apps before where we were able to keep them super, super lightweight, because we were able to create an animation, a loading animation or some boxes floating into view; so, simple stuff, like simple subtle things. Instead of exporting them as gifs or whatever, we were able to export them as a JSON file using Lottie, so I still use After Effects a lot for that. I don’t know, maybe Principle does that; I’m not sure, but so far I’ve only done, I’ve only used Principle for mocking up animations.
Gary
I think Framer’s the one that does a lot of that…developers can pull a lot of usable code from.
Steph
Gotcha.
Gary
I don’t know about the other two because I’ve never used them but I know for a fact Framer does have some kind of…easily exportable information. So, you say your developers use Sketch. What are they using to extract stuff from? Are they using Zepelin or do they just…
Steph
Yeah, so when I worked at Mindgrub there was a much larger team, a lot of engineers and they actually…the only people using Sketch were the designers and the UX designers, so what we would do, we would use…our tool was Simply. I’ve used Zeppelin before but we used Simply and so we would push our designs to Simply, make sure they were sliced properly, things like that, push them to Simply, annotate them if needed for things like accessibility and then the developers would use those to grab assets and things like that. Where I work right now, we have a much smaller team of engineers and so they just used Sketch. It’s so much cheaper than an Adobe license so they’re able to just get in there and grab assets if needed, but it really depends on the developer. I’d say there’s never a set, and I’m sure you know, there’s never a set workflow for working with an engineer-developer; it just depends on the person. I’ve had developers that I’ve worked with ones with Simply where they’re fine with, just send me the Simply link and I’ll extract the assets and then I’ve worked with developers that are like, by accident I’ll send them a flat JPEG and then I come back and I see that they’ve already almost built out things, so it really depends on the developer and how they want to work with you but I’d say for the most part, Simply or Zeppelin is a really great tool.
The only thing that I don’t like about Simply and Zeppelin: I like working with…I liked it in Agile process where I’m constantly checking up on progress and like I said, it depends on the developer but some of them I feel like they’ll see a Simply or a Zeppelin link and they’ll take it too literally so they’ll use it…they’ll grab the assets from it and the colors and the fonts but then because of the padding and the different…measurements and units and things like that, that Simply provides, they might go too literally on that and instead…it just kind of hinders when you’re working with breakpoints how that’s going to work so I really like it just as a color tool or grabbing certain things but they should be the ones to be arranging those elements on the page, they should just be using it as a guide.
It provides all those interesting measurements but there are times where I’ve received a page and there was like a photo that wasn’t bleeding edge to edge, like in my comp it showed that it was edged…the photo was going to both ends but then when they showed it to me, it was only like a rectangle and it had white around the sides. I was like no, I meant edge to edge, so I think it requires, depends on the engineer but I really liked working with Simply when I was working on Agile projects and I could constantly be checking in with them. I don’t think it’s a good replacement for just talking to a developer and so an automated process like that, I think is really good if you’re still, if you’re communicating with them verses just, here you go, I’ve just pushed my comp here and I’m never going to see it again.
Gary
Yeah, and I didn’t know some developers would actually go that far. I just assumed that they were using it to be able to pull some basic visual design styles like color palettes and fonts and…because again, even if you go that route, because in Sketch you’re working in pixels for font size; well you’re not going to have a font size, it’s going to be in Ms because it needs to be scalable and it needs to have all that stuff so I didn’t even…so I figured that the developers were taking very minimal from it.
Steph
Yeah, it depends. I’ve had…I think good developers will be checking in with you and asking these questions as they’re working on it but if you don’t hear anything, that’s when I should…I would say check in and be like, hey do you have everything you need or can I see progress on this? So that’s like waterfall process. For Agile, it’ll be seeing that stuff all the time and routine check-ins, so I think it just depends on who you’re working with.
Gary
No, that’s…that’s a good thing that I should remind the students about is that idea that they, if they’re doing…if they’re walking in the waterfall whether it’s at an agency, whether it’s freelance, they’re the Project Manager in a sense, that they have to see that they’re…what they gave to…what they envisioned is what is actually coming out of the developer’s hands. So, you graduated in 2010 with a BFA in Advertising. So, I think…and you just mentioned this word and so this is a perfect time to ask this question and you’re the perfect person to ask. So, with the introduction of the iPhone in 2007, and the technology for Responsive Design in 2010, the industry has drastically changed since you graduated. So, with the benefit of hindsight, what skills do you routinely use that just weren’t thought of a few short years ago that design educators should be including in the classroom?
Steph
Well, it sounds like you’re including a lot of things right now. I’d say just when I graduated in 2010 my portfolio was just full of static page comps. We were designing static comps and now it’s not like that; you’ve got so many different breakpoints and that’s why the component level is so important because you can kind of treat elements as constantly changing on the page rather than just super-static desktop, tablet, mobile, so I think that’s just the main thing. When I graduated, Responsive Design was just coming out like you have mentioned, so it was…turned me, I was completely caught off-guard when I was seeing developers that were asking me for things…I thought I could just give them a PSD and they would be set with that but there were so many things that they’d be asking me so I think the things have changed…things have changed a lot so I think just graduating, things that I wish that I had known ahead of time would just be like how the industry was just going to change.
You might be learning one thing, I know that sounds very broad but you might be learning something but you just need to keep up on what’s going on in the tech world. I was very fortunate to work in an agency where we were constantly being…we were on top of things, we…Responsive Design, we were doing large-scale university re-designs with Responsive Design when I graduated and I had that job, but I think depending on the environment you’re in, I’ve encountered designers that still don’t use SVGs so I think you just need to make sure that you’re constantly aware of the changes that are…that could potentially come to your industry. I don’t know, maybe when students are out in two years there’s going to be something with VR, we don’t know…
Gary
Yeah…no, there is, there’s no question about it.
Steph
Yeah, yeah, it’s just ever…it’s constantly changing and I think just keeping on your toes is the most important thing to do and I wish I had more awareness of that, getting out of college, because it definitely took me by surprise when I had an internship and that was mostly working off PSDs and then immediately after I left and I worked at NewsCity, it was a lot of communication with developers and having to change our process each and every time so that was something that definitely I think I wish I was a little bit more mentally prepared for!
Gary
Yeah, and I think the part that I’m really focused on trying to kind of develop a process for is the Responsive Design…so, this is the approach I have them do. I have them…I’ve kind of put like a simple FRID…I mean, sorry, I put a simple Grid Framework together. Not even, I don’t even want to call it framework. It’s just simply a twelve column grid in HTML and CSS. I have them do wireframes and then once they figure out where the content goes, as I say, OK, put a picture in there; put your…set up your columns, put in the picture, put in some text, resize the window; look for it to break. So, then I say, OK, make a note or make a new art-board where you see that that element, whatever, breaks and you need to make a new one. So, in the end, their comps, their static comps are of the two extremes, a small screen and the large screen and then there’s a smattering of art-boards in between there of, well this element breaks at this size so this is what we’re going to redesign it at this size and so that’s how I’m having them do it now. Does that sound…
Steph
No, that sounds really…that sounds really close to what I worked on. So you do mobile comps?
Gary
Yes.
Steph
OK, personally I’m not a fan of mobile comps, just because a few things, I feel like they’re just inefficient time-wise because if you get a client change on the desktop and you have to change it on mobile and then I also, I’m worried about presenting them to clients just because if they see a pixel-perfect mobile comp and then maybe…things happen, like whatever if a developer looks, if a designer and developer are looking at a mobile comp and desktop comp they’re like, this looks fine, this looks good, but then you actually get into the front end of it, maybe there’s something that needs to be tweaked or whatever, then you don’t want the client to look at their mobile, their site on a phone and be like, well I thought that this is what it was supposed to look like on mobile. And it just kind of gives you a little bit more flexibility. I think for most of the time, I’ll deliver mobile comps occasionally, depending on if the developer really wants it but I almost never show it to the client, just because I’m worried that they’ll see a pixel-perfect mobile comp and then not only will they want that updated with any changes and that’s really tedious, but also just I don’t want them to see that something is pixel-perfect and that’s what it needs to look like when the site goes live but mobile comps, most of the time I just do a sketch; I’ll just do a wireframe or a sketch.
I will always mock up, I’ll always do the navigation for mobile because that is really important to see, especially if you have a lot; in Higher Education you might have your main navigation, you might have your utility navigation, you might have your quick-links, you might have the student login portal, all this stuff: you need to see if you have a lot of navigation items, you need to see how that breaks down and how that looks on a mobile level and so I’ll mock the navigation up but a lot of the other stuff I’ll just…I’ve done sketches and I just send that or I provide that to the developer and they’re good with that and I actually think that they like it because then they’re like, oh, thank God you don’t need that this has to be this way on a mobile or whatever; not that we don’t want it to look great but I think it’s a lot of time on your end to put together something from mobile when there’s the potential for it to change.
Gary
Yeah, and that makes sense. I kind of do it for…two reasons. And the first reason you kinda just invalidated!
Steph
Oh, I’m sorry!
Gary
And I kind of…I invalidated it myself because there are …the middle states, those breakpoints, I’ve already told my students, you don’t need to redesign an entire page, you just need to re-design the element. It’s the same thing for the small screen. It’s the same thing: not everything is going to be…if you have a column of text, why? You what it’s going to look like, so if there’s something major that’s going to change, that’s what you need to identify and mock up. But the other reason is, there is kind of, I…and I also think this of animations, I think designers often leave animation up to the developers, or after that, or they just look for pre-canned existing stuff that’s already out there, so there’s not a lot of innovation in the animation realm that designers should be pushing and so I kinda think the same thing, if we just kind of approach mobile as just like the skinnier version of the desktop, where’s the innovation? Are they really pushing for the medium, so that’s another reason why I ask them to do that but at the same time, I don’t do…I should be doing a better job of saying, I’m expecting innovation, not…
Steph
No, that’s fair. I think that’s a good point. I think it’s probably good to…if anything, doing the mobile cops and doing that gets people thinking, mobile…of mobile options rather than it just being an afterthought, like you said. So I think it’s good that rather…it gives you the opportunity to innovate; maybe on mobile, maybe we do this or we think more about animation, so I think that’s a good point. I definitely think that there are a lot of cases where I guess I’m guilty myself, like I say, I just do a sketch because it’s the easiest thing but great, if there’s time and things like that to do something interesting like an animation that might appear differently on mobile versus on desktop, I think, would be really great and I hate the term mobile first because it just often implies mobile only. And I think it just needs to be like everything, you just need to be thinking about everything and so I think if you start with the mobile level and thinking how that’s going to work it kinda leads, it opens the floodgates for you to start thinking about different other sizes and how things might operate there, so…
Gary
I just remembered a perfect example and this is what…a student of mine, she designed, so in her static mock-up for the website, she has…she has three circles, really big bright colors and it’s number one, number two, number three and I don’t remember what the context form are, but then on the mobile version it’s simply, instead of reading one, two, three, it’s now reading from left to right, it’s now reading just the same exact circles but now just stacked on top of each other and the light bulb came one and like no, you don’t have to do that. And so rethink what that looks like…for mobile and so she changed it and it looks, and it’s fantastic and it would be, if somebody just threw a simple CSS transform on it, it would just be like this beautiful switch if somebody was really going to go through the effort of resizing the screen. But, which wouldn’t technically happen. But anyway. And so that’s what I was kind of more thinking about is what I would like to see more of is, I feel like right now, the way my students are approaching it and I do this, because of me, it’s just a carbon copy but rearranged; not re-designed for…mobile.
Steph
Right, right.
Gary
It’s just rearranged for mobile. Does that…yeah, that’s what’s happening.
Steph
Yeah, I think so, yeah, I think mobile is in a place where there’s an opportunity for laziness where it’s like, everything’s just kind of stack, you know, but I think it would be interesting to see it treated more as an opportunity to try something different. And so those are the times where like, if I see one of those opportunities, I’ll design that individually, at the component level and things like that. And kind of change that there but yeah, I think that it’d be really great to see more…it doesn’t do this on desktop, it does something completely different on mobile. If the time allows and things like that, I think it’d be really great to see more interactions on that level, just because subtle animations just add so much, especially to mobile; the web is just so static, the web has the potential to be so static so I think on the mobile level, if there’s a little bit more play with some of those animations and things like that, I think that would be really great.
Gary
Yeah, OK and so anyway, as an educator, that’s where I’m stuck right now is, how do I…instruct that because it’s really, truly a case-by-case; I can’t formulaically say, OK, you can’t formulaically like you say, do small, medium, large; you can’t, because you may not need a medium; you may not need a small, you don’t know and it’s…and until you’ve done it enough, you don’t know what you don’t know.
Steph
Yeah, I like, when I push a prototype to InVision, I like…having…at Mindgrub we had different devices we could test things on and so if I had a prototype or if I had a front end site, I would bring it on mobile or tablet on these two devices and just kind of test it out and see how it feel and there are things that you see in Sketch, when you’re working on a comp that you don’t see if you’re actually scrolling through it on an actual device and you’re like, oh, it’ll be really cool if I did this, so there’s an InVision app that you can download and if you haven’t…I’m sure you have but it’s really good to just kind of like see it on a device and move through it and see, OK, maybe there’s an opportunity here to do this because otherwise this is really boring, everything’s just stacked and it’s just really long to scroll through everything, that sort of thing.
Gary
No, I…that’s my favorite thing to do, because like I said, I have my students use XD because it’s already…XD has its own app and I love walking by and say, did you look at that on the phone?
Steph
Yeah! Yeah!
Gary
Why don’t you look at that on the phone? Yeah…that font size is a little too small!
Steph
Yeah, that comment and especially from my mentors and people I’ve worked with: that comment and then the…did you check for color contrast? Those two are like the…the ones that I get. I hear very often among…and any sort of design critique, those two for sure.
Gary
Yep, it’s the scale. I’ve never really had them…I do tell them, OK, so we’re designing under fluorescent light and they’re doing something like, we’re doing there’s this website called yourstop.info that my students are proposing a re-design for; it’s a bus tracker and it tracks the buses in Baltimore. It’s like OK, looks great under fluorescent lighting. Have you taken it outside to look, to see if it’s still readable?
Steph
Right, yeah.
Gary
And they haven’t.
Steph
Accessibility is huge right now, that is, I probably should have said that one getting out of SCAD has just…there are lawsuits going out. I mean, it is just like you need to be on top of it in terms of making sure that text is legible because there are a lot of…there are times where I’ve worked on projects that we had contracts, or we were working on projects because the University had been hit with a lawsuit and they needed to re-think their whole site for accessibility and so we were…would win work because of that and it’s just like it’s…I think more now than ever, I think accessibility is what a lot of people are talking about and making sure that you’re seeing that all text is legible on screen-readers, it makes sense, so everyone, UX design and development are all re-thinking accessibility and putting a lot more attention there than they ever have before.
Gary
The way I kind of solidify that to my students is, the fact that OK, and I always use my CapitalOne, so CapitalOne is an international company. They cannot be accessible to people with any kind of disability. They just physically cannot do it, one, for basic business principles, they need…there’s a lot of clients that they’re potentially throwing away, and also it’s the right thing to do, but even if you want to throw away the right thing to do from a business perspective, they have to be accessible by those people with disabilities and the students seem, they understand that, but at the same time they don’t…it’s hard for them to kind of put into their regular train of thought because it’s so abstract because they’re not.
Steph
Yeah, I think you don’t need to be thinking about it on the scale like CapitalOne. I worked on a project for EXELON, working on apps for BGE, ComEd and PECO and there’s a lot more attention to accessibility there. But I think at the basic fundamental level, just making sure that you’re checking that your text size or your color, if you have a font that’s on top of a color, making sure that those two, a button or whatever, making sure that’s accessible; just at the basic level, just checking the colors just to be sure. Because that’s also something you’re going to hear from clients because they just like to, they want to ask, did you check for accessibility and you want to be sure that you can give them a confident yes, we looked this up and it’s accessible, you can read this text on this and it’s AA compliant or whatever.
Gary
OK, so just the…we could talk about accessibility for days, like you said, there’s a lot of stuff out there for it. So another thing that I’ve been thinking about and so, in your bio you wrote, there is a lot of…yeah, there’s a lot of work, and you wrote this in your bio: CMS-driven website re-designs. So there’s a lot of work out there for that. So, I’ve been wondering if, should I be teaching that? And how do I mean by teaching it? So, WordPress, Squarespace, Shopify, all these different…Joomla, whatever. Should I be teaching maybe having students take a base template and re-design from that or learn the WordPress builder? What should, if anything, should I maybe be thinking about when it comes to that?
Steph
I don’t think that’s super-important. I think, mentioning the CMS thing, I think that now, I mentioned mobile first before and how I hate that term. I think there’s no…it’s not mobile first any more, it’s content first. So I think just making sure that the…that’s kind of, it’s mostly just making sure that if you’re working with a lot of content as Higher Education tends to have, you need to be sure that, OK, this looks beautiful with two lines of text but how does it look when they’ve got ten lines of text in there or something? It’s just making…I’d say the CMS doesn’t matter; it’s just having that in mind, OK, what can they change, what can’t they change, what’s the character limit: do we want a character limit?
I don’t think it’s as important with Drupal, WordPress, that sort of thing as it is just knowing how things are going to change or being able to design a site so that it’s not just for you but it’s meeting your clients needs and that you have elements in there that you’re aware that that perfect headline at the very top, at the banner or whatever or the header, is going to potentially change or it might be changed to a slide-show; something like that, just kind of keeping content in mind is always something that I would suggest.
Gary
No, and that makes perfect sense for me. You are designing with or for; you’re designing for a CMS, meaning…again, tell the students, design for the extremes; if you’re going to have a list of names, don’t just put in John Smith, Jane Smith; you need to do for the extremes you need do both the short, small, like whatever, and the extremely long because they’re both going to break the design in unexpected ways.
Steph
Yeah. No, I love that. I…I’m ashamed to say it, but a lot of my sites when I was in college, they just had lipsum or something like that. And now, I always make sure I’ve got live content in there, whether it’s from the existing site or whether it’s…stuff I’ve made up or pulled from other sources, there needs to be real content in there, not just lipsum, because, and it’s a pain, you might think, oh this is…I like the way that this looks and then you put in real content from the site and you’re like…argh, it just makes you think about those things ahead of time that you might not necessarily thing about if you’re putting in placeholder text.
Gary
Yeah, and so again, with this trans…like the bus tracking app, they were doing that but they picked the shortest street names.
Steph
Oh! Yeah.
Gary
OK, what happens to this design when it goes to three lines? You’ve got it all fitting on one.
Steph
We had a lot of problems with that with EXELON because with the BG&E app, you’ve got street names that might go really long and truncation might not be…I think we ended up doing truncation but there were some cases where some numbers were really long, it’s crazy when you start working with real content, how much it might make you think…it also makes you think, is it OK that this is an edge-case scenario? Maybe the truncation doesn’t work for this address, but that’s like, we’ve looked at all these different accounts and maybe there’s like a few of them, it might make you think a little bit about where your priorities are but I think it’s really good just to make sure that you’ve got real content in there so that it doesn’t…the shortest addresses, things like that, that’s definitely going to cause issues, when you send that to a developer that’s going to be one of the first things that they tell you it’s like, hey this is what it looks like when we’ve got like an actual address in here rather than just 123 Oak Street! So yeah.
Gary
And so yeah, I always harp on using real content just for that exact purpose because real content will break your pretty little design. All right, so I’m just seeing where we’re at on time so I’m going to finish up with a couple more questions. So, you are the organizer for Make a Mark Baltimore. Can you first talk a little bit about Make a Mark for the listeners?
Steph
Sure, so Make a Mark was started in 2014. Maybe 2015 in Roanoke Blacksburg. It is a twelve hour design and development marathon for local non-profits. So, it was started with the idea that there are non-profits do so much work for our community but they often don’t have the resources or the talent or the skills or the knowledge to have a great website or have good branding, things like that or marketing materials, so it was started with the…in Roanoke, Blacksburg, we started Make a Mark, Sarah Obenauer was the founder and she brought together forty creatives and we put together work and then it was there, it was in Roanoke, Blacksburg for about three years and then it’s starting to expand and so the Baltimore one was the first independent one where Sarah was not involved in; she came for the day but it was planned by people in Baltimore, a lot of people from Mindgrub and so we, on April fourteenth we got together and in the spirit of it, we just sat for twelve hours, created work, it’s basically just we select between thirteen to fifteen non-profits and they come to us and they say, hey, we need a website, we need a flier, we need this, then we put together project teams kinda like almost little mini-projects and we assign them some…their project team and their project team will create work for them for the day and then at the very end of the day they get to leave with a brand new logo or leave behind things that they didn’t have at the start and that would definitely help them in their reach and impact in the community, so it’s a really great…I love it just not only because of the mission and the message that it has but also just networking and meeting other young professionals in the area and other student professionals…students and professionals is really great and so the projects range from, we did two videos for the Baltimore event and then I think we had four web projects and then the rest were just, we had thirteen non-profits and then the rest were print projects, logos, things like that. So…
Gary
OK, so the reason I’m asking about this is, it’s actually two-fold. The first one has to do with collaboration. So, even if I have my students collaborate together in a classroom, they’re collaborating with other designers. That’s not what the industry is: they’re collaborating with project managers or collaborating with developers, you know: UX: They’re doing…so, immediately I got this idea from Emlyn…previous episode where she talked about hackathons and like, oh, you know, we should maybe…that’d be a way for students to get that experience. So, there’s that if you can talk about that and then there’s the pace; you’re doing it over twelve hours. Students do not work at the pace of they crank out something, a useable anything in twelve hours. So, I know that that time-frame’s a little unrealistic, I mean I know it’s a challenge but can you talk a little bit about maybe the pace and then this idea of collaboration?
Steph
Sure. So, one of the things, and I forgot to mention this, that I love about Make a Mark as opposed to other hackathons is that with Make a Mark, we have the project team sit down with the non-profit before the event, so we assign the project teams relatively early and then we have that project team meet with the non-profit for about an hour, just like a rap, and they go over high level goals, things like, we like this font or we don’t…we had this so far, this is what we have existing, this is our current flier, current website or here’s this content: we have them just go over these things that you would have in a typical client kick-off and then that way, after that meeting they’re thinking about the project; they might be working a little bit if they want, ahead of time. We certainly don’t require that but some people go above and beyond. But they have it in their mind at least, this is what they need so that the day of the event, they come in and they just go, they just get started.
And another thing with Make a Mark is I think just we do such a great job at making sure that we scale the project accordingly and it also depends on what the team is capable of too, so I think we make it very clear to the non-profits, we ask them what they want ahead of time and then if there’s more time, then project teams might do more work or if there’s not enough time they might do something like, here’s a Style Guide to get you started. The project kind of scales, depending on what the non-profit needs but at the end of the day, the non-profits that we’ve selected are just so, so happy that we’ve given them the opportunity to have creative materials or they’re just excited that they were able to get total strangers excited about their organization.
So I think we really, even if they were to walk out with nothing at the end of the day, the non-profits that we select are just so happy to be a part of this. But that said, we do have really, really high success with the projects that are completed. I’d say the only ones that we typically might have a little bit more work to do at the very end are the web projects, but I think, I will say, next year for the 2019 Make a Mark Baltimore, what we’re going to do is we’re not going to take on a web project unless it’s going to be in Squarespace, because those are super-easy to put up for a designer or a developer, so we’re going to change that a little bit but for the most part, we have, everyone had something to show, everyone had like a finished product, if not close to finished product at the end of the day that needed really minimal tweaking, especially the logo people all had something that were done; branding, everyone…it’s…there’s a lot of work that is produced at the very end of the day.
And a lot of it I think just has to do with the fact that we take a lot of time to put together teams and make sure that we’re balancing each other out. Collaboration-wise, I think I myself, with this Make a Mark and future Make a Marks, I try to make sure that we never have just one person alone; we want to make sure we’ve got two to three people and we try to pair people together that might be a good fit with one another, so we have a talented team where we’ll sort of organize…we have, one of the project managers from Mindgrub, she was one the event committee and so it’s kinda like resource management: we’ll put together teams based on that, so everyone just kinda clicks, but I think the collaboration, there is group to group but I was really, really impressed this year with how well everyone seemed to collaborate with one other; it’s like you come in there and it’s this common goal: we have twelve hours, we’ve got to get this done. That probably forces people to collaborate more than anything.
Gary
No, you know, that’s true. I just noticed on a micro-scale, if I put students together in a group and I give them all semester to work on something, it’s a train-wreck, but if I put students together in a group and say, you need to do this by the end of class, they always do it!
Steph
Yeah! Yeah, it’s funny how that works! But yeah, it’s…definitely I think the…I think you need to, whether you’re in an agency environment or even when I’m working remote for an in-house like collaboration is something that you need to make sure that you’re communicating with your project managers and you’re communicating with the designers and developers; it’s just like there’s a lot of accountability. I believe there’s a lot of, people are looking to you as the expert, no matter how much experience you have in the field and how long it takes to something to get done or like, what do you think we should do as the next stage? Stuff like that, so I think it’s kind of natural collaboration that happens with different project team members. Very rarely have I worked with someone that just refused to work with others, so I think a lot of it has to do with just, if you give a common goal like a project and a task, everyone kind of comes together.