Preview: Because there are a lot of developers out there, let’s say, who want to design their own website or they have an idea for a startup and they want to create the MVP [minimum viable product] and they can do the back end, but they have to do something user facing and that could be super intimidating if we don’t have any kind of design background, and I see a lot of people being like, “Okay, do I hire a designer, but I don’t have any budget so what do I do? Do I get someone to work for free? But that’s not a good thing?” And so I want to write a book to help the developer who knows how to do the back end, but just wants some like handholding to kind of understand some of the design concepts in a very quick fashion.
[Music]
Lea Alcantara: From Bright Umbrella, this is CTRL+CLICK CAST! We inspect the web for you! Today Tracy Osborn returns to the show this time to discuss how developers and non-designers can get more comfortable with web design. I’m your host, Lea Alcantara, and I’m joined by my fab co-host:
Emily Lewis: Emily Lewis!
Lea Alcantara: Today’s episode is sponsored by Foster Made, a versatile web development agency specializing in custom application development, content management systems and user experience design. Through partnerships with designers, agencies and organizations, Foster Made is committed to building better digital experiences. Visit fostermade.co to learn more.
This episode is also sponsored by Craft CMS. Craft CMS is excited to announce the release of Craft 3. Craft 3 includes the Plugin Store where you can discover, try and buy Craft plugins right from the control panel, an image editor, multi-site and more. Craft 3 is also a dream to develop and extend. It requires PHP 7, making it faster than ever before. It’s available as a Composer package and it lives in a public Github Repo, so it’s got public issue tracking, hold request and more. You can download Craft 3 today at craftcms.com.
[Music ends]
Emily Lewis: Before we get to today’s episode, I wanted to remind our listeners, we have a donate link on our site. So if you love CTRL+CLICK and have a little spending money, consider donating to help us keep the show going. A dollar, five dollars, whatever you can spare will help us continue to deliver great content, high-quality audio and transcripts for each and every episode. Now, to today’s topic, web design for non-designers. Guiding us in our discussion is Tracy Osborn who is a designer, developer and entreprenerd living in Toronto, Canada. She’s the author of Hello Web Books as well as the creator of WeddingLovely. Welcome back to the show, Tracy!
Tracy Osborn: Yehey! Thank you for having me.
Lea Alcantara: Absolutely. Can you tell our listeners a bit more about yourself?
Tracy Osborn: Well, that was a great intro. I kind of do a lot of things, and when someone asks me at a Meetup and someone is like, “What do you do?” I always have just like or I’m being like, “Oh, what do I say?”
Lea Alcantara: [Laughs]
Tracy Osborn: And so I usually like distill it down to, “I just to make money in different ways on the internet, whether that’s running the startup, WeddingLovely,” and I started writing these books, the Hello Web Books. I have a book for learning how to code and then I wrote a book for learning how to design, and I just released my first like “zine”, and it looks like last week, to teach command line introduction.
Lea Alcantara: Oh.
Tracy Osborn: So all these little things, I like to build products and see if I can support myself using those products.
Emily Lewis: Oh, I love that. That’s a good description.
Tracy Osborn: Yeah. [Laughs]
Lea Alcantara: Cool.
Tracy Osborn: It’s a long one though. When I’m like just meeting someone at a Meetup and I’m just like, “Let me tell you all the things I do.” [Laughs]
Emily Lewis: [Laughs]
Lea Alcantara: So speaking of those products, when you were last on our show in 2013…
Tracy Osborn: Oh, my gosh.
Emily Lewis: [Laughs]
Lea Alcantara: I know. You spoke about funding and maintaining your startup, WeddingLovely. Fast forward five years, now I hear you’re selling it.
Tracy Osborn: [Laughs]
Lea Alcantara: Can you tell us a little bit more about that and how that came to be?
Tracy Osborn: So WeddingLovely, I guess is over eight years now, or eight years old, which is crazy to think about, and like five years ago, it was a podcast, it feels like it was a year ago.
Emily Lewis: [Laughs]
Lea Alcantara: [Laughs]
Tracy Osborn: I’m like, “Where is this time going?” But for WeddingLovely, I mentioned the book stuff, and that’s been super fun to work on, and that came about, I don’t even know how the Web App existed when I did the podcast last time, and that was because I was burning out on the startup.
Lea Alcantara: [Agrees]
Tracy Osborn: And I need another project to work on because I was just like, “Oh, like I love working on WeddingLovely.” But the reason why I do it is that I can work with small businesses, and I decided to choose the weddings niche for that, but in terms of weddings, it kind of drove me up the wall and I needed an outlet because I was like, “Weddings are ridiculous and it costs a lot of money and I built WeddingLovely to try to like make things better, but still it’s like kind of dragging on for me or something.
I need something new to do so why don’t I try self-publishing a book to teach how to build a web app using Django, which is the programming language I’d like to use or framework that I’d like to use the most.” So I started working on those books and I seemed to be doing really well. I’ve been followed up with a second book on Django and then I just released a book teaching design for developers, and this was last December, so pretty recent, and I kind of fall in love with doing those projects, and because I did that, my work with WeddingLovely has suffered because I’m just like splitting my time between these two projects.
For WeddingLovely, I’ve hired people who are running the company that are passionate about it and then last year, it was like the best year ever for WeddingLovely, but I’m still the “founder or president” person head of the company, and because I’m distracted, I think it could grow better if there’s someone passionate at the head, you know?
Lea Alcantara: Right.
Tracy Osborn: If that makes sense?
Emily Lewis: Yeah.
Tracy Osborn: So I love doing it. I love my employees, and it’s been fun to be running for the last eight years, but it’s kind of like I have been thinking I would like to focus on my books and what can I do about teaching and doing my speaking around the world and whatnot and then give WeddingLovely over to someone who can grow it further better than I can while I’m distracted.
Emily Lewis: That’s really exciting and also I think it says a lot about an entrepreneur mindset versus like a business owner mindset. They have a lot of things in common, but I think there’s something about an entrepreneur who sees a vision just so much bigger and they can separate themselves from it for the purpose of that vision or that project versus a business owner whose identity gets very tied to a business and it’s about sustaining that business in the long haul. I think it’s fascinating. I think what comes to my mind is just curiosity: so everything that you learn from WeddingLovely, have you been able to like really translate to running Hello Web Books or has it been a completely new learning experience?
Tracy Osborn: I think in general I just like working in projects where I’m constantly learning something new.
Lea Alcantara: [Agrees]
Tracy Osborn: With WeddingLovely, I taught myself how to program by building WeddingLovely and I chose Python and Django to do that, and as I added more features to WeddingLovely and figure out how to add payments using like Stripe and PayPal and I had to do and create like search on this site and I had to create user dashboard. I taught myself more and more about Django and Python while working on WeddingLovely, which has been a really awesome way of learning how to become a developer, and that’s kind of where Hello Web App, my first book, came from because as I taught myself Django, after I figured it out how to build that feature, I then looked back at like the tutorials and whatnot that I was using, and I was thinking, “Well, now that I know how to do it, I think that tutorial is teaching it the wrong way.
Emily Lewis: [Agrees]
Lea Alcantara: [Agrees]
Tracy Osborn: Like I needed a tutorial or something that is more visual. I needed something that was more fun, like more aimed towards designers and kind of designer thinking, at least my way of thinking. I need and want program tutorials that is like deep dive into like all of the programming terms, “And oh you need to learn how to do a method, and let’s tell you everything about what methods are,” and I was like, “That just confuses me in going to all of those details.” [Laughs]
Lea Alcantara: Oh, right.
Tracy Osborn: I was like, “All right, I see an opening that I can take advantage of in terms of programming tutorials, and I have a unique voice and something unique I could say in that area, so that would be a fun project for me to work on and see if it actually…” And back in the day, I was like, “Well, let’s see if this works out.”
Lea Alcantara: [Agrees]
Tracy Osborn: And today I am so happy how well the books have been doing.
Lea Alcantara: I find that so fascinating, just the concept of translating, because we just had an episode on localization so we talked a lot about translation, but the fundamentals of it is just communication and figuring out context. What I like about the approach you’re doing with the Hello Web Books in general is the idea that not everybody thinks the same way about design concepts, not everybody thinks the same way about coding concepts.
Tracy Osborn: [Agrees]
Lea Alcantara: And you’re right, there are a lot of coding tutorials out there assuming you already sort of know how to code. [Laughs]
Tracy Osborn: [Laugh]
Emily Lewis: [Laughs]
Tracy Osborn: Right.
Lea Alcantara: Which is kind of like a chicken and egg kind of situation.
Tracy Osborn: [Laughs]
Lea Alcantara: So if you’re completely foreign to that type of language, but you’re writing from the context of somebody already having some sort of understanding, that can get very confusing for a novice.
Emily Lewis: [Agrees]
Tracy Osborn: Yeah, exactly, and there are a lot of programming tutorials or I guess programmers, some programmers, in general, can be very militant in how programming should be taught.
Emily Lewis: [Agrees]
Lea Alcantara: Right.
Tracy Osborn: And a lot of this came also from going to conferences and overhearing people being like, “Man, Django should not be taught because it’s making people bad developers.”
Emily Lewis: [Laughs]
Lea Alcantara: [Agrees]
Tracy Osborn: And I was like, “There’s not just one kind of developers, not just like one kind of engineer out there. There are people out there who are being back as an engineer who’s working on algorithms at Google, but then there are also people like me who I just want to build web apps that other people can use, and I don’t need to have like an understanding of Big O notation in order to build web apps.
Timestamp: 00:10:04
Emily Lewis: [Agrees]
Tracy Osborn: So maybe I’m not like an “awesome and perfect” engineer developer person, but what I can do makes me happy and I think it’s worth other people to know that they can do these things without becoming like this idea of the perfect developer.
Emily Lewis: [Agrees]
Lea Alcantara: I think it’s a difference between like a mind shift between coding for the sake of coding versus what’s the output, what are you trying to do? Are you making something very specific?
Emily Lewis: [Agrees]
Lea Alcantara: And in the end, it almost really doesn’t matter what the coding language is or the process if you have a good product in the end, right?
Tracy Osborn: Right, yeah.
Lea Alcantara: It doesn’t matter.
Tracy Osborn: Like I’m a maker and I want to help other people become makers, I guess, in a nutshell.
Emily Lewis: Yeah. I think I’ve mentioned this on the show a couple of times because I really relate to coders and programmers who feel things should be black and white and there’s a right and a wrong way.
Tracy Osborn: Yeah. [Laughs]
Emily Lewis: Because that’s a lot how I approach the beginning of my career in front-end development, it was standards or nothing.
Lea Alcantara: [Agrees]
Emily Lewis: And if it didn’t follow standards, I had disdain for you, and I can look back on it now and I’m kind of amused because I think I thought that way about everything in my 20s.
Lea Alcantara: [Laughs]
Emily Lewis: But I think one of the greatest things that I’ve had the opportunity to do as a business owner is work with a variety of clients and really understand that what I do is in service of them; I’m creating products to help their businesses, and the way I do that sometimes can’t be black and white, and most of the time, can’t be black and white because of budgets, because of who is going to take over the resources once we’ve developed them and handed them over. There are lots of compromises you make and it’s about making intelligent compromises, and I think what you’re describing with your books, Tracy, is that it’s another way of describing the process of creating something from a different mindset and that’s what’s needed in our industry.
Tracy Osborn: [Agrees]
Emily Lewis: There’s almost too much of the other.
Tracy Osborn: Yeah, as you know, it’s not going to work for everybody, too.
Emily Lewis: [Agrees]
Lea Alcantara: [Agrees]
Tracy Osborn: But it’s understanding that there are multiple different viewpoints out there and learning styles out there, and in the end, hopefully, this would just help a group of people who didn’t understand, like for the programming books, there’s a large group of people out there who wanted to learn programming if it’s not really intimidating.
Emily Lewis: [Agrees]
Tracy Osborn: And I hope that this is something that would serve them.
Emily Lewis: Totally. It reminds me of one of the reasons I wrote my book, It wasn’t because there wasn’t information about microformats out there, but it’s because it was dull and boring and confusing.
Lea Alcantara: [Laughs]
Tracy Osborn: [Laughs]
Emily Lewis: And I was like, “This stuff is actually easy if someone would write about it in a different way.”
Tracy Osborn: Right.
Emily Lewis: If you can write about things in a different way, you can reach a broader audience. So Tracy, your latest that came out in December, Hello Web Design, is to help people who aren’t designers understand web design, which sort of seems like the reverse of our industry urging designers to code. So you’re now urging developers to understand design.
Lea Alcantara: [Laughs]
Emily Lewis: Why do you think that’s an important conversation?
Tracy Osborn: So it’s kind of like the sister/brother or whatever to Hello Web App, because Hello Web App I wrote to teach web app developing using Python and Django. I really aimed that at designers and I wanted it.
Lea Alcantara: [Laughs]
Tracy Osborn: I wrote this in a way that if someone knew HTML and CSS, I said, “Okay, here’s how you start working with Python and start building applications that have logins and registration and have a database.” So I had that, it was working really well, and that way of thinking of teaching a beginner concept to like a niche of people in a friendly… Hello Web App and my books and my writing is really silly and down to earth and not serious, and I was like, “Well, maybe I can do this for the other side of the coin.” Because there are a lot of developers out there, let’s say, who want to design their own website or they have an idea for a startup and they want to create the MVP [minimum viable product] and they can do the back end, but they have to do something user facing and that could be super intimidating if we don’t have any kind of design background, and I see a lot of people being like, “Okay, do I hire a designer, but I don’t have any budget so what do I do? Do I get someone to work for free? But that’s not a good thing?” And so I want to write a book to help that developer who knows how to do the back end, but just wants some like handholding to kind of understand some of the design concepts in a very quick fashion so they can create something. I’m not going to say it’s going to make you a designer.
Lea Alcantara: [Laughs]
Tracy Osborn: You can’t get a job at some places as a designer using Hello Web Design, but it’s going to be a good book if you want to learn just enough concepts so you can start working with a design and then you could go to that level to continue to learn design, become a designer or you can just use it so you become a multi-talented and be able to create your own projects yourself without having to worry about that other piece.
Emily Lewis: So you mentioned this would be something more like if someone wants to develop something for themselves or it’s kind of like that intro into understanding web design, do you think it’s a good kind of first step for people to — I don’t know — like you said, become that more multi-faceted developer?
Tracy Osborn: [Agrees]
Emily Lewis: So learning these web design fundamentals, how does that sort of support that long, broader goal of not just being a developer, but maybe actually being able to sell web design, whether it’s for an employer or for yourself?
Lea Alcantara: [Agrees]
Tracy Osborn: So the first half of the book kind of goes over the big design concepts with people as designers who probably went to school or have been working with it for years, so things like color, that process of choosing colors for websites can seem really, really intimidating if we have no idea like what colors to use and how many colors do you use, and so just picking red as color, and if that doesn’t really work, and you’re like, “Why don’t they work?”
Emily Lewis: [Agrees]
Tracy Osborn: So there’s like a chapter on color that breaks down some basic color theory concepts, but then also that other part of the book, I included shortcuts that you can find on the web for like creating a color palette.
Lea Alcantara: Right.
Tracy Osborn: So instead of like going from scratch in your color palette, you can just go to these websites and then using those beginner color theory concepts you just read about in the first like six or so paragraphs, then you have a better idea about how to choose a color palette and then apply it to your design. So it’s kind of combining both, A, very, I don’t want to say dumbed-down, but a very friendly and welcoming explanation to these designer concepts like color, typography, grid, user experience, but then combining that with shortcuts that exist on the web to help you like apply those concepts without having to start from scratch.
Lea Alcantara: [Agrees]
Emily Lewis: So you’re learning how to get the job done, but you’re also learning like if the job expands later on down the road, you have some resources to help you resolve those challenges.
Tracy Osborn: Right. It’s nicer. It’s again a handholding, so you know how to start from scratch. At first, you might just be going to these websites, these curated Google font websites. It lists out instead of like a 400 Google fonts that are available for use in your website. There are websites out there that are like, “Here are the forty best.”
Emily Lewis: [Agrees]
Tracy Osborn: So you could cut down the amount of choice, and then you have a better idea of like, “Okay, well, if someone curated these lens, so I know they are good.” And then you can put that, and that person can start using them in their designs, and then hopefully, by doing design and starting to implement, creating their you know, and choosing their own fonts and choosing their own colors, it’s going to start building that kind of design eye, that design feeling. They’re going to start internalizing what they’ve learned by doing that it will help them down the road.
Emily Lewis: [Agrees]
Tracy Osborn: So then they could learn what actually does make a good typeface, but that could Step 2, 3 or even 10.
Emily Lewis: [Agrees]
Tracy Osborn: Step 1 is just doing design.
Lea Alcantara: Right.
Emily Lewis: Making it comfortable to do design.
Lea Alcantara: Yeah.
Tracy Osborn: Yeah, I’d like to think about my books as the fastest way to go from zero to one because there’s so much you can do after you get out of one.
Emily Lewis: Yeah.
Tracy Osborn: But that initial step can be really, really hard and intimidating so I take out all that like scary stuff and I just put you on the fast track to just getting something done and then you can do more if you feel like it, learn more or just go forward with the skills you’ve learn in my little books.
Lea Alcantara: So I’m curious if you feel that learning web design fundamentals actually makes someone a better web developer, because that’s the kind of the impetus of a lot of people saying, “Oh, you’d become a better web designer when you learn code.” Is the reverse true?
Tracy Osborn: [Laughs] I would definitely say yes because one of these things I try to instill in people in the book is that user experience and determining what success is.
Lea Alcantara: [Agrees]
Tracy Osborn: It’s not just like creating MVP for a startup. It’s not just like creating a predesign. It’s creating design that achieves something, like you’re collecting email addresses or you’re trying to get the people over to your social media signup or some kind of success. It’s determining what success is for you and then working on design as a way to make that success possible.
Lea Alcantara: Right.
Tracy Osborn: And that’s a concept that gets lost a lot in design. It’s not just making something pretty. It’s making something work.
Lea Alcantara: Right.
Tracy Osborn: And I think that would definitely make developers better designers when they think about it that way, and it also makes it a little less intimidating because you can have something, you know. You don’t have to have like the perfect, most gorgeous web design as long as it’s working for you.
Emily Lewis: Right.
Lea Alcantara: And I think one big thing to mention is you can be a developer that has perfect code that’s performing well and has the right type of syntax and you have all the sysops and everything is perfect, but if no one wants to use your site or your app because the look and feel and the user experience is woeful, then you didn’t build a good app.
Tracy Osborn: Right, yeah. A lot of developers know the website Hacker News, just like news.ycombinator.com, and I haven’t seen it in a while, but there has been a lot of people who were like, “I’m going to redesign Hacker News because it’s ugly,” and they’ll create these like mockups, and they’re kind of delightful to look at because they add more spacing, and like it’s a very much like a developer website, so like crowded a lot of text and the readability is kind of awful, but it does so well. It’s working so well for that audience that I would argue like it would be nice to redesign it, but it’s doing so well that you can argue that the design is working for their audience.
Timestamp: 00:20:14
Emily Lewis: But I mean, that just loops back to what you said initially, Tracy, which is getting this idea, this concept of user experience, thinking about who is using it and not only developing for that audience, but designing for that audience, and if that audience is really comfortable with an interface that maybe “more experienced” designer would say, “Oh, that’s terrible.” [Laughs]
Lea Alcantara: [Laughs]
Tracy Osborn: [Laughs]
Emily Lewis: But if it’s working, I mean, that is about user experience.
Tracy Osborn: Yeah.
Emily Lewis: It’s just for that particular user audience.
Tracy Osborn: Yeah, exactly, and it gets intimidating when you look at these websites that are like best designs, and you see like the Strike website is gorgeous and it houses like animations in the background, and if you’re a beginner, you’re like, “I can’t do that,” and let me tell you, I can’t do that either. Personally, I’ve been doing design for like 12 years. [Laughs]
Emily Lewis: [Laughs]
Lea Alcantara: [Laughs]
Tracy Osborn: There’s a lot of amazing web designs out there, but you can learn a little bit of those basics and just understand like how hierarchy works and how to improve your readability in websites and you can actually read what you write and just understand that it’s not a contest and that you can build something for yourself and don’t have to worry about hiring someone elsewhere or just start picking up that skill.
Emily Lewis: Well, and as we’re having this conversation, I’m even thinking about so there’s Deep Dive Coding boot camp here in Albuquerque that I participate in and the students are brand new to coding and so they’re learning what the industry is calling a full-stack development package, but design isn’t a big part of it. It’s very development focused, and I think something like this would be a perfect addition to one of those like you learn how to code in six months, but you can also learn some design as part of it.
Tracy Osborn: [Laughs]
Emily Lewis: Because one of the things they have to do is to complete a project at the end that is user facing, and because I come in and help mentor them as they prepare these presentations, consistently, they’re not the most attractive. It’s all about the function and the technology used to achieve that function, which is core to the program, but the truth of it is, these students need to also learn how important that user experience is, and I think this sort of more simplified approach, the handholding you’re describing, makes a ton of sense.
Tracy Osborn: Yeah, and then the other thing I try to deal different is there’s a lot of introduction to design tutorials and books and resources out there, but a lot of them suffer from the same things that learn to program does or learning to program tutorials do where the programmers are like, “Here is the best way to do it,” and then design went there also like, “Here’s the best way to do it. You need to learn about the history of typography in order to do any kind of thing with typography.”
Lea Alcantara: Right, right, right.
Tracy Osborn: And I’m like, “How are we… Move to Step 2 or 3 and start with zero, which is just like choosing a font.”
Emily Lewis: Right. Get the job done.
Tracy Osborn: Yeah. And so that’s exactly why I kept my book small, I want them to be small, not intimidating, like a really quick read on purpose, so it really shows that it’s zero to one and they can be used in courses like that. It’s not like you’re going to do a whole another course in design. It’s just like, “Here’s a supplement to what you are learning.”
Emily Lewis: Yeah.
Lea Alcantara: [Laughs]
Emily Lewis: I love it. So can we talk about some of the web design fundamentals that you talk about in the book to kind of give our developer listeners a flavor of the kind of things you’ve already touched a bit on color and typography. What you described with color makes a lot of sense, but can you explain how you kind of addressed typography because I think that’s a big challenge, even for seasoned designers?
Tracy Osborn: Oh yeah, it’s a huge challenge for myself and so a lot of the stuff in typography is kind of glossed over and I really just pulled up my book to be like, “What did I write?” [Laughs]
Emily Lewis: [Laughs]
Lea Alcantara: [Laughs]
Tracy Osborn: I forget a lot of the typography. I wanted to explain some of the concepts that go into typography because when you go to — I mean, this is aimed at like web design, but you can use this one on print design, but if we go to some place that has fonts, and you’re just like, “What do I use?” And those fonts will be categorized like serif, sans serif, monospace, and I was like, “Okay, first thing is this should explain what those terms mean because that can be really intimidating. I’ll go over those, what those terms mean, so you’re kind of saying why that different fonts are categorized in different ways.”
Emily Lewis: [Agrees]
Tracy Osborn: And then the typography then goes into mostly readability, things that you don’t normally think about when you’re working with web design. Especially when you have responsive web design, you just start typing your paragraph and you don’t realize that line-lengths and how long a line can be, how that affects readability.
Lea Alcantara: [Agrees]
Tracy Osborn: Yeah, that’s something that’s not obvious, so I go into this like not obvious, but super handy hints for doing web design, like shortening the length of your lines and adding leading between your lines like the spacing between your lines so they aren’t cramped together or it makes it easier for somebody to go through it, and that’s basically it in the typography. It’s like what are the terms in typography and then how to affect your readability by like playing with these different concepts, and then I go into some other hints like, “At the beginning, limit your design to just two typefaces just to make things easy on yourself because you can do things like italics and bolding and combine those two and create different styles in that way, but by only having like two different fonts overall in your design will simplify the design.
Emily Lewis: [Agrees]
Lea Alcantara: I wish clients would take that. [Laughs]
Tracy Osborn: [Laughs]
Emily Lewis: Lea, you and I are thinking about the same thing.
Tracy Osborn: [Laughs]
Lea Alcantara: Yeah, I know. I know.
Emily Lewis: [Laughs]
Tracy Osborn: [Laughs]
Sponsored by
Lea Alcantara: Yeah, I just wanted to add the two cents in terms of when you’re choosing two fonts, also as Tracy mentioned, there’s italics and bold, I actually tried to limit your style as well, because two fonts can turn into ten fonts. If suddenly you’re like, “I’m going to use the condensed version here, then the condensed bold italic version here, and then the serif version of this, but technically, I’m still using the same font, then you’ve got a mishmash.
Emily Lewis: [Agrees]
Lea Alcantara: So using a constraints would be good not just for design, so here’s again a good tip for developers, when you limit your typeface choices with design, well, that’s great visually, but for performance implications, especially when you’re using web fonts and third-party services, the less fonts you’re using, the less weight there is on the page.
Emily Lewis: Yeah.
Tracy Osborn: It’s so true.
Emily Lewis: Just to add on, because I literally just did a test of this, but it’s not just third-party fonts, it’s even when you are serving them yourself and self-listing.
Lea Alcantara: Oh, yeah, absolutely.
Tracy Osborn: Right. Yeah, one of the biggest philosophies in the book, that if you distill the book down to one sentence, I would say that you could distill it down to just reducing clutter.
Emily Lewis: [Agrees]
Lea Alcantara: [Agrees]
Tracy Osborn: So when you have all those like boldings and italics, even those different fonts, if you have a bunch in there, it’s adding to this visual clutter. When you’re cramming all your text together and you don’t have the right line height, it’s adding more visual clutter. When you have a bunch of different colors out there and lots of different shades and things going on everywhere, that is adding clutter. So in terms of someone who’s new to design, I try to emphasize to just keep in mind reducing clutter. Do whatever you can to simplify it. It can make your life easier, but it also going to improve your design by spades, like it’s the biggest thing to remember when it comes to doing design I find for beginners.
Emily Lewis: So I’m curious, how do you take the concept, the fundamental of grid or layout, because I think done well, it can achieve the same things that typography can do for readability and kind of simplifying, but I think that is even more challenging to teach to someone when they also have to implement it in a responsive situation.
Lea Alcantara: Oh yeah, yeah.
Emily Lewis: So how do you tackle that?
Tracy Osborn: So I’ll admit that I don’t tackle that if in full. There are a lot of places where I was like, “Okay, hey, I’m going to go over these basics,” and go often really learn about responsive design because I cannot go into that book now.
Emily Lewis: That’s a whole book in and of themselves. [Laughs]
Tracy Osborn: Yeah. Like grid, I simplified that down to just simply lining things up, and I know that’s a really, really simplified explanation for grid, but just by having your different elements in your page lining to this like invisible skeleton also adds to that feeling of cohesiveness and it reduces that visual clutter on the page when things are misaligned with other things. So I have to explain that, like that’s why we want to have a grid or a need for some kind of like skeleton or structure as just so things are lining up better.
Emily Lewis: [Agrees]
Tracy Osborn: And this especially helps for people who are not doing web design. There’s a lot of stuff in the web we’ll automatically add in those like vertical columns in some way, shape or form, like Bootstraps, grid system and all the other CSS frameworks all have or include some sort of some grid system that allows you to add the responsiveness.
Emily Lewis: [Agrees]
Tracy Osborn: But when you go into, say, designing slides, that’s where you have to think about lining things up because slides, it’s like plunk things out in your slides and then you’re like, “Why do things look chaotic here?” [Laughs]
Emily Lewis: [Agrees]
Tracy Osborn: And just remembering, “Oh right, just adding in those like invisible vertical columns when you have a bunch of things on a slide will help improve the design of that slide.”
Emily Lewis: Yeah, it’s so good that you’re really just emphasizing these truly, truly fundamental concepts because that’s the kind of stuff that if you have zero background in anything with layout or design, it is not intuitive, that is not necessarily something that you know is intentional. You may take it for granted that that stuff just happens, and so I’ve never been trained in web design in any formal way, but I did a yearbook when I was in high school and college. [Laughs]
Lea Alcantara: [Laughs]
Tracy Osborn: [Laughs]
Emily Lewis: And I learned a whole lot about layout and grid and I feel like that was one of the things that as I got into front-end development actually helped my finished products because when I would view them online, I had a sense that subconscious sense of tension that happens when things are not aligned that make you feel uncomfortable reading something or viewing something allowed me to see those opportunities to make changes to support that layout sort of thing, and I feel like it was a huge jump in me being able to create websites by myself as a developer, but applying some of these design concepts that I sold to clients, I made money from.
Timestamp: 00:30:14
Tracy Osborn: [Laughs] I’d like to call it design intuition, and it’s something that so hard to teach. It’s just like the feeling you get, and designers have the feeling because they have that experience of working over and over with colors and fonts and typography and spacing and that they have a natural feeling for how things should work or not work, which then makes it harder to teach because you’re like, “Well, how do I explain this feeling I have because I’ve been working with these things?”
Emily Lewis: [Agrees]
Tracy Osborn: And that’s another chapter of the book I try to explain design intuition and kind of that you learn the concepts and then that’s not stuck in your brain yet, but you actually have to think about those concepts, and especially when looking at good design, one of my homework for people reading the book is to whenever you see good design or are you going to only see bad design? Look at a design and try to figure out why that design is working well, like why. Maybe that one the spacing is really great in this website or they have really great colors, and try to think critically about what’s making something work and what’s making it not work, and that’s going to help build that design intuition and make it easier for that person to then later on working on their own design to have things more internalized and they’re able to bring them forth better.
Emily Lewis: Yeah. Lea, does this remind you when we were teaching Erin [Lewis] web design?
Lea Alcantara: Yeah, absolutely. I mean, it’s one of those things where fundamentals can be taught and you can give certain rules, but it takes time for them to do it over and over again until they’re like, “Oh, yeah. I need to move this here.”
Emily Lewis: [Agrees]
Lea Alcantara: And it’s funny, too, just as someone who’s teaching, when you realize how much you’ve internalized all the learnings…
Tracy Osborn: [Laughs]
Lea Alcantara: Because a lot of things to me, as someone who’s been designing websites for over 20 years, it’s obvious, like I immediately know when someone is not aligned, and I immediately know when something can be moved to be a little bit better. What’s interesting when we were talking about grid a little bit is, for example, you’re talking about CSS frameworks like Bootstrap or Foundation, it could already have a 12-column grid system or 16-column grid system and then it could be easy for developers to go, “Okay, this will be four columns. This will be five columns, et cetera and so forth.”
But you need to understand why certain pages should have five columns and this particular section will always have that versus like, “This is going to be two columns. This is going to be six columns. This is going to be twelve columns. This is going to be, you know.” [Laughs] Just because you have a grid and you can align things to them doesn’t mean it’s actually following the grid the way it was meant to be. It’s just meant to be like a particular guideline to start off with, and that goes back to what Tracy mentioned was if there’s one thing you can learn about design really, it’s about reducing visual clutter. So once you make a decision for that particular design, just like with design patterns with pattern libraries and all that fun stuff, you need to apply that in all the cases that apply for that particular piece of content.
Tracy Osborn: Yeah, yeah. As you know, Step 1 is just starting with design, right? [Laughs]
Lea Alcantara: Right.
Tracy Osborn: And just trying to get things out there and start building on intuition and you understand like, “Oh, reduce clutter and start working with the grid.” And if you do it in enough time, then you realize, “Oh, right, that is the right advice.” [Laughs]
Emily Lewis: Well, I think what you were describing also about encouraging the examination of. When you see something that you just like, taking a beat to examine why you like it and clarify that to build that sense of intuition or to build your design eye.
Lea Alcantara: Right.
Emily Lewis: Because we had an intern for a number of years and we were training her like how to build her own portfolio and helping her think about design, it was very hard for a really long time, but at some point, because we were encouraging her to create essentially like a scrapbook, a digital scrapbook, of all the things that she sees that she likes or in magazines or whatever, at one point she said to me, she’s like, “You know, I now know why those typefaces are together.”
Lea Alcantara: Right.
Emily Lewis: She’s like, “And I can’t stop seeing it.”
Lea Alcantara: Right.
Tracy Osborn: [Agrees]
Emily Lewis: She’s like, “And I see it in commercials, and I see it on movie posters.”
Lea Alcantara: [Laughs]
Tracy Osborn: [Laughs]
Emily Lewis: And she’s like, “I see it now.” But it took a period of time, but it really is that process of kind of looking at things and asking yourself why you like them.
Tracy Osborn: And one thing I want to mention also is like the same thing happens in its own way for programmers, for new programmers. There are a lot of rules and ways of doing things and you can teach someone like, “Here are like some guidelines,” but until you actually start working with it and you start and when you complete your first project, you’re not going to understand at the beginning, “Oh, this is why it is.” You can kind of figure it out, but there would be a moment when you’ve worked with it for a while and then you’ll really truly understand it.
Emily Lewis: Right.
Tracy Osborn: Programmers go through the same thing. They’re going to say like, “Oh, this type of programming method is better than another programming method.”
Emily Lewis: [Agrees]
Tracy Osborn: And you’re like, “You won’t really understand it until you actually work with both of them yourself.”
Emily Lewis: Right.
Lea Alcantara: So I have a controversial question.
Tracy Osborn: Oh.
Lea Alcantara: I don’t know if it’s really controversial, but I mean, is good taste the same as design intuition? Because some people would argue that regardless of how much you can teach these particular fundamentals or even understand these particular rules, can good taste be taught? Is it the same as design intuition?
Tracy Osborn: [Laughs] In my opinion, if someone is talking to me and saying like, “I want to become a designer,” their goal is to do something that works for them, like to build a design that works for them, achieves their goals, and the idea of taste, it just seem so much like there are people out there who are like, “This is good and this is bad.”
Lea Alcantara: Right.
Tracy Osborn: And I think for a new programmer, just throw that out and just work something that works for you, that works for what you’re trying to build in your audience. I think that’s really intimidating to think about good taste versus bad taste, and it could be something good like four people with ideas about what good taste and bad taste. For someone it might take two months to figure that out and start having something that looks like good taste. Someone else might need to do like be playing around with design for like five years until they hit something like everything clicks and they’re doing it in a certain way and they figure those things out.
Lea Alcantara: Right.
Tracy Osborn: But for the new programmer, don’t worry about having good taste or whatnot, but just start figuring out what works for you and just see what’s going on with your design.
Emily Lewis: [Agrees]
Tracy Osborn: And if it’s working for you, then like thumbs up.
Emily Lewis: [Agrees]
Tracy Osborn: Like Hacker News doesn’t look like good taste.
Lea Alcantara: [Laughs]
Tracy Osborn: It’s really crowding a lot of texts and the text is black and kind of hard to read and there are so many ways you can improve it, but it’s working for that audience.
Emily Lewis: [Agrees]
Lea Alcantara: Right. And I also want to point out that there are different types of styles, right?
Tracy Osborn: Right.
Lea Alcantara: And just because you prefer one over the other doesn’t make one bad taste or worse or good or better or whatever. That’s why there are so many different types of, you know. There is flat design.
Tracy Osborn: [Laughs]
Lea Alcantara: And then there’s a little bit more grungy or post-modern or minimalism.
Tracy Osborn: Yeah.
Lea Alcantara: All of those are legitimate stylistic choices, but one isn’t necessarily better than the other.
Tracy Osborn: Yeah.
Lea Alcantara: It’s just their stylistic choices depending on the audience or whoever is making it, whatever the purpose is.
Tracy Osborn: Yeah. And I will say that I think it’s valid to, and I want to say — not copy, but to be inspired by things that do appear to have good taste that work for the person learning how to design. If they see something like, “That looks awesome,” they shouldn’t go in there and be like copy it verbatim. We all know that’s bad. But that they can be like, “Well, you know what, the logo is over here and the menu is over here, and I think that’s a good idea, so I’m going to let that my own way,” and copying like in that way, like being inspired by good design is another shortcut for getting good at design yourself until you have opinions and the ability to make something unique, but that making something unique in the beginning is near impossible.
Lea Alcantara: Right. Well, I mean, design standards exist for a reason, too, right?
Tracy Osborn: Yeah. Logo in top left and menu in the top right. Like everyone is used to that.
Lea Alcantara: Right, right.
Tracy Osborn: And there is no problem with following that trend because people are used to it. It’s actually going to be a good user experience because then your users are also used to that framework.
Lea Alcantara: Yeah.
Emily Lewis: So Tracy, in terms of, as you were writing this book and you mentioned you were inspired by conversations you’ve had at conferences and things like that, so have you got any sense of what you think developers misunderstand most about web design?
Tracy Osborn: Oh, that’s a good question. I think there are two main principles about user experience where you can design something that’s gorgeous, but if people don’t know how to use it, that’s useless. That’s a useless design.
Emily Lewis: [Agrees]
Tracy Osborn: Like that concept is something that I think a lot of developers miss when they’re working on a design. There are two focuses on those visual principles. They’re like, “How do I do the color to look nice together, and how do I make them really pretty button?” But miss the fact that the button can be really pretty, but you can’t find it and therefore it’s not used.
Emily Lewis: [Agrees]
Lea Alcantara: Right.
Tracy Osborn: So I think that would be the main thing I try to emphasize is like to really, really again [laughs] focus on how it’s working and then you can start adding those like little visual frosting with everything. [Laughs]
Lea Alcantara: [Agrees]
Emily Lewis: In terms of the web fundamentals that you cover in your book, if you had to pick one for a developer to really focus on to kind of find that success for a website, which one would it be?
Tracy Osborn: I’m just going to go ahead and do the clutter thing, [Laughs] because that expands kind of the lay, but they expand every…
Emily Lewis: [Agrees]
Lea Alcantara: Right.
Tracy Osborn: The first half of the book is all this visual. There are design principles and that’s all that comes down to that clutter and just trying to figure out what you can do to simplify and see what you can do to reduce that clutter, because it’s going to make actions on your design easier to find. It’s going to make them easier to use because there’s not going to be a lot of like visual crap everywhere that’s distracting you, and it’s going to make your life easier as a designer because there’s going to be less things you have to like markup and decide to make pretty.
Timestamp: 00:39:57
Emily Lewis: Do you also mention in your book that that effort of keeping things streamlined and clean on the front also makes it streamlined and clean [laughs] in your code, too?
Lea Alcantara: [Laughs] Yeah.
Tracy Osborn: [Laughs] I don’t mention that. I actually try to avoid any reference to code whatsoever.
Emily Lewis: Wow.
Lea Alcantara: Interesting.
Tracy Osborn: Because even though it’s called Hello Web Design, there are so many people who come up to me and they’re like, “Oh, so this will help you with CSS?” I’m like, “This is not. No.” Okay, because everything is kind of blurry when it comes to front-end development.
Emily Lewis: [Agrees]
Tracy Osborn: A lot of people think, “Web design actually means working with HTML, CSS and JavaScript,” and I’m like, “No, I am literally just talking those visual principles and user experience and UI principles, but I’m not touching code.” But for those, yeah, it definitely does help the underlying code and things you have to write and of what you’re designing.
Lea Alcantara: So you already mentioned clutter is something you want to avoid in a particular design. What else would create an unsuccessful design?
Tracy Osborn: Hmm. Okay, I hate to repeat the same thing over and over. So I’m trying to think of something. [Laughs] Because the next thing I thought was like user experience. There’s an example in the book where I take two different forms, and there’s like a form that’s using all these design trends of like flat design and using those like — what do they call them — ghost buttons where it’s just like an outline.
Emily Lewis: [Agrees]
Tracy Osborn: And I’m trying to explain like why you can have like a few of these trends, but then people might not be able to see that button and then they won’t be filling out your form.
Lea Alcantara: Right. So it’s clean and pretty, but it’s still unsuccessful.
Tracy Osborn: Yeah. It might have like page where it’s something that’s super clean but just has a bunch of texts, but the text is long or it’s just… another thing I talk about content is that a lot of people when they’re writing content for website have a tendency to write too much.
Emily Lewis: Yeah.
Tracy Osborn: They would have paragraphs upon paragraphs upon paragraphs and that’s like people on the web do not read in depth. [Laughs]
Emily Lewis: [Agrees]
Lea Alcantara: [Agrees]
Tracy Osborn: It’s really, really hard to read in depth. It’s why people skim. So you’ve got to like, A, cut down your content, so like take that really long wordy paragraph and then cut it down to like one or two sentences, and then take all of your content as a whole and add ways to help people skim, like add those subheadings, maybe do some strategic folding just so like really pop out the component part of a paragraph and make it easy for someone, like people on the web who are skimming, make it easy for them to go through your content, because if he is going through your website and he sees an essay, it’s far more likely that person is just going to click off and do something else than actually read it in whole.
Lea Alcantara: [Agrees]
Emily Lewis: Yeah. I like that one. I mean, these all ultimately come down to creating an experience that someone is going to use.
Tracy Osborn: Yeah, definitely.
Emily Lewis: That’s the fundamental of it all, it sounds like, and I really do love that you kept the focus of this book so tight to design fundamentals because I do think it’s important. If someone is coming to this with nothing as a point of reference, adding code into or CSS…
Lea Alcantara: It’s confusion.
Tracy Osborn: [Laughs]
Emily Lewis: Well, not just confusion, but it takes you away from what you’re trying to learn. Do you know what I mean?
Tracy Osborn: Right.
Emily Lewis: Like it’s important to know how to implement this stuff, but you’ve got to learn these fundamentals first before you just start randomly implementing.
Tracy Osborn: You know the web is scary. There are so many different things, but you said before like becoming a full-stack developer. [Laughs]
Emily Lewis: Yeah.
Lea Alcantara: [Laughs]
Tracy Osborn: I’m like, “Hey, that is like in six months, like holy molly, is that possible?” Like there are so many things you have to become like a “true” full-stack developer, there are so many things to learn; design, front-end development, back-end development, and there are different languages and there are different ways of using languages and different frameworks, that it can be like so intimidating. [Laughs]
Lea Alcantara: [Agrees]
Emily Lewis: I mean, I’ve been doing this for more than 20 years now and I’m not a full-stack developer. [Laughs]
Tracy Osborn: [Laughs]
Lea Alcantara: Right. [Laughs]
Tracy Osborn: I know I’m just now learning — I hate to say this, but like JavaScript has been the thing that ...
Emily Lewis: Yeah.
Lea Alcantara: Oh yeah.
Tracy Osborn: My… oh god, I took a React course with Wes Bos and he’s just an awesome, awesome teacher.
Emily Lewis: He’s so good.
Lea Alcantara: Oh, he’s great.
Tracy Osborn: Yeah. He came up here to Toronto and I was like, “I am going to your thing because I need to meet you because you are amazing.” And that was like that was the first time I ever did anything with the JavaScript framework, and then jQuery, but long story short, back in the day, I learned Java or tried to learn Java in the university, and it was like such a scarring experience that I know that JavaScript and Java are not the same.
Emily Lewis: [Laughs]
Lea Alcantara: [Laughs]
Tracy Osborn: But my brain has this mental block. It was like, “Nope, I’m not going to do it. I am HTML/CSS only. I’ll do my back end stuff is Python and Django, and occasionally I’ll do like a little bit of jQuery and that is it.”
Lea Alcantara: [Agrees]
Tracy Osborn: And only this year I’ve started playing around with JavaScript framework and learning how these things work, so I’m like five years behind or more than all these other things going on right now.
Emily Lewis: Yeah, I don’t think there’s you know, and this is true for myself and I think it’s something that our listeners should embrace, but you’re never behind, you’re never ahead. This stuff is constantly changing.
Lea Alcantara: [Agrees]
Emily Lewis: I think all the time of I’ve only last year for the first time implemented flexbox in a production client project because that was a first time I had a client who didn’t need a ton of browser support that I couldn’t use that on without some ridiculous fallbacks, and I don’t feel bad about that.
Lea Alcantara: [Laughs]
Tracy Osborn: [Laughs]
Lea Alcantara: Yeah.
Emily Lewis: There is a legitimate business reason why that wasn’t implemented anywhere.
Tracy Osborn: Yeah. I’ve never done that at all, by the way. [Laughs]
Emily Lewis: Yeah. So I mean, but it’s not about feeling like you’re behind or whatever. There is no such thing as a full-stack developer. That’s just a label that people put on. So, any developers out there, don’t start sweating it. You’re not forward or behind. [Laughs]
Tracy Osborn: Right.
Emily Lewis: As long as you’re building things and people are using them, that’s it.
Lea Alcantara: Yeah, absolutely.
Tracy Osborn: As a maker, like working, and again, going back to programming, because programming can seem really scary to someone who’s jumping into say building web apps and using like Python and Django, when I ran workshops, I love to pull up my production code for WeddingLovely and show them what it looked, like a real, live web app, what it looks underneath. Because even to someone who has never, this is their first experience using Django, it is obvious. [Laughs] My code does not look pretty.
Emily Lewis: [Agrees]
Tracy Osborn: It looks like there’s like repeated sections. It’s super long. And you can tell, just by looking at it, that it is not perfect, but WeddingLovely is still running and it’s making money.
Emily Lewis: [Agrees]
Lea Alcantara: Yeah.
Tracy Osborn: And I have employees and they just, you know. The same thing can go for design. Your design doesn’t have to be perfect as long it is working.
Emily Lewis: Yeah.
Tracy Osborn: And that’s a same thing with your programming in front-end stuff.
Emily Lewis: Yeah.
Lea Alcantara: And here’s the lovely thing about the web is that it’s dynamic.
Tracy Osborn: [Laughs]
Lea Alcantara: So you can always go back to your code and refactor it.
Emily Lewis: [Agrees]
Lea Alcantara: You can always go back to your design and improve it.
Emily Lewis: Oh yeah.
Tracy Osborn: Yeah, definitely an improvement over print design, you know?
Lea Alcantara: Oh yeah.
Tracy Osborn: If you do a poster, you put it up and then later on you’re looking at it and you’re like, “Oh no!” [Laughs]
Emily Lewis: [Laughs]
Lea Alcantara: [Laughs]
Tracy Osborn: “Why did I do that?” And it’s already done. [Laughs]
Emily Lewis: Yeah. I think that’s another good web design fundamental to embrace. I mean, even Bright Umbrella’s site, we launched and then just last year made a ton of improvements to our typography.
Lea Alcantara: Oh yeah.
Emily Lewis: And it’s literally noticeable to people who visit our site.
Lea Alcantara: Yeah.
Emily Lewis: But what we launched with was fine. It’s just it can take time to tweak and there’s always a way to make it better.
Tracy Osborn: Yeah. And that’s also going to help the learning process because if you get comfortable enough with the design to launch your personal website and then you learn something new, you can implement that, and you learn something new and you can implement that, you and do that.
Emily Lewis: [Agrees]
Tracy Osborn: Like adding new things to your website as you learn, that’s a great way of learning design by applying these new things you learn and not feeling like you have to be a perfect designer to do anything. You could just start small and work your way up.
Emily Lewis: Yeah.
Lea Alcantara: And the thing about good design, too, is you need some space sometimes to make these decisions.
Emily Lewis: Distance.
Lea Alcantara: Yeah. So sometimes actually that incremental approach could be better because when you have space from the design and not having to stare at it all the time, when you re-review it and trying to apply something new you just learned, you notice other things that you have missed in the first place.
Emily Lewis: [Agrees]
Tracy Osborn: Yeah, design is never done. [Laughs]
Emily Lewis: [Laughs]
Lea Alcantara: [Laughs]
Emily Lewis: Just like development.
Lea Alcantara: Yeah.
Emily Lewis: I mean, like it’s React today, what is it going to be in five years when you get to learn something brand new, so that’s just what it is. [Laughs]
Lea Alcantara: Yeah, yeah.
Tracy Osborn: Right.
Emily Lewis: Before we wrap up, can you share some resources for anyone who wants to brush up their knowledge of design fundamentals?
Tracy Osborn: Yeah, like my stuff or like other things I recommend?
Emily Lewis: Yeah, of course, your books, but other resources. [Laughs]
Lea Alcantara: [Laughs]
Tracy Osborn: [Laughs]
Emily Lewis: Maybe some that you even mention in your books.
Tracy Osborn: Yeah. There are a lot of websites out there that just catalog what looks like good design, and it’s like Awwwards [it has three Ws] and a few other, but if you look at like at top CSS or top designs, there’s a bunch of websites out there that just kind of collect these design sites. So I’m not telling they’re perfect, but it’s a great way to kind of go through and see what the current trends are and see what people are doing and kind of start building up some ideas for your own design. One problem I find that I see a lot of people when they’re working on design is like they would wipe their desk clean and then they start from scratch and feeling like, “All right, how do I do this website design?” And then it’s like nothing comes out.
Emily Lewis: [Agrees]
Tracy Osborn: You’ve got to go out and look at inspiration, and I like those places as a way to just see a whole bunch of inspiration, a lot of things, websites, that other people have said, “This is good design.” Then I can use that to inspire my own designs, and that’s why I do personally for every design that I do. So I like those websites. I think they’re sort of kind of spammy. Awwwards is the one I like. I can’t remember what the other ones are, but I can tell you later from the show notes.
Lea Alcantara: So do you have any final advice for developers learning the fundamentals of web design?
Tracy Osborn: [Laughs] Just like programming, the best way to learn something is to start doing it.
Emily Lewis: [Agrees]
Tracy Osborn: Learn by doing. Even if you feel like a really terrible designer, just like make a little project for yourself and get it out there, put it on the web, have other people see it and then start improving it and you’re going to pick it up better than just constantly reading tutorials and looking at advice that other people are saying. You’ve got to like implement what you’re reading about to really cement it in your brain.
Lea Alcantara: Very cool. So that’s all the time we have for today, but before we finish up, we’ve got our rapid fire ten questions so our listeners can get to know you a bit better.
Tracy Osborn: Okay.
Lea Alcantara: Are you ready?
Tracy Osborn: Yes.
Timestamp: 00:50:00>
Lea Alcantara: All right, first question, what’s your go-to karaoke song?
Tracy Osborn: Oh, I hate karaoke. [Laughs]
Emily Lewis: [Laughs]
Lea Alcantara: [Laughs]
Tracy Osborn: Terrible to start out with. [Laughs]
Emily Lewis: [Laughs]
Lea Alcantara: [Laughs]
Tracy Osborn: I avoid karaoke like the plague. I’m sorry, other people can love it. It is not my thing. [Laughs]
Emily Lewis: [Laughs]
Lea Alcantara: Yeah.
Tracy Osborn: I guess Don’t Stop Believing is such a fun song, but everyone does that one, right?
Emily Lewis: What advice would you give your younger self?
Tracy Osborn: Ah, oh-oh, this is not very quick. Advice to give my younger self is, and it’s kind of a cliché, don’t worry what other people are thinking.
Emily Lewis: [Agrees]
Tracy Osborn: Because worrying about what other people are thinking or how they’re judging your designs, and that hinders people who are trying to learn things.
Lea Alcantara: Right.
Tracy Osborn: When you’re like, “I want to learn design,” and he puts things out there and you’re like, “What people are going to think?” And this is something that you just can’t like read that piece of advice and implement it, like this took me like 15 years to like really stop caring about…
Emily Lewis: [Agrees]
Lea Alcantara: Yeah.
Tracy Osborn: Even Twitter and putting things out there and like cutting down on social media just like opens you up for bad opinions, which them make you care more about what other people think. I think the way for me doing these products, just putting them out there and me being happy with it has made my life so much easier.
Emily Lewis: [Agrees]
Tracy Osborn: I don’t have to worry that I have to appeal to a wide audience. I just have to worry about appealing for myself.
Lea Alcantara: What’s your favorite PG-rated curse word?
Tracy Osborn: Ha! I’m watching The Good Place right now, so I’m all about shirt and fork. [Laughs]
Emily Lewis: Forking. [Laughs]
Lea Alcantara: [Laughs]
Tracy Osborn: I have been using it everywhere. I don’t know if like a lot of people know the show and they’re like, “Why is she saying forking?” [Laughs]
Emily Lewis: [Laughs]
Lea Alcantara: [Laughs]
Tracy Osborn: But I find it delightful and I’m going to continue using it.
Emily Lewis: Who is your favorite superhero?
Tracy Osborn: I just watched the new Wonder Woman movie and I loved it. I think they did such a good job with the Wonder Woman movie.
Emily Lewis: [Agrees]
Tracy Osborn: And I never even knew Wonder Woman before.
Emily Lewis: Oh, really?
Tracy Osborn: But that’s awesome.
Emily Lewis: Wow!
Tracy Osborn: I mean, like I knew. I’m sorry, I should rephrase that. I never liked or read the comic books or anything.
Lea Alcantara: Right, right.
Tracy Osborn: I didn’t know the classic Wonder Woman. I didn’t watch the Wonder Woman TV show. I do like superhero movies and I watched the Wonder Woman one, and I was like, “That is badass.”
Emily Lewis: [Agrees]
Tracy Osborn: I love this like badass female character. I think they did a really good job with that movie. So right now, Wonder Woman.
Lea Alcantara: What is your favorite time of the year?
Tracy Osborn: I will say summer, and particularly August, because then I can shut off my computer and I can go on a bunch of hikes. [Laughs]
Emily Lewis: [Laughs]
Tracy Osborn: Just go outside. It’s funny I work so much on the computer that I had to like take these like sabbaticals, and I’m going to do it this summer, like all of July and August, like those two months is actually going to be long backpacking trips.
Emily Lewis: Oh, nice.
Tracy Osborn: And I’m going to do the Wonderland Trail around Mt. Rainier in July.
Emily Lewis: Oh.
Tracy Osborn: I’m going to do the John Muir Trail in California, which is 21 days. It’s like 9 days and the 21 days of backpacking, and I’m so excited.
Emily Lewis: If you could change one thing about the web, what would it be?
Tracy Osborn: Social media. Oh my gosh.
Emily Lewis: Yeah.
Tracy Osborn: Back in the day, I went to like one of earliest, South By Southwest [SXSW], like the one where Twitter started.
Emily Lewis: Yeah.
Tracy Osborn: And it was such a hopeful, wonderful experience.
Lea Alcantara: [Agrees]
Tracy Osborn: And you’re just like wandering around Austin and you’re like talking to these people where you’ve like only seen their books and they’re on Twitter and you just like to say hi and they’re like hey and then you meet up at Austin. It was like all these like web designers, the only people on it were like web designers, and it was such a cool movement. But now, I wish Twitter would die.
Lea Alcantara: [Laughs]
Tracy Osborn: And I hate that because it’s actually crucial. It’s been like my career. I’m where I am right now because of Twitter and other social media networks, but it causes so much pain and the pressure now that I wish there is a way of not having to deal with like the negativity and people throwing their opinions everywhere, and really just the negativity. There are so many negative people out there and I miss when social media was more positive and sharing happy things.
Emily Lewis: [Agrees]
Lea Alcantara: What are three words that describe you?
Tracy Osborn: [Laughs] It’s not a word because I talk too fast. [Laughs]
Emily Lewis: [Laughs]
Lea Alcantara: [Laughs]
Tracy Osborn: I’ve been trying to tell you stuff. [Laughs]
Emily Lewis: [Laughs]
Lea Alcantara: [Laughs]
Tracy Osborn: Oh, that is three words, I guess, talks too fast. Something I’m constantly trying to talk myself like in my brain like, “Shhh, slow down.” So I guess hyper, we’ll say hyper, positive, like the negativity thing, like I try to be as positive as possible in all my interactions, and persistent.
Emily Lewis: What are three words that describe your work?
Tracy Osborn: I mean, it’s not a negative way. I will say basic. It’s like the MVP thing, like for my designs or my development, I just try to be as basic as possible, nothing fancy, just get it out there, get it done and then I can continue doing their products. I will say friendly. I started using really friendly as like sub-headline for most of the things I do for the books because I think that’s the most important thing, to just be really friendly and happy.
Emily Lewis: [Agrees]
Tracy Osborn: And I would say clean.
Emily Lewis: [Agrees]
Tracy Osborn: That clutter thing, that’s really one of my personal philosophies, is I try to reduce clutter as much as possible and I really prefer for everything I do is clean design.
Lea Alcantara: What’s your favorite meal of the day?
Tracy Osborn: Breakfast, absolutely, that was the fastest answer I had so far. [Laughs]
Emily Lewis: [Laughs]
Lea Alcantara: [Laughs]
Tracy Osborn: Which is funny because I’m on a diet right now, so I’m supposed to skip breakfast, but that just mean I moved breakfast to lunch. [Laughs]
Emily Lewis: [Laughs]
Lea Alcantara: [Laughs]
Tracy Osborn: I have my eggs and bacon at 1 p.m. [Laughs]
Emily Lewis: [Laughs]
Lea Alcantara: [Laughs]
Tracy Osborn: I love breakfast in all forms; eggs, bacon, pancakes. Like when I did the John Muir Trail way back in the day and I was coming down from Mt. Whitney, I was going, “I think I’m going to go down 7,000 feet in total.” Like it was a really downhill, and I was running because I realized that if I made it down to the trail inn before 10:30, I could get breakfast. [Laughs]
Emily Lewis: [Laughs]
Lea Alcantara: [Laughs]
Tracy Osborn: And I completely screwed up my knees and ankles by doing this, but I was determined to get that breakfast, and I do not want burgers, but I want eggs and bacon.
Emily Lewis: All right, Tracy, last question, coffee or tea?
Tracy Osborn: Both. I love coffee, and I have a cabinet dedicated to tea, like six different drawers with different teas in it.
Lea Alcantara: Nice.
Tracy Osborn: Any kind of hot drink and I’m also not particular about — I’ll usually drink crappy coffee, but like I don’t have to have like the fanciest teas in the world. I have a whole bunch of Trader Joe’s teas in my teacup that I have to like these basic coffee beans. So I’m not really picky in terms of quality. I just like one, all of it, in a sense. [Laughs]
Lea Alcantara: [Laughs]
Emily Lewis: [Laughs]
Lea Alcantara: Awesome. Well, that’s all the time we have for today. Thanks for joining the show.
Tracy Osborn: Yeah, thanks for having me.
Emily Lewis: In case our listeners want to follow up with you, where can they find you online?
Tracy Osborn: hellowebbooks.com is where I kind of keep everything for the book stuff, so that’s Twitter, at Instagram, and that’s dotcom for the website, so that’s where you can find me. For personal stuff, I try to separate those things, but sometimes it bleeds over, but for personal stuff, my username and everything is “lime” like the fruit, and “daring” like Daring Do, so limedaring, limedaring.com, twitter.com/limedaring and that’s where you can find me on the internet.
[Music starts]
Emily Lewis: Awesome. Thanks again, Tracy. This was a great conversation.
Tracy Osborn: Thank you. It was super, super fun.
Lea Alcantara: CTRL+CLICK is produced by Bright Umbrella, a web services agency invested in education and social good. Today’s podcast would not be possible without the support of these episode’s sponsors! Many thanks to Foster Made and Craft CMS!
Emily Lewis: We’d also like to thank our hosting partner: Arcustech.
Lea Alcantara: And thanks to our listeners for tuning in! If you want to know more about CTRL+CLICK, make sure you follow us on Twitter @ctrlclickcast or visit our website, ctrlclickcast.com. And if you liked this episode, please give us a review on Apple Podcast or Stitcher or both! Links are in our show notes and on our site.
Emily Lewis: Don’t forget to tune in to our next episode when Lea and I will dive into CMS upgrades and migrations. Be sure to check out ctrlclickcast.com/schedule for more upcoming topics.
Lea Alcantara: This is Lea Alcantara …
Emily Lewis: And Emily Lewis …
Lea Alcantara: Signing off for CTRL+CLICK CAST. See you next time!
Emily Lewis: Cheers!
[Music stops]
Timestamp: 00:57:34
