📅 Dates: 17.08.-31.08.24 📍
Location: Bauhaus Summer School, Weimar

Over two incredible weeks, we explored the foundational principles of Bauhaus School of Design and examined how they can translate into contemporary User Interface Design. We began by looking at the work of famous artists such as Josef Albers, Oskar Schlemmer, Paul Klee, Wassily Kandinsky and Jan Tschichold. We analysed their work from various User Interface Design angles, including their innovative use of type, colour and shapes into their compositions.

We captured key aspects of their work, compiled screenshots, took notes and assembled moodboards in @figma to guide our creative process. We continued integrating these Bauhaus principles into our user interface projects. Using figma’s prototyping tools we developed storyboards, wireframes, and built high-fidelity interactive projects.

Students got introduced to figma advanced prototyping features, such as variables, conditionals, and expressions. Moreover, students got their hands to coding through programming languages such as HTML, CSS, and JavaScript to bring their design elements to life. Additionally, we experimented with AI tools such as @chatgpt to enhance our coding process. ChatGPT assisted us in generating code snippets and debugging. Finally, there was an exhibition at Open Ateliers where students showcased their projects to the visitors.

Inspiration

We began by looking at the work of famous artists such as Josef Albers, Oskar Schlemmer, Paul Klee, Wassily Kandinsky and Jan Tschichold. We analysed their work from various User Interface Design angles, including their innovative use of type, colour and shapes into their compositions. We captured key aspects of their work, compiled screenshots, took notes and assembled moodboards in @figma to guide our creative process.

Wireframing

Before diving into digital tools, we started the design process with paper wireframing, which allowed us to quickly sketch out ideas and visualize the structure of our user interfaces. This hands-on, tactile approach enabled us to brainstorm freely, experiment with different layouts, and identify potential usability issues early in the design phase. By using simple paper and pen, we were able to iterate rapidly, making adjustments and exploring multiple design directions without the constraints of software. Paper wireframing fostered creativity and collaboration, as team members could easily share and critique each other’s sketches, laying a solid foundation for the more refined digital prototypes that would follow.

Prototyping

We continued integrating these Bauhaus principles into our user interface projects. Using figma’s prototyping tools we developed storyboards, wireframes, and built high-fidelity interactive projects. We continued integrating these Bauhaus principles into our user interface projects. Using figma’s prototyping tools we developed storyboards, wireframes, and built high-fidelity interactive projects.

Coding with AI

Additionally, we explored the integration of AI tools, such as ChatGPT, to further elevate our coding experience. ChatGPT proved to be an invaluable resource in generating code snippets, offering suggestions for optimizing existing code, and assisting in debugging complex issues. This AI-driven approach not only streamlined the coding process but also provided us with instant feedback and technical guidance, enabling us to experiment more freely and confidently with various programming techniques. By combining traditional coding skills with the power of AI, we were able to develop innovative projects and push the boundaries of our creativity.

Final Results

The final results took shape in various applications, including apps, websites, creative coding projects, and more. Below is a recap of our journey together. Throughout this Workshop, students explored new technologies, collaborated in multidisciplinary teams, and applied their knowledge in practical ways that not only enhanced their technical abilities but also encouraged critical thinking and problem-solving.

Exhibition

Finally, there was an exhibition at Open Ateliers where students showcased their projects to the visitors.

A huge THANK YOU to all the students who participated, and also to the @bauhaus_summer_school school team for hosting this workshop and for providing us the structure and it’s beautiful space 🚀👏👏👏

Music by @jazzrauschbigband featuring the song “Spectrum of a Star”
Fonts used by @newglyph featuring Baika, Swissnow and Oddity

Links:
https://www.uni-weimar.de/summerschool/de/
https://www.figma.com/