Copyright © 1998-1999 Helmuth Pladek, bingo e.V.

Webdesign, Website-Gestaltung - special

Referent: Helmuth Pladek, Stv. Webmaster bingo e.V.

© 1998-1999 HePla@bingo-ev.de 2

Inhalt (Vorschlag)

• was HTML ist und wozu HTML geeignet ist - und wozu HTML alles herhalten muß ;c)

• Wie erstelle ich eine Website benutzerfreundlich?

• Die Grafik kam vor dem Modem - Möglichkeiten zur Bildoptimierung

• Einbindung von Grafiken, Sound, Video, JAVA-Applets, JavaScript, VBScript u.a. - Wirkungen beim Betrachter - müssen sie sein?

• Unterschiedliche Browser - unterschiedliche HTML-Befehle - müssen sie sein?

• Suchen und Finden oder Nichtgefundenwerdenwollen - Die Frame-Gefahr

• In den Farbtopf gefallen - farbliche Gestaltung der Website

• Corporate Identity - nicht nur etwas für Corporates

• Lost in Hypertext - Benutzerführung - Benutzerverführung

• Versionsverwaltung - Tools zu Website-Verwaltung

• allg. Aussprache

• Beantwortung von evtl. Einzel-Fragen/Problemen im anschließenden (persönl.) Gespräch möglich.

© 1998-1999 HePla@bingo-ev.de 3

Webdesign, Website-Gestaltung - special

Design

Multimedia-Design

‚Informationsarchitektur‘ einer Web-Site

Webdesign

© 1998-1999 HePla@bingo-ev.de 4

Web-Design

(der Oberbegriff für das Publizieren im WWW)

umfaßt

• Content-Design,

• Navigations-Design,

• Hypertext-Design und

• Applikations-Design.

• Layout-Design einerseits, aber auch

© 1998-1999 HePla@bingo-ev.de 5

Vorüberlegungen

• Umberto Eco „Jenseits gewisser Schwellen ist ein Zuviel an Information gleichbedeutend mit gar keiner Information.“

© 1998-1999 HePla@bingo-ev.de 6

Vorüberlegungen

• Clifford Stoll:

(in. „Die Wüste Internet“, Frankfurt 1996)

„Niemand, der wirklich hochwertige Informationen hat, wird diese auf Dauer umsonst anbieten. ... Der Infomüll landet im Internet.“

© Originalausgabe: "Silicon Snake Oil. Second Thoughts on the Information Highway", Verlag Doubleday, New York u.a., 1995© deutsche Ausgabe:"Die Wüste Internet - Geisterfahrten auf der Datenautobahn“, S. Fischer Verlag GmbH, Frankfurt am Main, 1996

http://www.telemarkt.de/igsbb/internet/pbuecher/gaeste/stollvl.htm

http://userpage.fu-berlin.de/~blomberg/

© 1998-1999 HePla@bingo-ev.de 7

Vorbemerkungen:

Für effektive Online-Präsentationen sind die folgenden vier bewährten Schritte nötig:

Planen

Befolgen Sie diese Richtlinien, und Sie und Ihre

Website werden einen guten Eindruck bei Ihrem

Publikum hinterlassen.

VorbereitenTesten

und Kontrollieren.

© 1998-1999 HePla@bingo-ev.de 8

Planen

• Beschreiben Sie Ihr Zielpublikum:

•Bedürfnisse

•Ziele

•Wissensstand

•Erfahrung

•Wünsche

•...

© 1998-1999 HePla@bingo-ev.de 9

Planen

• Definieren Sie den Zweck Ihrer Site und das, was Sie beim Publikum erreichen wollen:

• Beschreiben Sie Ihr Zielpublikum

•Informieren•Überzeugen•Zum Handeln motivieren•Unterrichten / Ausbilden•Verkaufen•Funpage (Spaß)•...

© 1998-1999 HePla@bingo-ev.de 10

Vorbereiten

• Messen Sie Ihren Aussagen Wert bei.

