Konzeption und Design einer Webseite

Aufgabenstellung

Sie erstellen für die Konzeption in Form einer Dokumentation zur Gestaltung, Arbeitsplanung und funkionstüchtige Webseite für den Fotografen Guy Goon Lafleur gemäss Briefing.


Dokumentation zur Gestaltung

Planen und erläutern Sie Ihre Überlegungen zur Gestaltung des Internetauftritts hinsichtlich in einer Konzeption mit maximal 2 DIN A4 Seite für. Ihre gestalterischen dargestellten Entwürfe können jede Form haben (Skribble, Photoshop), sollten aber Charakter eines Entwurfs haben. Also KEIN Screenshot der fertigen Webseite.

  • Seitenaufbau (Gestaltungsraster)
  • Farbe (Primär- und Sekundärfarben)
  • Typografie (Schriftwahl, Raumaufteilung, Lesbarkeit)
  • Bilder (Bildsprache, Anordnung, Bildausschnitt, Modifikation)
Arbeitsplanung
  • Erstellen Sie eine Arbeitsplanung zur Herstellung des Internetauftritts in tabellarischer Form.
  • Erstellen Sie eine Textdatei mit den Angaben zur verwendeten Hard- und Software, Schriften, Skripte und dem Browser in dem die Anwendung optimal läuft
Musterentwurf des Internetauftritts
  • Funktionstüchtige Webseite mit den geforderten Inhalten
  • Ausführlich kommentierter Quellcode


Download der Bilder und Logos

Guy-Goon-Lafleur-Logo-Bilder (17.1 MiB)





Briefing

Wir haben eine interessante Chance auf einen langfristigen Auftrag. Ich habe erfahren, dass der bekannte Fotograf Guy Goon Lafleur seine Agentur aufgrund unzuverlässiger Planungen und Umsetzungen wechseln möchte. Er kombiniert die Auswahl der neuen Agentur mit dem Redesign seiner Seite.

Die Webseite soll komplett in CSS und HTML und ggf. Javascript sein: Bitte keine Buttons als Grafik. Er wünscht in erster Linie benutzerfreundliches und responsives Design. Der Kunde möchte nur eingeschränkt Skeuomorphismus, eher zeitloses Flat-Design.

Die Webseite soll folgende Bereiche inklusive Farbleitsystem haben: „„

  • Overview (umsetzen)
  • Mens Fashion (umsetzen)
  • Women Fashion (umsetzen)
  • Editorial
  • People/Livestyle
  • People/Portrait

Funktionstüchtig soll Overview, Mens Fashion und Women Fashion sein. Es wird mit Blindtext gearbeitet. Ein ansprechend gestaltetes Impressum mit Mustertext ist unbedingt anzulegen.

Die Zielgruppe sind adaptive, pragmatische Entscheider und Performer. Eine Zielgruppenbeschreibung muss nicht in der Dokumentation zur Gestaltung vorhanden sein. Allerdings wird im Rahmen der Argumentation der gewählten Inhalte ein Bezug zu der Zielgruppe erwartet.

Responsives Design
  • Die Seite solll optimiert sein für Viewport 400px, 1024px und 1500px
  • Bilder sollen in 3 Auflösungen bereit liegen (400px, 1024px, 1500px)
  • Keine unnötig aufgeblasene Framework oder CSS Komponenten

Fakten und Ressourcen

CODEBeschreibung
NiveauFortgeschritten


PackLogo und Bilder für diese Lernsituation. Die Bilder können frei veröffentlicht werden.

Guy-Goon-Lafleur-Logo-Bilder (17.1 MiB)



Freie kommerzielle Nutzung / Kein Bildnachweis nötig
CC0 Public Domain

Editorial
757731, 757731, 190056, 209466, 8383, 644323, 679068, 791893

Livestyle
591973, 846094, 358479, 863411, 863413, 865295, 869222, 864348

Men Fashion
952834, 593358, 597179, 909078, 920083, 952835, 819363

People Portraits
635389, 642055, 804035, 825866, 838512

Woman Fashion
15799, 204274, 336658, 487094,
597173, 336672

Logo Guy Goon Lafleur.pdf, Seeliger"
SkriptEs gibt im Skript eine umfangreiche Checkliste für die gestalterische Konzeption, Hinweise zum Impressum und eine Mustervorlage für einen Kostenvoranschlag.

Empfohlene Software

SoftwareBedeutung
Sublime Text 3Kostenloser Editor für alle Betriebssysteme mit vielen praktischen Funktionen. Es gibt noch eine ganze Reihe anderer Editoren die auch zu Empfehlen sind.
FirebugBei der Arbeit mit Quellcode ist es sehr hilfreich zu prüfen was im Browser ankommt. Firebug zeigt den CODE für HTML, CSS und Javascript und bietet auch die Möglichkeit diesen temporär in der Vorschau zu ändern. Firebug ist eine kostenlose Erweiterung für den Firefox Browser. Es gibt Firebug auch für Chrome. Für Safari sind vergleichbare Webentwickler-Tools eingebaut.
Adobe Photoshop

Gimp
Wer Adobe Photoshop zur Verfügung hat, der benutzt natürlich den weltweiten Branchen-Standard für Bildbearbeitung. Lösbar sind die meisten einfachen Anforderungen allerdings auch mit dem kostenlosen Gimp. In der Arnold-Bode-Schule arbeiten wir aus professionellen Gründen mit Adobe und haben das auf jedem Computer.

Schreibe einen Kommentar

Deine E-Mail Adresse wird später nicht angezeigt.

clear formSubmit