OBJECTIVE:
Create a business related web site as a group project. 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 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.
To Do:
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.
- The size (number of pages) of the site is up to you, but the amount of work will be evaluated relative to the size of your team and the time allotted.
Procedures:
You will elect people from your group for the following positions:
- Project Manager: In charge of the overall project
- Art Director: In charge of the overall look and feel of the project
- Head Programmer: In charge of the code
- There should be a discussion in Canvas listing the team members. Please respond there to let me know who is filling the different roles on the team.
- Please, do NOT use any template web pages found on the internet as a starting point. You can use our exercises and code snippets as components, but not whole pages or designs.
Wireframes (5
Points):
Develop detailed wireframes that show the layout and some text content for your site
Comps/Mock-ups (5
Points):
Develop comps that shows your intentions for your design
- Show the site main page, any section main page and all other layouts/designs to be used.
- Can be done in any software you want. Figma would be good to use again.
- Should be done before html pages are started.
- Look at examples from previous classes.
- Be sure that you will be able to get the images for all concepts in
your design.
- Make sure to choose proper graphics, text and colors for the intended
audience.
- Comps should be in correct aspect ratio(shape) for the intended
layout.
- Comps should be of high enough quality to present to an actual
client.
Prototype in figma or invision (5
Points):
You will prototype the site using your comps and invision.
- Use your comps and link them together in a high fidelity prototype in figma or invision. It would be good to do 2 prototypes, one for desktop and one for mobile. In figma, you can do this by having the prototypes on different "pages", among other ways.
- Check out another video on Basic Prototyping in Figma - Duration 25:33
- You can use figma for wireframing, comps and/or prototypes if you want.
- Here is a bonus video that might help with going from wireframes to code... it's called From idea to layout: How I approach designing a site - Duration 45:53
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 color 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.
- Here is a blank word file of the test form.
- You can type into this version if you wish
- Here is a blank pdf of the test form.
Beta Test and Beta
Test Paper:
Watch the video on the Testing procedure using the form. This is a companion paper to this project. There will be one paper per
group which uses information from beta tests conducted by your group.
Each member of the group will conduct 2 beta tests of the site. The paper's
required elements below will be addressed in class and are covered in
the Beta
Test Paper help.
Get a copy of the Beta Test Paper help.
Topics should Include:
- Overview of the Product
- Description of the Beta Test
- Projected(Expected)Results
- Testing evaluation
- Test Results
- Planned Actions Consult BETA TEST PAPER HANDOUT for more details.
Expectations for Beta Test Paper:
This paper must be professional, typed (free of typos), and on time.
To cover all of the required elements in reasonable depth, the paper will
need to be at least 2 pages. This is in addition to any sketches. Excessive
point size, margins, and line spacing are not elements of a good paper.