Description
You have an idea for an app. You manage to get the basic features working, but it doesn't look great. After all, you're a coder, not a designer, so what do you do? Laura Elizabeth spent years learning design, and, now, she's helping developers up their design game. She shares some helpful design tips, explains what it really takes to get better at design, and tells us why coders can make the best designers.
Show Notes
Transcript
[00:00:00] SY: Okay, so we are all sold out of earlybird tickets to Codeland. But regular tickets are now available. They start at 99 bucks, and they get you talks, a workshop, great food, great people, all in New York City on July 22nd. Go to codelandconf.com for more info. Link is in your show notes.
[00:00:30] (Music) Welcome to the CodeNewbie Podcast where we talk to people on their coding journey in hopes of helping you on yours. I’m your host, Saron, and today, we’re talking about learning design.
[00:00:42] (Music) If you’re a developer or you’re learning to code, you’ve probably figured out that you can’t completely avoid design, especially if you’re working on a side project or a new idea. At some point, you got to choose colors, fonts, do some basic layout. So how do you do that design stuff?
[00:00:59] LE: Yeah. I’m Laura Elizabeth from Design Academy and I help teach developers how to design.
[00:01:04] SY: She actually went to school for design but realized that it wasn’t enough. So she spent years learning on her own, and after a lot of trial and error, she finally felt comfortable calling herself a designer. She tells us all about her journey and how developers can start learning how to design, after this.
[00:01:23] As you know, I’m a podcaster, and I love talking to people and hearing their stories, and I love it so much I actually host another podcast called Command Line Heroes. It’s produced by Red Hat. And in that show, I get to talk to tons of people doing incredible work in open source. But besides awesome interviews, it’s also got sound effects, background music, you know, creative audio stuff. So if you’re looking for some more awesome tech podcasts to fill your feed, check out Command Line Heroes. Go to redhat.com/commandlineheroes. Link is in your show notes.
[00:01:59] If you’ve got a personal project, a small business, or a big business with lots of data, Linode offers you secure hosting for all your infrastructure needs. They are a Linux Cloud Hosting provider where you can get a new server up and running in under a minute. Plans start at one gigabytes of RAM for just five bucks a month. And with the promo code CodeNewbie2019, you can get a $20 credit. So go to linode.com/codenewbie and give it a try. Also, they’re hiring. Check out their jobs at linode.com/careers. Links are in your show notes.
[00:02:34] SY: If you’re listening to this, you’re already on your way to changing your life through code. At Flatiron School, you might end up with a job, a promotion or a better salary. But that’s just the start of changing your career, your life, and the world. On campus or online, you’ll join a community of learners that are empowered to change their future in the rapidly growing tech field. A bold change begins with a single step. To take yours, go to flatironschool.com/codenewbie. Link is in your show notes.
[00:03:08] DigitalOcean provides the easiest cloud platform to deploy, manage, and scale applications of any size. They remove infrastructure friction and provide predictability so you can spend more time building what you love. Try DigitalOcean for free by going to DO.co/codenewbie and get $100 in infrastructure credit. Link is in your show notes.
[00:03:32] SY: Okay. So one question is why do developers need to learn design? Like they’re developers, right? They have their own skills. They code stuff. They build stuff. Why is learning design even a thing they might want to do?
[00:04:10] LE: Yeah. Well, I don’t think they need to learn it, but a lot of them want to learn it because it’s really helpful for what they do. So I’ve worked with a lot of developers who have so many ideas for side projects. And whether they’re working in an in-house company or they’re a freelancer, they always have a lot of really cool ideas for little tools that they want to build, maybe some open source projects they want to work on, stuff that there isn’t really the budget there to hire a designer. And the one drawback that they feel is that the design is what holds them back, the design is what makes them think that their product isn’t any good and it’s just that pain point that they want to learn enough design to be able to make something look decent as opposed to just putting something out there that they’re kind of embarrassed to show around.
[00:04:31] SY: Yeah. Yeah. I think that’s so accurate. You know, when I think about if I have a new idea or a side project and I want to test it out, I want to, you know, see what people think, I feel like if I’m already a designer, I have a ton of mockup tools, prototype tools, things that don’t require me to do any code right at the beginning where I can kind of put something together, I can get what’s in my head, put it in real life and show it and get some feedback. But if I don’t have any sense of design, if I have just no ideas, you know, how to even pick fonts or colors or just even put things in the right places, it’s hard to even get started enough to, you know, really develop it without some sense of design skills. So it sounds like that’s kind of what you’re talking about.
[00:05:14] LE: Yeah. And even when you use things like frameworks and stuff, you can be putting something together and it still doesn’t look right and you’re thinking, “Well, I used a framework, this should look right, and I don’t know why it doesn’t and I don’t know how to fix it.” So yeah, it can happen all over.
[00:05:27] SY: Yeah. And I also feel like design is becoming more and more important. You know, I remember back for about 10, 15, 20 years ago when this whole tech sort of thing was, well, maybe not new but, you know, it had its first round, its first wave. The fact that these tools exist was already just so interesting and exciting that design maybe wasn’t the most important thing, you know, 25 years ago. But nowadays, it seems like everyone is making an app and everyone… you have to find a way to have your thing stand out. So just making it functional I feel like isn’t as important as it used to be. I feel like it has to be functional and really pretty.
[00:06:06] LE: Yeah. I think people really expect that now.
[00:06:07] SY: Yeah.
[00:06:08] LE: My first product actually was a WordPress Plugin called Client Portal, and I released that and I had a really badly designed website. Part of the reason it was bad is because the type kit broke and I didn’t realize all my fonts were often… everything… but it just looked really, really bad.
[00:06:23] SY: Yeah.
[00:06:24] LE: So I finally got around to redesigning it and I noticed my sales increased. And I actually even had one person email in saying, “I wasn’t going to buy your WordPress Plugin because your website was really bad and it made me think that you weren’t bothered about, you know, updating it or what the plugin itself wasn’t going to be high quality. But as soon as you redesigned your website, I realized that this is something that you actually care about and take pride in and I had more trust and confidence in order to buy it.” And that was a really interesting revelation.
[00:06:53] SY: Wow.
[00:06:54] LE: Yeah.
[00:06:56] SY: Oh, that’s so interesting. Yeah, and I also assume, you know, it depends on the thing that you’re selling. So if you’re selling something that does require upkeep and some level of good aesthetic, then you selling something that looks good probably says something about how you’re going to approach your product. Wow, that’s so interesting.
[00:07:14] LE: Yeah. I actually have another experience that was similar with my checkout flow that I designed. It wasn’t quite as extreme as that one, but they went through the checkout flow and they got to the Thank You page. And I designed like a custom Thank You page. I’d put graphics in there and made it really interesting. And she messaged me saying, “When I hit buy, I got a little bit of dread because I thought, ‘Oh gosh, I’ve just bought another online course. You know, should I have really spend the money?’ And then when I saw your Thank You page, it just made me really happy and it gave me so much confidence that I’d made the right decision and all this kind of stuff.” I’ve definitely had a couple of experiences where the design has actually played a surprisingly big part in how customers feel about products. So yeah.
[00:07:52] SY: Yeah. Okay. So why is learning design so hard? At least to me, it feels really hard and I feel like when I think about my personal journey with design, it’s taken a lot of just trial and error in doing things and being like, “That doesn’t look the way I hoped that it would turn out.” I don’t know why. It’s so hard. Why do you think that is?
[00:08:13] LE: I think it’s hard for everyone. I think a big problem is that designers will typically train for many years before they can create something that looks really good. And when you then ask a designer who can make something look good how they did it, they’re just going to go, “I just did it. I don’t know.” It’s not really the case because that designer has probably been struggling for years beforehand coming up with little teeny insignificant breakthroughs that over time add up to make it so that they can design something really nice. But when you actually look back and try to figure out how you learned to design, you don’t really know. And that’s been the interesting thing about when I was thinking about creating a course, I had to think, “Okay. So how did I actually learn to design?” Because it wasn’t through college, it wasn’t through any books, it wasn’t through anything, I learned and it took about, I think, I’ve been playing the course for three years and it took that long for me to really figure out how people actually learn it. And it really is that kind of small insignificant breakthroughs. And I think what happens a lot of the time is, especially with developers, they’ll try something, it won’t look very good, and they’ll think, “I just can’t do it. I don’t know why this doesn’t look good. I can’t do it. Forget it. I’m a developer, not a designer. It’s left brain, right brain.” But it’s really not that simple. It’s absolutely anyone can do it. And a lot of the times developers really do make the best designers.
[00:09:35] SY: Oh, interesting. How so?
[00:09:37] LE: For me, I think it’s because they care a lot about, you know, the functionality of the project. They care about things like accessibility, how it works. They care an awful lot about user experience. Every developer I’ve spoken to, that’s been really high on the list. So when a developer actually ends up being a designer, they don’t do all the kind of fluffy design stuff that actually makes the experience worse. So they really care about their product and how it’s going to work. And if you get a designer, for example, you know, not all the case, I don’t want to generalize, but if you get a designer who doesn’t know too much about development, they can put in all these like design things that make the experience worse, and yes, it looks great but it’s just not functional. It doesn’t work logically. And that’s why I really like when developers do learn design because they often come out with the best balance between a fantastic product and user experience and a fantastic design because I think it’s always going to be a compromise in, you know, whatever you do.
[00:10:39] SY: Yeah. Oh, that’s such a great way of explaining it, because yeah, I’ve definitely seen… you know, I love like going on Dribbble and just looking at what, you know, designers and what graphic people like to put together, especially for mockups and apps. And a lot of times, I think like, “Wow, this is so beautiful. But that doesn’t make any sense,” you know? Like, “I shouldn’t have to jump through three different steps and like, why there are so many gradients?’” You know, there are just things that just don’t feel useful and I can see as a developer, someone who’s a developer first, I can see how a lot of the really cool looking things just kind of end up getting in the way.
[00:11:12] LE: Yeah, exactly. And I think designers and developers who work together make fantastic teams as long as the designer knows a bit about a developer’s process and what they do. And a developer knows a bit about the designer’s process and what they do, and they have a kind of mutual respect for those different fields because it really is a compromise. And the designer should care about, you know, things looking really good, and the developer should care about things working really well and what’s the best for the product. But if they kind of get that push-pull and they come to the best compromise, then I think that’s where the best products end up coming. And basically, why I think it is really beneficial for a developer to at least have some kind of knowledge in design and then vice versa as well.
[00:11:58] SY: So what’s interesting is that you actually went to a design school?
[00:12:01] LE: Yes, I did.
[00:12:02] SY: How helpful was that in your design journey?
[00:12:06] LE: Well, it was helpful in the sense of I really learned how to problem solve. So the design school that I went to, I went to college and then university, which is I think that’s high school and college in America. So I studied it for five years. And what they really taught you is how to solve problems with design. A lot of it was to do with things like advertising or something like that. There wasn’t really any focus part on the visuals which in a way was a really good thing because, you know, it taught me that I’m not just making art, I’m making design and that’s basically solving a problem. So I’m really grateful for that. However, what I really felt was missing was just some direction in terms of how to make the problems that I’m solving actually look any good because it wasn’t taught outside of tracing Helvetica with tracing paper which didn’t really teach me, you know, I mean, it was interesting, but it didn’t really teach me how to make that Helvetica look good on a poster or something that I had to do. And I was so frustrated because I feel like if I just had a little bit of training in terms of, “This is a process that you can take to make something look good and all we’re going to do is make something look good, then we’re going to focus on the problem because that’s the really important thing.” I would have been able to kind of push that fear of me not being able to make anything look good to the back of my mind and actually focus more on the problem because I wasn’t feeling so insecure about what this is going to look like and everyone is going to laugh at me because I’m calling myself a designer and everything I do looks rubbish.
[00:13:38] SY: I completely understand that feeling. Yeah, and that’s been… you know, I did not go to design school, but I feel like years ago when I was first trying to teach myself design and I was reading a bunch of books, and I think I looked at a couple of courses online, it felt either too fundamental like, you know, let’s learn about color theory in a very abstract way or let’s learn about balance and I’m kind of like, “Okay, but how does that get me to know where to put the button I need to put on the page?” Or the opposite, which is only use round buttons. And I’m like, “But why? I want to understand.” So I feel like it’s either so practical and applicable that I can’t abstract the key information, the key points to make my own decisions or it’s so abstract and so kind of high level that I have no idea how to translate it to the project I’m working on. So when you think about the ideal design course, the design program specifically for developers who usually need to apply it pretty quickly on the job, how do you balance understanding the fundamentals with making sure it’s actually applicable?
[00:14:43] LE: Yeah. So what I basically do is I teach a content first kind of style. So the idea is I want people to get to a stage where they have something that could be a fully functioning website ridiculously quickly and ridiculously easily, because a lot of the time, people just stare at, you know, a blank screen and they’re like, “Oh gosh, I’ve got to make something look good here.” So I go through things like, you know, writing the content first, and actually styling the content in a Google Doc, which sounds completely bizarre, but it’s actually been a huge eureka moment for a lot of people because if you use these simple things like subheadings in Google Docs and bullet points or numbers or quote styles, you know, everything that Google Docs has, you’re actually making a lot of design decisions right there in a Google Doc. And then translating that into a design ends up being a lot easier because you have some content patterns that you can look for. So, you know, we go from, you know, writing and starting the content to then looking at other websites and other inspiration and trying to find those content patterns on different websites. We then would basically screenshot them and build up a unique layout from start to finish, fill in the content over that layout, and then we kind of get into the fundamentals of, “Okay, so what do we do about color? How do we choose a base color? How do we choose an accent color? What do you do if your colors… they just don’t look right, how do you fix that? What do you do about typography? How do you choose and pair it?” And we kind of go through it in step by step.
[00:16:16] I think the most important thing is to have something that you can work with that’s a full page as quickly as possible because at that point, you can just go back and tweak. And I have this sort of theory on really the best way to make something look good, and I call it debugging design. So it’s basically saying that once you have something that you can work with, you just go back and keep looking for the issues and then fixing them one by one, really small tiny, almost insignificant issues and you just keep fixing them, just as if you were, you know, writing some software or something and you had a ton of bugs that you had to find where the bug is and then you have to fix it. So it’s the same with design. You look at whatever you’re designing and you kind of say, “There’s something not right about that color.” And then you debug it. You just do exactly the same process that you’re doing anyway in your normal web development world and then you apply that to design and that’s really all there is to it. It’s just I find a lot of developers and just non-designers in general just give up a little bit too quickly because they think that it’s just something that you either have or you don’t and it’s absolutely not the case.
[00:17:26] SY: I love that. I love that process of debugging design because I’m just reflecting back on how I eventually learned how to design and got a lot better at it and I think that’s basically what I’ve done. You know, I’ll look at something. I’ll just kind of stare at it angrily for a while and go like, “Why don’t you look good?” And I’m able to scope that a little bit more and say, “You know, like there’s something about this header that’s just not right. I don’t know what it is, but it’s just not right.” And then I kind of end up removing certain variables, so maybe I’ll bring it back to just black and white and then I’ll say like, “Is it the color? Is that the thing? Is it the font? Is it the spacing?” And then eventually, I’ve, over time, kind of built up my own rules and my own, you know, kind of lessons. And now when I work with other people, I’m, you know, much quicker, I can say things like, “You know, it’s because like the spacing is off, and if you just, you know, have more spacing here, then, you know, everything will be great.” And I’m like, “Oh, wow, I didn’t realize I knew that.” But that feels like the kind of thing that is… I almost want to say like only possible with trial and error, like how do you teach that to someone?
[00:18:30] LE: So with design, there’s really not an awful lot of mistakes that happen. So you know, if something looks off, nine times out of ten for me, in my experience, it’s the spacing. So you teach them how to recognize that it’s the spacing that’s off and how to correct that. And for example with colors, there’s maybe… I mean, I don’t know exactly how many but maybe five or six reasons why colors might look off. Maybe it’s being used in too big an area, you know, the color is too bright for the amount of area that it’s being used in so you can either tone down the color or you can put it in, you know, smaller spaces or something like that. So it’s kind of having this sort of reference that you can go back to. You know, if you say, “Okay, something is wrong with my header or something is wrong with the colors,” you can then go back and reference what the most common mistakes are and try out a few solutions and see what works for you, but you’re completely right. It really is trial and error. The first time you try and design something, it’s probably going to take you a really long time even if you have the best course in the world or, you know, you go to design school for five years like I did, it’s still probably going to take you a really long time. It’s going to be frustrating. But every time you do it, it’s going to take you less and less and less time until you actually get to the stage where, you know, you can make something look pretty decent first time, and people will come up to you and be like, “How did you do that?” Like “How did you just know that the spacing was off?” And you just kind of say, “Oh, I just knew, you know?” But you didn’t. You learned that. At some point, you learned that. You might not have been fully aware that you learned that, but you didn’t just know. Yeah, you learned it.
[00:20:07] SY: Coming up next, Laura tells us what it means to think like a designer and share some common design things that developers get wrong, after this.
[00:20:18] We’ve talked about open source a bunch of times on this podcast, but frankly, open source is so big and complex and fascinating that it needs its own show, and it has one. It’s called Command Line Heroes. It’s produced by Red Hat and it’s hosted by me. That’s right. I’ve got another tech podcast talking to incredible people about all things open source. We talk about the history of open source, the introduction of DevOps and then DevSecOps, and we even do an interview with the CTO of NASA. And that’s just the beginning. We also dig into cloud and serverless and big data and all those important tech terms you’ve heard of, and we get to explore. If you’re looking for more tech stories to listen to, check it out at redhat.com/commandlineheroes. Link is in your show notes.
[00:21:09] DigitalOcean is the easiest way to deploy, manage, and scale your application. Everything about it was built with simplicity at the forefront: setting, deploying, even billing. Their support is amazing. They’ve got hundreds of detailed documents and tutorials. So if it’s your first time deploying an app, they’ve got great tools and community to make it nice and easy. Try DigitalOcean for free by going to DO.co/codenewbie and get $100 in infrastructure credit. Link is in your show notes.
[00:21:40] Ready to change your life? Well, Flatiron School designed a school just for you. Flatiron is a global school with immersive and online courses designed for passionate people like you. If you’re looking to excel in a new, rewarding career, you can start right now. Check out Flatiron School’s free 75-hour boot camp prep, where you can learn JavaScript, Ruby, and do some interview prep. Flatiron School has helped thousands of students from all backgrounds invest in themselves by learning online or in person. By the way, did you know that they’re now part of WeWork, which means they now offer classes at a growing number of WeWork locations around the world. So go to flatironschool.com/codenewbie to find out more.
[00:22:30] Linode is giving you a chance to try their powerful servers built for all your infrastructure needs. They’ve got nine data centers worldwide with new data centers opening this year in India and Canada. Getting started with a shiny new server takes less than one minute so you can get up and running in no time. And you can get a $20 credit by using the promo code CodeNewbie2019. Just go to Linode.com/codenewbie for more info. Link is in your show notes.
[00:23:03] So tell me about some of the common design things that developers tend to get wrong.
[00:23:08] LE: So the number one thing is the spacing for me. Everything needs more breathing room than you might think, and everything needs more breathing room than feels comfortable. So I always say, “You know, when you’re looking at a design, if it just looks a bit, you know, all over the place, a bit cluttered, give everything more room than feels comfortable. You can always rein it back. You don’t want to be in that situation where you’re making people scroll endlessly because that’s not a fantastic experience.” But you’ll be surprised, you know, how much space you need to give certain things in order for them to look good and in order for them to actually be readable. So if someone, you know, goes onto your website or something and they’re trying to read the content, if they’ve got too much crammed in that first screen, they’re not going to know what to look at. So, you know, it’s a case of kind of prioritizing different things, making sure it’s spaced correctly so people are reading the correct thing first and, you know, going down the page and stuff like that. I always go on about spacing. I get laughed at, you know, if I do client work or anything because it’s just the number one thing I go on about and really small things like alignment. So just make sure things are lined up. It’s a really simple thing to do. Just make it look…
[00:24:15] SY: It makes such a difference.
[00:24:17] LE: It really does. Just make it look neat. Make sure there’s like line going, you know, down the left hand side of the page if you’re left or right language or something. You know, you’re not using too much center text because a lot of developers actually use an awful lot of center text on their website. And anything over two very short lines, maybe three maximum is too much. It’s really hard to read and it just looks really messy. So if it’s more than two or three lines, left align it. So it’s little things like that that I think are the biggest mistakes, and possibly trying to make it too designed too quickly. If you can focus on those little details and make something really simple but really nice, it’s still hard to do but it’s a bit easier than trying to, you know, go all out and create websites that look like stripe or something or some really cool websites that are out at the minute. The most simple website that looks good probably has a lot of design work behind it in terms of typography and stuff like that and just care in things that’s going to do it. So yeah.
[00:25:17] SY: And what I love about the principles you mentioned, kind of the things that we can all maybe do a little bit better is they feel very developer-y. You know, this idea of like, “Let’s focus on one thing at a time, just one story at a time,” right? Like, “Let’s zoom in on just color. Let’s just think about color. Okay, now we’ve done that. Okay, now let’s think about fonts.” You know, instead of saying like, “I’m going to make this pretty and throw all of the design ideas on the page at one time,” because if you do that, then you’re not really sure where the problem is coming from. You just kind of see that it looks bad and it feels messy.
[00:25:50] LE: Yeah.
[00:25:51] SY: So yeah, like that whole debugging design I think is really brilliant. And the other thing I was thinking about is this idea of connecting the feeling with the problem, I guess. So when you said, you know, “This feels messy.” Where is that messy feeling coming from? Well, it could be the center text, it could be that there’s not enough breathing room, and if you can kind of give people a list of possibilities or a list of possible design smells that tie back to the feeling of messiness, then, you know, the next time you look at it and you go, “Oh, this feels messy,” you can go through that list and say, “Okay, which one is the culprit?” and then kind of have a starting point at least.
[00:26:29] LE: Yeah, exactly. And also, just keep looking for inspiration everywhere, you know, online. You know, if you’re doing a website design, always be looking for other website designs that look good. And I think more realistically in the way that I work, if I have a problem that I don’t know how to solve, I have a few places that I go for inspiration like land-book.com. Or I think there’s one called Lapa.Ninja, which is really good. This is mainly for marketing websites. For apps obviously, it’s better to use whatever apps that you can log into right now and say, “Okay. So what is it about this color? Why do I like this color and why don’t I like the colors on my website?” Or, you know, “Why does this website look clean and why does mine not look clean?” And then, you know, if you’ve got a big enough screen, just put them next to each other and just try to look at both and, you know, you’ll notice a lot of the time. I told any non-designers really a lot about spacing and I kind of say, “You know, you need more spacing or you need to align things.” And they kind of go, “Ah, I guess. How much of a difference can it really make? I mean, come on, that sounds so small.” And then if you actually show them, you know, “Well, here’s a website that has, you know, spacing a little bit more, has aligned things a little bit, and use left aligned text instead of center text. See the difference?” And they go, “Oh, yeah. Actually, that looks, flows better.”
[00:27:50] So often just, you know, always having and trying to save inspiration is a really good idea. So, you know, if you come across a website you like, don’t assume that you’ll be able to find it again in a few weeks or months when you, you know, think, “I saw something that was really nice and I can’t remember the link,” and you’re trying to search through your history. Try and have something. I use Dropmark.com, which is a free bookmarking place to save websites or just use your bookmarks or just somewhere to kind of save this quickly on the go. It will be honestly the biggest help.
[00:28:23] SY: So you mentioned, I was reading up about you and the course that you teach and your background, and one theme that I saw a few times is this idea of thinking like a designer. Tell me a little bit more about that. What does that mean?
[00:28:36] LE: Yeah. So I mean, when I talk about thinking like a designer, it’s mainly about getting over that mental hurdle of feeling like you can’t design. So when I kind of say that, that’s what I mean. So it’s the things we’ve been talking about already like the debugging design thing. You know, that’s really how designers think, whether they would necessarily know it or admit it themselves. That’s pretty much what they do. So it’s kind of along the lines of that. The other thing I would say is, you know, there’s another route you can kind of take with it, which is, you know, a design is there to solve a problem rather than just to make something look good. So I teach a lot about design for conversion and stuff like that or design for user experience and things like that. And I personally think that’s what makes design interesting because I’ve always been a little bit creative, I suppose, but I was never good at it, but I always enjoyed it. And having these like problems to solve give it a bit more of a point. So when you’re designing something, it’s kind of one of those lessons that people told me for a really long time, but I didn’t take note until fairly recently, like the last few years. But when you’re designing a website, each page has a particular goal. Maybe it’s to get people to sign up to a newsletter or maybe it’s an ecommerce thing it’s get someone to buy or to upsell or something like that. And, you know, stuff like that is really important to say, “You know, how can we design this so it’s going to meet whatever goals that we’re trying to set?” And if you kind of start with that, you know, you can do the visual stuff after. But it’s kind of interesting that I say because that is what my college education was trying to teach me. You know, “Solve the problem first. Make it pretty later.” But it is true, you do really need to solve the problem first. The only downside is they didn’t teach me how to then make it pretty later, which was what I’m trying to help people do.
[00:30:27] SY: That’s so interesting. Yeah. I love this. You know, if we reframe our idea of design, you know, from, “I want to make this look good or look pretty” to “I want to solve this problem through design tools,” then that sounds like a more helpful way of looking at it. And also for a developer, it feels like a more doable way. You know, it’s not just like, “Oh, like what is pretty,” It’s, “Okay, what’s the problem and how can using color help solve that problem? How can using a particular font face help solve that problem?” So it kind of creates this instant bridge between the way I’m used to doing things and the new design toolset that I’m using.
[00:31:08] LE: Yeah, exactly. And it makes it easier. So that’s why I say, you know, do content first because that’s going to make your life a lot easier. If you have, you know, a homepage or something and you’re stuck thinking, “Okay. I need you to design this. I mean, what could I put on it? I guess, you know, this website has this. I guess I could put that on it.” And you’re designing it with the visuals in mind. But the really good thing about starting with a Google Doc is that you’re designing with the problem in mind and, you know, that’s actually really going to help you. It might not sound like it, but it’s really going to help you when you come to design because, you know, as we were talking about earlier, you’re then defining patterns that you’re going to be using. You know, maybe you want to show people brands that you’ve worked with before. You know, the problem there is that you want people to know that you’re a credible business and you’ve worked with some big name companies. Okay. So how do I do that? Do I do something where I have different case studies or do I do like different logo walls or do I have a testimonial? And you kind of decide that in the Google Doc, which way is going to be the best way to solve that problem of people, you know, knowing that you’re a legitimate company who’s worked with other legitimate companies, you decide that there and then and then you can go and look for the pattern of that. So you can say, “Okay. For me, I think the case study thing is going to be the best way to go.” So then you can go look for other websites that have got case studies on their website and kind of look at how to design that afterwards, but because you’ve started with the content, you’re solving a lot of design decisions really before you even get into whatever tool you’re using to design.
[00:32:42] SY: Very nice. So what advice do you have for CodeNewbie listeners, for new developers, or maybe even the seasoned developers who are trying to get into design for the first time?
[00:32:53] LE: So my biggest advice would be to start collecting as much design inspiration as you can. Always be on the lookout whether it’s websites or apps. You know, create some kind of toolkit that you could use to find these design patterns that you might need to use because that’s going to come in, you know, the most handy. And then just try to build something first. So get something on the page, whether it’s a website or an app or something, get the content done, and then use the inspiration that you found alongside the content patterns that you’re going to be using and just slowly try to build up from there and don’t try and do it all in one day. Keep coming back to it and, you know, debugging it.
[00:33:33] SY: Very nice. So now let’s move on to some fill in the banks. Are you ready?
[00:33:37] LE: Yes.
[00:33:37] SY: Number one, the worst advice I’ve ever received is?
[00:33:40] LE: So I think the worst advice that I ever received was back when I was freelancing, I got told to outsource my freelance work to help build my business. This is kind of an unrelated topic, but it was the only thing I could think of because it basically really didn’t work. So the idea was that I was going to be there at the forefront, you know, making the sales for my freelance stuff and then I was going to use other designers or other developers or other content writers to kind of do the work. And it failed so massively because it was impossible to manage expectations, it was impossible to get accurate quotes and it was the worst thing I ever did. So I did not do that for long.
[00:34:20] SY: Yeah. Okay. Number two, my first coding project was about?
[00:34:25] LE: So I did a calculator and I also made an anime fan website in Dreamweaver.
[00:34:30] SY: Very nice. Did anyone get to see this awesome anime fan website?
[00:34:32] LE: No. It’s when I was studying.
[00:34:37] SY: Okay. Number three, one thing I wish I knew when I first started to code is?
[00:34:44] LE: I wish I worked on real projects a bit earlier instead of lots of kind of the fake projects or, you know, following tutorials or something like that. I really wish I had worked on something real that was going to be used, maybe a side project or maybe even just jumping into client work because I would have learned so much faster if I did that.
[00:35:04] SY: So when you say real project, do you mean something that someone was paying you to do or do you mean that just other people could see it? Like, how do you define a real project?
[00:35:14] LE: Either. So either something that someone was paying me to do. So I mean, a client project. That would have been really maybe a little bit too stressful if I knew someone was paying me for it. But other than that, yeah, a side project that I wanted to create, maybe something for me but something that I intended on getting out there. So maybe something open source or just something like that to really get the fire going and learning it.
[00:35:38] SY: Yeah. Okay. Well, that is the end of the episode for today. Thank you so much, Laura, for spending time with us and telling us all about how we can, hopefully, one day become designers, at least get more comfortable with design. Do you want to say goodbye?
[00:35:51] LE: Absolutely. Yeah. Thanks for having so much. It was great.
[00:35:53] SY: And that’s the end of the episode. Let me know what you think. Tweet me at CodeNewbies or send me an email, hello@codenewbie.org. For more info on the podcast, check out www.codenewbie.org/podcast and join us for our weekly Twitter chats. We’ve got our Wednesday chats at 9 P.M. Eastern Time and our weekly coding check-in every Sunday at 2 P.M. Eastern Time. Thanks for listening. See you next week.
Thank you to these sponsors for supporting the show!