Design and program a web application as a creative response to content from the course.
Learning Objectives
Students who complete this assignment will be able to:
- Recall important social, political, and economic issues around design, the internet, and computing.
- Research, ideate, and plan a creative response to themes from the course content.
- Use design processes (grids, typography, design principles, and iteration) to create a custom responsive web application design.
- Use HTML, CSS, JS, and any additional frameworks or libraries to create a custom web application.
Preparation
Complete the following to prepare for this assignment. See Resources for additional information as needed.
- Codecademy JS references jquery introduction, effects, jquery events, style methods, dom traversing
- Codecademy: JS 7-1 Higher-Order Functions (1-4)
- Codecademy: JS 7-2 Iterators (1-9)
- Codecademy: JS 8-1 Objects (1-10)
Rubric
The final grade incorporates preparation scores with the final score (rubric).
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 machine.
The following steps are represented in this diagram.
Identify a topic, collect research, prepare a summary for a brainstorming session.
- 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?
- 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 sites.
- 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.
- 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?
- Bring the above to class for the...
In-class activity
In groups, brainstorm on your topic(s) use the Disney Creative Strategy, which asks your group to assume different "hats" in order to ideate on concepts, solutions, and risks.
- Everyone: post your subject or concept in Slack
- As Dreamers, add new ideas for projects based on the subject to the posts in your group
- How might you create something that helps others discuss, think about, or help to solve the issue?
- The more ideas the better. Brainstorming aims to produce quantity, from which we select quality ideas.
- No criticism. Our goal is to generate a pool of ideas. All ideas are welcome.
- As Realists, after all have posted, talk about each in a group
- Think more practically, about how you would put the ideas into practice.
- After the session, explore the ideas and notes as a critic, to figure out what you can build in the given time
Create a pitch deck (10-15 slide Google Presentation)* to share and plan your project that contains:
- A one paragraph introduction to your concept and what you plan to make. Who will use this and why?
- An initial attempt at an identity (e.g. a logo, word mark, style guide, etc.).
- Competition Scan - Examples (2–3) of similar works (in concept or tech) with images and links.
- Flowcharts (2–3) showing each step users see, and another showing how data works in the app
- Wireframes showing all the views in the interface (introduction page, forms, results page)
- 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.
In-class activity (lightening talks)
Lightning talks of your pitches
- Share a link to your proposal in Slack.
- Present slides on Zoom. 3 minutes max.
- 1 minute max for questions / comments. Add others in Slack thread.
In-class activity (speed dating)
- Find a partner.
- Share your proposal, progress, and unknowns. (3 min)
- Your partner should ask questions and make comments while you make notes. (1 min)
- Switch roles and repeat the above.
- Switch partners and repeat.
Create a working “proof of concept” of your app.
- Your prototype should contain the essential functions of your project.
- Your work should be live (able to be shared via a link in Slack)
- Feel free to fork and use any example repository from class to get started.
- Save and refresh your work in the browser often to see your changes. Commit changes regularly.
In-class activity
In groups, share your prototypes to get feedback:
- Be ready to explain the current status of your work.
- Bring specific questions or unknowns (concept, design, tech) you would like to discuss with your group.
Design iterations of main views.
- The design should reflect the overall concept and goals of your project.
- Create your design iterations with Figma, or use the Bootstrap template included in this repo
designs/1.psd
. Show your work! Do not delete previous versions—we want to see your progress as you iterate and improve your designs. - Create multiple iterations of each different page / view your app.
- As per class presentations, look at relevant examples of good design to help you improve your own, then experiment and iterate!
In-class activity
Share your iterations to get feedback before coding the final design.
- Bring to class: What are three questions you would like to ask each user of your potential design?
- In-class: Design Critique: Imaginary Audience
- Combine your coded design and prototype
- Your project should be 95% complete
In-class activity
We will share final projects in lightning talks (3 min.)
Your finished project should include:
- 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.
- Your coded design (valid HTML and CSS (?)) combined with your prototype in a final application.
- The project should be live, hosted on Github Pages, Vercel, or your own server.
- A Google Presentation (update your original proposal with screenshots, text, flowcharts, etc.) to document and share your finished project.
- A screencast video taken on your computer (do not use a cell phone!) (1:30 max) in case your site breaks 😳 (see tips)
- 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).
- A link to (all of) your Figma layouts
- When finished, push, publish, and post all deliverables to Moodle per documentation in the Assignments.