Transcription
[Digital music]
[Applause]
Tracy Osborn: Whoo! Yay! I’m so happy to be here. Hi, I’m Tracy. I am a Californian. I live in Toronto, Canada, now, and my username on the Internet is @limedaring, not @limedarling. That’s a common mistake, including by me. But, that’s where I’ll put my slides up on Twitter afterward. That’s also my Speakerdeck username, so I’m referring to a lot of recommendations, resources, and URLs here, and you don’t have to write them down. You can just simply get the slides after the talk.
So, I do a lot of things. I’m a developer, a designer, a marketer. I write books. This is my first book, which is called Hello Web App, which teaches Web app development using Python and Django. My most recent book is called Hello Web Design, and it’s actually based on an earlier version of this presentation. I gave this presentation at a lot of conferences a couple years ago and, after that did really well, I wrote the book about it, and now I’m here giving a revamped version of my presentation for the first time, so super cool, and I have some books on me too if anyone wants to check them out in person.
So, what do I mean by design? When you have a presentation that’s called Design for Non-Designers, it’s a lot like saying computer science for non-developers, and you have to teach that in, like, 45 minutes. It’s like, what? That’s a really, really huge thing to narrow down to a small amount of time.
Design - there’s so many different facets of design. There’s visual design, UI, UX, sound. Other ones are industrial design, human factors, all these other different parts of design. Design has lots of different specialties.
In this presentation, I’m just narrowing it down to just something very simple. How do you create an interface or design that works well? In this presentation, I’m going to be covering two main things. One is talking about just one design principle to remember, just one thing to take away from this talk, and then how that one thing applies to the major design concept you’ve probably already heard about. I’m also going to go over a very quick overview of the design process. For someone who might be jumping into doing designs for the first time, it’ll give them a place to start and a roadmap to follow.
Now, I know there are a lot of designers here in the audience, and I’m hoping that this presentation -- you know, you’re not falling asleep in the back corner because you’re like, “Oh, this is not for me.” I’m hoping this presentation will also help you teach design. One of the things we forget when we become skilled and become designers or developers is how hard it was to get to that step to where you are right now. We forget that there are a lot of steps and steppingstones along the way, ways that you’ve learned and, oftentimes, people teaching beginner concepts will take all the knowledge that they currently have, and they try to throw that at the beginner and be like, “Here! Here are all the things I’ve learned over the ten years. Learn that.”
I have a lot of opinions on how beginners should be taught, and this is part of that reason why I wrote this presentation and why I write my books is that my goal is to get someone from zero to one as fast as possible, and then best standards and those advanced techniques can come afterward. Hopefully, this will give you the tools you can also use to help teach beginners, people who want to learn design around you if you are already skilled in design.
Now, you might be thinking, “Okay. I’m a developer, and I’m doing backend programming. There’s no reason for me to learn design.” Even developers have to do a little bit of design along their life at some point or another. I’m hoping that this will help you feel comfortable doing the design yourself, whether it’s creating a homepage for your open source project, to creating slides for your next presentation, to making your personal homepage. This is my own. My husband is a developer, and this is his.
Audience: [Laughter]
Tracy: Which is pretty cool. I like it. [Laughter] Hopefully this--
Even if you are a developer and you don’t have any interest in doing design, at some point you’ll have to create slides or a landing page or whatnot, and I don’t -- you shouldn’t have to feel like you have to go out and hire someone to do that. Personally, I do both design and development. Being able to do just enough in either of those realms has made such a good impact in my career. Hopefully, I can help you guys do the same.
Let’s get started. Let’s talk about clutter. My favorite example of clutter, you might remember websites like these. Ah, the ‘90s or early 2000s. I don’t know when this was. I mean, Go Daddy has a much nicer website, but this is such a great example of clutter where there’s colors, fonts, and arrows, and things are packed together. There’s an image of a racer lady, and everything is there. It’s the perfect example of clutter.
The one thing I want you to take away from this in order to help improve your visual design is to cut down on clutter. Look at places where you can reduce clutter. I’m going to take this little widget, this little login form, and walk through the major design principles you probably have heard about, how they apply to clutter, and how you can reduce clutter using these design principles, and we’ll improve the look of this form.
First up is the grid. Now, I don’t mean grid like frontend development, CSS grid, and all that whatnot. I’m specifically just saying, “Line things up.” When things are a little bit offset from each other, especially if you’re doing something like Sketch, Photoshop, or whatnot where you can move things and put things everywhere. Just by putting things on the same axis, the same vertical access or lining things up will make your design feel cleaner. It gives a skeleton to a design. It gives a bit of structure.
Now, of course, there are a lot of shortcuts we can use in Web design to add this grid in. A lot of the frameworks will include a grid system inside, in the framework itself. With bootstrap, if you want to have columns, you’re guaranteed the columns. If you’re using three columns in multiple parts on the page, they’re always starting at the same point, and it’s going to add to that feeling of orderliness and reduce that feeling of clutter and chaos. Foundation, Skeleton, most frontend tools are going to have a grid included. Then, soon, in the browser, there’s going to be a CSS grid, so you don’t have to worry about even having a -- well, not soon -- now-ish. You won’t have to worry about adding a framework.
We take our little widget. Not much to do here. I’m just going to line things up. I’m just going to make sure that the content that’s underneath the login header is lined up with the rest of the forms. Take those input fields, align them together, and make sure they’re the same width. Just kind of add a little bit of a structure underneath to make it feel a little bit cleaner.
The next principle is color. Now, color also can add to the feeling of clutter in your design. If you have lots of colors like that Go Daddy website, or just colors in different shades and everything everywhere will add to that feeling of clutter.
Some hints to get started when it comes to color is, when you’re choosing your colors, try to keep your colors complementary. What I mean by that, and we’re not going to go into color theory here. I have a degree in graphic design. We did a whole quarter on doing just color theory, which included me taking little pots of paint and adding, like, one drop of another color, and creating these swatches. Oh, my God - color theory.
But, you know, essentially, colors that are across each other from the color look really good together, which means you get to movie posters that often use blue and orange. Then you go on to TV Tropes and, of course, TV Tropes is talking about the orange/blue contrast. Everyone is like, “Why is it used everywhere?” It’s because it looks good.
Audience: [Laughter]
Tracy: Then, another shortcut thing to remember, again all these things can be broken, but they’re just good things to do if you’re a design beginner. It’s a good idea to use mostly neutrals and then reserve a pop of color to kind of highlight the important bits of your design.
Now, I don’t have time to go into the rest of the color theory, but there is an article in Smashing Magazine, which is “A Simple Web Developer’s Guide to Color,” and it’s excellent. It goes into color theory, as it applies for developers.
When I’m going through -- you know, we don’t have time to go into Photoshop and choose our colors and see how things work together. I find it much faster to use color palate websites to choose my color palates. Everything I do, I’ve been doing Web design since I was, like, 12, so that’s, like, over 20 years now, and I have a degree in graphic design, and I never start my color palate from scratch. I will always use a color palate website to jumpstart the building of my design.
There’s color.adobe.com. Pick; say that you want two complementary colors and kind of spin things around. See how colors look together. Google’s Material Design also has another color picker tool. Colormind.io is my favorite right now. It generates random colors that you can take and try to apply to a design. It gives you a place to start.
We’re going to take this little widget where we worked on the alignments, and we’re going to add some colors to it. Just simply green and orange, the text was made a little bit lighter, made it gray, made it easier on the eyes. The login headline is a darker green. But, instead of just using black and a straight orange, we started to build a nicer looking widget just by adding a little bit of color.
Next up, typography: Another area we have not enough time to go into. A little bit, some key principles to remember here: A good rule of thumb is to keep the number of fonts in your design low, like two maximum per design. Again, something you can; this is a rule you can break, but it’s a great starting point.
Just for fun, I took my personal website and decided to futz around and add a whole bunch of different fonts into it, keeping the layout and colors the same. Well, it looks a lot nicer when it’s only one, one or two different fonts.
You can do a lot with just a couple different fonts. This is my resume. Just by playing around with italics and spacing, and using thins and different colors, you can do a lot with only a few number of typefaces.
Another rule of thumb is to use fancy or display fonts sparingly because they can be very cluttery. By that I mean, again, another blast from the past in the ‘90s when you’d go into these free font websites and it’s filled with things like this. You can use them in your designs. It just can add to that feeling of clutter, and it’s a lot easier to take it out. You’ll have a nicer, more polished looking design.
Like I mentioned, you can use things like bolding and italics, all caps, and whatnot in order to up, like, change the styling of your text and make things look different with keeping the number of fonts low. But again, use a shortcut. Don’t go onto, say, Google Fonts and scroll through the hundreds of fonts trying to figure out which one to use. I prefer to go to curated front websites, and I can see, on these curated font websites beautiful Web type, which takes Google Fonts and pairs them together. Typewolf has a curated collection of the 30 best Google Fonts. Font Pair also showcases how fonts will play off each other.
Going back to our little widget, we’re using quite a few different typefaces here. There are face system fonts. There’s Georgia. There’s Times New Roman. There’s Arial. I’m just going to grab Droid, Droid Sans and Droid Serif from Google Fonts and apply it in. This is a family that works well together because it’s under the same name, Droid Sans and Droid Serif, and it’s something that’s a little bit different than our system fonts, so it looks pretty nice. It looks a little bit cleaner, a little bit not system fonty.
Next up, we’ll talk about my favorite way of reducing clutter, which is white space. White space is the ultimate clutter reducer. This is the thing that a lot of new designers forget to use when they’re working on their designs is to add a little bit of breathing room to their designs.
Now, you might know Hacker News, and it amuses me because every now and then in Hacker News there’ll be someone who gets a post on the front page. They say, “Hey, I’ve redesigned Hacker News. Check it out.” Every time, they have this little mock up they created in Photoshop and all of them have way more white space. It really bothers designers how lacking in white space that Hacker News has and it amuses me.
But, even when you have a design like the New York Times, someplace where you can’t add acres of white space, just by adding just a little can help your designs breathe and feel a little bit more cohesive and a little bit less cluttery. So, in this comparison between the before and after of a redesign, this is before and the after, the space in between the columns is opened up just a little bit, just enough that there’s a little bit more breathing room and it feels a little more cohesive. They also took out colors. The links are no longer blue. They’re now black. They did some other ways of reducing clutter. But, in general, just having a little bit more breathing room in those columns made a big difference to how cluttery the New York Times homepage could feel.
White space can make your website feel more professional and luxurious, which is why, when you look at these luxury websites, of course, they have acres of white space, like this huge, beautiful image, and this tiny little text right in the middle. You go into these top CSS websites, if you just scroll down, the ones that display fancy websites, every single of them is, boom, so much white space. It’s like a big trend right now.
It’s not just a trend, not just something that looks good. It can also make your designs easier for your users and it could affect your bottom line and improve conversion rate. In this study, one of the main things that they did in this before and after, this A/B test, is they added more vertical space in between the tables. Just by adding some vertical space there, adding some more white space, making it a little bit cleaner, it led to a 20% improvement in engagement, 5% boost in products out of the cart, and a 33% improvement in customers continuing through to purchase. It’s not just something that can help your designs feel less cluttery, but it can help your customers achieve their goal and hopefully make you more money.
Back to this little widget. We’re just going to add more space. We’re going to add some more space around the widget. We’re going to add more space in between the lines of text, between the text and the headline. We’re going to add more space within the input fields, and just let it breathe a little bit more.
For these visual clutter things, the thing to remember here is just to reduce the number of fonts and colors, add white space, line things up, and aim for a clean design. It’s a great way for beginners in design to create nice looking designs from the get-go.
Of course, when we’re talking about design, we can’t ignore user experience because it’s better; it’s more important how it works than how it looks. I can’t, again, also get into the whole area of user experience in this presentation, but a good thing to remember is just to focus on what your goal is. What do you want your customers to do? What button do you want them to push? What form do you want them to fill out? Focus on how well you can, how easy you can make that action, how visible you can make that action.
I made this mistake once. I was using Gumroad. It’s a service to help me sell from my website. They had this little drop-down where you can choose the theme of the storefront. I decided to choose one that looked really clean, but I completely ignored the fact that the button was a ghost button, which is an outline. I kept getting emails, emails over and over and over, of people being like, “I want to buy your book, but I have no idea how to do it.” It’s because they completely missed that that was a button and that they had to click that button in order to buy the book. I was able to change the theme and make it look a little bit more normal, but it was a big user experience lesson for me because, you know, these buttons can look very modern but, if they don’t look like buttons, they can be hard to use.
This is a place where you can look. If you’re writing a blog post and you want people to sign up for your newsletter, this is where you can look. My goal is to have people sign up for my newsletter. Instead of hiding that link within the text where it could be hard to see, by focusing on the goal, you could pull it out, add a headline, pull that form out, make a button there, make it easy to find and use. Now, that’s why buttons on forms like this are bright, how they stand out from the rest of the colors on the form. It makes it easy to find, easy to see and, hopefully, more people will fill it out as a result.
That’s why big headlines like the banners on these websites, this one has a very dark desaturated background with a bright blue button in front. It’s not just buttons. This is the Wealthfront Engineering blog. You can argue the reason why they have this engineering blog where they talk about how awesome they are and things they do within the company, and they have employees contributing these articles is that they want other people to go there and say, “Hey, this place looks like an awesome place to work.” There it is, the bright green widget on the sidebar that says, “Okay, cool. If you like what you see here, why not apply?”
In a nutshell, don’t just focus on making your stuff look good, making things look pretty, reducing that clutter, but also focus on what you want people to do. This is a great place where you can look at your analytics. A lot of times I do this presentation and people say, “All right, here’s my specific situation. What should I do in terms of design?” Usually what I say is, “Well, there’s no right or wrong answer when it comes to design,” which makes it really frustrating. But, that’s when you need to look at what your analytics are right now, make those design changes, and see what happens. That’ll help inform where your design should go better than following rules without thinking about it, without looking at your analytics.
The next thing I want to talk about is content because this is something that gets forgotten in a lot of designs. A lot of people are working on designs and they forget the content is an integral part of how well something works. Some rules of thumb here:
Less is more. It’s very easy when you’re writing content for your website. Say you’re doing an about page for yourself and you want to write your life story. The thing is, people on the Internet, they’re going to look at that giant wall of text and probably just check out. Less is more. Try to make things smaller, easier, and shorter. A good rule of thumb is about two sentences per paragraph.
For example, this is a valid English sentence. “Please note that although Chrome is supported for both Mac and Windows operating systems, it is recommended that all users of his site switch to the most up-to-date version of the Firefox Web browser for the best possible results.” That’s very long and wordy. You can say the same thing by saying, “For best results, use the latest version of Firefox. Chrome for Mac and Windows is also supported.”
Big paragraphs are also a sign of clutter. This is also something you need to look at when you’re thinking about clutter and your designs. Look at your content and see if you can cut things down. If you can’t just cut it down, you can also look into breaking something up into bullets or adding strategic bolding or adding headings.
No one is going to read the left paragraph here. It’s dry and boring, and you can’t really skim it. But, you can make it easier to skim by breaking it into bullets because those bullets are going to give those skimmers a place for their eye to rest.
You can make it even easier to skim by adding bolding where you bold the important parts of the sentence. You probably see this in a lot of Medium articles where they have bolding for random parts of the article, and it’s to help skimmers and keep people more engaged with the content as they’re skimming through the article. If they see something that interests them, the person is more likely to stop and stay and read more.
Of course, you have the ability to always add some more white space. Those bullets are really close together. Just adding a little more breathing room makes it easier to read.
It’s not just content. It’s also the headline. It’s not just your paragraphs, but also see what you can do to shorten your headlines. Just like content, try to keep them succinct. I like to recommend to use natural and friendly language. A lot of people will tend to speak like a robot when they’re trying to introduce their product, and the headlines are very, very important for getting someone engaged with what you are trying to showcase.
Talk benefits, not details; this is an important one because, if you have a website, you want to not just say what -- the headline isn’t just what it’s about, but what that thing that you’re showcasing can do for the user. For example, this is my first book. My books are technically an introduction to Web apps using Python and Django, but this headline is super boring and not interesting, and it’s way too wordy. It’s a lot nicer if the headline is Learn to Build a Web App. It tells a person what my book can do for them, not just what the book is about. As the first thing that someone sees, it’s very important.
This is also a place where doing those headline changes can affect your bottom line. In this study, all they did was change a headline to talk benefits, not details, which led to a conversion improvement of 52.8%.
We’re not done with this little widget. Now we’ve talked about content. You can see it’s kind of dry and boring. It works, but what if we added a friendlier headline of, Welcome back!” updated the button to be a little bit clearer what you’re doing, making the password recovery link just a little friendlier. Just little updates you can do to improve the content of what you’re designing, the design of your content.
Last, but not least, is images and imagery. This is a place where I recommend for design beginners. You can get hung up on using the right images and the right icons and focusing on those other aspects of your design too early. There are a lot of pitfalls when it comes to images. Stock photos look like stock photos most of the time.
There are a lot of good resources for stock photos. I have a few in a second. But, in general, just choosing a random photo of someone being like [display pose] can make your design look more dated and less interesting. Your design might be served better without that image. You can accomplish a lot with just type and screenshots. Try that first and then add those images as, like, a cherry on top, not the major showcase.
Of course, remember to pay attention to file size and don’t forget about retina-quality images. Those things go right together. There’s a whole thing about frontend development and choosing retina images and serving the right ones. It gets kind of exhausting.
But, you know, images and icons can really make a design shine. I shouldn’t use Stripe as an example because they’re just way too awesome. [Laughter] But, they have really great looking icons here on these feature columns. It would look great without those icons, but they’re, like I said, that cherry on top, on top of the design, to make it look a little bit classier, a little bit nicer.
In terms of finding images for a project, I like to use something like Unsplash, which gives you free, do whatever you want, high-resolution images, and they all look pretty modern and natural and not stock photo-y. There’s also PhotoPin, which searches creative commons images on Flickr, so it’s a good place for, say, blog posts or something when you want something a little bit more down to earth, less posed, a little bit more friendly and not as, like, polished. I use this for blog posts. I use PhotoPin.
Fiverr is another place where you can go out, and there are lots of different places where you can hire designers and try to get icons done. Fiverr -- this presentation is for people probably without a lot of money. You can obviously go out and spend thousands of dollars to get custom, beautiful icons done. But, if you need something quickly for, say, an open source project, you can use something like Fiverr.
I wanted to showcase a friend’s website. They’ve done a lot in their above the fold where they don’t have any, like, prominent images. Because they are a programming project, all they have to do is show a little bit of the console.
But, one thing they did that made them stand out was that instead of going for the traditional stock photography or icons or very techy things, they went, and they found a local illustrator just to create fun illustrations for their website. It was something that, for someone, for a website that was focusing on monitoring your apps and servers, and they worked on Ruby, to have these fun little illustrations made them stand out. That’s another option.
You don’t have to just look like everyone else. You can try to break out of the box and try something different and work with a local designer. It’s usually not as expensive as you would think.
This form works fine as it is without images. You don’t need to have the little bits on top; just using colors and type and whatnot. We add a little bit of a shadow, a subtle background pattern, a little icon at the top, and break it out a little bit. It makes it look a little different.
You can see how it looks nicer. The other one is perfectly fine, but those things you can add on and make it look a little bit nicer, a little bit more interesting, a little bit more unique.
Going through these design principles, we have gone from here to here. Hopefully, you can see how applying these things in small, incremental fashion can help you improve your designs.
I just want to go a little bit into the process and the process of doing design. It’s very, very important to not be afraid of imitation, not copying. Do not copy, but imitation.
If you are working on a new design project, and you say, “Okay. I’m going to do a design for my homepage.” You go to your desk. You wipe everything clean. You sit down with a piece of paper and with a pencil. You’re like, “Okay. Start!” That’s a lot like trying to program without the use of Google or stack overflow. You can do it. You can do it. It’s just going to be a lot harder. Looking at other work and finding things that you like and things that you want to imitate or being inspired will help you design faster.
My books, you can tell that they’re obviously inspired by A Book Apart. I looked at A Book Apart, and I liked the bright colors. I liked the prominent typography. I liked the form factor of the book. My book is actually the exact same size because I did steal that idea.
I didn’t copy anything, but you can tell that I was inspired. The design of my book is stronger because I had A Book Apart to inspire me.
It’s important to go out and look at other Web designs out there, as a design beginner, and see what other people are doing and use that to inform your own designs. Again, not copying verbatim, but just building those ideas. Lots of websites with designs that you can just go through and formulate ideas, like Site Inspire, Unmatched Style, CSS Mania. There’s a billion of them out there.
It’s also important that when you find a design that you like, say you landed on GitHub and you say, “Hey, GitHub is doing a pretty good job here,” don’t just say, “Okay, cool. Good,” and just move on with your life. Look at the design and try to pick out why it’s working. This will start building up your design intuition. It’s going to make it easier for you to do design later when you have to sit down and work on your designs and pull this information out from your brain.
For example, looking at GitHub, you can say, “Okay. Cool. They have a lot of white space here.” They kind of floated the white space in that top banner area by having a background pattern, which is kind of a cool little effect. They have nice looking typography, like a really nice, big headline that’s very succinct, “Built for developers.”
It’s a very monochromatic website, but there is a bright green button because that’s what they want you to do. They want you to fill out that form and sign up for GitHub. The navigation bar at the top has a darker background, which separates it from the content.
When you see a design, and you say, “Oh, that design is working well,” pick out why it’s working well or why it’s not working well, and just work on this exercise as you go around, go along your design collecting, building those ideas. It’s going to make it easier for you to design afterward. It’s going to help train your design eye.
Of course, there are lots of quotes around this. Pablo Picasso says--or supposedly says--“Good artists copy, great artists steal.” Then Banksy takes that and says, “The bad artists imitate, the great artists steal.” There are books on this subject. It is a thing. A lot of design beginners forget that they can use other design and pull inspiration. It’s a crucial part of the designer’s toolbox.
Last but not least, a little bit about the design process just to give someone a path when they start doing a design, a path moving forward. Of course, step number one when working on a new design is to start collecting that inspiration and sketching those ideas.
This is specifically how I do it. I use Feedly. I take those top design websites, and I throw it into Feedly. When I’m working on a new design, I can go ahead and just scroll through a bunch of different design ideas, pick out the ones I like, and save them for later.
Now, when it comes to sketching, though, I don’t mean something like this. This person is showing off. Sketches do not have to look like this. They don’t have to have pretty shadings and little sketches of the icons and whatnot. This is way too pretty.
By sketching, I mean something like this. These are actually my notebooks where it’s just boxes, lines, and things to help me remember the layouts and the things I’m trying when I’m building those ideas. Messy, not perfect; just for me.
Now, I wanted to do a little bit in terms of mocking up because, at this point, when you’re sketching ideas, you could just jump into doing HTML and CSS. But, the mockup process can be very valuable in design, so you can try out different ideas faster. Mockups don’t have to be perfect, as well.
This is something I was working on as a project. This is a black and white mockup. It’s not using the colors I would use. It’s not using the fonts I would use. There might be patterns or images, but that’s all taken out. It just helped me figure out layout, content, and spacing. Just getting those things right before I move into actually creating the actual website.
This mockup helped me figure out that I wanted a single column for the content. I wanted it to be fairly narrow, that the content area was going to be broken up into bullets, that there’s only going to be two menu items, and they would be to the side of the logo. Then the form. It helped me figure out that content.
It’s not perfect, but it allowed me to move things around and create that layout faster. Every now and then, I will make a more design complete mockup, but that’s rare. More likely the mockups are looking like this before I move over to code. It allows me to make designs for my projects faster.
Then build it, which is a whole other 6, 8, 20 hours of presentation. Frontend development, yes!
I have a background; I have a degree in design. I’ve been building websites since I was 12. Every single time, like, without fail, when I’m starting a new project I feel like crap. It always goes like this in my head as I’m sketching out ideas and I’m trying to work on my mockups.
The first 95% of the project is me going, “Did I lose everything I’ve ever learned? Am I actually a horrible designer? Why isn’t it working? What happened to my brain?”
Then there’s the moment where I add that thing or finally align something, and it will suddenly feel maybe it’ll be a “Yes!” moment like, “Oh, wait, this is actually a good design,” or maybe it’ll be like, “Huh.” But, without fail, I start out feeling like crap. [Laughter]
So, when it comes to designers, people who are picking up design for the first time, and I know this is not very positive, but when someone is jumping into design for the first time and they feel like crap in the beginning, I like to reassure them that it doesn’t mean that they are a bad designer. It just means that they are a designer. Welcome to the world of designer. [Laughter]
This is only the starting point. Try to add a lot of recommendations and whatnot into this, and a lot of different things to remember. But, this is the point where you have to go out, do design, and work on what we’ve gone over.
The thing to remember is to reduce visual clutter. If you want to make a better visual design, reduce clutter. You can do that by keeping the number of fonts and colors low, adding white space, lining things up, and keeping your content short and easy to skim.
Look at your goal. Figure out what you want people to do. Figure out what they want to do and try to help them achieve that goal. Look at your analytics. Tie things into data.
Don’t forget your content. Look at the length of your content. Look at your paragraphs. Look at what you’re writing. Keep it short, simple, friendly, and to the point.
Most importantly, practice. Your first designs, the things you work on at the beginning, every one you do is going to be a little bit better. You’re not going to be perfect from the beginning. It requires practice. Just like you can’t become a programmer from making your first program, you can’t become a designer by doing your first design. You have to continue working at it and it will get easier and better.
This presentation I have on Medium. It’s all in written format. On Medium, there were three parts, if you want to share that around or get the presentation in that full, written format. Like I said, I have a book on this as well.
I hope that this presentation took some of those big design principles and narrowed it down, made it easier to remember, and help get you started if you’re new and, if you are an experienced designer, will help you take the really scary, overwhelming world of design and help other people jump into it.
Thank you so much for having me.
[Applause]
