 All right, hi, everyone. Thank you for coming to the Design for Non-Designers session. OK, first off, hi. I'm Tracy. If you want to follow me on Twitter, common mistake. People think I'm Lyme darling, but I'm actually Lyme daring. And afterwards, I will tweet out slides and all the information I put up there. And then you can take a look on your free time at the Lyme darling account, which I also own. And I tried to make it really obvious that that's not the one you should go to. All right, so a little bit about my background. I, about seven years ago, long story short, taught myself how to do Python. I launched this website called Wedding Lovely. I was working on it for my startup for the last seven years. And that was super awesome for my first Python project to be able to turn into a startup, making my full-time job. But during that process, as I taught myself Python, I kept thinking, why is Python taught this way, when I really think it should be taught this way? So this is my book series called Hello Web App. I launched this about a year and a half ago. And they're really awesome. They're teaching, basically, programming to non-programmers. So if you know of anyone who is jumping into Django, quick pitch for my books, they're awesome. But during this process of writing a book, teaching programming to non-programmers, my background is in design. I started thinking about, how do you teach design to non-designers? So quick spoiler, that's probably not my third book, it's not out yet. But I'm working on it, and this is part of this talk. So if I, any kind of suggestions or feedback you have about this talk, please give it to me, because I am working, at least in my head, on this third book. And when I say design, I don't mean like something as super intimidating as this, because the field design is gigantic and there's always like little bubbles everywhere if it's in, there's visual design, and UX design, and UI design. And UX, I guess, well, this is our industrial design. Human factors, everything, there's lots of different like buckets that designers can fit into. And we only have 45 minutes. So what I mean by design, and what I wanna teach, is just simple guidelines that help you create a new face that works well. Because even if you're not jumping into being a designer per se, probably sometime in your career, you're gonna have to build a website for an open source project that you've launched and you want a website so people can know how to download it, launch something like this, or like the node website. And I'm hoping that my thing with teaching people how to program, I wanna teach designers how to program, is I want people to be able to do at least a little bit themselves. And it's the same thing as a design, because you don't have to go out and find a designer when you wanna launch a website. I wanna encourage as many people as possible to start working on design themselves without per se becoming a designer. And this is one of my biggest pet peeves and one of the main reasons why I'm giving this talk is I hate the idea that the golden ratio in beginner design books always shows up and I'm like, that does not need to be in a beginner design book. You don't need to know the pieces and parts of typography, which a lot of design books go into, like typography is really cool, but that's like one of our 201 type level stuff. I just wanna talk about how can we create better, more effective designs if you don't have a design background and the tips and tricks to help you get there faster. So, main thing to think about, and I'm just gonna focus on, just to start out with, start to just focus on the visual stuff. The main thing to think about is clutter. So by clutter, I mean, which is like this, which could be like the best example of the most cluttery website in the entire world. They've improved it now, but you can see what I mean by clutter, this is crazy. And the fastest way to become a better visual designer, to make better designs is to start cutting down on clutter. So to illustrate this, I have this little widget and the widget's okay, but it looks a little funky, it looks a little unprofessional and we're gonna go through some basic design principles, apply them to this widget and kind of start improving the design. So, first design principle is the grid. You might have heard of the grid, shows up a lot in terms of web design. Instead of just calling it the grid, think of the grid as just lining things up because pixel differences, like things a little bit to the left or a little bit to the right, those things are definitely noticed even on a subconscious level and adds to visual clutter. So there's always that like talk, or that like joke about the designer and the developer that work together and the designer builds a pixel perfect mockup and they give it to the developer and the developer implements it and the designer goes, no, that's like two pixels off and then the developer is like, what, two pixels, why does that matter? It does matter, I say as a designer because those pixel differences can add to clutter. So when you're working on web design, I am a huge fan of shortcuts and not starting things from scratch. Like especially as a beginner designer use as many shortcuts as possible. So there's a lot of frameworks out there like Bootstrap or our foundation that come with a grid within the framework. I love Bootstrap. I use Bootstrap myself for all of my projects and Bootstrap is really awesome because it comes with that grid. I don't have to worry about it. So back to this little widget and we apply, we just start lining things up. So we just normalize the spacing in between the elements like on the left and right side. You know, just gave everything a vertical column that's connected to. And already it's starting to look a little bit less cluttery. All right, next up, color, color principles. So the big overarching things to know about color because this is a huge topic. In general, it's best to keep your colors complementary. I'll get into what I mean about that in a second. But the biggest tip when it comes to color just to start out with is to use mostly neutrals and it's great to use a brighter color for highlights or important bits. So there's a lot of articles on the web that helps out because this is something that you can do so much time on and I particularly like the Smashing Magazine article, Simple Web Developers Guide to Color. And it goes into all the principles and talks about what it means by complementary colors and all that kind of stuff. I took a whole quarter when it comes to color theory and cut out little boxes that line colors up and it's ridiculous. So you can deep dive into color but I want to talk a little bit about shortcuts. And this is my favorite shortcut when it comes to color. It's to go to a website called Color Lovers. Color with a U. I just moved to Canada so I'm getting used to this U thing. So go to Color Lovers and I do this for my books. I do this for every website that I launch. Color Lovers is a place where people can submit color palettes and people can vote on those color palettes. So if you go to most loved color palettes of all time or whatever time frame that you want, you'll see really cool color palettes and it makes it way easier than say starting to build your color palette or whatever you're designing or trying to build those colors in a scratch. So it's easier to go here and just scroll through and find things that automatically work well together. So go back to this little widget and you can start pulling out those color palettes from Color Lovers, start applying it to the widget and just see if they can find things that work. And some things won't. You can just start playing around, adding some different colors and find and work through it until a color palette works. So for example, this one, don't be afraid to lighten or darken colors as needed. The download button doesn't really show up really well on the screen but the download button is darker than that red in the top left. So these things do have flexibility but it's an awesome shortcut. So you don't have to start building color palettes from scratch and believe me, I don't for anything and I have a whole on the graphic design degree. All right, next principle is fonts. All right, overarching principles again. When it comes to fonts for your website, generally stick to no more than two fonts per whatever you're designing because the more fonts there is, the more clutter there is. And speaking of clutter, display fonts like this, those are like super, like generally really cluttery. You can use them in your designs, that's totally great. But again, as a rule of thumb, it's easier to work with cleaner, more professional fonts that's gonna make your web designs look better. Generally avoid display fonts. And if you want a little bit more differentiation within your text, you can use bolding, italics, you can make things uppercase, make things all lowercase. You can transform the two fonts that you have to give it more differentiation but it's easier or better than do multiple different kinds of fonts per website. But again, shortcuts. I love using Google Fonts and Google Fonts has like hundreds of fonts and that gets really overwhelming because you go on there and you're scrolling through and seeing a billion fonts and be like, which one do I choose? So there's websites like beautiful web type which is hellohappy.org slash beautiful dash web dash type that just showcases Google web fonts in like a paragraph. So you can see the fonts, you know, working and it's easier to choose which one works for you. And sometimes it's like two fonts that work particularly well together. There's also type wolf, it has a few articles on this or it's a curated collection of 30 best Google Fonts. So instead of going into this long list of like 200 plus whatever fonts of Google web fonts, you can go here, figure out what other people are saying are the best fonts and choose from there. Reducing choice I think is awesome makes things so much easier. So back to that little widget which now you can see has quite a few different fonts all within it. And we're gonna update it to just two. There's a sans serif and a serif font and if you don't know what that means just means sans serif has a little bits at the end of the letters. But it's just two fonts and there's some differentiation in terms of how it's displayed. There's italics in the form. There's uppercase in the button. It's tracked out a little bit but really this is just two fonts and it's looking a little bit more clean. All right, last but not least is white space and white space is the ultimate clutter reducer. Pretty much the main thing that GoDaddy website was missing. I always laugh because hacker news is kind of severely lacking in white space and every three months or so someone posts on hacker news and I redesign hacker news and every time these redesigns all include more white space because designers go on this website and they go, ah, everything is cluttered. That one looks particularly nice. But for other websites, adding white space can make a big difference. For example, this redesign in the New York Times website, like you can't add a lot of white space here because it's very much a newspaper website but the before is on the left and after is on the right and one of the biggest things that they did to kind of open it up and make it look a little less cluttery was adding a little bit more white space between the columns of text. White space is definitely a big trend right now so I went on to a top web design websites and took a random screenshot and every single one of these is like acres of white space. So it's a big trend but it also can drastically affect your bottom line, your conversion rate. So for example, in this study, someone just added a little bit more vertical space in between these tables. So before is on the left and after is on the right and that led to a 20% improvement engagement, 5% boost and products out of the cart and a 33% improvement to customers continuing on through purchase. So white space not just looks good but it can affect how many customers will go through and say pay for something on your website. That's a big deal. Back to the widget and we're just gonna open it up a little bit. So not only just adding some spacing around the edges of this widget but also adding some line, some spacing in between the individual lines of text. The spacing is also normalized in between the elements. So the same amount of spacing approximately between the button and the form, and the content, the content and the headline. So in general it comes to visual stuff. The main thing to remember is to look for ways to reduce clutter. And you can reduce clutter by keeping the number of fonts and colors low, adding white space and lining things up. Like clean design is definitely again also one of those trends that's going on right now but that clean design naturally reduces clutter and it's gonna lead to a better design overall. All right, next up, user experience because we can't just talk about visual stuff but the main thing that's actually the thing that's more important with how it looks is how it works. So whatever you're working on in terms of design whether it's a website, whether it's a landing page, if it's a form, it's a widget, try to think about when you're designing what's the most important action on that design and make that easy to find and use. And that's why in this widget we use a brighter button at the bottom. Like that's why the button's red. It stands out as because we want people to immediately see that download link and hopefully make it like super clickable. And that's why when you see a lot of websites that have these giant banners at the top, like for example, my website, the get the books button is a bright green. It's a little weird because there's two buttons. There's that free sample button and there's the get the books. But the get the books one, hopefully I want people to buy my books. Ergo, making it bright green, making it stand out, making it super clickable. And you can see that in lots of websites that do landing page design. For example, this one has a very neutral gray background, bright blue button. But it doesn't just have to be, say, landing pages. For example, the Wealthfront engineering blog, you can argue, they have this blog so they can track more people to come to, you know, random engineers come to their engineering blog, read about the Wealthfront, and then in the bottom right, there's this widget that says, hey, interested in what you see here? Apply for a job. And that's why that widget is bright green because they wanted to stand out around the rest of the content. So that's just using color to make things stand out. But generally, pay attention to your goals. I love using Google Analytics and seeing how things are working and start tweaking things to see if I can make things work better. Because as arguably more important than how things look, it's more important how things are working. And make sure that you're paying attention to what you're designing and how it's designed and used. And making sure that's easy to find and use. All right, next up, content. In general, content is also a big sign of clutter. And I find a lot of people who are building their first website or doing an about page or whatever they do, they have a tendency to write a lot of content, a lot of paragraphs of content. And that is very intimidating to a reader. People on the web just skim nowadays. And it just, I mean, it looks very cluttery. So if you have a lot of content, do the best you can to shorten it, make it simpler, make it more easy to read. And if you can't do that, I'm a big fan of breaking things into bullets. So for example, the left, you know, you can read that paragraph, you can go line by line in this paragraph, but it's a little easier to parse the individual parts of that paragraph by breaking it into bullets. We can further make it easier to read by adding some bolding. So the bolding is there because people on the web will skim, and this makes it easy for someone to just jump between the individual's paragraphs, see at a glance what that paragraph's about, and then read further if it interests them. But we can further increase readability by adding some white space. And that makes it even easier to read. So I'm a big fan of using this in a lot of content. You might notice in a lot of blog posts nowadays, in general, try to avoid doing paragraphs and paragraphs of content. Do you can't add bolding, add italics, add more spacing, add bullets to make it easier for someone to skim your content? So for a real life example, this is Read the Docs. We all probably know Read the Docs. Eric is a friend of mine, and I guess he kind of knows I do this. So in his design, this looks great. This is a beautiful website. But if he came to me and said, hey Tracy, how would you improve this website? The first thing I would do when I look at this is everything is gray, and there's not real good action. I don't know if the sign up button is the thing that he's really wanna throw people to, or he wants people to click. Let's do this button. I noticed that on hover, that let's do's button has a hover of green. I didn't add this, it's just a hover color. And so if I had this website and I wanted to test out improving it, which I'm a huge fan of testing, that's the first thing I would do, because add a bright color to this website, making that action form easy to find and use. But then you might also notice that there is a paragraph content there. And that paragraph content looks very beautiful, but how many people do you think are actually gonna be reading that line by line? So another thing I would test was taking that paragraph content. This is not necessarily as beautiful, but splitting into bullets, adding some bolding, making it easier to see those important parts of that value that Read the Docs gives. And see if this improves online, it improves people clicking through, improves people signing up for Read the Docs or starting, or adding their documentation. So you can see that there's a lot of opportunities pretty much everywhere to test and try out new things using these principles. So I'm gonna jump back into content and talk a little bit about headlines, because the actual paragraphs of content are not just the most important part, but also headlines. So when it comes to headlines, we wanna talk benefits, not details. A lot of times people wanna talk, like add a headline that says what something does, but especially when it comes to like website headlines, it's better to talk about what something can do for the reader, and I'll show you that in a second. But generally just like content, you wanna keep that short, sweet, and simple. And it's better to use natural and friendly language. Don't talk like a robot. So for example, back to my website, this is technically what my books are about. They are an introduction to building web apps using Python and Django, but this is super boring. It's much better to have a headline, I at least said I hope, because I have to sign this, that says learn how to build a web app. Because this is what people are coming to my website, that's what they wanna do, and I wanna be like, hey, this is what I can do for you. And again, this is another thing that doesn't just like sound nice, this can vastly improve the conversions on your website. So in this article, how a simple headline change improves conversions by 52.8%. And all they did was change their headline of their website from talking about the details of what it does to talking the benefits to the reader. So we're not done with this little widget. Now you might notice the headline is kind of boring, the text is kind of boring, even the button is. So we can shorten the contents, make the headline, talk a little bit more about benefits, then details. Change over the button, instead of just like plain download link, we can set it up to send me free info, which sounds a little bit nicer. The form also, instead of having just plain email address, make it a little more human by saying add your email here. So in applying these principles that we've gone over, we have gone from here to here, which hopefully is pretty cool. Next section. So we've only been talking about pretty much about text and boxes, not a lot in terms of images and imagery. So you can do a lot with text and boxes. When it comes to design, I hate, seriously, seriously hate doing any kind of illustration. So I try to do just text and boxes for every one of my designs. But it's also really great to have imagery in your website. So again, going back to those overarching principles, stock photos usually look like stock photos. You know, you have that person who's like, yeah, people all know that. So like I just said, you can accomplish a lot with just type and screenshots of your project. Always great to look, if you are implementing an image into your website, pay attention to file size and retina quality, making sure you have retina quality images. That last one, particularly I forget all the time because I have an old MacBook Air. Whoops. But we can, you know, seeing things like the Stripe website, you know, by the fact that the Stripe website has these cute little icons over there, their value add, their features, you can see that it adds this little special touch to your website. So it's really nice to add those things when you can. So this is one of my favorite resources for imagery. These are stock photos per se, but they're so much nicer than normal photos. So this is unsplash.com. So if you want to find a big image for your website, or images for your website, you can go here and search through the photos that they have. They're all gorgeous. And they say, do whatever you want, which is awesome. The other place I look for, for imagery, is photopen.com. It searches Creative Commons imagery on Flickr. So you can search a little bit more, like you can get a lot more different kinds of images through Photopen that you can with Unsplash. Unsplash is maybe a little hipster-y. And then designers hate me for saying this. But if you are designing something for cheap, you're building a website for yourself. You're creating a landing page for the open-source product that you just did, and you want to create little icons, use things like Fiverr, use things that, oh, Crowdspring, all those little websites for crowd-sourcing cheap imagery. So if you have the money, work with Designer, and they will make something dedicated for you and make something super awesome. But if you don't have money, I am a big fan of going here and using this to make icons, make logos, whatnot. It is a great starting point. So don't feel like you have to pay $800 for a logo. Use one of these websites, take advantage of it in the beginning part, when you can, work with a designer. So just in terms of imagery, sometimes you have to work with a local designer. It could be pretty cheap. These are my friends, App Canary. So they have a very nice-looking, very plain website. But they have this section below. They worked with a local Toronto designer to create these little illustrations. And just by having these, it kind of elevates their website from just being text and screenshots. And this was something I think it was sub $100 for them to get these great little illustrations. So you can work with, say, crowdsource websites. You can work with a local designer, get something cheap and kind of improve your website overall. All right, so that's the last bit about specific things about design. I want to talk a little bit more about philosophy. So designers love to say this, good art is copied, great art is steel. So if you are sitting down and working on your first design project and you wipe everything off your desk, you pull out a blank piece of paper and you're like, I'm gonna start sketching on so-and-so design and figure out my ideas. Starting from scratch with nothing for inspiration is a lot like trying to program without the use of Stack Overflow. No one does it. My book would not be as, I mean, again, I designed the book, so I'm gonna say, hey, it's pretty awesome. My book would not be as, hopefully, well-designed as it is without the awesome inspiration of a book apart. Like, when I was trying to design my book, I found the book apart books and I was like, this is the size I want. This is the kind of feel I want. I use them very heavily for inspiration. I did not copy anything, but I definitely use them for inspiration. My book would not be as awesome, hopefully, as it is, without using them as a bootstrap for my design. So when you are sitting down and working on a design, use inspiration, go out onto the web and see what else is out there. See your competitors' websites or you can go to some place and or. Go to some place like Site Inspire. These are all like collections of good web design, like sites that just collect good web design. So Site Inspire, iMatch Style, CSS Mania. You can go on here and see what other people are saying is good design and use it for inspiration. See what other people are doing awesome and see if you can implement those ideas into your website. So when you see a design that is particularly looking pretty awesome, like this awesome Slack homepage. So not just like notes that is a particularly well-designed website, but try to go through the website and see what they're doing well. And the more you pick out what they're doing well, the more it'll insert itself into your brain and make it easier for you to regurgitate it up later. It's gonna help train your design eye. So for example, in the Slack homepage, start picking out this awesome little details they do. The form has a darker background on it. Separates it out from the background, makes it easier to see. The button is bright green. Again, makes it easier to see. Using that whole thing where it's like, hey, make your buttons brighter color. The top right, notice that the link for Create a New Team is also surrounded by a border, which also makes it easier to see. It's also a slightly larger font size. The headline has little squiggles under it which makes it, you don't really see that on a lot of webpages. Again, super eye-catching. They're using bolding in the content, just like we talked before, to make the important parts of that content stand out. Free is also bolded within the form, because free is super important word. There's lots of white space, beautiful imagery in the background. So there's a lot of things that the Slack homepage is doing well. And when you find something that looks great, like a competitor website, go through and pick out what they're doing well. Or an awesome website on the web in a related field. Pick out what they're doing and totally use that for inspiration. You don't have to steal, but inspiration is totally fine. Because that's what Pablo Capazzo said. And then Bansky came along, made it his own. This is like a meme within the design world. There's books on how to steal like an artist. So like seriously, do not design from scratch. You can go out into the web and see what else is doing well and implement that in your own designs. All right, last section. Little bit of an overview of design process. So again, you're working on a new project. You have to do a website, a widget, a form, et cetera, and so forth. Again, first thing to do is to collect that inspiration I talked about and start sketching our ideas. This is specifically how I do inspiration. I use Feedly. I have a whole category of web design and whenever I have to design something new I can just go into Feedly and just really quickly scan through all the top web designs that happened recently and open up the things I like in a new tab and start picking out those ideas. And when I pick out those ideas, I sketch them, take out a piece of paper and I sketch them. And when I say sketch, I don't mean something like this because this drives me nuts. This person is showing off. Sketches do not look like this. So when you're sketching, just like make boxes and lines, just squiggles, these are actual sketches from my, when I was trying to figure out the new HelloWeb app homepage. Kind of figuring out where the content would go and where the images would go and what the different pages in terms of the layout would work. Just really, really quick ways for me to just kind of like write down ideas. So don't think when you're sketching that you have to make a beautiful sketch. Do whatever you need to do to get those ideas on paper and it's gonna help insert it itself into your mind. And the next thing in terms is mockups. And a lot of people ask me about whether they should mock up or you can go straight to the browser and start building an HTML CSS. You can do that but I like mockups because it's easier to move things around and change different ideas. And by mockups, I don't mean necessarily something that's pixel perfect. So I use sketch and this is sketch but you don't have to use a paid product like sketch or Photoshop. You can also use something like GIMP which is open source and free. And this is one of my husband's projects and we work together just trying to figure out the design of a landing page. And all we did was just we just used black and white that wouldn't be the actual colors of the website. That wouldn't be the actual fonts. You can see the bullet list which just says ones. But this allowed us to kind of figure out a layout that we wanted for the website. We wanted to have just one column, have those menus left and right. And by doing this in a mockup program like sketch or Photoshop or GIMP is easier for us to move things around and try things out. And sometimes I do pixel perfect mockups and that's also nice to figure out how things look. I put this up here to shame because I gave my husband this mockup like two years ago and he still hasn't launched it. So if you go to briefedrix.com it looks much different. So you can do mockups like if you wanted to try out just do pixel perfect mockups but something like this is totally fine. Just like again, just like sketches where you're just using lines and boxes and whatnot. You can just use text and use mockups as a way to figure out where the layout would be and how things would be used. And then build it, which is a whole other area. All right, so again, philosophy. Every single time I sit down and I work on a design project. It's not like I have a graph design degree, I've been doing design, I'm older than I look so really long time. And it is never, ever easy. This is my process every single time. Like I feel like an awful designer I'm like, what am I doing? It's like the most intense imposter syndrome. Every time I sit down and I start moving things around I'm like, this is awful, this is awful, this is awful, this is awful, what am I doing, what am I doing? And that yes, I put that in there and I think I need to update this slide because it's not usually yes. It might be just like maybe, maybe it's better. So if you're sitting down and you're like working on a design and you're like, oh my God, I'm an awful designer, this is not working. That doesn't mean that you're a bad designer, it means you are a designer. This is the process. It's kind of depressing. Sorry. All right, so this is only the starting point. Just like you can't become a awesome programmer by sitting down and going through one tutorial you can't become a full-fledged designer and get a design job in a half an hour. However, I hope that gives this talk gives you the confidence to start playing around with design and start trying to do more design because the more you do it, the more you practice the better designer you're gonna be. You don't have to become a designer, you can become a programmer with some design chops just enough to be dangerous. So remember, number one when it comes to visual stuff is just to reduce the visual clutter and your designs will look better. And you can reduce visual clutter by keeping the number of fonts in colors low, adding white space, lining things up and keeping your content and your headlines short and easy to skim. Remember to think about the user experience. Make sure that whatever you're designing, easy to use. I didn't put this in here and I should, but it's often really awesome and also depressing. Design something, get it working in the browser and take it to a friend and see how they use it because they can pick out things that you missed in terms of how things can be experienced. Maybe a button's hard to find. Maybe it's hard to understand what's going on. So focus, not just make something look nice but focus on how it's used. And don't be afraid, it's so hard to get criticism but don't be afraid to gather people and see if they see something that you missed. Keep your content short, friendly to the point, like I mentioned, because content is not only clutter but you want people to read your content and practice, practice, practice. You're not becoming a better designer overnight. The first bits are gonna be really hard but the more you do it, the more it's gonna insert itself into your brain. It's gonna train your design eye and it's gonna make it easier for you to continue with the design. So again, this is going to be the topic of my third book which I've been saying for like the last seven months and I still have not started working on it. But if you go to hellowebapp.com slash web-design, that is a dedicated form for people who are only interested in this future book and as soon as I start working on it, which could be in three weeks, everything going to plan, I will send out announcements and when it's on Kickstarter and all that jazz. So yeah, thank you for being here. All right, so we have ton of time for questions. Yes, yeah, that's the hard part about like a half an hour to 45 minute talk. It's like, there's so much more to say that I need to write the book on. So in terms of not just designing a page but designing a full website, seeing different pages, that's where I love having friends and family take a look at what I built and they can say like, hey, does this feel like the same websites? I mean, in general, if you use the same colors, you use the same fonts, it's going to feel like it's under the same brand, under the same website and that's important for someone to know that you don't want someone to feel like they've switched off your website because that adds confusion. In terms of user experience though, just running like basic usability tests by having someone look at it is the best way I find to determine if your user experience is working or not. Does that help? Okay, yeah, mm-hmm. Yeah, so in terms of Bootstrap might look a little bit old, how do you make sure your website looks on trend? So there's two things, two parts of this. A, when it comes to Bootstrap, I find a lot of articles keep popping up where people are like, Bootstrap is totally over or they like showcase a whole bunch of websites that all use the Bootstrap like basic theme and that drives me nuts. I do not like people yelling at people using your framework and like getting a basic design up that's like way better than say if they didn't use that framework. So I hate that shaming. At the very least, if you're launching your first website using something like Bootstrap, even it might not look unique is a great first step and then all of my websites are Bootstrap and I update them to look different. So that's not what you ask, but just my little pet peeve when it comes about Bootstrap. But you can use other frameworks. But in terms of keeping a eye on trends, that's why I really like those websites that just showcase good design that's happening now. I like to, I don't look at them every day. I look at it only when I'm working on a design. But I can go in and see what the current trends are and use that and inspire me. And by doing that, by looking at those current like awesome websites will help me figure out what the trends are going on right now and follow those trends. So if it's important to like try to look like a modern website, just looking at what other people say is a great modern website. I'm using it for inspiration. It's a great way to start. Yes, yeah. Yeah, I mean, it's definitely easier. Yes, the question is tips for when you're working as a developer and designer on a website and making sure that things stay modular. Well, it's so much easier when it's just you. Let's put it that way. That's one reason why I like working by myself and doing all the design and development for my projects because I don't have to like fight with anyone else on those kind of things. In terms of like, there's a lot of articles out there in terms of design and they talk about like organizing your CSS files in a way that makes sense and organizing. That's for like helping you work with others but that also helps you work with your future self. You know, by making sure that you're like you keep your mockups in one area and you save them. You keep your inspiration in one area and you save them. You keep your CSS files like in individual files where you have like your overarching stuff, your typography. Like those things help you work with others but it's also gonna help you in the future if you've forgotten what you were planning on doing from the past. Yeah, so all those like principles about working well with others can totally fit for working with yourself. Yes. All right, so anything to say about responsive design. That's also the reason why I like Bootstrap and frameworks because responsive design is making sure that your website looks okay on a big screen, little screen, phone screen. And I hate like working on responsive stuff so that's another reason why I like Bootstrap or Foundation, things that have responsiveness already built in saves you so much time. So use a framework to add responsiveness and because people looking at your website and phones is unfortunately more and more often and it's hard like creating a big site and a little site so use as many shortcuts as possible like those frameworks. Yeah. So making something trendy and making it stand out. In general, when it comes to someone who, if someone says I'm a new designer, I would say to avoid making your website stand out. It's like follow the rules until you get enough skills to break those rules. And again, that's also a great way. Like you can, for version one, just getting something out because that's where I find a lot of people say I can't design but I wanna make my thing really awesome and there's like this huge gap in between and that's really intimidating. It's much easier to say instead of like saying I wanna make my thing super trendy, it's easier to like say follow, make a plain website and just get it out using something like Bootstrap. And then you can start adding little redesigns. You can start updating the headlines. You can start updating the photos and you can start building up to that trendiness rather than say going from zero to trendiness. All right, you? Yes. My experience with doing is on my own. So I gotta do something. Yeah. And you're one of a kind old city. All right. All right, so how do you know if your website is actually good looking? I guess. Well, so one thing, another pet peeve I have with a designer is that some designers are like super like things can be totally okay and designers like ugh, cause they're a designer. And I'm like stop it, like encourage people to design. But in general, like that's where when it comes to like say again, user experience. Like more important than how your website looks is how people use it. And that's probably the reason why Hacker News is like really close together is that they've determined that is working totally fine on their end. So relying on data and relying on people saying if they can actually achieve what they want to achieve on a website, that's awesome. I think that's great as a great first step. I mean, you can always improve things later. You know, launch your website, even if it's not like 100% perfect and a designer might be like, oh, I don't like those colors. And start tracking analytics. And you know, track like a success metric. Like you want some of the, you don't want to see how many people go from this page to this page or how many page users there are. And then maybe, you know, later on you can try to run a test and see if you can change something and improve that metric. So I would just basically rely on data because as much as possible because designs is so, that's like so qualitative. So do as much as you can to make it quantitative. Yes. I feel like that's more teaching designers to work with developers too. It goes both ways. That's a hard one because it all depends on individual circumstance and the people involved. But like, you know, if you're able to go that person and you're say, hey, what's the reasoning behind this? That's gonna help you learn. It's gonna tell that person they actually walk through the decisions they made. It might make it easier for implementation because you know why they made those decisions that they did because that's one of the biggest things with developers and designers working together is that decision moment. If that isn't clear about why something is on the left or why something else on the right and that's where things get disimplified, not implemented making sure that communication is there is really important. So I guess just try to work on communication and get those whys out of the person. Yes. So set up for testing. Very first thing is just set up analytics. And so that's not like a testing framework per se but just going on Google Analytics and just seeing how things work is just like step, like zero, I guess. And then I am blanking but there are AB testing frameworks out there. I think Google Web Optimizer and I use site spec long time ago, that's like professional but there's a lot of like different services on the web to help you like AB test things. So that's if you want like a very data driven like you install something, it's our AB testing and quick notes. I always make a mistake of changing too much. Just do, if any of these like testing frameworks just change a headline or just change a color avoid the temptation to do a lot of things at once. That said, if you don't want to pay and like install like a project and whatnot, the best testing I think is taking it to someone who's not you because you go like design blind when you're working on your design and just seeing what people say. So that's where the usability test can come in. Now so you can have data driven, you can have people say that's easier, you can take it to strangers in Starbucks and offer them a $5 gift card or you can take it to your friends who you know isn't going to be like, yeah, it looks great because a lot of friends just try to be nice. Just try to get feedback in either of those ways, ideally both. Yeah, yes. Oh, I have to stop, I'm sorry. She's waving. Okay, so I will be here. There's a break, I will stay up here. Feel free to ask me questions. I'll answer your question first. Otherwise, thank you so much for being here. All right, hi everyone. Thank you for coming to the Design for Non-Designers session. Can everyone hear me okay with the speakers and all that? Sweet, okay. First off, hi, I'm Tracy. If you wanna follow me on Twitter, common mistake. People think I'm Lyme darling, but I'm actually Lyme daring. And afterwards, I'll tweet out slides and all the information I put up there and then you can take a look on your free time at the Lyme darling account, which I also own and I tried to make it really obvious that that's not the one you should go to. All right, so a little bit about my background. I, about seven years ago, long story short, taught myself how to do Python. I launched this website called WeddingLovely. I was working on it for my startup for the last seven years and that was super awesome for my first Python project to be able to turn into a startup, making my full-time job. But during that process, as I taught myself Python, I kept thinking, why is Python taught this way when I really think it should be taught this way? So this is my book series called Hello Web App. I launched this about a year and a half ago and they're really awesome. They're teaching basically programming to non-programmers. So if you know of anyone who's jumping into Django, quick pitch for my books, they're awesome. But during this process of writing a book, teaching programming to non-programmers, my background is in design. I started thinking about how do you teach design to non-designers? So quick spoiler, that's probably gonna be my third book, it's not out yet, but I'm working on it and this is part of this talk. So if I, any kind of suggestions or feedback you have after this talk, please give it to me because I am working, at least in my head, on this third book. And when I say design, I don't mean like something as super intimidating as this because the field design is gigantic and there's always like little bubbles ever in fits in and there's visual design and UX design and UI design and user, I guess, well this is our industrial design, human factors, everything. There's lots of different like buckets that designers can fit into and we only have 45 minutes. So what I mean by design and what I wanna teach is just simple guidelines that help you create an interface that works well because even if you're not jumping into being a designer per se, probably sometime in your career, you're gonna have to build a website for an open source project that you've launched and you want a website so people can know how to download it, launch something like this or like the node website and I'm hoping that my thing with teaching people how to program, I wanna teach designers how to program is I want people to be able to do as like at least a little bit themselves and it's the same thing as the design because you don't have to go out and find a designer when you wanna launch a website. I wanna encourage as many people as possible to start working on design themselves without per se becoming a designer. And this is one of my biggest pet peeves and one of the main reasons why I'm giving this talk is I hate the idea that like the golden ratio and beginner design books always shows up and I'm like that does not need to be in a beginner design book. You don't need to know like the pieces and parts of typography which a lot of design books go into like typography is really cool but that's like one of our 201 type level stuff. I just wanna talk about how can we create better, more effective designs if you don't have a design background and the tips and tricks to help you get there faster. So main thing to think about and I'm just gonna focus on just to start out with start to just focus on the visual stuff. The main thing to think about is clutter. So by clutter I mean the websites like this which could be like the best example of the most cluttery website in the entire world. They've improved it now but you can see what I mean by clutter. This is crazy. And the fastest way to become a better visual designer to make better designs is to start cutting down on clutter. So to illustrate this, I have this little widget and the widget's okay but it looks a little funky. It looks a little unprofessional and we're gonna go through some basic design principles applying to this widget and kind of start improving the design. So first design principle is the grid. You might have heard of the grid. Shows up a lot in terms of web design. Instead of just calling it the grid think of the grid as just lining things up because pixel differences like things a little bit to the left or a little bit to the right those things are definitely noticed even on a subconscious level and adds to visual clutter. So there's always that like talk or that like joke about the designer and the developer that work together and designer builds a pixel perfect mockup and they give it to the developer and the developer implements it and the designer goes, no that's like two pixels off and then the developer is like what two pixels like why does that matter? It does matter I say as a designer because those pixel differences can add to clutter. So when you're working on web design like I am a huge fan of shortcuts and not starting things from scratch like especially as a beginner designer use as many shortcuts as possible. So there's a lot of frameworks out there like Bootstrap or our foundation that come with a grid within the framework. I love Bootstrap. I use Bootstrap myself for all of my projects and Bootstrap is really awesome because it comes with that grid and you don't have to worry about it. So back to this little widget and we apply we just start lining things up. So we just normalize the spacing in between the elements like on the left and right side. You know just gave everything a vertical column that's connected to and already it's starting to look a little bit less cluttery. All right next up color, color principles. So the big overarching things to know about color because this is a huge topic. In general it's best to keep your colors complimentary I'll get into what I mean about that in a second. But like the biggest tip when it comes to color just to start out with is to use mostly neutrals and it's great to use like a brighter color for like highlights or important bits. So there's a lot of articles on the web that helps out because this is something that you can do so much time on and I particularly like the Smashing Magazine article simple web developers guide to color. And it goes into all the principles and talks about what it means by complimentary colors and all that kind of stuff. I took like a whole quarter when it comes to color theory and like cut out like little boxes that like line colors up and it's ridiculous. So you can deep dive into color but I want to talk a little bit about shortcuts. And this is my favorite shortcut when it comes to color is to go to a website called color lovers. Color with a U. I just moved to Canada so I'm getting used to this U thing. So go to color lovers and I do this for my books. I do this for every website that I launch. Color lovers is a place where people can submit color palettes and people can vote on those color palettes. So if you go to most loved color palettes of all time or whatever time frame that you want you'll see really cool color palettes and it's makes it way easier than say starting to build your color palette or whatever you're designing and trying to build those colors in a scratch so it's easier to go here and to scroll through and find things that automatically work well together. So go back to this little widget and you can start pulling out those color palettes from color lovers, start applying it to the widget and just see if they can find things that work. And some things won't. You can just start playing around, adding some different colors and find and work through it until a color palette works. So for example, this one, don't be afraid to lighten or darken colors as needed. The download button, doesn't really show up really well on the screen but the download button is darker than that red in the top left. So these things do have flexibility but it's an awesome shortcut so you don't have to start building color palettes from scratch and believe me, I don't for anything and I have a hole on the graphic design degree. All right, next principle is fonts. All right, overarching principles again. When it comes to fonts for your website generally stick to no more than two fonts for whatever you're designing because the more fonts there is, the more clutter there is. And speaking of clutter, display fonts like this, those are super generally really cluttery. You can use them in your designs, that's totally great. But again, as a rule of thumb, it's easier to work with cleaner, more professional fonts that's gonna make your web designs look better. Generally avoid display fonts. And if you want a little bit more differentiation within your text, you can use bolding, italics, you can make things uppercase, make things all lowercase. You can transform the two fonts that you have to give it more differentiation but it's easier or better than do multiple different kinds of fonts per website. But again, shortcuts. I love using Google Fonts and Google Fonts has like hundreds of fonts and that gets really overwhelming because you go on there and you're scrolling through and seeing a billion fonts and you're like, ah, which one do I choose? So there's websites like beautiful web type which is hellohappy.org slash beautiful dash web dash type. That just showcases Google Web Fonts in like a paragraph. So you can see the fonts working and it's easier to choose which one works for you. And sometimes it's like two fonts that work particularly well together. There's also TypeWolf, it has a few articles on this or it's a curated collection of 30 best Google Fonts. So instead of going into this long list of like 200 plus whatever fonts of Google Web Fonts, you can go here, figure out what other people are saying are the best fonts and choose from there. Reducing choice I think is awesome. Makes things so much easier. So back to that little widget which now you can see has quite a few different fonts all within it. And we're gonna update it to just two. There's a sans-serif and a serif font and if you don't know what that means just means sans-serif has a little bits at the end of the letters. But it's just two fonts and there's some differentiation in terms of how it's displayed. There's italics in the form. There's uppercase in the button. It's tracked out a little bit. But really this is just two fonts and it's looking a little bit more clean. All right, last but not least is white space. And white space is the ultimate clutter reducer. Pretty much the main thing that GoDaddy website was missing. I always laugh because hacker news is kind of severely lacking in white space. And every three months or so someone posts on hacker news and I redesign hacker news and every time these redesigns all include more white space because designers go on this website and they go, ah, everything is cluttered. That one looks particularly nice. But for other websites, adding white space can make a big difference. For example, this redesign in the New York Times website. Like you can't add a lot of white space here because it's very much a newspaper website. But the before is on the left and after is on the right. And one of the biggest things that they did to kind of open it up and make it look a little less cluttery was adding a little bit more white space between the columns of text. And white space is definitely a big trend right now. So I went on to a top web design websites and took a random screenshot and every single one of these is like acres of white space. So it's a big trend but it also can drastically affect your bottom line, your conversion rate. So for example, in this study, someone just added a little bit more vertical space in between these tables. So four is on the left and after is on the right. And that led to a 20% improvement engagement, 5% boost in products out of the cart and a 33% improvement to customers continuing on through to purchase. So white space not just looks good but it can affect how many customers will go through and say pay for something on your website. That's a big deal, back to the widget. And we're just gonna open it up a little bit. So not only just adding some spacing around the edges of this widget but also adding some line, some spacing in between the individual lines of text. The spacing is also normalized in between the elements. So the same amount of spacing approximately between the button and the form, the form and the content, the content and the headline. So in general, it comes to visual stuff. The main thing to remember is to look for ways to reduce clutter. And you can reduce clutter by keeping the number of fonts and colors low, adding white space and lining things up. Like clean design is definitely again also one of those trends that's going on right now but that clean design naturally reduces clutter and it's gonna lead to a better design overall. All right, next up, user experience because we can't just talk about visual stuff but the main thing that's actually, the thing that's more important of how it looks is how it works. So whatever you're working on in terms of design whether it's a website, whether it's a landing page, if it's a form, it's a widget, try to think about when you're designing what's the most important action on that design and make that easy to find and use. And that's why in this widget we use a brighter button at the bottom, like that's why the button's red, it stands out as because we want people to immediately see that download link and hopefully make it like super clickable. And that's why when you see a lot of websites that have these giant banners at the top, like for example my website, the get the books button is a bright green. It's a little weird because there's two buttons, there's that free sample button and there's the get the books but the get the books one, hopefully I want people to buy my books. Ergo making it bright green, making it stand out, making it super clickable. And you can see that in lots of websites that do landing page design, for example this one has a very neutral gray background, bright blue button. But it doesn't just have to be say landing pages, for example the wealth front engineering blog, you can argue they have this blog so they can track more people to come to, you know random engineers come to their engineering blog, read about wealth front and then in the bottom right there's this widget that says hey interested in what you see here, apply for a job and that's why that widget is bright green because they wanted to stand out around the rest of the content. So that's just using color to make things stand out but generally pay attention to your goals. I love using Google Analytics and seeing how things are working and start tweaking things to see if I can make things work better because as arguably more important than how things look, it's more important how things are working and make sure that you're paying attention to what you're designing and how it's designed and used and making sure that's easy to find and use. All right, next up, content. In general content is also a big sign of clutter and I find a lot of people who are building their first website or doing an about page or whatever they do, they have a tendency to write a lot of content, a lot of paragraphs of content and that is very intimidating to a reader. People on the web just skim nowadays and it just, I mean, it looks very cluttery. So if you have a lot of content, do the best you can to shorten it, make it simpler, make it more easy to read and if you can't do that, I'm a big fan of breaking things into bullets. So for example, the left, you know, you can read that paragraph, you can go line by line in this paragraph but it's a little easier to parse the individual parts of that paragraph by breaking into bullets but we can further make it easier to read by adding some bolding. So the bolding is there because people on the web will skim and this makes it easy for someone to just jump between the individual's paragraphs, see at a glance what that paragraph is about and then read further if it interests them but we can further increase readability by adding some white space and that makes it even easier to read. So I'm a big fan of using this in a lot of content. You might notice in a lot of blog posts nowadays, in general try to avoid doing paragraphs and paragraphs of content. Do you can't add bolding, add italics, add more spacing, add bullets to make it easier for someone to skim your content. So for a real life example, this is Read the Docs, we all probably know Read the Docs. Eric is a friend of mine and he kind of knows I do this. So in his design, this looks great. This is a beautiful website. But if he came to me, he said, hey Tracy, how would you improve this website? The first thing I would do when I look at this is everything is gray and there's not real good action. Like I don't know if the sign up button is the thing that he's really like wanting to throw people to or he wants people to click, let's do this button. But I noticed that on hover, that let's do's button has a hover of green. I didn't add this, it's just a hover color. And so if I had this website and I wanted to test out, make improving it, which I'm a huge fan of testing, that's the first thing I would do because add a bright color to this website, making that action form easy to find and use. But then you might also notice that there is a paragraph content there. And that paragraph content looks very beautiful, but how many people do you think are actually gonna be reading that line by line? So another thing I would test was taking that paragraph content. This is not necessarily as beautiful, but splitting into bullets, adding some bolding, making it easier to see those important parts of that value that Read-a-Docs gives. And see if this improves a lot of live, it improves people clicking through, improves people signing up for Read-a-Docs or adding their documentation. So you can see that there's a lot of opportunities, pretty much everywhere to test and try out new things using these principles. So I'm gonna jump back into content and talk a little bit about headlines because the actual paragraphs of content are not just the most important part, but also headlines. So when it comes to headlines, we wanna talk benefits, not details. A lot of times people wanna talk at a headline that says what something does, but especially when it comes to website headlines, it's better to talk about what something can do for the reader. And I'll show you that in a second. But generally just like content, you wanna keep that short, sweet, and simple. And it's better to use natural and friendly language. Don't talk like a robot. So for example, back to my website. This is technically what my books are about. They are an introduction to building web apps, Suzie, Python, and Django. But this is super boring. It's much better to have a headline, at least I hope, because I designed this, that says learn how to build a web app. Because this is what people are coming to my website. That's what they wanna do. And I wanna be like, hey, this is what I can do for you. And again, this is another thing that doesn't just like sound nice. This can vastly improve the conversions on your website. So in this article, how a simple headline change improves conversions by 52.8%. And all they did was change their headline of their website from talking about the details of what it does to talking the benefits to the reader. So we're not done with this little widget. Now you might notice that the headline is kind of boring. The text is kind of boring, even the button is. So we can shorten the contents, make the headline, talk a little bit more about benefits than details. Change over the button, instead of just like plain download link, we can set it up to send me free info, which sounds a little bit nicer. The form also, instead of having just plain email address, make it a little more human by saying add your email here. So in applying these principles that we've gone over, we have gone from here to here. Which hopefully is pretty cool. All right, next section. So we've only been talking about pretty much about text and boxes, not a lot in terms of images and imagery. So you can do a lot with text and boxes. When it comes to design, I hate, seriously, seriously hate doing any kind of illustration. So I try to do just text and boxes for every one of my designs. But it's also really great to have imagery in your website. So again, going back to those overarching principles, stock photos usually look like stock photos. You know, you have that person who's like, yeah, people all know that. So like I just said, you can accomplish a lot with just type in screenshots of your project. Always great to look, if you are implementing an image into your website, pay attention to file size and retina quality, making sure you have retina quality images. That last one, particularly I forget all the time because I have an old MacBook Air. Whoops. But we can, you know, seeing things like the Stripe website, you know, by the fact that the Stripe website has these cute little icons over their value add, their features, you can see that it adds this little special touch to your website. So it's really nice to add those things when you can. So this is one of my favorite resources for imagery. These are stock photos per se, but they're so much nicer than normal photos. So this is unsplash.com. So if you want to find a big image for your website, or images for your website, you can go here and search through the photos that they have. They're all gorgeous, and they say, do whatever you want, which is awesome. On the other place I look for, for imagery, is photopin.com. It searches Creative Commons imagery on Flickr. So you can search a little bit more, like you can get a lot more different kinds of images through photopin that you can with unsplash. Unsplash is maybe a little hipster-y. And then designers hate me for saying this, but if you are designing something for cheap, you're building a website for yourself. You're creating a landing page for the open source product that you just did, and you want to create little icons, use things like Fiverr, use things that, oh, CrowdSpring, all those little websites for crowd sourcing cheap imagery. So if you have the money, work with a designer, and they will make something dedicated for you and make something super awesome. But if you don't have money, I am a big fan of going here and using this to make icons, make logos, whatnot. It is a great starting point. So don't feel like you have to pay $800 for a logo. Use one of these websites, take advantage of it in the beginning part, and when you can, work with a designer. So just in terms of imagery, some of these you also work with a local designer, it could be pretty cheap. These are my friends, Ap Canary. So they have a very nice-looking, very plain website, but they have this section below. They worked with a local Toronto designer to create these little illustrations. And just by having these, it kind of elevates their website from just being just text and screenshots. And this was something, I think it was $700 for them to get these great little illustrations. So you can work with, say, crowdsource websites. You can work with a local designer, get something cheap, and kind of improve your website overall. All right, so that's the last bit about specific things about design. I wanna talk a little bit more about philosophy. So designers love to say this, good art is copy, great art is steel. So if you are sitting down and working on your first design project and you wipe everything off your desk, you pull out a blank piece of paper, and you're like, I'm gonna start sketching on so-and-so design and figure out my ideas. Starting from scratch with nothing for inspiration is a lot like trying to program without the use of Stack Overflow. No one does it. My book would not be as, I mean, again, I designed the book, so I'm gonna say, hey, it's pretty awesome. My book would not be as hopefully well-designed as it is without the awesome inspiration of a book apart. I, when I was trying to design my book, I found the book apart books and I was like, this is the size I want, this is the kind of feel I want. I use them very heavily for inspiration. I did not copy anything, but I definitely use them for inspiration. My book would not be as awesome, hopefully, as it is without using them as a bootstrap for my design. So when you are sitting down and working on a design, use inspiration. Go out onto the web and see what else is out there. See your competitor's websites, or you can go to some place and or, go to some place like Site Inspire. These are all like collections of good web design, like sites that just collect good web design. So Site Inspire, iMatch Style, CSS Mania. You can go on here and see what other people are saying as good design and use it for inspiration. See what other people are doing awesome and see if you can implement those ideas into your website. So when you see a design that is particularly looking well, like looking pretty awesome, like this awesome Slack homepage. So not just like notes that is a particularly well-designed website, but try to go through the website and see what they're doing well. And the more you pick out what they're doing well, the more it'll insert itself into your brain and make it easier for you to regurgitate it up later. It's gonna help train your design eye. So for example, in the Slack homepage, start picking out this awesome little details they do. The form has a darker background on it, separates it out from the background, makes it easier to see. The button is bright green. Again, makes it easier to see. Using that whole thing where it's like, hey, make your buttons brighter color. The top right, notice that the link for Create a New Team is also surrounded by a border, which also makes it easier to see. It's also a slightly larger font size. The headline has little squiggles under it, which makes it, you don't really see that on a lot of webpages. Again, super eye-catching. They're using bolding in the content, just like we talked before, to make the important parts of that content stand out. Free is also bolded within the form because free is super important word. There's lots of white space, beautiful imagery in the background. So there's a lot of things that the Slack homepage is doing well, and when you find something that looks great, like a competitor website, go through and pick out what they're doing well, or an awesome website on the web in a related field. Pick out what they're doing and totally use that for inspiration. You don't have to steal, but inspiration is totally fine because that's what Pablo Capazzo said, but then Bansky came along, made it his own. So it's like a meme within the design world. There's books on how to steal like an artist, so like seriously, do not design from scratch. You can go out into the web and see what else is doing well and implement that in your own designs. All right, last section. Little bit of an overview of the design process. So, again, you're working on a new project. You have to do a website, a widget, a form, et cetera and so forth. Again, first thing to do is to collect that inspiration I talked about and start sketching our ideas. This is specifically how I do inspiration. I use Feebly, I have a whole category of web design and whenever I have to design something new, I can just go into Feebly and just really quickly scan through all the top web designs that happened recently and open up the things I like in a new tab and start picking out those ideas. And when I pick out those ideas, I sketch them, take out a piece of paper and I sketch them. And when I say sketch, I don't mean something like this because this drives me nuts. This person is showing off. Sketches do not look like this. So when you're sketching, just like make boxes and lines, just squiggles, these are actual sketches from my, when I was trying to figure out the new Hello Web app homepage. Kind of figuring out where the content would go and where the images would go, what the different pages in terms of the layout would work. Just really, really quick ways for me to just kind of like write down ideas. So don't think when you're sketching that you have to make a beautiful sketch. Do whatever you need to do to get those ideas on paper and it's gonna help insert it itself into your mind. And the next thing in terms is mockups. And a lot of people ask me about whether they should mock up or you can go straight to the browser and start building an HTML CSS. You can do that but I like mockups because it's easier to move things around and create, like change different ideas. And by mockups I don't mean necessarily something that's pixel perfect. So I use sketch and this is sketch. But you don't have to use a paid product like sketch or Photoshop. You can also use something like GIMP which is open source and free. And this is my husband's, one of my husband's projects and we work together just trying to figure out the design of a landing page. And all we did was just, we just used black and white because it wouldn't be the actual colors of the website. That wouldn't be the actual font. So you can see that the bullet list just says ones. But this allowed us to kind of figure out a layout that we wanted for the website. We wanted to have just one column, have those menus left and right. And by doing this in a mockup program like sketch or Photoshop or GIMP is easier for us to move things around and try things out. And sometimes I do pixel perfect mockups and that's also nice to figure out how things look. I put this up here to shame because I gave my husband this mockup like two years ago and he still hasn't launched it. So if you go to briefedrix.com it looks much different. So you can do mockups like if you wanted to try out just do pixel perfect mockups. But something like this is totally fine. Just like again, just like sketches where you're just using lines and boxes and whatnot you can just use text and use mockups as a way to figure out where the layout would be and how things would be used. And then build it, which is a whole other area. All right, so again, philosophy. Every single time I sit down and I work on a design project it's not like I have a graphic design degree I've been doing design, I'm older than I look so really a long time and it is never, ever easy. This is my process every single time. Like I feel like an awful designer and I'm like what am I doing? It's like the most intense imposter syndrome. Every time I sit down and I start moving things around I'm like this is awful, this is awful, this is awful, this is awful, what am I doing, what am I doing? And that yes, I put that in there and I think I need to update this slide because it's not usually yes. It might be just like maybe, maybe it's better. So if you're sitting down and you're like working on a design and you're like, oh my god, I'm an awful designer, this is not working. That doesn't mean that you're bad designer, it means you are a designer. This is the process. It's kind of depressing, sorry. All right, so this is only the starting point. Just like you can't become a awesome programmer by sitting down and going through one tutorial you can't become a full-fledged designer and get a design job in a half an hour. However, I hope that gives this talk gives you the confidence to start playing around with design and start trying to do more design because the more you do it, the more you practice the better designer you're gonna be. You don't have to become a designer. You can become a programmer with some design chops just enough to be dangerous. So remember, number one when it comes to visual stuff is just to reduce the visual clutter and your designs will look better and you can reduce visual clutter by keeping the number of fonts in colors low, adding white space, lining things up and keeping your content and your headlines short and easy to skim. Remember to think about the user experience. Make sure the way of your designing easy to use. I didn't put this in here and I should but it's often really awesome just awesome and also depressing. Design something, get it working in the browser and take it to a friend and see how they use it because they can pick out things that you missed in terms of how things can be experienced. Maybe a button's hard to find. Maybe it's hard to understand what's going on. So like focus, not just like make something look nice but focus on how it's used and don't be afraid. It's so hard to get criticism but don't be afraid to gather people and see if they see something that you missed. Keep your content short, friendly to the point like I mentioned because content is not any clutter. We want people to read your content and practice, practice, practice. You're not becoming a better designer overnight. The first bits are gonna be really hard but the more you do it, the more it's gonna insert itself into your brain. It's gonna train your design eye and it's gonna make it easier for you to continue with the design. So again, this is going to be the topic of my third book which I've been saying for like the last seven months and I still have not started working on it so. But if you go to hellowebapp.com slash web-design that is a dedicated form for people who are only interested in this future book and as soon as I start working on it which could be in three weeks, everything going to plan, I will send out announcements and when it's on Kickstarter and all that jazz. So yeah, thank you for being here. All right, so we have ton of time for questions. Yes, yeah, that's the hard part about like a half an hour to 45 minute talk. It's like there's so much more to say that I need to write the book on. So in terms of like not just designing a page but designing a full website, seeing different pages. That's where I love having friends and family take a look at what I built and they can say like, hey, does this feel like the same website? I mean in general, if you use the same colors, you use the same fonts, it's going to feel like it's under the same brand, under the same website and that's important for someone to know that you don't want someone to feel like they've switched off your website because that adds confusion. In terms of user experience though, just running like basic usability tests by having someone look at it is the best way I find to determine if your user experience is working or not. Does that help? Okay, yeah, yeah. So in terms of Bootstrap might look a little bit old. How do you make sure your website looks on trend? So there's two things, two parts of this. A, when it comes to Bootstrap, I find a lot of articles keep popping up where people like Bootstrap is totally over or they showcase a whole bunch of websites that all use the Bootstrap like basic theme and that drives me nuts. I do not like people yelling at people using your framework and getting a basic design up that's way better than say if they didn't use that framework. So I hate that shaming. At the very least, if you're launching your first website using something like Bootstrap, even it might not look unique is a great first step and then all of my websites are Bootstrap and I update them to look different. So that's not what you asked, but just my little pet peeve when it comes about Bootstrap. But you can use other frameworks. But in terms of keeping a eye on trends, that's why I really like those websites that just showcase good design that's happening now. I don't look at them every day. I look at it only when I'm working on a design. But I can go in and see what the current trends are and use that and inspire me. And by doing that, by looking at those current like awesome websites will help me figure out what the trends are going on right now and follow those trends. So if it's important to like try to look like a modern website, just looking at what other people say is a great modern website. I'm using it for inspiration. It's a great way to start. Yes, yeah. Yeah, I mean, it's definitely easier. Yes, the question is tips for when you're working as a developer and designer on a website and making sure that things stay modular. Well, it's so much easier when it's just you. Let's put it that way. That's one reason why I like working by myself and doing all the design and development for my projects because I don't have to like fight with anyone else on those kind of things. In terms of like, there's a lot of articles out there in terms of design. And they talk about like organizing your CSS files in a way that makes sense and organizing. That's for like helping you work with others, but that also helps you work with your future self, by making sure that you're like, you keep your mockups in one area and you save them. You keep your inspiration in one area and you save them. You keep your CSS files like in individual files where you have like your overarching stuff, your typography, like those things help you work with others, but it's also gonna help you in the future if you've forgotten what you were planning on doing from the past. Yeah, so all those like principles of working with others can totally fit for working with yourself. Yes. All right, so anything to say about responsive design. That's also the reason why I like Bootstrap and frameworks because responsive design is making sure that your website looks okay on a big screen, little screen, phone screen. And I hate like working on responsive stuff so that's another reason why I like Bootstrap or foundation, things that have responsiveness already built in saves you so much time. So use a framework to add responsiveness and because people looking at your website of phones is unfortunately more and more often and it's hard like creating a big site and a little site so use as many shortcuts as possible like those frameworks. Yeah. So making something trendy and making it stand out. In general, when it comes to someone who, if someone says I'm a new designer, I would say to avoid making your website stand out. It's like follow the rules until you get enough skills to break those rules. And again, that's also a great way. Like you can, for version one just getting something out because that's where I find a lot of people say I can't design but I wanna make my thing really awesome and there's like this huge gap in between and that's really intimidating. It's much easier to say instead of like saying I wanna make my thing super trendy, it's easier to like say follow, make a plain website and just get it out using something like Bootstrap. And then you can start adding little redesigns. You can start updating the headlines, you can start updating the photos and you can start building up to that trendiness rather than say going from zero to trendiness. All right, you? Yes. My experience with doing some things on my own right? So I gotta do something. Yeah. And you're one of a kind old city. All right. All right, so how do you know if your website is actually good looking? I guess. Well, so one thing, another pet peeve I have with a designer, because some designers are like super like things can be totally okay and designers are like ugh, because they're a designer. I'm like stop it, like encourage people to design. But in general, that's when it comes to say again, user experience. More important than how your website looks is how people use it. And that's probably why Hacker News is really close together, is that they've determined that is working totally fine on their end. So relying on data and relying on people saying if they can actually achieve what they wanna achieve on a website, that's awesome, I think that's great, as a great first step. I mean you can always improve things later. You know, launch your website, even if it's not like 100% perfect and a designer might be like ugh, I don't like those colors. And start tracking analytics. And you know, track like a success metric. Like you want some of the, you don't wanna see how many people go from Wisp to this page, or how many page users there are. And then maybe, you know, later on you can try and run a test and see if you can change something and improve that metric. So I would just basically rely on data because as much as possible. Because designs is so, that's like so qualitative. So do as much as you can to make it quantitative. Yes. I feel like that's more teaching designers to work with developers too. It goes both ways. That's a hard one because it all depends on individual circumstance and the people involved. But like, you know, if you're able to go that person and you're say, hey, what's the reasoning behind this? That's gonna help you learn. It's gonna teach, tell that person that you actually walk through the decisions they made. It might make it easier for implementation because you know why they made those decisions that they did. Because that's one of the biggest things with developers and designers working together is that decision moment. If that isn't clear about why something is on the left or why something else on the right and that's where things get like not implemented, making sure that communication is there is really important. So I guess just try to work on communication and get those whys out of the person. Yes. So set up for testing. Very first thing is just set up analytics. And so that's not like a testing framework per se, but just going on Google Analytics and just seeing how things work is just like step like zero, I guess. And then I am blanking, but there are AB testing frameworks out there. I think Google Web Optimizer, and I use SiteSpec long time ago, that's like professional, but there's a lot of different services on the web to help you like AB test things. So that's if you want a very data driven, like you install something and start AB testing. And quick notes, I always make a mistake of changing too much. Just do, if any of these testing frameworks just change A headline or just change a color. Avoid the temptation to do a lot of things at once. That said, if you don't want to pay and like install like a project and whatnot, the best testing I think is taking it to someone who's not you because you go like design blind when you're working on your design and just seeing what people say. So that's where the usability test can come in. So you can have data driven, you can have people say that's easier. You can take it to strangers in Starbucks and offer them a $5 gift card, or you can take it to your friends who you know isn't gonna be like, yeah, it looks great because a lot of friends just try to be nice. Just try to get feedback in either of those ways, ideally both. Yeah, yes. Oh, I have to stop, I'm sorry. She's waving. Okay, so I will be here. There's a break, I will stay up here. Feel free to ask me questions. I'll answer your question first. Otherwise, thank you so much for being here.