Design 101 for Developers: 5 ways to make your site less ugly

You are a brilliant engineer. You made an amazing product. You want people to see your amazing product and give you amazing amounts of money for it. But... your website is not so amazing. In this lightning talk, Danielle Leong, Front End Web Developer on Twilio's Design Team, will go over some basic design principles and guidelines to follow to make your site a little bit shinier.

Transcript

1. Design 101 for Developers 5 ways to make your site less ugly Wednesday, April 10, 13
2. DANIELLE LEONG Front End Web Developer Twilio Design Team @tsunamino Wednesday, April 10, 13
3. Why is design important? @tsunamino #twilioGGD Wednesday, April 10, 13 Why design things? We’re engineers, we don’t need that fluffy stuff.
4. Short attention spans @tsunamino #twilioGGD Wednesday, April 10, 13 • Short attention span • You have __ seconds to capture someone’s attention before they move on and don’t give you money
5. I shouldn’t have to think @tsunamino #twilioGGD Wednesday, April 10, 13 • Consumers today are spoiled by good design. We want designers to do the thinking for us. Thinking is hard. UI and UX should be easy.
6. Find your purpose Sketch it out Step back from the screen Cheat a little Don’t design in the dark @tsunamino #twilioGGD 5 things to do Wednesday, April 10, 13 We will only be focusing on desktop sites today, but some of these design principles apply to mobile and tablet design.
7. Purpose @tsunamino #twilioGGD Wednesday, April 10, 13 What is the purpose of your site? What is the point of your site? “Making something cool” isn’t good enough. Write a mission statement and stick to it. Constantly ask yourself if what you’re making aligns with your mission statement in a visual sense. Also remember to think about who your target audience is.
8. Content Wednesday, April 10, 13 Is the point of your site to be a blog and showcase thoughts and words?
9. Business Wednesday, April 10, 13 Is the point of your site to be a company website and convey what your company does?
10. Products Wednesday, April 10, 13 Are you trying to sell products?
11. Photos Wednesday, April 10, 13 Are you trying to showcase photos or illustrations? Each one of these requires a different design aesthetic, so keep that in mind when you’re looking at inspiration and designing your site.
12. Sketch it out @tsunamino #twilioGGD Wednesday, April 10, 13 • After you have your mission statement and have an idea of what your site’s purpose is, draw your ideas so that you have an idea of what you want. It makes it a lot easier to think out your user flow and will organize your thoughts. The first time I made a simple signup form, it was horrifying. Over several iterations of drawing text boxes and placing buttons in various places, I finally made something that made sense. Wireframe tools such as Balsamiq Mockups are fantastic for this. Good old fashioned paper and pen work well also.
13. Step back from the screen @tsunamino #twilioGGD Wednesday, April 10, 13 • After you’re done with some wireframes and make a first draft of your site, physically step back from the screen. What’s the first thing you see? Is that really what you want your target audience to see? In Western culture, we look top to bottom, left to right. Is the most important thing the first thing that you see? If not, go back and design it again. This site had a flashing banner ad in the upper right, which threw me off when I first went to the site. It was distracting and I couldn’t figure out what I was supposed to click.
14. Cheat a little @tsunamino #twilioGGD Wednesday, April 10, 13 • I’m a huge fan of cheating when you have the ability to do so. Bootstrap is awesome. It catches all of the little things that you may not have thought of, it’s got great documentation, and a lot of really smart supporters. Use wireframes where you can until you start to develop your skills. Modify what you don’t like.
15. Golden ratio @tsunamino #twilioGGD 1.618 Wednesday, April 10, 13 • The golden ratio is a ratio found commonly in nature that our eyes perceive as beautiful.
16. Golden ratio @tsunamino #twilioGGD Wednesday, April 10, 13 • This also applies to websites. As you can see here, with a 960px grid, you can see a commonly used ratio for content and navigation. It’s an easy way to make sure your site looks good.
17. Golden ratio @tsunamino #twilioGGD Wednesday, April 10, 13 • Here’s an example of the golden ratio in application.
18. Wednesday, April 10, 13 • Application of the Golden Ratio on the Facebook Home page
19. Wednesday, April 10, 13 • Application of the Golden Ratio on the Facebook Home page
20. Rule of thirds @tsunamino #twilioGGD Wednesday, April 10, 13 • Another great rule to follow when using grids is the rule of thirds. Divide your site into 9 parts. The four colored squares in the middle are where our eyes are drawn to the most. Typically, the upper left pink square is where you want your most important information, followed by the second pink square on the bottom. Math.
21. Cheat some more @tsunamino #twilioGGD Wednesday, April 10, 13 • If you’re ready to start experimenting with color, try some pre-made color pickers. There are a bunch out there that can help you pick from a photograph or a you can pick from suggestions built by a community of people who are good at this.
22. Don’t design in the dark @tsunamino #twilioGGD Wednesday, April 10, 13 Don’t design in the dark. Put aside your ego and ask someone, preferably someone who is both in your target audience and who has an eye for design, for their opinion. Ask very specific questions like, “How would you contact me? What does this blue remind you of? Why is this form confusing?” Then ask someone else. Then make some changes. Then ask someone else. This is by far the hardest part of designing something. It requires you to put aside your ego, and no one likes to do that. Everyone loves to play art director, so find someone with an opinion and ask them questions. They may not be right, but it’s always helpful to hear other opinions.
23. Test time. @tsunamino #twilioGGD Wednesday, April 10, 13 Let’s see if you can guess what the purpose of each of these sites are just by their design.
24. Wednesday, April 10, 13
25. Wednesday, April 10, 13
26. Wednesday, April 10, 13
27. Wednesday, April 10, 13
28. Wednesday, April 10, 13
29. Wednesday, April 10, 13
30. Wednesday, April 10, 13
31. Wednesday, April 10, 13
32. @tsunamino #twilioGGD Find your purpose Sketch it out Step back from the screen Cheat a little Don’t design in the dark Wednesday, April 10, 13 Concluding remarks
33. Fin. @tsunamino #twilioGGD Wednesday, April 10, 13