Guidelines for creating a well-designed WordPress site. Originally developed by Erika Barker.

1. WEBSITESTHATROCK
MAKE YOUR AUDIENCE WANT TO COME BACK FOR MORE

2. !
“TRULY ELEGANT DESIGN INCORPORATES TOP-NOTCH
FUNCTIONALITY INTO A SIMPLE, UNCLUTTERED FORM.”
!
—DAVID LEWIS

3. WE JUDGE BOOKS
BY THEIR COVERS

4. WHAT IT TAKES

5. ATTENTION TO
DETAIL

6. QUALITY > QUANTITY
!
!

7. BAD DESIGN
=
NOT INTERESTED!

8. Bad Design & Layouts =
NOT INTERESTED!

10. Simple
Navigation
Simple, small
logo
easy-to-read
text
Latest, and
greatest on the
home page.
No scrolling
required.

11. Simple, small
logo
Simple
Navigation
Latest, and
Greatest on
home page
Easy-to-Read
text
No scrolling
required.

12. Simple, small
logo
Simple
Navigation
Latest, and
Greatest on
home page
Easy-to-Read
text
No scrolling
required.

13. 10 RULES
THAT WILL KEEP YOUR
READERS COMING BACK
FOR MORE

14. RULE 1
IT’S NOT ABOUT:
YOU
YOUR WANTS
YOUR INTEREST
YOUR OPINIONS
YOUR FEELINGS

15. RULE 2
NO MENU BARS THAT SUCK

16. RULE 3
KEEP IT SIMPLE, AND UNCLUTTERED

17. RULE 4
KEEP THE BACKGROUND SIMPLE

18. RULE 5
NEWS SITES DON’T USE STATIC
HOME-PAGES.

19. RULE 6
CHOOSE THEME WISELY

20. RULE 7
Pretty DOES NOT MEAN EFFECTIVE

21. Make sure your theme’s text size
is easy on the eyes.
!
Small text results in:
“OMG, get me out of here! I will never
visit this site ever again!”
!
For the sake of a grilled cheese
sandwich, let your readers READ the
content easily!
RULE 8

22. RULE 9
NO DISTORTED IMAGERY

23. RULE 10
This is not a
poem.Text must
be left justified.

24. Live Demonstration Time

25. Choose the Right Theme

26. Responsive Design

27. “Responsive Web design is the approach that
suggests that design and development should
respond to the user’s behavior and environment
based on screen size, platform and orientation.As
the user switches from their laptop to iPad, the
website should automatically switch to
accommodate for resolution, image size and scripting
abilities. In other words, the website should have the
technology to automatically respond to the user’s
preferences.This would eliminate the need for a
different design and development phase for each new
gadget on the market.”
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
!
Responsive Design

28. Notice how the overall design of The Boston
Globe remains the same on these 4 different
devices with radically different displays.

29. Non-Responsive Site
Notice how a
big part of the
website is
getting cut off
In order to use
this navigation,
we must scroll
left and right.
In order to see
the remaining
content, we must
scroll left, right, up,
and down.
This looks terrible!

30. Notice how we
only have to
scroll up and
down.
Notice how all
of the images
automatically
resize.
This image was
shrunk for this
lesson, but
notice how the
text resizes, but
is still very
legible.
Notice how the
menu changes to
a drop-down
box.

31. Installing Theme

32. Download Awesome
Themes Here:
http://bitly.com/bundles/erikabarkerfs/d
Make sure the theme you are choosing
looks professional, and meets the criteria
outlined in this lesson.

33. Download the theme you wish to use.

34. WordPress Setup

35. Inside of the “General Settings” module, type the name
of your site in the “Site Title” box.
!
For Tagline, type a good description of your site. When
you are finished, scroll to the bottom and click the
“Save” button.

36. Posts & Pages
Make sure you are using the right method for posting
content. Your site heavily depends on it.
!
!

37. Pages
Pages are only used for content that is related to the
site’s hierarchy. It is the content that your audience
would want to see if they were looking for specific
information on the organization or company.
!

38. Posts
Posts are for blog entries, news articles, or press
releases. They have very little to do with the site
hierarchy. This is usually the main content that brings
your audience to your website.
!

39. Content Implementation

40. BIG EMPTY GAPS ARE
UNPROFESSIONAL
This lesson will show you how to fill the page.

41. BIG EMPTY GAPS ARE
UNPROFESSIONAL
This lesson will show you how to fill the page.
Yuck! Look at
this big, nasty
gap next to our
video. This looks
unprofessional.
Let’s fix it!

42. Umm, what was the
purpose of this video?
What goals were met?
What was the
objective? There is no
text here that explains
anything. That’s BAD!

43. Much better!
Adding text also
made this page
SEO friendly!

44. Yay! This looks
much better!
No nasty, empty
gaps. w00t!

45. Inserting Imagery

46. Yuck! Look at this big,
nasty gap next to this
image. Why is this image
so small? This looks
unprofessional. Let’s fix it!

47. Wrapping Imagery

48. Inserting Text From Word

49. Don’t simply link your audience to a document.
That’s lazy, and will also hurt your page rank. Take
the text from the document, and paste it onto the
page.
!

50. Yuck! Look at
this big, nasty
gap in our text.
This looks
Unprofessional!
Yuck! Triple
Spacing? This
looks ugly. Let’s
do this the right
way!

51. Widgets

52. Categories

53. Tags

54. This is why we put our Meat & Potatoes into Posts
and not Pages. I really hope you did not forget to
tell them this Erika.
!

55. Navigation

56. Home Page

57. !
“WHEN YOU FIRST START OFF TRYING TO SOLVE
A PROBLEM, THE FIRST SOLUTIONS YOU COME
UP WITH ARE VERY COMPLEX, AND MOST
PEOPLE STOP THERE. BUT IF YOU KEEP GOING,
AND LIVE WITH THE PROBLEM AND PEEL MORE
LAYERS OF THE ONION OFF, YOU CAN OFTEN
TIMES ARRIVE AT SOME VERY ELEGANT AND
SIMPLE SOLUTIONS. MOST PEOPLE JUST DON'T
PUT IN THE TIME OR ENERGY TO GET THERE. WE
BELIEVE THAT CUSTOMERS ARE SMART, AND
WANT OBJECTS WHICH ARE WELL THOUGHT
THROUGH.”
!
—STEVE JOBS