Design for Non-Designers by Tracy Osborn

Speaker 1: Come on.

Speaker 2: Like we said, I am Tracy. I'm Lime Daring on Twitter. A common mistake people say, Lime Darling. I'm not Lime Darling. I'm Lime Daring. This happens every time. So I put it in front. So, first off, a little bit about me and my journey. Some of you might know me. I've spoken at uh previous Django Cons about the process of teaching myself how to code. And this is the sites that I ran I was running for about seven years and long story short, I was a designer with no programming experience and wanted to build a startup. I ended up learning a little bit of Django, launched this little website This little website suddenly started becoming like larger, not necessarily very big, but larger than before. I turned to a startup and it's been one of the most fulfilling things I've ever done in my life

Speaker 2: like learning how to code, learning how to um to do Django, it's been wonderful. Over that process of teaching myself how to code while building this website I started thinking like, why like I'll figure something out and I'll be like, why was it taught that way when it could have been taught this way, especially as a designer? So that's where the book series came about. So I built HelloWeb App to teach programming or web app development at least to non-programmers, to designers. I like my books a lot. I designed them, I self-published them. The Django community and the Python community has been so wonderful. My second book last year's DjangoCon, I was Fundraising Kickstarter for my second book. Everyone's an awesome. So thank you everyone and Django for supporting me in this journey.

Speaker 2: But as I've been working on these books, teaching programming, say, to designers, I've also been thinking about ways that I could teach design to programmers. Because that's my background. I have an A degree in art. And I did graphic design. I worked as a web designer for a long time. And the same thing. I started looking at program uh excuse me tutorials teaching design to programmers and the same thing as before. I was like, why was it taught? Why is it taught this way When I clearly think it should be taught a different way. Why? How can I teach design to people who have a programming background makes more sense than say some of these other tutorials exist So by design I don't mean this is crazy. Design the world of design, just like programming, the world of design, there are so many different fields within design.

Speaker 2: UI design, UX design, visual design. I simply mean design in that we will helping you make an interface that works well Because at some point in your career as a, you know, when you're programming or building open source projects, you'll probably at some point need to create something that other people will use. You know, a homepage for your open source project. So I want to be here to help you feel more comfortable jumping in and doing design. I know a lot of people say, oh, I need to go find a designer to help me with my project, but that was like me when I was learning how to program. I was like, oh I need to go find a co-founder for my project. I want to help you just be more comfortable working on design your own. And some of the things that really give me pet

Speaker 2: peeves, we're not going to talk about here in this talk Not gonna talk the golem ratio. That is, I don't know why I keep showing up in beginner design books. Um not gonna talk about the pieces and parts of typography. I know there's a typography talk, I think, tomorrow, and that'll be awesome. Um I'm gonna bypass that for now. I just want to talk to you about creating better, more effective designs So first and foremost, let's just talk about the visual stuff. And the number one thing to remember if you're becoming a designer, or excuse me, not becoming a designer, but wanting to do design is to simply cut down on clutter. So for example, great example of the most like crazy cluttery website.

Speaker 2: The fastest way to a better design is to cut down on clutter. So for example, I built this little widget And you know, it's okay. And we're going to take some design principles, apply it to this widget, and see how things slowly improve this little widget that I built and make it a better design. So first the grid. You might already know about the grid because grids show up in things like Bootstrap. Just think of the grid like adding a grid to something as simply lining things up Because pixel differences are noticed. Like when something is like a little bit offset from something else, those pixel differences can add to a sense of clutter. So instead of thinking well you're like working on a design project

Speaker 2: like oh my gosh I need to line everything up. Like I love shortcuts and one of my again pet peeves is when people say don't use bootstrap everyone's using bootstrap Use Bootstrap, seriously. Like it has all these shortcuts. It's gonna make your life so much easier because it has a grid system built in. I love these shortcuts. I love like trying to use things, I use bootstrap all of my stuff. Use things that like bootstrap you, bootstrap your design, make it better So to see lining things up in action, add this little widget. And we just simply set up columns on the left and right side, lining things up. And you can already see That's looking a little bit cleaner.

