Let’s Get Visual Michelle Samplin-Salgado Andrea Goetschius Liesl Lu

CBA@JSI

Today’s Presenters

MICHELLE ANDI LIESL

WHERE ARE WE GOING?

• Basic principles of design

• How effective design can

improve the promotion

of your HIV programs

• Tools, tips, and tricks to

create more visually

compelling products

YOUR TURN:

Why this workshop?

FUNDAMENTALS OF DESIGN • Visual elements • Typography • Page layout

a special type of communicator, capable of taking ordinary words and images, translating them intoan inviting, meaningful, and accessible message.

! DESIGNER IS…

THE GOAL Create a visual representation of information with a sense of order and clarity that makes it easier for the viewer to understand.

THINK LIKE A DESIGNER

C.R.A.P. contrast | repetition | alignment | proximity

CONTRAST

Creates interest on the page Organizes information

CONTRAST: HOW? Fonts

Line thickness

Colors

Shapes

Sizes

Space

CONTRAST: AVOID

Being a wimp

Being afraid to make items very different

REALLY DIFFERENT.

l+I

Oran SQf!IO Ooro Co1mry Z/Jt2·20t4 CGrr.prtneJ'l!NC I/TVPrt:1eI1ti>:,rr 8 C4:t Plo1t/or Son Josi. CA TGA

I "le J:rimerymode d :J\PC·su· : ;imc,ns 1-'L\V~ nthe c.;;~u 'lty 1~-;.:Jtulil co'ttact ;unons \ 'l~M lb /%), fol ow : d t v het:ro;.:Jtual co1tact {ll%), enc n ecoon Cru~ u$E {~%). 1ab e :, ~ ow ;.c.

brcokdo·lt'n of I IV prcvolcr cc b·tmodc of-: xpc,~urc ., .. d f er dcr.

f'/ OCe of Ex~s.1re Tctal To!a M ale f'/ ale Fe-n:ile Fe-nal: .:0) ''" (ni ''" '"' "'' \ 1'.jf'/ '" n,~ ,,, 7F~ 0 0~

n_,e,: l:lon drui u>: ;1o u) ., '" " "" 10 .,. \ 1Sf'/ / IDL' 42 =-"6 42 G" 0 o·i, ~ l"' l l"I H , l"lm .-il I 11111-,1 I S1 11 ~ ,~ "' "" i,7 ¼

~1;.< nog :,ec1f1ed 27 11!< 52 8!< ;µ 2!)%

Oth: r 12 1" ~ 1" 7 G% Tctcl "'" 100% b~9 100% ll':,I 1 00%

T"lc m~ic,ritv ot HIV c~:.c:.in s~nt~ 0 -l r~ Cc·unh·-l rc ~mo~ Whi te f'/ S\1 17: ~J. tc,How~d bv Hh :1..,11i1 l'/ .'1,\ '1 itii~ ). t. , .,11 .,1111 p .,, ifi1 -.1-,nd.,., ( ;:l) l'/ .'l,\ '1 (6 '1,~ , .1rnl RI"' k \ '1~1'/ (~A,;,'. T.11 I .. F. , h1,w-. ., :11 ... 1kd uw,1 cif Hrv :111"' -..-,l- 11< ~ liv 11~111~ uf ~1:111, Ul"'" ' u l 1,11 ~li-· llmi1 ily

J.,J:Jc..6 ... H V orc >n1lcnc,: i "I S~nt ~ O~r~ Coontv bv 1\:>dc ot CJi.po:;u·c ,lfid f ;),: c / ct1nkitv :;)>Ot 2C10)

M :,d: ,:,f f'/S\ 'I DV N'S~l/ OU Hete··:>$e:<ual R:skn~ O!herJ iO!al tJipo~ure .:C·n!lict ~pee f1: d

T,,t,,il ln l '"..£'", <1 . , .. r,7 " f! 'l::l" Total 1¾) 6 7¾ S o/c 5% llo/c JL% "' 100% 1N h1t: ( "I) l.!',J :a :!l :.:b :.:l. l ll:! w.- it -: (%) " " F.~ ,",%, 7 ~ f. ¾ "" 100"' ela,: k ( "I) •• s ,, 23 20 7 .. 81;)<:1<(%'. 38" s~ 49G 24~ 219(, 79G 1009G I li~:"11'.l'!ir (n l 177 11 " ;i;\ ,. ' ')(. ",

Hl; ~cnlc ~ ) 67 ¾ ·" 5% l ?¼ JL% "' 100% ,\ ~u n / 1'1 (n i so 4 2 7 B l 77 i).-.i,m ' Pl l~I ""' "!~ "' ~~ 1 7% 1 % 100"'

