engage your audience now purposefulfiles.meetup.com/18783556/alisonknott_wphalifax... · engage...

Engage Your Audience Now...

PURPOSEFULContent Design For Beginners

Alison Knott :: @eraserheader :: eraserheader.com/wcottawa (download slides)

Engage Your Audience Now: purposeful content design for beginners :: WordCamp Ottawa 2016 :: @eraserheader

Engagement:making relevant content

easy to interact with

Engage Your Audience Now: purposeful content design for beginners :: WordCamp Ottawa 2016 :: @eraserheader

The struggle is real.

Engage Your Audience Now: purposeful content design for beginners :: WordCamp Ottawa 2016 :: @eraserheader

Art + Science + Technology

Engage Your Audience Now: purposeful content design for beginners :: WordCamp Ottawa 2016 :: @eraserheader

Art + Science + TechnologyDesign PyscologyPsycholog

yWordPress!

Part One: Your Content’s

PURPOSE

Engage Your Audience Now: purposeful content design for beginners :: WordCamp Ottawa 2016 :: @eraserheader

Inform

Sell

(blogs, articles, essays)

(products, services, subscriptions)

Inform

Sell

(legible, sharable, organized)

(legible, clear benefits, secure)

Engage Your Audience Now: purposeful content design for beginners :: WordCamp Ottawa 2016 :: @eraserheader

The purpose of my content is to _____________ to _____________.inform/sell my audience

Engage Your Audience Now: purposeful content design for beginners :: WordCamp Ottawa 2016 :: @eraserheader

The purpose of my content is to _____________ to _____________.

The purpose of my content is to _____________ to _____________.

sell more accessories w ith clothes purchases buyers

chronicle my charty group’s events

people

Engage Your Audience Now: purposeful content design for beginners :: WordCamp Ottawa 2016 :: @eraserheader

Part Two: Your

AUDIENCE

Engage Your Audience Now: purposeful content design for beginners :: WordCamp Ottawa 2016 :: @eraserheader

The purpose of my content is to _____________ to _____________.

The purpose of my content is to _____________ to _____________.

sell my e-courses

share betterbudgeting tips

first-time parents

w omen of Ottaw a in leadership roles

Part Three: Principles

OF DESIGNEngage Your Audience Now: purposeful content design for beginners :: WordCamp Ottawa 2016 :: @eraserheader

VISUAL HIERARCHY

Engage Your Audience Now: purposeful content design for beginners :: WordCamp Ottawa 2016 :: @eraserheader

Engage Your Audience Now: purposeful content design for beginners :: WordCamp Ottawa 2016 :: @eraserheader

Engage Your Audience Now: purposeful content design for beginners :: WordCamp Ottawa 2016 :: @eraserheader

Engage Your Audience Now: purposeful content design for beginners :: WordCamp Ottawa 2016 :: @eraserheader

http

://w

ww.

lapi

erre

quito

urne

.com

/

http

://w

ww.

lapi

erre

quito

urne

.com

/

1

2

3

Engage Your Audience Now: purposeful content design for beginners :: WordCamp Ottawa 2016 :: @eraserheader

Engage Your Audience Now: purposeful content design for beginners :: WordCamp Ottawa 2016 :: @eraserheader

Engage Your Audience Now: purposeful content design for beginners :: WordCamp Ottawa 2016 :: @eraserheader

Tora volupta ectium illandignis aute voleceatur? Quiatatur, te

nimolorum eos eiciur, ad es etus am volorunt, serum cus sum-

quamus aliquatem que ent.

Olupta prepuda estionsed maximi, sam similit quis reium, ip-

sum sita si odiaest el et laccull aceatur?

Giae dolupiciet ut liquost oditiis imillectem escia dus quiUt ape

volupic ienienda cus dolorro te conet excepelescit faccatus.

Des dit lautat aut et verchicabo. To consequ iducilibus nulpar-

ci quisite mperum aut accae verovit atibust ioreiciet re conem

natiusc itiist volupta tiaspe nis verum quamend ignit, sitaturiae

