Francesco
Scheffczyk

At the end of 2021, the joint project "KITeGG - Making and understanding AI tangible: Connecting technology and society through design" was launched. The project consists of the Mainz University of Applied Sciences, HfG Offenbach University of Art and Design, Hochschule für Gestaltung Schwäbisch Gmünd, Köln International School of Design and the Trier University of Applied Sciences. As part of the team at Mainz University of Applied Sciences, one of my first tasks was to design and develop a temporary website to create a first information source about the project.

In the meantime, the temporary website has been replaced by a permanent website, which can be found at gestaltung.ai. Click on the button above to go to an archived version of the temporary website.

Design

After Jean Böhm and Isabela Dimarco had made the first design decisions regarding font and colour, I took on the task of designing and developing the website. Since this is a temporary website that is only for information purposes, a one-pager was designed. The menu in the middle serves as a present navigation to quickly get to the respective blocks of information. In addition to introducing the individual members of the project, the website also presents a rough timetable in form of a simple graphic, as well as an overview of the team. The team overview can be filtered by university. In addition, first design experiments with AI are displayed at the beginning of the website in a constantly updating grid.

The font in use is Archivo from Omnibus Type.

Technical implementation

To get the site live quickly, the Vue framework Quasar was used for development. With its ready-made components, utilities and helpers, the framework offers a good basis for a fast development process. To integrate AI as a design medium on the website, images of the team members were subsequently animated with the help of an AI model. The model used is based on the paper 3D Photography using Context-aware Layered Depth Inpainting by Meng-Li Shih, Shih-Yang Su, Johannes Kopf and Jia-Bin Huang. If a picture was missing for a team member, a placeholder picture was generated with CLIP-Guided VQGAN.