Speaker 2: So next up, color. Again, big overarching principles. Color principles. Keep your colors complementary, making them work kind of well with each other. Get into a second what that means But a good rule of thumb is to use mostly neutrals and use a bright color to help things stand out. Now there is so much to say about color. And this article on Smashing Magazine is a particularly good one. What simple web developers guide to color. Like what I went to school is a whole quarter simply on color And it's kind of ridiculous. There's so much to learn and understand terms of like complementary colors, etc. and so forth. Can't do that here. But I love, again, shortcuts. So this is my favorite shortcut. And I use this for everything.

Speaker 2: I use this I use this for the color palette for my books, for Hello Web App. I use this for the color palette for Wedding Lovely Go to colorlovers. com with a you. I just moved to Canada, so I'm like, yeah, you 's Colorlovers. com, you can search for color palettes that other people have submitted and then people can vote on them. So if you search by, you know, top most loved of all time You can find color palettes that are guaranteed to be complementary, to have a large range of colors, and you can scroll through here and find something that you think might work with your project and try it out rather than say starting from scratch. So back to this little widget. So you went to color lovers, started pulling in some color palettes and applying it to this widget and just testing things out.

Speaker 2: And sometimes they might not work. And you can try a bunch of different color palettes until something does. But it's so much better than trying to like jump into some color program and like on that little palette and trying to pick and choose what works Might as well just go to the place where you can find uh colors that already work well with each other and use those instead. And oh quick note about this one. And you don't don't feel like scared to like update the color slightly. The download button on here, you can't really tell on the screen, but it's a darker red than the one that's in the color palette. So you can still play around But this gives you a really good shortcut. Next up, fonts. Again, principles. Keep the number of fonts low.

Speaker 2: Just in terms of clutter, just the more different types of fonts out there, it adds this feeling of clutter. So two different fonts is a good rule of thumb. Try to use display fonts sparingly. By display fonts, I mean everything that's in the back here. Some things I feel very 90s. Those are also very cluttery, so try to avoid using them. And if you need to add more differentiation, whatever you're designing. You can add folding, you can uh make things uppercase, you can add italics, you can use that to add differentiation rather than say bring in another uh uh another font. So again, shortcuts, love shortcuts. So say Google Fonts. I love Google Fonts. I use it for everything as well. But if you go on there, there's like 200 something fonts and you're scrolling through and it's really overwhelming.

Speaker 2: It's much easier to go to these websites like Beautiful WebType or TypeWolf, which curate the best Google Fonts So instead of going through a list of say 200 fonts, you can go onto one of these sites and just have 20 to choose from, and you're guaranteed to be working with a well-designed, well-loved font. So back to the widget. And if you update the font, this is using a serif font and a sans serif font. Serif fonts just means that a little widget on the in the type And probably can learn more about that in the typography clocks uh talk tomorrow. But essentially this is two different fonts. And we did some differentiation. The download button is all caps. The Input form is lowercase.

Speaker 2: We have some italics in there, but it's looking a little bit cleaner and well put together. Last principle is white space. Whitespace is the ultimate clutter reducer. I always laughed. Because in Hacker News, that we all know and love, um every hmm three to six months there's always something that pops in Hacker News say, hey everyone, I'm a designer, I redesigned Hacker News. And every single time, the main thing they do is just add white space. Because I have one thinks that Hacker News is super squashed. I particularly like this one. A little easier to read But whitespace isn't just like a personal feeling, like, hey, I want to make this. Oh, excuse me, jumping ahead. One more example is

