Episode 545 | The Value of Learning 80/20 Design Fundamentals

Rob: Welcome back to Startups for the Rest of Us. This week on the show, I had a conversation with Tracy Osborn about the value of learning 80/20 design fundamentals. We talked a little bit about her book that comes out in a couple of weeks called Hello Web Design. We dig into a few topics that I think are pretty interesting. One is Tracy’s self-published Hello Web Design, and then is now publishing it through a publisher. We talked through her thought process there. We talked about why these 80/20 design skills or design fundamentals are useful to entrepreneurs, or bootstrappers, or developers.
I weigh in quite a bit on that one because that was something 10-12 years ago as I learned just enough design fundamentals. I’m not a designer, but I learned just enough to help me in my work as an entrepreneur. Then we dig into some basic fundamentals, give an overview of a few things in the book. Let’s dive into our conversation. If you’ve been a longtime listener to the show, you’ll recognize today’s guest. This is Tracy Osborn. She’s been on several episodes of Startups for the Rest of Us. You can find out more about her at tracyosborn.com.
Today, we’re going to be talking about her new book. Actually, it’s a revised version of an older book called Hello Web Design. She self-published it originally a few years back and now, she is publishing it through No Starch Press. This is a publisher who is cranking out those hardbacks? I think I saw a photo of a pallet.
Tracy: Yes, they upgraded it from paperback to hardback which was a nice little compliment on their team’s end because they were like, we’re going to go ahead and increase the quality. There’s what we call the little binding that’s on the hardback so it can be a contrasting color. They added all sorts of little details to it which was really awesome.
Rob: That’s sweet. A lot of us, I’ve self-published a couple of books and they’re all paperbacks because hardbacks are just too cumbersome. You have to buy them in bulk. They are more expensive, blah, blah, blah. Is that legit?
Tracy: Yeah.
Rob: That kicks off the first question. There are folks in the audience, a lot of makers who are doing things other than software. A lot of folks are going to publish books. We saw Keith Perhac published in TinySeed batch 2. He published a book about marketing funnels. I think a lot of folks are doing it even when they’re SaaS founders, as not only marketing. They have that expertise and they show it. You self-published this, and now you’re going through a publisher. There are obviously a lot of pros and cons to both approaches, but talk us through that decision process.
Tracy: Yeah. I started self-publishing books, not with Hello Web Design. It was with my first book that’s called Hello Web App. It was a book to teach beginner web app development. Like a lot of other startup founders, I was a founder. I started a company called WeddingLovely. I learned a lot about the process. I taught myself how to code with my startup. When I taught myself how to code, I looked back at the experiences I had to learn to code before launching WeddingLovely. I went to school for computer science. I end up switching over to art and there’s always the horrible experiences I had.
I looked at self-publishing a book as a way for me to have a fun side project because I was burnt out in my startup, but also to teach programming the way that I thought it should be taught after I taught myself. I went to self-publishing because I read all those things about people who work with publishers. Actually, No Starch had given me, for Hello Web App, I reached out way back in the day and asked them, would you be interested in publishing this book? They said, yes. I ended up saying like, actually never mind, I’m going to self-publish this instead, because the lure of self-publishing is you get to keep 100% of your profits.
It just takes a lot more work because you don’t have someone who’s printing for you. You don’t have someone who’s helping marketing for you. I was at a point in my life of working on a startup and needing something else to occupy me. I did a whole Kickstarter, my background is in design. I did all the design myself. It was a really fun process. I self-published Hello Web App and Hello Web App is aimed at designers.
When I was looking for something else to do, Hello Web Design came about because I have this background in design. I realized I can do the same thing for the other side of the coin. I could write a book teaching design to developers, marketers, and startup founders. The same process as before, this is quite a few years back. I wrote the book. I got people to help me edit it. I put it there on Kickstarter. Kickstarter by Hello Web Design was way successful. I think I got $22,000 which was awesome and helped me do the whole printing process.
Maintaining the book over the next year was easy enough, but then I started working at TinySeed. Continuing the marketing and continuing the promotion for the self-published book became harder and harder because my time was wrapped up in TinySeed. I looked at Hello Web Design as being more of an Evergreen book as compared to Hello Web App which was a programming book. Django and Python, those things are changing so fast that a publisher wouldn’t want to upkeep that.
With an Evergreen book, I thought that there was a good opportunity that a publisher would want to see the success of what it had done so far through Kickstarter and through the sales I have done, and want to bring it into their inventory. That’s basically what happened with No Starch. I went back to No Starch. The reason I reached out to them before, was the reason I went back to them is that most authors I talked to had a really good experience with No Starch as compared to some other publishers. I said, hey, I already have this book. It’s written. It’s designed. I actually thought I was just going to sell the content to them but because I designed it, they decided to just keep everything. We did a whole round of updates to bring it into their style. But the book essentially looks exactly like what I had designed myself which was really nice seeing their confidence in the book and confidence in what I’ve done.
That’s essentially the long story short of going from self-publishing a book to publishing a book. What I learned is that, I think a lot of self-publishers out there whose content is Evergreen, but they’ve gotten to a point where they don’t have enough time to support the book, or maybe to do more marketing. Maybe they’re seeing the sales drop off. Selling the book’s content to a publisher could be the next step for them.
Rob: Right. When you do that, you get an advance, and then the publisher keeps the majority of the revenue. You basically get 10% or something. I’m making up numbers. I don’t know your contract. It’s sliding. It’s like audio, you can get more and if it sells more, there’s usually tears and all that stuff. There’s a contract, and then they essentially own the copyright at that point.
Tracy: Exactly. No Starch is upfront with the advance and the percentage that you get. I can’t remember what the exact numbers are right now but essentially, I got a few thousand dollars. I think I’m keeping 10% to 12%. It’s not that much. But again, I was just done with the book at that point. I didn’t want to go through another Kickstarter campaign or another press push especially again, I’m working at TinySeed. I’m very busy at TinySeed. I don’t want to do all that.
It was nice to have this company and be like, okay, cool. We’re going to help run the marketing. It does give me an opportunity to say, I am now a published author because before I felt that was silly. I was saying, I self-published, a lot. Now I’m like, I am actually a published author. It allows me to say, hey, this book is coming out again. I can use this to pitch conferences. I can use this to pitch to other press.
I can use it to start doing conference speaking, as COVID, hopefully, it’s going to get better and conferences start up again. I would like to do some conference speaking again and that’s why I used the book before. I did quite a few design panels and talks beforehand. It was an opportunity to bring it back into the spotlight without having to do a lot of work for it.
Rob: Right. It’s an interesting way to think about it—self-published at first, such that you get the lion’s share of the profit when you’re marketing to your own audience. That’s the low-hanging fruit as if you have your email list or Twitter following, your Insta following, or whatever. You do capture that revenue and then, as a subsequent step, you’ve gone and done this. I’ve been talking to Sherry because she just signed a book deal. It’s a book about grief. She also had a similar thought process.
She did not self-publish that first although, in her first book, The Entrepreneur’s Guide to Keeping Your […] Together, we did self-publish. Her thought process there was, a book about grief is definitely more of a horizontal book. It’s just widespread. The audience is much larger. Frankly, even across her and my followings, it’s not going to have the same amount of traction as The Entrepreneurs Guide. Going through a publisher gives her reach because the publisher already has this audience.
These audiences are the people who expect. Like No Starch already has designers and developers looking. It’s a more technical publisher and similar to Sherry, her publisher Sounds True. They publish a lot of psychology, mental health, and spirituality, and that kind of stuff. This is an intersection of a lot of that. I always struggled. I’ve only self-published books. I haven’t gone through a publisher. In fact, I did talk to several publishers in the early days when I was writing Start Small, Stay Small a decade ago.
I did start talking to a few of them about the potential of publishing. I think for me, given that I had the audience, I didn’t want to give away 90% of the profit. I was willing to do the work and I’m honestly pretty interested in doing the work like I wanted to learn what it was like to actually have a cover designed and typeset it—typesetting is not the right word—but pick the fonts and just make the book happen and buy an ISBN. I wouldn’t do that again. This time, I would hire more of that out. But it is an interesting trade-off. I used to be more black and white about it like, well, the publishers take everything. But there’s a lot more nuance to this I think than people realize.
Tracy: Yeah. Again, you can self-publish and then move onto a publisher. It’s something I never realized or never even thought about when I first self-published my books. Now, I’m just trying to share the works. I know there are so many people out there who have written really great content but don’t have the time to promote it. If that content just fades away, there are other opportunities to share and get 10% of the profits and get an advance and whatnot, not a lot of money. Not as much as if you did the whole press push again, but just enough that it can keep that content alive.
Rob: Let’s mix things up a little and switch topics because I want to talk more about the content of the book itself. It is effectively teaching fundamental design skills to entrepreneurs, or to developers, or anybody really. The first question that comes to mind is why are these design skills useful to the Startup for the Rest of Us audience? There’s a lot of developers. There are some designers. There’s a lot of mostly bootstraps and bootstrap founders. Why should they care?
Why might they want to go out and pre-order this book for example? By the way, nostarch.com/hello-web-design, and we’ll also put that in the show notes, obviously. But the book is $20 and PDF $25. Is it a hardcover?
Tracy: It is hardcover.
Rob: Yeah, that’s crazy. That’s actually relatively inexpensive.
Tracy: It is a shorter book. That’s one of the reasons why, while it’s a hardcover, it’s $25, but I think it’s going to look really great.
Rob: Yeah. Why is this important to an entrepreneur or bootstrapper?
Tracy: Right. I think a lot of my career has been around how great it is to have skills in multiple areas, having just enough skills in sales and marketing and development so that I can launch these projects. I’ve self-published these books, but I actually have a whole platform that I use to sell them on my own and called them Hello Web Books. It’s a whole selling platform and dashboard. I have my videos there. I have all the content from my books there.
People can log in to this website and buy the books, and read everything. I’ve coded all of it. Because I could do every single bit of this, I could do the design. I could do development. I can do the marketing for this platform. I’ve been able to do more faster without having to rely on people, rely on hiring contractors, and going through that whole process of working with other people. It’s been really great to just do it myself and get it out there.
When I talk about design skills—and by design, I mean not HTML, CSS, frontend development stuff—I’m talking purely about the visuals, the user interface, user experience. There are so many people out there, their bootstrap companies are working on launching a side project. They’re working on their first SaaS. The design side of it, if you don’t have a background design can be really intimidating. You know that’s what the customers are seeing. You know that’s what the customers are using. I wanted to write a book so that people can be more efficient. They can be more unicorns where they can get just enough design skills so that they feel comfortable designing these interfaces themselves, so they get their projects out faster.
Not just interfaces. This also applies to slides if you’re doing talks and whatnot. You’re doing a keynote or those other platforms. Designing your slides, designing your personal website, designing your SaaS, if you can do the design yourself, I think you can do a lot more. This book is different from other design books because I’m not teaching you to become a designer. I don’t go into this theory. I don’t go into all those little skills that you’d want to know to be a proper designer. This is just like the shortcuts, the fundamentals, and the shortcuts. They were a little dangerous.
Rob: Right, 80/20.
Tracy: Yeah, the 80/20 of it. You can feel comfortable doing it yourself. If you want to become a designer afterward, if you decide that you love design, you can use this book as a platform to then read more traditional learned design books, or you can just take this as a basic set of skills, and just so you can launch your projects and do the design faster.
Rob: Right. A couple of things, earlier, you said unicorn and you didn’t mean billion dollar evaluation. You meant you’re very unique like you’re both a designer and a developer, or designer, plus developer, plus entrepreneur, whatever. There’s a big piece of this that I want to drive home what you’ve just said. It’s that the less you have to—especially in the early days when budgets are tight, time is tight, timelines are tight—rely on someone else, like a contractor to get back to you, or even one of your team members who might have other priorities that slow things down, it either costs money or costs time.
I’m not a designer and never have proclaimed to be, but I learned enough. I wish Hello Web Design had been around at the time, but I learned enough and dug around on the internet and read a few design books such that I could download—let’s say 10 years to 15 years ago when I was super bootstrapped and super cash strapped—landing page templates that I would buy on ThemeForest or something for $10 to $15, and I would put up landing pages.
They would look good enough. It’s 80/20. They were not phenomenal. I didn’t design it myself but the concepts you talk about in this book are things like using a grid, colors typography, whitespace, layout and hierarchy, user experience, images and imagery, and all of that stuff, I know just enough that I can get a landing page up and it doesn’t look like crap. You also mentioned slides. Sometimes I have a designer help me with my slides and other times, I’m able to put them together myself.
If I’m able to put them together myself, it’s so much better because I don’t have to rely on someone else. Even blog posts and long essays that I want to add imagery to or add balance or break up walls of text, this type of thinking helps. I’ll bring up another example. Anytime I work with a designer, if they’re a phenomenal expensive designer, then I don’t really need to know much. But I’ve often worked with designers due to budget who are good but not great in every area. Like when we redesigned startupsfortherestofus.com, for example, the designer was good, but we were on a budget, obviously.
I had quite a bit of feedback that I think made the design look better. He had a good concept and a first step, but I remember looking at it being like, yeah, these things are off. Again, it’s not that I could do the design, but I could tell what was off. It’s not that I could do the design but I could tell. I have enough taste. Taste, I’m defining as just knowing a lot of these concepts, these rules of thumb of like, there should be more whitespace here or there are too many colors, or why do we have five fonts on this page.
Those weren’t actual examples that happened. But they can, if you hire an inexpensive designer, if you go to Upwork and hire someone for $15 bucks an hour, you might need to know these things in order to wind up with it with a good product.
Tracy: Yeah, exactly. There’s a whole chapter in the book, I titled it Training your Design Eye. A lot of people will say like, how do I know what’s good design? It’s knowing the principles and knowing the fundamentals that you talked about. But there’s also a part about thinking critically about other designs that help a lot of people who are not designers themselves to pick out what makes a good design.
If you get to a website, and you’re like, dang, this is a good website, take a moment and break it down. Try to think critically about what makes it a good website because the more you insert that into your brain, the more you can regurgitate it later in your own designs. It could be a phenomenal experience like the NAV is just great. Maybe it has a really nice user experience of the NAV. Maybe you notice that the illustrations that they’re using are particularly nice. There’s a lot of whitespaces.
I do some of these breakdowns. I did one quite a while ago. Maybe I’ll give it to you for your show notes where I broke down SavvyCal’s website. I listed out all the little design details on the SavvyCal website. People can notice those details and then they can better remember them when they’re doing their own design. It’s kind of like that critical thinking part when looking at good design. It’s going to help people become better designers, or at least become better at seeing and being able to critique designs that people give to them.
Rob: Right. SavvyCal is a good example because that’s obviously Derrick Reimer’s app. Most people will have heard of him as listeners of this show, or of The Art of Product Podcast. SavvyCal is such a good example because Derrick is the unicorn you mentioned earlier. He’s a full-stack developer plus designer, a really good designer, actually. Every site he has done, because I’ve worked with Derrick, gosh, for almost a decade.
We don’t work together anymore. But he helped me with HitTail then Drip, just years and years of working together. I was always struck by his designs which are very simple. They’re sparse. They are minimalist. Yet, it looks easy. He makes it look easy. I’m always like, how did you do that? I’ve sat and watched him for hours. I’ll appear over and watch his design process. I’ll watch him, look at his screen and watch him just take things away, and just keep it very simple.
I remember that SavvyCal breakdown that you did. It looks easy, but it’s not like his level of design because I’ve sat down and tried to kind of do something that’s simple and it looks simple. It doesn’t look good. It doesn’t look as sophisticated, I’ll say.
Tracy: Yeah. That relates to actually the first half of Hello Web Design. I was going to tell someone, what is the number one thing to remember if you’re saying I want to become a better designer? What do I do? I say, reduce clutter. You can reduce clutter in your content by making things shorter, tighter, easier to understand. You can reduce clutter in your colors by reducing your color palette, making things simpler. Reduce the clutter in your fonts. That’s where that rule of thumb of only two fonts per design comes from. Reduce the clutter in terms of your layout. By having a grid, you have this like an invisible skeleton to your design.
All these principles that I go through chapter by chapter in the book, all relate to just reducing clutter. Obviously, there are great designers out there that can make things that are very busy and yet work super well, but that’s because they’re awesome designers. But if you are someone learning design, and you want to just know one thing, aiming towards simple and clutter-free is going to get you. Honestly, that’s the 80/20. That is going to get you most of the way there if you just look at every piece of your design, and just try to reduce clutter.
Rob: Another chapter of the book that I liked is chapter 3.3, Prototypes. The process of sketching your ideas and making prototypes will help you play with solutions and try out different ideas faster than if you move straight to coding. Then you have some hand sketches then you talk about them, kind of iterating on those. Then you talk about wireframe tools, like Sketch and Balsamiq and UX pen. There are several I hadn’t heard of. I think that chapter alone is likely for, especially early-stage founders trying to get an MVP, have never done wireframes and all that. Talk us through a little bit of your thought process on mocking up designs and getting wireframes out.
Tracy: There are things out there like Tailwind, Adam Wathan’s design framework, that a lot of entrepreneurs use to do designs, which is awesome. The designs that come out of using this Tailwind framework look really good. I find a lot of people who want to launch their first project. They’re like, cool, the design’s taken care of for me. I can just take my content and the things I want to build and just throw on Tailwind, and then you’ll have a design site.
There’s a reason why I want to recommend a prototype in between that and starting out something which is like sketching. A lot of people who are new to design are used to being on the computer all day long, they don’t want to go off the computer and start doing hand sketches. When you can do hand sketches, don’t worry about Tailwind, don’t worry about the colors, the fonts, and everything. The first thing you should look at is just sketches out like boxes and lines, how your layout would be for the thing that you want to build.
Don’t just do one, maybe do one layout and then be like, okay, what else can I do? What if the NAV is going to be in the middle? Maybe it’s going to be a smaller column of information. Maybe this piece of my project should be in a different place. When you can work with just pen and paper and just sketch things out, you can play with more layouts faster than if you’re going into CSS and trying to switch out where the columns were, where the things are going to be.
You’re going to be a lot more constrained if you jump straight into code and you start relying on some of these frameworks. This helps a lot when it comes to content because when you’re just sketching out the lines, you can see that, oh yeah, you don’t want a giant wall of text here. You want something short so you can get to that next piece of your homepage. Maybe that feature’s block. Maybe the next thing will be people’s testimonials.
You can figure out where those things land before you move in and code. Step one is just pen and paper, just being super-fast and efficient. Step two, then, is you could go into something like Photoshop, Sketches, the Balsamiq, and whatnot and start just doing things. You can move things around a lot more easily that way, rather than just sketching something new. The whole process is, it allows you to play faster with the layout, rather than going straight into, say, a typical layout, something that you coded in CSS and you just have a column and you have the three columns below, and things can look very the same between all these websites.
Just having this little prototyping process is going to help you move things around faster. I think that’s a piece that a lot of people miss if they are just saying, I want to build this project. I’m just going to build the backend. I’m going to have the quick frontend, and I’m going to throw a framework on top of it.
Rob: Yeah. I always had a little bit of an issue with 37signals, but now it’s Basecamp. They have a book called Getting Real and a big part of that was like, don’t do mock-ups. Just start building an HTML CSS because it’s so fast. If you’re as good as they are, then go do that. But I’m not that good, apparently. Derrick and I would sit down and the rest of the product team as we expanded, we white-boarded the […] out of things. We white-boarded everything and that’s the equivalent.
That was our hand sketching. I would grab a whiteboard pen, my handwriting and my lines are all crooked and everything, but we have this pretty complex thing. We’d do it. We’d start to talk throughout stuff at work. We’d realize within seconds, that’s not it yet. Then we go and we go. Sometimes these sessions are 15 minutes and sometimes they are three hours. We would just sit in front of a whiteboard.
I think that’s one of the reasons why the software was built. It’s really good. It’s good, solid UX principles. Of course, Derrick or Brian, the designer, could have gone into the CSS and probably done a good job, but the iteration would have taken longer. I know that there are some design agencies or some maybe heavy processes that are like months and months of prototypes, and user testing, and clicking, and paper prototyping, and blah, blah, blah. We didn’t do that either.
I do think you get to the point where it’s overkill. I get that maybe 37signals or Basecamp was pushing against that at the time, which is fine, but I am definitely more in your camp of some type of sketch. I didn’t tend to use paper because I was doing it collaboratively and with a whiteboard, it was so much easier to erase. Then we just took a photo at the end. We would attach that to an issue of like, this is a new screen or series of screens. It was oftentimes whiteboard sketches, photos of them just slapped in issues with a little bit of text, and that was it.
You have to have been in that session to know all the nuances of it. But that allowed us to move very quickly. From there, doing this CSS itself was not that hard once a lot of the paradigms were ironed out in that fashion.
Tracy: Imagine an onboarding flow. You want page one to be this form and page two, as maybe you’re getting that credit card, and then page three as you get into the app, and you have these tooltips. Imagine if you take a post-it or something like that where post-it number one is page one, and post-it number two is page two. You have these little quick sketches of boxes and lines and whatnot to figure out that layout is, but then you decide, oh, wait, I need to have a step 1.5 in this onboarding flow.
You want to add extra steps. You want to feel for that user experience process, and if you’re in code, suddenly adding step 1.5, you have to go into the backend. You have to switch over where it’s point two. You have to go to that page. You have to design that page really quickly. It’s so much slower than if you’d had a post-it and you can move post-its around. You can add new post-its. You can sketch over the post-it. You’re going to replace the post-it way faster, quick, and dirty.
You don’t have to do that again, that huge design process, like you said, with those designers. But you just have something just enough that you can get that imagination going. Get those creative juices going and kind of realize that your first instinct is often not correct.
Rob: Yep, indeed. Well, @tracymakes on Twitter, tracyosborn.com.
Tracy: Tracy couldn’t get Tracy Osborn on Twitter.
Rob: That’s exactly right. If you’re listening and you’re intrigued by Hello Web Design, you should obviously, can hit the show notes, but nostarch.com/hello-web-design. It should be released within a few weeks. It’ll be released in May of 2021. This episode will go live in mid-April. Thanks so much for joining me today.
Tracy: Yeah, thanks for having me on.
Rob: Thanks again to Tracy for joining me on this week’s episode. Thank you for coming back and listening week after week. I really appreciate it. I’ll be back again in your earbuds next Tuesday morning.