Design and program a web application as a creative response to content from the course.

let milestones = ((concept + proposal + prototype + design) / 4) * 0.2;
let grade = milestones + (deliverables * 0.8);

We’ve examined several issues around design and the internet this semester. Some forms are easy to identify, like how dark patterns manipulate user experiences by affecting usability and user expectations. Others, like the relationship between the surveillance economy and social justice are harder to visualize, but equally important when we consider whether the internet is or is not a positive force in society.

At the beginning of the semester, the View Source assignment asked you to think about why it is important to be able to know how a web page works “under the hood.” This final assignment challenges you to further investigate one or more of your preferred themes (from or related to the course) and conceive of and build a creative response in the form of a web application that likewise makes the topic more understandable, relevant, or transparent.

Your application will consist of HTML, CSS, Javascript, and any additional libraries you may need, but it should address the topic through an interactive experience that involves a user somehow inputting data, and your app transforming that data to reveal insights into your chosen topic.

Fork this repository and clone it to your critical-web-design folder on your machine.

Identify a topic, collect research, prepare a summary for a brainstorming session.

1. Identify potential topics to explore. It shouldn't be too specific, nor too broad. Is there a specific problem you want to solve? Or do you wish to address issues by problematizing your subject?
2. Collect research (related articles, etc.) and inspiration (2-3 links or summaries of similar projects). Look at the Critical Web Design / Radical Software Example Works for ideas or this list of .
3. Identify new skills or technologies (e.g. a design method, programming pattern, code library, etc.) you are interested to learn and could potentially use in your project.
4. Write a summary of your topic(s), research, and technology (3–4 sentences). Address why you are drawn to this topic and why it is important to explore. Identify the communities, resources, and issues involved. What frameworks or methodologies might you use?
5. Bring the above to class for the...

Create a pitch deck (10-15 slide Google Presentation) to share and plan your project that contains:

1. A one paragraph introduction to your concept and what you plan to make. Who will use this and why?
2. An initial attempt at an identity (e.g. a logo, word mark, style guide, etc.).
3. Competition Scan - Examples (2–3) of similar works (in concept or tech) with images and links.
4. Flowcharts (2–3) showing each step users see, and another showing how data works in the app
5. Wireframes showing all the views in the interface (introduction page, forms, results page)
6. Technology - Include pseudocode of the main logic of your project. List technologies and demos you think you will need. List the "unknowns"—parts of your idea that you don't know yet how to execute.

Create a working “proof of concept” of your app.

1. Your prototype should contain the essential functions of your project.
2. Your work should be live (not public, just able to be shared via a link in Slack)
3. Feel free to fork and use any example repository from class to get started.

Design iterations of main views.

1. The design should reflect the overall concept and goals of your project.
2. Create your design iterations with Figma, or use the Bootstrap template included in this repo designs/1.psd.
3. Create multiple iterations of each different page / view your app.
4. As per class presentations, look at relevant examples of good design to help you improve your own, then experiment and iterate!

Your finished project should include:

1. The Project:
   1. Intro page: A well-designed, but simple page that contextualizes your project. It could appear as an introduction to the project or provided at the end to explain what happened.
   2. Your coded design (valid HTML and CSS) combined with your prototype in a final application.
   3. The project should be live, hosted on Github Pages, Heroku, or your own server.
2. Documentation:
   1. A presentation (update your original proposal with screenshots, text, flowcharts, etc.) to document and share your finished project.
   2. A video (1:30 max) in case your site breaks 😳
   3. A 200–300 word statement explaining your concept and execution. This can be posted in Moodle, or included somehow in the actual project (e.g. the Intro page).
   4. See more about documentation

1. Save and refresh your work in the browser often to see your changes.
2. Commit changes regularly.
3. Confirm valid HTML and CSS ^(?)
4. When finished, push, publish, and post your project. Make sure to include a link to your Figma designs in the Moodle post.

• Course references HTML, CSS, and JS