WATS 3010 Product Page Project

This repository contains the resources to use for the Imaginary Product Page assignment in WATS3010: Introduction to Web Development. In this project you are tasked with creating a single-page site to promote a product. You may imagine any product you wish, or you may build a website for an existing product. If you are overwhelmed by the idea of creating a whole corporate identity, or you cannot find a suitable product to represent, you can use the assets provided to you to make a product page for The API Superstore.

The API Superstore is a fictional company that offers a catalog interface to APIs. To be honest, don't try to make too much technical sense of it all: This is a completely useless company and product in many ways.

Remember: You are free to use ANY PRODUCT or COMPANY for this project, but be aware that you are still required to have at least a video, logo, and other assets/elements to fill out your page. This may involve using tools you do not know how to use. If creating media assets is not something you're prepared for, then please use the API Superstore assets provided for you.

As you work through this project, you will address six different requirements:

1. Introduce the product
2. Provide access to an explainer video (API Superstore video is here: https://www.youtube.com/watch?v=L48g1ZWLMdo)
3. List features
4. Provide user testimonials
5. Provide ability for users to share links to the product page
6. Call to action link to get user to buy product

To work through all these requirements and create an elegant page, the larger project is broken into a few smaller Project Assignments. Below each phase of the project is described.

Part One: Product Page Design Phase

The Design Phase is where you must create some design artifacts (wireframes, comps, information architecture diagrams, etc.) in order to guide your building over the next week.

You must also decide what text you will use and where you will use it. Incorporate the exact text you will use in your wireframes so you can get an idea of how much room it will take up and how it will read when positioned relative to other content.

Be sure to make a place for the explainer video. (The company spent a lot of money on it, and they want it to be featured prominently.)

Requirements

1. Create a PDF wireframe of the page layout with exact text that will be used. Show at least two screen sizes in your wireframes.

2. Choose and edit the text you will use according to your vision for the product page.

3. Create at least TWO other project planning documents. You may choose from this list:

   • information architecture diagram
   • project timeline (represented in any way)
   • design comps
   • any images or illustrations you are planning to add to the site

4. Plan for at least one JavaScript-enabled feature (scrollspy, tabs, accordions, map embed, etc.) on your page.

All of these documents should be placed in the design folder and uploaded to Github. Ideally, these pages would be combined into a single, cohesive PDF in the form of a proposal document.

Part Two: Product Page Preview

The Product Page Preview is really just a check-in point on your build process. It's common to put up work that is in-progress for feedback from the team and your clients. Since we are spending two weeks to build out this page, we should take the time to post up stuff and see how things are coming together.

For this phase, in addition to your Status Update Report as described in the course shell, your only website deliverable is the in-progress site deployed to Github Pages.

Requirements

1. In-progress site build deployed to the master branch and visible on your user.github.io site.

2. Demonstrated progress on:

   • The video should be embedded
   • You should have your content placed into the page
   • You should have partial styles applied to the page
   • You should have general mobile responsiveness working for the layouts you've built.

Part Three: Product Page

Your final product should be a finished, polished Product Page. This is a very common style of page, and you should strive to create a page that fits into the style and approach of other long-scroll product pages.

Pay a lot of attention to the details here. You have two weeks to build, so be sure to take care of the small items and track down solutions to issues. It's better to pull back on ambition in order to create something more polished.

Be sure you have addressed the six primary requirements of the page:

1. Introduce the product
2. Provide access to some video content
3. List features
4. User testimonials
5. Links for users to share the product page
6. Call to action link to get user to buy/sign up for the product
7. Responsive to at least two screen sizes (mobile and desktop)
8. Uses at least one JavaScript-enabled component of the Bootstrap framework (or another JS-enabled component from another source)

Notes About Assets

This repository contains an assets folder that has logos for the company, the source text, and some additional assets you may wish to use. You are not limited to these assets, and you have probably not been provided with all the assets you will need to make your page look great. You are expected to seek out elements that fit with your design goals and use them appropriately.

If you are using your own assets, feel free to delete the API Superstore assets.

Video Explainer

You are required to have some video content on the page. If you cannot find suitable video content for your page, or if you are building a page for the API Superstore, use the video explainer provided for you.

The video explainer for the API Superstore is located here: https://www.youtube.com/watch?v=L48g1ZWLMdo You should follow the YouTube embed directions to embed the video into the page with appropriate settings and size. Take into account the sizes YouTube will let you use to embed the video so you can design around those constraints.

Bootstrap CSS Framework

You have been provided with the Bootstrap CSS Framework (http://getbootstrap.com) linked into your HTML file. You should build your designs on top of Bootstrap. If you are an advanced student, you can choose to use another CSS framework to build upon or build your layouts from scratch.

Note that Boostrap also gives you access to features such as ScrollSpy, tabbed containers, and other JavaScript-powered interface elements. Feel free to use these to the fullest extent.

FontAwesome

FontAwesome is an "icon font" that allows you to use a set of CSS classes to add icons to your pages. You must use the proper classes and naming patterns described in the FontAwesome directions, but you gain access to hundreds of icons that can be displayed at any size in the web browser. You can style them like any piece of text to match your theme, and FontAwesome provides lots of alternate classes to get just the layout and size you want. This is a very common way to handle icons in websites. You can learn more about how to work with FontAwesome here: https://fontawesome.com/how-to-use/svg-with-js#basic-use