ad et alitate dolum nulpa as rehentem enihill uptatem ex ea pe

non nam volupta dolupta tquam, sinvele catecer spiet, quatia

pedia con cum as aut quiaepr aectiisit, qui ut il moditatio. Em

serepudi doluptatur rerupta voluptatibus.

Dit lautat aut et verchicabo. To consequ iducilibus nulparci

quisite mperum aut accae verovit atibust ioreiciet re conem na-

tiusc itiist volupta tiaspe nis verum quamend ignit, sitaturiae

ad et alitate dolum nulpa as rehentem enihill uptatem ex ea pe

Tora volupta ectium illandignis aute voleceatur? Quiatatur, te

nimolorum eos eiciur, ad es etus am volorunt, serum cus sum-

quamus aliquatem que ent.

Olupta prepuda estionsed maximi, sam similit quis reium, ip-

sum sita si odiaest el et laccull aceatur?

Giae dolupiciet ut liquost oditiis imillectem escia dus quiUt ape

volupic ienienda cus dolorro te conet excepelescit faccatus.

Des dit lautat aut et verchicabo. To consequ iducilibus nulpar-

ci quisite mperum aut accae verovit atibust ioreiciet re conem

natiusc itiist volupta tiaspe nis verum quamend ignit, sitaturiae

ad et alitate dolum nulpa as rehentem enihill uptatem ex ea pe

non nam volupta dolupta tquam, sinvele catecer spiet, quatia

pedia con cum as aut quiaepr aectiisit, qui ut il moditatio. Em

serepudi doluptatur rerupta voluptatibus. Download My Free

Worksheet Now.

Dit lautat aut et verchicabo. To consequ iducilibus nulparci

quisite mperum aut accae verovit atibust ioreiciet re conem na-

tiusc itiist volupta tiaspe nis verum quamend ignit, sitaturiae

ad et alitate dolum nulpa as rehentem enihill uptatem ex ea pe

non nam volupta dolupta tquam, sinvele catecer spiet, quatia

pedia con cum as aut quiaepr aectiisit, t alitate dolum nulpa as

rehentem enihill uptatem ex ea pe non nam volupta dolupta

Download My Free Worksheet Now

http

://w

ww.

min

dtoo

ls.co

m/p

ages

/art

icle

/Pla

nnin

gAW

orks

hop.

htm

http

://w

ww.

min

dtoo

ls.co

m/p

ages

/art

icle

/Pla

nnin

gAW

orks

hop.

htm

Engage Your Audience Now: purposeful content design for beginners :: WordCamp Ottawa 2016 :: @eraserheader

https://s-media-cache-ak0.pinimg.com/736x/5e/ed/21/5eed21b936da28d1cc062ba2703faf4b.jpg

Prioritizing items makes life easierfor engagement.

TYPOGRAPHYEngage Your Audience Now: purposeful content design for beginners :: WordCamp Ottawa 2016 :: @eraserheader

Engage Your Audience Now: purposeful content design for beginners :: WordCamp Ottawa 2016 :: @eraserheader

Push those header tags

I Am The Important Header 1

I Am The Next In Line, Header 2

Here I Am Header 3

Engage Your Audience Now: purposeful content design for beginners :: WordCamp Ottawa 2016 :: @eraserheader

50-75 charactersTias doluptat mo omni aborehent optatempera qui rae mo ellessim ium facia voloris moluptam doluptat rehenim agnatus quam dis rest restet la dolo esto et event doles int derspedis excea sam fugia quiatur? Adis aut quas explatatist omnis aria nonsed moluptatquo quatios ea perum rest mintemp erchil il ipit ipsam ditatem facimin ulpari ut quunt.

Soluptassi cuptatur as eum fuga. Cil ipsa verit pro cumquaes nus, occupientore si blaccusae. Ut ipsam fugitate sum doluptasitae porum ea quiduci llaborerum rerciis eossitia aces ipsunt, ut mos est fugitiam imolupt atust, auditatempos dendelene pre, corrum impossime rem re eum eumet arum, que corepe nonse quid ut volorem rere porume comni volorio nseris ab ipicitias etur sollor se qui officil maio. Facit harum ent quamustrum fugiae. Ferit,

