Content from a designer’s

perspective

Content vs. Design

Design

“It takes about 50 milliseconds (that’s 0.05 seconds) for users to form an

opinion about your website that determines whether they like your site or not, whether they’ll stay or leave”

-2012 Google Study

Content

“Content is King”

Good design

gets visitors to stay on a website

Good content

keeps visitors coming back

+  

Designing for Content

Get All of the Content Up Front

…unless we’re talking about cupcake ipsum!

Cupcake ipsum dolor sit amet chupa chups marzipan chocolate cake. Bear claw I love mu!n jelly wypas pastry carrot cake cookie. Topping caramels faworki chupa chups. I love tart sweet. Jelly liquorice tiramisu jujubes. Powder cake halvah I love. Cookie I love dessert biscuit cheesecake donut. Tart sesame snaps pudding to"ee caramels pastry brownie pastry.

Think “Lifestyle” and Not “Launch”

Make Sure Content is Scan-able

Utilize Typography and Images

vs.  

Use Whitespace

Follow Web Patterns

Have a Search Bar

Developers? UX Designers? Project Managers? Content Strategists?

References •  http://www.onextrapixel.com/2011/02/23/planning-for-a-content-heavy-web-design/ •  http://www.shayhowe.com/web-design/web-content-strategy/ •  http://www.urbanfonts.com/blog/2013/02/serif-vs-sans-the-final-battle/ •  http://www.vanseodesign.com/web-design/is-content-necessary/ •  http://research.google.com/pubs/pub38315.html •  http://conversionxl.com/first-impressions-matter-the-importance-of-great-visual-design/ •  http://googleresearch.blogspot.com/2012/08/users-love-simple-and-familiar-designs.html •  http://www.livescience.com/10429-impressions-di!cult-change-study.html •  http://www.alexa.com/topsites/countries/US

Images: •  http://www.hongkiat.com/blog/beautiful-website-search-box-ui-design/ •  http://blog.kissmetrics.com/common-website-navigation-mistakes/ •  http://www.griplimited.com/ •  http://blog.hiledesign.com/lorem-what/2439/ •  http://www.facebook.com/ •  http://www.bing.com/ •  http://craigslist.org/ •  http://en.wikipedia.org/wiki/Main_Page •  http://www.nytimes.com/ •  http://www.usatoday.com/ •  http://www.newyorker.com/ •  http://jacksonvilleartwalk.com/#media •  http://austinbeerworks.com/beer/ •  http://heymosaic.com/ •  http://www.empellon.com/cocina/#close •  http://www.apple.com/ •  http://mailchimp.com/ •  http://www.wired.com/ •  http://www.maisonmartinmargiela.com/ •  http://venturebeat.com/ •  http://singlefunction.com/wordpress/wp-content/themes/showcastic/styles/common/images/clutter_example.jpg •  http://www.reddit.com/ •  http://www.custommade.com/ •  http://www.indiegogo.com/