Sample Proposal

Sample Mockups

HTML Pages

When creating the proposal for the final project, each student should come up with an outline of the steps required for the project and deadlines for completing those steps.

Website Project Outline

  • What is the basic overview of the project? summarize the project in one or two paragraphs.
  • Who is this website for? Describe your client/audience. If it is an organization write a paragraph or two discussing the nature and mission of the organization.
  • What are the goals of the website?
  • Who is your target audience? describe one or more audience groups.
  • What content will the site have? Describe the information that you will provide on the site, the images and other visual media, and interactive experience.
  • Prepare a sitemap in a form of a flowchart that details the individual pages, their titles and the way that they are linked. Example: 
  • Prepare a mockup design for each page.

Student Website Design and Production Process

Defining the Project

  • Learning about the client and its industry
  • Determining project goals
  • Developing site’s functionally.
  • Preparing schedules
  • Preparing a website creative brief document
  • Developing Content and Site Structure

Researching content

  • Outlining content
  • Creating content: writing, photographing, shooting video and recording sound.
  • Labeling categories and naming pages
  • Designing navigation
  • Sitemapping
  • Wireframing

Developing design mockups

  • Presenting design mockups & gathering feedback
  • Finalizing design based on feedback
  • Preparing a design style guide

Building the site

  • Editing and compressing images
  • Editing and optimizing video and sound
  • Creating HTML/CSS templates
  • Creating individual pages
  • Testing
  • Conducting cross-browser testing
  • Launching the site (FTP)

Style Guide

Layout

Specify if pages have fixed or liquid width
If fixed, specify width of page
What is your target screen resolution?
How many columns you will have on most pages?

Color scheme

Specify color name or hex/rgb value for:

  • Page background
  • Navigation
  • Headings
  • Paragraph text
  • Footer bar
  • Hyperlinks, link, visited, hover and active states
  • Any other interface element (such as a side bar, if applicable)

Typography

  • What font (typeface, style, color and size) you will use for the logo
  • What font (typeface, style, color and size) you will use for page titles
  • What font (typeface, style, color, and size) you will use for paragraph text
  • What font (typeface, style, color, and size) you will use for navigation bar links

Media

  • How will images and video be used in layout
  • Borders, padding, other aspects of video/image embeds

Embellishment

  • Other graphic elements such as borders, lines, icons etc.