Wiki source for WebDesignStatement2007

Show raw source

ENGL 4170/5170: Web Design for Content Writers
Statement and Requirements
Fall 2007 M C Morgan | HS 314 | 755-2814 | mmorgan at bemidjistate dot edu

Texts and Materials
Required Texts

* Summers and Summers. Creating Websites that Work. Houghton Mifflin, 2005 - Amazon
* Siegel, Kevin. Essentials of Macromedia Dreamweaver CS 3: Skills and Drills. IconLogic, 2007. This text hasn't gone to press yet. I'm arranging to get it from the author as a beta text in pdf.

If you plan on designing sites professionally, have both these books at hand.

* Lynch and Horton. The Web Style Guide, 2nd edition. Yale UP, 2001 Available as an online book, or purchase a print version.
* Van Duyne, Landay, and Hong. The Design of Sites: Patterns for Creating Winning Web Sites. 2nd ed. Prentice Hall, 2007.

You will also need

* a flash drive to store files for this course. 256 megs is ok, but 512 megs is better.
* a good-sized notebook (8 1/2 X 11 or larger) of unlined paper, like an inexpensive artist's notebook, for sketches, wire frames, annotated observations, maps. Notebook paper with a pale grid is ok, but not lined writing paper, please.

You will be online a lot for this course and so will need frequent and stable access to the Internet.

* Dreamweaver is available on the Superlab computers, the computers in HS 109, and elsewhere on campus. If you wish. you can purchase your own copy through the Bookstore or online. Ask for an educational version, which is less expensive.

The course
This course is a workshop in web site design and creation, focused on design for usability and information access rather than on graphic design or self-expression. It proceeds by practice rather than lecture. While I'll present occasionally, we'll spend most of our class time doing workshoppy things: viewing and discussing web sites, working in groups on projects, giving feedback, testing out ideas and concepts... The site design process we're using in this class mirrors site design as it is practiced outside the classroom. So you will be asked to learn by action, by doing: by working through the process of conceptualizing a site, interviewing users, drawing up plans, creating site maps and wireframes, developing content, and, in the end, using Dreamweaver to implement the site.

The course will introduce you to concepts of information architecture, user-centered web site design, visual design, and rhetoric as applied to web site design. You might already by familiar with some of these. Good. Other concepts, other ways of seeing, may be new. That's good too. While you are not expected to master these new concepts, I do expect you to come to understand them and to practice with them. Some of these concepts and practices may challenge a few dearly held values about design, communication, and creativity. They certainly challenged mine when I first encountered them. I'll ask you to be open to new ideas and approaches as we encounter them - to try things out rather than rejecting them. I'd like you to bring these challenges into our discussions, get them out in the open so we can consider them.

Web design is about making choices, getting feedback, and reconsidering those first choices. I'm building this recursive process into the course. Here's how.

Typically, a course might use quizzes and tests to determine your mastery of practices and concepts. Instead, as is appropriate in a workshop, I will ask you to demonstrate a growing mastery of the concepts behind the practice by talking about your work, and the work of others. I may, for instance, ask you to draw on Summers and Summers, chapter 4 and your user profiles to explain how you made the choices in your design of a particular page layout. Or I may ask you to explain how your choice of information architecture - your site map - ties to the goals you've outlined and the workflow you've planned for the site. Or I may ask you how your page design demonstrates simplicity, as Summers and Summers discuss it, and why that would be important in the case of your site. Or I may ask you what other options for navigation you considered before deciding on the option you chose.

Expect to be asked in class, on the fly, about design choices you and your group have made. When you are asked, don't panic. It doesn't mean you have made poor choices. Take your time, think, consider, and do your best to explain your course of thinking. Ground your choices in the principles we're working with. Ask others to help you out. Let others help you out. Look for alternatives.

In short, I may be calling on you in class. Take notes. Read the book. Be prepared to contribute. And keep repeating to yourself: Web design is about making choices, getting feedback, and reconsidering those choices.

A Design Process
As appropriate to a workshop, this course is project centered. After a two-week overview project developing a prototype of a portfolio site (as in Summers and Summers, chap 1), you will work in groups of 3 - 5 to design and develop a user-centered moderately-sized web site from the ground up. On the way, you'll be

* interviewing potential users
* developing personas and task flows
* creating site maps, wireframes, and visual designs
* creating content, primarily written
* putting the site up using Dreamweaver, and hopefully
* doing some usability testing

Web design is not like writing an impromptu essay or a weblog post or a journal entry or making a charcoal sketch or a color study. It starts further back than opening a new file in Dreamweaver and beginning to type. Web design is more like starting a new publication from the ground up - but on stilts. It involves conceptualizing the publication, focusing it towards an audience, working through visual designs and layouts, deciding on editorial policy, creating a style guide, hiring a printer... Once the publication is framed out, you start to work with the content. And all along the way, you're collaborating with others.

But web design is more involved than print design because you're not working with a simple, linear magazine or journal, but with what is essentially a computer program, with an interface, navigation, workflow or reading paths, and content that is undergoing constant updating. Once you have a site designed, you bring in content (although you envision the content as you design). But rather than simply being placed in the frame, the content is linked, cross-linked, written - or rewritten - for the particulars of the site. You're also working with a different aesthetic than print, a different way of reading, a different way of using text and images and sound.

The process as I've sketched it might imply that web design does not encourage creativity, inspiration, or spontaneity. But it does. Designs may be inspired; and good design inevitably draws on creative impulses and solutions. But realizing a design takes time and effort and slog - and even inspiration. Expect all four.

