Notes for a presentation I delivered at the August 2011 Digital Composition Workshop, on the subject of web site design.

1. The Rhetorical Nature of
Web Design
a few preliminary considerations for
colleagues and students
Amy Goodloe
© 2011 All rights reserved.

2. PREFACE
 What follows are notes for a presentation I shared
with colleagues at the PWR Digital Composition
Workshop on August 10th, 2011.
 These notes are part of a larger project I’m working
on on the topic of the rhetoric of web design, so
please keep that in mind as you move further
along in the presentation.
 TIP: The early slides are meant to be moved
through at a brisk pace!

3. COPYRIGHT NOTICE
All the material on these slides is the sole
property of Amy Goodloe © 2011
all rights reserved
Do not use without permission!

4. The Basic Idea:
to inspire you to think rhetorically
about web design
- reading the web
- writing the web

5. Every element of a web site
has a rhetorical purpose.

6. graphics
layout
color
navigation
organization
and of course...
text

7. Everything works together to
convey:
- a particular mood or tone
- a message about the content
- a message about the author
(ethos)

8. In other words, every
element of a web site
communicates a message...

9. whether the designer intended it
to...
or not!

10. (this would be a good place for an
example, eh?)

11. So how do you design a web site
that sends the right messages for
your rhetorical situation?

12. Start by paying attention to how
people read the web.

13. You probably don‟t remember when
you learned how to navigate a book.

14. (if you haven‟t seen this already, go watch it!)

15. To read a book, you had to
figure out elements like:
table of contents
chapters
sections
page numbers
appendices
index
(or is that indices?)

16. You also learned to pay attention
to a variety of structural and
formatting elements for cues to
help you interpret the meaning of
printed text.

17. Structure
thesis statements
previews of main points
topic sentences
transitions
sentence structure
headings
sub-headings

18. Format
alignment
(left, centered, right, justified)
font type
font size
bold, italics, underlining
color
bulleted lists
charts and tables
margins

19. Structural and formatting elements
always convey meaning.

20. The key is making sure they convey the
meaning you intend to convey.

21. A little food for thought:
If you read the previous slide on a
web page, what meaning would the
underlined word you convey?

22. That brings us back to the question:
so how do people read on the web?

23. Web sites come in a variety of
layouts,
possibly more than are available
in print formats.

29. But some layouts are more
common than others.

30. However, more common doesn„t
necessarily mean more
readable.
(a variety of factors influence
web site layout)

31. But if a layout is common, that probably
means many web readers have been
“trained” to read it.
(more on the concept of “training”
your readers later!)

32. Research with thermographic
imaging shows that readers tend
to read web pages in a more or
less
“F” shaped pattern.

33. Like this:

34. So you wouldn‟t want to
put your most brilliant
insights in the lower right
corner.

35. (unless, of course, your intention is
to mess with readers‟
expectations!)
* Not recommended for class web sites!

36. Common web page layout

37. Or

38. For example:

39. Let‟s take a closer look at that top
navigation menu.

40. How do you “read” the placement of
the items on the menu?

41. Many web readers have been
“trained” to expect a home
button on the far left and a
contact button on the far right.
(A “home” button returns readers to the
site‟s opening page.)

42. Many web readers also expect on-site links
along the left, and off-site links (if any) along
the right.

43. These are just a few of the many
rhetorical decisions you‟ll need to
make when you design a class web
site.

44. Now let‟s take another look at
that header image.

45. What message does the image convey?

46. Here‟s what I was going for:
- iconic image of Marilyn Monroe is typically
associated with cultural ideal of female
heterosexuality
- rainbow gradient hints at a possible queer
reading
- repetition of image underscores
performative nature of gender

47. Didn‟t “get” that message yourself?

48. No problem.
The image also has pretty colors that
blend nicely with the rest of the site.

49. Let‟s take another look.

51. Don‟t underestimate the
rhetorical power of pretty colors.

52. How much time do you want to
spend reading this web site?

54. None!

55. I will talk more about elements like
color and header images in another
presentation.

56. For now, let‟s look at a few other
elements of my class web sites
that illustrate how design conveys
meaning.
(The following slides contain screenshots of
my sites, which discussed in the workshop)

59. Let‟s turn to more pressing concerns:
how do YOU design
a rhetorically effective web site?

60. To get you started thinking about
answers to that question

61. (notice I didn‟t say I would answer it!)

62. I want to do three things:

63. (1) Go over the anatomy of
Wordpress
- because you‟ll most likely be using
Wordpress to build your site
- because the anatomy lesson
applies to reading and writing a
variety of web sites

64. (2) Show you what kinds of
design
decisions you can make with
your
own Wordpress site

65. (3) Help you better understand the
rhetorical considerations that
should inform the way you “write”
for web audiences
(using a few sample sites,
including my own)

66. Continued…
 My notes on rhetorical considerations for using
Wordpress for class web site design are available in
a separate presentation
 If you have any questions or comments, please
feel free to contact me at:
http://amygoodloe.com/contact