Lab 3: Social Media Platform UI

Due Date

Wednesday, October 1, 11:59am EST

Before you begin...

“Good artists copy, Great artists steal” — Pablo Picasso

Or more appropriate for this assignment, and closer to what Picasso meant, “Good arists copy, Great artists study the works of others in detail to make their own."

Your goal with this lab assignment is to create a front-end prototype that closely mimics Reddit. You'll start out by sketching and wireframing three different UI elemenets from (the homepage/newsfeed, a post, and a user profile page). Then, you'll create HTML/CSS/JS of these three pages that are interactive and functional. Finally, for extra credit, you'll use the Fetch API to populate the newsfeed with content.

Learning Goals

The learning goals are:

• UI/UX Design: Gain experience in UI/UX design by creating wireframes and prototypes.
• JavaScript: Develop more familiarity with Javascript and how to use it to manipulate the DOM.
• HTML/CSS: Continue developing your HTML and CSS skills, including learning about flexbox.
• Fetch API: Learn how to use the Fetch API to retrieve and display data dynamically.

1. In-Lab Walkthrough

For the in-lab walkthrough this week, you'll have to make use of a number of external resources:

1. Reddt. Look at the homepage, a post page, and a user profile page. Take note of the layout, colors, fonts, and interactive elements. You'll need to login to view a user profile page, so at least one person in your team should create/have an account.
2. Balsamiq Wireframing Tool. We will be using Balsamiq to create wireframes of the three pages. Follow the tutorial to get familiar with the tool.
3. CSS Flexbox Guide. Using flexbox is optional but it will make it easier to lay out elements on a page.
4. Fetch API. We will use the Fetch API to populate the newsfeed on the homepage with posts.

2. Lab Assignment

By the deadline, you should have created sketches, wireframes, and HTML/CSS/JS prototypes for three webpages that closely mirror Reddit.

2.1 Requirements

1. Closely study the layout of elements on Reddit for each of the three pages. Use the "inspect" tool in your browser to see how Reddit is structured, to get an idea for fonts, colors, and sizes. You'll need to distill down the essential elements of Reddit to make this manageable. Focus on the main elements and ignore sidebars, ads, and other less important elements.
2. Create hand-drawn sketches of the three pages on paper. They must be detailed and include all elements (buttons, text, images, etc). Images can be represented by boxes with an "X" through them.
3. Create wireframes of the three pages using Balsamiq. Again, they must be detailed and include all elements.
4. Create HTML/CSS/JS prototypes of the three pages (home.html, post.html, profile.html). The pages must be interactive, meaning users can click on elements to navigate between pages, add comments, and upvote/downvote posts and comments. Each page most have a corresponding CSS file for styling and a JS file for interactivity.
   • Users should be able to scroll to see at least 10 posts on the homepage.
   • A user can click on any post to go to a (generic) post page.
   • On the post page, a user can add comments to a post, upvote/downvote a post, and up/downvote a comment.
   • A user can click on the username to go to their profile page.
5. Use the Fetch API to populate the newsfeed on the homepage with posts.

Files to submit:

• In a "sketches" folder:
  • sketch_home.png
  • sketch_post.png
  • sketch_profile.png
• In a "wireframes" folder:
  • wireframe_home.png
  • wireframe_post.png
  • wireframe_profile.png
• In a "code" folder:
  • home.html
  • home.css
  • home.js
  • post.html
  • post.css
  • post.js
  • profile.html
  • profile.css
  • profile.js

Grading

3.1 Grading Rubric

Category	Insufficiency	Adequacy	Proficiency	Mastery
Sketches	Sketches are low-effort or hard to decipher.	Sketches represent some, but not all essential elements for the three pages. The UI may lack detail or have some inconsistencies between pages.	Sketches represent most, but not all essential elements for the three pages. The UI is consistent across pages.	Sketches represents almost all essential elements for the three pages. UI is represented in sufficient detail and is consistent across pages.
Wireframes	Prototypes are low-effort or hard to decipher.	Prototypes represent some, but not all essential elements for the three pages. The UI may lack detail or have some inconsistencies between pages.	Prototypes represent most, but not all essential elements for the three pages. The UI is consistent across pages.	Prototypes represents almost all essential elements for the three pages. UI is represented in sufficient detail and is consistent across pages.
HTML	Pages incomplete, invalid structure, missing required elements.	Pages mostly complete but with structural issues or missing some required elements.	All required pages (Home, Post, Profile) present with valid structure and required elements.	Clean, semantic HTML with excellent structure, accessibility features, and attention to detail.
CSS	Little or no styling; platform looks broken or unstyled.	Basic styling applied; layout functional but inconsistent or unattractive.	Consistent styling across all pages; layout is clear and visually appealing.	Highly polished, professional design with responsive layout and excellent attention to aesthetics.
JavaScript Functionality	Minimal or broken interactivity; key features (navigation, comments, votes) missing or nonfunctional.	Basic interactivity works (e.g., navigation between pages) but with bugs or limited functionality.	All required interactivity (navigation, comments, upvotes/downvotes, fetch for content) works correctly.	Smooth, bug-free interactivity; features implemented elegantly and with enhancements beyond requirements.
Design Quality	Poor usability; confusing navigation and layout.	Usable but basic design; navigation works but lacks clarity or refinement.	Clear navigation, intuitive layout, and good user experience.	Excellent usability, professional look and feel, strong attention to detail, and creative enhancements.

3.2 Extra Credit

For 10% extra credit, use the ".json" feature of Reddit to populate each "post" page depending on which post was clicked on the homepage. For example, if a user clicks on a post titled "Does swarthmore have an "outdoorsy" culture?", the post page should fetch data from "https://www.reddit.com/r/Swarthmore/comments/1nn7syu/does_swarthmore_have_an_outdoorsy_culture.json" and populate the post dynamically (just the post, not the comments). This will require modifying the URL of the post page to include the post ID and using JavaScript to parse the URL and fetch the appropriate data.