HerunterladenAls PDF Herunterladen
  • Eine Webseite gestalten
  • Christian Gissinger
  • 08.12.2021
  • Medientechnik/Mediendesign
  • 1. Ausbildungsjahr
Um die Lizenzinformationen zu sehen, klicken Sie bitte den gewünschten Inhalt an.
Name:
Eine Webseite gestalten
07.01.2018

Übung: Eine Web­sei­te ge­stal­ten

In den vergangenen Stunden haben Sie gelernt, wie man eine Webseite gestalten kann. Als erstes scribbelt man die Webseite. Dies ist eine schnelle, ungenaue Schmiererei ohne viel Aussagekraft. Im zweiten Schritt erstellt man ein Wireframe. Dieses zeigt die Aufteilung der Webseite in einzelne Blöcke. Als drittes wird dann eine digitale Skizze erstellt. Dies macht man in der Regel mit Photoshop - es sind aber auch alle anderen Programme möglich, die pixelbasiert arbeiten können. Dies wollen wir nun noch einmal üben. Hierfür plane ich nebenstehenden Zeitplan ein.

1. Stunde
Kick-Off, Recherche und erste Scribbles
2.
Treffen auf dem Schulgelände
08:30
Start der Busfahrt
10:00
Ankunft an der Thomaskirche
1. Stun­de
Kick-​Off
2.
Tref­fen auf dem Schul­ge­län­de
08:30
Start der Bus­fahrt
10:00
An­kunft an der Tho­mas­kir­che

Zeit­plan

1. Stun­de
Kick-​Off, Re­cher­che und erste Scribb­les
2. Stun­de
Wire­f­raming
3./4. Stun­de
Aus­ar­bei­tung der di­gi­ta­len Skiz­ze
5. Stun­de
Prä­sen­ta­ti­on von drei Er­geb­nis­sen (Scribb­le, Wire­frame und di­gi­ta­le Skiz­ze)
6./7. Stun­de
Über­ar­bei­tung der di­gi­ta­len Skiz­zen­und Be­grün­dung der Farb- und Schriftaus­wahl. Ab­ga­be des Wire­frames, der di­gi­ta­len Skiz­ze und der Be­grün­dung als pdf-​Datei auf dem Ser­ver.
8. Stun­de
Prä­sen­ta­ti­on von drei di­gi­ta­len Skiz­zen mit ent­spre­chen­den Be­grün­dun­gen
The­men­wahl

Ein Thema für eine Web­sei­te ist klar um­ris­sen und kein all­ge­mei­ner Be­griff. Da es sich hier­bei um eine Übung han­delt, wäh­len Sie bitte aus den fol­gen­den drei The­men­vor­schlä­gen aus:

  • In­fo­sei­ten des Fuß­ball­ver­eins "bun­tes Köln" der bun­te­li­ga­ko­eln.de
  • Fan­sei­te des Sän­gers "Alex­an­der Mar­kus"
  • Un­ter­neh­mens­prä­sen­ta­ti­on des Her­stel­lers von "Ori­gi­nal Ing­wer­senf" (Re­zept bei chef­koch.de)

Alle drei Web­sei­ten exis­tie­ren bis­her nicht.

1
Nach­dem Sie sich nun für eines der drei The­men ent­schie­den haben, kann es im Grun­de ge­nom­men auch schon los­ge­hen:
  • Re­cher­chie­ren Sie zum je­wei­li­gen Thema ent­spre­chen­de Texte und Bil­der!
  • No­tie­ren Sie sich, woher Sie die Texte und Bil­der haben. Sie müs­sen je­der­zeit in der Lage sein, mir die Quel­len aller ver­wen­de­ter Bil­der und Texte zu nen­nen!
  • No­tie­ren Sie, wel­che Sei­ten Sie alles er­stel­len müs­sen. Klei­ner Tipp: Da Sie ein Im­pres­sum an­ge­ben müs­sen, wird es mehr als eine Seite sein.
  • Scrib­beln Sie Ihre Idee ein­mal für ein Han­dy­dis­play und ein­mal für einen fullHD-​Monitor. Goo­geln Sie ge­ge­be­nen­falls nach ent­spre­chen­den Grö­ßen­an­ga­ben! Über­le­gen Sie sich auch, ob Sie im Hoch- oder im Quer­for­mat oder bei­des scrib­beln und über­le­gen Sie sich eine ent­spre­chen­de Be­grün­dung!
  • Nun er­stel­len Sie ein Wire­frame! Ein paar Tipps dafür fin­den Sie unter https://t3n.denewstool-​tipp-wireframes-434832/
  • Als letz­ten Schritt müs­sen Sie nun noch ihre di­gi­ta­le Skiz­ze er­stel­len!
Kick-​Off

Das Kick-​Off-Meeting ist der Start­schuss für ein Pro­jekt. Ein Pro­jekt ist dabei eine klar um­ris­se­ne Tä­tig­keit mit einem vor­ge­ge­be­nen Zeit­rah­men. Nor­ma­ler­wei­se wird nach einem Kick-​Off in Grup­pen wei­ter an einem ge­mein­sa­men Pro­jekt ge­ar­bei­tet.



Eine gute und um­fas­sen­de De­fi­ni­ti­on fin­den Sie unter https://www.in­loox.de/projektmanagement-​glossar/kick-​off-veranstaltung/

Hin­weis zur Ab­ga­be

Ihre hand­schrift­li­chen Er­geb­nis­se kön­nen Sie bei­spiels­wei­se mit Ihrem Smart­phone di­gi­ta­li­sie­ren. Zum Schluss sol­len Sie eine pdf-​Datei mit allen not­wen­di­gen Un­ter­la­gen ab­ge­ben. Ein Bei­spiel, wie so eine pdf-​Datei aus­se­hen könn­te, liegt zu ge­ge­be­ner Zeit auf dem Ser­ver.

Medientechnik/Mediendesign
Angaben zu den Urhebern und Lizenzbedingungen der einzelnen Bestandteile dieses Dokuments finden Sie unter
https://www.tutory.de/entdecken/dokument/eine-webseite-gestalten
x