Speaker 2: the New York Times redesign. So the New York Times as a as a newspaper has a lot of information. You can't just like blow it up with white space. But with this example, left is before and right is after. The right is a little bit less cluttered feeling. And the main one of the main things I did to make it feel less cluttery is simply opened up the columns in between the text a little bit more, gave it just a little bit more breathing room, made a big impact And white space is kind of a huge trend right now, which is a little funny. Because if you go onto these like top design website sites, I took a random screenshot and every single one of them has like acres of white space So it's a huge trend and might go a little bit too far, but

Speaker 2: not just a trend, adding white space can also improve your conversion rate. So in this example between these two tables, Uh the left table um it just got moved a little bit farther down. A little bit more white space was added in between uh the two tables. And by doing this They saw a 20% improvement in engagement, 5% boost in products added to cart, and a 33% improvement in customers continuing on through purchase. So reducing clutter and using white space can affect your bottom line. So back to a little widget. And we just let it breathe a little bit more. Added some space around the edges, also normalize the spacing in between the blocks, between the butt and the form, form and content.

Speaker 2: Added some more line height between the paragraphs of content, so the headline and the content We can see that it's already looking pretty good. At least a lot better than we were before So in terms of visual design, the best thing you can do is just to simply think about how you can reduce clutter in your design. And you can reduce clutter by keeping the number of fonts and colors low, adding white space, and lining things up. Like clean designs are really in right now. Uh and just aim for a clean design, you'll get pretty far But you can't just talk about design without talking about user experience. This is arguably more important, uh not

Speaker 2: as arguably, I believe it wholeheartedly, um how stuff works, whatever you design, how it works Is better is more important than how it looks. And whenever you're designing something, just keep this in mind. Keep in mind what's the most important action. What do you want your users to do? with your design and then focus on making that action easy to find and use. I mean that's for example just a short little example. That's the reason why widgets and forms and whatnot have a brighter color for the button. Because you want to have that button to be easy to see, use, and click. I use that on my homepage for a Hello Web App, and that's why I get the books. The most important part of my design is a bright green.

Speaker 2: But also on other websites. You know, this one has a pretty gray drive background, but it has a bright blue button. But not just for landing pages. You can see this in work in other page other websites like Wealthfront's engineering blog. You can argue that they have this blog specifically so they can bring in more engineers to their company because they talk about engineering topics. I probably hope something comes over resource engineering proper engineering topics and think, hey, this place looks like a good place to work. And then bright green on the right, they have that bright green blue, hey, do you want to work here button So you can say also again so much about user experience. Just keep that in mind. Make sure that your goals are easy in the finding use.

Speaker 2: Make sure you have analytics. Make sure you're looking at how well your design is working If you launch a form or a website or whatnot, pay attention to say, like figure out a success metric if it's someone moving on to the next page or submitting a form and see what you can do over time to make that better. Next up, content. Uh this is a huge part about web design. A lot of people forget about this. I see a lot of people who uh launch their website and they want to tell the essay of their life on the about page. But the thing is like large paragraphs of content are a sign of clutter. Uh no one like you there's people who read on the web, but it's actually uh

Speaker 2: people are more likely to be scanning through your article or your whatever your content looking for words and if they see giant paragraphs of content they're more likely to leave than read. So when it comes, so in general when it comes to content, less is more. Try to cut down, simplify, break down your words. I think it's like, good principle is like two to three sentences per paragraph. Big paragraphs are a sign of clutter. And if you can't simplify your content, try to break into bullets. This is a tactic I like to use a lot in my content. So on the left, this paragraph of content is arguably kind of hard to use. You can read it by going line by line, but you can improve the readability by breaking into bullets, and then you have a visual point

Speaker 2: to skip between as someone again assuming that someone's scanning and there probably are they can jump between the individual points in that paragraph But we can improve readability by adding some folding. So now we've like not only broken up into points, we added folding over around the most important parts. of of those paragraphs. So again that person who is scanning can read the bullet parts and then see whether they want to read further And then we also just talked about white space. And you can further improve readability by adding some white space. Alright, so read the docs. I want to give a real life example of something that I would test updating.

