Before You Build: Content, Brand & User Experience

Slide / 39 Betsy Cohen @betsela www.radiatewp.com & www.positiveelement.com BEFORE
YOU BUILD Content, Brand, & User Experience 1 BETSY COHEN @betsela www.radiatewp.com WORDCAMP PHOENIX 2014 Friday, January 17, 14

Slide / 39 Betsy Cohen @betsela www.radiatewp.com & www.positiveelement.com Image
of staﬀ group or oﬃce here ( 898w x 338h pixels ) — Dwight D. Eisenhower 2 I have always found that plans are useless, but planning is indispensable. “ Friday, January 17, 14

Slide / 39 Betsy Cohen @betsela www.radiatewp.com & www.positiveelement.com PEN
BEFORE PIXEL 3 Rule # 1 Friday, January 17, 14

of staff group or office here ( 898w x 338h pixels ) 4 At first, the possibilities are endless. Too many choices is overwhelming! Friday, January 17, 14

of staﬀ group or oﬃce here ( 898w x 338h pixels ) 5 Narrow down the choices. The process we’re talking about today helps you clarify what you want and need. Friday, January 17, 14

of staff group or office here ( 898w x 338h pixels ) 6 And finally... The One. At the culmination of the process, you’ve got a super- cute solution that satisfied your needs. Friday, January 17, 14

Slide / 39 Betsy Cohen @betsela www.radiatewp.com & www.positiveelement.com THE
PROCESS 5 BUILD 1 DEFINITION 2 CONTENT 3 USER EXPERIENCE 4 DESIGN 7 Friday, January 17, 14

Slide / 39 Betsy Cohen @betsela www.radiatewp.com & www.positiveelement.com [
DEMO TIME ] 8 Friday, January 17, 14

Slide / 39 Betsy Cohen @betsela www.radiatewp.com & www.positiveelement.com MEET
THE CLIENT Image of staﬀ ( 334w x 387h pixels ) Iris Natalya Kaminsky is a seasoned PR professional with 7 years of experience working for the top PR ﬁrms in the Southwest. Now she’s branching out on her own. Iris is ready to establish herself and attract clients to her burgeoning business, and she needs to develop an online presence. Iris Natalya Kaminsky PR / Communications Consultant 9 Friday, January 17, 14

Slide / 39 Betsy Cohen @betsela www.radiatewp.com & www.positiveelement.com STEP
1: DEFINE 10 Friday, January 17, 14

Slide / 39 Betsy Cohen @betsela www.radiatewp.com & www.positiveelement.com 11
5 BUILD 1 DEFINITION 2 CONTENT 3 USER EXPERIENCE 4 DESIGN 1A DEFINE GOALS ๏ Why do I need a website? ๏ What speciﬁc action do I want visitors to take? ๏ Bonus Q: One year after launch, how will I know whether the site is successful? Just a couple of questions: Friday, January 17, 14

5 BUILD 1 DEFINITION 2 CONTENT 3 USER EXPERIENCE 4 DESIGN 1B DEFINE AUDIENCE ๏ “Lite” version of User Personas ๏ Think about and list audience segments. ๏ For each segment, what’s the purpose of their visit? Branding 101: Know your audience. Friday, January 17, 14

Hero image here ( 898w x 572h pixels ) Friday, January 17, 14

2: CONTENT 14 Friday, January 17, 14

5 BUILD 1 DEFINITION 2 CONTENT 3 USER EXPERIENCE 4 DESIGN 2A CONTENT REQS ๏ What content does each audience segment want, speciﬁcally? ๏ What content will help you accomplish your deﬁned goals? ๏ What are prospects searching for in search engines? Align content with audience & goals. Friday, January 17, 14

5 BUILD 1 DEFINITION 2 CONTENT 3 USER EXPERIENCE 4 DESIGN 2B CONTENT ROADMAP ๏ List / organize pages. Be fancy, or just make a bulleted list. ๏ For blogs, list some initial categories in which you plan to write posts. Roadmap, sitemap. Tom-a-to, tom-o-to. Friday, January 17, 14

5 BUILD 1 DEFINITION 2 CONTENT 3 USER EXPERIENCE 4 DESIGN 2C CONTENT DEVELOPMENT ๏ You write, someone else edits. Or vice versa. ๏ For a blog: 5-10 blog posts up front ๏ Remember the golden rules of web content. Projects are more successful when content is written early in the process. Friday, January 17, 14

Slide / 39 Betsy Cohen @betsela www.radiatewp.com & www.positiveelement.com GOLDEN
RULES OF WEB CONTENT SHORT PAGES SHORT PARAGRAPHS SHORT SENTENCES BREAK IT UP VISUALLY. INCLUDE A CALL TO ACTION. 19 Friday, January 17, 14

