Design in der Medieninformatik

---

Was ist Design?

./images/a-good-design.png
./images/was-ist-design-01.png
./images/was-ist-design-02.png
./images/was-ist-design-03.png
./images/was-ist-design-04.png

Design in der MI?

Absolventen der Medieninformatik analysieren, realisieren, betreiben und evaluieren informationstechnische Prozesse und Systeme zur Gestaltung, Produktion, Bearbeitung, Distribution und Nutzung medienbasierter Informationen.

Das Studium der Medieninformatik zielt somit im Kern auf die Vermittlung entsprechender Methoden, Techniken und Denkweisen der Informatik. Absolvent*innen der Medieninformatik arbeiten dabei vorwiegend in Teams und müssen dort ihre erworbenen Kompetenzen einbringen können – hier ist Interdisziplinarität gefragt, erwünscht und gefordert. Auch darauf bereitet das Studium der Medieninformatik vor: es vermittelt Sichtweisen und Techniken aus verschiedenen Fachgebieten, von Computergrafik über Mensch-Computer-Interaktion bis Videoproduktion, von Kommunikationsdesign über Programmentwicklung bis Marketing.

Wir entwickeln Software!

Ziele

Rolle von Design in der Medieninformatik

Grundbegriffe klären

Grundsätzliche Herangehensweisen und Sichtweisen klären

How to create Digital Products?

./images/digital-products-01.png

Typical Product Team

./images/digital-products-02.png

Different Types of Design(ers)

./images/digital-products-03.png

https://techcrunch.com/2017/05/31/here-are-some-reasons-behind-techs-design-shortage

./images/digital-products-04.png

Wie würden Sie die folgenden Designs bewerten?

Oder anders gefragt: nach welchen Kriterien würde Sie bewerten?

./images/design-bewerten-2023-1.jpg

https://virena.eu/

./images/design-bewerten-2023-2.jpg

https://lucasdeoliveira.webflow.io/

./images/design-bewerten-2023-3.jpg

https://lusion.co/

./images/design-bewerten-2023-4.jpg

https://lusion.co/

./images/design-bewerten-2023-5.jpg

https://lusion.co/

./images/design-bewerten-2023-6.jpg

https://www.canyon.com/de-de/

Design is ...

Desing is...

making things pretty?

Desing is...

moving pixels around?

./images/wir-duerfen-01.png
./images/wir-duerfen-02.png

Desing is...

asking the right questions.

Desing is...

identifying and solving problems.

Was wären die richtigen Fragen am Anfang eines Designprozesses?

Wie können wir Probleme identifizieren?

Pause

Woran erkennen wir gutes Design?

./images/gutes-design-01.png

Good Design is innovative

The possibilities for innovation are not, by any means, exhausted. Technological development is always offering new opportunities for innovative design. But innovative design always develops in tandem with innovative technology, and can never be an end in itself.

Good design is aesthetic

The aesthetic quality of a product is integral to its usefulness because products we use every day affect our person and our well-being. But only well-executed objects can be beautiful.

Good design makes a product useful

A product is bought to be used. It has to satisfy certain criteria, not only functional, but also psychological and aesthetic. Good design emphasizes the usefulness of a product whilst disregarding anything that could possibly detract from it.

Good design makes a product understandable

It clarifies the product’s structure. Better still, it can make the product talk. At best, it is self-explanatory.

Good design is unobtrusive

Products fulfilling a purpose are like tools. They are neither decorative objects nor works of art. Their design should therefore be both neutral and restrained, to leave room for the user’s self-expression.

Good design is honest

It does not make a product more innovative, powerful or valuable than it really is. It does not attempt to manipulate the consumer with promises that cannot be kept.

Good design is long-lasting

It avoids being fashionable and therefore never appears antiquated. Unlike fashionable design, it lasts many years – even in today’s throwaway society.

Good design is thorough down to the last detail

Nothing must be arbitrary or left to chance. Care and accuracy in the design process show respect towards the user.

Good design is environmentally-friendly

Design makes an important contribution to the preservation of the environment. It conserves resources and minimizes physical and visual pollution throughout the lifecycle of the product.

Good design is as little design as possible

Less, but better – because it concentrates on the essential aspects, and the products are not burdened with non-essentials. Back to purity, back to simplicity.
./images/gutes-design-02.png

