keyword: web design

Categories
briefs

explore a WordPress pattern in seven ways

This assignments is based on a blog post by WordPress theme designer Rich Tabor: Exploring WordPress as a design tool (December 2022). Rich writes:

Last week I challenged myself to take one pattern, from one theme, and morph it multiple times — only using the design controls block editor. It’s kind of like CSS Zen Garden, but without CSS — just out-of-the-box WordPress block design tooling. 

One theme. One pattern. Seven ways. No additional blocks, nor custom CSS between scenes — just designing in the good ol’ WordPress block editor.

Every font family/size, color, border, radius, image, video, and spacing value were are all added in-editor.

Categories
briefs ideas

Another year in web design

A few years ago, Taschen released a heavy volume of web design history, edited by edited by Julius Wiedemann – Web Design: The Evolution of the Digital World 1990-Today.

The survey in the book ends in 2018.

In this brief, students are asked to continue the story by adding a new chapter – how does the current year in web design look like? They will have to identify current design trends, major innovations, notable websites, and organize the information following the examples in the book.

Depending on the number of students, they can work on one year, or on several missing years (2019, 2020, 2021…).

Categories
briefs

campaign website from the past

Students have to design a website for a historical figure (maybe from a list provided by the instructor).

Example carried out in 2021 by student Messaline Piette at Eracom, Lausanne:

Categories
ideas

Improve the homepage of Tim Berners-Lee

An exercise in web design: improve the homepage of Tim Berners-Lee :

https://www.w3.org/People/Berners-Lee/

Categories
briefs

design tools survey

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/

Categories
briefs

Worst of the Web

An assignment in User Interface Design, by Prof. Claudia Jacques, at Bronx Community College.

Identify what is bad interface design, navigation, functionality, interactivity, content distribution in a website or app and find a positive solution to that site.

Source: http://bccart87.claudiajacques.com/project-1-worst-of-the-web/

Categories
briefs

One Day Websites

A method designed by Jeremy Keith, applied at the New Digital School, Porto:

Day four was a deliberate step away from [hands-on coding]. No more laptops, just paper. Whereas the previous days had focused on collaboratively working on a single document, today I wanted everyone to work on a separate site.

The sites were generated randomly. I made five cards with types of sites on them: news, social network, shopping, travel, and learning. Another five cards had subjects: books, music, food, pets, and cars. And another five cards had audiences: students, parents, the elderly, commuters, and teachers. Everyone was dealt a random card from each deck, resulting in briefs like “a travel site about food for the elderly” or “a social network about music for commuters.”

Read a more detailed write-up here.

Categories
briefs

Future Retro

An assignment by Boris Müller, Professor for Interaction Design at FH Potsdam

In 2017, I gave a web design class at the Interface Design Programme in Potsdam, Germany. Each team was asked to come up with a redesign for an existing website. The assignment was very clear: Treat the browser as a blank canvas and create expressive, imaginative visual experiences. Use the technological potential of current web technologies as a channel for your creativity. Do not be constrained by questions of usability, legibility, and flexibility. Have an attitude. Disregard Erwartungskonformität.

The results: https://interface.fh-potsdam.de/future-retro/

Source: Why Do All Websites Look the Same?, Medium, Oct 30 2018

Categories
briefs

Student Bio Website

Use the basics of HTML to make a personal website.

Source: Sara Shields, web design and publishing course, Texas State University.

Categories
briefs

CSS Zen Garden

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.