Storyboard für die Website des Immobilien-Dienstleisters

Transkript

1 Storyboard für die Website des Immobilien-Dienstleisters Visualisierung & Mediendesign Eingereicht bei Jörn Bülow + Thomas Walz Erstellt von Jochen Birk Matrikel-Nr.: Stefan Gabler Matrikel-Nr.: im Sommersemester 2000

2 Grundsätzliches Konzept der Website Das Design ist auf die Auflösung von 600 x 800 dpi optimiert Die Website hat auf den Browsern Netscape + Internet Explorer (jeweils ab Version 4.0) dasselbe Erscheinungsbild Auffinden durch Suchmaschinen Einstiegsseite Bei der Einstiegsseite handelt es sich um eine bewusst schlicht und transparent gehaltene Seite ohne Frames. Seiten ohne Frames erleichtern das Auffinden der Website durch die Robots der Suchmaschinen. Abbildung 1: Einstiegsseite (index.htm) Seite 2 / 11 Datum 8. Juni 2000 Uhrzeit 15:36 Storyboard-GL-Conseils

3 Von der Einstiegsseite (Homepage) gelangt man durch einen Klick auf den Begrüßungstext in der jeweiligen Sprache (Französisch, Englisch oder Deutsch) zur eigentlichen Hauptseite der jeweiligen Sektion. Diese Seiten sind als Frameset angelegt. Frameset Das Frameset wurde bewusst so angelegt, dass sich die Ladezeiten minimieren. Die nachfolgende Skizze verdeutlicht die Aufteilung der Seiten in die einzelnen Frames. Logo der Region Navigationsbereich Hauptframe Landesflagge Marginaltext Abbildung 2: Skizze des Framesets (index_d.htm) Seite 3 / 11 Datum 8. Juni 2000 Uhrzeit 15:36 Storyboard-GL-Conseils

4 Screen-Design Basierend auf dem oben genannten Frameset wurde das ERSTE Layout in Adobe Photoshop entworfen, das später noch verfeinert wird. Abbildung 3: Layout in Photoshop (eingebaut in ein Browser-Fenster) Hierbei ging es unter anderem um die Definition der Farben für die einzelnen Frames. Die Farben ziehen sich durch das gesamte Konzept der Website. Sie stellen somit als Corporate Design einen Teil der Corporate Identity des Unternehmens dar. Navigationsleiste Haupt- und Marginaltext Hintergrund Text Hintergrund Text Rot Grün Blau Abbildung 4: Farbwerte (RGB-Werte) der Website Seite 4 / 11 Datum 8. Juni 2000 Uhrzeit 15:36 Storyboard-GL-Conseils

5 Es werden also nur 2 unterschiedliche Farben verwendet. Damit erreicht man ein ruhiges und durch die Auswahl der Farben zugleich gediegenes, auf die Zielgruppe abgestimmtes Erscheinungsbild. Ebenso wie für die Farbwerte wurde auch für die Schrift, die in der Website verwendet wird, eine einheitliche Formatierung gewählt. Die Schriftgröße im Navigations- und Hauptframe beträgt 10 pt, die Marginaltexte sollen mit 8 pt angezeigt werden. Für jedes Textelement auf der Website wurden die Schriftarten Arial, Helvetica und Times definiert. Dies hat den Vorteil, dass der Text auf jedem Computer-System gleich dargestellt wird, da mindestens eine der drei Schriftarten auf Mac OS, Windows oder Linux erkannt wird. Seite 5 / 11 Datum 8. Juni 2000 Uhrzeit 15:36 Storyboard-GL-Conseils

6 Signet Da das Unternehmen GL-Conseils noch über kein Signet verfügte, wurden dem Kunden einige Designvorschläge unterbreitet. Das Ergebnis zeigen die nachfolgenden Signets: Abbildung 5: Signet Beige Abbildung 6: Signet Blau Die beiden Signets werden je nach Hintergrundfarbe des Frames in die Website integriert. Später soll das Signet auf der Geschäftsausstattung, wie bsp. Visitenkarten, Brief-, Rechnungs- und Faxpapier etc. verwendet werden. Seite 6 / 11 Datum 8. Juni 2000 Uhrzeit 15:36 Storyboard-GL-Conseils

