===== Kurzzeit-Projekt: Hausaufgaben (Design Basics, SoSe 2024) ===== ___ ___ ___ ___ ___ /\__\ /\ \ /\ \ /\ \ /\ \ ___ /::| | /::\ \ /::\ \ /::\ \ /::\ \ /\ \ /:|:| | /:/\:\ \ /:/\:\ \ /:/\:\ \ /:/\:\ \ \:\ \ /:/|:|__|__ /::\~\:\ \ /:/ \:\__\ /::\~\:\ \ /::\~\:\ \ /::\__\ /:/ |::::\__\ /:/\:\ \:\__\ /:/__/ \:|__| /:/\:\ \:\__\ /:/\:\ \:\__\ __/:/\/__/ \/__/~~/:/ / \/__\:\/:/ / \:\ \ /:/ / \/_|::\/:/ / \:\~\:\ \/__/ /\/:/ / /:/ / \::/ / \:\ /:/ / |:|::/ / \:\ \:\__\ \::/__/ /:/ / \/__/ \:\/:/ / |:|\/__/ \:\ \/__/ \:\__\ /:/ / \::/__/ |:| | \:\__\ \/__/ \/__/ ~~ \|__| \/__/ Im Kurzzeitprokt **mp.Drei** werden Sie in Kleingruppen an der Entwicklung eines Audio-Objektes (bspw. MP3-Player, Radio, o.ä.) arbeiten. ==== Briefing ==== Sie sind Teil eines Teams, das mit der Neuentwicklung eines innovativen mp3-Players beauftragt wurde. Das Ergebnis soll eine genaue Vorstellung davon vermitteln in welche Richtung ein neues Produkt gehen könnte. Als Basis dient eine Hardware, die an jedes Team ausgegeben wird. Bis zur Präsentation sollen Sie auf Basis Ihrer Recherchen ein Konzept entwickeln, daraufhin einen Prototypen erstellen, den späteren Gebrauch visualisieren und ein Logo für das Audio-Objekt entwickeln. * Es arbeiten jeweils zwei Studierenden zusammen. * Stimmen Sie sich innerhalb Ihres Teams für die notwendigen Besprechungstermine ab. Erstellen Sie einen gemeinsamen **Zeitplan** für die Bearbeitungsschritte bis Ende der Bearbeitungsphase. Besprechen Sie in Ihrem Team die jeweiligen Stärken innerhalb der Felder Elektrotechnik und Informatik. Was sind die jeweiligen Interessengebiete im Feld Design? Entscheiden Sie als Gruppe worauf die einzelnen Gruppenteilnehmer*innen ihren **Fokus** legen möchten. Stimmen Sie sich ab, sodass sich alle Teamteilnehmer bestmöglich ergänzen und __möglichst viel Lernen und **Spaß am Projekt** haben__! ==== Schritt 1 ==== Recherche zum Thema, Konzeptentwicklung * Machen Sie mit Ihrer Gruppe ein **Brainstorming**. Ergänzen Sie dabei Ihre Ideen durch diverse Scribbles, oder Sammeln Sie Beispielfotos von entsprechenden Szenarien. * Erstellen Sie eine Übersicht mit den gesammelten Ideen in Form eines **Mind-Maps**. Begutachten Sie Ihre Ansätze und überlegen Sie, welche Inhalte womöglich durch **weitere Recherchen** und Zusammentragen zusätzlicher Informationen ergänzt werden könnten. An dieser Stelle macht es Sinn, breit gefächert zu arbeiten. D.h. Sie sollten nicht nur einen einzigen Wikipedia Artikel lesen, sondern viele diverse Quellen heranziehen, wie etwa: Buch Publikationen (=> besuchen Sie auch einmal die Bibliothek am Leonardo-Campus), mögliche Video Dokumentation im Angebot von [[http://kanopy.com|Kanopy]] oder der Öffentlich Rechtlichen Fernsehsender (=> [[https://mediathekview.de/download/|MediathekView]]), Podcasts, YouTube Videos, Ausstellungen und deren Kataloge, etc. * Welche drei Ansätze sind in der Meinung Ihrer Gruppe nach am interessantesten? An dieser Stelle geht es übrigens noch nicht um eine Durchführbarkeit/Realisierung des ganzen. Lassen Sie den praktischen Gedanken ersteinmal bei Seite! Entscheiden Sie rein nach dem Kriterium was für ein Audio-Objekt Sie gerne in Zukunft benutzen würden. Stimmen Sie in Ihrer Gruppe mit allen Beteiligten darüber ab, welche Idee weiter verfolgt werden soll. * Erstellen Sie ein **Konzept Statement**, das die ausgewählte Projektidee kurz und knackig beschreibt. * Erstellen Sie ein **Mood-Board** (Querformat DIN-A3). Beachten Sie, daß es __nicht__ um die Erstellung eines //Pinterest-Board// geht, sondern um eine __gestaltete Collage von Bildinhalten__. (Ironischer Weise können Sie sich zur Inspiration [[https://pin.it/1UkEZVt|folgendes Pinterest Board]] anschauen. :-D) Dies kann analog etwa durch ausgerissene/ausgeschnitte und neu zusammencollagierte Motivteile aus Magazinen/Zeitschriften erfolgen, oder auch digital, etwa mit Hilfe von Photoshop, Affinity Photo, o.ä.Programmen. Siehe auch diesen [[https://de.wikipedia.org/wiki/Moodboard|Wikipedia Artikel zur Funktion eines Moodboards]]. * In einem nächsten Schritt definieren Sie notwendige **Anforderungen** und beschreiben die **Bedingungen** schematisch für Ihr Projekt. Was sind Ihre Ausgangspunkte? Was sind die wichtigen Bestandteile Ihrer Idee? Wen adressiert Ihr Produkt? Wie soll es benutzt werden? Gibt es spezielle Einsatzbereiche? * Achten Sie darauf, dass parallel zu Ihrer Arbeit in allen Bearbeitungsphasen die einzelnen **Schritte gut und ausreichend dokumentiert** werden. Fertigen Sie u.a. zwischenzeitig Scans wichtiger Dokumente an, oder fotografieren Sie diese. Denken Sie daran, dass alle Bilder, Fotos, Screenshots, etc. in der Präsentation am Semesterende verwendet werden können, um Ihre Schritte nachvollziehbar zu präsentieren. Es macht deswegen Sinn diese direkt von Anfang an vernünftig abzuspeichern. * Bereiten Sie Übersicht Ihrer aktuellen Bearbeitung vor. Sie zeigen diesen Arbeitsstand in der nächsten Seminarsitzung. ==== Schritt 2 ==== {{:ba:design_basics:sose24:mpdrei_doku_01.jpg?direct&200|}} {{:ba:design_basics:sose24:mpdrei_doku_02.jpg?direct&200|}} {{:ba:design_basics:sose24:mpdrei_doku_03.jpg?direct&200|}} Prototypen Erstellung * **Quick- and Dirty Prototypen ** \\ \\ Die bisherige Konzeptskizze wird überführt in verschiedene **Quick- and Dirty Prototypen**. (Dauer pro Modell max. ca. 30 Minuten). Bei der Erstellung eines solchen Prototypen geht es darum mit relativ geringen Material-, Kosten- und Zeitaufwänden bestimmte Aspekte Ihrer Idee auszutesten. Dies kann zum Beispiel die geplante Größe Ihres Objektes oder die äußere Form sein. Auch kann an so einem Modell etwa die Positionierung bestimmter Elemente wie Knöpfe, Lautsprecher etc. getestet werden. Es geht hier __nicht__ um ein "gutes" Aussehen. Es ist überhaupt nicht schlimm, wenn Teile abgerissen und an anderer Stelle wieder angeklebt werden. Versuchen Sie anhand eines solchen Prototypen möglichst viel Erkenntnisse abzuleiten zum Beispiel zur Handhabung des Objektes. Testen Sie durch diverse //Quick-and-dirty Prototypen// in kürzester Zeit unterschiedliche Alternativen. \\ \\ Beispiele: \\ {{:ba_design_basics:quick_and_dirty_prototype_radio_01.jpg?direct&100|}} {{:ba_design_basics:quick_and_dirty_prototype_radio_02.jpg?direct&114|}} {{:ba_design_basics:quick_and_dirty_prototype_radio_03.jpg?direct&100|}} {{:ba_design_basics:quick_and_dirty_prototype_radio_04.jpg?direct&100|}} {{:ba_design_basics:quick_and_dirty_prototype_radio_05.jpg?direct&154|}} {{:ba_design_basics:quick_and_dirty_prototype_radio_06.jpg?direct&100|}} \\ \\ * ** Papier/Papp-Modelle ** Bauen Sie ein oder mehrere **Papier/Papp-Modelle im Massstab 1:1**. Hier geht es um die Erstellung eines Körpers aus Papier oder Pappe in Originalgröße, d.h. im Massstab 1:1 (Dauer ca. 3,5 Stunden!). Dies kann beispielsweise als Schicht- oder als Faltmodell erfolgen. Auch wird in diesem Schritt ausgetestet, wie groß bestimmte Bedienelemente sein können/müssen oder an welchen Positionen diese genau sitzen sollen. Testen Sie an Ihrem Modell die optimale Position und Handhabung bestimmter Positionen, Flächen und Bedienelemente (Dauer ca. 2 Stunden pro Modell). Eine Orientierung für einen ersten Schritt in die richtige Richtung bietet das untere Bildbeispiel. Hier testet der Student Adham Chakohi diverse Ansätze einer Radiofrontfläche, um daraus einen ersten Ansatz für ein Modell in 1:1-Größe abzuleiten. \\ {{:ba_design_basics:design_fundamentals_img_5032.jpg?direct&400|}} \\ \\ Weitere Beispiele verschiedener Papier/Papp-Modelle: \\ {{:ba:sose24:paper_prototype_radio_00.jpg?direct&96|}} {{:ba:sose24:paper_prototype_radio_01.jpg?direct&114|}} {{:ba:sose24:paper_prototype_radio_02.jpg?direct&114|}} {{:ba:sose24:paper_prototype_radio_03.jpg?direct&114|}} {{:ba:sose24:paper_prototype_radio_04.jpg?direct&64|}} {{:ba:sose24:paper_prototype_radio_06.jpg?direct&115|}} {{:ba:sose24:paper_prototype_radio_05.jpg?direct&230|}} \\ \\ Durch solche Modelle können Sie Ihre Idee beispielsweise auf Ergonomie oder Funktionsweise überprüfen. \\ Dokumentieren Sie Ihren Prozess und die einzelnen Ergebnisse. \\ \\ Verschiedene Entwurfsscribbles: \\ {{:ba:sose24:beispiel_3ansichten_sose21_teresa_gerard.png?direct&200|}} {{:ba:sose24:beispiel_3ansichten_sose21_vincent_musial.png?direct&200|}} {{:ba:sose24:beispiel_3ansichten_sose21_nicola_stolze.png?direct&200|}} \\ //Beispiel von links nach rechts: Teresa Gerard, Vincent Musial, Nicola Stolze (SoSe2021)// * Je nachdem wieviel Zeit Sie noch haben, werden Sie in Ihren weiteren Prototypen Schritt für Schritt etwas detailreicher. Nutzen Sie zur Erstellung bspw die Ressourcen des Maker-Spaces oder der Werkstatt im ZBE. * Achten Sie darauf, dass parallel zu Ihrer Arbeit in allen Bearbeitungsphasen die einzelnen Schritte gut und ausreichend dokumentiert werden. * Inszenieren Sie Ihren Prototypen und machen Fotos, wie dessen Gebrauch geplant ist. Stellen Sie auch die Arbeitssituationen Ihrer Gruppe. Achten Sie darauf, dass alle entstehenden Fotografien eine gleiche Gestaltungssprache verwenden (gleichmäßige Helligkeit, Farbtöne, etc.) ==== Schritt 3 ==== * Erstellen Sie einen **Money-Shot** Ihrer Idee. In dieser einen Visualisierung wird Ihr Produkt bestmöglich dargestellt. Sie sollen zeigen, wie Ihr Produkt eingesetzt wird. Sie können hier frei entscheiden, wie Sie vorgehen wollen und in welcher Form Ihre 2D, 3D oder 4D Visualisierungen bearbeitet wird. Sie haben die Wahl! ==== Schritt 4 ==== * Überlegen Sie sich einen **Namen** für Ihr Audio-Objekt. Verwenden Sie dafür eine //morphologische Matrix//. Unteres Bild (//Abb. Prinzip der morphologischen Matrix//) ist dabei als __modellhaft__ zu verstehen. So könnten Sie beispielsweise vier verschiedene Worte (A,B,C,D) mit vier verschiedenen Einsatzbereichen (1,2,3,4) kreuzen, oder alternativ dazu auch etwa vier verschiedene fiktive Namen (A,B,C,D) mit vier verschiedenen englischen Worten (1,2,3,4), um zu neuen Ansätzen zu gelangen. Sie sehen also, dass es hier beliebig viele verschiedene Möglichkeiten gibt Ansätze und Varianten mit diesem Prinzip zu generieren. Es liegt an Ihnen sich die entsprechenden Parameter zu überlegen, die Sie verwenden wollen und anhand derer Sie Ihre Ansätze ableiten. Schauen Sie sich ebenfalls folgende [[https://pin.it/1CuVJMI|Beispiele bei Pinterest]] an. Wählen Sie aus den erstellten Ansätzen die drei Varianten aus, die Ihnen am besten gefallen, bzw. Ihres Erachtens am meisten potential haben weiter entwickelt zu werden. Heben Sie diese visuell in Ihrer Matrix hervor. In der unteren Abbildung sind dies beispielhaft die Ansätze **1A**, **3C** und **2D**. \\ \\ {{:ba_design_basics:prinzip_morphologische_matrix.jpg?direct&200|}} \\ //Abb. Prinzip der morphologischen Matrix//. \\ \\ * Erstellen Sie ein **Logo** für Ihren mp3-Player. Das Logo muss eine Wort- und Bildmarke enthalten.((Corporate Identity, Dieter Herbst, Cornelsen Verlag, Berlin, 1999)). Für die Wortmarke verwenden Sie den Namen, der Ihnen am besten gefallen hat. ==== Präsentation==== * Erstellen Sie eine **Präsentation** auf Basis der [[stuff:presentation-template|Kurs Vorlage]]. Achten Sie auf die [[praesentationstipps|Präsentationstipps]], speziell die Regel »1 Slide/Minute«. Betten Sie Ihre erstellten Bildinhalte ein. Die Bilder sollten möglichst groß auf den Slides zu sehen sein. * Erstellen Sie einen kurzen und prägnanten Text, der Ihr Projekt beschreibt (**Konzeptbeschreibung**), und fertigen Sie weitere **kurze Texte** an, die alle wichtigen Schritte beschreiben, die in Ihren Bildern wieder gegeben werden. Erstellen Sie entsprechende Bildunterschriften für Ihre Fotos. * Diese Präsentation wird in der Fachprüfung von den Gruppen vorgestellt. Beachten Sie, dass pro Person in jeder Gruppe __7 Minuten__ Zeit zu Verfügung stehen. (Beispiel Zweier-Gruppe: 2 Personen = 14 Minuten, Beispiel Dreier Gruppe: 3 Personen = 21 Minuten). Teilen Sie sich die Präsentationsinhalte so auf, dass jeder Teilnehmer 10 Minuten Sprechzeit hat. Üben Sie Ihre Präsentation gut ein. Nach Ablauf der Zeit wird die Präsentation beendet. Überziehen ist nicht erlaubt. Am Ende der Präsentation gibt es pro Gruppe ±10 Minuten Zeit, in der die Fachprüfer Fragen stellen und diese von den Studierenden beantwortet werden. ==== Dokumentation ==== - Verschaffen Sie sich einen Überblick zu [[https://learn.getgrav.org/16/basics/what-is-grav|GRAV]] - Zur Erstellung von Text und Bild Inhalten damit diese auf der [[https://mpdrei.ct-lab.info|mp.drei Kurs Webseite]] angezeigt werden können: - Alle **Textinhalte** (Namen der teilnehmenden StudentInnen der Gruppe, Text zu Recherche, Konzeptentwicklung, etc.) müssen in eine einzige Textdatei kopiert werden. Dafür wird keine //Word-Datei// benutzt, sondern eine sogenannte [[https://de.wikipedia.org/wiki/Markdown|Markdown-Datei]]. //Markdown// ist eine vereinfachte Auszeichnungssprache dessen Ziel es ist einen möglichst lesbaren Code zu erstellen. Viele der Auszeichnungselemente, die verwendet werden, kennt man etwa von //Plain Text// Dateien oder //E-Mails//. Eine Markdown-Konvertierungssoftware – in unserem Fall GRAV – wandelt unseren Text, der mit entsprechender Syntax editiert werden kann, in XHTML um, damit dieser von einem Webbrowser dargestellt werden kann. Gehen Sie wie folgt vor: * Laden Sie das //Grav Template// (//default.de.md//) [[http://hardmood.info/download/GRAV_template.zip|hier]] herunter. Der Inhalt dieser Datei sieht [[radiogaga_grav_template|wie folgt]] aus. * Die heruntergeladene Textdatei kann mit einem [[https://github.com/collections/text-editors|Texteditor]] geöffnet und bearbeitet werden. Fügen Sie alle Ihre Textinhalte durch //copy & paste// ein. Halten Sie sich dabei an die vorgegebene //Markdown Syntax// ([[https://learn.getgrav.org/16/content/markdown|siehe Tutorial]]). Achten Sie speziell auf die Dateinamen Ihrer JPGs und dass diese richtig verlinkt werden. * Speichern Sie Ihre Datei als //default.de.md// - Es dürfen nur **Bilder** im __JPG Dateiformat__ verwendet werden. Diese müssen __eine Größe von 1400 x 800 px (72 dpi)__ haben und müssen für das Web optimiert sein. Gehen Sie dafür wie folgt vor: * Benutzen Sie beispielsweise in Photoshop die "Safe for Web"-Option ("Für Web Speichern"). Achten Sie dabei auf die unten hervorgehobenen Punkte 1 (Bildformat: JPG), 2 (Bildqualität: 80%) und 3 (Bildgröße: 1400x800 px). Achten Sie darauf, das die Dateigröße, wie bei Punkt 4 hervorgehoben, 800k (Kilobyte) nicht überschreitet. \\ {{:ba:save_for_web_1400x800px.jpg?direct&960|}} * Speichern Sie dann die Bilddatei. Benutzen Sie im Namen __keine__ Majuskeln (nur Kleinbuchstaben), __keine__ Leerzeichen (stattdessen einen Unterstrich, wie im Beispiel: test_bild_1400x800px.jpg), __keine__ Sonderzeichen und __keine__ Umlaute! * Kontrollieren Sie, dass die verwendeten Bildnamen auch richtig in Ihrer *.md-Datei verwendet werden. - Inhaltliche Struktur: - Konzeptdesign Phase (s.o. [[ba:sose24:kurzzeitprojekt#schritt_1|Teilaufgabe 1]]) - Schematisches Design/Design Entwicklung (s.o. [[ba:sose24:kurzzeitprojekt#schritt_2|Teilaufgabe 2]]) - Ausformulierung/Entwicklung und Gestaltung von Details (s.o. [[ba:sose24:kurzzeitprojekt#schritt_3|Teilaufgabe 3]], [[ba:sose24:kurzzeitprojekt#schritt_4|Teilaufgabe 4]]) - Wenn die Textdatei sowie alle Bilder final und richtig benannt abgespeichert sind, werden diese als*.zip-datei (Benennung der Datei: //nachname_nachname.zip//). Prof. Beck wird diese dann via FTP in ein entsprechendes Verzeichnis auf einem Webserver laden. Ihre Dokumentation zur Vertiefungsübung sollte dann automatisch auf der **Webseite** https://mpdrei.ct-lab.info erscheinen.