Five Steps to Creating Successful Web Design Assignments

Step 1: Getting Started | Step 2: Choosing the Right Tool | Step 3: Additional Training | Step 4: Copyright and Accessibility Laws | Step 5: Key Recommendations | Support

This document is meant to help instructors with the creation and implementation of website assignments. By choosing the right tools and planning appropriately, we can guarantee a technology-based assignment that is manageable for students, educators, and technology support staff.

Step 1: Getting Started

These tips will help you pick the right technology tool for your audience and objectives.

1. Define the assignment and its intended goals. This may sound like you’re working backwards … because you are. You need to plan out the end result before students begin the assignment.

• Example Assignment: K-12 Education students will create websites for hypothetical elementary schools.

• Example Goal: Students will publish information online, including school mascots, colors, nutritional information, upcoming events, and faculty biographies.

   

2. Further define your goals and requirements by thinking about the following questions. Step 2: Choosing the Right Tool will guide you through this process in more detail.

• What is the cost of the technology tool?

  If the tool is not available for free online or in campus computer labs, what amount is reasonable for students to spend?

• Is the tool installed or available online?

  If you are teaching an online or hybrid course, tools that require a fee and/or an installation may not be the best options.

• What level of training does the tool require? (Beginner, Intermediate, Advanced)

  The skill level required must be appropriate for instructors and students.

• What role should the tool prepare students for in the professional world?

  Web Publishers are content contributors; Web Designers/Developers code sites and online applications using HTML, CSS, and other programming languages.

  
  

3. Complete the technology-based assignment yourself before assigning it to students. This will give you the most accurate idea of the amount of time and training involved, and the challenges that students may encounter. This will also enable you to develop a rubric for grading and communicating your expectations to students. No matter what decisions you make during the rest of this checklist, your first step should be to reserve time with BITS for your own professional development.

Don’t have time? Some aspects of your assignment could be research/learning opportunities for students. Consider having students research emerging technologies or different aspects of your assignment. Later on, the students can share their discoveries with the entire class. This could be a good way for students to learn about the best practices of video editing, tips for taking good pictures, and so on.

4. Start early and leave time for planning and preparation. Before training can even begin, the instructor must make various decisions in consultation with BITS about issues such as training appointments and storage space. There are many limitations, including availability of general access labs and support staff. (Find more information about consultation under Support and additional best practices under Key Recommendations)

Back to top

Step 2: Choosing the Right Tool

Choosing the right tool for your objectives and audience is critical to the success of your assignment. The following information will help you select the right tool for your needs. We have grouped these tools into three categories: Online Tools for Web Design, Alternative Options for Online Content, and Dreamweaver for Web Design. View the following table to determine the best tool for you.

*Web Publishers are defined as those who add content to pre-designed Web pages. Web Designers and Web Developers code websites and Web-based applications using programming languages such as HTML, CSS, PHP, and more.

Online Tools for Web Design

These tools are recommended for students who will likely work as Web publishers in the professional world, rather than as Web designers or developers. These options are also great for assignments that emphasize effective online presentation of content over design and implementation of a new website.
 
These free online tools are similar to the systems most students will encounter as Web publishers in the professional world, where users upload text and pictures into a pre-existing framework.  Because the only requirements are an email address, a computer, and an internet connection, these tools are great for online courses. Following registration, the online tools guide users with tutorials and helpful examples.

Select the Tool

The following four resources provide free, online Web design and editing services. Users do not need to have any prior knowledge in Web design, CSS, or HTML code. Many of these website resources, like Jimdo, provide video clips that explain the entire process of creating and customizing a website. After a brief instruction, users can immediately begin creating online content and sharing it with others. 

• Jimdo at http://www.jimdo.com

• Webs at http://www.webs.com

• WetPaint at http://www.wetpaint.com 

• BraveNet at http://www.bravenet.com

See an example of one instructor using Jimdo to introduce Web design to her students.

For more information, see the table Select the Right Tools for Web Assignments.

Alternative Options for Online Content

These options are useful for students who will likely work as Web publishers in the professional world, rather than as Web designers or developers. Alternative options are also recommended for assignments with unique requirements, such as the ability to post daily logs, use a commenting feature, subscribe to an RSS feed, or create printable and interactive content online. In addition, these options are useful for assignments that emphasize online presentation and creation of content over design and implementation of a new website. Students can learn about successful online communication with blogs, digital PDF portfolios, and mock-up websites. 

Blogging

Perhaps the students need a way to write content online and share it with classmates and instructors. In this case, blogging could be used to set up a page of written, visual, and auditory communication. Blogs are social networking tools that individuals can use to share information. Visitors can type in comments and integrate discussion.

• LiveJournal at http://www.livejournal.com

• Blogger at http://www.blogger.com

• WordPress at http://www.wordpress.com

For more information, see the table Select the Right Tool for Web Assignments.

See a blogging example where Dr. Richard E. West shares information about technology integration into education. He also uses his blog to explain the blogging process.

Interactive PDF Files Used as a Digital PDF Portfolio

