Mini-Application “The People Who Shaped AI”
Comments and explanations by Marco Barnig
1. Figma
Since I was not familiar with Figma until recently, it took me a while to understand that it is a powerful digital tool for illustrating the layout of a website.
Back in 1997, when I created my first static website on the Webplaza of the Telecommunications Division of the P&T public company, I regularly sketched page layouts on squared paper. Most of my ideas came to me at night—during dreams or bouts of insomnia. I would get up, quickly draw a sketch on paper, and then return to bed to fall asleep again.
2. Collaboration Across Generations
To facilitate collaboration and mutual understanding between the different generations involved in the KI-Léierbud project, I tried to design wireframes in my baby-boomer style as an example in Figma, starting with Alan Turing.
3. Wireframe “Alan Turing”
My original idea for the functional wireframe of the “Alan Turing” page is shown below:
4. Mockup “Alan Turing”
My original idea for the graphical mockup of the “Alan Turing” page is presented in the following figure.
I limited myself to defining a harmonious palette of three colors—used respectively for the top and bottom fixed bars and for the central content area.
5. Interactive Prototype “Alan Turing”
I added the image and text for “Alan Turing” into the WordPress CMS under a new category: knowledge/visionaries.
The ID of the first article is 1961. I extended the existing prototype URL https://app8.ki-leierbud.lu with the parameter /?p=1961&color=ocean.
The content displayed in the browser looks as follows:
6. Revised Wireframes and Mockups “Alan Turing”
Based on the Figma mockup proposed by Sumin, and in order to support all the required functionalities, I revised the functional and graphical wireframes as follows:
7. Interactive Prototype of the Mini-Application “The People Who Shaped AI”
To demonstrate the practical operation of the “Alan Turing” page and its integration within the mini-application “The People Who Shaped AI”, I added a few more visionaries and pioneers, as well as a first and last page, into the WordPress CMS.
I also created a new JSON file with a uniform black color palette.
My plan is to adapt the code and host it at:
https://ki-leierbud.lu/knowledge/visionaries/
In the meantime, it can be tested with the current code at: