Finish Menustructure section, add Mockups

Storyboard/src/Storyboard.tex

@@ -120,7 +120,17 @@
 
     %Kapitel 3.1 - Menüstruktur
     \subsection{Menüstruktur}
-    Als Menü-Navigation habe ich mich für eine Navigation am oberen Teil der Webseite entschieden. %TODO text
+    Als Menü-Navigation habe ich mich für eine Navigation am oberen Teil der Webseite entschieden. Dies ist
+    auf den Mockups sehr gut ersichtlich. Darin ist das Logo und natürlich die Navigation in die verschiedenen
+    Unterseiten enthalten.\\
+    Auf Mobile habe ich mich dazu entschieden, das Menü mittels drei Linien immer im Header mit dem Logo
+    eingeblendet zu haben. Tippt man auf die drei Linien öffnet sich ein Popup, welches dann das Menü anzeigt.
+
+    \begin{figure}[h]
+        \centering
+        \includegraphics[height=11cm]{media/menu_mobile}
+        \caption{Menü auf einem Mobilgerät}
+    \end{figure}
 
     %Kapitel 3.2 - Farbwahl
     \subsection{Farbwahl}
@@ -139,7 +149,6 @@
         \caption{Verschiedene Farbpaletten von Colorhunt}
     \end{figure}
 
-    \pagebreak
     Als ich die Paletten Timo gezeigt habe, un seine Meinung darüber einzuholen hat er alle nicht wirklich passend
     gefunden. Er hat mir noch ein weiteres Tool gezeigt, welche für Farbpaletten genutzt werden kann. Zudem hat er
     mir direkt eine Farbpalette gezeigt, welche ich für mein Thema verwenden kann. Diese hat auch mich mehr
@@ -200,12 +209,32 @@
 
     %Kapitel 3.3.2 - Design der Mockups
     \subsubsection{Design der Mockups}
-    %TODO text
+    Das Design der Mockups war recht einfach. Ich habe zwischendurch Michael gefragt wie das Mockup aussieht. Er kennt
+    sich bereits aus dem Betrieb super mit UI's aus, ich habe da leider wenig Erfahrung.
+    \\\\Animationen habe ich im Mockup nicht dargestellt. Auf der Beispiel-Page sollen später Beispiele für Steine
+    erscheinen. Dabei möchte ich animieren wie die Steine in der Theorie gespielt werden müssten.
+    Das Video werde ich auf der ``How to Play'' Seite einbetten.
 
-    %Kapitel 3.3.3 - Mockups
-    \subsubsection{Mockups}
-    - Bilder der Mockups einfügen
-    %TODO text
+    \pagebreak
+
+    \begin{landscape}
+        %Kapitel 3.3.3 - Mockups
+        \subsubsection{Mockups}
+
+        Alle Mockups und ein Prototyp kann mittels dem folgenden xD Link abgerufen werden: \href{https://xd.adobe.com/view/f4f23c9c-e25a-4ecb-8a2d-38adebf22483-a1a1/?fullscreen}{Adobe Xd Prototyp}
+
+        \noindent
+        \begin{minipage}{1.1\textwidth}
+            \includegraphics[width=\linewidth]{media/home}
+            \captionof{figure}{Startseite}
+        \end{minipage}
+        \begin{minipage}[c]{0.4\textwidth}
+            \raggedleft
+            \includegraphics[width=\linewidth]{media/mobile_home}
+            \captionof{figure}{Mobile Startseite}
+        \end{minipage}
+    \end{landscape}
+    \pagebreak
 
     %Kapitel 4 - Bildbearbeitung
     \section{Bildbearbeitung}
@@ -356,17 +385,15 @@
 
     %Kapitel 6 - Technisches Konzept E-Portfolio
     \section{Technisches Konzept E-Portfolio}
-    Da ich mich nicht sehr gut mit Webentwicklung auskenne möchte ich hier gar nicht zu sehr ins Detail gehen.
+    Da ich mich nicht sehr gut mit Webentwicklung auskenne, möchte ich hier gar nicht zu sehr ins Detail gehen.
     Mein E-Portfolio werde ich aus ganz normalem HTML und CSS zusammenbauen. Evtl. wird JavaScript zum Einsatz kommen,
     darauf möchte ich mich aber noch nicht festlegen.
     Für die Bilder möchte ich ein Tool nutzen, welches uns Oliver im Unterricht gezeigt hat. Das Tool heisst Cloudinary,
     und ist dazu da, Bilder automatisch für das Endgerät zu optimieren und optimal zu skalieren. Damit spare ich mir
     nicht nur Speicherplatz auf dem Webserver, sondern habe auch automatisch immer das optimal-grosse Bild.
-    %TODO noch erweitern?
 
     %Kapitel 7 - Reflexion
     \section{Reflexion}
-    %TODO text
 
     %Kapitel 7.1 - Bildbearbeitung
     \subsection{Bildbearbeitung}