Speaker 2: I love to look at designs and see, you know, if I was on this or if Eric Hulsher came to me and said, Hey Tracy, what do you think of this homepage? Uh, which I don't think he will. He knows I do this. Like what would you what would you test? What would you try to change? Um, and see if this improves uh conversion rate. So I talked about making sure that you have an action and making sure that action is easy to find and use. And this website is homepage, it's very gray. I noticed that there is a hover state over the let's do this button that's bright green. So that was some that is something that I would test. I would test giving the eye someplace to jump to this and that basically says like hey person business homepage this is the most important part of this page Now you could you know try making the sign

Speaker 2: -up button bright green or or something, but giving the eye like a path, having those things easy to find and use, gives someone a path of what to like look at first But then we just started talking about content and that content is this homepage is very beautiful. And that content looks very nice at it far away. But I was wondering, you know, how many people actually do read this? And I would also test breaking that up into bullets. So this is arguably not as pretty as that block of paragraph from before. But this is something that would test. And see if taking that paragraph, breaking the bullets, making it easier for people to read those features that are on the Read in the Box homepage, that would be something I would try and see about updating.

Speaker 2: But I don't want to stop at just content. I want to talk a little bit about headlines as well. Because headlines are very important in whatever you're designing. Say a blog post or a home page or a landing page or whatnot. The thing at the top. In general, it's better to talk benefits, not details. I'll give you an example of that in a second. Just like content though, make sure your headlines are not too long. And then try to use natural and friendly language. Talk like a human, not a robot. That goes into content in general. So, this is technically what my books are about. My books are an introduction to building web apps in Python using uh web building web apps using Python in Django. But this is boring. I mean it's very descriptive. It says exactly what my books are about.

Speaker 2: But this makes more sense to a reader. Someone coming to my website. This tells them exactly what the benefit is if they read my books. And again, this is not just like personal feeling like, hey, this would be great to do. This headline changes, the thing that someone sees first on your website, updating it. To be more about benefits rather than details can improve your conversion rate. And this one is simply they updated their headline and then improved their conversions by 52. 80% So we're not done with the widget. Now you might notice that the headline is kind of boring, the content is kind of long for just a small little widget. We can simplify it, make it easier, make it more human, you know, shorten the headline, make it more about benefits, shorten the content, add some folding of the

Speaker 2: important part of that sentence Change the input form. So it's more human. Instead of just saying email address, it says add your email here. And then the button changes from just a simple download to something again a little bit more like you're talking to someone saying send me free info. So in this journey, we have gone from here to here. So you can see how small little changes, Google principles, can all work together to make something look nicer and easier to use. All right, quick note about images and imagery. Uh when I first gave this talk, I didn't have this section, and this is one of the things that people usually ask me most about. In general, it's nice to add images to your website, but you can do so much with just text

Speaker 2: and say a screenshot and boxes and lines. You don't necessarily have to have images. And using a stock photo where someone's just like people can pick that out immediately. And generally, pay attention to file size. That's where also images can screw you up. And making sure you have retina quality images is also something I usually forget myself, as I have an old MacBook error. But, you know, like images can improve uh how delightful per se a website could be. So in this example, this is stripe. And I really like their little icons in it. And those little icons, they do help out. And if you you know, I want to I'm not going to say that you don't need images, but they can help out.

Speaker 2: And you know, these ones are pretty simple, and I'll get into where you can buy them in just a second. If you want like a big image in the background that does not look like a stock photo, uh unsplash. com is my favorite. Uh they say They upload beautiful, kind of hipster-y images, but they're really beautiful. And they say do it whatever, do with what you want with them. And they're just beautiful, really big, really awesome images. Photopin is another resource I use for blogging that searches for Creative Commons images in Flickr, brings them up for you can use. And then this is where I get yelled at by by designers. If you want icons like the one on Stripe and you're launching your first project, you don't have a lot of budget

