Video: Tracy Osborn Web Design for Non Designers PyCon 2016
Hello everyone. This is Web Design for Non-Designers. Extend a warm welcome to our speaker, Tracy Osborn. [applause] (Tracy Osborn) Hello. All right, there we go. So, hi. I'm Tracy. First slide, this happens every conference I'm at. I'm actually @limedaring on Tracy; just getting ahead of it this time. People think I'm lime darling, and I think that's hilarious. And I have that Twitter account, but I am lime daring. And later on I'll be tweeting out link to the slides, and some links that I mention in this talk.
So a little bit about me. About seven years ago, long story short, seven years ago I taught myself how to code. I launched an initial version of this website called WeddingLovely, and seven years later it turned into a startup. I went through 500 Startups. And spoke about it a couple PyCons ago if anyone was here for that, which was pretty awesome. And now I'm the developer relations — I work in developer relations at DreamFactory which is really awesome. This happened literally like a month and a half ago, so this is very new to me. But this talk is really — this whole part about design, I was a designer. I went to school at Cal Poly San Luis Obispo for graphic design. And like I said, I taught myself how to code. And I wrote these couple books called Hello Web App, which is like, super awesome. It came out — really cool — so by the way, if you want to teach or learn about Django web app development, these are my books. So I wrote about how to do design — excuse me, how to do development for non-developers, but then it occurred to me that there isn't really a good resource out there designed for non-designers, and that's really where this talk comes from.
It's going to be my third book and it's not written yet, but I'm using this talk as a way to kind of figure out what's going to go in this future book. When I talk about design — the world of design is so gigantic. There's user experience design and visual design, and interaction design, and people who do UI; they have all of these specialties. It's kind of super overwhelming. When I say design, I really just wanted — Design is really just making an interface, whatever you're trying to design. By design I mean just making an interface that works well. Because, even if you're not a designer and you don't think you're going to become "a designer," you still will probably in your lifetime have to design something like a home page for your project that you built. You know, something like this or this, or Node.js. You know, all of these are fairly simple and they can be done by people who are not specifically designers. And, this is my biggest pet peeve when it comes to design.
I'm not going to talk about things like the golden ratio. It drives me absolutely batty whenever it's an introduction to design, and they go over, like, "Here's a golden ratio", and I'm like, "Arghhh." That does not need to be in a beginner talk. And I won't go over parts of typography, which is also my pet peeve. That shouldn't go in a beginner talk. It's super fascinating to figure out all the pieces and parts of a letter, but that's not beginning design. Really this is just for anyone who will be building a website or building a home page for an app or building a form or building a little widget. How can you make that, whatever you're designing, look a little better and perform a little better? So, first, let's talk about clutter. My favorite example for the ultimate cluttery website is of course GoDaddy of yore.
[laughs] This is the faster way to better looking designs. I'm kind of going into the visual part first, not user experience. So just speaking about visuals, fastest way to a better design is to cut down on clutter. So to illustrate this, I made this little widget. Now, not saying y'all are gonna be building something like this, but it's a good example as we go through some design principles, apply it to this widget, and see how it improves. So the first principle we're going to talk about is the grid. We probably all have heard about the grid. Adding a grid to design is essentially just lining things up. Pixel differences are definitely noticed, like when something is two pixels off. There's always that story about the designer and developer that work together. Designer gives the developer the perfect mockup, and the developer implements it, and the designer's like, "Ah, everything is up and down and a little bit off.
" And the developer's like, "It doesn't matter, "it's only two pixels." But those little pixels — if it's just something that's just two pixels off from a grid, it's one of those kind of things that's unconsciously noticed, and it adds to the sense of clutter in the design. So you can implement a grid to whatever you're designing by scratch, but I recommend to take advantage of systems like Bootstrap which have a grid system already built in. There's no sense in doing something completely from scratch when you can use something that helps you out and gives you — that essentially bootstraps your design. So, back to this little widget, if we just line things up, if we just take the columns of contents and header and the form and the button, and just give them even margins around the edges, you can see that it's already a little bit cleaner. So the next principle is color. So to go into the overarching color principles which you read in all these beginner design books, they usually say, "You got to keep your colors complementary.
" They don't really explain about what that means. Use mostly neutral colors; use one bright color to make things pop. There's a lot of good resources out there like this article on Smashing Magazine which I'll tweet later, which really goes into color. In school, I took a whole quarter on color theory. And that's ridiculous, and I don't recommend anyone to do something like that when — if you don't want to become a full-fledged designer, you can just take advantage of shortcuts like COLOURlovers. I use COLOURlovers for anything I design. There is no way I'm going to build a color palette from scratch. Because in COLOURlovers you can go in — people can submit palettes, and then other people can vote on whether they love that palette. And then you can go in and search by most-loved palettes of all time, and get these color palettes which are pretty much guaranteed to have complementary colors, and usually you can see ones that have like a pop color. It's just a great shortcut, and you can scroll through all the color palettes on COLOURlovers and find something that works for you.
Like, my website WeddingLovely is purples and pinks. COLOURlovers; it was one of the palettes I found there. My books are oranges and yellows, a pop of green — also COLOURlovers. So back to this little widget, which is kind of like black and kind of contrasting greens. I grabbed a color palette and applied it to the widget, and it's a little overly colorful, but it does work a little bit better than it was before. And one thing I want to point out — it's not really going to show up in the slides — but you, you know, the color palettes from COLOURlovers are not set in stone. The red of the button is a darker red than the one in the color palette in the top. So feel free to play with them, lighten things, darken things, but it's a great shortcut to give yourself, you know, a jumpstart into building design and doing a nice-looking color palette without starting from scratch.
Next principle: fonts. So again, with the principles, people usually say, keep the number of fonts low because lots of different fonts in design can be a sign of clutter. Use fancy/display fonts sparingly — excuse me. And that's — a good example of all those fonts are the ultimate example of clutter — are these display fonts I used in the background here. So clean fonts also reduce the feeling of clutter in designs. And then if you want to add more differentiation in your designs, when it comes to typography, you can then explore with italics, and bolding, and transforms — like making something uppercase — to differentiate stuff. But as a shortcut, this is also what I use. Because you can go to Google Fonts and try to pick out your fonts and get completely overwhelmed by the hundreds of fonts scrolling through, and it's really, I don't know, completely overwhelming.
So there's resources out there like Beautiful Web Type where people choose — well, they pick out the really beautiful Google Fonts that are out there, Google web fonts that are free to use, and they display them in this website so you can see how they look on a real website. There's other sites like Typewolf, which again, you know, curated collection of the 30 best Google Fonts. So this is a great way to — if you're choosing a font for your design and you get overwhelmed by how many different types of fonts are out there, just go find these resources where people chose their favorites, and you can see it kind of narrows choice, makes it easier to choose, and it's easier to find something that you think looks professional.
So, back to the widget. And then we added — this is two different fonts. It's a serif font and sans serif font. Essentially means, serif font has little flanges on all the letters. But just two different fonts, and there's differentiation in here. Like there's italics on the headline, the form, the button has uppercase, it's a little spaced out. But it's only two different fonts and they work really well together. So the little widget here is looking a little cleaner. Last but not least: white space. White space is the ultimate clutter reducer. I always laugh at, like, Hacker News, because — I mean, I read it all the time, but it's a pretty cluttery design. All this text all smashed up against each other. And a lot of designers also feel the same way. So fairly often there'll be a Hacker News post saying, "I redesigned Hacker News." And it's something like this, or like this, and all of them are always more white space.
It's like designers look at Hacker News and like, "Oh my god, it needs white space." The white space can really help a design even if you have a super cluttery design that has to stay cluttered, like a newspaper homepage. So the before is on the left and the after is on the right. One further thing that New York Times did was that they reduced clutter by reducing the number of colors on the site. So, instead of the headlines being blue, they're black. But one of the biggest things they did to make their homepage look less cluttery was just to simply add more space in between the columns of text. And just like, adding just a tiny bit more space allows the design to breathe more, just look a little bit more open, a little less cluttery, even though they still have a ton of text and a lot of items on their homepage. And white space is definitely a huge trend right now.
I went on to one of these design collection sites and I took a random screenshot, and at every single one of these is acres of white space. It's not saying you have to do something like this, but it's kind of handy that it's the current web design trend going on right now, too. But it's not just a good thing to do just for like, you know — make it look nicer. It can drastically affect your conversion rates as well. So in this example, the two tables — there's the links underneath the orange buttons that you can see in the left one. That was taken out, which added a little more white space in between these two tables. And because the person did that and they did a test, saw a 20% improvement in engagement, 5% boost in products added to the cart, and a 33% improvement in customers continuing through their purchase. So white space not only just looks nicer, it does affect how much money your site can make and your conversion rates overall. Back to the little widget, and we just add some more white space.
The things I did here: I added some more space around the edges, kind of beefed up the margins around the edge. I also normalized the spacing in between the elements, so between the headline and the content, content and the form, form and the button. I also added a little bit more white space in the form of line height in between the lines of text in the content so it doesn't smush all together. And the headline also has a little bit more space added as well. So when it comes to clutter, and it comes to visual design, the things to remember is just to reduce visual clutter by keeping the number of fonts and colors low, adding white space, and lining things up. Aiming for a clean design, which, again, is one of those big trends going on right now, is one of the fastest ways and easiest ways to have a less cluttery and more professional looking design.
But we can't talk about design without, like — We can talk about how the design looks, but really the most important thing about design is how it works. So whenever you're designing something, try to figure out what the most important action is on your design, and try to make that action or whatever the person on your design needs to do, make it easy for them to do it. This is why buttons CTAs, button call-to-actions are usually a brighter color so they can stand out, and so someone doesn't lose the button; catches the eye. Someone knows that this is the primary action of this form. So for the website that I built for Hello Web App, I had a little bit of a design challenge on the homepage where I had two buttons. But the main one that I want people to look at and see and hopefully click is the "get the books" button, which is why it's bright green.
Now if you go to other websites, this website is a very subdued color palette, it's very dark gray and blues, but the action button is bright blue in the middle. It doesn't just have to be a homepage and a button on a homepage. The Wealthfront Engineering blog — you can argue that the reason why they have this blog is to attract engineers to join their company. So as they write about engineering, hopefully someone comes to their website, goes, "Hey, these people are pretty cool," and then the sidebar, it says, "Hey, interested in what you have to see here? Apply for a job." And that's the reason why that widget is bright green, so it doesn't get lost and it's eye-catching. So essentially, pay attention to your goals. There's so much more I can say about user experience. But the main thing is just to pay attention to your goals. Make sure that whatever action you want your users to take, make sure it's easy for them take it.
I don't really go into usability testing here, but a great way to test the experience of your website is just simply to sit down with someone and have them run through it. It's kind of hard to do that because then the person can find some things that are wrong, and then nitpick, criticize your design. But if you can remember that it's for the good of the design, the good of what you're designing, making sure someone else looks at your design, tests it out, it's a great way to run a quick usability test, and make sure your goals and what your actions you want your users to do — that those actions are easy to find and use. So, to go back into clutter a little bit, I want to talk a little bit about content.
So when it comes to running content for websites, a lot of people tend to write way too much. Now, you've seen the "about" page on someone's website where they're telling you their entire life story and, like, paragraphs and paragraphs and paragraphs. No one reads that; maybe someone will read it, maybe their mom. But usually people on the Internet, they really skim. And big paragraphs on a website or a landing page are a sign of clutter. They're kind of intimidating. So, when it comes to content, less really is more. Big paragraphs are a sign of clutter, and break into bullets if you can. Try to shorten your sentences, make smaller paragraphs. If you can't do that, one of the easiest ways to break something out is to break into bullets like this.
So on the left, it's kind of a big paragraph, it's hard to read. And just by adding some bullets, makes it a little easier to jump between the important sections, because those bullets give the eye a bit of a landing place. But we can increase the readability of this by adding some bolding. So when someone sees this paragraph of content, they can read — very quickly see the bolded sections, and the bolded sections highlight the most important part of that paragraph. If someone is skimming — makes it easy for them to see what's there and if they see something they're interested in reading further, then they can stop skimming and read the paragraph in full. But, like I said, white space is the ultimate clutter reducer, and this is a great place to add more white space if you can, by adding a little bit of space in between those bullets.
Makes it super skimmable. So, I love Read the Docs. I just spoke at Write the Docs; Eric Holscher is a friend of mine. And I was prepping for this talk, and I was thinking about ultimate clickable CTAs, and I was looking at this like, "Everything is gray." So the button on the homepage is, on hover, bright green. So whenever you have a website, and this is what I would recommend to him if he asked my opinion, which he hasn't yet. I'm just talking about it on stage. [laughter] I would say, "Hey, this is something that would be really easy to test here, "to see if more people search the docs if that button was a brighter color." But we can test other things, because I just talked about content. And that content is really quite lovely. You know, "What is this place," that paragraph of content. This is not as pretty, but if it was broken up, I would argue that this is worth testing.
By breaking up that content, the paragraph of text, into bullets, adding some bolding to, again, highlight the important parts of the sentences. I also — that headline saying "What is this place?" I answer that question right at the top so that people — you know, a little bit quicker to see the important information. So again, not as pretty, but this is something when it was like usability — you lack something, like little improvements to this web page that I would recommend. But we can't just talk about content without talking about headlines. So when it comes to headlines, it's often really tempting to write headlines and introductions to web pages as whatever you're designing for, what is it doing, but it is important to remember that it's — you should be writing for your reader in mind. I think, whatever you're designing, what benefits you'll be giving to that reader.
And also of course, keep it short and use natural, friendly language because you don't want to talk like a machine; you want to talk like a human. So for example, this is technically what my book is about. It is an introduction to building web apps using Python and Django. But this is what the homepage says: it's "Learn how to build a web app." It's a lot easier for readers and for people coming to my website to see how this website, how my books might benefit them. Now you can argue that I could probably update this and test it, but this is lightyears ahead of that. And changes like this also can improve your bottom line. This article goes over how a simple headline change improves conversions by 52.8%, and all they did was took their headline and talked more about the benefits to the reader rather than the details of what something did. So we're not done with the widget. You notice that the headline here — "Download my book on learning "how to program Django" — that's kind of like, "Ehh." What if we updated that to say, "Hey, learn how to make web apps"? The button at the bottom, as well as the form — I also — everything I updated, the content too.
The content is shorter. The field, instead of just "email address" — a little more human by saying, "add your email here". The button is a little more actionable; "download" is still an action verb, but "send me free info" kind of gives a little bit more information to the person looking at this widget. They're like, "Ooh, free." So during this, we've gone from this widget, to this, by applying small, little changes. Principles, applying it here. You can kind of see how this can make a cleaner, more usable design. Quick sidenote about images and imagery because we've been really only talking about text and color and whatnot. In terms of some image principles, some guidelines, you can accomplish a lot with just type and screenshots, which is why earlier versions of this talk, I actually didn't talk about images. Stock photos, there's a lot of stock photo websites out there, and a lot of them look like stock photos where the person's like: [poses] Someone coming to your website — and you want to have a photo of someone on there, they can immediately see it's a stock photo, and it's kind of like, "Ehh." And then photos are also hard because you have to pay attention to the file size.
On my website for my book, I had that gigantic image, and that was something I had to optimize a lot to make sure my website wasn't horrifically hard to download. Little, little like design updates can really make a homepage sing. These little icons here on the Stripes website are really quite lovely. So, designers are gonna yell at me. If you're looking for custom icons for your site, I am totally okay with anyone going to Fiverr or crowdSPRING and just seeing if there's a designer out there, for not a lot of money, can build something for you. Because I totally understand building websites, not having a lot of money to hire a professional designer, and I think this is a great way to get imagery — custom imagery for your site, without paying a lot of money. There's a lot of free resources out there that are really great too.
So if you really want a giant banner — this is actually unsplash.com; the name of it kind of got lost there. But Unsplash has really lovely, big images that are free to use and download. There's also PhotoPin which allows you to search for Creative Commons imagery. And little designs, even if you can work with a local designer or an illustrator. This is my friend's website. He worked with an illustrator to build these adorable illustrations on their homepage, which kind of takes their homepage, makes it look a little more special than just, you know, screenshot and text. So one thing I want to emphasize that if you're designing, you don't have to be original. One of the things I tell people is that if you're sitting down to do this design and you start with a blank piece of paper, and you start from scratch, it's a lot like trying to program without the use of Stack Overflow; it's near impossible. I use inspiration — I don't copy, but I'm heavily inspired by so many different sources for anything I design.
So, "A Book Apart" heavily inspired my books. And there's a lot of sites out there you can use to pull in inspiration. Just find things — find sites that inspire you or things that you want to emulate, and use them in your own designs. So this is siteInspire, and Unmatched Style, and CSSMania. There are so many different websites out there to just showcase good design. So when you find a design you like, you can kind of pick out the things you think are working well and that's something that's going to help you train your design eye. So for Slack's homepage here — I mean kind of just figure out, okay, why does this look so nice? One of things they're doing is adding those little squiggles in their headline. That's something you don't really see, so that kind of stands out. They have lots of white space. Their form has a darker background which catches the eye and they have that bright green "create a team" link.
They have their text, they have bolding, strategic bolding for the important parts. There's lots of things you can go through and figure out what Slack is doing well, and as you find things you think are working well, try to figure out what is working well, and that'll help train your design eye. Because, it is totally okay — Picasso says, "Good artists copy, great artists steal." Banksy comes along, says, "Bad artists imitate, great artists steal." There's full-on books about how you can steal like an artist. Like, this is a thing: all of the artists, we just, like, get inspired by others. So don't try to design from scratch; find things that inspire you. Last but not least, I want to give a quick overview of a design process just to show how I work. So if you're sitting down and get an assignment or you want to build a homepage, first thing you have to do is go out, find the inspiration, and sketch your ideas.
And this is my actual Feedly reader where I can just go through these top design websites, scroll through until I find things I think will be relevant, and I can save them and pick out everything I like. I usually sketch them, and FYI, my sketches don't look like this. This person is totally showing off. Like, it bothers me to see sketches like this; I'm like, "That's not how it usually looks." My sketches are just squiggles and boxes. It's just a way for me to remember important parts. Things that I like or lay out ideas I like. These are the sketches for that Hello Web App homepage. And then next thing, in terms of mocking it up, you can go straight to HTML if you're building something, but mockup stage is a really great way to see something as it might look and have the ability really quickly, the ability to move things around. So this is one of my husband's projects. This is not a pixel-perfect mockup; this was just an idea of what the content should look like. Decided that, instead of a paragraph, again, to use bullets.
It allowed us to figure out, okay, we'll have a big form, we'll have the form just going down this column, we'll have these two links. You can use a lot of different — you don't have to make something that looks like a full-on website. Just mock up where your content is going to go. Sometimes I do do full-on designy mockups, but really it's kind of like just doing a wireframe is good enough just so you can see your content and see how people will use your website, or whatever you're designing. And there's a lot of difference services out there like Balsamiq for wireframes that are really great. You can use anything; you can use GIMP, Illustrator, Sketch, Balsamiq, anything, whatever system works for you. Create your boxes and lines and text. Makes it a little bit easier than just jumping straight into HTML. Makes it easier to move things around. And then build it, of course, which is a whole other presentation. My thought process every time I sit down to design is this.
Every single time. I feel like every time I sit down and I start sketching, it's just, like, this awful, awful experience, like, "Oh my god, I'm a terrible designer." And I assure you that if you sit down and design and this is your thought process, this does not mean you're a bad designer; it simply means you are a designer. So this is only the starting point. When you're working on building whatever you need to build, remember to reduce visual clutter. You can do that by keeping the number of fonts and colors low, adding white space, lining things up, making sure your content is short and easy to skim. Make sure that your goal is easy to find and use. Keep your content simple, friendly, and to the point. And definitely practice, practice, practice. Because the more you work on design, the more things that you design, the easier it will get. So like I said, I'm doing a book on this. hellowebapp.
com/web-design will get to a form that is — I'll send only information about this book, hopefully when it comes out, when I start writing it. Otherwise, thank you very much. [applause].