Digital PDF portfolios can include text, images, and hyperlinks to other websites as well as to other locations within the PDF files. Students are not burdened with the challenges of formatting content in HTML and CSS; instead they use tools they are already familiar with, such as Microsoft Word. They can convert their work to PDF format and then use Adobe Acrobat Professional to make interactive features such as hyperlinks and bookmarks. Students can link to their digital PDF portfolio from websites or send the PDF file to prospective employers via email. Because the PDF portfolio is one file, it is easy for anyone to open and print. For more information, see the table Select the Right Tool for Web Assignments.

Click here to see what Dr. Angie Sterling-Orth’s Communication Sciences and Disorders students do with digital portfolios.

Create a Mock Website Using Microsoft Office 2007 Drawing Tools

If the goal of the assignment is to have students focus on effective Web design characteristics, or how to effectively present content online, students can create “mock” Web pages using drawing tools in Word or PowerPoint 2007. Students would need to make conscious decisions about what is and isn’t successful in online content. They would learn how to make information and design more persuasive and effective. A number of boxes could be drawn up to represent different elements as they would appear online. This assignment could be great way to brainstorm the creation of a website or to introduce students into the realm of Web design. 

Having students sketch or mock-up a layout for their page is generally good practice by itself.  But, creating a layout is especially important when doing actual site development with tools such as Dreamweaver or SeaMonkey. This will help students get a better understanding of what they want to create, before they start using the software. For more information, see the table Select the Right Tool for Web Assignments.

See an example of one English, Creative Writing student who imitated an online publication. The style was used to brainstorm a different form of creative communication.

Dreamweaver for Web Design

Dreamweaver is a suitable option for upper level courses where students are studying to become Web Designers or Web Developers, and for assignments that are focused on design and implementation. Dreamweaver adapts to recent trends in Web design and development, such as HTML and CSS standards. However, Dreamweaver can be expensive and it requires a significant amount of training. Because of the cost and installation required, it would not be the best option for an online class. Dreamweaver is best taught by the instructor in small modules over the course of the entire semester. For those interested in professional Web design, related majors and minors are offered at many Universities. The following information helps users determine file storage, review training options, plan the assignment, and find additional resources. For more information, see the table Select the Right Tool for Web Assignments.

Mozilla SeaMonkey is a Web editor that must be installed to the computer, like Dreamweaver, and is available in general access computer labs on campus. It is a simpler HTML coding editor. Tutorials for Mozilla SeaMonkey can be found on YouTube. One UWEC instructor, Dr. Carol Koroghlanian, has created an online handout with tips and suggestions for students who are working on website assignments with SeaMonkey. Follow this link to check out Carol's tips.

Determine File Storage

When using Dreamweaver or SeaMonkey, your first step is to determine where students will store their files. We recommend that you choose one location for students to work in, rather than have them work in one place and then upload their files to another location. Determine which file storage location will work best for your needs so that you won’t need to transfer files later on.  Answer these questions and use the following table to pick the appropriate storage space for the students’ websites.

• Should the websites be online or offline?

  Do you need the websites to be online (i.e., accessible via a URL) or offline (e.g., accessible to the class via a shared network location, but NOT accessible to the world via a URL?)

  
  Online content is useful because it’s accessible to the world. However, getting the content online can be an extensive process. Keeping the students’ files offline simplifies the process, but sharing possibilities become more limited.

• Do you want one class web site or individual student web sites?

  One class web site would have one URL and likely have one common look and feel, whereas individual student sites would have multiple URLs and the potential for unique designs.

  
  Will the instructor want to be able to view all of the Web pages in the same place? Or is it preferable that each student has their own URL and Web page? There are benefits and drawbacks with both options. Use the following table to select the storage method that works for you. For more information about each storage location, see the Digital Storage Dashboard.

*The quota on a People Page account is 25 MB. Therefore, this space is not suitable for storing large image files (e.g., PSDs, TIFFs) or video files. What are the quotas and limitations on storage? (See Digital Storage Dashboard)

Schedule Training

BITS Training
If Dreamweaver is the selected tool for Web design assignments, there are a few more steps that must be considered. BITS can offer training for Dreamweaver. But, only a basic introduction to the software will be provided within two, one hour sessions. Students will create Web pages from templates that use CSS for formatting and page layout. BITS will provide a standard template and guide students through creation of the final "Campus Computing Resources" sample page. Students will learn how to change colors, add links and images, and more, but they will not learn how to set up or modify the structure and layout of the page. 

This is a starting point for learning how to use Dreamweaver. We recommend that the instructor teach Dreamweaver in small modules over the course of the entire semester. To request a workshop and consultation, visit the BITS workshop request page.

Other Training Resources
Adobe has free video tutorials for Dreamweaver.  See Additional Resources for more information.

Plan the Assignment

Have students sketch a layout for their page first. This will allow them to get a better understanding of what they want to design and develop. Please note that the students' creativity and design may be limited by the templates available within Dreamweaver.

See a student example of an online portfolio at
http://people.uwec.edu/muehlesa/.

Additional Dreamweaver Resources