• Stellen Sie sich die Reaktion Ihres Publikums vor.

• Überlegen Sie– warum Sie diese Site unterhalten

– warum Sie an dem Thema interessiert sind

– warum Sie sich Ihrem Publikum mitteilen möchten.

• Beachten Sie auch, was der Kunde will: http://www.webagency.de/infopool/internetwissen/ak981120.htm

© 1998-1999 HePla@bingo-ev.de 11

Vorbereiten (Fortsetzung)

• Bereiten Sie einen Einstieg (Homepage) vor, die Aufmerksamkeit erregt.

• Aber erstellen Sie keine Homepage um ihrer selbst willen (ohne Nutzen, „nur schön“).

© 1998-1999 HePla@bingo-ev.de 12

Vorbereiten (Fortsetzung)

• Illustrieren und unterstützen Sie Hauptargumente mit Begründungen und Anschauungsmaterialien.

– Statistiken

– Analogien

– Demonstrationen

– Atteste

– Ereignisse

– Beweisstücke

© 1998-1999 HePla@bingo-ev.de 13

Vorbereiten (Fortsetzung)

• Bereiten Sie ein einprägsames Design vor

• Tragen Sie Ihre Ideen anschaulich vor.

• Fordern Sie das Publikum zu etwas heraus.

• Machen Sie eine motivierende Aussage.

• Wiederholen Sie den Hauptnutzen.

• Machen Sie eine überzeugende Zusammenfassung.

© 1998-1999 HePla@bingo-ev.de 14

Testen

Wir haben festgestellt,daß drei Dinge von fundamentaler Bedeutung für erfolgreiche Online-Präsentationen sind:

• Testen

• Testen

• Testen

© 1998-1999 HePla@bingo-ev.de 15

Testen (Fortsetzung)

Überprüfen Sie Ihr Anschauungsmaterial auf– Klarheit– Bedeutung– optische Wirkung– Sichtbarkeit– Qualität– Einprägsamkeit

© 1998-1999 HePla@bingo-ev.de 16

Präsentieren

• Verlassen Sie sich auf die Grundregeln:– Beherrschen Sie Ihr Thema.– Gehen Sie Ihre Präsentation positiv an.– Vermitteln Sie dem Publikum den Wert

Ihrer Aussage. – Machen Sie einen positiven ersten

Eindruck– Achten Sie auf ein gepflegtes Äußeres.

Verantwortung für den Inhalt tragen SIE!

•Content-Design

© 1998-1999 HePla@bingo-ev.de 17

Präsentieren (Fortsetzung)

• Stellen Sie Kontakt zum Publikum her:

• Applikations-Design.

• Beteiligen Sie Ihr Publikum.

• Holen Sie sich Feedback / Ratschläge

• Bieten Sie ein Gästebuch an

• Ein Email-Link auf JEDE Seite!

© 1998-1999 HePla@bingo-ev.de 18

Präsentieren (Fortsetzung)

• Behalten Sie die Aufmerksamkeit des Surfers

• Navigations-Design

• Zeigen Sie Begeisterung für Ihr Thema

• Verwenden Sie lebendige Wörter

• Drücken Sie sich klar und bündig aus

• Erzählen Sie keine langatmigen Geschichten

• Achten Sie auf die

Fortbewegung des Benutzers -

richtige

- führen Sie ihn...

© 1998-1999 HePla@bingo-ev.de 19

Präsentieren (Fortsetzung)

• Streben Sie nach ständiger Verbesserung:

– Messen Sie den Erfolg Ihrer Site

– Identifizieren Sie die Stärken unddie verbesserungsbedürftigen Gebiete

– Entscheiden Sie, wie Ihre Website verbessert werden kann

• Behalten Sie die Aufmerksamkeit des Surfers

http://www.franken.de/users/tychen/faq/htmlfaq-8.html

Webserverstatistik: http://www.bingo.baynet.de/statistik/www1999/frames.html

Webcounter

© 1998-1999 HePla@bingo-ev.de 20

