Professional Web designers must be able to adapt to the constantly changing landscape of the Web and the evolving responsibilities of their positions. As such, they must be able to teach themselves and others new material and apply that material in practical ways to their job responsibilities. They must also be able to learn from others, despite a wide range of teaching styles. To those ends, the individual project is meant to serve multiple roles within the framework of this course:
You will be assigned some aspect of Web design and expected to develop your own expertise in that particular area of Web design using appropriate resources, such as books, articles and/or the Web. You will then share your newfound expertise with your classmates in a variety of ways:
I will assign a suitable topic to each student. I choose to assign topics rather than to allow students to choose topics for several reasons:
In assigning topics to students, I try to follow each student’s stated preferences to the greatest extent possible. You will get an opportunity to express your preferences in class on the day we form teams. You should be thinking about topics you would like to explore prior to this class meeting.
If you feel there is a compelling reason why the topic you have been assigned is inappropriate for your educational needs and/or goals for the course, you may petition me in writing and within 72 hours of the announcement of topic assignments for a reassignment. That written petition must clearly explain your reason(s) for requesting a new assignment and may be submitted in hard copy or e-mail form. I will make a decision on each petition individually and inform you of the results.
The topic assignments for this semester are listed in the next section.
The presentation schedule will be posted as soon as it is available.
The presentation schedule and topic assignments are listed below.
| Order | Presentation date | Name | Team | Topic |
| 1 | Thursday, March 28, 13 | Schwab, Chris | 3 | Information architecture |
| 2 | Thursday, March 28, 13 | Kuehl, Brian | 1 | Design paradigms |
| 3 | Thursday, March 28, 13 | Wyman, Dave | 3 | Usability |
| 4 | Tuesday, April 2, 13 | Turi, Nick | 2 | Mobile web design |
| 5 | Tuesday, April 2, 13 | Johnson, Ken | 3 | Typography |
| 6 | Tuesday, April 2, 13 | McGurn, Connor | 3 | Imagery |
| 7 | Thursday, April 4, 13 | Schwarzer, Brandon | 1 | Color theory |
| 8 | Thursday, April 4, 13 | Pikcilingis, Max | 2 | Page layout |
| 9 | Thursday, April 4, 13 | Cyester, Chelsea | 2 | Web writing |
| 10 | Thursday, April 11, 13 | Donovan, Jordan | 1 | Search engine optimization |
| 11 | Thursday, April 11, 13 | McGloughlin, Dan | 2 | Future trends |
| Order | Presentation date | Name | Team | Topic |
| 1 | Tuesday, March 26, 13 | Corcoran, Sharayah | 1 | Information architecture |
| 2 | Tuesday, March 26, 13 | English, James | 5 | Information architecture |
| 3 | Tuesday, March 26, 13 | Cao, Trung | 3 | Page layout |
| 4 | Thursday, March 28, 13 | Rogers, Joe | 3 | Navigation |
| 5 | Thursday, March 28, 13 | Walker, Zak | 4 | Navigation |
| 6 | Thursday, March 28, 13 | Graham, Sean | 4 | User interfaces |
| 7 | Tuesday, April 2, 13 | Berry, Nick | 3 | User interfaces |
| 8 | Tuesday, April 2, 13 | Martin, Glenn | 5 | Usability |
| 9 | Tuesday, April 2, 13 | Turner, Ryan | 3 | Usability |
| 10 | Thursday, April 4, 13 | Cook, Ben | 4 | Typography |
| 11 | Thursday, April 4, 13 | O'Brien, Brian | 1 | Imagery |
| 12 | Thursday, April 4, 13 | Costa, John | 5 | Imagery |
| 13 | Thursday, April 11, 13 | Fazzolari, Vinny | 5 | Color theory |
| 14 | Thursday, April 11, 13 | Coddington, James | 4 | Color theory |
| 15 | Thursday, April 11, 13 | Clark, Steve | 2 | Time-based media |
| 16 | Tuesday, April 16, 13 | Dixey, Mike | 1 | Time-based media |
| 17 | Tuesday, April 16, 13 | Henderson, Logan | 2 | Web writing |
| 18 | Tuesday, April 16, 13 | Benner, Sarah | 1 | Web writing |
| 19 | Thursday, April 18, 13 | Puksta, Taylor | 2 | Flash in web design |
| 20 | Thursday, April 18, 13 | Sedgley, Chris | 2 | Future trends |
As soon as your topic is assigned to you, set about the task of identifying applicable resources. Check the library (especially the online Safari database) and search the Web. I am familiar with a wide range of books on Web design, and I have listed several recommendations on the Recommended Books page. If you decide to purchase any of these books for yourself, special orders at most bookstores can take days or weeks, and online booksellers may not always have the book you need in stock. If you prefer to use the library system, you may need to rely on interlibrary loans, which can take awhile to arrive. As such, the longer you wait, the greater the crisis you are likely to create for yourself.
Once you have assembled your resources, begin reading. I would recommend taking notes as you go to facilitate later completion of the other components of the project.
As you read, begin formulating ideas about how you can utilize your newfound knowledge in your team project and raise these thoughts at appropriate times with the rest of your team. Also, as you go, try to develop ideas for how you can best present your topic to the class as a whole.
A week or so after the topics are assigned, a class will be set aside for meetings with the instructor.
The primary purpose of your meeting is to assess the direction in which you intend to take your project and ensure that your plans have a reasonable chance of success and will help to advance the educational goals of the class as a whole.
In preparation for this meeting, you will be required to submit your first deliverable for this project, a brief summary of your plans for the project. This single page project plan should describe how you plan to approach your topic, what you envision focusing upon for both the tutorial and the presentation, and what resources you plan to draw upon in the process.
Your project plan must be submitted via e-mail to amgilder@cs.unh.edu no less than 24 hours prior to the beginning of the class in which the meetings will take place. The date of that class will be announced during class at least one week in advance.
Please note that during our meeting, I reserve the right to fine tune your plan to ensure maximum benefit for both you and the class. As such, you should arrive at your meeting with an open mind and a sense of flexibility.
Your second deliverable for this project will be an online tutorial to explain your assigned topic to the class (and like-minded visitors from the Web). This tutorial must be implemented in accordance with strict guidelines and submitted to me for eventual inclusion on the course Web site. These tutorials will become a permanent part of the course Web site, for use by future students, so be sure you approach your tutorial with the same investment of care and effort that you would invest in a major paper.
Tutorials may span as few or as many Web pages as you feel are necessary to get the job done, but in determining how many pages you will use you should carefully consider how best to organize and compartmentalize the material you intend to present. Since I want you to focus primarily on the content of your tutorial and the tutorial you produce to mesh well with those of your classmates, I have provided you with strict guidelines and an external stylesheet. While this may “cramp your style” a bit, it does have its value. Most importantly, it will give you experience with writing Web pages in accordance with externally imposed conventions; something that professional Web designers must often do. It will also ensure that there is a commonality across tutorials and allow me the flexibility to maintain them after the course ends.
The tutorial component of the project is primarily about effective written communication. You may assume that your audience has the same prerequisite knowledge required for this course (a firm grasp of HTML and CSS), but you should strive to write Web-appropriate content that clearly conveys your expert knowledge to those less expert than yourself. Your tutorial should consist of both explanatory text and appropriate illustrations and/or examples. The explanatory text should be your own words and thoughts, not long quoted passages or paraphrases from other resources. The illustrations and examples should be your own original creations, not those from your sources. See my statement on integrity before presenting someone else’s hard work as your own!
Given sufficient time, your classmates are just as capable of reading the materials as you are. Therefore, your tutorial should be an effort to give the reader something more than your various sources can. Often, this will be simply pulling it all together in a clear, concise summary, but it might also include going into greater detail, creating more illustrative descriptions or examples, and/or cutting through the maze of history and presenting current practice. The degree to which you have contributed to the ongoing discussion of your topic will be taken into consideration during grading.
All example code should be thoroughly tested in at least two different mainstream browsers (Firefox, Chrome, Safari, Internet Explorer, etc.) and all content should be carefully spell-checked and proofread before your tutorial is posted. Please note that failure to follow the guidelines and/or sloppy, unprofessional writing and/or code will count against your grade. So be sure to read and follow the guidelines carefully.
Because the tutorials will act as your legacy to both current classmates and future sections, I want the content to be as accurate and polished as possible. Therefore, I may ask you to make corrections after determining your overall grade. In the interest of efficiency, I may instead choose to simply make the corrections myself before or after posting your tutorial on the Web site.
If you have a compelling reason for not wanting your tutorial to become a permanent part of the course Web site, you may send me a written request to that effect by e-mail at any point after the project grades have been assigned. Also, I reserve the right to refuse permanent inclusion of any tutorials that I feel do not satisfy the stated requirements and/or do not advance the educational goals of the course.
Your third deliverable for this project is to prepare and deliver a presentation on your assigned topic to the class. This presentation should be designed to complement your tutorial, but it should not simply be your tutorial read aloud. It is fine (though by no means required) for there to be significant overlap in the material that you choose to cover in both, but you should give careful thought to how best to convey that material in the two different media (written word and live presentation).
Your presentation should be designed to last at least 20 minutes and no more than 25 minutes. Presentations shorter than 20 minutes or longer than 25 minutes will be penalized in the grading. If a presentation reaches the 25 minute mark, the instructor will notify the presenter and allow the presenter precisely one more minute of time to wrap things up. This ensures that one presenter will not deprive others of the time they have been allotted.
During the presentation, you will have access to all the technology our classroom has to offer. This may include a computer, projection system, audio system, video system, whiteboards, and overhead projector. When available, the podium computers (Windows and Mac) have network connections and access to all the software available in the public clusters on campus. If our classroom necessitates the use of a laptop, you may bring your own (provided it has an external VGA port for connection to the projection system) or use mine. If you intend to use mine, I recommend that you convey your data files to me ahead of time (and/or bring them on a USB flash drive), since I typically do not have removable storage drives (such as a CD drive) installed in my machine. That should provide you with a wide variety of tools for effectively presenting your material. You’ll need to decide for yourself which of those technologies will best suit your needs.
Handouts are allowed, but not required. If you choose to distribute handouts, it is your responsibility to ensure that you bring sufficient copies for the entire class and the instructor. As an alternative, I will be happy to make your materials available to your classmates via the Web, but to do so I must have those materials in postable electronic format (PDF, Word document, PowerPoint presentation, HTML, etc.) at least 48 hours prior to your presentation.
Videos are allowed, but not required. If you choose to incorporate videos into your presentation, you must choose them very carefully. You should select videos that specifically illustrate a point you have made or that you feel efficiently establish essential background for a point you are about to make. The total time of all videos you use during your presentation must not exceed 5 minutes. The time spent viewing videos will be deducted from your presentation when determining if you have used the minimum time allotted, but it will be included when determining whether you have exceeded the maximum time allotted. So if you choose to use videos, be sure you incorporate them into your practice sessions and adjust your timing accordingly.
If you use electronic materials such as PowerPoint slides to project before the class, you must submit a digital copy of those materials to me within 12 hours after completing your presentation so that I can make them available to the class on the course Web site.
All of the above factors will be taken into account in determining your grade, with a particular emphasis on your use of the allotted time.
The presentation component of the project is primarily about effective verbal communication. The objective of your presentation should be to educate a roomful of intelligent and knowledgeable peers in a subject that will be of interest and practical value to them. Give some consideration to your audience’s background, and don’t waste time covering basics that they should already know. Get to the point and cover it carefully and thoroughly.
At some point in your presentation, please be sure to share your sources with the audience and offer any opinions or recommendations that you feel are appropriate.
While you should look nice when you stand in front of your classmates, I am not imposing any sort of dress code requirements on these presentations. In fact, professional Web designers often work in informal office environments. That being said, however, it is often the case that personal appearance can set a presentation’s tone for both the presenter and the audience. So give your personal appearance a little extra thought on the day of your presentation, and make decisions based on what will help you do the best job possible.
Part of learning to teach others is learning how to evaluate their understanding. Therefore, your fourth deliverable for this project will be a set of at least five (and no more than ten) multiple choice exam questions. These questions should be designed to test your classmates’ mastery of the material presented in your tutorial and presentation.
Each question should have exactly five choices from which to choose, one (and only one) of which is the correct answer. Your questions should be challenging but focused upon important ideas, terms and/or concepts from your tutorial and presentation. Try to write the best, fairest questions you can. Give each question and each available choice (both correct and incorrect) some thought. You will find that writing good multiple choice questions is not easy.
<li> element per question.<li> start tag should contain
a class attribute
set equal to your Blackboard user name. <li> start tag,
use a
single nested ordered list to
present the five choices, one <li> element per
choice.<li> start
tag of the correct (and only the correct) choice
should contain a class attribute
set equal to the value "correct". Do not share or discuss your questions (or the answers!) with your classmates, since I intend to draw from your questions for the exam. Sharing or discussing your questions with other students will give them an unfair advantage on the exam, and I will therefore treat it as cheating. See my statement on integrity if you are unsure of the implications of this.
I will draw upon the entire collection of submitted exam questions (plus perhaps some of my own) when generating the exam. I will try to pick those that I feel are the best and fairest and most closely reflect the educational mission of the course. The better the questions you submit, the greater your chances of seeing them again on the actual exam. Since you presumably have a better chance of correctly answering the questions you have written yourself, there’s a potential advantage to investing significant time and effort in writing good questions (above and beyond your project grade)!
Another important aspect in the life of a professional Web designer is being able to give and receive constructive criticism, both with others and oneself. To this end, you will be writing several critiques assessing the individual projects presented during the semester. They need not be particularly lengthy, but they should be insightful and constructive. Your primary goal should be to help the recipient become better at the tasks you are critiquing, and this generally entails sharing your perspective both on what worked and what didn’t.
You will write a separate critique of each individual project presentation and tutorial, including your own. All critiques must be submitted to the online submission system at http://autoit.cs.unh.edu/critiques/.
To facilitate your ability to critique your own presentation, I plan (technology permitting) to record a video of each presentation in digital format and provide each student with a copy of their own recording. This should allow you to focus upon giving the presentation while in front of the class, and then reflect on your performance later as you write your self-critique.
If you would prefer not to be recorded on video, you must notify the instructor of that fact at least 24 hours prior to your scheduled presentation. You will, of course, still be responsible for critiquing your own presentation, but without a video you will need to do so from memory.
Keep in mind that the expertise you gain from exploring your assigned topic will factor into your work on the team project as well as the individual project. Therefore, it is important to really master the material, not to simply settle for learning only enough to produce the deliverables described above.
As a member of a team, your teammates will be counting on you to provide your share of the expertise needed to complete a high quality team project. If you cut corners on your individual project, it’s likely to have a detrimental effect on your team project grade.
All of your deliverables (with the exception of your critiques) are due at midnight on the date of your presentation. This is an essential deadline, you will be penalized for submitting late, and no deliverable (with the exception of your critiques) will be accepted more than 48 hours late without prior written permission from the instructor. Deliverables submitted late will likely be penalized in the grading.
The first component of your grade on this project will be based upon your choice of how to approach your assigned topic. I will be looking for appropriate selection of material that draws upon important themes and is of utilitarian value to your peers. The assigned topics will be fairly broad, with plenty of room for you to design a treatment that suits your audience. The more you manage to do so, the more it will help your grade.
Of course, the quality and timeliness of your deliverables will contribute most significantly to your grade for the project.
In grading your tutorial, I will be looking at the depth of understanding you demonstrate and the effectiveness with which you convey that understanding to your readers. I will also be looking at the extent to which you have used appropriate illustrations and/or examples and the technical accuracy of your work. I will be particularly interested in originality and to what extent you have contributed to the ongoing discussion of your topic. And, of course, I will consider how well you have followed the specified coding guidelines and proofread your content before submission.
When grading your presentation, I will again be looking at the depth of your understanding and how effectively you convey your knowledge to the class. I will be observing how well prepared you are and how well you use the time and tools at your disposal. You need to develop a presentation which you are comfortable giving, since your apparent comfort level will factor into your grade. Of course, I will also take into account the requirements stated above.
When grading your exam questions, I will be primarily judging the educational quality of the questions and the degree to which they reflect the key ideas and concepts of the materials you have presented. I will also be looking at how well you meet the submission guidelines.
Critiques will be graded on the basis of professionalism, insight, and the degree to which they constructively contribute to the recipient’s ability to improve.
Since the critiques will be submitted over several weeks, I will not be able to assign you a grade on your project until the last week or so of the semester. However, I will submit my own critiques of your presentation and tutorial to the online critique system as soon as I am able so you have some idea of how well you have done. Since the online critique system does not disclose the identity of the critic, I have designed the system to show my critiques with a different coloration so they are easily identifiable.
Because it will become part of the course Web site and persist for subsequent semesters, your tutorial must be carefully coded in strict accordance with the guidelines stated below. This will make it possible for your tutorial to coexist within the course presentation and for me to maintain it over time. Failure to follow these guidelines will have a negative impact on your grade.
Before you begin the following process, I would strongly encourage you to write (or at least outline) your tutorial as you would a paper. The creation of the online tutorial will proceed much more smoothly if you are simply copying and pasting text you have already written into the content area of each page, and you will be able to benefit from the proofreading aides you commonly rely upon for papers. However, if you use a word processor for this initial composition, be careful of the various features (such as Microsoft Word’s AutoCorrect and SmartQuote features) that may substitute non-standard text characters into your document as you type. Failure to disable these features will complicate your ability to copy and paste your work directly into an HTML document.
Once you are ready to proceed, the process should go as follows:
tutorial-template.html. This will act as the
template from which you derive all the pages of your tutorial. This
template file is, in turn, based upon a Dreamweaver template. As such,
it is extremely important that you modify it only
as specifically described below! Changes which are not allowed
or described below may result in portions of your tutorial being deleted
by Dreamweaver during regular maintenance of the course Web site. This
is especially true of changes to the existing comments within the template
file! [). For each field
you find that does not begin its description with an asterisk (*),
replace it with the specific value described. When replacing a field
with a specific value, be sure to replace the square brackets as
well as their contents.*)
require special attention. For the moment, focus on those fields whose descriptions
begin with a single asterisk. These are all related to additional
sources upon which you may have relied in the creation of your tutorial.
As with any academic work, you must provide a citation for any information
you use which is not your own original idea or “public knowledge.” Things
like HTML tags and CSS properties (along with their technical descriptions
and behaviors) can be assumed to be “public knowledge.” However,
novel applications of those tags and properties qualify as ideas
and should be cited if not your own. You may use as many (or as few)
additional sources as you deem appropriate. However, for each one,
you should replicate one of the two sourceinfo <div>s and complete
its fields as indicated. One of the sourceinfo <div>s demonstrates
how to cite a published book, and the other demonstrates how to cite
a web source. You must have at least one sourceinfo <div> for
your assigned topic (since your newfound knowledge presumably came from somewhere!) You may have as many, or as few, additional sourceinfo
<div>s as you need, in any combination, and you may change
the introductory wording of each <div> as appropriate to your needs.
If you intend to rely exclusively upon a single source, simply
delete the second sourceinfo <div>
from your template file.index.html and storing
it in your tutorial folder. Be sure to do Save As… to save
the file under the new name while retaining your template file unchanged.
Your desired content for this page must replace the field whose description
begins with two asterisks (**). You have much more freedom
in how you code your page content, but you must adhere to the following
guidelines:
height and width attributes
(with truthful and accurate values) and have a caption immediately
following it. Place the caption inside a <figcaption> element. Place both the image and the
caption inside a <figure> element. Image files must be stored locally as part of your submission. Exceptions will be allowed only when you have received permission to use a copyright protected image and the copyright holder has explicitly directed you to use the image from their server. However, if you follow the guidance above about using only original images, copyright holder permissions should not be an issue.<h2> elements for your headings. (The <h1> element
has already been used for the title.) You may also use <h3>,
<h4> and <h5> elements for subheadings
(the <h6> element is reserved). However, be sure
they are used appropriately and without skipping any levels.<code> element. <div> element
with a class of code. This code will be displayed in a preformatted
style using a monospace font, so the whitespace you type (such
as spaces, tabs, and carriage returns) will be retained. As such,
avoid the use of tabs and <br /> elements within
the code. Actually type the carriage returns to end each line
using the Enter key and indent each line of the code sample using
carefully counted spaces (not tabs). Be sure to replace all reserved
characters (<, >, &,
and ")
with equivalent character entities (<, >,
& and ", respectively).
For reasons of consistency, start the first line immediately
following the <div> start
tag and end the last line immediately before the </div> end
tag without any intervening whitespace.“ and ” for the double left- and right-curly
quotes, respectively, and ‘ and ’ for the single
left- and right-curly quotes, respectively. ’ should also
be used for apostrophes. Be sure to use " to encode double
straight quotes within code samples.