Good Design: The Gateway to a Better Business

Slide 1

Slide 1 text

Good Design The Gateway to a Better Business

Slide 2

Slide 2 text

Mel Choyce melchoyce.design @melchoyce Design Engineer at Automattic & WP Core Committer

Slide 3

Slide 3 text

What is design?

Slide 4

Slide 4 text

– Sir George Cox Creativity deployed to a speciﬁc end.

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

– Steve Jobs Design is not just what it looks like and feels like. Design is how it works.

Slide 8

Slide 8 text

What makes design good?

Slide 9

Slide 9 text

– Justice Potter Stewart I know it when I see it.

Slide 10

Slide 10 text

Source: Vitsoe at English Wikipedia CC BY-SA 3.0, via Wikimedia Commons

Slide 11

Slide 11 text

10 Principles of Good Design

Slide 12

Slide 12 text

Innovative Principles of Good Design #1

Slide 13

Slide 13 text

Attractive Principles of Good Design #2

Slide 14

Slide 14 text

Useful Principles of Good Design #3

Slide 15

Slide 15 text

Understand- able Principles of Good Design #4 ;)

Slide 16

Slide 16 text

Unobtrusive Principles of Good Design #5

Slide 17

Slide 17 text

Honest Principles of Good Design #6

Slide 18

Slide 18 text

Durable Principles of Good Design #7

Slide 19

Slide 19 text

Thorough Principles of Good Design #8

Slide 20

Slide 20 text

Eco-Friendly Principles of Good Design #9

Slide 21

Slide 21 text

Little Design as Possible Principles of Good Design #10

Slide 22

Slide 22 text

What does good design look like?

Slide 23

Slide 23 text

Grids & Alignment

Slide 24

Slide 24 text

Welcome to WordCamp Maine Featured We’re happy to announce that WordCamp Maine is ofﬁcially on the calendar! WordCamp Maine will be May 13 – 14 at Maine College of Art (MECA). Subscribe using the form in the sidebar to stay up to date on the most recent news. We’ll be keeping you posted on all the details over the coming months, including speaker submissions, ticket sales and more! SUBSCRIBE FOR UPDATES! Enter your email address to subscribe and receive notiﬁcations of new posts by email. INDIVIDUAL SPONSORS Special thank you goes out to our individual sponsors for the support this year. • Eric Wagner • Boston WordPress • William Davis • Burlington Bytes

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

White Space

Slide 29

Slide 29 text

Guides the eye

Slide 30

Slide 30 text

Typography

Slide 31

Slide 31 text

– Oliver Reichenstein, The Web is All About Typography. Period. Web Design is 95% Typography.

Slide 32

Slide 32 text

Choosing fonts

Slide 33

Slide 33 text

Tone

Slide 34

Slide 34 text

Legibility

Slide 35

Slide 35 text

Steal Pairings

Slide 36

Slide 36 text

Size

Slide 37

Slide 37 text

14-20px body fonts

Slide 38

Slide 38 text

Line-height

Slide 39

Slide 39 text

1.4-1.6 × font-size

Slide 40

Slide 40 text

Slide 41

Slide 41 text

Slide 42

Slide 42 text

Line-length

Slide 43

Slide 43 text

50-75 characters per line

Slide 44

Slide 44 text

WordPress started in 2003 with a single bit of code to enhance the typography of everyday writing and with fewer users than you can count on your ﬁngers and toes. Since then it has grown to be the largest self-hosted blogging tool in the world, used on millions of sites and seen by tens of millions of people every day. Everything you see here, from the documentation to the code itself, was created by and for the community. WordPress is an Open Source project, which means there are hundreds of people all over the world working on it. (More than most commercial platforms.) It also means you are free to use it for anything from your recipe site to a Fortune 500 web site without paying anyone a license fee and a number of other important freedoms. About WordPress.org On this site you can download and install a software script called WordPress. To do this you need a web host who meets the minimum requirements and a little time. WordPress is completely customizable and can be used for almost anything. There is also a service called WordPress.com which lets you get started with a new and free WordPress-based blog in seconds, but varies in several ways and is less ﬂexible than the WordPress you download and install yourself. What You Can Use WordPress For WordPress started as just a blogging system, but has evolved to be used as full content management system and so much more through the thousands of plugins and widgets and themes, WordPress is limited only by your imagination. (And tech chops.) Connect with the Community In addition to online resources like the forums and mailing lists a great way to get involved with

Slide 45

Slide 45 text

Slide 46

Slide 46 text

Color

Slide 47

Slide 47 text

http://loyaltysquare.com/impact_of_color.php 92.6% of people make purchasing decisions based on how something looks. Impact of Color

Slide 48

Slide 48 text

Color increases brand recognition by up to 80 percent. http://loyaltysquare.com/impact_of_color.php Impact of Color

Slide 49

Slide 49 text

Color can increase conversions

Slide 50

Slide 50 text

http://blog.hubspot.com/blog/tabid/6307/bid/20566/The-Button-Color-A-B-Test-Red-Beats-Green.aspx

Slide 51

Slide 51 text

There is no golden ticket

Slide 52

Slide 52 text

http://blog.hubspot.com/blog/tabid/6307/bid/20566/The-Button-Color-A-B-Test-Red-Beats-Green.aspx http://conversionxl.com/which-color-converts-the-best/

Slide 53

Slide 53 text

Making a Palette

Slide 54

Slide 54 text

What emotions do you want associated with   your brand?

Slide 55

Slide 55 text

Balance your colors

Slide 56

Slide 56 text

Don’t use black

Slide 57

Slide 57 text

Hierarchy

Slide 58

Slide 58 text

– Brandon Jones, Understanding Visual Hierarchy in Web Design Good visual hierarchy isn’t about wild and crazy graphics or the newest photoshop ﬁlters, it’s about organizing information in a way that’s usable, accessible, and logical to the everyday site visitor.

Slide 59

Slide 59 text

Deﬁnes your site in order of importance

Slide 60

Slide 60 text

Why is good design important for your business?

Slide 61

Slide 61 text

– Thomas J. Watson Jr. Good design is good business.

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

– Ravi Sawhney, The Role of Design in Business. It's no accident that many of the world's top brands are also design leaders.

Slide 64

Slide 64 text

http://c.ymcdn.com/sites/www.dmi.org/resource/resmgr/Docs/ DMI_DesignValue.pdf The DMI Design Value Scorecard

Slide 65

Slide 65 text

The Impact of Design on Stock Market Performance Effective use of design supports up to 200% business performance improvement. Design Council

Slide 66

Slide 66 text

Establishes Trust

Slide 67

Slide 67 text

How Do People Evaluate a Web Site’s Credibility? An average of 46.1% of all consumers in a study of website credibility assessed websites based in part on the appeal of the overall visual design of a site, including layout, typography, font size and colour schemes. Fogg, Soohoo, Danielson, Marable, Stanford, Tauber

Slide 68

Slide 68 text

Creates an Emotional Connection

Slide 69

Slide 69 text

– Aarron Walter, Designing for Emotion People will forgive shortcomings, follow your lead, and sing your praises if you reward them with positive emotion.

Slide 70

Slide 70 text

Emotion: The Missing Link in Customer Experience Customers who have a positive emotional experience are: • 87% more likely to purchase again • 75% more likely to recommend   the company • 63% more likely to forgive the company’s mistakes Temkin Group

Slide 71

Slide 71 text

Better for your ROI

Slide 72

Slide 72 text

Cost Justifying Ease of Use: Complex Solutions are Problems Those who skip ease of use in the design phase can end up spending 80% of their service costs on unforeseen user requirements down the road IBM

Slide 73

Slide 73 text

http://www.slideshare.net/effectiveui/the-roi-of-user-experience-10010959 By investing in UX to redesign its user interface, McAfee saved 90% in support costs. The ROI of User Experience

Slide 74

Slide 74 text

Good design is worth it.

Slide 75

Slide 75 text

Thank you! melchoyce.design @melchoyce & thanks to @folletto for a bunch of the great stats :)