An overview of the principles of web design, user experience, content strategy and search engine optimization, with a focus on how a beginner or non-coding WordPress user can employ them to make better websites.
2. wordpress
seo
design
ux
content strategy
sitting in a tree,
k-i-s-s-i-n-g.
Sunday, March 25, 12
3. great big kettles of fish, in which
there are very clever experts
» Design
» User Experience (aka UX)
» Content Strategy
» Search Engine Optimization (aka SEO)
Sunday, March 25, 12
4. my favorite ideas which are
important to all these disciplines
» Hierarchy
» Clarity
» Brand (or, on-brand-ness)
» Your audiences (aka “users”)
Hierarchy Clarity Brand Audience
Design
UX
Content
SEO
Sunday, March 25, 12
6. design (what is it?)
» you know it when you see it
» visual organization which aids comprehension
» aesthetic appeal (or lack thereof )
Sunday, March 25, 12
7. loosely…
prominent but not follows web paradigm for
overpowering
good branding / “you are logo in top left corner,
horizontal navigation below it
here”
bigger and
brighter = orientation
more important
lots of white
space
mid-size, type = so things that
medium ARE there stand
importance, out
small, grey, italic
type = small pops of color
details enliven
otherwise
brand-colored
page
Sunday, March 25, 12
8. loosely… relatively
unimportant items important items
menus and repeated rather
with prominent content than made to
placement
bad hard to tell
apart
stand out
colors
used
arbitrarily
breaks
expected
page
design
paradigms
without a
reason
all text same font and of similar size and weight regardless of meaning or importance
Sunday, March 25, 12
9. ux (what is it?)
» how audiences interact with your site (human-
computer interaction)
» how they move through the site (information
architecture, page structures)
» the feeling that these interactions evoke
Sunday, March 25, 12
10. content strategy (what is it?)
» what content you need (to accomplish the site
goals)
» wordsmithing the macrocopy and the microcopy
(optimizing to accomplish the site goals)
» who’s in charge of the content now and later
Want to know
more?
Read this, or
search for
“content
strategy” on
A List Apart
Sunday, March 25, 12
11. seo (what is it?)
» showing up higher on the page in search engine
results (“We gotta be top of Google!”)
» having how you show up in search engines be
compelling enough for searchers to click and go to
your site
» organic, unpaid rankings
Sunday, March 25, 12
13. hierarchy » design
» Probably the most important thing to take away
from this whole talk
» What’s most important = most prominent stuff in
the design hierarchy
» Like things = equivalent in the design hierarchy
Sunday, March 25, 12
14. hierarchy » design
» proportion
» position
» proximity
» symmetry
» similarity
» alignment
» contrast
» color
» space (aka, pause)
Sunday, March 25, 12
15. evaluating wordpress themes for
good design hierarchy
» Preview themes with your real content and/or
sample content which contains all content types
» wpcandy.com/made/the-sample-post-collection
1 2
Sunday, March 25, 12
16. when you’re writing in wordpress…
» use Wordpress styles consistently = automatic
hierarchies!
Sunday, March 25, 12
17. hierarchy » ux
» What’s the question?
» How will you make the answer obvious?
Sunday, March 25, 12
18. hierarchy » ux
» Where am I? What’s this place like?
What can I get? What should I do?
Sunday, March 25, 12
19. hierarchy » content
» {It’s not about you.}
» What’s in it for me?
» Am I interested in this?
» What is it?
» When’s it from OR How much does it cost OR How
do I get it OR who wrote it OR…
Sunday, March 25, 12
20. hierarchy » seo
» Think about what’s at the top level of your site
» Use your H’s
Sunday, March 25, 12
22. clarity » design
» No clutter (white space is your friend).
» Keep design hierarchy principals handy.
Sunday, March 25, 12
23. clarity » ux
» Make it really obvious what users should do, and
in what order (if that’s important).
Sunday, March 25, 12
24. clarity » content
» Use language at the simplest appropriate level.
» Chunk it for scanners.
» Call it what it is.
» Test different wording or read existing studies
about microcopy when in doubt.
Sunday, March 25, 12
25. clarity » seo
» Choose the keywords to focus on and focus on
them.
» Deep and consistent is better than broad.
» Keep the metaphors in check.
» Change your permalink structure.
Sunday, March 25, 12
26. wordpress plugins for code-free
seo happiness
» Google Analyticator
» WordPress SEO (by Joost de Valk/Yoast)
Sunday, March 25, 12
30. brand » design
» Colors
» Typefaces
» How are photos treated? What kind of other
graphic elements do you use?
» What emotion do the aesthetics evoke?
Your brand is NOT your logo, or even your product. It’s how your organization
is perceived by its audiences. It’s the feeling people have about you. You can
influence this but not control it. Presenting yourself consistently, how you’d like
to be perceived, is a crucial practice, if you care about your brand.
Sunday, March 25, 12
31. brand » ux
» Does the way the audience interacts with the site
reflect the kind of company/organization/blog/
whatever you are?
Sunday, March 25, 12
32. brand » seo
» Don’t try to game the system — authentic
keywords will find you appropriate users who care.
» And you don’t want to look like a jerk.
Sunday, March 25, 12
34. audience » design
» Think about who the audiences are and what kind
of design would be compelling for them.
» Make the visuals appropriate to the demographics.
» Design for special circumstances and regulations
like ADA (Americans with Disabilities Act) or COPA
(Child Online Protection Act)
» Test your design with members of your target
audiences and tweak based on their reactions.
Sunday, March 25, 12
35. audience » ux
» Make the experience compelling and appropriate to
the demographics.
» Test usability with representative audience
members. Even informal testing works wonders to
point out problem areas.
Want to know
more about
informal
usability
testing?
Read this.
Sunday, March 25, 12
36. audience » content
» Like design and UX, keep it appropriate to the
peeps.
Sunday, March 25, 12
37. audience » seo
» Use your Google Analytics to find out what people
are searching on to find you (and what they’re not
searching on that you might have thought was
important).
» Use Google’s keyword research tool at
www.adwords.google.com
» Put yourself in your audiences’ shoes when you’re
tweaking your SEO settings. Think about your
personas.
Sunday, March 25, 12
39. when shopping for wordpress
themes (and plugins), remember:
» Simple and appropriate is way better than complex
and whiz-bang.
» Both up-front planning and consistency over time
will make your sites look more professional and
sophisticated.
» Design, user experience, content strategy and SEO
all benefit from keeping things hierarchical, clear,
on brand and user focused.
Sunday, March 25, 12
40. find me & this presentation
Annie Smidt
email: annie@durablecreative.com
web: www.durablecreative.com
twit: @anniesmidt
slides: http://www.slideshare.net/anniesmidt/
Sunday, March 25, 12