Interaction Design API

State

The current state of the source code is a work in progress.

Description

This is an assignment given to students of school and counts towards my points of my end term.

We're supposed to make an one page website, which visualises "live data" from a public API.

The website has a landing page announcing the upcoming release of the application and has "fictive" email subscription form.

When the release date is reached you should be able to see and use the application.

It makes use of the SuperHero API.

Below is a more in depth explanation of the assignment.

Landing Page

• Fictive page explaining how the application will work and when it'll be available.
• Add mock-up images of how the product will look like eventually.
• Fictive form to subscribe to a mailing list.

Application

• Max. 1 page
• Min. 1 visualisation of data
• Min. 1 API
• Min. 1 Micro interaction (a switch that disables or changes the state of the app)

Points of interest

• The landing page and the eventual API page need to share the same styling.
• Have a favicon.
• Responsive (work mobile first)
• Use CSS variables
• Use CSS grid
• Visibility of system status (visualise interaction)
• Have a clear and concise form validation