DIY Design: Think Like A Designer When Creating Your Site

Learn the tricks designers use to make websites attractive and effective. We’ll teach you the Most Important Question designers ask their clients, and how you can use it to your advantage when doing it yourself. Then, learn practical ways to apply it to create attractive sites (using good design principles and simple rules for success) and effective sites (through basic exercises that help you develop and showcase your primary call to action).

Transcript

1. DIY DESIGN Think Like A Designer When Creating Your Site
2. @marktimemedia I Design THINGS. USUALLY WORDPRESS. HI, I’M MICHELLE.
3. @marktimemedia DESIGN MYTHS
4. @marktimemedia Design is WHAT A SITE LOOKS LIKE
5. @marktimemedia Design is PROBLEM SOLVING
6. @marktimemedia ONLY DESIGNERS Can Design
7. @marktimemedia EVERYONE Can Design!
8. @marktimemedia THEY DON’T WANT YOU TO KNOW! You’ll never guess this important question
9. @marktimemedia THEY DON’T WANT YOU TO KNOW! You’ll never guess this important question
10. @marktimemedia WHY? A designer’s secret weapon:
11. @marktimemedia EFFECTIVE, ATTRACTIVE SITES
12. @marktimemedia EFFECTIVE SITES How well does the site accomplish your goals and how easily can people use it?
13. @marktimemedia WHY DO PEOPLE VISIT WEBSITES?
14. @marktimemedia VERB A word that represents an action or state of being
15. @marktimemedia BUY JOIN READ DOWNLOAD CONTACT DONATE SUBSCRIBE SIGN UP SHARE COMMENT LIKE
16. @marktimemedia WHY ARE PEOPLE VISITING YOUR WEBSITE?
17. @marktimemedia Your website has a SINGLE PRIMARY VERB
18. @marktimemedia YOUR PRIMARY WIN
19. @marktimemedia CLEAR CALLS TO ACTION
20. @marktimemedia BUTTONS Obviously Clickable Using Plain Language (not being cute/clever) BUY NOW SPEND YO MONEYZ!
21. @marktimemedia FORMS VS Easy To Use & Not Asking Too Much
22. @marktimemedia CONTENT VS Easily Scannable, Directed, & Precise
23. @marktimemedia BE PREDICTABLE
24. @marktimemedia ESTABLISHED PATTERNS
25. @marktimemedia ESTABLISHED PATTERNS Header: navigation, logo Footer: extra navigation, contact info, terms/conditions Contact Us: page/form easily accessible Search: let people find things their way Scrolling, Swiping: behave normally, don’t hijack Clicking: affordance, knowing something is “clickable" Icons & Metaphors: map pin, social icons, mail icon, etc
26. @marktimemedia ATTRACTIVE SITES How well does the site match your brand and follow good design principles?
27. @marktimemedia VISUAL HIERARCHY
28. @marktimemedia WHICH IS MOST IMPORTANT?
29. @marktimemedia WHICH IS MOST IMPORTANT?
30. @marktimemedia WHICH IS MOST IMPORTANT?
31. @marktimemedia WHICH IS MOST IMPORTANT?
32. @marktimemedia FONTS & TYPOGRAPHY
33. @marktimemedia LESS IS MORE Pick 1 Heading Font & 1 Body Font This is My Heading Font This is my body font, which needs to work well in paragraphs at smaller sizes. Remember to evaluate this for legibility when used within larger blocks of text. Body fonts are generally set at 16px with 1.6 line-height to be readable on a large variety of devices.
34. @marktimemedia DISTINCT/COMPLEMENTARY Pick fonts that are not too similar This is My Heading Font This is my body font, for use in normal paragraphs at smaller sizes. This is My Heading Font This is my body font, for use in normal paragraphs at smaller sizes. This is My Heading Font This is my body font, for use in normal paragraphs at smaller sizes.
35. @marktimemedia TYPOGRAPHY RULES Paragraphs – font-size: 16px, line-height 1.6 – 45-86 characters/line – small bottom margin Headings – line-height: 1.2 Sub-Headings – larger top margin than bottom margin within content
36. @marktimemedia VOCABULARY font-family: which typeface are you using? font-size: how big/small is it? font-weight: how heavy/light is it? font-style, text-decoration: italic, underline, strike Serif Sans-Serif
37. @marktimemedia RESOURCES Google Font Pairing http://fontpair.co/ Typekit Font Pairing http://justmytype.co/typekit/ Article: Line Length & Font Size https://www.smashingmagazine.com/2014/09/balancing-line- length-font-size-responsive-web-design/
38. @marktimemedia COLORS
39. @marktimemedia LESS IS MORE Pick 2-3 Colors plus neutrals
40. @marktimemedia CONSISTENCY (what is clickable?)
41. @marktimemedia CONSISTENCY (what is clickable?)
42. @marktimemedia CONTRAST Make sure it’s legible Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur
43. @marktimemedia VOCABULARY Hue: where is it on the color spectrum? Saturation: how vivid or dull is the color? Contrast: how much does it stand out? Opacity: solid or transparent?
44. @marktimemedia RESOURCES Adobe Color https://color.adobe.com/ Color Safe Palettes http://colorsafe.co/ Random Accessible Color http://www.randoma11y.com/ Easy Color Classes http://clrs.cc/ Article: Psychology of Color https://www.entrepreneur.com/article/233843
45. @marktimemedia ALIGNMENT & SPACING
46. @marktimemedia LESS IS MORE Fewer elements with more breathing room VS (yes, even including ads!)
47. @marktimemedia CLEAR RELATIONSHIPS
48. @marktimemedia CLEAR RELATIONSHIPS
49. @marktimemedia ALIGNMENT When in doubt, Align Top & Left VS
50. @marktimemedia VOCABULARY Whitespace: how much “breathing room” does each element have? Grid: underlying structure that determines how everything lays out Padding: the space inside a block level element Margin: The space outside a block level element
51. @marktimemedia RESOURCES Article: Why Whitespace Matters https://boagworld.com/design/why-whitespace-matters/ Article: Why Whitepsace is Crucial to UX Design http://www.fastcodesign.com/3046656/why-white-space-is- crucial-to-ux-design Article: Web Design Basics Guide https://99designs.com/blog/tips/web-design-basics-guide/
52. @marktimemedia SUMMARY
53. @marktimemedia Design is Problem Solving Be able to Explain Why you made a decision Know Your Win and have clear calls to action Follow Established Patterns for ease of use Less is More with colors, fonts, and content Use Visual Hierarchy to guide your audience
54. @marktimemedia GENERAL RESOURCES Article: Design Principles of Successful Websites https://www.cleverism.com/web-design-principles-successful- websites/ Article: 10 Principles of Web Design http://www.nea.org/home/10-Principles-of-Basic-Web- Design.html Article: Web Design Tips & Hacks http://www.designforfounders.com/tips-and-hacks/
55. @marktimemedia QUESTIONS? Michelle Schulp michelle@marktimemedia.com @marktimemedia bit.ly/diy-web-design