Episode Links

Abridged Transcript

Gary
Hi. I have lots of questions for you but let’s start at the very beginning. How did you get interested in building websites at the age of eleven?
Sabella
So, I was lucky enough to grow up with a pretty computer-savvy mom; she went to school for computer sciences and while she is an accountant now, we grew up learning to take things apart and fix them ourselves; in fact, when we got our first computer which is that wheezing Packard Bell, when I took it with me, I took my own tower with me to school a bit later on, she refused to help me put it together so it was very much like a figure it out on your own type of household and I carried that with me. It all started with we were on AOL because that’s what you had back then and you’re learning this new thing called the internet and you’re seeing all these new things and I was just really curious; I want to know how they are doing this and it was a bit of just let’s tear this apart and see if I can build it on my own.
Gary
I love that because my first computer was a Packard Bell and getting the modem in there, just seeing if I could get the darn thing to connect to the internet before there was AOL: it was pretty fun! But more specifically, what interested you most at the first when it came to web design? Was it the visual side of it or was it the development and coding side of it?
Sabella
I have to say it definitely was not the visual side to start with; internet early nineties, not the most visually appealing thing, but it felt like magic and a big puzzle and I know there’s something behind this thing called the web page and I kind of want to understand what’s making it work. And actually part of that, I started, once I realized that I could…this is going to sound bad…once I realized I could see what was behind the websites, so if you think of server structure and folders that weren’t secured, I think it was how security was, pretty basic back then and really it was like, oh, look; this stuff is not on the website and I can see it, hacking 1.0 and investigating in that way and then turning over it was like yeah, I want to build something, I want to see, I want to tinker with it and I want to see what I can do with it. I’d say the back end interested me the most at first and then it became, as the visuals grew and your ability and what you could do with the web grew, my interest in the visual side of it grew as well.
Gary
And another reason why I was so excited to talk to you because that was actually my first experiences was, I built a website not because I cared how it looked: I just wanted to make this thing, I just wanted to make this thing that lived out there that anybody could see.
Sabella
Yeah.
Gary
It wasn’t until somebody actually, a former employer, who wanted me to make the website for the company because like, man your websites look terrible, because I hadn’t gone to school for design and I was like, oh, all right!
Sabella
Yeah. I remember my first website was built on GeoCities and it was all about animé and I was super-excited to finish it and I showed my mom and she was like a very lacklustre response because officially it was not…she’d seen at that point I’d been doing a lot more traditional art so she’d seen my paintings and my drawings and just it wasn’t translating over to this new technology, so just kind of carrying…my mom has influenced a lot of my life and so carrying that with me, we can always make this better!
Gary
That’s pretty amazing. I actually now just got the idea that I really would like to go back to the previous guests and ask them at what point did they get started on the internet, because we never actually talked about it; you’re the first one who openly says, this is when I got started, so I never thought to ask but I guess I’m going to have to go back and investigate. All right, so what led you to Drake University and getting a Bachelor of Fine Arts? Was it in Graphic Design?
Sabella
It was. I have a BFA in Graphic Design; so at that point…I was born and raised in Chicago, I’d been in Chicago my entire life at that point and I decided I was tired of Chicago, so I visited quite a few different schools and universities and was trying to really decide what I wanted to do. Art had always been a very important part of my life but so had fashion, so had writing, so had…I was really interested in weather and wanted to and still want to be a storm-chaser one day; I just had so many interests I really had to pin down what it was I wanted to do. Luckily I went to a high school that spent most of its resources in art and design so I got to really dive deep into it but doing some pretty advanced stuff early on and that was my first time thinking, oh wow, I can actually combine this technical side of me and this artistic side of me and make a career out of it: it’s called Graphic Design and it’s blowing up in these ways and maybe I should focus on that.
Drake University, out of all the colleges I visited, was the only place where I really felt like I was at home and they seemed to be really trying to keep up with the way that technology was changing because at that time, all the Graphic Design programs were still using PageMaker and were very print-focused and since I had been an internet kid, I’m like, this thing’s growing, we aren’t going to be only focused on print and Drake recognized that. And also just something very simple: I met the professors, the professors took us on a tour and sat down and talked to us and wanted to know more about us and it just felt…it kind of felt instantly like home and I didn’t really get that feeling from many of the other places I visited or got accepted to so yeah, Drake University was where it was at.
Gary
And so this podcast is meant for design faculty, so I also want to share one other anecdote is that I went to an unnamed school and I had to kind of go a really long way and I didn’t have any faculty greet me and…nothing. It was like: really? I’m not expecting the red carpet but just hey, how are you doing, how was your…thanks for coming, so that’s a big turn-off when the faculty don’t engage with those incoming students’ potential.
Sabella
Yeah, it’s a really small step that goes very far.
Gary
What was the…I lived in Chicago for a few years as well; what was the name of the school if you don’t mind me asking, the high school? I’m just curious.
Sabella
So, I did high school in the suburbs of Chicago so I was going to Hoffman Estates High School High School.
Gary
I’ve never heard of it!
Sabella
Yeah, so it’s kind of a struggle to find really good schools in the city and at that point we ended up moving out to the ’burbs and the way the schools are set up there is that a large part of the budgets will be set towards different things, so some schools they have a larger budget for Math or a lot larger budget for Science and I just happened to live in the suburb that had the high school that had a really good budget for Art. I’m not sure if that’s true, if those things are true now, but back then I really lucked out in choosing the right high school.
Gary
And I know this because my wife taught in the public school system in Chicago and yes, schools will, while they do everything, some will hang their hat on Mathematics or Writing or Art or anything else, so it hasn’t changed! So, you went to Drake and you got a degree in Graphic Design but you also took Lithographic Printmaking. Was that your concentration or was that in addition or was that the primary focus?
Sabella
That was my concentration and there comes a point where you could stop taking those additional classes, and just choose your concentration, but I kept going which is why I have a minor in it.
Sabella
Yeah, I am really astounded that I was able to even take that class. Out of the things we could’ve done, I thought painting was going to be my concentration because I had been doing it my entire life but something about…I mean, lithographic printmaking, it’s hard work; there’s a process to it. Sometimes you’re not even sure what you’re going to get at the end. It really takes a lot of practice. It’s hard physical manual work too, rolling out and grinding the stones and some people don’t like that and I loved it.
Gary
No, it’s…I do letterpress and it’s different but it’s therapeutic.
Sabella
It is, it is. Some people would run the track when they were stressed or needed a break from school and you would just find me in the print studio.
Gary
Do you think any of that process, of doing lithography, or any other printing, do you think any of that bled over into interactive or interaction design at all? Some methodologies or anything you took from it?
Sabella
I think it does; I think just doing something that has a process, you set up your mind to think in that way and I find that it keeps me more organized if I know there’s a way to start. Not saying that’s the way you’re going to finish but if you know, OK, there’s a baseline of how I should possibly do these things, and then you can tweak and change it based on the situation, but just knowing how to start gives you a much better advantage than kind of swimming through the possibility of everything all the time.
Gary
OK. One of the reasons I asked that is, I’ve been really lately thinking about HTML and CSS and to me, I’m thinking of them as a medium like silk-screening or a medium like letterpress; if you know the medium of HTML and CSS, you can really manipulate it and I just see that kind of parallel, the more I’ve thought about it.
OK, so your formal education, even though it sounds like you were ahead of the curve when it came to web and interactive design, but you graduated before there was the term Responsive Design. You graduated before the terms UX and UI really became commonplace. So, what from your formal education do you really see that was really beneficial to have that really helped you when it comes to Responsive Design and when it comes to UX and UI?
Sabella
I find the same problems I have when I’m coding something and when I’m designing something, the path that I go on, they’re very similar and I think the one thing that my formal education helped me to do, and this is something that you also just learn with experience, is knowing when to let an idea go! Especially when it comes to Responsive Design; if you just think about you have something the desktop here, you want to make all these things for mobile, you just have to know what features or functionality do I need to let go in certain states? And you have to learn to be OK with that. You also have to know when an idea’s just going to turn into a dead end and that just comes from…it comes from a lot of practice; you get that in school, you get that with experience. That’s probably the biggest thing that has helped me or has translated over into my interaction design.
Gary
You know, I’m going to jump ahead and come back to some other questions because what you just said kind of leads to me…so, right now I’m currently personally at a crossroad in what I teach in the classroom. I’ve been teaching heavy HTML and CSS, just not so students could code, but so they could critique their designs on a real device and however, the learning curve for HTML and CSS…it’s quite steep for them to be able to get to that point where they can get a functional prototype going.
So, this semester I had students use Sketch and InVision or Adobe Experience Design to create and test prototypes. But that process really doesn’t do Responsive Design justice. So, how do you manage that? How do you manage knowing those middle states, when they work or when they don’t work, if it’s from experience that you…how do you get that experience, I guess?
Sabella
I really love this new…not new, but the interest that designers have to learn to code if they don’t already know how to code because it is so valuable, just to know the limits of your designs based on the devices that they’ll be on. Maybe even if you start working with clients, just know what their budget is, right? You could design something crazy and get a development team to make it happen maybe in seven months and with a large budget but if their budget’s not that and if your time’s not that, you have to really understand what the mechanics are going to be to make your design come to life and I find the touch-points that you get using Sketch or InVision, I find them super-helpful just to see where the flow could be. I actually find the way that projects are set up to kind of be more of an issue when it comes to Responsive Design, mostly where people focus, so if you’re in the beginning, most people focus on desktop because that’s what most people are using and then we started using more mobile devices and now everyone’s saying, oh, design for mobile first. And those sort of things I don’t want to call my development trends but you know how people sway when they’re at the other end, I just…hey cool, let’s try this mobile design way of working to fix this problem and what I’ve found is the actual problem is people just don’t dedicate enough time to investigate either of those, so when you’re designing for desktop only, you’re leaving ten per cent of your project to get it all together for mobile and sometimes that bleeds over into development as well.
When you design for mobile, you have the opposite problem where ten per cent of your time is set for desktop so now you have these websites, or even these applications, that just kind of feel really funky on the desktop. I don’t know if you’ve opened up an application or a website recently and been like, I feel like I should look at this on my phone because it’s really hard to navigate in this view; that’s an example of something that was designed…they weren’t designing for your screen, equal amount of time you’re designing for another screen, so I think it’s more important to dedicate equal amount of time to investigate…let’s investigate small screens, let’s investigate large screens; let’s do them both thoroughly so that it’s a pleasant experience as we’re moving from one into the other because right now, I’m seeing a lot of…there’s still tension there that is really hard for tools on their own to solve.
Gary
Yeah, because that’s where I’m just kinda stuck beating my head is that middle state; the break points. Where do you…unless you do it in code, I just…unless I’m doing it wrong or I just don’t understand the process which could be very well, I just don’t see how you determine where the optimal line reading level for a break-point would be when you’re using something like InVision.
I just don’t…and so the only way for me that I understand is, I code that, then I can see where the break points and then I can spend time, like you said, designing to that point.
Sabella
Yeah, and I think the combination, having a developer and a designer work together on something is so crucial, because the designer can’t spend their entire time designing for every single device, every single breakpoint, because those are things that can be solved in code but it’s going to take them longer to code it because they’re not a coder, so if you can design the optimal view for each small, middle, large; get those down, start removing features that aren’t needed, start moving the order of things around as they make sense as you move through the sizes and then get your developer in and get your development team in and have them take a look at it and as they’re coding it, you should be afraid, or they shouldn’t be afraid, to come to you and say hey, I know you designed it and this way it’s actually causing these sorts of problems, or hey, we’re actually designing for an audience that’s using an older browser so I can’t really use these mix-ins to help me to reorder things or whatever the issues could be, there shouldn’t be any fear there to modify once it moves into production. It’s kind of like you want to design a shoe; the way I draw it, it’s always going to look different than the way it looks when I actually get it from the factory and that shouldn’t be a thing to be afraid of. I think the life of Pixel Perfect Design has passed because it’s not feasible for a world where we have a large range of devices.
Gary
No, that makes perfect sense. So, two questions, hopefully I remember the second one, but the first one is, it’s kind of more of an observation. I’ve never …I’ve gone to mobile sites, I’ve gone to sites on my phone or whatever and you’re right, I notice right away that they didn’t fully think out this …they didn’t think out this experience fully, but I’ve never actually stopped and looked at…since now there’s the big industry push for mobile first, I haven’t stopped and really analyzed poor large format experiences and seen if they are better at the smaller size, so that’s something I’m definitely going to tell my students right away is OK, look for that.
Sabella
Yeah, the biggest indicator for desktop is if you have gigantic buttons! Gigantic, full-width buttons for no reason, like, my screen is nineteen hundred across and this button is gigantic; that’s a clear indicator. Or even recently with Adobe, when they came out with their new suite, just seeing the responses from designers about how hard it was to navigate on Adobe Acrobat on your desktop and being like, was this made mobile first? Like, oh yeah, that was their focus this time around; it’s supposed to be really easily used on these smaller devices but it’s kind of clunky on the desktop.
Gary
I should be ashamed of myself but you’re right, I remember that update coming out, I was like, what did they do? Yeah, it’s like they pulled the rug out from underneath me. So, that’s a great observation. So the other question was then, yes, I firmly believe designers should be working alongside developers; not the waterfall but the agile process. But how do you…so you’ve gone to school…how do you replicate that in a design program, knowing the limitations that it’s kinda hard to get another…to get somebody in Computer Sciences, if they have a class; do you have any suggestions for us educators on how we can replicate that in the classroom?
Sabella
I would say…for my process, I tend to focus…I start with the wireframes, I tend to focus on information first, so what is the biggest or the top things that you need the user to learn, what are the things he’s going to interact with immediately and design for that first, because I find that if you don’t think about your information hierarchy, you kind of get stuck in this…oh, but I would ideally like this paragraph to be two lines long; well, actually this is a really important part of the website: it should be this long, and then you design after that and then moving, once you know which features are the most important and as you move into other sizes, I test a lot; I have my phone, I have my tablet, I’m tweaking things. I don’t think a designer…if something looks drastically different on mobile than desktop but is a flawless experience on both of those, that’s not a problem for me. I think when people get stuck on…oh, it has to look exactly the same on all of them…they’re not the same devices; they don’t have to look exactly the same. They should be cohesive and they should feel like a fluid experience but as you’re testing things, don’t be afraid like, hey, I put this button here for tablet and on mobile it completely disappears; I need to re-shuffle these things in this view, and that’s OK.
Gary
I’m glad you mentioned the wireframes and the importance of designing for the information. How do you…OK, so as an educator, I’m going to hand…I’m probably going to hand the students the content and I’m kind of telling them what content is most important, but that’s really not replicating how it is in the actual industry; it’s kind of taking away that discovery phase. So, what is that discovery phase? How do you work with the client to say…how do you determine what information is most important, in a nutshell, I guess?
Sabella
Yeah, one thing’s my traditional, I guess, graphic design, traditional educational backbone gives me is I love to sketch; I love to make really small sketches; I can trace this all the way back to my Type One class where we had to make just pages and pages and pages and pages of sketches and so that’s, when I’m in a meeting with someone and they start talking about how something looks, I start putting them down in a box; I draw what the shape of the thing it’s going to be and I start placing in, start getting some ideas down and I guess working in the innovation field, it’s really helpful that we have access to strategists and researchers and other types of designers and what it really boils down to is, everyone is just asking questions and if…I guess on my end, if a client says they want A and we go back and do research, we look at what the market is now, we look at what users are saying now and users are saying they want Z, you can’t be afraid to come back to them and say, we understand you want A; maybe here’s a view of what A looks like, just really quick. Z is actually what people want and what people need; here’s what that looks like and here’s what this is going to do for you, which is even more important; you can’t just switch things three-sixty and not say why that change is important.
I think…with design programs that I’m seeing now, and they’re working in the way that you’re saying where you’re given almost like a brief: here’s the information that you need and if I really go back to school for this completely fresh, knowing what I was getting myself into, I would love it if a teacher would kind of switch it up for me and do one of two things: they could come in as a client and then the students can sit around them and like they’re in a client meeting or a kick-off, ask them questions, get to learn more about them and then go off on their own to place that, or to come in as a client who says they want one thing while knowing that they need another; it’s like as a teacher, I’m going to give them the wrong information; I want to see who’s going to catch on here and kind of make that like a learning: I know I said this but as you design it are you noticing that these problems are arising.
Gary
That’s brilliant, because I’ve never…I know that, that the client doesn’t always know what they need! I never thought about actually tricking the students into telling the wrong thing and seeing if they figure out like, wait a minute: this doesn’t add up! So I’m definitely going to try that in the next semester.
Gary
Yep, hopefully I pull it off well. So, I just lost what I was originally thinking about when you were talking, but to go back to some of the earlier questions was…so you also received a minor in English Writing with a concentration in Creative Writing. How helpful has that been in your day to day working life?
Sabella
I’m finding it more and more helpful now as I’ve moved away from working in studios that just produce, because you just produce and you hand off to the client and that’s kind of the end of the relationship. Moving more into the innovation and the strategy part of it where you’re trying to build a relationship with someone, you’re trying to solve problems as they come up for them and the way that you do that, if you’re weaving in what users are saying or what researchers are finding or what you’re finding, you have to be able to tell that as a story and that’s where my creative writing comes in. It was really funny this is coming up because I’ve actually been spending a lot of my time editing things on my current projects, so it’s really come into handy because you have to be able to write for different audiences. Sometimes the audience you’re speaking to knows the technical jargon of our world; sometimes they have absolutely no idea so, how do I explain why this one thing is not going work without saying any technical words?
Gary
Do you have…as part of the job of being a Professor, you also have to do advising and students will always ask, what kind of electives should I take. Is there any kind of writing classes that you think that would pop into your mind like, oh, you should take this kind of...whether it’s Creative Writing, whether it’s Poetry; I have no idea. Is there any that you think that you would recommend to somebody who wants to practice that?
Sabella
I’m so torn because I love my creative writing background and I chose it specifically because I love writing fictional things. I have absolutely no interest in non-fictional work, or writing it. I love reading it but writing I’m like…eh…but now I would say if you’re a designer with interests in research, I really think a non-fiction writing course would really work for you because you’re translating facts and actual feedback into a story versus fictional, which is what I’m using, which is not to make up stories but to tell a story that gives emotion. You want to get people excited and those things aren’t mutually exclusive but I definitely see if I was more interested in what the researchers were doing, I’d probably want to write closer to how they describe things and I feel like creative writing wouldn’t be able to help me do that as well as how I would organize a story if I was writing it in a nonfiction way.
Gary
All right, so we’re getting close on time so I’m going to ask two more questions and the first one, I remember my original question that I was trying to stumble through earlier; you mentioned drawing and iteration and there’s not an educator out there who will say that that’s not super-important, but for whatever reason, we can’t get students…they want to do one thing and be done. We’re doing a bad job of fostering exploration. So, obviously you had it naturally but for those that don’t, do you have any suggestions on how to get students to do it more or maybe you can articulate why it’s so important, so I can tell the students?
Sabella
Sure! I’m going to get a little bit philosophical…So, if you’re going to be spending time on something, time is a finite resource, so why spend more time on something than you need to? Especially when you’re trying to solve a problem and there’s another way you can do it just to solve it a little bit quicker and sketching while you do that because…and sketching is something that I would gravitate to naturally, but even I still find myself thinking, oh, maybe I should just pop into Illustrator really quick and do something and sometimes you do have to take key elements and kind of design them out, but you get sucked into the computer; it’s so easy because the possibilities are endless and I know when I do that and it’s too early in the process, I start thinking about things like color; I’m unhappy with the font that I’m using to quickly mock this thing up; I’m thinking about pictures and stock photos and I start getting really deep into the woods when really the only thing I need to answer for Step One is, where does information go and how does it look?
Gary
Can you…in the past, I’ve asked students to make wireframes. Wireframes are different than…wireframes are the placement of the information, working through the hierarchy of the information; they’re not working through the layout or the design…well, I guess they’re…
Sabella
Oh, so I will use sketches to very quickly run through some…well, to run through some ideas pretty quickly and to really reach out with all my potential but not on the computer because you can always do that much quicker with your pen to a paper; it’s going to be sloppy, it’s going to be messy but as long as it’s in a language that you understand, then that’s completely helpful because by the time I’m done doing that, I’ve nixed off more than half of those ideas and so that’s time I don’t have to waste putting on the computer these designs that I know aren’t going to work because I’ve figured out, oh this actually won’t translate well, it’s with the devices or this will only work on this page and not for other ones; sketching should be a way to think through the process or think through the question or the idea and then when you move to the computer, you’re refining that down even more, so it’s like a big triangle; you start with a thousand things and you’re sort of whittling yourself down to one and as you’re doing that, you kind of up the tools that you’re using. So, you start with sketching, you move to wireframing, you move to lightly designed wireframes, you move to prototypes, you move to code, you bump yourself back if you need to and you just keep moving in that way. For me, it’s all in the name of saving time, which is very precious!
Gary
Yeah, no, and I think that’s a perfect way to explain it to somebody who’s like, why do I have to do fifty sketches because you could do fifty sketches now, or you could spend a week on a really tight comp and then end up realizing it was the wrong solution and then spend another week going at it again and you could be wrong a second or a third time where…yeah, I think that’s an amazing way to explain it to students: you’re thinking through your pencil and you’re just saving yourself time. So, Sabella, before I let you go, is there anything that you are working on that you would like to share or something that you want to promote?
Sabella
Oh man, I have so many work in progress projects that I can’t…I have nothing to show yet but a lot of it…so, my interest now, I’ve been focusing for so many years on learning; I’m very skills focused, I still am very skills focused, especially when it comes to development, there’s a lot that I want to learn and that keeps me glued to my screen at work and it keeps me glued to my screen when I’m at home, so I’m starting these new projects where I’m trying to get back to traditional artwork. I think it’s really…people think left-right brain, they think art and math and for me, that’s true but I also think it’s coding and it’s work on the computer and it’s physical work on the other side. I kinda want to work this muscle a bit on the other side where I’m getting more tactile, or I’ll lose those skills. So, I will have more but I’ll be announcing them as they finish or publicizing them on my Twitter, my Twitter handle is macandrow and so I’m hoping to have some things too; I’m working on a message behind some things that’s becoming more important to me as I continue this career so you’ll see some mix of digital work and maybe some physical collage work or other things; I’m not quite sure yet, but I’m excited!