Speaker 2: I think it's totally okay to use something like Fiverr and get something cheap and fast. Now as a designer, like Once you have budget and you have the ability to do so, a professionally designed logo image uh icons will be way better than anything you can get on these sites, um, where you can pay very little to have uh to get images done really quickly for you. But if you're just starting out, I think this is a great start. And again, another example of how images can help out. My friends of mine do App Canary and they're in Toronto. And they worked with a local designer, again, pretty cheap, to just create these little illustrations for their website. And this is just a work

Speaker 2: , again, local designer made something and they turned their website from just simply, you know, text, images, a screenshot. This adds a little bit more delight to their homepage. So don't forget those local designers you can work with too. They're probably not as expensive as, say, a big professional. Alright, a little bit about philosophy. If you're sitting down and working on a design project, and uh you sweep your desk away and you pull out your piece of paper and your pen and you're just gonna start sketching something. Starting from scratch, with nothing to inspire you, nothing Just just sitting down and trying to pull it out of your brain is a lot like trying to program something without the use of Google or Stack Overflow.

Speaker 2: This doesn't happen. This is like it's giving yourself like a big shot in the foot. Like you're you're hindering yourself My books would not be I mean I'm not gonna say like they're the best design in the whole world. I'm pretty proud of them though and I could not have made the design I did without the inspiration of a Book of Hearts book I was able to look at them and see what they did and get inspired, and that influenced my design. I didn't steal anything, but being influenced is not only good for you, it's encouraged So, if you're working on a design project, again, building a form, widget, etc. there's a lot of websites out there that showcase good design that you can go to and just look through and see if you can find things that inspire you and give you ideas. There are Site Inspire, Unmatched Style, CSS

Speaker 2: Mania. There's so many of these websites out there that just collect good design. And whenever you find a design that you particularly like Try to pick out the things that are doing well. So for example, this Slack homepage, you know, lots of white space. The form has a dark background. The button is bright green. It's easy to clickable. And it has some bolding and the content to pull out those information. important bit bits. So when you find a design that's working well or even look at your competitor's site, picking out the things that you think is working well is going to help train your design eye and make it easier for you to pull out you do better designs on your own. And this is kind of funny because it's totally a meme than design And then

Speaker 2: Ivanski comes along and steals it. There's books on this. Like seriously, designers don't do anything from scratch. We all work off each other. And last bit, I want to do some reinsurance. And tell you how my process usually go. So sitting down working on a new design project, first thing to do is collect inspiration, like I just said. And this is my feely. And I just go through and I I have all these sites all collecting into one folder so I can very quickly go through good designs and get inspired and pick out the things I like and want to implement in my own design. Now when it comes to sketching though This is this person is showing off. Like if you are like trying to sketch and keep ideas down, don't feel like you have to think something like this.

Speaker 2: This is actually the sketches I did for the Hello Web App homepage. Again, like just really quick boxes, lines, etc. just helping me remember layouts and ideas that I had. So don't feel like you have to be the most amazing sketcher. Just do as much as you can to get your ideas down. And then the second thing I want to say is that you can, I particularly like mock-ups because it's easy to change and try different ideas. Your mock-ups don't have to be pixel perfect. They don't have to be beautiful. Like this is a layout I did for my husband for an idea he had. And all we did was trying to figure out with, you know, this is not gonna be black and white, it's not gonna use us colors that allowed us to figure out a layout and move things around and see essentially how the way it left website would be used.

Speaker 2: Not all mock-ups can be have to look like this. And then build it, but that's a whole other core. So again reinsurance. Every time, this is seriously, every single time I work on design I'm a professional graph designer. Um I have a graph design degree. This is what happens. I feel like like the ultimate imposter syndrome. I feel like such a horrible designer every single time I start from scratch. And if you are sitting down and you're working on your work on a design project and you're going, ah, I'm such a bad designer, I'm such a beginner, you're not a designer. Everyone goes through this. It just simply means that you are a designer. It's kind of depressing, but sorry. But hopefully that reassures some of you.

