An exercise in web design: improve the homepage of Tim Berners-Lee :
An assignment by Manuel Schmalstieg at EAA La Chaux-de-Fonds. The students had to produce a survey of tools and methods used in a professional field.
A class of Interactive Design students created a “2018 survey” of design tools used by digital agencies, in Switzerland and France.
The tasks involved:
- Defining the questions of the survey.
- Selecting an online survey tool (we chose Typeform)
- Building a contact list to mail out the survey.
- Creating a Mailchimp newsletter to send out the survey and allow for follow-up.
- Designing a visual concept for the presentation of the survey results (we used Figma).
- Coding the website.
Time available: 28 hours (in 7 sessions).
The initial brief: https://github.com/eaa-imd/designtools
The resulting website: https://eaa-imd.github.io/designtools/
Typeset a classic novel in HTML/CSS. A proposal from Robin Rendle’s newsletter, Adventures in Typography:
If I could go back in time to teach my younger self about typesetting then I reckon that this is where I’d start: “Take your favorite book,” I’d say “and design the absolute heck out of it.”
Let’s say you want to learn how to set type on the web, for example. Then I would argue that it’s more important that you get the fundamentals of typography down first before you go and learn about React or some giant-framework-to-do-app-thing. And the easiest way to learn the fundamentals is copying all the text from To the Lighthouse or Moby Dick or whatever your favorite book happens to be, and throwing it into Codepen. Then you can try and make it all easier to read, slowly, bit by bit.
A project by Kristian Bjørnard with students at Maryland Institute College of Art (MICA), presented in Ellen Lupton’s book Type on Screen (2014). In French:
In this assignment, students create their own version of the CSS Zen Garden.
Source: Scott Granneman, teaching at Washington University, St. Louis.
Observation: it could be interesting to do an exercice that is “similar to it but on a component level”. For an example, see the article “Same HTML, Different CSS” by Ahmad Shadeed.