Web Programming for Non-Programmers

DCI 110

Winter 2019

Credits: 4

Requirements Met: SC, DCI Minor Core Elective

GitHub Site: https://github.com/dci110w19

Class Meeting Metadata
Meets: M
W (lab)
2:45 - 4:15pm
3:15 - 4:45pm
2:45 - 4:15pm
Classroom: CGL 212
Instructor's Metadata
Instructor: Jason T. Mickel, Ph.D.
E-Mail: mickelj@wlu.edu How to Email a Professor
Phone: (540) 458-8653
Office: Leyburn M33
Office Hours: M 11:00 - 12:00
T 11:00 - 12:00
W 1:00 - 2:00
Or by appointment

Project Deliverable #2: Website Planning and Wireframes75 points

Due Thursday, February 8 @ 11:55pm


Now that you have critically viewed some websites and reflected on how a site can tell a story, begin to design your team's project site by creating a wireframe model of the three pages you'll be designing and a brief write-up justifying your choices. You may draw them by hand or using any online drawing tool to assist you. Some possibilities of the latter are: Photoshop, Illustrator, Visio, Google Drawings, or Draw.io (my personal recommendation if you want to create it online).

The end goal of this project is to allow you to showcase the programming and web development skills you have learned through a process of answering quantitative research questions. You proposed five potential questions in your first deliverable. You should now choose/refine these down to two questions: one that can be addressed with a chart and one that can be addressed with a map. If you're struggling to do so, please talk to me ASAP.

You have (nearly) complete freedom to design the site as you see fit as I hope this creation is something you can promote on your resume or CV. Here comes the "nearly" part. Your site should:

  • Be tasteful, professional, and engaging
  • Follow the best practices of site design we have discussed and will be discussing throughout the remainder of the course
  • Good balance of text and visual
  • High to medium contrast visuals
  • Legible fonts
  • Make use of white space for readability
  • Be mindful of visual impairment through good choice of semantic HTML
  • Sensible grouping of information

Steps to Complete the Assignment

Your wireframes should otherwise meet the following requirements:

  1. Design one home page
    1. Draw a header box that will eventually contain the identifying "branding" of your site.
    2. This page will introduce you and your team, your site's purpose, its intended audience, and a brief summary for each of the research questions being addressed in the following pages.
      1. On your wireframe, draw and label boxes where each of these informational blocks will be along with headings that will lead the sections. Keep in mind the grid system for pages we discussed.
      2. Draw navigation in the form of a top bar, sidebar, or menu that takes the user to your two question subpages as well as returns the user to the home page. What should this look like? Where will it be placed?
      3. Add at least 1 image placeholder. What image(s) will help tell the story of your findings? Where should they go? You don't need to choose the images now, just be thinking generally what they could be.
      4. Draw a box for a footer with a copyright notice and image credits.
  2. Design one subpage, which will be used for both the map and the graph pages.
    1. This page should have a similar header box to your main page.
    2. Draw boxes that represent textual information. These should be for the question itself and the textual part of your findings.
    3. Draw a placeholder where the map/graph will appear. How much room should it occupy? Should there be text on either side or should it fill the width?
    4. Draw a box for a footer similar to the one on the main page.

Beyond my requests, feel free to embellish the page with any other text, graphics, lists, tables, video, etc. that you believe will help to communicate your story. For some inspiration, visit:

and follow links to the original stories.

I do not expect you by the end of this course to be web design experts or to be able to replicate the effects in professional sites, rather I want you to design towards a goal of how you would like it to look even if it doesn't reach that stage by the end of our 12 weeks.

What to Submit

  1. Two wireframes either in saved online images or scanned-in hand drawings.
  2. A Word document containing:
    1. Your two refined questions
    2. An explanation of all of the elements on your two wireframes, why you chose them, and why they are positioned and sized how they are. This can be in list or table form rather than paragraph form.

Grading Specifications

You will be graded on:

  1. Effort and thought (these equal success).
  2. There is no "wrong" response to this assignment, only incomplete or lazy attempts.
  3. Meet the requirements of what I have requested.
  4. Demonstrate recognition of the design concepts the textbook and I have presented so far in the course.
  5. Put thought and effort into building a site you'll be proud of sharing.

The deliverable will begin with a full score of 75 points and deductions will be made accordingly. All team members will receive the same score.