3: USER EXPERIENCE 20 Friday, January 17, 14

5 BUILD 1 DEFINITION 2 CONTENT 3 USER EXPERIENCE 4 DESIGN 3A UX / SITE FLOW ๏ Consider each audience segment. ๏ What page will they ﬁrst land on? ๏ Where are they likely to go next? ๏ How can you best lead them to the desired action? Site ﬂow: The likely or desired path visitors will take through your site. Friday, January 17, 14

5 BUILD 1 DEFINITION 2 CONTENT 3 USER EXPERIENCE 4 DESIGN 3B UX / LAYOUT ELEMENTS ๏ Plan default interior layout, then home page and any custom layouts. ๏ For each, list & prioritize elements. ๏ Note any mobile variations. What content & widgets belong on each template? Friday, January 17, 14

Slide / 39 Betsy Cohen @betsela www.radiatewp.com & www.positiveelement.com LAYOUT
ELEMENTS Logo Tagline Nav Menu Social Proﬁle Icons Main Content Email Subscribe Testimonial Recent Posts 24 Friday, January 17, 14

5 BUILD 1 DEFINITION 2 CONTENT 3 USER EXPERIENCE 4 DESIGN 3C UX / WIREFRAMES ๏ Sketching is easy & accessible, but feel free get fancy & high-tech. ๏ Interior default layout first. ๏ Mobile variation. ๏ Reflect the priorities you set: Important stuff higher, often larger. Get out your drawing pencils and kneaded erasers. Friday, January 17, 14

5 BUILD 1 DEFINITION 2 CONTENT 3 USER EXPERIENCE 4 DESIGN 3D UX / RAPID PROTOTYPE Double duty: This step is also the foundation for step 5-Build. ๏ Dev site: WordPress, minimal theme. ๏ Create pages, place content, and add text widgets as placeholders. ๏ Keep it simple. ๏ Test: Get feedback on the site ﬂow, and reﬁne. Friday, January 17, 14

4: DESIGN 30 Friday, January 17, 14

5 BUILD 1 DEFINITION 2 CONTENT 3 USER EXPERIENCE 4 DESIGN 4A DESIGN / STYLE BOARD For a ﬂexible, responsive site, create a tool kit of design elements. ๏ Logo and typography ๏ Color palette ๏ Accents: Line, texture, shape, pattern ๏ Image treatment ๏ Buttons Friday, January 17, 14

5 BUILD 1 DEFINITION 2 CONTENT 3 USER EXPERIENCE 4 DESIGN 4B DESIGN OF TEMPLATE Search for a theme that ﬁts, or design your own. ๏ Look for a match to your layout (wireframes) that is somewhat close to your design (style board). ๏ Or “merge” your wireframes and style board to create your own mockups. Friday, January 17, 14

Slide / 39 Betsy Cohen @betsela www.radiatewp.com & www.positiveelement.com Hero
image here ( 898w x 572h pixels ) STYLE BOARD + LAYOUT Friday, January 17, 14

Slide / 39 Betsy Cohen @betsela www.radiatewp.com & www.positiveelement.com REVIEW
THE PROCESS 5 BUILD 1 DEFINITION 2 CONTENT 3 USER EXPERIENCE 4 DESIGN 37 Friday, January 17, 14

RESOURCES Color Palette Design & Inspiration ๏ Kuler.adobe.com ๏ Colorschemedesigner.com Typography / Web Safe Fonts ๏ Google.com/webfonts ๏ Fontsquirrel.com Stock Images, Illustrations & Icons ๏ DepositPhotos.com ๏ iStockPhotos.com ๏ Shutterstock.com Content Development ๏ Zerys.com (Marketplace) Here you’l ﬁnd links to some of the cool tools mentioned by Betsy and other participants during the presentation. Links can be found on my Positive Element blog @ www.positiveelement.com/wordcamp-phoenix-2014-resources/ Image Editing & Resizing ๏ Picmonkey.com ๏ Imsanity Plugin - wordpress.org/plugins/ imsanity/ Placeholders ๏ Lipsum.com ๏ Placehold.it Style Board Design ๏ Betsy’s Style Board template for Photoshop: www.positiveelement.com/wordcamp- phoenix-2014-resources/ ๏ StyleTile.es Friday, January 17, 14

Slide / 39 Betsy Cohen @betsela www.radiatewp.com & www.positiveelement.com THANK
YOU Any questions? 39 Friday, January 17, 14

Before You Build: Content, Brand & User Experience

Before You Build: Content, Brand & User Experience

More Decks by Betsy Cohen

Other Decks in Design

Featured

Transcript