(Worth 20% of your grade; due on March 31)

Overview

To strengthen your skills in the areas of “mobile first” and “responsive” web design, you will develop the content and the markup for a small website (4–6 pages) intended to recruit new members for your major, your minor, or a campus organization. (If you have another idea for a recruiting website, please let me know; I am willing to entertain ideas for sites outside of Virginia Tech.) Because this is a recruiting website, the writing, the images, and any other content on your site (e.g., video, infographics, audio) should be highly persuasive, and the site should follow current “best practices” in the field of web design, which means that it should function well on phones, tablets, laptops, and desktops.

Assignment Details

Unlike our final project, in which you will work with a real client who needs a new website, this project does not ask you to work directly with the organization responsible for the website you choose to develop. Because this is not a client project, you will have the freedom and flexibility to design an up-to-date, standards-based site over which you have the final say regarding content, design, and functionality.

Once you have chosen a major, minor, or organization you want to promote, you should conduct a thorough inventory of the organization’s current site. You might decide to repurpose some of this content, but please remember that this project is not a “redesign” of the organization’s original site. Rather, it is a separate, stand-alone site, designed for a specific purpose and audience: recruiting new members. As you work on the project, you will undoubtedly need to develop original content for the site, which may include writing new copy, taking photographs, interviewing current members of the organization, creating a short video, recording a podcast, planning a social media campaign, etc…

The other major component of your work will be developing the HTML and CSS for your site. In order to reduce the complexity of this task, I highly recommend using a responsive framework to undergird your new site. Our in-class activities will focus on Bootstrap, but you may want to experiment with other frameworks, such as Foundation, Gumby, Skeleton, or Unsemantic. You can build excellent sites with any of these frameworks, but each one works a little differently, so it’s important to choose a framework and stick with it; switching frameworks midway through the project will likely cause a lot of unnecessary problems. (To get started, you should download the Bootstrap starter files I compiled for this project.)

Your individual work process may vary from that of your classmates, but generally speaking, you should follows these steps to complete your project:

  1. Consider several potential organizations and review their websites, then choose one for your project.
  2. Complete an inventory of the organization’s current website in order to determine what, if anything, can be repurposed or adapted for your site.
  3. Develop a tentative site map for your new site, carefully considering how many pages you need and what they should be called.
  4. Select a responsive framework and install all necessary components on your personal computer.
  5. Develop wireframes for your new site.
  6. Create a visual identity for your new site, including colors, typography, and logo.
  7. Finalize the content for your site, including text, images, video, etc…
  8. Refine the content and visual appearance of your site after conducting user testing.

We will discuss each of these steps in greater detail during the coming weeks, and we will conduct in-class workshops to give you experiences with all of tasks you will need to complete to succeed on this assignment.

Deliverables

The most important deliverable for this assignment is the finished website itself, which must be “live” on the web in a subdirectory or subdomain of your Reclaim Hosting site. Although your project will be evaluated primarily on the strength of your final website, you may submit mockups, screenshots of your early drafts, and/or alternate designs, if these items will help you explain your work process and justify the choices you have made. In addition, you will write a one-page (300-500 words) memo of transmittal to me that analyzes and justifies your work on this assignment. For example, you may want to discuss your choice of frameworks, images, color schemes, and plugins, as well as the rationale behind your information architecture and overall site design. When your memo is complete, upload it to your shared Google Drive folder (make sure to convert it to Google Docs format), and give it an appropriate name (e.g., “John Doe 4814 Unit 2 Memo”). Your site should be live and your memo uploaded before you come to class on Tuesday, March 31.

Evaluation Criteria

Your grade on this assignment will be determined by your performance on the following criteria:

  • Content Strategy: Is the content of your site well planned and well executed? Does your site effectively recruit new members to your organization?
  • Information Architecture: Is your site well organized? Have you carefully arranged your content into pages and/or sections that meet your users’ needs and expectations?
  • Responsive Design: Does your site perform well on a variety of devices, including desktop computers, laptops, tablets, and smartphones?
  • Visual Appearance: Does your site effectively use colors, images, and typography to create a unified, aesthetically pleasing website? How thoroughly have you customized the framework you selected for this project?
  • Usability: How easy is it to navigate your website? Have you customized your menus to improve usability? Have you provided adequate instructions and signposts for new visitors to the site?
  • Markup: Have you selected a framework that produces clean, well-structured markup? Did you apply logical, semantic tags to your original content? Does your site validate?
  • Memo of Transmittal: How well does your memo explain and justify the decisions you made in completing this assignment? Is the memo structured logically? Does the memo adhere to the conventions of standard written English?