Computer Science 318

The Client

Must be a business or organization in need of a website. Can be a real or fictitious business
Examples: An non-profit organization like animal shelter, food pantry, unicorn conservatory, or a business like a honey distributor, sandwich shop, bike emporium, etc... Keep in mind that this entire project will be a great piece for a portfolio so keep it work appropriate.

The Requirements

Name your file: lastnamefirstinitial-theclient
You will turn in a word document or pdf with the following information:

• Name of Client
• Client Logo
  • Black and white only, no color yet
  • You can use free clipart, free icon, or your own artwork
  • This website has a large selection of free icons
• Short Description of the client (4-5 sentences):
  • Where are they located?
  • What do they do?
• Target audience of the client:
  • Age
  • Gender
  • Location
  • Job
  • Interests

The Proposal

The Requirements

Name your file: lastnamefirstinitial-theproposal
You will turn in a word document or pdf with the following information:

• Nice Cover Page
  • Client name
  • Your Name
  • Class Name
• Business Overview of the Client
• Goal of the Website
• Website Project Overview
  • Website Name
  • Website Domain
  • Name of Client
  • List of individual Web Pages (minimum of 5 web pages)
• Statement of work
  • Deliverables (These are pieces of the project you will be giving to the Client)
    • Information Architecture of the Website
    • Wireframes of the Website for Mobile and Desktop
    • Design of the website for Mobile and Desktop
    • Coding of the Website in HTML5 and CSS3
    • Deploy of the Website

Make it look nice! Remember your are proposing to design a website for the client (your instructor). They say not to judge a book by its cover, but that isn't true for design. Spelling and grammar are important! Make the client believe you are competent.

Information Architecture

Name your file: lastnamefirstinitial-informationarchitecture

Analyze and map out the client's information architecture of their future website. The website needs at least 5 individual web pages. You are going to map out what content will go on each page. When I say content I don't mean full paragraphs, just a few words that sufficiently describe the content, like phone number, our story, etc...

You can do this digitally or on paper. Insert a image of the architecture analysis. (If you create the information architecture on paper, make sure the photo you take is readable).

The Brand Guide

The brand guide will be a helpful tool as you move from wireframes to your website mockups. If you reference the guide as you build the mockups it will keep the design consistent from mobile to desktop and page to page.

The Requirements

Name your file: lastnamefirstinitial-brandguide

• Short statement outlining the mission or purpose of the business and defining its audience.
• Logo
• Color Palette
  • Think about primary and secondary colors. Do these colors have a hover color or is the secondary color the hover color, etc... Are your calls to action a particular color?
  • Make sure to include either RGB or Hex numbers for the colors you select. Not CMYK that is for print designs.
• Typography
  • Choose your headline and body fonts (remember that there are limited default fonts that web browsers support, but if you are not satisfied with those Google Fonts has a huge selection that are easy to use for web development
• Copy Writing Guidelines
  • This is the voice of the text for the brand. Is the voice happy, serious, uplifting, snarky, etc...
• Images
  • What are the images for the brand like? Soft and warm, black and white. Do they feature people or animals? Are they all nature images?
• Icons (optional)
  • Does the brand have icons? If so, what do they look like?

The Tools

Design the wireframes in Adobe Illustrator, Adobe Photoshop, Adobe InDesign, or Canva.

The Wireframes

You have now reached the stage before fully designing your clients website, the wireframes. You will use the information architecture and sitemap as reference for your wireframes. The wireframes will have a low level of fidelity. Focus on layout and high-level interactions (navigation and call to action buttons).

The Requirements

Submit your files in a zipped folder with the name: lastnamefirstinitial-wireframes

• One desktop and mobile wireframe per website page. 10 total wireframes
• Gray-scale. Notice the only color in the examples is active links and is not a design color.
• Elements and content will be represented with boxes or lines, with label descriptions
• Utilize arrows and text to describe how interactive elements will function
• No pictures
• No content like paragraphs

The Tools

Design the wireframes in Adobe Illustrator, Adobe Photoshop, Adobe InDesign, or Canva.

The Mockups

You have reached the design phase of the client project. Using the wireframes and brand guide you created, you will build a mockup design for each of the web pages both desktop and mobile.

The Requirements

Submit your files in a zipped folder with the name: lastnamefirstinitial-mockups

• One desktop and mobile design per website page. 10 total designs
• Full Color
• Copy can be lorem ipsum. It is recommended for call to actions, tag lines, short text to use the actual content.

The Recommendations

• Design interactive elements like buttons, mobile navigation, etc...
• Design the header for mobile and desktop before moving on to main content
• Remember order matters in html. It is really difficult to move an elements out of the order they are listed in html. For instance if you have one column for mobile and three columns for desktop, and you want to move the last element in mobile to the first in desktop it is difficult to accomplish.

The Tools

Design the wireframes in Adobe Illustrator, Adobe Photoshop, Adobe InDesign, or Canva.

The Code

The Requirements

• Setup for the files
• Minimum 5 html files
• Minimum 1 CSS file
• All images must load
• Links must function properly
• All of your HTML files must have NO validation errors! (If you get any warnings clear them with me before turning it in.)
• All of your CSS must have NO errors (some warnings are fine but look at the warning to make sure its not something you can fix.)
• Must be free of spelling and grammatical errors.
• Must have a favicon that matches the client's brand
• Your site must look good on multiple screen widths
• No front-end frame works allowed. (examples are: Bootstrap, Angular, Meteor)
• Your site must be deployed using GitHub pages (instructions in second part of file setup)

The Tools

• Visual Studio Code
• All of your coding knowledge

The Grade Rubric

Each web page is worth 4 points. 20 points/5 web pages

The 4 point breakdown:

• 1 pt - Valid HTML
• 1 pt - Valid CSS
• 1 pt - Images loading and links functioning
• 1 pt - Free of spelling and grammatical errors in content.