Keep your line lengths short

Engage Your Audience Now: purposeful content design for beginners :: WordCamp Ottawa 2016 :: @eraserheader

Tias doluptat mo omni aborehent optatempera qui rae mo ellessim ium facia voloris moluptam doluptat rehenim agnatus quam dis rest restet la dolo esto et event doles int derspedis excea sam fugia quiatur? Adis aut quas explatatist omnis aria nonsed moluptatquo.

Tias doluptat mo omni aborehent optatempera qui rae mo ellessim ium facia voloris moluptam doluptat rehenim agnatus quam dis rest restet la dolo esto et event doles int derspedis excea sam fugia quiatur? Adis aut quas explatatist omnis aria nonsed moluptatquo.

Tias doluptat mo omni aborehent optatempera qui rae mo ellessim ium facia voloris moluptam

doluptat rehenim agnatus quam dis rest restet la dolo esto et event doles int derspedis excea

sam fugia quiatur? Adis aut quas explatatist omnis aria nonsed moluptatquo.

Tweak line height: 1.5x font size

Engage Your Audience Now: purposeful content design for beginners :: WordCamp Ottawa 2016 :: @eraserheader

Good use of white space between paragraphs and in the left and

right margins increases comprehension up to 20%.

https://www.smashingmagazine.com/2009/09/10-useful-usability-findings-and-guidelines/

http

s://w

ww.

ukes

says

.com

/

http

s://w

ww.

ukes

says

.com

/

Don’t let basic legibility issues compromise your messaging.

COLOUR

Engage Your Audience Now: purposeful content design for beginners :: WordCamp Ottawa 2016 :: @eraserheader

Engage Your Audience Now: purposeful content design for beginners :: WordCamp Ottawa 2016 :: @eraserheaderhttp://www.webdesignerdepot.com/2012/08/the-psychology-of-logo-design/

powersophissssstication

mysterydeath

growthnaturemoney

freshnesss

intellectfriendliness

cautioncowardice

hopesimplicity

cleanlinesspurity

innovationcreativitythinking

ideas

peaceconfidence

integritytranquility

lovepassiondangerenergy

royaltyluxury

wisdomdignity

authoritymaturity

securestability

Engage Your Audience Now: purposeful content design for beginners :: WordCamp Ottawa 2016 :: @eraserheader

18% OFF MacBook Fart27% OFF MacBook Fart 50% OFF MacBook Fart

Engage Your Audience Now: purposeful content design for beginners :: WordCamp Ottawa 2016 :: @eraserheader

Tora volupta ectium illandignis aute voleceatur? Quiatatur, te

nimolorum eos eiciur, ad es etus am volorunt, serum cus sum-

quamus aliquatem que ent.

Olupta prepuda estionsed maximi, sam similit quis reium, ip-

sum sita si odiaest el et laccull aceatur?

Giae dolupiciet ut liquost oditiis imillectem escia dus quiUt ape

volupic ienienda cus dolorro te conet excepelescit faccatus.

Des dit lautat aut et verchicabo. To consequ iducilibus nulpar-

ci quisite mperum aut accae verovit atibust ioreiciet re conem

natiusc itiist volupta tiaspe nis verum quamend ignit, sitaturiae

ad et alitate dolum nulpa as rehentem enihill uptatem ex ea pe

non nam volupta dolupta tquam, sinvele catecer spiet, quatia

pedia con cum as aut quiaepr aectiisit, qui ut il moditatio. Em

serepudi doluptatur rerupta voluptatibus.

It lautat aut et verchicabo. To consequ iducilibus nulparci

quisite mperum aut accae verovit atibust ioreiciet re conem

natiusc itiist volupta tiaspe nis verum quamend ignit, sitaturiae

ad et alitate dolum nulpa as rehentem enihill uptatem ex ea pe

non nam volupta dolupta tquam, sinvele catecer spiet, quatia

pedia con cum as aut quiaepr aectiisit, t alitate dolum nulpa as

