Table of Contents

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.

Schritt 1

Recherche zum Thema, Konzeptentwicklung

Schritt 2

Prototypen Erstellung

Schritt 3

Schritt 4

Präsentation

Dokumentation

  1. Verschaffen Sie sich einen Überblick zu GRAV
  2. Zur Erstellung von Text und Bild Inhalten damit diese auf der mp.drei Kurs Webseite angezeigt werden können:
    1. 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 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) hier herunter. Der Inhalt dieser Datei sieht wie folgt aus.
      • Die heruntergeladene Textdatei kann mit einem 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 (siehe Tutorial). Achten Sie speziell auf die Dateinamen Ihrer JPGs und dass diese richtig verlinkt werden.
      • Speichern Sie Ihre Datei als default.de.md
    2. 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: 1400×800 px). Achten Sie darauf, das die Dateigröße, wie bei Punkt 4 hervorgehoben, 800k (Kilobyte) nicht überschreitet.
      • 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.
    3. Inhaltliche Struktur:
      1. Konzeptdesign Phase (s.o. Teilaufgabe 1)
      2. Schematisches Design/Design Entwicklung (s.o. Teilaufgabe 2)
      3. Ausformulierung/Entwicklung und Gestaltung von Details (s.o. Teilaufgabe 3, Teilaufgabe 4)
    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.
1)
Corporate Identity, Dieter Herbst, Cornelsen Verlag, Berlin, 1999