• Adobe's online website provides video tutorials and support for Dreamweaver CS4

• YouTube has a few Dreamweaver tutorials such as Dreamweaver: Beginner's Introduction to Adobe Dreamweaver CS4.

• Web standards set by the Worldwide Web Consortium (W3C) have made many changes to Dreamweaver form and function such as the use of CSS.

• The benefits of CSS can viewed at CSS ZenGarden.

• Dreamweaver CS4 includes many free CSS-based templates. Free templates can also be found at Open Source Web Design: http://www.oswd.org/, Andreas Vickland: http://andreasviklund.com/, and Jason Cole: http://jason-cole.com/.

• Many organizations are developing Web education initiatives: The Web Standards, Opera, and more.

• Visit AListApart.com for current issues and trends in Web design and development.

Back to top

Step 3: Additional Training for Students

Don’t forget about additional tools and skills that students will need to complete the assignment. Regardless of which option you choose (free online tools, alternative ideas, or Web editors like Dreamweaver), students will need additional instruction on where to access existing copyright-free multimedia repositories (image, audio, and video), image editing tools, and more.

• Resources for incorporating multimedia will allow students to gather and incorporate copyright free images, audio, and/or multimedia.

• Free, online image editing tools will allow students to easily customize the content that they place onto their Web pages.

Back to top

Step 4: Review Copyright and Accessibility Laws

Review Copyright and Accessibility Laws while outlining the details of the assignment.  Students might not be familiar these rules. Therefore, you could include Copyright and Accessibility Law information in a rubric, near the current warnings regarding Plagiarism. Also, spend some class time to introduce tools that easily comply with copyright. For example, students will need to know where to access public image archives and other existing selections. In addition, students who are integrating multimedia such as video clips should provide a written script to make the content accessible for students with disabilities. (Existing Multimedia provides images, audio and video that comply with Copyright and Accessibility Law)

Copyright and Accessibility Guidelines

• Technology-based assignments should be accompanied by instruction on copyright law, and where to find public image / multimedia collections. For more information, see Accessibility & Fair Use.

• Adhere to the standards set by the American Disabilities Act. This requires that media and Web-based resources are made accessible for all individuals. Online multimedia must be accompanied by a written transcript, or closed captioning. Website images should be marked with alternative text. For more information, see Accessibility & Fair Use.

• Students can draw from libraries of copyright-free, reusable images to simplify the process. (See Existing Multimedia)

• There are limited licenses for some software. Your department (or students) may need to buy licenses depending on the location of where you want to work.

• The UWEC Web Standards provide a higher amount of detail for following copyright law.

• UW-Eau Claire has a Copyright website.

Back to top

Step 5: Follow Key Recommendations

Once you’ve made the above decisions regarding what type of assignment you’ll have and what types of tools are appropriate, consider the following general suggestions in the creation of your technology-based assignment:

• Create a detailed, specific rubric.

  Provide this rubric to students and to anyone involved in providing training and support for the assignment.

• Align assignment due dates with technology instruction.

  Enough time should be provided to allow students to become more comfortable with the technology and to prepare their own materials to be used during training. However, if too much time passes between the training and assignment due dates, students will need to be re-trained.

• Segment the assignment into smaller parts.

  Technology-based assignments like website creation often involve complex information that is best taught over the course of the semester.

• Have students work in groups.

  This is especially important with assignments that require that students access resources such as video cameras, video editing equipment, or large amounts of storage space. However, be sensitive to the fact that a single student often ends up with the majority of the work with technology-based assignments. A peer- evaluation form may be an easy way to ensure that each group member contributes. Also, keep in mind that some projects may not be best suited for group projects. 

• Keep all of the limitations in mind. 

  Some of these may include accessibility of software, storage space, and training.  Adding multimedia such as video, audio or images to a website takes up a large amount of storage space. Also, be sure that students know how to find help if they run into any difficulties with the technology. Consult with BITS staff for the most up-to-date information on our current technology constraints.

• Have students mock-up the Web content before creating it with software.

  Having students sketch or mock up a layout for their page is a good practice by itself, or in conjunction with any of the other assignment options presented in this document.  This is especially useful when doing site development with tools such as Dreamweaver or SeaMonkey. This will help students get a better understanding of what they want to create before they start using the software. However, the actual design will be limited by the templates provided by Dreamweaver or other Web editing services.

• Provide time in class for hands-on work in a computer lab where you can explain technology, trouble shoot for any problems, and share the projects when they are completed. Note: Due to computer lab availability, general access labs should be scheduled with as much advance notice as possible.

Back to top

Support

• CETL can help with curriculum development: http://www.uwec.edu/cetl/

• BITS can help with technology training: http://www.uwec.edu/BITS/

• LTS Help Desk can help with walk in questions: http://www.uwec.edu/helpdesk/

• LTS Help Documentation provides information via internet access: http://www.uwec.edu/help/

Back to top

Step 1: Getting Started | Step 2: Choosing the Right Tool | Step 3: Additional Training | Step 4: Copyright and Accessibility Laws | Step 5: Key Recommendations | Support