For the main site project, you'll work in groups of 3 - 5, and work according to principles drawn from the Summers and Summers text. The design of a web site is not an individual task but a coordinated one. So you will each need to know what each other is doing, both in practice and in principles. Each of you will be able to bring your own expertise in your area to your project. Some will do graphics - and will need to work with principles of graphical design for the web. Some will write content - and so will shape writing to the new situation, again drawing on the common text. Some will become experts at Dreamweaver and will help others make page and site design choices. All will be involved in the overall design. To create a successful site, you'll need to work as a group - as a team - in a unified effort.

Attendance and Assignments
Again: this is a workshop course. So after the first few weeks, most class sessions will be group work sessions or group presentations. I want to keep course meetings flexible. Some days, we might meet for ten minutes, then scatter. Other days, we might not need to meet at all, although I'll be available. We'll decide how to proceed as we go. We'll touch base at least once each week, and attendance at these meetings will count towards your final grade.

But plan on being in class when it is scheduled, and on time, please. Missing four scheduled classes will cut into your final grade. Miss six and I'll ask you to drop.

Assignments are due on time, please. Materials submitted late will not receive points or feedback. If you don't submit the materials at all, I'll subtract the points from your final total.

You'll also be making group presentations during the course, mainly to get comments and feedback from others. (Keep repeating to yourself: Web design is about making choices, getting feedback, and reconsidering those choices.) You'll have plenty of time to prepare, and we'll discuss what to prepare in advance.

No PowerPoints.

As you work on your projects, behind the scenes, you'll be making notes and drafts and sketches. How you handle these - the materials you use - is up to you. Designers - like professionals - work with whatever's at hand: scraps of paper, napkins, placemats, notebooks, using pencils, markers, pieces of crayon. At first, spelling, handwriting, and presentation take a back seat to getting the general shape and idea down to be worked on more. But eventually, designers submit project documents for evaluation. You'll submit some documents electronically on the wiki. Others you'll need to submit on paper. In all cases, submit professional-level materials. Work done on paper should be on paper appropriate to the task; work on the wiki should be well-structured and organized. There's no need for formal binders, but the materials should be organized. Use standard spelling, usage, and punctuation.

Placing Dreamweaver
This course isn't about Dreamweaver. It's about web design.

Most of what happens in web design does not happen using Dreamweaver, or Photoshop, or FrontPage, or Flash. And in the same way, much of what you'll be doing in this class will take place in the field, in groups, often using paper and Post It notes and notecards and whiteboards, as well as the wiki and email and your text editor of choice. By the time your group gets to Dreamweaver (probably the seventh or eighth week of the semester) you'll have made most of your design and content decisions; and you'll use Dreamweaver more to implement what you've designed on paper than to actually design.

Once the site is developed and your group is putting it up for access, you might use Dreamweaver for some text generation. Dreamweaver helps you envision the page formatting like text blocks, headings and lists; and it helps you create contextual links. But you don't need to write much in Dreamweaver. The thing is, the writing tools in Dreamweaver are lousy. In fact, Dreamweaver isn't all that great, but it's industry standard, so we're using it. What you will have a chance to learn in this class will apply to any web site design tool you wish to use, now and in the foreseeable future.

Learning Dreamweaver
While your projects won't get to Dreamweaver until mid-semester, you'll be learning the program from the beginning of the course. We'll use a programmed text: Essentials of Macromedia Dreamweaver CS3. Each week, you'll be expected to work through two chapters of this text. I'll ask you to print out and hand in evidence of your work for that week. I'll let you know each week what you'll need to hand in. (When we get to the modules about site management and ftp, we'll start using a web server I have set up for the class:

Using a programmed text means you can learn Dreamweaver on your own time at your own pace on your platform of choice. It means we don't have to use time in class learning tedious practices that are best learned slowly and individually. It means you can go over the modules as often as you like.

The programmed text is good. The modules build from chapter to chapter, taking you from basic moves of creating and linking pages through advanced page design, templates, drop down menus, rollovers, and cascading style sheets: all the things you're going to need to know about when your group starts to design your site. The programmed text will help your learn Dreamweaver better than I could.

You could fake your way through the Dreamweaver text. Don't. If you already know Dreamweaver well, it will be just that much easier to move through the text, and I'd bet you're going to learn a few things that will make you more productive with Dreamweaver. On the other hand, I don't expect you to master Dreamweaver - although you're welcome to if you like. But I will - and your group will - expect you to know the topics the programmed text covers well enough to contribute to your project.

Grad Student Requirements
As grad students, you are expected to demonstrate more mastery of the concepts we're working with, be more forward in offering your input grounded in those concepts, and take on leadership in groups. We'll discuss further grad requirements for projects as we approach the projects.

The Web Design Wiki
We'll use a wiki to support the practices and procedures in this course.

* I'll use it to post assignments, announcements, instruction sheets, my observations on class ...
* You'll use it for your projects to plan, keep notes, share text, track what you're doing, submit plans, and record individual work.
* Individually, you may use it for in class notes in class and assignments.

If you are familiar with Google Docs, you can use that for individual and group work instead of the wiki. If you do, link from the wiki to your docs pages.


* completing the Dreamweaver Essentials workbook - 100
* portfolio prototype site: all materials - 100
* materials from the project - 100
* the project itself: effectiveness at meeting your stated goals using the principles in Summers and Summers - 100
* demonstrated understanding of principles of web design and rhetoric as presented in the Summers and Summers and in class - 100
* attendance - 100 {added Dec 13 2007]

Here are the breakpoints, subject to change.

* 450 - 500 = A
* 310 - 440 = B
* 210 - 300 = C
* 200 = D

If I change anything on this syllabus, I'll let you know.

Valid XHTML :: Valid CSS: :: Powered by WikkaWiki