Speaker 2: Alright, this is only the starting point. There's so much to be said that I can only do in a short period of time. Remember to view if when you're working on something visually, focus on clutter and reduce visual clutter. And you can do that by keeping the colors and fonts low, adding white space, lining things up, and keeping your content short, easy as kid. Make sure that your goal, whatever you're designing, whatever your uh you want your action to be, make sure that you're focusing on making it easy to find easy to find and use. Keep your content short, simple, and to the point. And practice, practice, practice. This will be the topic of a third book, hopefully. And if you want to be on a dedicated mailing list just for that book, that's helloweb.

Speaker 2: com slash webmash design. Otherwise, I really hope this helps you out. Thank you.

Speaker 3: Hey Tracy, thanks for the wonderful talk.

Speaker 2: Yay.

Speaker 3: My question is, like all of these separate topics make sense on their own. But what happens to me very often is okay I create a some kind of design and then I see it doesn't look good but it's just overwhelming. I don't know where to start. Like is it the font? Is it the colors? Is it the spacing. Do you have any advice on that? Like how to approach when you see it's like something's not working but you have no idea what what it is? Uh

Speaker 2: one thing I really like to do with design is that I mean design would necessarily by design uh is very qualitative and so it's really hard to pick out what's working and what's not. Um so try to make it as quantitative as possible. So look at your design, try to hook it up to analytics and see how people are actually using it and see if then you can start picking out maybe some things to change. Maybe one page is working in another and you can look at what's different. But then you can also change a headline or and see if that affects how people use it By tying changes that you make or decisions you make to analytics and data, it can help a lot. So that's number one. And that kind of relies on having some amount of traffic, which is hard. Number two, I don't really talk about usability testing here, but simply this is so hard to ask someone for feedback and see what other people say.

Speaker 2: I do this in programming. I get in this bubble and it's really hard to like figure out what's working and what's not. And just like bringing to someone else and seeing that they s may maybe they think it's fine. Maybe it's just you. Maybe because I do that. I'm like, ah it's horrible. And someone's like, what are you talking about Or they start point pointing out what they say, what they think. And you have to be careful because someone people can be too nice and be like, oh it's fine. Um or they could be like everything is horrible not give you any good feedback. But just simply by having someone look at those designs can help you, you know, get more information, which is important, than just kind of like going, I don't know what's going on. It's very overwhelming Hope that helps.

Speaker 3: Thanks.

Speaker 2: Yeah. What is this? Sorry.

Speaker 4: Hi. What are some differences, if any, uh between desktop websites and mobile sites?

Speaker 2: Ah. That's another differences between desktop and mobile. That's why I also like Bootstrap. Seriously, I keep s I saw something like someone wrote an article saying how horrible Bootstrap is But like Bootstrap gives you a grid and Bootstrap gives you the ability to do responsive design, which is awesome. Um, because a responsive design, uh making sure your website works in browser is really important, or excuse me, in the mobile. In terms of differences, uh I mean that's all gonna depend on the website uh and what information sorry noises uh information is there and um Very long talk, I guess I want to say. Yeah. I mean just like A, make sure you have a mobile

Speaker 2: site B again look at analytics and make sure like if your website is performing so like uh at one point and you look at like Google Analytics and look at your mobile and like it's way worse. That could be a good indicator that something is wrong And then you should update something. In general, mobile sites have to be simpler and less elements because they're smaller. But there's also a lot of good books. I think there's a whole mobile design book that's on by a book apart that's really good Good. But yeah, mobile sites, very important. Yeah, thanks.

Speaker 5: I'm going to use a four-letter word here. Okay. Menu.

Speaker 2: Yeah.

Speaker 5: Uh what's your thoughts on uh menu design in terms of top, left side, right side, number of levels of indentation, etc. ?

