(Worth 20% of your grade; due on Wednesday, October 30 Monday, November 4)
Overview
To strengthen your skills in the areas of “mobile first” and “responsive” web design, you will revise both the content and the appearance of a small, local website. Nonprofit organizations and small businesses often lack the financial resources, time, and technological expertise to develop (and redevelop) websites that keep pace with the rapidly evolving standards that constitute “best practices” in the field of web design. As a result, many small websites rely on outdated technologies (i.e., Flash), perform poorly in modern browsers, or appear broken on mobile devices. For this project, you will select a local website in need of revision, then develop a new site that strengthens the organization’s presence on the web, improves the findability and usability of the site’s content, and functions properly across a range of devices.
Assignment Details
As you begin your work on this project, you will need to follow the Goldilocks principle: the site you select as a “starting point” needs to substantive enough that it will require sections/subsections, menus, sidebars, etc., but it shouldn’t be so big that you will find yourself overwhelmed by the task of organizing and revising its content. Generally speaking, your finished site should contain 15–20 pages 10-12 pages, though the exact number may vary depending on the length of the pages and quality of the original site. You may select a website on your own and submit it for approval, or you may use one of the “default” sites that I have pre-approved. If your original website is very large, you do not need to include all of the pages in your project. In such cases, please consult with me to determine an appropriate size and scope for your redeveloped site.
One key difference between this project and the final project of the semester is that you will not be working directly with the organization responsible for the website you choose to redevelop. 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 site and conducted a thorough inventory and analysis of the site’s current content, you should select 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.
Your individual work process may vary from that of your classmates, but generally speaking, you should follows these steps to complete your project:
- Review several potential websites and select an appropriate site.
- Complete an inventory of the site’s content, then develop a tentative site map for your new site.
- Select a responsive framework and install all necessary components on your personal computer.
- Develop wireframes for your new site.
- Create (or update) a visual identity for your new site.
- Convert all usable content from the original site into your chosen framework; create new content as needed.
- 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. Your memo should also include links to the original site and your developed site. 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., “Quinn Warnick 4814 Unit 2 Memo”). Your site should be live and your memo uploaded before you come to class on Wednesday, October 30 Monday, November 4.
Evaluation Criteria
Your grade on this assignment will be determined by your performance on the following criteria:
- Information Architecture — Is your site well organized? Have you carefully arranged your content into sections/subsections and categories/subcategories that accurately reflect the organization’s priorities and your users’ needs?
- 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? Have you updated the site’s original content using logical, semantic tags? 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?