www graphic

CSCI 1710

Introduction to Web Design and Development

Semester Project

For your semester project, you will be formed into groups. I'm going to do the group assignments. Your group will find a 'client,' for whom you will create a website.

I would like for your group's website to eventually include the following (you will be creating these throughout the semester):

  • a home page (index.html)
  • an ‘about us’
  • at least 3 other pages (the content of these pages is up to you, but each team member must write the code for at least one page)
  • a website mission statement displayed somewhere in the site (where is up to you – this alone will not count as one of the other pages)

Your group's website should be uploaded to the class web server inside your group's root ( / ) folder

Requirements

  • Each project group will have at least five members
  • You will find a client for your project. The only restriction on client selection is that the client cannot be currently enrolled in CSCI 1710, or a web design class at another institution
  • You will meet with your client and elicit requirements for the web site from him/her/them (we'll talk more about requirements elicitation later this semester). You should also plan to meet with your client periodically to present your current work and solicit feedback.
  • You will receive a more detailed document specifying how each group should divide tasks, assigned positions and responsibilities for the group, potential group collaboration options, and other information
  • Then, you are to write a mission statement for your website. At the very least, the mission statement should include a general goal statement, a client persona, and list the key components of the site. The output for this task will be Phase 1 of the project and will be submitted via D2L
  • You should be prepared to meet on a regular basis. I will make some class time available, but out-of-class collaboration is expected.
  • You are to create your website keeping your site mission in mind.
  • The site should:
    • Use the template (this will be index.html, once we have it set up) as the beginning of every page that you create
    • Be HTML5 compliant
    • Use CSS (you must use an external style sheet for the formatting that will apply to all pages, and you can use embedded or inline for the styles that apply to only specific pages or specific items on the page)
    • Be validated and include the validation logos (for HTML and CSS) on every page (use the script tag at the end of your body <script src="/js/w3c.js"></script> to check them)
    • Have consistent navigation on every page
    • Have appropriate titles for each page (this means the title that shows up in the title bar and the browser tab – not something that shows up at top of the content of the page)
    • Incorporate graphics & colors
    • Use relative links to pages within the website (absolute links to pages within your website are NOT ALLOWED)
    • All pages should have a consistent look and feel
    • Be free of spelling and grammar errors

Group Identity

Your group's first task will be coming up with a group name. I'll need unique group names in order to set up D2L's dropbox folders.

Interesting note: Dr. Sanderson, a much-loved faculty member who passed away in 2011, was a huge Star Wars/Star Trek buff. When we did group projects in his class, he assigned the group names based on Star Trek TNG races, like Aenar, Ferengi, Talaxians, etc.

Phase 1: Mission Statement, Personas, and key components

You are to post to the Phase 1 Dropbox in D2L a Word file containing a description of your site and client, and the personas, site mission statement, and anticipated key components. For the description of the site, you should give a rough idea of how you intend to map the information across the site. For the personas, you will need to first decide on at least two potential groups of people that will visit your site. Define the common characteristics of the people who might belong to each group (examples below are not a definitive list).

  • Age ranges
  • Gender (is one dominant)
  • Level of education
  • Occupation
  • Hobbies and interests
  • Web/computer experience level
  • Personal goals
  • Type of equipment used (desktop, laptop, mobile, etc.)

After listing the characteristics of each group, create the persona of a fictitious user that would belong to each group. Each persona will need to contain, at the very least:

  • Name
  • Occupation
  • Goal (they should have at least one goal when visiting your website)
  • Accessibility/Usability concerns ("None" or "All" are not appropriate answers. Create a "real" person with real needs)

Phase 2: Information Architecture and Usability/Accessibility Strategy

You are to post two Word files to the Phase 2 Dropbox. The first Word file will describe your information architecture, and should contain the following:

  1. A description of the structure of your proposed site (what pages the site will encompass, what links will be present between the various pages). (The focus of this section is the Information Architecture and navigation among the pages in your site. A diagram of the structure of the site may prove helpful.)
  2. A summary of the content - what the pages will be and a summary of the content that each will contain.
  3. A description of the overall layout design (look and feel) along with a rough diagram of what the site home page and one other site page will look like. (Use a tool like Fireworks, Paint, or PowerPoint to assist in making this diagram or get a screen shot of the actual page if you have it created) – you can use Alt+PrtScn to get a screen shot and paste it in your document. Windows 7, 8, and 10 also have a tool called the Snipping Tool, which is much better than Alt+PrtScn, that you can use to create screen shots. You can find it by clicking on the Start button and entering “snipping” into the search bar.
  4. The color palette to be featured in the visual design. This should be a screen shot of your chosen palette, not a verbal description of the colors you plan to use! For example:
    Using the Snipping Tool to capture a color palette
    Using the Snipping Tool to capture a color palette
  5. A copy of at least 1 significant visual element of the site created by you (logo, banner, etc.).
  6. A sampling of some photos or other graphics which will be used in the site.

The Word file you submit for the above should be: groupname_phase_2a.docx

The second Word file should describe your strategy for addressing the usability/accessibility concerns that you listed in Phase 1. Use the personas from Phase 1 as well as any additional usability/accessibility concerns that you believe should be addressed.

For each usability/accessibility concern, you will explain what the problem is, how it relates to a persona, and how your website addresses the concern. Example:

Concern: Jane (Persona 1) has a visual impairment, and uses a screen reader. The website must be readable by automated screen readers so that Jane may view the website.
Resolution: To ensure that the website is readable, we will ensure that all images/graphical content contain alternative text.

You must address all usability/accessibility concerns listed in your personas AND list 2 additional usability/accessibility concerns.

The Word file you submit for this document should be: groupname_phase_2b.docx

Phase 3: Completed Project

You must upload all of your website files to your group's folder on the class server and submit a Notepad++ file in D2L in the Phase4 Dropbox folder that has the following information:

  1. Your group's name on the first line
  2. The names of your group members on the second through fifth (or sixth) lines
  3. The URL to your group's site on the last line
Note: no other information is to be included other than the items mentioned above. Also, check the link to make sure that it works. If it does not, I will not be able to grade your project.

Project Presentation

Your group will be presenting your completed project to your class. Check the calendar for the due date. You should address the following in your presentation:

  1. Your name
  2. A description of your site and why you chose to do the site
  3. A description of the mission of your site and the target audience
  4. Demonstrate each page of your site discussing design decisions that you made, issues you ran into while working on the site and any other information you would like to share
  5. Ask for questions

* Presentations should be approximately 10-15 minutes in length. All team members should participate in the presentation.

Peer Evaluation

After completion of Phase 3, each student will be required to submit an evaluation of their peers' level of participation in the project activities. The evaluations will be kept confidential. Failure to submit the evaluation will result in a grade reduction. Ratings will be averaged. A student who receives poor peer rating may receive a grade reduction.