As fo· HIV ·ncl ,:tence (t "le number of ne'.NH V ca.ses In l OJO), !"le maJc,r lt / of n:-w o sesln S.a-rtc, U a' li .:C·u "'lt>,· w : re crr.o, g w h te ('ll':SI men (t :,<;<;) cgea w-:.:9 l l :>~ ) u teen n 1aol : / .

J.,J:Jc..( . HV i "lcicicncc in S;) "!tt. Cl~r ;) Count / bv i c nCcr, r~cc/c th1id tv. ~n ::1 -l ec (~.:, c,t 20101

"

CONTRAST BEFORE

The ~MY oode: of ~ure ~are peope ~ wdl tcV In the UM.tty e !.e.l:ll.U c..ott..1et ~ :nie~ ..to

~ wi: 'Mm n•n !MW) ($7"\ followod by ,-i.n:,a:ni.al cOl"Ua CU"). ,1.-ld .-,.wori ct,;g ~ Gh.l, la.bl• $

sher.vs .1. tru);dOM"I al tw pnr,.olru byaodl of ~.JN .and (*Ider.

IWf IWf RIUU fBW.E IIODf Of EXPOSl/lll TIITAL JIii TOTAL ('1,1 JIii II'! INI r.r,J - S<S 57,- 545 1$" 0 °"

lr:Jedion O'\.e ~~ fl)tJ) ., s .. 31 ... 10 a" 1,111,1/l)U (2 s" •2 611, 0 o" Met~ ctW!t.ld. 91 u" 21 l" 68 57'.II

RM,oi:..,.cmod 117 II" Sl 8" lA -°"'"' 12 I" 5 I" 7 6" T~I 818 1009' 699 1009' 119 1009'

So,.«,,t-1'()iG S,,.rlr4 Cbo C'°""{f 9iARS ~f4"" "{ ,.,_ 1IJ 1'()lH

Tnns.m ~on ~,1. m3le-co-m..1a1t: sa eoN.!llL. ::es .a ~r:y oi ti'/ C::e!'. in »nu Cbt.1 tOU'lt'y .u'llOl"t! \llbt~

(75,"), HGp:na (5'10. Mo, Mid P.i,:dic b.,.i.,d~ (PO (65,"), Mid ;i p!&:nlrty ;r'.'f°"i etui:. 08'6). Tabl, 6

shows • 1:.-.ak.iO'll'I oi 1-t'Y' pr1:va:w,c:1 by modi Gi upo.sin •nd r;,.-ce/ tfflGlJ.

TOTAL WHITE IUCK RSPANIC ASU.NIPI

-.,or~ 11'1 N ~ I 'll JIii ~ I'll ll'l (MJ I'll

1151,1 54> 67lll 279 75" l6 - 1]1 67lll ;o 6Slll

llU •1 ;,- 21 6" 5 Slll II ... • '" MSM/l)U (2 s,. 23 6lll ' '" 12 s" 2 3,-

He::e~3l oonuct 91 "" 26 '" 23 2,,. ll 12" 7 9"'

~nOC!.peaftied 87 "" 22 6" 20 21" 29 u" L3 17"

OtJw 12 I" <I lll 7 7" 3 I " I lll

7oul 8l8" IOOII Jn IOOII g; IOOlll 215> IOOlll n IOOII

.so..«at. 2010 Silrlr.o CbV C..,. DW6 dlillll (• "{ .lm ». 20W

CONTRAST AFTER

)101010101010101010 LYEARS0FSERVICE101 )101010101010101010 L010101010101010101 )101010 AIDS . GOV 010 LO 10101010101010101 )101010101010101010 L010101010101010101 ) 1010101010101 J AIDS.gov

•·· S00:1 to be

010101010101010101

010101010101010 s~~1~G~~~

CONTRAST

REPETITION Unifies content and adds

visual interest

Carries across pages/slides Uses styles and templates

9 4 5 9 8 2

5 3 5 2 3 7

6 8 9 4 5 2

1 9 7 1 6 5

9 8 4 7 5 2

3 7 7 4 9 3

9 4 5 9 8 2

5 3 5 2 3 7

6 8 9 4 5 2

1 9 7 1 6 5

9 8 4 7 5 2

3 7 7 4 9 3

HEADER Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod rempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veoiam, quis oostrud exercitalioo ullamco lahori.s ni~i ut aliquip ex ea commodo coosequat. Duis aute irure dolor in reprehenderit in voluptate veli1 esse cillwn dolore eu fugiat nulla pariarur.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod rempor incididum ur labore et dolore magna aliqua. Ut euim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum d olor sit amet, coosecterur adipisicing elit, sed do eiusmod rempor incididum ur labore et dolore magna aliqua. Ut enim ad minim veniam, quis noscrud exerc italioo ullamco laboris nJ.,;i ut aliquip ex ea commodo con.<;equat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem lp sum dolor sit amet

oomecterur adipisicing elit, sed do eiusmod tempor inc ididunc ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis no..'itrud exercitation ullamco laboris nisi ut aliquip ex ea comrnodo consequat. Duis aute irure dolor in repreheoderit in voluptare velit esse cillum dolore eu fugiat nulla pariarur.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod rempor incididum ur labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea comrnodo consequat.

LOREM IPSUM DOLOR SIT AMET

oon.'iectetur adipisicing elit, sed do eiusmod tempor incididunc ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis no..">trud exercitation ullarnco laboris nis,i ut aliquip ex ea commodo consequat. Duis aute irure dolor in repreheuderit in voluptate velit ess.e cillum dolore eu fugiat nulla pariatur.

