| Project
Grading Scale |
Possible |
| Creative Brief, Comps OR Wireframes |
10 |
| Prototype using invision and either wireframes or comps |
5 |
| Interactive
Design/Navigation |
5 |
| Screen
Layout |
5 |
| Color
Selection/Use |
5 |
| Text
design/Typography |
5 |
| Use of graphics/Optimization |
5 |
| Message Design/Communication |
5 |
| Scope |
5 |
| Specifications |
10 |
| Overall Design |
10 |
| Beta test |
10 |
| TOTAL POINTS |
80 |
INSTRUCTIONS
See Due dates on the class main page.
OBJECTIVE:
- Create a business related web site, or
- Create a website
on your favorite book or movie.
- See samples here
The basic requirements are the same for both types of web sites.
A business related web site is a site that generates revenue or significant
savings in some way. You have a choice of three types of business web
sites:
OPTIONS FOR BUSINESS WEB SITE DESIGN:
- Company: A comprehensive web site that describes the company's products
or services. The Site could include helpful features such as FAQs (Frequently
Asked Questions), job opportunities, online customer support, company
mission statement, department profiles, current events, et cetera.
- Online store: A web site that sells a line of products (at least five
products). The merchandise should be presented in an organized and attractive
way. Each product should be presented with a complete description and
price. A simple order form must also be included.
- Online Information Service: A web site that performs a service. Examples
include movie review site, horoscopes site, and specialty newsletter.
OPTIONS FOR WEBSITE ON YOUR FAVORITE BOOK OR MOVIE:
- Make a website with information about your favorite book or movie.
To Do:
- Do Thumbnails to brainstorm different ideas for your design and show them to the instructor. These will not be turned in for grade, but will be checked.
- Turn in ONE the following 3 options:
- Note: You will need either wireframes or comps for the prototype, even if you turn in the written option below for the first deliverable.
- Do 5 fairly detailed wireframes for the site. See example wireframes here. You can use mybalsamiq, gomockingbird.com, indesign, photoshop, or whatever software you want for the wireframes. See wireframes below. Here is a Youtube video on using mybalsamiq for wireframes
OR...
- Do 3 comprehensives(comps) for the site. Do 1 for the home page and at least 2 other pages. (See Comps below and see Comp Samples Here).
OR...
- Do a written communication, design or creative brief for your website.
- Links that might help:
- See
a communication
brief worksheet and Go
to "Web Redesign" for Creative Brief ideas. Click
on Sample creative brief to see a sample.
- Another sample Web Design Brief(a nice outline)
- Another take on design briefs can be seen here.
- How to write a brief for a website
- See sample creative briefs from previous classes here.
- The comps, wireframes or written brief will be turned in for a grade. The Thumbnails will not be turned in, but will be shown to the instructor.
- Create a prototype for your site using comps or wireframes in invision. Again, you can use either wireframes OR comps for this.
- Be sure that you will be able to get the images for all concepts in
your proposal and comps. In other words, choose a subject you can find content for.
- Make sure to choose proper graphics, text and colours for the intended
audience.
- Apply HTML features you have been learning through lectures and tutorials
- Combine the use
of HTML and Image Editing software
- Beta Test the site
Wireframes:
Develop wireframes that show the layout and content for your design
- Give me digital files.(psd, jpeg, pdf, or powerpoint)
- Someone should be able to look at the wireframes and see the layout, links and content on a given page, but not design choices like fonts and colors.
- The more actual copy(text) that is used in the wireframes, the better.
- See more example wireframes here
Comps:
Develop comps that shows a complete version of your intentions for your design
- Look at examples from previous classes.
- Give me digital files.(psd, jpeg, pdf, or powerpoint)
- Comps should be in correct aspect ratio(shape) for the intended
layout.
- The comps should look as close as possible to your final website, including content where possible.
- Comps should be of high enough quality to present to an actual
client.
Prototype:
You will present your wirefmes OR your comps in a prototype in invision
- Make sure you signed up for an invision account using your Mission email address.
- I will send the list of emails to invision for a free upgrade of student accounts.
Specs (10 points):
The Minimum
Requirements Are
- 5 Pages
- Valid code - make sure to validate at https://validator.w3.org/ and https://jigsaw.w3.org/css-validator/
- 1 form
- CSS used for all
layout and positioning of content, except where tables are appropriate
- At Least 3 Images not acquired from the Internet (should be original or scanned).
You may also use images from the internet.
- Do NOT use any template webpages found on the internet as a starting point. You can use our exercises and code as components and as a starting point, but create your own page.
Expectations:
- The web site must look professional, well organized, and stylistically
consistent.
- It is important that you use the time allotted for the assignment
wisely.
- Make sure that the design fits the content.
- Think about your target audience and their expectations.
Design & Finesse:
(Refer to point totals at top of page)
- Communicate the message
- Design fits the content
- Proper optimization of images
- Good composition of pages
- Good colour harmony
- Good functionality/usability
- Intuitive and functional navigation
- Type should be legible, use appropriate fonts for the design
- Final Presentation to the class
Beta Test:
You will conduct a test of your site to determine, among other things:
- How well it fulfills it's goals and communicates ideas.
- The quality of the design.
- The technical quality of the site.
Refer to the beta
test information and form in your HTML Handout, and/or download information
on the beta tests.
Get
Beta Test Help/Description.
Get
Beta Test Form.