GDS 45 Online - Final Project

INSTRUCTIONS

OBJECTIVE:

• Create a business related web site, or
• Create a website on your favorite book or movie.
• See examples 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:

• Highly suggested:Do sketches, or at least little thumbnail sketches, to brainstorm different ideas for your design. These will not be turned in for grade, but will help you plan the design of your site.
  • Get large, nice blank responsive sketch sheets here
  • See Thumbnails Samples Here
  • Get a small horizontal blank sketches template here
  • Get a small vertical lank sketches template here

Turn in one the following 2 options:

1. Option: 1: Do 10 fairly detailed wireframes for the site.
   For this term, I would highly recommend doing this option, since you don't have much time, and you need wireframes for Assignment 17.5
   Here is a good example of a set of wireframes from the class. See the section on wireframes below for more details and See more example wireframes here. You can use figma, photoshop, sketch, Adobe Xd, indesign, or whatever software you want for the wireframes. Here is a file you can use to start with in figma. See wireframes below for more information. There are a lot of tutorials for Figma here. OR YOU CAN...
2. Option 2: Do 6 comprehensives(comps) for the site. See Comps below for details and see Comp Samples Here).
3. To turn in, please submit image files AND links to your figma file(if you used figma).
4. If you used something else, you can submit actual image files.

More Tips:

• The wireframes or comps will be turned in for a grade. The Thumbnails will not.
• Create a prototype for your site using comps or wireframes in invision or Figma. Again, you can use either wireframes OR comps for this. There will be video tutorials for creating prototypes in both Figma and Invision.
• Be sure that you will be able to get the images for all concepts in your proposal and storyboard. 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 (No formal Beta Test this semester. See below.)
  

Wireframes:
Develop comps that shows your intentions for your design

• You will do 2 layouts of at least 5 pages, one desktop layout and 1 mobile layout for each page(2x5=10, I think). Here is a good example of a set of wireframes from the class.
  • The website is 5 pages minimum, but you are encouraged to do more if you want. You only have to do wireframes for 5 screens, 2 for each screen, however.
• Create your wireframes in figma, photoshop, sketch, Adobe Xd, or whatever app you want. I would recommend using figma, however, since it becoming a popular tool and there is an instructional video on the videos page.
• Note: You will probably be using Figma for Assignment 17 and 17.5. Figma was just updated June 2024, and it looks a little different from the videos, but you should be able to use it in the same ways for Assignments 17 and 17.5. See this video, Introduction to Figma, for an.. introduction to figma :)
• For Wireframes, see the video "Introduction to Figma for Wireframing" - (for help with Assignment 17) Duration 46:57
• Here is another video (not by me) about doing wireframes in Figma, called Free Figma Tutorial: Designing Wireframes with Figma - Duration 1:00:38
• There are a lot of tutorials for Figma here.
• Here is a file you can use to start with in figma.
  • 
• Important! Here is a link to a playlist of 20+ videos about using Figma from the Spring 23 version of GDS 072, Digital Imaging and User interface Design class. You can look there for tutorials on many aspects of using Figma. Figma is updated fairly often, so things will change.
• 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.
• Here is a good example of a set of wireframes from the class.
• See more examples of wireframes here
• Here is an under 2 minute video on sharing Figma files.

Optional: Comps:
Develop comps that shows your intentions for your design

• If you do comps for Assignment 17 and the 17.5(the prototype), you need to do only 6, since they are more work than wireframes.
• Do 3 Desktop views and 3 mobile views for the same 3 screens.
• Look at examples from previous classes.
• Create your comps in Figma, photoshop, sketch, Adobe Xd, or whatever app you want... but probably Figma
• 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.

General Project Description above. Make sure to use the current instructions on this page.

Specs (10 points):
The Minimum Requirements Are

• 5 Pages, with a desktop and a mobile version for each screen
• 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 that you created or edited in some way. For example, you downloaded a free stock photo image and cropped and/or resized it, then you OPTIMIZED it when saving a new version. You may also use other images from the internet as you found them, IF they are already the right size, etc. What we don't want is EVERY image is exactly the same as you found it on the internet. We want to make sure everyone knows how to do minimal editing and optimizing of images. Note:Optimizing means making the images as small as possible in file size, but they still look good, and not overly compressed.
• Do NOT use any template webpages found on the internet as a starting point. You can use our exercises and code snippets as components and as a starting point, but please create your own pages. Also, please do not use any of our exercises with superficial changes as your final project. You can use pieces of things, but not just make a few changes to content and styles. Please ask if that is confusing :)

Important Notes on Layout for the Final Project:

• You are encouraged to use Flexbox when possible for creating columns, and perhaps CSS Grid, but we will not be covering CSS Grid in detail in this class. You have and will see flexbox used for layout in some of the exercises, like exercise 18.
• Please DO NOT copy an exercise as is for your Project. The idea is to practice coming up with new layout and design solutions, instead of just copying an exercise. You CAN use SOME of the techniques and code from exercises in the project though, just not a close copy of any whole exercise.
• Detailed information on Flexbox and CSS Grid is in Learning Web Design Ch. 16. CSS Grid is covered in the GDS 46 Web Design and Development 2 class.

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
• Use this file to evaluate your own site, and have someone else do it!

User Testing

No formal Beta Test required this semester.

Important Notes:
It is a good idea, however, to show your work to other people throughout the design process to get a fresh perspective on what you are doing. You can't really tell how well your design is working for users because you made the site. You know how it works already. Explore whether other people 'get' your site, if they see what you want them to see, and how well they can use your site. You can do this all the way through the process from sketches to comps(image based mockups) to working versions.

Check out the book Rocket Surgery Made Easy: The Do-It-Yourself Guide to Finding and Fixing Usability Problems by Steve Krug for tips on usability and user testing. It's a short and simple book.

See a video of an example usability test from Steve Krug here:
Usability Testing with Steve Krug

More Usability Testing videos and links

• Eye-tracking Web Usability Test Sample
• Rocket Surgery Made Easy - Steve Krug book/video on usability testing
  • Usability Testing with Steve Krug video in usability test(duh)
    • Brief Expllanation of usability testing from midway throught the video
  • Older Steve Krug Video
• Guerilla Testing with Usability Cafe
  • Copy google form used in the demo
• User Testing - Participant #3 Raw Footage
• Usability Testing w. 5 Users: Design Process (video 1 of 3)
• Video of usability test with a paper prototype(with a child test subject)

1. How well it fulfills it's goals and communicates ideas.
2. The quality of the design.
3. 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 Form (Word file)
Get Beta Test Form (PDF file)
Web Critique Criteria
Get Beta Test Help/Description.