Was HTML ist und wozu HTML geeignet ist

- und wozu HTML alles herhalten muß ;c)

•selfhtml/tbae.htm

•selfhtml/tcac.htm

•selfhtml/tcaf.htm#a2

© 1998-1999 HePla@bingo-ev.de 21

Wie erstelle ich eine Website benutzerfreundlich?

•selfhtml/tbd.htm

•selfhtml/tcai.htm

•selfhtml/tbda.htm

© 1998-1999 HePla@bingo-ev.de 22

WIE erstelle ich eine Website denn nun benutzerfreundlich?•Ladezeit der Seite kurz halten (5 Sekunden-Regel)

•Aktuelle Informationen auf der Einstiegsseite

•Inhaltsverzeichnis und Verständlichkeit der -Übersicht

•Zurechtfinden („Navigation“) innerhalb der Website

•Informationsangebot/-gehalt/-wert und „Mehr-Wert“ (etwas weniger der Umfang des Informationsangebots)

•Design

• u.v.m. (vgl. auch Anforderungen an eine Website)

© 1998-1999 HePla@bingo-ev.de 23

Die Grafik kam vor dem Modem -

Möglichkeiten zur Bildoptimierung

Die Bilderstellung und -bearbeitung

muß ich als bekannt voraussetzen!

•http://www.franken.de/users/tychen/faq/htmlfaq-9.html

© 1998-1999 HePla@bingo-ev.de 24

Einbindung von Grafiken, Sound, Video, JAVA-Applets, JavaScript, VBScript u.a.

- Wirkungen beim Betrachter -

müssen sie sein?

Nein

© 1998-1999 HePla@bingo-ev.de 25

Unterschiedliche Browser - unterschiedliche HTML-Befehle

- müssen sie sein?

Nein

Trotz HTML 4.0 - bleiben Sie bei HTML 3.2

© 1998-1999 HePla@bingo-ev.de 26

Suchen und Finden oder Nichtgefundenwerdenwollen -

Die Frame-Gefahr

... und was Sie dagegen tun können... (benötigt JavaScript)

http://www.bingo.baynet.de/schulung/html/demo/frames.htm

© 1998-1999 HePla@bingo-ev.de 27

In den Farbtopf gefallen - farbliche Gestaltung der Website

Meistens Geschmackssache... (oder Corporate Design)

© 1998-1999 HePla@bingo-ev.de 28

Corporate Identity - nicht nur etwas für Corporates

Corporate Identity:

Darstellung nach innen

Corporate Design:

Darstellung nach außen

Überprüfen Sie das bisherige Corporate Designauf website-fähigkeit, bevor Sie eine Online-Präsentation planen...

© 1998-1999 HePla@bingo-ev.de 29

Lost in Hypertext - Benutzerführung - Benutzerverführung

•http://www.franken.de/users/tychen/faq/htmlfaq.html

© 1998-1999 HePla@bingo-ev.de 30

Versionsverwaltung - Tools zu Website-Verwaltung

Microsoft Frontpage 98 http://www.eu.microsoft.com/germany/office/

frontpage/

NetObjects Fusion 3.0 http://www.netobjects.com

Adobe PageMill 2.0 (für Windows o. Mac) http://www.adobe.com/prodindex/pagemill/main.html

HTML-PowerTools (jetzt u.a.: SiteBoss) http://www.opposite.com http://www.siteboss.com

u.v.a.m.selfhtml/tj.htm

SchemaTexthttp://www.schema.de

HomeSitehttp://www.homesite-now.com

selfhtml/tbcc.htmLinkbot 3.0

© 1998-1999 HePla@bingo-ev.de 31

Vielen Dank für Ihr Interesse!-

allg. Aussprache -

Beantwortung von evtl. Einzel-Fragen/Problemen

Stefan Münz: SelfHTML, Version 7.0 vom 27.04.1998

http://www.bingo.baynet.de/internet/selfhtml/

http://www.teamone.de/selfhtml/