Digital Design Practice, Workshop, Visual Communication Institute, The Basel School of Design HGK FHNW, 18–28 February 2020.

This is the workshop's open-source repository. Here you will find the curriculum, helpful code snippets, and resources. The course will be in German, the repository in English.

• Course Aims
• Course Program
• Developing Your Website
• Tech Help and Support
• Contextual Knowledge Resources

Developing Your Website
You learn how to conceptualize, design and develop your web presence. Depending on your interest and individual technological skill level you can choose one of two options to develop your website. This means, that we will split into two groups during the course to learn the individual tools necessary. However, some basics will stay the same and we will learn them all together. This includes a basic web development workflow:

• Design: How to use Sketch or something similar to layout a contemporary, responsive website
• Development: How to simulate a webserver on your laptop and use code editors
• Production: How to setup domain and hosting, how to upload and test your site.

Theory and Contextual Knowledge
You learn about digitization in a wider context. This includes looking at how digitization shapes the designer's profession but also how it is connected to topics like ecology, economy, privacy, or ideology. The latest incidents like the climate demonstrations show how important a critical generation is for our world. And I believe this also includes critical thinking towards digitization.

08:30 – 12:00, Introduction

• Introduction to the workshop program
• Description of two website development options

13:00 – 16:30, Input Workflow I: Design

• Download and install of Sketch, Sketch Mobile App (iOS), (Android)
• Introduction to Sketch and the provided template
• Rest of afternoon individual work on website (concept, content and design)

08:30 – 16:30, Individual Work and Coaching

• Individual work on the website (concept, content, and design)
• Short input on how we proceed (1 pm / 13:00 Uhr)
• Individual coaching as needed (afternoon)
• Each student chooses one website development option

08:30 – 12:00 Input: Local Development & Introduction to Wordpress

Everyone, also those students who want to work with Kirby, should attend the introduction to the local development workflow.

• Install a web server (Mamp) locally for development
• Install a code editor (I prefer Visual Studio Code, but Sublime is also a good alternative)
• Download Wordpress
• Create a MySQL Database with Mamp (under Tools => phpMyAdmin, click «new»)
• Install Wordpress
• Install Laytheme
• Introduction to Wordpress and Laytheme
• If needed quick refresh on HTML and CSS

13:00 – 16:30, Input: Kirby CMS

Everyone who decided to work with Wordpress: feel free to join the afternoon or take time for individual work.

• Download Kirby (please select the «PlainKit» download)
• Place and unzip Kirby into your MAMP folder for development
• Access the backend under /panel and finish the installation
• Open the complete Kirby folder with your code editor of choice and enable debugging mode
• How to display content (Text, Images)
• How to add new pages
• How to build a navigation
• Introduction to Bootstrap

08:30 – 16:30 Free Work + Kirby

• Kirby CMS part II
• Free work

08:30 – 16:30, Individual Work and Coaching

• Individual Work and Coaching/Support

16:30, Lecture Max @ Studiokino

08:30 – 16:30, Individual Work and Coaching

• Input 1: Privacy (08:30-09:00)
• Individual Work and Coaching/Support

08:30 – 16:30, Individual Work and Coaching

• Contextual Input 3: Ideology and Ecology (08:30-09:00)
• Individual Work and Coaching/Support

13:00 – 16:30, Input Workflow III: Production

• Domains, Hosting and FTP uploads with Cyberduck or FileZilla
• Testing Tools (W3Validator, Google Mobile Friendly Test, Google Speedtest, Pingdom Speedtest)
• Individual Work and Coaching/Support

08:30 – 12:00, Individual Work and Coaching

• Individual Work and Coaching/Support

13:00 – 16:30, Final Meet-Up

• Informal Meet-Up where everybody brings his/her website on the laptop and we chat & discuss our works

There are 2 options proposed to develop your digital presence. Both options will be shortly introduced on the first day. The goal is to decide on one option till Wednesday, 19.02.20.

The time is short and you will have to wrap your head around a lot of new stuff during the course. Therefore, the idea is to give you a great start and that you can finish your website on your own after the course. Nevertheless, it would be great if each one could quickly share his/her experience and project at the end of the course (Friday afternoon, 28.02.20).

Take a look at the proposed options two develop your website!

Ok, you don't like to mess around with code but still need a proper portfolio website. That's fine! This is your option then. You will use Wordpress.org, a free CMS, and Laytheme for styling the website (my recommendation, feel free to use another theme). The theme is developed to make great portfolios. However, it's an out of the box solution, therefore you have to work with the limitations that the theme brings (which can be a nice challenge after all!). Here are some websites that use lay theme:

• https://maxfrischknecht.ch/
• https://ja-kob.ch/
• http://alexandraschuessler.com/
• http://www.antwerpmasters.be/
• http://jotundes.com/
• https://thomaswiuf.dk/
• http://raoulgottschling.de/
• https://maxwinter.studio/

You want to know the whole truth and nothing but the truth? You came to the right place! You will develop a state of the art website from scratch. You will learn how to use Kirby CMS, a clean slick content management system. Kirby is made in a way that the backend is customized for your content and the system doesn't interfere with your design. Everything is possible the only limit is your willingness to learn and overcome obstacles. Once you handle this challenge you are on a great way to learn other content management systems and at some point take on developer jobs. Some websites made with Kirby:

• https://mafiles.maxfrischknecht.ch/
• https://debutdebut.com/ (in development)
• https://after-work-studio.com/
• http://mdesbasel.ch/
• https://chevalvert.fr/fr
• https://radio.garden/
• https://demofestival.com/

• http://fragmentsin.space/
• http://edgarschmitz.com/
• http://imnotevenhere.com/
• http://davidpfifferling.de/
• http://lanteri.studiovedet.com/
• http://untitledsans.com/
• https://pihakapi.com/
• https://0b673cce.xyz/
• https://liebermannkiepe.de/
• https://wwwwwwwwwwwwwwwwwwwwww.bitnik.org/schiiwerfer/1/
• https://triebwerk2017.bff.de/
• https://2019.wholefestival.com/
• https://triebwerk2016.bff.de/

• Filezilla
• Cyberduck
• Wordpress/Laytheme video tutorial

• Show/Hide Layout => CTRL + L
• Show/Hide Grid => CTRL + G
• Show/Hide Tools => CMD + .

• Sketch Documentation
• Mamp Documentation
• Wordpress Documentation
• Laytheme Documentation
• Laytheme Support Forum
• Kirby Documentation
• Kirby Support Forum
• Bootstrap Documentation
• W3 School: HTML, CSS and Javascript Snippets
• Stackoverflow: The main forum for tech related problems

Data Sovereignty

• Grassegger, Hannes. Das Kapital bin ich: meine Daten gehören mir. Umfassend überarbeitete Ausgabe von “Das Kapital bin ich. Schluss mit der digitalen Leibeigenschaft.” Zürich Berlin: Kein & Aber, 2018.

Browsers

• Firefox
• Tor
• Brave
• Cliqz

Browser Plugins / Add-ons

• https://www.eff.org/privacybadger
• Facebook Container for Firefox

Search Engines

• https://duckduckgo.com/
• https://www.startpage.com/
• https://www.ecosia.org/

Messengers

• https://www.signal.org/
• https://threema.ch/en
• https://telegram.org/

VPNs

• https://nordvpn.com/
• https://www.privateinternetaccess.com/

Further Links

• https://www.digitale-gesellschaft.ch/ratgeber/
• https://www.cryptoparty.in/
• https://netzpolitik.org/
• https://re-publica.com/de

• Barbrook, Richard, and Andy Cameron. “The Californian Ideology.” Science as Culture 6, no. 1 (January 1996): 44–72. Link
• Lovink, Geert. “On the Social Media Ideology.” E-Flux Journal #75 (September 2016): 10. Link

• Buchanan, Richard. “Design Research and the New Learning.” Design Issues 17, no. 4 (October 2001): 3–23. Link
• Maldonado, Tomás, and Gui Bonsiepe. Digitale Welt und Gestaltung. Schriften zur Gestaltung. Basel: Birkhäuser, 2007.
• Nake, Frieder. “PARAGRAPHS ON COMPUTER ART, PAST AND PRESENT,” 9, 2010.
• Tomas Garcia, Ferrari. “Design Futures: The Role of Design in a Software Society.” In Unfrozen - a Design Research Reader by the Swiss Design Network. Zürich: Triest, 2018.
• Reas, Casey, and Chandler McWilliams. Form+code in Design, Art, and Architecture. 1st ed. Design Briefs. New York: Princeton Architectural Press, 2010.
• The Fourth Revolution

• Mason, Paul. Postkapitalismus: Grundrisse einer kommenden Ökonomie. Translated by Stephan Gebauer. 1. Auflage. suhrkamp taschenbuch 4845. Berlin: Suhrkamp, 2018.

• Hao, Karen. “Training a Single AI Model Can Emit as Much Carbon as Five Cars in Their Lifetimes.” MIT Technology Review. Accessed January 28, 2020. https://www.technologyreview.com/s/613630/training-a-single-ai-model-can-emit-as-much-carbon-as-five-cars-in-their-lifetimes/.
• Kozlowicz, Joe. “8 Ways Data Center Environmental Impact Goes Beyond Emissions | Green House Data.” Accessed January 28, 2020. https://www.greenhousedata.com/blog/data-center-environmental-impact-goes-beyond-emissions.