rehentem enihill uptatem ex ea pe non nam volupta dolupta

tquam, sinvele catecer spiet, quatia pedia con cum as aut qui-

Engage Your Audience Now: purposeful content design for beginners :: WordCamp Ottawa 2016 :: @eraserheader

Don’t forget mobile devices and visuallyimpaired users

*

Engage Your Audience Now: purposeful content design for beginners :: WordCamp Ottawa 2016 :: @eraserheader

https://medium.com/salesforce-ux/7-things-every-designer-needs-to-know-about-accessibility-64f105f0881b#.4psilkfu7

Men are colour blind

Women are colour blind

People have low vision

People are blind

121

2001

301

1881

Engage Your Audience Now: purposeful content design for beginners :: WordCamp Ottawa 2016 :: @eraserheader

Use colour in addition to other signifiers

Enable keyboard focus on your site

Check the contrast of important items

http

://w

ebai

m.o

rg/r

esou

rces

/con

tras

tche

cker

/

Use the power of colour wisely

HICK’S LAWEngage Your Audience Now: purposeful content design for beginners :: WordCamp Ottawa 2016 :: @eraserheader

Engage Your Audience Now: purposeful content design for beginners :: WordCamp Ottawa 2016 :: @eraserheader

The time it takes to make a decision increases as the number

of alternatives increases

Engage Your Audience Now: purposeful content design for beginners :: WordCamp Ottawa 2016 :: @eraserheader

55% of visitors spend fewer than 15 seconds on a website.

38% of consumers give up on content altogether because it is

too long.http://time.com/12933/what-you-think-you-know-about-the-web-is-wrong/ http://wwwimages.adobe.com/content/dam/Adobe/en/max/2015/pdfs/state-of-content-oct.pdf

http

s://p

rezi

.com

/pric

ing/

Make a suggestion

Engage Your Audience Now: purposeful content design for beginners :: WordCamp Ottawa 2016 :: @eraserheader

Keep navigation under 7 items

Engage Your Audience Now: purposeful content design for beginners :: WordCamp Ottawa 2016 :: @eraserheader

Widget Tastefully

http

://co

sche

dule

.com

/blo

g/br

and-

advo

cate

s

http

://co

sche

dule

.com

/blo

g/br

and-

advo

cate

s

Engage Your Audience Now: purposeful content design for beginners :: WordCamp Ottawa 2016 :: @eraserheader

Place your user’s needs above your own.

Part Four: Final Thoughts

MORE NERDERYEngage Your Audience Now: purposeful content design for beginners :: WordCamp Ottawa 2016 :: @eraserheader

Engage Your Audience Now: purposeful content design for beginners :: WordCamp Ottawa 2016 :: @eraserheader

DESIGN

‘Universal Principles of Design’ (a book)William Lidwell, Kritina Holden, Jill Butler

‘Elements of Typographic Style’ (a book)Robert Bringhurst

Really Good Emailsreallygoodemails.com

Behancewww.behance.net

Visuellevisuelle.co.uk

Awwwardswww.awwwards.com

Designsperationdesignspiration.net

USERSConvince and Convertwww.convinceandconvert.com/blog

Buffer’s Blogblog.bufferapp.com/marketing-resources

Unbounceunbounce.com/landing-page-examples/22-brutally-honest- landing-page-critiques/

Smashing Magazine’s User Interaction sectionwww.smashingmagazine.com/tag/user-interaction/

ConversionXL http://conversionxl.com/

Hubspot’s Blog http://blog.hubspot.com/

Slide Images: gratisography.com & morguefile.com

Engage Your Audience Now: purposeful content design for beginners :: WordCamp Ottawa 2016 :: @eraserheader

This isn’t about perfection.

Engage Your Audience Now: purposeful content design for beginners :: WordCamp Ottawa 2016 :: @eraserheader

Check data and get feedback often.

Engage Your Audience Now: purposeful content design for beginners :: WordCamp Ottawa 2016 :: @eraserheader

Never stop being inspired!

THANK YOUSee Ya Tomorrow At The Site Clinic!