HEADER Lorem ipswn dolor sic amec, consecterur adipisicing elic, sed do eiusmod cempor incidfriunt ut Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nis i ut aliquip ex ea commode con.~equat. Duis aute irure dolor in reprebenderit in voluptate velic esse cillum dolore eu fugiat nulla pariatur.

Lorem ipswu dolor sit amet, consecterur adipisicing elic, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud e:xercitation ullamoo laboris nL~i ut aliquip ex ea commode consequat.

!ALorem ipsu m dolor Jit amet, con!>ectetur adipisicing elit, sed do eiusmod temper incididunt ut Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud e.'tercitation ullamco laboris nis i ut aliquip ex ea oommodo consequat. Duis aute irure dolor in reprebenderit in voluptate vel.lc esse cillum dolore eu fugiat nulla pariarur.

Lorem ipsu m dolor Iii amet cooseccetur adipisicing elit, sed do eiusmod temper incididunt ut Labore et dolore magna aliqua. Ut enim ad minim veniacn, quis nostrud e.'tercitation uUamco laboris n.is i ut aliquip ex ea oommodo con.~equat. Duis aute irure dolo.r in reprebenderit in voluptate velic esse cillum dolore eu fugiat nulla pariatur.

Lorem ipsum dolor sic amet, consecterur adipisicing elic, sed do eiusmod cempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quls nostrud exercitation ullamco laboris nisi ut aliquip ex ea commode consequac.

Lo,rem lpsum dolor sit amet oonseccetur adipisicing elit, sed do ciusmod temper incididunt ut laborc et do lore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commode consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cilium do lore eu fugiac nulla pariarur.

COUNT IJOWN TO~

Tt1t<t ttlV TfoTIN6 ~ eotJtCAfi[ ~[HVfCfo

) f lNVSlRVIC[SJffil.GOV

-,J..AIDS.yo·,

COlM~~lO~wt/~/vmt; ~ 1/p

OUR PART If W[ iM COii 10 WIN ltt[ llfil1l

AGAINST H~/AIDS

ALIGNMENT

ALIGNMENT ▪ Notice where you place elements on the

page so that they align to a grid and aren’t haphazardly placed on the page.

▪ Always find something on the page to align with, for example, the center line or the left or right margin.

▪ Elements should be unified, connected, and interrelated with each other.

ALIGNMENT: AVOID ▪ Centering as a default

▪ Having reviewers’ eyes jump all over the page

▪ Including too much variation

ALIGNMENT

ALIGNMENT

PROXIMITY ▪ Makes it easier to digest information

▪ Items grouped together improve the availability of information

PROXIMITY: AVOID ▪ Too many separate elements that don’t

have a relationship to each other

▪ Equal amounts of white space

High-Impact Prevention in the South Workshop Agenda

9:30 -10 :00 AM Introduction

10:00 AM - 12:00 PM Plenary Session

Cultural Humility/Cultural Responsiveness to Engage Clients and Ensure Retention

12:00 -1 :00 PM Lunch

1:15 - 2:45 PM Concurrent Sessions

PrEP Overview & PrEP in Clinical Settings Social Media Strategy Development

3:00 ­ 4:30 PM Concurrent Sessions

Financing PrE P Getting to Undetectable: Supporting Medication Adherence

High-Impact Prevention in the South

Workshop Agenda

9:30 - 10:00 AM Introduction

10:00 AM - 12:00 PM Plenary Session: Cultural Humility/Cultural Responsiveness to Engage Clients and

Ensure Retention

12:00 - 1:00 PM Lunch

1:15 - 2:45 PM Concurrent Sessions

PrEP Overview & PrEP in Clinical Settings

Social Media Strategy Development

3:00 - 4:30 PM Concurrent Sessions

Financing PrEP

Getting to Undetectable: Supporting Medication Adherence

/i\R

EMMA STONE

"LA LA LAND", FILM

Best Act re -;

PROXIMITY

st A tr s

EMMA STONE

Fil II

La La Land

PROXIMITY

FUN WITH POWERPOINT

Contrast Use transparent boxes

Colorizing an image

Paintbrush

Paintbrush

COPYRIGHT ▪ Many images that you find online are

protected under copyright law. You must have a license to legally use an image. ▪

IMAGE SOURCES

Free or Inexpensive Images and Icons ▪ search.creativecommons.org ▪ thenounproject.com ▪ Unsplashed

Stock Image (paid) ▪ Thinkstock.com ▪ iStockphoto

CDC Public Health Image Library ▪ phil.cdc.gov/phil

gimp

pixlr

canva.com

•

IN SUMMARY

••

Design Principles Contrast, Repetition, Alignment, and Proximity

PowerPoint tips and tricks Resources for you

Image resources Inexpensive and free tools, such as Canva, Pixlr, and Gimp are available for your design

QUESTIONS? Comments? Concerns?

CBA@JSI

i s funded by the Centers for Disease Control and Prevention (CDC) to provide capacity building assistance to community-based organizations across the U.S. to support CDC’s high-impact approach to HIV prevention under grant number

1U65PS004406-01.

Would you like more assistance? www.CBA.JSI.com