7 Navigation innerhalb der Website Nachdem der Benutzer auf der Einstiegsseite auf den Begrüßungstext in der gewünschten Sprache geklickt hat, gelangt er zur Hauptseite der jeweiligen Sektion. Abbildung 7: Hauptseite der Deutschen Sektion (index_d.htm) Hier besteht die Möglichkeit, im Navigationsframe die Bereiche Geschäftsbereiche, Leistungsprofil, Anfrage Kontakt und Sitemap auszuwählen. Seite 7 / 11 Datum 8. Juni 2000 Uhrzeit 15:36 Storyboard-GL-Conseils

8 Über die Auswahl Home besteht als Notausgang jederzeit die Möglichkeit zur Einstiegsseite mit der Sprachauswahl zurückzugelangen. Aktion beim Klicken auf Geschäftsbereiche Im Hauptframe werden die Verkaufsgebiete West-Schweiz, Süd-Frankreich und Monaco vorgestellt. Im Einzelnen sollen Kultur-, Einkaufs- und Freizeitmöglichkeiten (Sommer + Winter), sowie Restaurants und Sehenswürdigkeiten in den Gebieten und zusätzlich wenn auch nur unterschwellig - die Steuervorteile aufgezeigt werden. Detailinformationen zu den oben genannten Punkten werden durch Klick auf Verknüpfungen im Marginaltext in dem Hauptframe angezeigt. Für jeden Geschäftsbereich (z.b. Schweiz) wird im rechten unteren Frame die Landesflagge angezeigt. Des weiteren wird im rechten oberen Frame das Logo der jeweiligen Region (z.b. Wallis) zu sehen sein. Der Marginaltext wechselt entsprechend dem Angebot der jeweiligen Geschäftsbereiche. Aktion beim Klicken auf Verknüpfungen im Marginaltext Klickt man nun auf eine Verknüpfung im Marginaltext, so werden die Zusatzinformationen zum jeweiligen Geschäftsbereich im Hauptframe angezeigt. Aktion beim Klicken auf Leistungsprofil Erläuterung der Dienstleistungen, die den Kunden angeboten werden. (Anzeige im Hauptframe) Suche nach Immobilien, die den individuellen Wünschen der Kunden entsprechen. Vermittlung von Hypotheken und Finanzierungsmodellen Betreuung in notariellen bzw. juristischen Fragen sowie bei Verwaltungsaufgaben. Seite 8 / 11 Datum 8. Juni 2000 Uhrzeit 15:36 Storyboard-GL-Conseils

9 Aktion beim Klicken auf Anfrage Im Hauptframe wird ein standardisiertes Formular geöffnet, durch das der potentielle Kunde durch Angabe seiner Kontaktdaten sein grundsätzliches Interesse signalisieren kann. Diese Daten des Formulars werden via an das Unternehmen verschickt. GL-Conseils wird dann mit dem Absender in Verbindung treten. Aktion beim Klicken auf Kontakt Im Hauptframe werden die Kontaktdaten von GL-Conseils angezeigt. Hier hat auch der Kunde die Möglichkeit, mittels seine individuelle Anfragen und Wünsche an das Unternehmen zu richten. Abbildung 8: Kontaktdaten des Unternehmens (kontakt_d.htm) Seite 9 / 11 Datum 8. Juni 2000 Uhrzeit 15:36 Storyboard-GL-Conseils

10 HTML-Quelltext In den Quelltext wurden im Head-Bereich die erstellende Agentur (marketing4media) und die Kontaktdaten des Kunden hinterlegt. Auf der Einstiegsseite (index.htm) wurden zusätzlich Meta-Tags, die - getrennt nach Sektionen - Stichworte zu allen Geschäftsbereichen + Leistungen und eine allgemeine Beschreibung der Website eingefügt, damit die diese durch Suchmaschinen einfacher gefunden wird. Sonstiges Die Website wird in enger Kooperation mit dem Kunden erstellt, da er sein Tätigkeitsfeld genau kennt und uns daher die nötigen Informationen liefern kann und muss. Um sich ein genaueres Bild von dem Geschäftsumfeld zu verschaffen, wurde der Kunde in Verbier besucht. Die Website kann bis zur Publikation unter betrachtet werden. Kritik und Anregungen bitte an webmaster@gl-conseils.de Seite 10 / 11 Datum 8. Juni 2000 Uhrzeit 15:36 Storyboard-GL-Conseils

11 Platz für Ihre Notizen Seite 11 / 11 Datum 8. Juni 2000 Uhrzeit 15:36 Storyboard-GL-Conseils