DIY Design: Think Like A Designer When Creating Your Site

DIY DESIGN Think Like A Designer When Creating Your Site

@marktimemedia I Design THINGS. USUALLY WORDPRESS. HI, I’M MICHELLE.

@marktimemedia DESIGN MYTHS

@marktimemedia Design is WHAT A SITE LOOKS LIKE

@marktimemedia Design is PROBLEM SOLVING

@marktimemedia ONLY DESIGNERS Can Design

@marktimemedia EVERYONE Can Design!

@marktimemedia THEY DON’T WANT YOU TO KNOW! You’ll never guess
this important question

@marktimemedia WHY? A designer’s secret weapon:

@marktimemedia EFFECTIVE, ATTRACTIVE SITES

@marktimemedia EFFECTIVE SITES How well does the site accomplish your
goals and how easily can people use it?

@marktimemedia WHY DO PEOPLE VISIT WEBSITES?

@marktimemedia VERB A word that represents an action or state
of being

@marktimemedia BUY JOIN READ DOWNLOAD CONTACT DONATE SUBSCRIBE SIGN UP
SHARE COMMENT LIKE

@marktimemedia WHY ARE PEOPLE VISITING YOUR WEBSITE?

@marktimemedia Your website has a SINGLE PRIMARY VERB

@marktimemedia YOUR PRIMARY WIN

@marktimemedia CLEAR CALLS TO ACTION

@marktimemedia BUTTONS Obviously Clickable Using Plain Language (not being cute/clever)
BUY NOW SPEND YO MONEYZ!

@marktimemedia FORMS VS Easy To Use & Not Asking Too
Much

@marktimemedia CONTENT VS Easily Scannable, Directed, & Precise

@marktimemedia BE PREDICTABLE

@marktimemedia ESTABLISHED PATTERNS

@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

@marktimemedia ATTRACTIVE SITES How well does the site match your
brand and follow good design principles?

@marktimemedia VISUAL HIERARCHY

@marktimemedia WHICH IS MOST IMPORTANT?

@marktimemedia FONTS & TYPOGRAPHY

@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.

@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.

@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

@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

@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/

@marktimemedia COLORS

@marktimemedia LESS IS MORE Pick 2-3 Colors plus neutrals

@marktimemedia CONSISTENCY (what is clickable?)

@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

@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?

@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

@marktimemedia ALIGNMENT & SPACING

@marktimemedia LESS IS MORE Fewer elements with more breathing room
VS (yes, even including ads!)

@marktimemedia CLEAR RELATIONSHIPS

@marktimemedia ALIGNMENT When in doubt, Align Top & Left VS

@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

@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/

@marktimemedia SUMMARY

@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

@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/

@marktimemedia QUESTIONS? Michelle Schulp [email protected] @marktimemedia bit.ly/diy-web-design

DIY Design: Think Like A Designer When Creating...

DIY Design: Think Like A Designer When Creating Your Site

More Decks by Michelle Schulp Hunt

Other Decks in Design

Featured

Transcript