Project 1

Social Media Prototype Site (180 points)

Description:

What if your client needed an interactive walk-through of an application with a higher fidelity than Figma? What if they wanted to impress potential investors with the HTML foundation of an application?

This isn't an uncommon request in the business world.

Your task is creating the branding and design for a social media site that allows for the sharing, commenting, and uploading of media. Consider this as if it were a tool as a part of a sales pitch for building a website along the lines of Instagram.com, Flickr.com, Behance.net, Dribbble.com, etc. The name, branding, and specific nature of the site's theme are up to you. Will it be for sharing photography? Illustration? Design?

A site of this nature could potentially scale to thousands of pages with many users, so your responsibility will be to identify major page templates used by the site and create a site that someone can navigate through.

The design should include "like" buttons, tagging, commenting, and login/logout indications. You will also need to consider the naming conventions and organization of your CSS. Consider BEM or another naming convention.

While the finished site should be visually polished, it needn't be fully functional. For instance, you could place an image upload or comment form, but the forms won't actually function. For the images themselves, you can use placeholder services such as http://pravatar.cc or https://loremfaces.com for avatars and https://placeimg.com or https://stablediffusionweb.com/ for mock photo uploads. For mock comments, lorem ipsum is fine.

You may want to propose navigation and links that are outside of the scope of your prototype. In cases like this, consider creating a disabled style that visually stands out from plain text. See this CSS Tricks article on disabling links.

Development Requirements:

• While not fully-functioning, the site should be easy to navigate, responsive, and published to your website.
• It should be clear what portions of the site are not functional/disabled. Consider creating a disabled class that makes the UI opaque and disabled cursor events.
• The site must utilize a favicon.
• The site must contain a table (consider it for comments).
• Website should contain proper page titles for SEO.
• The site should incorporate JavaScript in some way--consider a dark/light toggle, favorite button that maintains state, or a Lightbox.
• The site should incorporate server-side includes with PHP.

Process:

• Sitemap + Research. Draw a sitemap in FigJam outlining the structure of the website. Publish a link to it, along with the review of three social media sites to the D2L Discussion board.
• Wireframes. Develop a wireframe outlining all the major pages and interactions.
• Branding. Choose a minimum of two fonts and five colors. The logo is up to you. Establish iconography.
• Design. Upon wireframe approval, create interactive designs in Figma based on the wireframe. Your files should use components, a color palette, and text styles where applicable.
• Design Critique. You will take part in an in-class design critique where you will provide constructive criticism to your classmates on their designs, as well as receive feedback on yours.
• Revisions. You will revise your design to address improvements uncovered during the critique stage.
• Development. You will proceed to build the website. Upon completion, it will be uploaded to your website.
• Final Critique. You will participate in a final group critique where we review each of the projects.

Deadlines and Grading Criteria:

Description	Due Date	Points
Research + Sitemap	January 27	20
Content + Wireframes	February 3	40
Website Design	February 5	60
Page Template	February 10	-
Published Site	February 17 19	60

---