Episode Links

Abridged Transcript

Gary
Thanks. You do a lot of amazing things, so trying to sum it up in two paragraphs was kind of hard.
Joni
Yeah, now that I hear it said back to me, it is a lot! I do sleep though; I swear you would never guess by the intro, but I do!
Gary
Well, good. Well actually, OK, this wasn’t a scripted answer because I have a list of questions I wanted to ask you, but how do you maintain that balance, because your’s is crazy?
Joni
Yes. It’s very difficult. Honestly, if I said I had any answer, I would be lying because I still haven’t quite figured it out. I’ve had to learn the hard way to not take on too much. It’s just a lesson I’m constantly having to learn and we’re in a really unique industry in that it would be entirely all-consuming if you let it and very unapologetic for that and so it’ll just run you into the ground, almost, and you really just need to be aware of certain boundaries that you have; learn when you just can’t learn something or at least learn it to the extent that you personally want to. Sometimes, you just have to know enough to get by on your current project and that has to be good enough, at times. Which can be really challenging but if you don’t learn how to say no, it really does catch up with you, for sure.
Gary
One follow-up on that balance. So, when I’m teaching students, I’m teaching them HTML and CSS and I’m telling them, it’s a foreign language; it’s something that you have to practice every day to get proficiency at, there’s no magic bullet. But I think illustration’s the same way.
So, how do you…what’s your drawing practice like that you can keep up with the skill-sets that you’ve had all your life? Sorry for the curve-ball.
Joni
No, it’s totally, it’s a great question. It’s really hard, when I was starting out not long ago and then just as I guess as a disclaimer, going back to School for this was just totally not an option for me; I’ve been to School most of my life and it just wasn’t possible, so as soon as I realized I had to learn this stuff myself and I was on my own, I just started making a list of things that I have to know, based on what Twitter’s telling me I have to know and what blogs are telling me I have to know before I can call myself a real designer or a real developer and that quickly gets out of hand because the best tools for the job change every day; the job changes every day and if you think of it as a list of things you have to do before you can start, you’ll never start because the list grows every day. It’s still growing, and that’s OK, I see that more as being exciting now than scary. But I think the biggest challenge for me was just accepting that I can only do so much and I started with just creating my own little projects. My very first project was a children’s book so that’s what got me into illustration. I’ve always been very artistic in that I’ve always drawn and painted. I’m not good at those things but I enjoy doing them. So, illustrator was just another tool that I had to learn, just another medium for being artistic.
So I just started really small and I documented everything I learned as I learned it and published it on my blog for the world to see, which was very hard to start doing, getting over the fear of being wrong, I suppose, publicly; that was hard. So yeah, it’s just about breaking things down into manageable pieces and when you have a project in mind, your curriculum sort of organically unfolds because you need to do certain things to get your project done, so it might be a little wonky; honestly, I learned SVG through writing and illustrating a children’s book and needing to get those graphics on the web and then I very reluctantly, kicking and screaming, learned HTML and CSS because I needed it; I kept hitting roadblocks with what I was capable of doing. It wasn’t enough to finally get the graphic on the web staring back at me on the screen. I wanted to move it, so I had to learn CSS in the context of getting my graphics to move but of course things like web design layout came later but it was never something I was initially interested in.
Gary
That’s interesting and again, this is something going not what I was originally planning to ask, but you brought up. Everything that you did was intrinsically motivated because you wanted to do it and you weren’t told you had to…OK, so how much was it intrinsic that you just wanted to do it versus extrinsic where people on Twitter, blogs, whatever you were reading, were telling you these were the things you needed to do? Does that make sense?
Joni
Yeah. Well, honestly, it’s just I couldn’t retain the information unless I was applying it to exactly what I wanted to be doing.
So there were no blogs explaining how to create a CSS crab, OK, and make its eyes move, but that’s what I wanted to do and so that’s what I did and in doing that, I accidentally learned a lot about positioning and layout because to get all those little crab parts exactly where they need to be, you have to be really good at CSS positioning, for sure, so I sort of tricked myself into learning these things because it really wasn’t where I saw myself going; I didn’t see myself being a web designer exactly. I was just having fun and being artistic and learning new tools.
Gary
So, you mentioned that you didn’t have…you didn’t go to School for design or for illustration or for development and reading through your bio, you have a BA in History with a minor in Anthropology, Political Science and the Human Services Administration, the Masters. But I’m curious about your BA with the minors in Anthropology and Political Science. How much of that knowledge, that education, helps you as a designer, illustrator, front-end developer?
Joni
Well, at first I was actually kind of crushed because I’m like, oh no, what have I done? I spent all this money and all this time on School and it’s irrelevant now. And that was hard at first, but I quickly realized that that’s of course not the case. It’s made me a better designer in so many ways. Concerning my undergrad experience, my biggest take-away from that was just challenging things that are established as norm; learning to speak up and question things that other people say. Until that point in my life, all through High School and Middle School; you just sort of do as you’re told and you’re not supposed to question anything someone tells you. And then of course now I’m learning that I can and it’s really kind of cool to have a conversation with somebody when you don’t agree with them, and that’s incredibly valuable
And then concerning my Master's Degree, Human Services, focus in Grant Writing: the Grant Writing process when I was a Grant Writer, which was a whole lifetime ago at this point, was really all about breaking down complex things in really easy to digest ways for people in a way that gets stakeholder buy-in and that’s really sort of what I do every day still. So it all sort of came full circle; it’s a little bit of a unique background and I got here in a little…it’s pretty not the average way to get here, but I think there’s a lot of pros to having a non-traditional design background as well.
Gary
What is a traditional way? I don’t think that exists still!
Joni
Yeah, I don’t really know. That’s most of the designers I work with; I rarely ever hear, I went to a four year Design School and I graduated and now I’m a designer. Everyone sort of has a really cool path and I love to hear about people’s backgrounds, for sure.
Gary
I didn’t start going to School until my late twenties, so I had a very non-traditional route as well! OK. So, in addition to being a good illustrator and a designer, you’re also a front-end developer. Is the term front-end developer the correct term for what you do, or how you perceive what you do?
Joni
I guess it’s tricky; I sort of lose track of all the different titles, to be honest, but I suppose I would say I’m more of a front-end designer over a developer, if that makes sense?
Gary
OK, that makes sense. And the reason I’m asking that is it’s becoming so blurred, for me educationally, to train somebody to be a screen-based designer, they need to know some front-end development to get something on the screen, to then discuss, critique, talk about and learn from. So, is that really development, or is that just enabling design and I’m kinda struggling with where that balances for entry level students.
Joni
Right, yeah, it’s definitely hard. Everybody has different strong convictions about that. But I guess I always say, there’s really nothing more empowering than being able to build your own designs. When you hand over a mock-up to somebody, they might not be picking up on all your details that you’ve worked so hard on and your little micro-interactions that you’re super-proud of and you know that are going to really enrich user experience, so a lot can get lost in translation, so being able to just take over that part of it is, wow. Once you have a taste of that power, it’s hard to deny the benefit of having that knowledge.
Gary
That’s useful, because I never thought about the idea of in print design, you can, when you design something, you can get a printer and you can print it out and you can put together a book, you can tile together a poster. You can make it tangible and real. But if you’re just a visual designer and you’re just doing mock-ups in whatever the current flavor of the month is tools-wise, there’s no…that’s it; there’s no satisfaction of seeing a finished product. At least in my perspective, and obviously you agree, but I’ve never stopped to ask my students if they ever saw it that way themselves. Do they really care if it’s functioning? I’ve never…that’s something I’m going to have to ask them this semester. I never thought about that.
Gary
OK, so you also have a passion for teaching. You are a co-founder and co-organizer of Girl Develop Wilmington and you created a kids’ web design tutorial series for two plus, called Tuts+ Town. I read about your struggle with how to teach children HTML and CSS. Having taught HTML and CSS through Girl Develop It, do you find that adults and children need to be approached the same or differently when it’s being introduced to HTML and CSS?
Joni
Yeah, I’m finding that teaching is really what I’m most passionate about these days, for sure. But I do remember telling people that teaching Middle Schoolers and teaching adults this stuff, HTML and CSS, SVG, felt very similar and I was surprised at how similar it felt. It got a lot of the same questions; both groups found the same types of concepts to be tricky and both responded very well to doing over a lecture format, so I always try to make it a point for students to see a change that they’ve done produced a result on the screen within the first ten minutes of class. It’s so motivating and it’s really neat to see their faces light up when they can move something like vector grapes around the screen, for example, so it was very similar and I was surprised at how similar it was.
Gary
That was my kind of realization that it’s new to them, so whether…cognitively, as long as the person’s old enough to learn these concepts, there’s really no difference in how to approach them. When you’re giving the demos in class and yes, I know that it’s so important for them to see something right away; are they following along with you?
Joni
Well, what I do is I use CodePen as a teaching tool and so I will have a collection for every class that is a base for everyone to work from. The first example, you’ll open it up and I’ll have the code ready for you with instructions within noted sections of the CSS. I just will present this to them, let them get their bearings a little bit by just throwing them into it, because I can talk about this stuff at them all day but the truth is, I could go on for days and you’re still going to be just as over-wound when you see that code looking back at you, so I just approach it as, let’s just do this sooner rather than later and let’s just get comfortable with the general syntax; here’s what we see, here’s why all this code is just a fruit on the screen and here’s the little pieces and here’s what we can do with it and then they can just jump in with animations based off a foundation I’ve prepared for them already.
Gary
OK, because I think one of the biggest problems that I struggle with in the classroom when teaching HTML and CSS is for the longest time, I’ll do a demo, so we’ll start off with the blank page, we’ll slowly build the page, we’ll talk about what the tags are, what their purpose is, what they’re marking up and then we’ll keep adding pieces and they can follow along, they can get it while we’re in class but tell them to go home and replicate it; it just doesn’t work! They forget the minute they leave the classroom and so that’s my biggest challenge is how do I get them to retain this information, when I can’t be there to keep them practicing outside of class.
Joni
Yeah. Yeah, I guess the only experience I have with that is just providing people with the materials that we worked on and giving them…here’s some challenges, here’s some additional things you can do with this demo. Really just because, at the end of the day, the reality is you so rarely are starting a project from scratch; most of the time, you’re working with somebody else’s code and that is so much harder than writing…that’s a dream, writing something from scratch all the time, starting new with your own fresh code. That’s not reality. Reality is working with someone else’s code and it’s hard. And the best way to learn is to just…I guess I’ll mention CodePen again because that was just so critical to me getting my skills and getting started. I just would go in there and before I even knew what the heck I was looking at, I was breaking people’s things and there’s so much you can learn by deleting a line of code: oh yeah, look what happened when I did that; that’s really cool. What else will happen if I change this or that? So just getting comfortable with someone else’s work first; I’ve seen some positive results from that for sure.
Gary
And that’s one thing I’m kind of surprised about and it’s an observation when I’m working with students is, when we start positioning, I’ll say, we’ll walk through, we’ll make a page layout and then we’ll make two or three different layouts, but unbeknownst to them, those two to three layouts are probably, if you took pieces and parts from each one of them could reproduce any layout that’s on the web today. But they don’t see that, oh, I can just take this and put it over here; that is a foreign concept of picking these pieces apart that I can’t figure out how to articulate.
Joni
Patterns and creating flexible, re-usable components is definitely an advanced skill. I think in a perfect world you’d teach that to people up front so it’s the only way they know how to do things but I think in reality, it’s very hard; it’s very hard to grasp that and I think you have to know how to do it the wrong way first to know why that’s so right, if that makes sense?
Gary
Yes, it makes sense, but also knowing the grand scheme of things it doesn’t, because copying and pasting is pretty simple, because that’s the skill you need to be able to copy a pattern, paste it into yours. It should be simple but it’s an advanced skill: I love that term. Another question is, in addition to being a designer, illustrator, developer, you’re also a writer and so you wrote the SVG Pocket Guide and a lot of blog posts on using SVGs to create some pretty amazing designs. I’m bringing this up specifically because I want to know your thoughts on what an interactive or web designer needs to be able to be successful in the industry. Do they need to have all of those skill-sets that you posses?
Joni
Definitely not. I’m always cautious in listing out skills that I think are key to success because it just varies so much, depending on the position and the situation. It’s not uncommon to work with four designers that have very little overlapping skill-sets. But for me, I just learned exactly what I needed to in order to carry out whatever projects I was working on, so it took me down a slightly strange path, as I said, but I wouldn’t really have it any other way because I’ve had my hand in a lot of different things and it’s helping me hone in on exactly what it is I want to be doing. And then, getting back to the whole being empowered by being able to build out your own designs, you don’t have to rely on the hopeful design eye of someone else picking up all the work that you’ve done; you have complete control there so you can really see it through, and it can be exactly as you intended, whereas otherwise, when you’re handing it off, there’s really no promise there. So it’s always something I pitch is, a huge bonus, but I certainly know a lot of designers that don’t know HTML and CSS and they’re very talented and they don’t see it as being limiting, so it really just varies so much it’s hard to say.
Gary
And I think that’s the issue that design education is facing now. I would say back in the day, when there was a mechanical paste-up, this was before computers, there was an orchestra of people that was necessary to create a design, and then that slowly got funneled into one person on a computer can produce the same thing that everybody back in the sixties, a team. And so now you’re funneling back out again to, you need a team to produce something and it’s really hard for me to figure out…you’re not going to be able to do everything, but what is enough to lead you, to get your foot in the door and let you decide what path you really want to go down? So, from your experience working on these teams or working with other people, do you see a thread, some skill-sets? Well, not necessarily skills, but is there certain things that help, commonalities that help everybody come to the same, get on the same ground? Does that make sense?
Joni
Yeah, well I really can’t even just say, oh this certain tool; because that tool will change tomorrow and that’s really not the hard stuff. What I think is the most challenging is things that are regarded as "soft skills", so I think that designers so often, our work feels instinctual and we’re not very good all the time at articulating our decisions because it feels like instinct brought us to this layout decision but that’s not good enough; we need to explain exactly why we did that and on top of that, why we didn’t do something else, because we need to explain ourselves to people. We can’t just come up with designs and not be open to feedback of any kind and base this off gut instincts. So, learning how to communicate these things that at first seem instinctual is really difficult. The best designers I’ve worked with are very good at explaining why they do something, why they didn’t do something else and it just makes them such a pleasure to work with, honestly, and that’s a type of skill it’s really hard to have a class on that; it just comes from experience really and also, some designers can be really quick and I was definitely like this, and I can still be in situations where I feel a tendency towards this, but as soon as you get feedback, you sort of shut down and you just want to throw it out and just make the person happy and just do what they want done. But you need to be strong and you need to stand up for yourself and there’s certainly compromises that can be made but at the end of the day, you’re the designer and it’s up to you to be the designer and explain your stuff but also make the client happy at the same time.
Gary
That’s perfect. And this actually leads into the last question that I wanted to ask. And it has to do with your writing, so I really enjoyed reading through your blog. I love how you document your learning process, your insights as you approach each new project. So if I had one wish when it came to design education, I would want students to write and document each project, each semester, over their entire academic careers.
And so what they would graduate with would be an amazing asset to them and I think that kind of dovetails into what you’re talking about is that they would be able to articulate their ideas so they could write out why they were approaching something and then they could, when a client comes back and says no, I don’t like this visual direction, they have this written document to say, this is why and they could clearly articulate it. Can you just talk about how you got into that process of writing or how do you keep up with it on such a regular basis?
Joni
Yeah, well something I learned early on was that students make the best teachers. You remember exactly what was tricky about something, so you can speak directly to that right off the bat and that’s invaluable to people that are also starting out. And it helps you remember the information better; you can retain it better. So, as soon as I started learning, I just started writing and I don’t have a glamorous process at all; it’s literally I will open, I’ll start a blog post draft and I just start brain-dumping words like, this is what I found tricky today and here’s what I know about it so far and here’s what I would like to know about it. And then eventually I piece that together into a cohesive article. But the hardest part for me was just being brave enough to publish that first post because I think everyone’s really afraid to be wrong and once you realize that, that’s really not that bad; being wrong is really not that bad because what’s going to happen is, if you’re lucky, someone’s going to call you out on it and you’re going to be like, OK, let me fix that, so you’ve started a conversation and now you know better, so I guess the worst case scenario is that nobody calls you out and you go on thinking something to be true that’s false so just getting over that initial fear is huge and then part of my motivation to start writing was sort of giving back to the community because I was able to learn everything I’ve learned for free, which coming from a traditional education background, that’s insane to me: these people are just sharing their knowledge for free and you can literally start a career based on this information that people are giving you based off their experience, which is so cool. So I wanted to give back and help make the community better, in a way. So, I don’t know if I answered your question?
Gary
No, that perfectly did because again, I mentioned, students intrinsically need to want to do this. Me telling them to do it; they’ll do it but it’s not the same when it’s coming from them and so just hearing you, why you were doing it, kind of gives me some insights that I hadn’t thought about, so hopefully it’ll give me something to try, anyway! All right, Joni, before I let you go, is there anything you are working on that you would like to share or something you want to promote or maybe a final piece of advice you’d like to give design educators that we didn’t already cover?
Joni
Yeah; I guess any final advice I could give is to just try to make the community better with every project that you’re part of. And make yourself uncomfortable. I always push myself to do things far before I feel I’m ready, because I’ve just learned that I will never feel ready and getting into teaching was a really scary thing for me, but I pushed myself and I was incredibly uncomfortable and now it’s my favorite thing in the world and then just trying out different things like with the demos; just really hands-on stuff, I’ve gotten a lot of good feedback for.