Dieter Rams
Industrial Designer

./images/gutes-design-03.png
./images/gutes-design-04.png

Rams Kriterien

innovative

aesthetic

makes a product useful

makes a product understandable

unobtrusive

honest

long-lasting

thorough down to the last detail

environmentally-friendly

as little design as possible

Design Basics

Zum Start

versuchen Sie offen zu sein

Gestaltungslösungen sind nicht binär

versuchen Sie unvollständige Übung durch gute Fragen zu komplettieren

entwickeln Sie stets Alternativen und dokumentieren diese um nachweisen zu können, dass die gewählte Lösung die Beste (zumindest aus ihren Varianten) ist

entwickeln Sie Argumente und Begründungszusammenhänge für Ihre Gestaltungen

Beschreiben Sie Funktion und Zielgruppe?

Zielsetzung & Zielgruppe

./images/design-basics-01.png

Henne & Ei Problem

./images/design-basics-02.png

Funktion & Zielgruppe: gutes Design?

./images/design-basics-03.png

Funktion & Zielgruppe: gutes Design?

./images/design-basics-04.png

Funktion & Zielgruppe: gutes Design?

./images/design-basics-05.png

Funktion & Zielgruppe: gutes Design?

./images/design-basics-05a.png

Funktion & Zielgruppe: gutes Design?

./images/design-basics-06.png

Funktion & Zielgruppe: gutes Design?

./images/design-basics-07.png

Funktion & Zielgruppe: gutes Design?

./images/design-basics-08.png

Funktion & Zielgruppe: gutes Design?

./images/design-basics-09.png

Funktion & Zielgruppe: gutes Design?

./images/design-basics-10.png

Funktion & Zielgruppe: gutes Design?

./images/design-basics-11.png

Funktion & Zielgruppe: gutes Design?

./images/design-basics-12.png

Funktion & Zielgruppe: gutes Design?

./images/design-basics-a.png

Funktion & Zielgruppe: gutes Design? Was ist der Unterschied?

./images/design-basics-b.png

Funktion & Zielgruppe: gutes Design? Was ist der Unterschied?

./images/design-basics-c.png

Was ist der Unterschied?

Wie beschreiben wir ein Layout?

Gutes Auge, präzise Sprache

./images/layout-01.png

Wie beschreiben wir ein Layout?

Nach welcher Systematik können wir vorgehen?

./images/layout-02.png

Wie beschreiben wir ein Layout?

Welche visuellen Elementtypen gibt es eigentlich?

./images/layout-03.png
./images/layout-04.png
./images/layout-05.png
./images/layout-06.png
./images/gutes-design-08.png
./images/layout-07.png
./images/layout-08.png
./images/layout-09.png
./images/layout-10.png
./images/layout-11.png
./images/layout-12.png

Wie beschreiben wir ein Layout?

Welche visuellen Eigenschaften kann ein Element haben?

Punkt // Linie // Fläche // Form

./images/layout-13.png
./images/layout-14.png

Wie beschreiben wir ein Layout?

Welche visuellen Eigenschaften kann ein Element haben?

./images/layout-15.png

Punkt // Linie // Fläche // Form

Notieren Sie visuelle Eigenschaften für die folgenden Beispiele.

./images/eigenschaften-01.png
./images/eigenschaften-02.png
./images/eigenschaften-03.png
./images/eigenschaften-04.png
./images/eigenschaften-05.png
./images/eigenschaften-06.png
./images/eigenschaften-07.png
./images/eigenschaften-08.png
./images/eigenschaften-09.png
./images/eigenschaften-10.png
./images/eigenschaften-11.png
./images/eigenschaften-12.png
./images/eigenschaften-13.png

Gutes Auge, präzise Sprache

Wie beschreiben wir ein Layout?

./images/beschreiben-01.png
./images/beschreiben-02.png
./images/beschreiben-03.png

Zusammenfassung

Design macht den Unterschied.

Design ist ein »wicked problem«.

Design stellt Fragen.

Medieninformatiker können entscheidende Rollen in Teams übernehmen.

Wir gestalten in der Regel nicht für uns selbst.

Danke für's Mitmachen

https://christiannoss.de