Tracy Osborn 0:11
Okay. I just want to make sure that it all worked out. All right? Well, thank you so much for having me, I definitely said, my name is Tracy, I love design, I’m a bit of a, like, I do everything. My, my, my education background isn’t designed to have a degree in art and design with a concentration of graphic design from my university. But I have also I am a developer, like I said, I’m an entrepreneur, I have founded companies, one that didn’t work out. And I’m now the program program director at Tiny C, which is a accelerator for, for, like SaaS businesses. And both through all of this design is kind of the, the thing that I do the most, and it’s the thing that I find that design is everywhere. And design can work well with pretty much any career path. It’s something that can complement any career path. And it’s something that I even though I’m not employed as a designer, it’s something that I still use day to day, and I find people who are also employed as developers are employed as business managers who are in other fields that don’t, aren’t necessarily designers still have opportunities, and still can use design to improve how they’re working with their current career. So, for example, like if you’re an open source project developer, of course, you can write your project and put it onto GitHub, and have it just live there. But you know, that it probably would attract more people to use your project. If you have a homepage. And when you have a homepage of a design that homepage, and you have to figure out, like here with homebrew, you know, what are the colors going to use? What’s the layout you’re going to use? How are people going to use this project.
Tracy Osborn 2:01
I mentioned some things about design, I mentioned the visual feel of things. But I want to, like emphasize that design is really like how things work and how people are using it. And so whenever you’re working on a project, and you want to ensure that people are, are using the project that they’re signing up for it, they’re not having any problems like trying to access it. And I mean problems with your project in terms of how to use it. And this is where like having good documentation, having a website, having that all set up will help people use your projects. And in all of that, you have to use design. So there’s a lot of open source projects out there that have have websites. And some point someone had to think about how these are, how these are designed, and, and set things up. Like node Laravel. Not just websites design is also something he uses in presentations. So here’s an example from Speaker deck, it’s a different presentation of mine. So if you’re doing presentations at your work, you want to use design to make sure that it’s readable that people can glean information from your presentation that you want them to glean, you want to look good. Look, professional. Design is also you know, your own personal website. So this is a slide a piece of my own personal website.
Tracy Osborn 3:25
I also want to showcase my husband’s personal website, which he is, he is a developer, and, you know had to make design decisions on this website in terms of like, how is it going to surface the links for his social media? How is he going to showcase his projects. Now he made the design decision to add this little icons to the left of those projects, where he’s talking about which is a service which is you know, which project is a service, which project is a coding project, which project is a game. And so all of these are design decisions. And this is a part of design. But when I’m you know, I’m talking to people who are new to design, I have to I know that learning design in general learning new skills is hard. There’s that feeling of the lack of confidence when you’re learning a new, a new a new skill that can really make it hard to pick up a new like any anything new and design definitely is one of those things like like lack of confidence, not knowing what is good design, what’s bad design and whatnot can make it really hard to like pick up those skills.
Tracy Osborn 4:40
Design suffers, not really suffers but design is particularly hard because there’s no really right and wrong to design. You know, like programming, there’s, you know, generally like program making, it’s something’s working or it’s not you know, that’s kind of a generalization of course you can there’s multiple solutions to say any kind of programming project To get something to work, but really, it’s like, it feels good because you know that something is, you know, working the way intended or not. Whereas design, it’s so subjective, and there’s so many different solutions to a design problem, especially when you’re working on the visual design, that I can make it feel very, like you can be, it’s really hard to like, get a good feel for what is the right decision. And I wanted to put out a lot of empathy for anyone who’s picking up design that this is absolutely like a very normal feeling. And this presentation is really is really to kind of help you to train your design eye and to train your kind of design intuition. So it’s easier for you to when it’s when it comes to working on designs, you know, when you’re like working on different, you know, trying to figure out what’s right or wrong. In a field where it’s very subjective, it’s very up to the person, it kind of gives you a good feeling for what is the right and wrong for design. A lot of people shy away from doing design, because they know they’re not this good designers, but they don’t know when they do good design. And I hope that this presentation will help you kind of direct you in the right path. This, for me, I have to admit is is design is like a culmination of 25 years approximately of working on the web and in design. So it’s one of those things where it’s like I if you’re a new designer, and you’re looking at me, and you’re like, oh, Tracy is so confident, it’s because I have this 25 years of experience. And I’ve gotten to this point of working in the web for so long that I can intuitively feel was good design versus not good design, because I have that experience.
Tracy Osborn 6:50
But a lot of this, this presentation was born from the process of teaching myself how to code. So this is me at a presentation about 10 years ago, my last startup, which ultimately failed, which is a whole other story. But for the startup, I was a designer, I taught myself how to code in order to launch this these the slew of web apps that I built for wedding lovely. And it was during this process that I kind of had this like aha moment about learning new skills, learning new tech skills. And it’s because when I say I have a background in design, I have a degree in graphic design, I actually started out going to university for computer science, and I quit out of computer science thinking I was a terrible programmer, and I would never program ever. Because programming was taught kind of like a theory first way, it was really taught in terms of like, you know, it’s break down sorting functions and, like graph out what sorting functions are better than other sorting functions. And I was like this is does not work for me. And I realized that later on, when I decided to go back to programming and be like, can I teach myself how to do this as I was a little bit more project first, a little bit more like. Like, I need to like work on something like quote unquote, real as much as a web app is real, as compared to working on theory. And I feel like this process also applies to design. I use that experience in programming to write my first book, which is a introduction to building web apps using Django and it’s, it’s doing that project first teaching and then that led into a talk about this book a little bit, the end lead into my my latest book, which is called Hello web design, which is teaching design, kind of using this same set of project based principles. And so that’s another thing I want to mention is that, you know, if you’ve been wanting to learn design, and you’re reading, you know, some traditional design books I in they aren’t working for you it could be just kind of the way that it’s being taught isn’t working for the way that you think. And so this presentation in the way that I learned is more project based rather than say theory based. So how do you get more get yourself more comfortable with design and the I believe is that the best way to get yourself comfortable with design and become like kind of start building out that design intuition start building up that
Tracy Osborn 9:23
that design eye is to surround yourself with good sign and then think critically about what makes it good design and unbiased design. I don’t necessarily mean just web this isn’t a process you can do with almost anything because design is everywhere. Every single thing around you has been designed. So like looking around my desk, there was a some there was someone that designed the lamp that’s on my desk, there was someone that designed the webcam that’s on my monitor. There’s someone designed the monitor itself, there’s some of the design this microphone that I’m using. And so for each of these things, I can have a look at it and kind of see Think about, like, what makes this lamp that I’m looking at work well, like it’s a very tall lamp, it has decorative details and kind of start thinking through kind of like break down decisions that that designer did for that project. And what that happens, what happens to your brain is I do break down these decisions, it starts, helps train your own design feelings to kind of like have an intuitive feel for what of like good design decisions. And that’s going to lead to better design decisions when you’re doing your own design when you’re working on a project for yourself. So you need to train your design, I again, I have like 25 experiences, 25 years of experiences of looking at things and kind of breaking it down, it’s one of my favorite things to do. And this is what I want all new designers to think about, you know, not necessarily right when they’re working on designing a project, but whenever they’re interacting the blab whenever they’re looking at anything that they think is like, oh, that that is well designed to think critically about what makes that thing well designed, because that’s gonna make you a better designer. So you can read about the theory, as much as you want the typography and color theory and rhythm and layouts and all the things that traditional design, education can teach you. We also need to get a feel for what’s right or wrong. And it’s kind of hard to explain, you know, it’s hard to explain intuition. So, to talk about design intuition, how do we start? And then I know I just said, like, you don’t have to worry about theory.
Tracy Osborn 11:35
But when it comes to theory, I’m gonna break it down and design some design like rules of thumb. So if you’re starting completely from scratch, this will give you like a good starting point, we need to know what are the rules of thumb. And then when we look at other designs in a moment, how to, like, look at those other designs. And keep in mind those rules of thumb and start seeing those rules of thumb and other designs is going to help you remember those rules of thumb later. So here are my shortcuts. So I’m not gonna talk about in terms of like, here’s color theory, I’m gonna just kind of talk about little the shortcuts and they all relate to some of these bigger design. These design theory pieces like typography, and color theory and layout. So when it comes to typography, my my biggest thing I recommend for new designers is to avoid using a lot of different typefaces and fonts. The rules of thumb for for typography is to keep the number of fonts low, I usually recommend for beginning designers. So just stick with a project with two different typefaces, two fonts, I use those interchangeably. They’re not exactly the same, but we’re going to use them interchangeably here. In general, try to use fancy and displace display fonts, like those ones with big swooshes, and swirls and whatnot, use those sparingly because they’re very cluttery, they can look like like cleaner fonts, make things look like a little bit more professional. And if you want if you need to have differentiation between pieces of content, you can do things like play with bolding, play with metallics and play with transforms. And you can use that to kind of make distinct areas of what you’re designing.
Tracy Osborn 13:20
So let’s see what this looks like. It’s something on a personal website, this is not what it looks like. What I did is I went in and I changed all the fonts and kind of this feeling of like, Ah, this is like chaotic. There’s like different, you know, fonts going everywhere, you know, the blockquote quote is different. The NAV is different, the header is different, the the page title is different. They all have different typefaces. But you move it back down to just two. Here, you can see that it feels cleaner, it’s a little bit easier. It’s a lot easier to read. It feels more professional. And limiting typefaces like you can, this is my my paper resume, again, just two different typefaces. And you can do some really nice things with just two typefaces. And so that’s my rule of thumb when it comes to typography as a beginning designers to keep it to like to fight typefaces, and kind of vary the way that is displayed so you can get something that looks nice and shows everything you you know has that like differentiation of this is a title. This is a URL. This is a subtitle this is the description. You can do all these things just by playing with uppercase and metallics and color. Alright, so the second rule of thumb for design is to give your designs more space that you’re you initially feel comfortable with beginning designers struggle a lot with whitespace and whitespace, I believe is one of the best ways to make actually a design. Both feel better, and work better. Going back to my website, I took out all the whitespace here mushed it all together, this looks okay, but I’m a huge fan of whitespace, I have a lot of whitespace around the header, because I want to have an emphasis on the beginning part of my website, like, you know, that description of what I do, added whitespace below it kind of lets everything breathe and everything feels a little bit more professional. So this is a personal website.
Tracy Osborn 15:25
But I also want to showcase the New York Times. So I kind of faded out to the two different versions, New York Times here, the website. And so the left is like the old version of the website and kind of see like that it’s it’s pretty crammed together. And you need that for a newspaper, you know, want to have that like acres of whitespace, like I had on my personal project. But you having just a little bit more whitespace will make things feel a little bit cleaner and a little bit more readable. So here’s a new version of the website, all they really did was a, there were some typography changes, but there’s like a little bit more spacing in the columns, there’s a little bit more spacing in between the different paragraphs of information. And you’re looking at them side by side, you’re gonna see that the right side, just with like a little bit of addition, a little bit more space still has all that information they need to have above the fold, but looks, it just, it’s a little easier to read. And whitespace can make a website feel a lot more professional and luxurious. So especially when you go to these luxury websites, again, acres of whitespace, and designers love whitespace, you’ll see it, this is one of those like websites that collects quote unquote good design, you can see that every single example here has tons and tons of whitespace. So there’s like, I know that a lot of times beginner designers don’t want to do something like this, like, again, the acres of whitespace. But there is like a the beginning designers adding more whitespace and they’re initially comfortable with will actually push the designs into a a cleaner direction. But in terms of not just cleaner, a direction, there’s also like the the fact that whitespace can make your website easier to use because the information won’t be crowded together, it’s gonna be easier for someone at a glance to see what they need to, to find in your website and complete what you want them to do.
Tracy Osborn 17:28
So in this example, Xerox had this table information and they just added extra, extra whitespace where those add the cart links are. And just by adding a little more whitespace, a little bit more breathing room, they saw an improvement engagement, improvement in products out of the cart and improvement and customers continuing on through to purchase. So well. This is like the classic example of that design isn’t just the way that things look. And design is gonna affect how people use your product that can affect the user experience. And so like, that’s especially why I believe everyone should know a little bit about design. And like, you know, play with things like whitespace. And then one of the last rules of thumbs, I want to say for beginning designers is to avoid using a lot of different colors, because that kind of leads that feeling of cluttering this level of feeling of chaoticness can be designed. And so like the rules of thumb, keep your colors complimentary. And kind of that just means that they they like a red and green are complementary colors. Orange and Blue are completely colors. There’s whole articles on what that means. I can’t really get into here, but they kind of like it’s like a set of colors that work well together. And then I think it’s a good rule of thumb for beginning designers to just think about things as neutrals, and then use one brighter color for emphasis of important things.
Tracy Osborn 18:57
So I want to do like to showcase this. This is the foundation ZURB Foundation website. And so this is using complementary colors using blue and orange. And it looks it’s a full color website. But the color palette is actually very limited. It is kind of just like gray, this gray neutral. And then there is parts of orange and parts of blue. So rather than having a lot of different colors, their website, it’s a very beautiful website, but it’s actually very subdued when you kind of think through the colors that they’re using. And I find a lot of people have a lot I myself I have problems trying to pick out colors to use for for their website. There’s a lot of different color palette websites out there that I think is a great thing to use, just to get you started. So this is color, mind that IO. You can kind of use it to go through color palettes and you kind of have you can kind of start here and start designing your project using these color palettes that are generated and then you know that you are done Working with a limited set of colors rather than say like jumping into a color palette and some design program and having you know, millions of colors to choose from and not knowing where to start, I think it’s much easier. And this is what I do as a professional designer is to start from a color palette, especially from all these generator websites, and use that to give yourself a starting point. And then, I think this is the last one is to try to line things up. So I’m gonna take all these principles, by the way, and we’re gonna apply them lira use that the trainer designer, but again, I’m just kind of going through some of these things to look for when we’re training our design I winding things up is something that will help having like an invisible skeleton to your design is going to help things feel, again, less chaotic, and more professionally designed. And underlying grid gives a feeling of cohesiveness to a design.
Tracy Osborn 20:56
So this is something from Medium I took it and I kind of move things around and kind of have this feeling of just like, you know, child made this, there’s things everywhere, nothing isn’t lined up, everything feels a little bit chaotic. But then when you move it, so everything is on, like left aligned, and everything is like lined up together. This is actually pretty easy. If you’re using a design framework, a CSS framework, like say Bootstrap or tailwind, or whatnot. And they have this grid system built in this makes front end development and designing websites very easy. This is something that you do want to pay attention to, if you’re like say, designing slides, because those things don’t have necessarily a framework built in. So if you’re using something like keynote, where you can put something anywhere, just knowing that lining up everything into one like say vertical column will make your design feel a little more professional, a little more clean. So all these principles, all this kind of shortcuts actually came directly from my book, I don’t want to give too much of a shout out to my book. But it’s called Hello web design. It kind of goes through all these, these basic design principles and these shortcuts you can use. And it all ties into this one single concept as if you’re growing number one thing as a beginning designer and you’re trying to train to design is to reduce visual clutter, and will make you a better designer. And you can reduce visual clutter by keeping the number of fonts and colors low, adding whitespace and lining things up. So in general, aim for a clean design. professional designers, people who’ve been doing this for a while can break all these rules, because they have that that design intuition already built in. But way before your you’ve built that type of design, intuition, that confidence in design, these are good rule rules of thumb to follow. And these are good rules are fun to look at, as you’re looking at good design. And that’s the next more important section. So now you have this like baseline of good design principles. The way that you pick up better confidence in your design skills.
Tracy Osborn 23:00
Ignoring practice and working on design first, because this is much faster is to just simply nitpick, good design, any design that’s out there, nitpick everything that you see around you. But you know, if you’re trying to get better at web design, of course, nitpick every single piece of good design that you see on the web and try to figure out what they’re doing well and and what you can be inspired from. So how do you find good design? That’s also a question I often get. Because if you’re a beginning designer, you don’t have a good design intuition, you don’t know what signs aren’t good. One place that you can go. A good shortcut. As you know, there’s a lot of websites that just simply link out to other good design web design websites. So there’s things like site inspire, there’s a few other like these collection websites, that’s a good place to start going. The websites on these, these showcase websites are going to be more of like say avant garde, they’re gonna be things are kind of like pushing the field of design, it will give you a good idea of where things are going, what are the design things that people are playing with, they might be a little bit advanced. But when you go here, and you kind of see how people are working with colors, how people are working with whitespace, how people are working with typography. Now help you kind of see, you know that every site that’s on here are like so quote, unquote, considered good design. And so you can use this as a starting point for starting your nitpicks. I also like looking at things like dribble, dribble with three B’s is there’s a place for designers to showcase like images and designs that they’ve done they’re particularly proud about. And so you can search for things like logins, and and see how people have designed say, different login pages. And then here’s a place where you can go and look at these logins get a feel for what are like what are some really nice, inspiring login pages and kind of start This process of nitpicking, which I’ll get into in a second. And awards is another showcase website that also goes through good, like what people consider are good designs. So when you, you have this platform, this, this foundation of design ideas of reducing clutter and adding whitespace, and kind of like picking out these good, you know, ways to like, determine what’s a good decision.
Tracy Osborn 25:31
And then you have this area of these websites look at. And, again, you don’t have to go on these websites. Anytime you’re on a website, if you’re just browsing the internet, someone links it to you, and you have this like feeling of being like, ooh, this website is cool. I like this website. This is where you can start, you can start nitpicking and start picking out those good decisions. And you think critically about whatever this design is doing. And you’re like, I this login page looks great. This button is awesome. And you kind of figure out why why is this button? Awesome? Is it the placement of the button? Is it the colors of the button? Is it the text on top of the button, and the more things you can pick out, the better, you’re going to train your design intuition. So basically, think critically about what makes a design work well, and I’ll kind of go into this in a second, I’m gonna see if I can switch out of keynote and move on to the browser here. So I think you can see your browser, this is the GitHub website. And so say you’re browsing the web, and you come on to get her website, and you’re like, hey, this website looks great. What makes it work? Like, what are the things that you like about it? What are the things? What are the decisions that the designers put into github.com? That make it a good, well, working website? Like, what? What can we learn from this? So, for example, I would say that if you’re thinking about colors, you’re thinking about, you know, keeping a fairly neutral palette, and then one single color or two, like, for emphasis, you can see here at the GitHub website is largely one color, there’s like this deep blue, this deep purple, and they use its bright green, this bright contrasting color for their buttons. So you can say, boom, they have a bright contrasting color button, because I buttons, the most important part of the page, they want to draw the eye to that button, they want people to put into email address and sign up for GitHub.
Tracy Osborn 27:30
Other design decisions, you know, this isn’t, this doesn’t look like the acres of whitespace. But if you look at it, there actually is a lot of whitespace. Here, there’s a lot of whitespace. Above the headline, there’s a lot of websites below this form here. There’s a lot of website whitespace. To the right, this, this globe is spinning, but there’s no text or information here. And so it still kind of serves as whitespace. So this is like a really good example of like, where there’s a lot of whitespace, there’s not a lot of content on this above the fold, but it feels balanced, it doesn’t feel empty. Other design decisions that are making, you know, the navigation has these really nice dropdowns, you can see that they put an arrow here, so you know that these ones are gonna be popping up a drop down. So that was a design decision of bringing that arrow in, they have two buttons on the right side, but sign up, has a border around it where a sign in doesn’t. And that’s because, you know, you can kind of theorize that sign and doesn’t have a border on it. Because people who are signing in have been here before they know where it is they know to click on it. But the signup button is for people who’ve never been here before, so you want to emphasize it, or you want to make it easier to find. So they added a border here to make that easier. And then they have a search bar right at the top. Because I know people are gonna be using GitHub, to search and find for different open source projects, we’re gonna scroll down a little bit, this illustration is awesome.
Tracy Osborn 29:04
Illustrations are hard for new designers, but you can kind of see like, you know, adding this illustration here makes GitHub look like you can tell they put a lot of effort into if they have a full on beautiful illustration. And as you scroll, they can pick out other things like they, you know, instead of this box being static, it kind of popped in, that’s kind of a neat little way of drawing the eye to that box. They have the buttons are very similar between sign up, they have the same single border and rounded edges. They’ve continued that field with a single border and rounded edges. And then also this box has a one pixel border and rounded edges. So they kind of have this like, repetition of elements. So you kind of get the point I’m talking about like when you’re going through a website and when a website looks good like this, what are those decisions they’re making? And so if you’re thinking to yourself, these are the decisions are making, these are the things I can pick out from this website. Even if you’re not implementing this, if you if you’re not like directly carrying over the decisions into a current design, if you’re just practicing this, this, this act of nitpicking design and picking out those good design decisions, then you’re gonna become a better designer later, you’re gonna train your design intuition, and you’re gonna have built up a little bit more confidence in terms of what of, of what design things you can use, and your, what design skills you can use in your own designs. And like this confidence of knowing that your diet design looks good. So I wanted to, you know, this is GitHub, all sorts of things going on here. A lot of things that might be this is a very well designed website that might be out of reach to some people, I wanted to move over to savvy cow. So sabich Howell is, is designed by a tiny C portfolio company. And Derek Reimer is a developer, but he’s also a very, fairly good designer. And this is his website. So some of the design decisions that he made here, it is a simpler websites than GitHub, it is a is a website that’s designed solely for developers by wanna say for tech people. So it’s, I mean, it’s a little less flashy, because it is just a very small team. And this might be a little bit more accessible to a typical designer. So the things he did, he has a highlight on this. I’m actually gonna start out with the whole headline, the headline is big, it’s eye catching. It’s, it’s, it’s very simple, it kind of in the the phrasing of it, sending your scheduling wink, Link shouldn’t feel weird. When you say shouldn’t feel weird. That’s not something you usually see is a headline of a page. And so you can kind of say like, oh, because you don’t usually see it because it’s like a little bit more human. It, it catches the eye and kind of like gets people interested, more so than say, a more boring headline, so you can kind of pick out okay, Derek has really worked on this headline here. He’s really like, wanted to like capture, capture, people write the very beginning with a very big headline. And then he emphasize the weirdest part.
Tracy Osborn 29:04
So to say, with this highlight, this little design, highlight, and the design highlight is a little bit angled. So it doesn’t look like CSS, it looks a little bit more interesting than just say, like a typical background image and our background color on CSS. So he put in some little design features here by like highlighting angling here. It is also, you know, we’re talking about colors. It’s a very soft, very colorful website. But his black, as highlighted in yellow, lots of highlights a yellow, contrasting color of blue for his button. And so the blue is the shouldn’t feel weird and getting started are the two things you see first. The other two links here up in the top right pricing and sign in are, are less emphasized. That’s because he wants people to see these two things first, you know, and he’s done other things, other design decisions here. By using this bright yellow background, which contrasts with this interactive demo that he has here, which draws the eye more kind of brings emphasis to this area that’s really important. He’s making good decisions in terms of typography, the type was really simple. Hey, look, there’s me. These things are angled a little bit that also like lenses, like well, like, ooh, that’s interesting feeling to it, that kind of makes the design itself feel these like little design decisions that are you know, that as a user, are less typical, I think, brings a design it, you know, this person put effort here. And because they put effort into their design, you kind of this feeling, they put effort into the product himself itself. A really big type here, lots of whitespace.
Tracy Osborn 29:04
You know, it’s funny when I was saying things lined up, because he made the decision of, you know, angling these boxes out, you would argue that things aren’t typically lined up. But you can kind of tell before it was angled, it was left aligned with this box here. Everything is actually into a grid. See if there’s anything else I can pick out here that’s different. You know, again, I want to point out this whitespace here, I want to point out the the big type, like how easy it is to read this how great that is. So again, say you landed on Derek’s website of Sadiq Khan, you’re like, hey, this website looks great. And you pick out oh, this is why he did this is probably why he did this. This is probably why he may you know he’s using his yellow background. He changed it. So it’s yellow highlights. We pick out these decisions. It’s going to help design train your intuition. It’s going to help you become a better designer. It’s just like it’s constant easy work. But I think it’s really important and something that will become more natural as you get better at, at looking at designs and like picking out those, those decisions. And I want to do one more example, I’ll do this one a lot quicker, because I know we’re spending a lot of time here. In terms of designer fund. So designer Fund is a seller, it’s a investment firm, around design company. So obviously, they’re very into design. And I want to give this as an example of a very complicated website with a lot of complicated decisions. So when you’re, I wanted to bring it up, because like a lot of decisions making here are might be out of reach for like a typical beginner designer. They’ve done a lot of cool things where they like, took the headline, and they put it off, you know, to the side, and they made it sideways. And so it’s like, you’re like, ooh, that is very desired. They have actually more fonts. I say that just that too. There’s like a serif font here. There’s a sans serif font here, there’s a headline font here. These things are repeated throughout, they don’t have actually a lot of there’s like one more right here.
Tracy Osborn 29:04
But it’s like one of the same things where I said like really excellent designers can start breaking some of these beginner rules. And designer fun has definitely done that. But in a very, very beautiful way. So like, I just wanted to bring it up here as this isn’t their place where you can kind of see what the advanced things you can do as a designer, but don’t feel bad if you feel like like this is a little too overwhelming is a little bit too designed to be really nitpicky or about as a game designer, but it’s fun to look at, it’s fun to see, oops, I made a click that it’s fun to see. There we go some of the interactions they put on their website and use that to inspire you as you do your own website. And here’s another example of what they could do with just type that that looks really beautiful. They didn’t have to use images for this, but they used CSS, as you do these hovers to like, bring in that colored underline and change how the topic switches to an arrow. So you know, you can click on this. So that’s an example of a very beautiful website that you can use nitpick, but there’s a lot of big decisions there. I think these websites more like savvycard are a little bit easier as you’re working on your training or design eye.
Tracy Osborn 29:04
So I’m gonna switch back over to keynote. Yeah, I actually I brought up, I put it in, get hubs previous design here too. Because that was I find interesting to see how they evolved. Where this is their old GitHub design, it was more gray, they still have that bright green emphasis in the button. Um, you can see how they’ve like changed the like the there’s even nitpicking design decisions here because they can see that a change their headline from Bill to developers, to where software build where the world builds software. So you can see that they opened up the type of people are targeting when they did this redesign, which I find really fascinating. So even decisions like that, also think about like, Why did GitHub change their headline? Why did they make that decision? It’s also an interesting thought process. Now, you can also pick out the bad decisions. But this is a, this is something I think as a beginning designer, it’s harder to see the bad decisions than the good. And so that’s why I like to say like, go through all the things that you know, are good design. Or you see, when I say good design, it’s like, you know, how do you choose this good design. And I the reason I pick up GitHub is pretty much any tech company that has a large design team, you can assume that they have the design decisions they made have been intentional. But you know, it’s also useful you could when you’re using a project, and when you’re using a website, and you’re like, I don’t like the way that looks, I don’t like that.
Tracy Osborn 38:57
You know, the way that that interaction worked, you know, I don’t like how I that login page work. It’s also useful to think about why it didn’t work for you. Was it the headline? Was it hard to read? How was it hard to understand? That also is a useful process, I find it’s, it’s better to pick out the good decisions, and really get a good feel for what are good decisions you can make. But pick out the bad decisions is also something that you can is a good process, especially when you’re faced with things like this, which GoDaddy does not look like this anymore. But we talk about those design principles of fewer fonts, fewer colors, more whitespace line things up, you can see that the GoDaddy Website here is is breaking all of those decisions. Millions of colors and billions of fonts and lining up things are just everywhere. And you can kind of see how that kind of contributes to this very chaotic design. We went over GitHub already. And I want to say is Like this is kind of like a design mental process. But it’s you know, this is also something you want to bring forward for when you’re working on your own design. So you can say, like, you know, you’re working on your design, you have to design a login page, you should go out and be inspired by the login page don’t start from scratch.
Tracy Osborn 40:18
So you don’t want to copy exactly. So this, I grabbed this from GitHub, and this is a sorry, not get get up, see me dribble, I grabbed this from dribble, this is someone’s mock up of a, of a a login form. And so you can be inspired by the decisions that are made here. You can look at this and you say, Okay, there’s, there’s only two colors, I guess gray is a colors, but it’s like red, black and gray, they’re using design. So they have few colors, there’s only one font, they have everything lined up in this form, the form is full width. So the right side of the form is actually lined up with that sign in button below. There is a lot of whitespace. So there’s Create Account at the top has a good amount of whitespace below the headline. And then those social buttons have good lot, Bob is face below them. And then there’s the form there. So everything has that that that open feeling. And you might notice around the forum, there’s a significant whitespace to the left, right. So you can pick out those good decisions, you can tell yourself, you can bring those good decisions, who the thing that you’re to that login form you’re designing, you don’t want to copy it for beta make enough changes to it, that you’re taking the idea, but you’re not taking the design. And I don’t think you should ever start from scratch is a big thing that designers like, There’s this quote, which I don’t know if this is actually public house was grown, but it’s like all artists copy.
Tracy Osborn 41:43
Great artists steal, like, I know that for any design project that I do, I never start from scratch. Bansky also kind of did a riff on that saying that bad artists imitate Great artists steal. There’s a bunch of books on artists steal a steal like an artist. Any design work is going to be inspired by the design work. But it’s just whether you can make enough like you can steal the idea and steal the good decisions with it without stealing the design itself verbatim. Lots of articles about as well. Definitely use inspiration. Because inspiration and training. Inspiration is also important for training your design eye, as well as when you’re working on a design. So you know, trying to sit down and work on a new design from scratch without using any sort of inspiration is a lot like trying to work on a new programming project without the use of StackOverflow. Or like you won’t be able to Google for for solutions. It just won’t happen. You need to win programming, you need pretty much need to have documentation and examples and Googling and whatnot at your hand. And that’s the same thing with inspiration. You know, you’re working on login forms, you’re working on an onboarding, you’re working on your website, need to look at other things to be inspired, that you can use the implement in your process. Now this is something that I did in my first book, hello web app. You can see that was very once you look at these books side by side, you can see that was inspired by a book apart. I liked their use of bright colors. I like their use of bold typography like No, like really big type at the front. I like their use of whitespace. I like the use of simplicity, they don’t have a lot of they don’t have like an image on here. There’s not a lot of gradients or anything like that. But you can.
Tracy Osborn 43:33
But Hello webapp is the distinct design from a book apart. So I did not copy their design, but I can definitely, definitely say that was inspired by it. And then the thing that’s hard is that you need to continually practice, practice, practice, always practice. Because you know, you always it’s your first design is never going to be amazing or second design is gonna be a little bit better than your first design or third designs when you live a better and your second design second design. It is totally okay to work on training and design eye and look at inspiration. And feel like you’re kind of like have mittens on you’re trying to design yourself. It’s just because you need to practice. And you know, every design to a professional designer, like myself to anyone else is going to start off feeling like a disaster. This is my thought process every single time I do design and again, I’ve been kind of working on the web for like 25 years, where it just starts off, I start designing and then it’s like it feels awful. And it’s not working and like that looks ugly and I don’t like it. There’s like this moment of like, oh, going out looking inspiration. Maybe I’ll add this idea. Maybe I’ll add this other product like this, this way that I that someone else is doing it. Maybe I’ll implement that in my own design and see how that works. There’s this point We just keep poking at it. And it is awesome. It’s maybe not like a yes, but maybe it’s like a maybe, or maybe it’s like something like you, you know, you’re getting closer to a good design. But it’s always gonna start off feeling a little bit like a disaster. I know, I’ve talked to other designers, like professional designers, it’s the same for them. So, you know, as you’re training design, as you’re implementing those designs, yourself, if you start off kind of working on a design, and you’re like, This is a disaster, that does not mean you’re a bad designer, it means that you’re simply a designer, you’re working on the process of being a designer, it’s just like programming where you have to, you know, programming services have bugs and errors, and you’re constantly trying to like, go through and fix error by error by error, and to the certain point that the programming project is working to same thing with design, but errors are that feeling of like this isn’t working, this isn’t, these colors are clashing, this doesn’t look good, and you’ll have a better feel for those decisions.
Tracy Osborn 45:58
By training or design eye, every design you do is going to be better than the last, it might be a little bit better, it might be a lot better, you know, it depends on the person, but every design you do, you’re going to learn from it, and you’re gonna be better than the last one. So as the process of iteration, it’s a process of of looking at design, of thinking critically about design, but also making sure that you’re you are trying to design things. Now, even if it’s just presentations, every presentation you do on a certain topic, maybe then that you keep iterating on your site design, try to make them look a little bit better and use as a process that heat yourself design. You know, it’s just like, it’s like everything, you know, it’s like programming, it’s like, learning how to pitch baseball, you know, you can watch someone throwing the ball and kind of, you know, nitpick what they’re doing right, you can see that they’re turning their, their body in a certain way that they’re, they’re using movement of their body, not just their arms to throw the ball, but still takes you getting out there and throwing the ball yourself, you might, you know, train your intuition about what works and what not, you also need to train the physicality of train your body to do it. So, in essence, I want you if you want to train to design, I have to start thinking critically about design starting today. So anytime you see a good website, spend 30 seconds to look at the decisions that they’re making, and kind of pick out what they’re doing. Right? You know, and you can use that foundation of design of design of knowing that generally, to line things up generally, to add more whitespace generally reduce the number of colors you’re using, generally, to reduce the number of fonts you can kind of take those that foundation and look at these designs and kind of pick out how those websites are, are using those principles.
Tracy Osborn 47:52
And what you’re gonna do is you’re gonna start training your design intuition, it’s gonna make it easier for you to do designs yourself. Think about why something is successful, why is something not successful. And then practice, don’t be afraid to iterate, you’re gonna make a better, like design, you know, you’re working on a certain design, take a break, come back in their day, apply those critical thinking skills, use that foundation, and improve those designs and continue to iterate on the same design, continue to iterate and doing new designs, just keep working on it. And try to have fun. I like design. I mean, it’s one of those kind of things where it’s gonna be really scary to begin with, it’s going to be really, this, that feeling of not having a lot of confidence is going to be there. If you break through it, I feel like having a foundation of design will help anyone in any career path that
Tracy Osborn 48:49
they’re working whether programmer, C CEO, Mark marketer, anything you know, these foundations of design skills is going to help you improve your current career. So, like I mentioned earlier, I go into this more in my book, this is how I design this version right here is actually my first edition is the one that I sell published but I I sold it to a publisher, which is actually really cool that a publisher said hey, that that book is doing well we would like to put it through our publishing house. So it’s going to be released through no starch press this summer. If you go to No starch.com/hello-web-design You can preorder the book and it should be coming out in June. I don’t think there’s an exact date yet but I I know that the copies are printed, they’re gonna be hardcover as compared to this version which is softcover. They’re gonna look really nice and it’s gonna be coming out in June and it goes into this design stuff in general. And then like I said, I’m also work at tiny seed. Now you see it as a accelerator design for stack SAS bootstrappers. So if you’re a programmer, entrepreneur or anything like that, working on a SAS project, um, Check out tiny seed, if you haven’t heard have heard of us before, kind of giving a different path for funding outside of typical venture backed VC track. And that’s it. Please chat with me online. I’ll be here for questions. But I am Tracy makes nearly anywhere on Twitter or whatnot. It’s a very questions. I’ll put the slides up later. You can find me on the internet, as Tracy makes. All right. Thank you. I’m gonna break out of here.
Suz Shardlow 50:32
Like so much, Tracy. There’s so many, so many great pieces of actionable advice. And that’s what I really love in the talk, something that I could actually take away. And
Tracy Osborn 50:42
really work on that I always I feel like takeaways are very important for a talk. And I’ve been to many talks in my life. My my time, I have never had takeaway. So I’m glad to hear you say that.
Suz Shardlow 50:52
Yeah, and that is brilliant. I’ve made a lot of notes should be going back. Because I think what you say is true that you you really want to make a great design. And you look at all these websites, and you think I can never do that. But what’s missing is that you don’t think about why are they good? So that I think that’s my main takeaway from from your talk today is look at it with a critical eye and think about why it’s good. What you like about it.
Tracy Osborn 51:17
Yeah, it’s always fun being a critique or critic criticizing things. I think that’s a human nature, that people forget that they can use that as a skill, this idea of criticizing?
Suz Shardlow 51:28
Yeah, definitely. So I’ve got quite a few questions. I’m going to ask my question first, because the host prerogative. Yeah. So you put, I think it was designed funds that you showed us the website of, and I noticed that the title was rotated by 90 degrees clockwise was on it. I think it was something like, I can’t remember what it said. But it was this way around.
Tracy Osborn 51:51
Yeah. But they use like the subtitles of the page, they rotated them to kind of like, add a little more visual interest to it. They’re like that there’s, those are those kinds of things that like, give a user of website that’s like, Ooh, you know, like, it’s a little less readable, because it’s on the side, they did it because they’re like, Oh, we’re designers. This is interesting. This is different.
Suz Shardlow 52:11
So my question about that is accessibility. So what about folks who use this and things like that? Does it does it pick it up? Because obviously, you want to make sure you’re designing inclusive.
Tracy Osborn 52:20
I don’t know exactly how design fund implemented it, I’m sure it’s accessible, because I know that they care about that. In the underlying HTML, of course, it’s, it’s still horizontals. So as a screen reader goes through it, I’m sure the screen reader can still read it. So I think it’s just a visual field. I’ve it’s it’s turned. But that is a good point. That is something I want to say that’s more on the advanced side of design is thinking about, design really actually comes down to how people are using your website, and how well they can use your website and a piece of the population that you need to keep in mind are people who can’t nor use computers, the way we do, they might not be able to use a mouse, they might not be able to use a keyboard, they might not be they might be blind, they might not have a screen. And so you know, you can keep in mind screen readers. In general, if your HTML is formatted correctly, screen readers can handle it. And then that’s one of the things where you want to make sure your HTML is great. And then all those designs things you put into CSS and design only ways of displaying but I’m not I personally am not. An that’s not my specialty. I know there’s other people who are are specialists and accessible than I am. But it’s something I keep in mind. Just keep your HTML clean, mess with the design via CSS, and then screeners can handle it.
Suz Shardlow 53:40
Yeah, definitely, definitely a lot of things we can take from you. And also, maybe go and look at some accessibility tips and combine them. So we did have a lot of lively chat, when you talked about whitespace. And there was somebody in there who worked for a newspaper, and that newspaper was obsessed with filling every piece of without bursts and things for people to click on and spend their money. So somebody has asked, and they definitely see the merit of whitespace. But they’re not a fan of large sections of it at the sides. So what’s your take on it from a design point of view? Is it a rule of thumb in design, because they feel like it seems to take away from the design possibilities of the body content.
Tracy Osborn 54:24
So in general, without having design a look at in general whitespace is going to the UK, in general, you want to think about what your website needs to achieve. So for a typical SaaS application, you probably want someone to read the features, understand what’s going on. Get an idea for what the project is doing, and you want them to sign up. So especially for things like adding in what the company what that that SAS app is doing with those features, when there’s a lot of text on a page again, I’m talking in general, but there’s a lot of text in a page you’re trying to like, fill in all of those features and everything that they do and everything that like long paragraphs and whatnot, like too much content can be hard. That’s like, not good for usability. It’s not good for user experience, because the typical person sees those giant paragraphs of content, and they just skip it. And so there’s things about whitespace is also kind of like cutting your content down and making it easier to read. So your content, your cuts, cut your content down, make it easier, easier to read easier to understand, I improve the usability of your reader usability, readability user experience of your of reading those features. And then whitespace also allows the page people to see those features to kind of land on it as I rather than glazing over it as a whole. Again, it’s kind of I want to go back to like, savvy cow, because savvy cow has a lot of whitespace on there. And I think that’s a good example of each piece of information is concise, and has whitespace around it. So your eye can go like boom, there’s that one, there’s that one, there’s that one, they don’t blur together. And so that’s what whitespace can do is you separate those pieces of information easier to read. And then it’s not necessarily wasted space, because it’s actually more usable, it’s more readable. So, you know, sometimes designers can I agree, there are some places where signers go a little overboard actually took out some slides out of this, which I kind of regret. Where like, there’s Hacker News, why people know Hacker News is used at y combinator.com, where everything is kind of close together. And I’ll see people being like, Oh, I redesigned Hacker News, I made it better. And like almost always, they just added more whitespace. I would argue that Hacker News is very usable as is it doesn’t need any more whitespace. Designers love whitespace are always going to add whitespace. And there’s places where you could add too much. And when I say is like instead of looking at as like kind of wasted space? Or maybe you can add more information there kind of look at how well the website is doing. Are people able to see your features? Are they able to read it? Are they able to understand what’s going on, it might require a usability test, sitting down with someone and seeing them use your website and seeing if they can read those things. And whitespace is that tool you can use to improve how well people can use it. So that’s, that’s the best way for me to explain it, you know, maybe whitespace on the left and right side of the things, makes a sentence shorter, they maybe wraps two more lines. Because if a sentence has too many words in one line, it’s actually unreadable. And that’s kind of I don’t want to pitch my book by have to pitch my book because I have a whole section on this. About like readability for for content and all that applies to design. But whitespace is something he use as a technique for that.
Suz Shardlow 57:53
Yeah, yeah, definitely. So we do have a few more questions, but I want to respect your time as well. So maybe it’s fine.
Tracy Osborn 57:58
Like, if you want to do lightning round, I can try to go faster.
Suz Shardlow 58:04
Okay, well, this might be a quick one. Can you recommend any courses for beginner designers?
Tracy Osborn 58:09
Use my book, read my book? That’s great. Yeah, I mean, that’s, that’s why I wrote the book, right. So like the longer story longer a little bit longer, is that I find a lot of beginner design courses will, again, go into the theory that kind of assume that you’re becoming a full fledged designer. So they go theory first. And I find that doesn’t really work for someone who’s using it to implement their to complement their current skills, which is why my book, Smashing Magazine has a few articles, I think they have one that’s like the web developers guide to color, or articles aimed at people who are like developers wanting to learn design principles without learning the whole thing. So Smashing Magazine is also I think, a good resource for that.
Suz Shardlow 58:52
Yeah. And it’s very usable for beginners the way that because they curate all their arts very well, don’t make sure that they’re very usable for the target audience as well. So we’ve got somebody who’s saying they’ve got an artistic mind. But translating this to the web is difficult for them. Do you have a recommendation for how to translate artistic mentality into the web in the vein of better design sites? And I think what they’re trying to get out there is that artistic and this doesn’t necessarily mean the same as good design. And it doesn’t necessarily mean the same was good web design. So I think what they’re trying to say is how can they harness the skills that they’ve got and translate that into better design sites?
Tracy Osborn 59:33
Suz Shardlow 1:00:43
Yeah, yeah, definitely. I like the way that you kind of pointed out there that design and user experience have kind of two sides of the same coin, all. Which leads into the next question. So this person is scared, and I think a lot of us have this fear. They’re scared that their tasted might actually suck. So they’re looking at this website thinking is brilliant, it’s lovely. It’s my favorite website ever. And it’s the GoDaddy Website from like, 2006. So how do they know if what they like is actually good design and not just them picking out like the worst design aspects ever? Because that’s what their brain liked, and how do they develop good taste.
Tracy Osborn 1:01:21
So good taste, I guess, like, that’s where going to places where you know that the crowd, if you’re like, you want to like design for the crowd, there’s, it’s, there’s something to be said about designing for yourself, and you have a certain aesthetic that you love, and you’re designing for yourself, and that is totally okay. And I want you to develop that. But when you’re say you’re designing for other things for other people to use, it’s useful to know what the masses of people prefer. And that’s where going to those Design Collection websites, like awards with three W’s and site inspire, and dribble, you can see what people in general, consider good design. So you ignore your own design preferences, you can see what the masses of people prefer is good design. And you can hide pick out what people prefer from that, and help inform yourself. And so you know, that you can make the designs again, for those masses, I don’t know what it’s like step one is to design like other people and like step, maybe 10 is to then figure out your own aesthetic, you can apply this, those your preferences, and use that to become a better designer with your own. You applying those this, like the things that you prefer. But also knowing that you’re designing for other people you’re designing for the masses, and you know that you want to make things that most people find beautiful, you can combine those two, but to kind of train yourself, learning what other people find beautiful, usable, workable, good experiences, that’s when you can look at major, like any kind of website that has like a design team behind it, like GitHub, then you can pick out those decisions from there and kind of like, apply that to your own aesthetic and, and combine them to create your own like to kind of build up is a better taste. And I say better taste again, it’s fine is great. Everyone has their own aesthetic, instead of saying good taste, maybe just like designing for the masses, because you know, you want your thing to be used by most people.
Suz Shardlow 1:03:18
That’s true, because the masses don’t necessarily have tastes, do they?
Tracy Osborn 1:03:24
Like people in general, like these things. I know people don’t like following trends. I think following trends as a new designer is great. Because again, that’s step one, just follow other people are doing Be inspired from it, use that to be take a shortcut to become a better designer. And when you practice more, you iterate more and you build over design confidence, then you can kind of break out of that mold and do your own thing. But you kind of need to do what everyone else is doing at first.
Suz Shardlow 1:03:51
Yeah, it definitely relates back to the final point that you might want to talk about. Just going out there and practicing and iterating and just getting incrementally better. Each time. So So you talked about the fact that you have got, I want to say quarter of a century because that sounds really grand, doesn’t it? You’ve got over 25 years of experience are making
Tracy Osborn 1:04:11
websites when I was 12. And I was HTML frame website. So I say technically,
Suz Shardlow 1:04:16
it is so good, isn’t it? We all start by right clicking and viewing source and doing it that way. So So you talked about how you know looking at people’s websites, figuring out what you think works, what would work for your particular audience. Have you ever spoken to the decision makers behind these sites and pick their brains on how they arrived at their designs?
Tracy Osborn 1:04:42
It’s a good question. I think I am I have not mainly because I I think that would be a really fun process. I’ve never thought to do it though. I think it’s just because I’m an anxious I actually have a lot of social anxiety. And so like, you know if you’re at a conference though, and you find some Who’s the designer at this thing? That’d be a really great way to like start a conversation with them like, Hey, can you tell me about these design decisions you made? Can you talk to me about this? Like, why? Why did you do that decision? Like, is there data? Or was that just a guess? Like, that’s I can be a really good process. I personally have not done it that much. Actually, actually, with Derek, I talked to him a little bit about that, because he’s a, again, a part of tiny seed. And I’m using Simon Cowell as an example. So I have, you know, anyone, you know, designer, I think that’d be a really good process. I would say like, finding a designer works on like a big tech project like GitHub, a there’s a huge teams, they’re probably designers are probably working on small little things. But yeah, it definitely is useful to talk to designers see their thought process and whatnot, it just might be more efficient to kind of like, think critically about process like websites, yourself, as well. So use those two things in tandem.
Suz Shardlow 1:05:54
Yeah, definitely. I think if you do ever meet a designer, whose work you really admire, we asked them, I think, I think the answer would be quite revealing. Because they might say, well, I saw this other design, let’s just
Tracy Osborn 1:06:07
talk about fine artists where there’s like, or I guess, I’ve seen it with books where someone says, like, you know, a critiquer is looking at a book, and they’re like, oh, they mentioned this thing, because that’s a metaphor for this other thing, and blah, blah, blah. And then you talk to the author, and the author is just like, I just wanted that thing in there. Like there was no decision there. So you could read into it. But it’s still like, again, if you’re, the designer doesn’t necessarily like think about that login process. And that button color they didn’t like have the thing that you picked out of it. But you still learn from that you still kind of picked out a good decision doesn’t necessarily mean that the designer like because they didn’t think of it ahead of time doesn’t mean that it’s not so good design decision. And it’s still something that you’re learning from the design that maybe necessarily came as an accident.
Suz Shardlow 1:06:52
Yeah, yeah, I’m gonna wind up in a moment because we have gone a little bit over time, but that what you just said to me, reminded me of something and I’m digressing fully here. So Brian’s probably going to kill me afterwards. But yeah, sorry, Brian. It’s a good example. So the poet Ted Hughes, the very famous poets that he uses were to Sylvia Plath. They had some children and his daughter went to school. And they were studying Ted Hughes’s poems, because like, everyone saw these tattoos at school, don’t they? And she came home and said, you know, this is what you meant when you get this poem, you know, nothing like that. So yes, you can definitely interpret an artist’s work. But it’s not necessarily what they meant at the time. And there are no new ideas, after all, are they? So you mentioned that your book is going to be published again in hardcopy in June? So congratulations. Thank you. Yeah. I was just wondering, folks are very keen to get hold of it. Now. Is the e book still available at the moment? Or do they have
Tracy Osborn 1:07:49
it is not because it’s been re it’s there, the content is largely the same, but there is some changes. So it’s, so the same preorder link with no surge. And that’s just next month, so the preorder won’t be that long. I think they have ebook versions here. So it’s like paper. It’s like hardcover and ebook and whatnot. And feel free to send me a message if you have any issues, no searches website and I can bug them myself.
Suz Shardlow 1:08:12
So yeah, you start June and it feels really far away. But actually, they know
Tracy Osborn 1:08:14
Suz Shardlow 1:08:19
Okay. Well, thank you so much, Tracy, for joining us today and giving up your time. Yeah.
Tracy Osborn 1:08:23
Thanks for having me.