Speaker 2: Um There's lots of replacement menu and for anyone who is say might think to themselves that they are new to design, I say follow the rules, don't break them So see what other websites, competitors or other websites you want to emulate, see what they're doing, and I say follow that format. Don't try to create a new format. I think usually, I mean all depends on the menu, how many levels are there. But if what you're designing seems like it really works well with a top-level menu and that's what people in your space generally are doing. I say go with it. Don't try to to do something new or revolutionary, at least in the beginning, because you can always update it later. Yeah, that's hopefully that helps.

Speaker 5: Yeah, thank you.

Speaker 6: Thank you. Um I'm also a new ex-designer and um it's great that you pointed out all the basics I'm gonna be really interested about clients from hell and how you will deal with that in your process

Speaker 2: Uh there's a how to do with clients in hell. There's a reason why I don't do freelance design anymore. I'm just like can't handle it. Generally when it comes to clients, uh in general, this is going to go really general, is communication is super important and that's usually where a lot of client problems happen if you're working with someone else and that's actually not just clients but say coworkers as well. Um like they can make your life hell uh because they're not explaining what they need And then you also aren't doing a good exp explanation of why things are better or why th decisions you made would be good. I mean you were jumping into a freelance design. I don't have a lot of feedback because I just left that rule. Because I didn't I was working with one person and they

Speaker 2: very much insisted on a design which was going to be terrible and they kept like making changes to themselves and eventually I just checked out. And they never launched it, thank goodness. But um it was a very frustrating process and I was like, you know what, I'm gonna build a website for myself instead. Uh so I don't have a lot of good feedback on that. Um but in general I find that a lot of people are missing in communication. And that's what I would probably work on first if I had a client that was causing problems. Just try to be really, really clear about the benefits and try to win them over to my side.

Speaker 7: Hey. Um so the way that I learn most um programming related stuff is go find a good tutorial and go through that and then after that. Just kind of read the docs. Um so until your book comes out, have you have you found any uh things like that where it's kind of a guided Here's a concept, now you try it. Now here's the next concept, now you try it. Like a way to kind of practice coming in with kind of no design, formal design.

Speaker 2: That is why I'm writing the book. Um, I mean there's a lot of some art articles out there that my big thing about design the way it's taught And it's the same thing with programmers, is that designers are teaching design as if they at the same level that they are. Um and I feel like that's again also programming, that you don't teach best practices. You have to teach the shortcuts And I don't see that a lot in the design world because this designer is teaching best practices to design stuff. Smashing magazine, like that web developers' guide to color Um they have other articles on there. They do a lot, so I think there's some that are not great, but they have a lot of good things too. Okay. A lot of good writing on on web design in general. And a book apart Or excuse me, uh, List Apart has lots of great very high-level articles.

Speaker 2: Um the same people who do a book apart. Uh are good to read to understand what other people are doing. Um those ones are a little advanced, I'd say.

Speaker 7: Thanks.

Speaker 2: One more question. Ta-da, you.

Speaker 8: Thanks, Tracy. What's your thoughts on mobile first design as opposed to let's go with a good old desktop for my website and then figure out how to break that down for mobile

Speaker 2: Yeah, um so mobile first design, that's actually the title of the Book Apart book. That's really excellent. Um I am stuck in my old ways and I always do desktop first And I'm not saying that's a great thing. Um it just works best for me. Uh the way mobile first, when you're designing for small screens, the the reason why it's so great is that you are working with less information, you have less You have less space to fool around. You have to be more concise. And that applies to all these principles you did for big design. So if you start small and have to create your stuff from scratch on a small screen that could make your larger screen when you move it over like cleaner and easier to read and whatnot. So that's where mobile affairs can help out a lot. I encourage people to try it out and see if that works for them because it all depends on the

Speaker 2: first process. I'm an old fetty duddy that like the new world of responsive design still throws me off. And I keep doing desk first.

Speaker 8: All right, thank you so much, Tracy.

Speaker 2: Thanks, everyone He is