 I'm a roughly designer at GitHub. I would call myself roughly designer because I've actually been writing Ruby for about six years and that's kind of how I got to start designing was building things and I wanted it to look pretty. If you want to find me on the internet, my handle is pretty much cane-eath everywhere on Twitter, on GitHub, Flickr, anywhere you want to look. That's what you'll find. My blog is WarpSpire and if you want to look at these slides afterwards I'll post them up and they'll be able to be here shortly after. So I want to start off a little bit about what's important in life, right? My favorite beer. What is my favorite beer? And I tried to think about this a little bit. Dogfish, 90-minute, I think is an amazing beer. I love giving you guys a cup of beer. The 120-minute is also awesome but I cannot drink that lightly. I just had a couple of those and I'm pretty much done with the 90-minute. But what I thought about it, I don't know, I love Firestone Double Barrel Ale. I don't know if any of you guys have had that before but it's a pretty delicious, amber-ish ale. This is kind of what I grew up on. This is the first good beer I had, I think, in college when I decided to actually pay more than 30 cents for a beer. But, you know, I can kind of always go for a black-view porter. I discovered this through my PBX friends a few years ago and I love it. In Sierra Nevada, Sierra Nevada is always there, right? It's a pretty much every bar, delicious pale ale, great thing. But, luckily for me, I don't have to choose. I work at a company where we have a four-tap kiggerator and a custom green octa-ket top. So, I'm kind of lucky like that. I guess I like that. Also, I like to pull on the snow bit. I decided to learn how to snowboard this year and I've been going up to Heavenly all the time. So, I think that's pretty much my talk, I think. So, if I'm a designer, what am I doing at Ruby Conference, right? That doesn't really make a lot of sense, I don't think. But the truth is, developers actually end up designing a lot of things, even if they don't think they are. Stuff like their documentation for RubyGems, things like admin sections for websites, mini-apps and side projects, things that maybe your designer doesn't have time to help with or maybe you're just doing it by yourself. The truth is that you actually end up doing a lot of design. But that's actually not a really good point in that, I don't think. More importantly, designers versus developers is a false separation. It's really a spectrum. You cannot be a developer or a designer. You just kind of lie somewhere in between and you have skills that are better at different ends of it. Hello, there we go. And in the end of the day, design is just as important as tech. It's all about the end product. It doesn't matter if you have an amazing technology infrastructure, if the design doesn't look good and your users don't enjoy it. So I don't really think that you should want to be a better designer. A lot of people talk about designers who can't code are worthless, but how often do you hear developers who can't design are worthless? You don't hear that enough. And I don't want to insult you or anything, but it's the same exact thing. When you say designers can't code and they're worthless, you might be thinking about yourself and be like, maybe I'm a developer who can't design. So you should want to be a better designer. It's going to help you build better end products. So now I want to talk a little bit about how I got into the design field. I guess how I became what everybody wants to call a designer. I just wanted to build websites. I was in seventh grade and I thought Workout 2 was pretty much the most amazing thing on the planet. And I wanted to share this with the whole world. And websites were pretty awesome ways to do that. And so I wanted to build websites. And how do I do that? Steal everything. A few sources of great way, trying to look at designs. I just blatantly rip off everything. I don't recommend that for your work stuff, but it's a great way to learn, right? You just start stealing stuff and eventually you build up the skills that you need to become a better designer. And as I was stealing stuff, I realized that good design is really just kind of a collection of hacks. Maybe it's the way that my mind was working. And that's why I want to call it like design hacks for the pragmatic minded. Because I'm a very pragmatic minded individual. I like simple rules that I can build on top of each other and apply it all of the time. And that's kind of what I want to talk about. So what this talk is not about, it is not design theory, anything I learned in school, or really organized or coherent. This is just what it is. It's going to be a collection of hacks, right? Some tips to polish your designs, some quick things to make it look better. And a couple design strategies to hopefully give you a better understanding of where I'm thinking about when I'm designing websites. So let's start about type. And what I mean by type is fonts, the way the text is laid out and everywhere. Good typography really is 90% what you aren't doing. Stop trying to be fancy. I think that trying to be fancy is the enemy of most developers when they're trying to make good typography. Classic fonts go long, long ways, right? Alvetica, Ariel, Times New Roman, Georgia, Monaco and Korea, those six fonts right there. You can make amazing interfaces with this. Some of my favorite design websites on the internet today use just these fonts. So don't try to be too fancy just because you have this awesome font somewhere that you can use through Typekit or something. Maybe you don't have to use it. Start off with something simple and build from there. Instead of using different fonts, a good thing that I like doing is playing with the font weights and styles. And what I mean, styles, I mean italicized, underlined, borders around it, things like that. It's easy and less risky. So here's a little piece that I like from Twitter.com, this little section, tweets containing, I don't like the functionality, but I like the design of it. And what this really does is it's all Alvetica, it's all one font right here. It gives a lighter weight font for the beginning of the setting and a bold and just regular. So if you just mix and match different weights, it's very easy to get a coherent design and not that risky at all. Here's another thing, increase line height to improve readability. Standard line height is the distance between the lines of text. So the distance between the bottom of weird GitHub and the top of you probably know. By default, browsers use a pretty compacted line height. And if you just increase it, it makes things a lot easier to view. So you can see as it switched back, when you increase the line height, you increase the space between. It's not that noticeable on the slide because there's actually a little bit of text and the font size is huge. But when you start talking about smaller font sizes and longer line lengths, it really starts helping out. Here's another awesome thing. It's a tool called a baseline grid. And it's a great tool to align your type. I don't think you should be super obsessive about it, but it's a great tool. What is it? You line out a vertical grid. So I have a vertical grid here of 50 pixels. And you choose font sizes that fit within it, hopefully. So if you use font sizes of 100 pixels and 50 pixels, you're going to be able to spread things out really easily. But you're not mandated to do it. The idea is that you line up the baselines of the text to one of those grids everywhere. And if you do that with images and tables and borders, you get a really nice vertical rhythm to your designs. It's very easy to layout pragmatically. So now I want to talk a little bit about color. Color, of course, is a great way to highlight content to make things stand out to make people look at things. It's also a great way to set expectations, right? When you see this text here, you see the blue text of GitHub Trump. You're probably going to want to click on it. And that's of years and years of learned behavior that you see blue links on the Internet. Probably mean you can click on it. But you can do this a lot more through apps, too, by using specific colors to denote specific actions or specific functionality. So it's a great way to teach users what something might be. But using colors just for the sake of color can be actually pretty distracting and harmful. I like the colors here. That's pretty awesome. And so what I think is a great tool to do this is start your designs in grayscale. Make everything grayscale, build it out, and add color later. What that does is it kind of forces you to really think about why you're using color rather than I should probably just add some red to this design. And that's a great tool, I think. I do this a lot. I'm probably guilty about staying on the grayscale sky a little bit too much, but I guess that's kind of a personal choice at that point. A lot of people, when they try to use color, they use a color background and then they start putting gray text and gray borders around it. This is a super pet peeve of mine. I don't know if it's going to work out too well on this projector, but I guess we'll see. Add some of the background hue to the text and the borders around things. It really is a great small touch. And what it does is it makes it feel like you're using a darker version of the color rather than gray. And a lot of this is just because people think, oh, black looks a little bit too black. I should reduce the contrast and they take black to gray rather than black to a grayish blue. So try that out on your designs or borders, text. It really helps out, I think. If you ever play around with Photoshop or something, you wonder why your grayness looks so draft right? Everybody, it should be pretty easy. I just go in here and click gradient. And I see all these awesome designs on the internet and they're like very vibrant. But why does my stuff look so drafty? The secret is something called a color mode, right? A blend mode. So blend modes choose how to apply one layer on top of another. So if you start with one layer of a black to white gradient and below it you have blue, you can use something. This is an overlay blend mode. And it makes the color really vibrant. So if you look here, it's kind of drabby. If you go back here, it's pretty vibrant and kind of light. And here's another example is color burn. It makes it even more like a rich color. So try out different blend modes when you're creating gradients. I think you'll find out that you're going to be able to keep a lot more vibrant colors and a lot more livelyness to your design. In the end of the day, what I'm trying to say is that adding black or white as a staple opacity to colors actually desaturates them. When you want to make them darker, you want to add black. You also want to saturate it and make it a little bit more richer. When you're adding white, you don't want to wash it out. You want to make sure that you're creating a lighter version of the color. So that's a great way to play with gradients and make them a lot nicer looking. So cheating with stock icons and images. I think a lot of people are afraid to use stock icons and images. They think they're like cheap or a coward's way out that is not true at all. Stock icons are awesome. First off, the cells are hilarious, right? Great way to spice up the wording. I don't know if you know this, but single women love laughing alone in their cell. It's pretty sweet. Just check out the restaurant websites. You'll see what I'm talking about. Seriously, OptiCat is a great example. OptiCat was something that Tom Press would have found on iStock Photo because he wanted to spice up the 404 page. As it turns out, OptiCat has become a huge part of the GitHub brand. We have OptiCat stickers, OptiCat shirts. We've modified him. He's all over, so he's a very iconic piece of GitHub. But he started off as a little stock illustration that Tom was looking to make his web page a little bit better. Another thing is icon sets. Icon sets are crazy cheap and crazy helpful for designs everywhere. You can use them in buttons. You can scale them up and use them as backgrounds, use them as infographics. They're so, so useful. I highly recommend getting one. As far as how cheap, Bitfoss is a great example. 648 icons. They come in PNG and vector formats, which means that you can scale them as big or as small as you want. They actually have some available as a font-face compatible font. You can use them without using actual images, which is also awesome. 240 dollars. Think about how much you get paid and think about how much that might be useful to you. Think that you might be able to use an icon set for hundreds of projects. I bought my Metacons maybe a year and a half ago, and I'm still using them. It's a really good value. I highly recommend getting it. It'll make things look a lot nicer, a lot easier without having to think, oh, should I make a little icon that I'm going to draw and Photoshop and it's probably going to suck. I suck at creating icons, and basically your time is better spent elsewhere. If you're not a great photographer and you're not a super professional photographer, go look at iStop Photo and buy some photos. It's really not that big of a deal. Alright, so as far as a greater design concept, I guess spacing and alignment is one of those things that really makes a design look good, and it's one of the biggest problems I see with things that I would like to call developer design things. I don't know if you don't think about it or if you're not aware of what's going on, but it's really something that bothers me. Your text is really trying for padding. I see this all the time. It goes right up to the edges of your containers. All you have to do here is bring the text in a little bit. But on the other hand, a lot of people kind of go crazy with the padding. They put too much in and they never know how much padding you use. So a great tool that I like to use when in doubt, wow, can you see anything there? That's crazy. Is to use equal padding on the left on the sides and on the top and the bottom, and make sure that the padding equals the margin equals the plot size. It's a great way to make things generally look good, and you don't have to try too hard. Is black on black considered good stuff? Yes, definitely. You saw the important parts of it. So grids are awesome. I don't know if you guys know too much about what grid is, but a lot of people think it's vertical and horizontal. That's kind of weird because on the web, when people are talking about grids, they're generally talking about just horizontal alignment, so just having vertical grid lines and aligning it that way. It's a lot like designing your, creating designs with Legos, right? Legos was really easy to make things that were awesome and symmetrical. The reason was that things only snapped into place in certain parts, like having a pixel unit who have maybe a 30 pixel unit with set gaps in between in between elements, and it's a great way to just kind of like selectively build stuff and make it look very professional and aligned without much effort at all. Speaking of alignment, please, just align things. I don't even know how to say this. Alignment is not hard. It's not a special skill. It just takes effort. Lines line up. Okay, line them up. There you go. Not that hard. Please, think about it. Look at your stuff. If it's off by 5 pixels and like on the jagged edge, that's just going to, it drives me insane. So, another overarching kind of like design concept I'd like to talk about is something called visual hierarchy. And visual hierarchy sounds really fancy, but really it's all about boxes within boxes. What I mean by that is that related elements should be grouped together. So, here's an example thing. We have a little user box that might appear in the top of your website. You have the, you have the user's avatar over here, their name, maybe some points that they've earned, and some links to the stuff. And why this is good visual hierarchy right here is that if you look at this block, the octaket avatar really owns this block. It kind of starts it off and anchors it. So, you should think that everything within this block is going to descend from that idea of what is anchoring it visually. And if you look at it, these links to the block are only relevant to Scottacat, right? No one else is. No one else can, those links don't apply to anyone else on the website. They're specifically for him. And always think about what owns the box, right? What if you, you see this extra space and go you know what, I'm going to put a site search here. But it doesn't belong, right? That's not owned by Scottacat. This is something that's owned by the site. So that's what I mean by think about what owns the box and make sure that related elements are grouped together. And again, UI design is really about a series of boxes within boxes. And I don't mean actual boxes. I don't mean squares. I mean boxed elements visually. And that's really what visual hierarchy is all about. So, here's a website Tumblr. I don't know how many of you guys use it. But I'm going to show you a little bit about what, how they use visual hierarchy here. So, if you look at this top header right here, we have the logo which really anchors that top box that I'm talking about. And these global actions here, so dashboard, explore goodies and account are all like different sections of the Tumblr website that you can go to. So they're really like global links that anchor there. And if you look at this next box, really this whole column right here is owned by the activity stream, which means other things that people are posting and things that you're posting as well. And that's really what you want to think about. Everything in that column should be owned by the activity stream. And so, if you take it one more down, one more box down, you see that this is a post by Pi here. And it's really owned by this avatar here. You have this post on the right, and if you hovered over this avatar you'd actually get functions to follow unfollow, things like that. And if you go one more, you'll see within the box there are actually post specific actions. You probably can't read that text, but it's a reply blog, and then an icon to like it and an icon to respond with a photo. But those are also post specific. They're not related to Pi. They're not followed Pi. They are actually specific to the box. And that's because the post owns that box. So some tools to, some like general concepts to make sure that your visual hierarchy is good on your pages. Write out an outline of your UI elements. This is how I start most of my designs really, is opening up my moleskin and writing down things like this. I'm going to write down header. What is the header going to have? It's going to have logo, global navigation user box. And then another section might be the dashboard below it that I'm going to do. And it's going to have this activity stream and this repository list within those, it's going to have all these new elements. Why I like this, it really forces you to group related elements together. So when you're writing something down as a tree list, it only makes sense to group related elements together. Whereas if you're giving a giant monitor campus to design something, it's really easy to group unrelated things together. And each of these trees is going to represent one of those visual boxes when you're done. So you can take out dashboard and everything under that should be in a containing box somewhere. And everything under activity stream, my friends actions and my actions should be within that box. So maybe you have tabs for my friends actions and my actions. Make sure those tabs are within the box of the dashboard somewhere or within the box of the activity stream. I see this a lot people use global navigation as tabs for content that is only a part of the page and it's kind of really annoying. But if you write it out as a tree, it kind of forces you to think where should this stuff be grouped together. Another tool that I like is something called the Squish Test. And what the Squish Test is, is you take a screenshot of your design or a cut from Photoshop or something and you shrink it down. And when you shrink it down, you really get to force yourself to look at the elements and how the group together, rather than being able to read pieces of text. And the point is that you're going to obscure details here and see how the design kind of fits together. So maybe you have a thousand pixel wide screenshot. You squish it down to 400 pixels and kind of look at it, see if it makes sense and it's a good, it's a really good reality check on things. And it also helps you see things like call to actions and can you actually, is that really what is anchoring the page visually, the thing that I want it to be? Maybe it is, maybe it isn't, but this is a great pragmatic way to do that. So now I want to talk a little bit about how to improve your presentations, which is a pretty big pet peeve of mine coming to a lot of tech conferences. And so increase your font size. I cannot go over this enough. You cannot have a font that is too big on a slide. Make it bigger. If it doesn't stretch to the edges, you're probably doing something wrong here. Well, in the lines of that, 80 characters is great for a text editor. Terrible for slides, seriously. If you have 80 characters, you're doing something terribly, terribly wrong. Way too many. So Truncate Strings, do you know that Ruby Code doesn't have to be accurate in slides? How about that? It's pretty crazy. MRI is not embedded into keynote. You can make Ruby wrong and that's fine. You can tell people your syntax is going to be a little bit wrong for the sake of shortening things. That's great. But sometimes you do have a big block of code and you kind of have to go through it. And this is a terrible piece of code. It's very overwhelming visually and mentally to think about what this is doing. And how do you fix stuff like that? Step through one line at a time. So Truncate things on the top of the bottom. And just go through one line at a time. This is a lot easier to describe things and help people remember how it works. So maybe you start off with a slide like this and say, you know what, don't worry about it. I'm going to step through line by line. And then you start there and go through. Think about it, it's really not that hard. Some simple rules as far as like code goes. I think 40 characters wide is pretty much, it's pretty good goal. I don't think you should ever go past like 60 or so and make the font and about four lines of code vertically. If you have a lot of lines of code it's not just about whether people can read it on the screen. A lot of it has to do with mental overhead. People are listening to what you're saying, trying to parse what you're saying and they're trying to read code at the same time. They're probably going to fail somewhere. So if you only have about four lines of code that's a pretty easy thing to keep in your head. Create the font size as big as it will fit. You don't have to have the same size font on each and every slide. So if you have shorter code examples make it bigger just because it's going to be better. Always bigger fonts. And remedy over correctness. So like I was saying, there's no Ruby interpreter in Keynote, there's no reason it has to be syntactically correct. You just have to show people the idea of the Ruby that you're doing. And that's really important. So this is, right? Yeah, contrast. Contrast is awesome. Make sure your slides have good contrast. Do they look sleek? Increase the contrast, seriously. You don't want to do web design here. Web design is really geared towards people looking at monitors. Projectors are going to mess up things. You've already seen how crazy things are. This one's stretching stuff out wide. There's a little bit of red in there. It's kind of awesome. But you want to make sure that people can always read the main text or the main idea of what you're doing. And some ideas of how you accomplish that that I think, add a 75% white overlay to your slides as you're going through. And see if you can see it. 75% might seem like a lot, but a lot of projectors suck. They'll either wash things out or not project it up. After you've done that, add a 75% black overlay to your slides and see if you can read what's going on. And what that's going to do is that it's really easy to see contrast on monitors, but not on projectors. So, seriously, contrast, font size, code samples, think about it in your presentations. So now maybe here's a collection of stuff, but really not. How do you become a better designer? And this is something that's kind of weird for me because I never went to school for design. I never had any official classes, so I just kind of learned things by myself. Like I said, steal everything. Try to recreate a button in Photoshop. And then try and recreate it in CSS. Try to create like an OSX style button. And see how the gradients are layered, how the highlights work, what styles they have on their text. And by going through these examples, it really forces you to learn how people create designs. And the more you steal, the more you understand the general concepts and hacks that you can collect together. Try to build a website from a screenshot. So take a screenshot of it and try and rebuild it. See if you can actually recreate the visual styles yourself. Side projects. I'm a huge fan of side projects. Whether it's your blog, a gem, maybe a gem's documentation page, but have side projects. The great thing is you can constantly redesign them. So when I was really trying to become a better designer, I'd probably design my blog about somewhere on average about 10 times a year, right? I'd redesign it. And who cares? It's my blog. I get to do what I want. That's the glory of side projects. It's really no risk and it's a great way to experiment and learn. Practice, practice, practice. You're not going to become a better designer overnight. It's not something you can read a book and be a professional ad. You just got to try and do it every day. So that's it. AutoCAD stickers work awesome on Snow. Any questions? Yes. So you talked a bit about color. You didn't talk about accessibility or dealing with people who are color blind. And this is a bit of a hobby horse I like to ride. I know there's some good tools on Max in particular, I don't know about other classrooms, for viewing designs as if you were color blind. Do you ever do that? Do you pay attention to that? Is that something that you would talk about? So one of those tools that I was talking about to start with grayscale and add color later, that's a great way to kind of sidestep that issue. The way that people are color blind is that they see different cues and an orange and a green might look actually the same color. But when you start with grayscale, you force yourself to design with a contrast, maybe a lighter gray and a darker gray. And if you have a light green and a dark orange and somebody who is color blind to that, they're actually going to see the difference between that still because you're going to have different lightness in things. So that's another advantage of starting with grayscale and adding color later. This might be a weird question, but I'll pick to us, does the license follow the person that's live? As you go through projects, do you use different sizes? Yeah, generally, most icon sets and stocks up is a per person usage. Definitely read the licenses and see what you're doing, but the icon sets in particular are generally geared towards freelance designers, and so they're very much like, share between projects but do not distribute them themselves. Yes? I'm going to take the opposite perspective of my friend here, Josh, and ask you about color on the other side, which is, have you ever read anything by Donald Muth about the use of color in information theory? Probably not. You really ought to because I think you did a lot of that. Excellent. And everyone else did. Can you repeat this? Repeat what he was asking. He was saying that Donald Muth read a lot about the idea of color theory and use of color in information. Use of color and information, and it's a good resource to read about how, I guess, I'm assuming how people react to color in design. Use last spot, use it. Yes. Yes. Can you talk a little bit about any hints or tips you have as far as using progressive disclosure to reveal sort of depths of information? Because I noticed Github has done a couple of interesting things with that. Like, you know, clicking on source files and having that sort of slide in from the right. Just curious if that plays a role. Do you mean like, I guess there's two different ideas of progressive disclosure to me. A lot of them is like hiding elements and like collapsing them, and then expanding them later. Or are you, I'm not sure. I would just say any sort of element in the page that reveals other information that you don't see initially. Gotcha. The good tool of that is using kind of first run things. So I don't know if you've used the Github file finder, but the first time you use it there's a little banner that shows up that explains what it is. And then you can click X and it never shows again. That's a really good tool I think for application design is showing little tool tips and over help people in the beginning and then allow them to hide it forever and ever again. In general I like to over dispose at first because people will expand things by default and make them collapse at the first time and then maybe subsequent things or collapse. But if you show things at first it forces people to see what it is and it's a lot easier mentally to collapse something because you want it to go away than to expand something that you don't know of their stuff below it. You spoke briefly about font leaf and font style and the client language in a way to your style of body. What do you think the role of tech shadow is? It really depends I guess on the visual style of what you're doing. Can you repeat? Yes, he was asking what the role of tech shadow plays inside of making things easier to read and such. A really good example is using white text on top of a darkish gradient background button. If you use that it's actually kind of hard to read but it turns out if you add a text shadow which is actually negative so it's going up into the left and it's hard it kind of gives this idea that it's chiseled into the button and the end result is that it actually makes it much easier to read and by the same vein you can use a dark tech shadow on top of the light button to actually make the text easier to read. But you want to make sure a lot of people use tech shadow and it ends up just making it blurry. If you're just using this really light gray tech shadow on a white background with black text it's just going to make things blurrier so as far as making it easier to read I say just look at it and try it out. I've heard a lot of people recently will style key tags with this light tech shadow to make it feel like a different font even though it's not and sometimes they can see through it but it's a little too blurry. Yeah definitely. Just be careful with that stuff I guess. Cool. Alright well thank you guys.