Episode Links

Abridged Transcript

Gary
Great. So, before we get started on the discussion about designer and developer teams, can each of you talk about how you got to your current positions for example, Alexis, you’re a Senior Developer with a degree in Studio Art and Zaid, you’re an Art Director with a degree in Industrial Design, so that seems like it’s a very winding path to get from Point A to Point B.
Alexis
Yeah! Absolutely. I think it’s a fairly common story, actually, in the industry. People start off in one discipline and find that something else is very interesting. So for me, it’s really been a journey my entire life. I started off just generally building things as a little kid; I built little cardboard…architecture models, very rudimentary, of restaurants and houses and things and then in High School and College I really started getting into photography and that’s where I really started to think well, maybe I should get into this art thing. But I was really good at Math too, so I started out thinking, well, I’ll make the most money as an Engineer: let me go to Engineering School! So, I did that for a year, I was an Engineering Major and University of Maryland is a very competitive school. I found myself not at the top of the class and I really wanted to excel somewhere so I did some soul-searching, figuring out what I wanted to do and went back to Art. But even in doing that, I wound up back at University of Maryland in the Studio Art program and I loved it;
it was wonderful, but I didn’t see myself getting a job as a professional artist. I just, I don’t know, there’s something to it that I just don’t see myself in that way. So I went to the Design Concentration it’s like an eliminator enrollment program, I wasn’t sure if I would get in, I was like, oh, whatever, it’s a crap shoot, I’ll try it out, got really into it, it was a lot of fun, they taught us a lot of print-work, so once I graduated, I was looking for print jobs and once again…oh no, I’m not going to get a job doing this! So I actually taught myself some HTML and CSS just to get into a job, just to get my foot in the door as a junior web designer because all you needed to know was basically how the structure works on a website. And from there, my job experience led me more into development again which is again, more analytical, more logical, so I’m constantly switching back and forth between those two parts of my brain, it’s very natural for me to do both. I imagine at some point or other I’ll switch back again, I don’t know, but for now, this really makes me happy and I really like having the ability to collaborate really closely with a designer since it is something that I’m really comfortable with and that I love so much.
Gary
That’s interesting. I just love the role-reversal. Just one little quick follow-up: so, you mentioned that you said that they’re different, one’s like analytical and one’s…for me, HTML and CSS are…maybe it’s more PHP, but to me that’s creative because you have to…it’s not a linear thing when you’re trying to figure it out. You have to try stuff and you have to, I don’t know, try this and see how it works and then reverse engineer: oh, it worked. Why did it work? That’s when it becomes…
Alexis
Absolutely. So, for me it’s kind of like using two different senses that do the same thing; it’s like smelling and tasting. So they’re both very creative and they both activate the brain and I have to think creatively but when you’re thinking visually, it’s very different than thinking about the substructure of how content relates to each other and the architecture behind the site, that kind of thing. The HTML and CSS part is more visual, for sure, and I love that part!
Gary
Good. Zaid, how about you? How’d you go from industrial design to art direction?
Zaid
Sure! And you know, it’s only until recently that I’ve sort of started to realize that it actually does make sense. I can look at what I’m doing now as a form of product design but I think it did take me…oh God, fifteen years to kind of come full circle with that sort of mindset, but if I’m going to go back in time and kind of…cover my entire trajectory, it started with art, I was a kid that could draw, I was that kid in the class and that immediately translated to art, I got to High School and I took some drafting classes which turned into wow, I really like this architecture thing, which shaped my College search; that’s what I was convinced I wanted to do, I wanted to be an architect and I went to…got into Virginia Tech and it’s maybe the nature of that school that I feel like is, the way the program is run, it’s in the mindset or…not mindset: it’s patterned after the Bauhaus, it’s the idea that you have this….the foundational program and everyone gets in there, your architects, product designers, landscape architects, all in the same room just figuring out, re-teaching yourself how to write, how to think and then that eventually gets into how to use the workshop, it’s really teaching sort of a holistic approach to…working through design problems and that taught me…I don’t know if it…it instilled in me a sense for craft and it also meant that I was in the woodshop and I was terrified of the woodshop but like figuring out how to use the tools and you know, the same thing, the way that…it’s almost like Graphic Design was a facet, they were teaching this holistic approach to working through design problems, just sort of design methodology, designing products, whatever, design thinking, and that led to working through the program, having a bunch of stuff that I’m putting together that shapes a portfolio. OK, now what? How do I present this? And I ended up taking sort of the intro-HTML class at that time it was Dreamweaver and familiarizing yourself with Photoshop and Pagemaker…this was a long time ago…
Alexis
They still teach that!
Zaid
That was kind of my first taste of Graphic Design but I came out of that program basically with a lot of skills that I then traded into different kinds of jobs; I started doing my first jobs out of school I was actually working in architectural environments; I was doing 3D rendering, 3D rendering in video. Ended up in another place where they specialized in doing video, they were a multi-media place which again, you know, it was kind of getting my hands into a lot of different things and kind of figuring out I liked to use video, I like to do this modeling but this internet thing is kind of interesting, it let’s me…I can do the creative stuff and then I get to go build something and that was something that I was very into, it got me into developing for Flash, it was kind of that…I felt like that was a wonderful sort of blend of things where I could address the design problem in a visual way but then ultimately I had to know some bit of code in order to kind of built it out and it was sort of that combination of things that kind of got me going. Building in tables and then eventually in…you know, working at Vitamin, so I went from this place, prior to joining Chief I worked at a place called Vitamin, in Baltimore, I worked there for seven years kind of…in a small place, a small place with different times I’m working with two or three designers, so they were focused on PR design and we were very much, on the design side we were….we were doing all of it, and everyone there was kind of expected to have these sort of…I’m going to say it…they were expected to wear multiple hats, so you had to be able to build what you designed and I think….
Alexis
That was on the job description at my first place, yeah.
Zaid
Yeah, it required everyone to be a bit of a hybrid.
Alexis
There you go!
Zaid
And I think really over the past seven, eight years, where maybe the industry’s changed a bit but I feel like…and certainly what we try to do here is focus on the process; it’s focus on not so much our specialties, but how our specialties overlap and how we can sort of collaborate, how a designer collaborates with strategists, collaborates with developer, sort of bringing our past experience, bringing our own sort of perspectives on how we can approach problems and coming up with the best solutions through that collaboration. Some way that’s product design.
Gary
I see that, and that’s one of the things that I just wanted to…there’s a…I’ve always felt that whether it’s product design, industrial design or architecture, when you go to School, you do a lot of user research; you do a lot of studying of the problem before you start doing anything. That’s what I think contemporary interactive design is, it’s based on that philosophy and where I think print design, yes, they say that they’re doing design thinking, they’re doing design research, but they’re still in the end, it’s not on the same level and so I think just product designers are actually more well equipped for UX. Than the visual designers; visual designers have to learn that user research part of it.
Zaid
Right and I think that’s been sort of like a second awakening for me and I think it’s kind of…I started to think this way four or five years ago when UX became this idea; became this idea that agencies were turning into roles, they were turning into departments, but I always felt like that was just basically, that’s design thinking, that’s the thinking part of design and I think people of a certain age can remember that but I think for me it goes back to…it’s one facet of the design process and in a similar way, when…it’s not me so much as it is the collective and I find myself at times or situations where we’re kicking off a project or something, I can equate that, those interactions, Alexis, working with Alexis or Emily or Project Manager or Kate, UX; we’re actually starting the design process at that point but we’re just sort of setting our minds to the task. I equate that with design as much as getting in and messing around in Photoshop and I can’t stress enough that there’s…it’s a holistic act.
Alexis
I think…so you said that you were interested in architecture, you wanted to go to Architecture School. I actually had the same thought and I wound up going to Engineering School instead because I wanted to make something that would hold up over time and I was worried that if I just went straight to Architecture School that the things I built wouldn’t be functional; like, they’d be beautiful, which I do care about, I think the most…the highest form of beauty is something that is functional, so I think we’re both constantly in search of that. That it meets the need.
Alexis
And does so, gracefully.
Zaid
Right, so you’re building websites the last two years?
Alexis
Well, they meet the need. They function well. They do what they’re supposed to do.
Gary
Well that’s the goal though, the whole idea of Atomic Design and building systems is that you can do something that is future-proof, if you’re really on it.
Alexis
Things that can be articulated upon over time and…modified, adapted but if the framework is strong enough, and I don’t mean in the terms of like a JavaScript framework; I mean the foundation of a website, if that’s strong enough, you can use that to portray anything. You can create any kind of front end with a strong enough system.
Zaid
Right, and I think it again comes back to mindset or an approach; if that’s the thing that’s lasting, it’s the logic that went into the framework that is maybe built out in HTML and CSS and whatever CMS but if the thinking, like the logic is not there for the sustenance of that thing…
Alexis
Yeah, it’s like the database structure and how the various pieces of content are organized, that’s really the core piece of it, it’s being able to access that content and pull it up wherever you want it.
Gary
So, today thought, I specifically wanted to talk to you about how visual designers and front-end developers work together here but before we dive into the specifics of that, can you describe the general workflow here at Chief such as from the initial client meeting. Are there things…is interior…not interior architecture…sorry, information architecture or UX phases, things like that, ’til the final deliverable.
Zaid
Sure. So, we do have an approach and process; usually begins with, well first defining a team and I guess, if we’re talking specifically about internet, specifically talking about websites, it would be again with an intake and then we would step into a discovery phase. In that discovery phase we might…I think members of every team: Strategy, Strategy, UX, Design, Dev, I think everyone’s activated at that point, just getting a feel for the client maybe at a subjective level and certainly objective level, you know, we’re doing deep dive analytics into them, into their site, into their…
Alexis
Who they are and how they perceive themselves and what they want to be and how the website is portraying that.
Zaid
Yeah, that’s our discovery phase which leads, I mean it’s almost…that’s where UX is really starting, so those two sort of bleed in, so then we’re into UX; I’ll be doing Information Architecture; into design and then…and then into Dev…I mean, technically…
Alexis
It all kind of happens simultaneously for us. So although I don’t start developing during Discovery, I’m present just so that I have a reference point to go back to when I do start Developing because first and foremost, the UX and Design directions need to be capable of being built so I review for that but also so that when I’m starting to make development decisions as far as which path to take, what kind of solution will meet the need, keeping the end goals of the client in mind, so something may be better for them even though I want to build it this other way so I’ll keep them in mind first. And then it goes full circle so then once I start Developing then Zaid or whoever is designing then comes back and reviews what I’ve done. So that’s where we really start iterating and it becomes cyclical.
Gary
So, this is…I’ll just jump ahead into my question thought, but you’re already addressing it, so it sounds like you’re working in an Agile process, not a Waterfall process? Or you don’t ascribe to either?
Alexis
At the moment, our agency is making the transition to being fully Agile. Historically we’ve been Waterfall. Zaid and I have been on two of the most Agile projects that Chief has done so far.
Zaid
I wouldn’t say that we’re…I wouldn’t say we’re transitioning officially. I think what we’re trying…
Alexis
Oh, we’re doing trainings and we’re bidding more….
Zaid
I think…yeah, I think the correct answer is that there’s a time and place for both Waterfall and or Agile and what we’ve found is that more often than not, our approach is some blend of those things, or we are in a Waterfall approach until we are in an Agile approach within a particular project scope and I think we’ve found that there are certain places where…that’s where we’re…Alexis was talking about how there’s a point in our process where it becomes iterative and that’s a natural place for us where that makes sense is when we’re past discovery; we’re into the UX/Design phase and we’ve gotten pretty good at taking sort of a batch iterative approach to deliverables where we…UX and Design are working to sort of set the groundwork, develop the wireframes that will inform the designs and then kind of delivering that as a batch and then the UX…while the Designer is working out, turning those wireframes into comps, UXer is working on the next batch of wireframes and we can in that way work through all of the Design aspects in a way where it’s pretty…where we’re working closely and it also enables us to work more rapidly and what we’ve found, more often than not, what that’s allowing us to do is get to a finished thing or a presentable thing that we can put in front of a client that is missing a certain amount of finish, it’s missing a certain amount of…it’s a little more sketchy, it’s a little more, you know, it’s showing the intention without having sort of unnecessary fuss put into it, so what we’re doing is trying to get the…get to the idea sort of as quickly as possible without just hemorrhaging on hours so if we can put a sketch in front of a client and get a
…just sort of like a tacit buy-in, like OK I guess, then we can move into a design phase, but no, this is what we meant, we’ll render the design as quickly as possible, say is this what you have in mind? Yes or no? And then that would inform the next set of actions but what we’ve found is, you know, the faster we can get to those sort of sanity checks, the better, so sometimes that means we might be leapfrogging through; we might be coming out of that discovery phase already, thinking, well, we need to put some designed stuff in front of the client now and we can go to the bank, we can go to the well of all that great research that we just did, or we can maybe just think about what we know, sort of intuitively, is the right solution, or maybe find some balance between those things, just to get to something sooner and early, so that we can just head off a lot of hours spent toiling without the client’s involvement.
Alexis
And a lot of that is in the Agile mindset of getting a product owner to come in and review things with us so we get very enthusiastic about having engaged clients; people who can come in for a meeting two or three times a week! So, we do that kind of rapid review cycle, so they’re seeing something every couple of days really.
Zaid
Yeah, and that’s something there’s a good bit of vulnerability we’re still trying to sort out.
Alexis
It’s like…ooh, it’s not quite ready; ooh, they’re going to think we don’t know what we’re doing, but we have to show it to them now so that we don’t go on the wrong path.
Zaid
Right, and I think what that means for Designer and Dev is that you’re not going to get that big unveil; you’re not going to…you’re going to reach that moment where it’s like, Ta-Da! Here we go! It’s all thought out and done, which is…we can map this back to like the College project. I can equate it to that where you’re…you have checkers, like Project Runway OK; you’ve got check-ins.
Alexis
Zaid loves Project Runway!
Zaid
Tim Gun is coming in and he’s checking out your stuff prior to maybe the real meeting, so you’re getting good feedback sort of early on, you’re sort of in the midst of the process in a way where it’s still kinda soft and what we’re trying to do is how to use that to our advantage and sometimes it will…I can always fall back and say, well I just…it’s still rough, it’s a rough draft, it’s not fully thought out; apologize for all the seams showing or whatever, so you can fall back to that.
Alexis
But that said, his rough drafts are always really beautiful; the clients go: Oh…wait, this is rough? What do you mean, it’s rough? It looks done, it’s so beautiful!
Zaid
But, I mean, thank you, Alexis. I think what…the role that Design plays in these tasks I think, it’s the best job but it’s certainly, it’s the output that can connect at the emotional level, at the subjective level, that creates that moment, that creates that moment of connection between the client and the thing that you’re outputting as a team; the Designer gets that special job of kind of painting that scene but ultimately, that’s why the client is here, that’s why the client is at the table: they’ve looked at our portfolio, they saw that we had done this, they liked how we had done this for this other client so the faster we can get to that moment where we’re creating that emotional connection, we’re creating an emotional connection potentially between a client and their audience or it’s between us and our client, we’re establishing that piece; the rest…it just makes the rest easier.
Gary
Well, that’s one of my biggest struggles is that client interaction when I’m teaching because I don’t have a client and if I even do theoretically make up a client, like have students go through a discovery phase, which I actually do, that…Dan Mall really articulates what you just talked about really well, written down, this is for the listeners about this idea of…and you don’t have a big reveal, you just have a series of intermittent design conversations and so when it comes time for the big reveal, it’s nothing that they haven’t already seen; it’s just coalesced, so, what I struggle with in education is that I can’t have…how do I have that intermittent process where they’re getting feedback from the client…
Alexis
Well, it’s…it’s the same paradigm of student-teacher. So, in this case, the teacher is the client and showing those rough drafts to the teacher, you want them to be far enough along that when you show it to your Professor or your teacher that you’re not embarrassed and they’re not going, well, you didn’t work on this at all; this is not up to par, you’re going to fail! It’s the same thing where you want to continually put in effort and the more up-front effort you put into it, the better. Something that I thought was really nice about one of the courses that I took, it was for print design but it’s a similar concept where we had a project for the School itself and our Design Professor had talked to the College and said, what do you need designed? Let us design something for you and because we’re doing it as students, it’s free, basically, so it gets you that extra incentive to get your foot in the door. And we designed some…green space, sustainability signage to say like, this is what University of Maryland is doing in this space to improve our ecological footprint, that kind of thing. So, you don’t have to bring in a third party necessarily, so long as there’s enough time that you can devote to giving good feedback to the students, like a client would, and it doesn’t have to be great feedback, it doesn’t have to be like, oh, and also this other design thing that you should change, it would be well, I just don’t like that. And then they’ll have to deal with it, they’ll have to learn from that.
Gary
Yeah, it’s a tough hat to wear because when you do that as an educator, so you’re trying to play the client, then at the same time you’re also trying to teach them how to talk to the client, so it’s like, oh, I’m sitting there like…sitting there thinking about like, OK, well, I don’t like this, I don’t like that because it’s not solving my problem as the client but then I have to go like, OK, you should be asking me this so we can get to that point; it’s a difficult thing to straddle. And then the other thing too, though, you mentioned this is the other problem with web design is that, maybe you could look for an internal client, but there’s no way a student in a beginning class, whether it’s learning about the visual side of design, is going to produce anything that’s actually usable!
Even if the mock-ups are beautiful and they make this beautiful flat system that…it’s still sitting out there because there’s no Developer to make it real. So, and you already, Zaid, you already kind of started addressing this, so if Alexis wants to jump in on this one, so at Chief, what is the typical working relationship between the Visual Designers and the Front-End Developers? So, is there ever a point when Designer and Developer are sitting side by side, working on the design and the browser together?
Gary
So what does that look like? When does that happen?
Alexis
Continually! So…Zaid kind of does this with me as well with his designs but basically, I’ll work on something until it’s to a point where it makes enough sense that I can show it to him. I won’t show him what I’m doing in Views in Drupal, for example, because that’s not relevant to what he wants to see, but when we really get into the development cycle, it can happen every day, every other day, for an hour or two at a time; sometimes more than that, sometimes like five hours we’ll just have like straight working sessions for a full day, occasionally. And likewise, Zaid will show me his work.
Zaid
Right. Yeah, so I think…we’ve touched on this a little bit earlier talking about process and I think this is one of those areas where there’s overlap between UX and Design; there’s overlap between UX and Dev or Strategy and Dev and certainly with Alexis and I, that means Design Dev overlap, so I think for me, it actually starts really early and we have different kinds of design deliverables that we will output; page designs are one of them but there’s…sometimes, if we can’t distill the concept enough early on enough in the process, we’ll sometimes show looser design concepts, which are maybe, I’m not going to say mood board because they’re not mood boards; it’s not…
Alexis
Concepts.
Zaid
Concepts! It’s not done on a whim, this is sort of, maybe we’re putting together a set of brand elements, so we’re working through typography and color systems but also sort of leading into how those things translate into web specific interfaces, so that’s something we’ll get started early and a lot of times that’s where I’m going to Alexis and we’re talking about maybe…we’re talking about basic things like proportion: is it a 50:50? Or is it broken into thirds? All these things for approaching layout…
Alexis
Grid structure, functionality, point size adjustments, like if there’s a point or two difference between two different sections of text I’m like, is it OK if we make these the same?
Zaid
Yeah, so we’re baking those things in early and really I feel like it’s, to what Alexis was saying, as soon as it’s at a point where I feel like I’ve got my idea down in a way that I can have a conversation about it, then that’s probably good enough and it doesn’t have to be super-polished; it doesn’t have to have all the refinement but you know, it’s important, this is something that we have to build eventually and there has to be a certain…it has to play by certain rules: it has to…you know…whatever. So I’ll be talking early about grid systems and thinking about if it’s a grid of four, at what point does it break down to a grid of three in responsive versus two to one, so we’re having those conversations very early.
Alexis
And in regards to how we actually set up our work-spaces, we have a few what we call huddle spaces around the office where people can go and work and they have large conference room tables in them and we’ll actually take our entire external monitor set-up and the keyboard and mouse and drag it all over there so that we can do real work because when you’re working on a small laptop screen, it’s hard to share with each other what you’re doing, so we throw stuff up on the big screens; I’ll work in browser and be like, OK, let me make this small adjustment here and there and make sure that the line height is right here and Zaid will bring up his comp at the same time and will be measuring things for me so that I can just really quickly enter into my code and I don’t have to check and switch back and forth between windows and then also because he has experience with web development, he’s also in the inspector: he’s checking out my local environment: he can check it over the local network and have it up on his computer too and see my changes live and he can adjust to see what he thinks looks right as well and so that’s where it gets really fast and lightweight.
Gary
And so this is my …this is the second biggest challenge is the fact that you both are now working as the super-team, but they’re both vital: you can’t have one without the other and so when I’m teaching my students to be visual designers, this idea of working in teams, how to be a team, is really hard to replicate when you don’t have a team member that’s from a different discipline.
Alexis
You know, you could do some role-playing maybe; have one person play the Developer and have one person play the Designer and try to make them stick to their roles, maybe, and then switch.
Zaid
What if he…you have to take the Designer out of that; it would have to be…everyone but the Designer because we’re talking about Designers, everyone wants to be the Designer. I’ve had…
Alexis
Well, it might give them more empathy for the Developers if they have to play the Developer!
Zaid
Maybe! But yeah, I always…that was something, coming out of College that I wished I’d more experience with but there were a couple of projects where we did…it was more of a collaborative effort and I feel like the way to make it work is actually…the way that it works best is when you have…when you pull people from…you pull in…
Alexis
From other…departments.
Zaid
Yeah, yeah, other departments, otherwise it’s just not…I don’t know what to equate it to but it’s…you’re all having the same conversation, you all have the same perspective.
Alexis
So, your course covers both Design and Development at once?
Gary
Yes. So, it’s the idea of this thing called the Flipped Classroom, so instead of doing demos in the classroom and then having students go home and replicate or build off of, it’s the opposite where they get the demos via screencast video tutorials, readings like that, so that’s where we’re…so they’re doing screencasts in HTML and CSS and outside of class and then in class we’re talking about visual design principles, the process, starting from Discovery, Concept, Information Architecture and so forth through the end but I never actually have them build the website, the mock-ups that they create in class.
Because they’re just doing a series of tutorials, just to understand the basics of HTML, like what happens when you add padding; what happens when you float; what happens when you use Flex.
Alexis
It’s…I would say that it’s a soft skill to learn how to work with somebody else and while it doesn’t translate exactly to working with a Developer, just being with another Designer can be enough of a challenge on its own, so just like learning how to talk to someone respectfully and taking their opinions into your thought and trying to come up with a compromise: that’s a lot of what we do is just being nice to each other!
Zaid
Yeah, I think sometimes the roles might be more clearly defined, certainly comparing how our project teams work versus how you might create…set up a team of Designers to role-play or whatever…
Zaid
The roles might be more clearly defined but I think what you find once you get into it and especially if it’s all-in sort of approach, if it’s a real team approach where everyone’s sort of going at the same time and having it make things, produce results or whatever, I think you start to…it starts to play out really clearly what different people’s strengths are, what everyone’s strengths are and I think you eventually get patterned into a way of just playing to those strengths throughout the process; when that is great I think is when the…someone might be stepping outside of their perceived role or their defined role into a place that’s maybe somewhere in the middle. We become experts at mitigating or mediating between these points.
Gary
So, as part of the process here at Chief, do you use a Design System or Pattern Library or Atomic Design when you’re working on a project?
Zaid
Yes, I think…I mean again, I think it goes back to an approach, it’s a mindset; it’s not that we’re coming in with a set of parts that we’re…that are sort of pre-bagged that we’re then sort of theme-ing or re-skinning for a new project. I think what we’ve done a few times is, recently, is sort of during the UX and Design phases, start to think that way, to think in terms of patterns and it’s not that you’re coming in with a kit of parts so much as defining a system or framework once you’re into the flow.
Alexis
So, for example, one of our more recent projects, we decided that there should be a particular kind of Call to Action, but it would say a different thing every time, but that it should be so that it looked the same all the time, so that was a repeatable component that we used throughout the project.
Zaid
OK, I was just going to say…you could just lead that up, set that up differently: you could just say, with…MPF…
Alexis
OK. So, on one of our more recent projects, National Park Foundation, they needed to be able to draw attention to donation forms and newsletter sign-ups, but they always needed to look pretty similar so what we did is we made that a reusable component that we could place throughout the site, so that’s one of the elements.
Zaid
And a lot of the thinking that went into that was established early on in these group planning conversations that we had where we were doing content mapping exercises and defining, this is a Drupal site, we’re defining content types and mapping some more abstract sort of themes that we’ve established with maybe some real sort of content problems and looking, say, this thing looks like this and…or it’s going to look like this and this has some of that, so why don’t we kind of find a way to…sort of a middle ground to work to establish a pattern that can sort of catch both of those different content elements in a similar way so that we’re in some ways recycling a bit of our…a bit of the structural essence across the build.
Alexis
Yeah, it makes it easier to build a larger site that does more things if you’re using the same elements or whatever again, but in different ways and different places.
Gary
So, who determines what the Library is actually going to need? Is that…you said it wasn’t pre-baked.
Alexis
Yeah, that’s a team decision.
Zaid
Yeah, it comes out of that planning, those planning conversations where we’re maybe in the midst of Discovery or coming out of Discovery where we just learned all this stuff and we’re just…we have a big white-board going and like, these are the things that we know and these are the things that we don’t know and we can just start to, in an abstract way, start to liken or contrast elements and sort of define their requirements as we see them to understanding of what are we dealing with, something that’s very image-heavy versus text-heavy and I think that’s where it starts. It’s very much a group effort.
Alexis
Yeah, we were all in that room together: Design, UX, Strategy, Development and we each had our own perspective of what needed to go into the website, so when all of those ideas merged is when we came up with the components so we drew out basically the entire website: each major landing page and each type of repeatable content like blogs or news articles or parks, that kind of…
Zaid
Yeah, and some of it may have been…we’re talking about the National Park Foundation. Some of the things that we had outlined may have had sort of, I don’t know, we’re defining as a team maybe Alexis is talking from a Development perspective that we have to sort of codify these things now, to lock them down and everyone in the room can be like, OK, that makes sense, I understand the importance of that and why we’re prioritizing that. Some of those things were mapped out very clearly, but then in other cases, they weren’t so much. We didn’t leave those planning sessions with all the answers but what we did leave with was this sort of maybe a collective perspective on the whole thing to understand, like when I step into a wireframing session with Kate, our UX Designer on the project, that we have Alexis, she may not be in the room, but stuff that we’re talking about affects her and we know that she’s got to focus on all this Park stuff: how can we make these, the program pages and maybe the blog articles share a lot of the same components? Can we use patterns across these two different types of content types, so that we’re already…they’re sort of instilled in that planning phase, that idea of empathy that we try to…
Alexis
Trying to help each other out.
Zaid
RIght, we’re trying to create a current of empathy that’ll carry into our separate work sessions, our separate tasks, our individual tasks and I think if we’re all sort of able to at least participate in the big white-board abstraction of the thing that we…whether we’re verbalizing it or not, we’ve established, I don’t know, just a way of thinking, a way of approaching all the different design problems that will net results that are simple, as simple as they can be, and maybe also in some ways reusable and modular.
Alexis
And it isn’t always re-usable or modular but we still come away with a shared understanding of the goals and how we’re going to approach the problem.
Gary
OK. So, it does sound like you do work together on major milestones like the different areas and everything like that, so you’re…but what kind of things do you hand off and more specifically, what do you get handed off, Alexis, as the Developer? What is your Deliverable from the Design Team? Is it a Sketch file? You can get down to the nuts and bolts, like, literally!
Alexis
Oh, so the files that I get are PSDs and InVision links. Occasionally I’ll ask Zaid to splice up some stuff for me but generally I do that all myself. It’s really only if I don’t have time! And I also, I get the wireframes before the comps are done so that I can start laying out the pieces, the functional pieces of the website before the design is done.
Gary
All right, so I have one big question before I ask the kind of little cozy wrap-up questions; just paying attention to time. So, and this is my third thing that I struggle with big-time is, when it comes to micro-interactions and so what I consider a micro-interaction is like a hover state, like in a pop-up alert, transitions between pages when you click on something, etcetera. So, how does the Visual Designer work with the Front-End Developer to create those micro-interactions and then refine those things? What’s that process look like?
Zaid
I can jump in on that one. We’ve tried this different ways and I think, unless I have…if I’ve been inspired by something I’ve seen or I just have this idea for how I want a certain interaction to play out, I might try to render it, I’ve tried different ways; sometimes Alexis has found, I forget the name of the resource, she can plug it if she wants, but it’s just …
Alexis
CoDrops…
Zaid
CoDrops! Yeah, and…what was that, CodePen…there are different…
Alexis
Yeah, CodePen has one too.
Zaid
There’s different places where you can just go and say, hey, I saw this pattern, this is what I was thinking, or she’s just said, or I’ll just say, I haven’t thought about hover states and she’ll throw something like that at me and just pick one: OK, that makes sense. And so I think there’s all kinds of in-betweens. I’ve messed around with After Effects; if I have a really clear idea of how I want something to move, how I want a page to load, a sequence, then that goes back to my former life as a motion designer, where I have an idea kind of from start to finish how things should move but I think it’s really a spectrum and we go to all different kinds of resources to figure that out.
Alexis
I would say the majority of interactions like that, Zaid just kinda like lets me do what I want and then he’ll review it. It’s the key interactions, the ones that are like the core mission of the website that get the extra attention with the rendering or the extra research.
Gary
So, is that just your personal approach or do you think a lot of the Front-End Developers really take the lead on the design of the interactions?
Zaid
I think…I mean, I’m going to jump in this. I feel like it comes down to…I wouldn’t say it’s the designer having or not having an idea; it might come down to efficiencies; it could come down to…I don’t know, the Designer could just be wrong, they could have put things that are just not congruent into the visual system. If you’re going to say that this button is always going to hover to red, well, what happens when it’s on something red? And that’s something that you’re not going to…it’s not something you’re going to see until things are built and I think that naturally sort of puts it into the Front-End Developer’s hands.
Alexis
That said, I think that it does depend on the Developer; not all Front-End Developers have a background in design so they may not feel comfortable doing it. Or they don’t want the responsibility to do it or maybe they prefer being more siloed but as far as it goes here, I’d say it’s really on an as-needed basis and it’s never…it’s never the Front-End Developer making the decision laterally: it’s always…well, let me try this thing out and then I’ll show it to him and if he’s cool with it, then it’ll just stay there or more often than not, there will be a tweak.
Zaid
And I don’t think there’s anything sort of locked down in terms of what we are…what we’re outputting; page designs or template libraries. I think it will vary from project to project how we’re going about it and I’ve worked with Designers where that’s the first thing that they’re thinking about or it’s those interaction states. It’s the novel menu or whatever.
Alexis
Yeah, and I’ve worked with Designers who don’t think about them at all and are perfectly happy to just not think about them.
Gary
That’s baffling to me!
Zaid
Yeah, I think sometimes it just matters; it’s what do those interactions matter in the grand scheme of this thing that I’m working on and what’s the best way to render it? Do I have an idea?
Alexis
It’s like, sometimes…yeah, sometimes they are very important and sometimes they’re not worth an opinion they’re just…oh that flitter link that just technically, legally has to be there but we don’t really want to draw attention to it, so let’s just give it an underline.
Gary
All right. So, now let’s have the two quick wrap-up questions. So, first one is, what is the one thing, and you can say there’s nothing…what is one thing you wish design educators were teaching in their classes to better prepare students for the workforce? And so this is in regards to Visual Designers.
Zaid
That’s…I guess I have different opinions about that. I’ve been in different roles, certainly this one and in my prior experiences where I’ve had to make hiring decisions, you know, doing interviewing and looking and for different kinds of roles: junior to senior roles. I always feel like typography’s really strong; I would say typography’s really important to me but I think that’s more…what I’m getting at is if it’s not typography, it’s an ability to write. It’s an ability to execute, sort of, out of the box: come in and execute the things that might…that I might equate to more of a production task. This should be, if you’re a Visual Designer, you should be able to effectively communicate through visual design in a way that’s rapid, that makes sense; it would be like what I equated to if I’m working with a junior, maybe to the senior designer: I should be able to look at their work and be able to see the idea without getting tripped up in any kind of clumsiness with the image selection or the typography. The idea should come through and if I could equate that to trying to read an essay or something, this is the output of a writer: if I can’t focus on the concepts behind the words and I’m fixating on grammar and spelling errors as if they’ve outputted it without that filter, I think…I kind of go back and forth: do I want someone who has the big ideas and needs to polish up the execution, or do I want someone that can execute and I feel like it’s some blend of those things. But I could say that a Designer that can execute well might have more opportunities open up for them initially but if it’s the one thing, it’s got to be typography; I feel like that is sort of the link between all of it. If what we’re doing is communicating and you can just handle your words right, I think that can spill over into all the rest.
Gary
How about you, Alexis?
Alexis
For me, I would say the…it’s incredibly important to do self-checks, so like if you’re being really hard on yourself to try and do something revolutionary, well maybe it doesn’t have to be revolutionary. Ask yourself the opposite question and then vice-versa, if you’re just sailing along and this thing is going together really well, think to yourself, well, maybe I’m not pushing myself hard enough; maybe it’s not…I hate to say outside of the box, but maybe it isn’t enough and really pushing yourself to try new things but be OK with existing patterns because a lot of those are there for a reason, so the balance between the two is something that’s hard to get and to learn; certainly takes practice but it’s something outside of the normal curriculum that I think is incredibly valuable.
Zaid
Yeah, I was…just speaking of outside the curriculum: something that I feel like maybe is never teachable that I think you started to touch on is the idea of drive; it’s just the idea that…it’s the idea that this is an opportunity, that if someone’s coming in to do an interview or they’re starting out in their role, that they have in them this drive that’s going to push them through. Maybe they’re not working on the most exciting stuff right away; they’re going to have to earn that. Some people come in with expectations that they’re going to get right into the cool stuff and then they become disinterested or whatever. A lot of times we go through phases where there’s just no cool stuff. There’s no cool stuff; we’re in a Delivery phase, we’re in a Discovery phase…whatever, we’re just…we don’t have cool stuff to think about but it’s the people that step up and that can, I don’t know, they’ve got that unteachable skill of drive where they can come into a situation and maybe see all the opportunities or take the lull to take the, I don’t know, the smallest production task as a challenge and appreciate it for what it is, because they’re going to…it’s going to be a stepping-stone into something else and I don’t know, I think that’s the biggest unteachable and the thing that we try hard to find and sometimes you can see it in a Junior Designer; maybe they’ve been a couple of places or they’ve done a course correct in their career, but it’s that little bit of fire and it’s not ego so much as it is, I don’t know…
Yeah, I mean there’s something…they haven’t just been outputted out of a program; they’ve been exposed to some other things that have sort of shaped their experience and they’re sitting here at this table because they want to be here, not because they feel like they deserve to be here and I don’t know, that’s the…I think that’s the magic unteachable thing.
Gary
So, last question then. So, is there anything that you both are personally working on that you want to tell the listeners about? You don’t have to!
Zaid
Personally?
Gary
I mean, if you don’t have any personal projects, say, nah, I don’t have any. I just want to give people a chance to talk about themselves.
Zaid
Right. Yeah, I think…I can talk a little bit, I mean, I’ve got...I recently stepped into this more of a design only kind of role over the past year or so where prior to that, I was doing…you know, working in places where I could do the Design and Dev stuff and I think part of me is missing some of that. I wouldn’t say that my Dev skills are getting rusty but I am looking for opportunities to kind of get back in and get my hands dirty with some things. Maybe that’s a New Year’s Resolution, to get back in and build again.
Alexis
I see you looking at me like…with this look, I’m like….I love it! That fire!
Zaid
Yeah, I think there are times…and testing Alexis’s patience, maybe a couple of times; it’s one of those instances where I have an idea for something that takes on a visual shape on the site but I’ve gotten there because maybe I saw some cool CSS write-up somewhere and I’ve just been waiting to make it happen so I might just jump in and do the work and hand it to her and hope that she doesn’t get pissed.
Alexis
I’d be like…oh, his syntax is bad here, but I’ll fix it!
Gary
So, how about you? Anything, Alexis, that you’re excited or personally working on that you want to share?
Alexis
I’m always interested in animation. CSS animations and JavaScript. But really making…I’ve spoken about it a few times in a few different meetups and events.
Gary
Which meetups are you…
Alexis
So, I’ve spoken at the Drupal DC meet-up and Drupal GovCon and Zaid and I spoke about our process but also about how we come up with ideas together at a recent event that was hosted by AIGA and DC Web Women, I think. One of the female groups in DC. I apologize if it’s the wrong one, oh my goodness!
Gary
No, I will actually look it up and put the proper one in the show notes.
Alexis
I’m pretty sure it’s DC Web Women. And…
Zaid
She Codes?
Alexis
Women Who Code.
Zaid
Women Who Code. It was a joint…
Alexis
But anyway, so it was a joint effort between these two different organizations and…but essentially what it comes down to is giving your audience something spectacular; something unusual, something that will catch them off-guard and animation is a really powerful tool to do that with so I’ve been exploring different ways to incorporate more animation into my websites but in a way that’s unobtrusive; it should feel seamless and delightful, not in the way.