methodik des web-design

Patrick Jauch

Birgit Ostertag

Methodik des Web-Design

Grundlagen für planmässiges und

zielorientiertes Web-Design mit HTML

Impressum

Patrick Jauch

Birgit Ostertag




Gestaltung:

Patrick Jauch und Birgit Ostertag

dezember und juli gmbh

www.dezemberundjuli.ch

Redaktion:

Fridolin Jakober

Druck (Book on Demand):

edubook AG, Merenschwand

www.edubook.ch

3. Auflage:

5 Exemplare

Alle Rechte, insbesondere die

Übersetzung in fremde Sprachen,

vorbehalten. Das Werk und seine

Teile sind urheberrechtlich ge-

schützt. Jede Verwertung in ande-

ren als den gesetzlich zugelasse-

nen Fällen bedarf der vorgängigen

schriftlichen Zustimmung des

Autorenteams.

© Copyright

Patrick Jauch und Birgit Ostertag

Herzlichen Dank an Markus Jung, der uns in die Welt des

methodischen Arbeitens eingeführt und von dessen Nutzen

längst überzeugt hat.

3




Inhaltsverzeichnis

Vorwort 5

Methodik versus Kreativität 8

Erhebung und Analyse 12

Das Umfeld der Website 14

Der Inhalt der Website 18

Lösungsentwurf 24

Struktur 25

Navigation 30

Orientierungssystem 38

Design 44

Lösungsausarbeitung 60

Konstruktion 62

Prototyp 66

Literaturhinweise 74

4




Web-Design

und vor allem das spätere Pro-

grammieren wird von vielen Desig-

nern als Strafaufgabe betrachtet.

Was im Layout-Programm einfach

funktioniert – Verschieben von

Elementen auf dem Bildschirm

nach Belieben –, muss beim

Web-Design Schritt für Schritt

ausprogrammiert werden. Steckt

das Web-Design einfach noch in

den Kinderschuhen? Vielleicht.

Aber oftmals fehlt es einfach an

der richtigen und disziplinierten

Vorgehensweise.

Vorwort

5







Vorwort

Die Regale in den Buchhandlungen sind voll von Büchern über Web-Design. Weshalb also ein weiteres

schreiben? Weil ein Buch fehlt, welches das Vorgehen vom ersten Briefing bis zum Prototypen folge-

richtig aus der Sicht des Praktikers beschreibt.

Web-Design ist – wie der Name bereits vermuten lässt – eine Design-Disziplin, es gelten dieselben Wer-

te aus Tradition und sozio-kulturellem Ästhetikempfinden. Jede Design-Disziplin umfasst Eigenheiten,

die sie auf ihre Art komplex machen. Printmedien-Design etwa verlangt vom Designer beste Kenntnisse

über die Tücken des Drucks und die Weiterverarbeitung. So fordert auch Web-Design einiges vom De-

signer. Die Werbung verspricht zwar meist anderes, aber die komplexe (weil fehlerhafte) Technologie

beeinflusst die gestalterische Lösung ebenso wie (betriebswirtschaftliche) Anspüche an Wartbarkeit

oder Benutzerfreundlichkeit dies tun. Publizieren im Internet ist ein Kinderspiel. Ein Haus entwerfen

auch. Jeder kann – mit oder ohne Architekturprogramm – tolle Häuser zeichnen, ohne eine Ahnung von

Statik, von Architekturgeschichte oder Soziologie. Ein Haus entwerfen, welches man auch bauen kann,

und es ausführen – das ist etwas anderes. Was Architektur komplex macht: Der Architekt soll indivi-

duell die ästhetischen und funktionellen Ansprüche eines Auftraggebers in seinen Entwurf einfliessen

lassen und darf dabei niemals die Ausführenden und den Willen zur guten Form aus den Augen zu ver-

lieren. So hängt auch die Komplexität von (Web-)Design von den Ansprüchen an sich selbst und an die

Lösung ab. Jeder Amateur kann sich FrontPage/Dreamweaver/Golive kaufen, das Tutorial durcharbeiten

und sich danach ‹Web-Designer› auf ein Visitenkärtchen drucken lassen. Doch kennt er damit eben

noch nicht die Tiefen (Abgründe!) des Internets, seine Funktionsweise, seine Eigenheiten und Möglich-

keiten. Web-Design reizt die gestalterischen Fähigkeiten eines guten Designers selten aus, es verlangt

auch keine besonderen gestalterischen Fähigkeiten. Das haben wir während unserer Beschäftigung

mit Web-Design festgestellt. Wer einen guten Zeilenabstand erkennt, wird auch im Web-Design einen

adäquaten Zeilenabstand setzen. Wer gute Farbkonzepte ersinnen kann, wird sich auch im Web mit der

Farbe gut arrangieren. Die gestalterische Ausbildung gehört nicht in ein Web-Design-Lehrbuch. Denn

der Anspruch an die gute Form im Web ist kein anderer, als der Anspruch an die Form eines Stuhls,

eines Automobils, eines chirurgischen Instruments oder eines Buches. Warum also nicht einfach losle-

gen mit Dreamweaver und Konsorten?

Weil der Web-Designer einige Eigenschaften des Mediums kennen muss, auch wenn das im Web nicht

so viele sind. Der Designer muss verstehen, warum sich die Wechselwirkung zwischen Inhalt und Form

im Web anders verhält als bei einem Buch oder einem Magazin. Anders, nicht schwieriger. Es sind

bloss eine Handvoll Regeln, die, wenn sie befolgt werden, eine Website reicher machen. Der Designer

soll mit den vorliegenden zwei (schmalen) Publikationen die Eigenheiten des Web illustriert bekommen

– wer Regeln für gute Farb- oder Typografie-Rezepte sucht, um ein besserer Gestalter zu werden, der

sei hier auf andere Publikationen verwiesen. Es muss in diesen zwei Publikationen nicht gesagt werden,

dass serifenlose Schriften am Bildschirm besser gelesen werden können, oder dass sich Farben, je nach

Monitor(-Einstellung) verändern, es soll nicht beschrieben werden, was man sehen oder erfahren kann.

Insofern setzen diese zwei Publikationen eine gestalterische Vorbildung, das gute Auge, den guten Ge-

schmack voraus. Wobei Geschmack und Auge nicht notwendigerweise mit gestalterischer Vorbildung

einhergehen. Nicht zuletzt setzen diese Publikationen voraus, dass der Designer (mit-)denkt.

In diesem ersten Band ‹Methodik des Web-Design› wird in planmässiger Schrittfolge beschrieben,

wie eine Website entsteht. Diese Methode stützt sich einerseits auf hinlänglich beschriebene Organisa-

tionstechniken (etwa von Götz Schmidt) andererseits auf die – relativ zur Existenz der Disziplin – lang-

jährigen Erfahrungen der Autorin und des Autors. Unsere Methode soll helfen, Leerläufe und unnötige

Wiederholungen zu vermeiden. Gerade im Web-Design können kleine Änderungen an fertig program-

mierten Seiten fatale Konsequenzen haben und zu Neuprogrammierungen führen. Und die treiben ei-

nen, besonders wenn man mit Web-Design Geld verdienen möchte, nicht nur in den Wahnsinn sondern

auch in den Ruin. Dieses Buch will neben der Theorie die Praxis erklären. Deswegen präsentiert sich

sein Inhalt als Case-Study, es wird ein reales Projekt vom Auftrag bis zum fertigen Prototypen aufge-

zeigt – und mindestens bis zum Prototypen muss ein Web-Designer mit seinen Kenntnissen kommen.

6



zielorientiertes Web-Design mit HTMLVorwort

Das vorliegende Buch ist von dienstleistungsorientierten Designern geschrieben, nicht von freien

Künstlern. Was ausschliesslich besagen soll: Web-Art hat mit Web-Design ebensowenig zu tun, wie

das Hundertwasser-Haus mit einer Shopping-Mall. Der Begriff ‹Design› impliziert die Berücksichtigung

von Form und Funktion gleichermassen. Dadurch wird Design zur Dienstleistung am Menschen – De-

sign wurde von und für Menschen erfunden. Mit dem Internet kommt dem Design die Aufgabe zu, die

Schnittstelle zwischen Mensch, Maschine und dem dahinterliegenden Raum (BlackBox) zu gestalten,

welcher für die meisten Menschen unfassbar bleibt. Interface-Design gab es schon vor dem populären

Ansturm auf das Internet: Man denke nur an Geldautomaten, grafische Oberflächen von Betriebssys-

temen oder Ähnliches. Doch damals konnten meist geschlossene Systeme gestaltet werden, mit klar

definierbaren Benutzern, welche oft gezielt geschult wurden. Das Web jedoch öffnet die Schnittstelle

Mensch-Maschine-BlackBox einer enorm breiten Masse, was unweigerlich Einfluss auf das Interface-

Design hätte, würde es denn ernst genommen. Vor allem: würden die Menschen, die Bedienenden,

vom Designer ernst genommen. Doch die Realität sieht leider anders aus: Fehlermeldungen gehören

zum Surf-Alltag, Seiten aus dem Internet auszudrucken bleibt ein mühsames Unterfangen, nach Inhal-

ten im Web suchen – für viele ein Horror. Genau diese Punkte hängen massgeblich vom Design einer

Website ab. Doch damit beschäftigen sich nur wenige Designer. Die meisten bleiben lieber im Irrglau-

ben, Design bedeute ausschliesslich Repräsentation. Dem ist aber nicht so.

Deshalb kümmert sich der zweite Band um die ‹Grundlegenden funktionalen Einflussgrössen im Web-

Design›. Er setzt wiederum gute gestalterische Vorkenntnisse, vor allem aber auch technologische

Kenntnisse voraus: Denn das ‹Wie› wird im zweiten Band nicht beschrieben, es gibt auch hierzu bereits

genügend Literatur. An dieser Stelle sei noch einmal deutlich gesagt: Wer glaubt, gutes Web-Design

könne auch ohne jede Technikkenntnisse entstehen, ist auf dem Holzweg. Diese Haltung ist weit

verbreitet, und sie ist exemplarisch für das Internet: Kein ausgebildeter Grafiker beispielsweise traut

sich ohne weiteres zu, ein Auto zu gestalten. Es ist ihm von vornherein klar, dass Ergonomie, Moto-

renleistung, Zielgruppe, Aerodynamik, Sicherheit, Vorschriften seine Lösung beeinflussen werden und

dass er diese Einflussgrössen erst im Detail kennen muss, um eine gestalterische Lösung zu finden.

Aber fast jeder (junge) Grafiker führt bereits Web-Designs in seinem Portfolio, ohne sich jemals mit

Indexierbarkeit durch Suchmaschinen, Druckbarkeit, flexiblem Seiten-Design, semantischer Struktu-

rierung und Ähnlichem auseinandergesetzt zu haben. Diese Grundlagen möchten wir hier nachliefern,

mit kurzen Texten und vielen Abbildungen, nicht Doktrin sondern Leitfaden, nicht Mahnfinger sondern

Räuberleiter.

In diesem Sinn!

Patrick Jauch

Birgit Ostertag

Ende Juli 2003

7






zielorientiertes Web-Design mit HTML Vorwort

Inhalt

Aufzählungen?

Lesetexte?

Leads?

Quotes?

Download-Bereiche?

Titelhierarchien?

Bilder?

Bedienung

Navigation?

Orientierungssystem?

Aufbau

Struktur?

Hierarchietiefe?

Blackbox(es)Design

Verschiedene Bildschirmgrössen?

Scrollbare Seiten?

Verbrechen am Design nach dem

Ausdruck?

Konstruktion, Raster?

Navigation?

Corporate-Design?

Product-Design?

Technik

Frame oder Tabelle?

HTML oder DHTML?

Druckbar oder nur Bildschirmanzeige?

Dynamische oder statische Inhalte?

Indexierbar durch Suchmaschinen?

Wartbarkeit?

Seitenkonstruktion?

Gegenseitige Beeinflussung

Auch in anderen Disziplinen des

Medien-Designs beinflussen sich

die obenstehenden Grössen.

In Websites sind allerdings die

Abhängigkeiten durch den An-

spruch an Aktua lisierbarkeit und

Wartbarkeit und durch die kom-

plexe Technologie, mit der eine

Website realisiert wird, besonders

knifflig. Von vielen Designern wird

unterschätzt, wie viel Einfluss all

die umliegenden Grössen auf das

Design haben. Fazit: Dem Web-

Designer dürfen grundlegende

Kenntnisse in den angrenzenden

Bereichen auf keinen Fall fehlen.

8




Designer

scheuen die Ordnung oft wie

der Teufel das Weihwasser. In

der Printmedien-Welt, wo die

Technologie längst funktioniert

und im Hintergrund abläuft – also

für den Designer unsichtbar –, ist

das kreative Chaos im Gestal-

tungsprozess für gewöhnlich

kein Problem. Web-Design aber

arbeitet im Vergleich dazu mit

brachialer Technologie, die zudem

teilweise mit Fehlern behaftet ist.

Wer sich hier dem Chaos hingibt,

wird darin versinken.

Methodik versus Kreatitvität

9







Methodik versus Kreativität

Gemeinhin gilt, dass Kreativität und planmässiges Vorgehen sich nicht vertragen. Dem mag auch so

sein. Die Arbeit des Web-Designers besteht aber nicht nur aus Kreativität, um nicht zu sagen, Kreativität

macht nur einen sehr geringen Teil seiner Arbeit aus. Web-Design besteht primär aus Knochenarbeit.

Ein methodisches Vorgehen soll helfen, wiederkehrende Tätigkeiten weitestmöglich zu standardisieren

und Fehlerquellen und unnötige repetitive Arbeiten zu vermeiden. Dies nicht zuletzt, um der Kreativität

den nötigen Freiraum zu verschaffen. Hierzu trägt sicherlich unten aufgezeigtes Vorgehensmodell bei.

Es teilt den Gestaltungsprozess grob in die Hauptphasen ‹Konzeption› und ‹Realisation› ein. Werden

diese Phasen nicht getrennt, bleiben Konzeptionsfehler oft bis zur Fertigstellung unbemerkt. Dann aber

sind sie nur noch aufwändig korrigierbar. Die Trennung von Konzeption und Realisation vermeidet also,

dass Fehler aus der Konzeptionsphase unbemerkt in die Realisation übernommen werden. Die Konzep-

tion liefert den Bauplan für die Realisation. Selbstverständlich können zur Konzeption auch technische

Aufgabenstellungen gehören, wie etwa die Implementation eines Bestell- und Bezahlungssystems.

Diese Bereiche werden aber im folgenden ausgeklammert, geht es doch hier um die Arbeit des Web-

Designers und nicht um jene des Web-Informatikers. Allerdings können die Ergebnisse der technischen

Konzeption sehr wohl rückwirkend Einfluss auf das Design haben, schliesslich muss ein Bestellproze-

dere mit all den dafür nötigen Elementen auch gestaltet werden. Die eigentlich kreative Arbeit liegt im

Schritt ‹Lösungsentwurf›, die Prozessschritte davor liefern die Einflussgrössen und Rahmenbedingun-

gen für den Lösungsentwurf, der Prozessschritt danach überprüft, ob das in der kreativen Teilphase

Geschaffene auch wirklich funktioniert und beweist das dem Auftraggeber. Ziel dieser Methode ist es

also, das eigentlich Kreative in ein normatives System zu integrieren, damit kreative Lösungsansätze

erstens mit dem Ziel korrespondieren und zweitens auch (sinnvoll) realisierbar sind.

Konzeption Realisierung Erhaltung

Präsentation PräsentationAuftragBriefing

Einführung

Präsentation

1. Erhebung und Analyse

Auftraggeber, Corporate-Identity-, Corporate-Design- und Product-Design-Richtlinien,

Inhalte usw.

2. Kritische Würdigung (evtl. mit Zielrevision)

Wie sind die Erkenntnisse aus der Analyse zu werten? Haben die Erkenntnisse aus dem

vorangegangenen Schritt eine Zielrevision zur Folge?

3. Lösungsentwurf

Skizzen, Design-Lösungsvarianten, Beschreibungen, Harmonisierung Design/Technik,

ggf. Zwischenpräsentationen. Alle für das Verständnis des Design-Konzeptes relevanten

Seiten darstellungsverbindlich in Photoshop erstellen.

4. Bewertung und Auswahl, anschliessend Präsentation

Besten Lösungsentwurf auswählen, bzw durch den Auftraggeber auswählen lassen.

5. Lösungsausarbeitung

Designkonstruktion, evtl. Testumgebungen erstellen, Design-Vorlagen realisieren,

Prototyp realisieren, Funktionalitätstests, anschliessend Präsentation.

Definitive Musterseiten

erstellen, Inhaltsgebung,

Tests

Inbetriebnahme, Schulung Unterstützung,

Wartung,

Reparatur

10



zielorientiertes Web-Design mit HTMLMethodik versus Kreatitvität

Swissphone

4530 Website ‹mobilemantra.ch›

4530.1 Auftrag für Konzept

Auftraggeber

Swissphone AG

Roosstrasse 53

8832 Wollerau

Auftragnehmer

dezember und juli gmbh

Sackstrasse 33

8342 Wernetshausen

Zusammenfassung

Auftrag für den Entwurf einer Website mit Lösungsvorschlägen für den Aufbau, die Bedienung, die

Technik und die anschliessende Realisierung.

Geschichte

07.05.2003, PJauch, Erstellung

27.05.2003, MJung, Änderungen nach Briefing

Aufgabe: Worum geht es?

Swissphone vertreibt das Produkt ‹Mobile Mantra›, eine Produktsuite von Mobile Messaging Tools,

die Computer, Internet, Daten und Inhalte integriert und Informationen überall und jederzeit auf Geräte

wie Pagers, Handies und Smartphones sendet. Für den internationalen Marktauftritt wird ein Produkt-

design konzipiert, welches eine einheitliche Kommunikation in den verwendeten Medien ermöglicht.

Für den nationalen Vertrieb soll nun eine Website konzipiert werden, welche als Informationssystem

für Endkunden und Distributoren dient und den direkten Kauf ermöglicht. Eine ausführliche Aufgaben-

stellung ist im Dokument ‹Mobile Mantra, Briefing, Website und Werbeunterlagen› von Hans Muster

zu finden.

Ziel: Was müssen wir erreichen?

Es soll ein Konzept vorliegen, in dem ein Lösungsvorschlag für den Aufbau, die Bedienung, die notwen-

dige Technik und die anschliessende Realisierung aufgezeigt wird. Der Lösungsvorschlag soll anhand

eines Prototypen präsentiert werden.

Untersuchungsbereich: Worauf müssen wir uns konzentrieren?

– Erhebung und Analyse Inhalt.

– Erhebung und Analyse Verkaufsprozess mit Zahlung per Rechnung (ab einem bestimmten Betrag)

oder Kreditkarte.

– Lösungsvorschlag für Aufbau (Struktur und Verzeichnisse), Bedienung (Navigation und Orientie-

rung).

– Lösungsvorschlag für Technik (Datenmodell, Datenbearbeitung, Datenpräsentation, Unter- und

Teilsysteme sowie Schnittstellen und Transaktion mit Kreditkarteninstituten).

– Lösungsvorschlag für Realisierung (Entwicklungswerkzeuge, Betriebssoftware, Kosten, Termine).

Der Auftrag

ist das organisatorische und

juristische Regelwerk für jedes

Projekt. In ihm wird festgelegt,

was in welcher Zeit und mit

welchem Budget geleistet werden

muss, bzw. erwartet werden darf.

Gerade bei Web-Projekten, wo

spätere Korrekturen verheerende

Konsequenzen haben können,

ist ein sauberer Auftrag, eine

gegenseitige Willensäusserung,

enorm wichtig. Erst mal beginnt

Web-Design also knochentrocken.

11






zielorientiertes Web-Design mit HTML Methodik versus Kreatitvität

Einflussgrössen: Was müssen wir beachten?

– Das Webdesign wird durch das Produktdesign vorgeschrieben.

– Produkt(palette) mit 6 oder mehr Produktvarianten bzw Produkten. Dazu Meldungslizenzen für

eine bestimmte Anzahl Meldungen und für Mobile Mantra Enterprise Softwarelizenzen für eine

bestimmte Anzahl Arbeitsplätze, Clients.

– Sprachen Deutsch (Original), Englisch und Französisch.

Lösungsbereich: Was wird von uns erwartet?

– Die Website soll mit Dreamweaver aktualisiert und erweitert werden können.

– Der Aufbau soll ausbaubar sein, die Bedienung einfach.

Zeit- und Budgetvorgaben: Wann müssen wir fertig sein, wie viel darf es kosten?

Die Ergebnisse müssen bis spätestens 6 Wochen nach Bestätigung des Auftrages vorliegen. Für Leis-

tungen im Umfang dieses Auftrages wird ein Budget von Franken inklusive 7.6% Mehrwert-

steuer bewilligt. Das Kostendach für die Realisierung wird zum jetzigen Zeitpunkt mit Franken

beziffert – eine definitive Kostenberechnung für die Realisierung wird im Rahmen dieses Auftrages

durchgeführt. Auslagen werden nach vorgängiger Rücksprache nach effektiven Kosten verrechnet.

Anforderungen undoder Wünsche, die uns zum Zeitpunkt der Auftragsvergabe nicht bekannt sind,

werden nach Absprache vergütet. Die Rechnungsstellung erfolgt nach der Präsentation des Ergebnis-

ses. Die Zahlung wird fällig netto 10 Tage nach Rechnungsstellung.

Aufbauorganisation: Wer ist beteiligt?

Projektleiter Auftraggeber Hans Muster, [email protected]

Projektleiter Auftragnehmer MJung, [email protected]

Projektmitabereiterin BOstertag, (Design) [email protected]

Berichtwesen: Wie müssen wir informieren?

Die Ergebnisse dieses Auftrags sind in digitaler Form festzuhalten. Bei Schwierigkeiten oder Unvorher-

gesehenem ist sofort der Projektleiter des Auftraggebers anzusprechen, welcher dann über das weitere

Vorgehen entscheidet.

Geistiges Eigentum

Sämtliche in Erfüllung dieses Auftrages geschaffenen Immaterialgüterrechte gehen örtlich, zeitlich und

sachlich unbegrenzt auf den Auftraggeber über. Der Auftraggeber ist berechtigt, solche Immaterialgü-

terrechte auch für andere Zwecke, als für diejenigen, für welche sie geschaffen wurden, zu verwenden.

Durch die nach diesem Auftrag zu zahlende Vergütung ist die Übertragung sämtlicher Rechte abge-

golten.

Geheimhaltung

Der Auftragnehmer verpflichtet sich, über die anvertrauten Geschäftsgeheimnisse auch über das

Ende des Auftrages hinaus Stillschweigen zu wahren. Dritte, die vom Auftragnehmer zur Erfüllung

der Vereinbarung beigezogen werden müssen, werden durch den Auftragnehmer zu Stillschweigen

verpflichtet.

Bestätigung

Ort und Datum Ort und Datum

Wollerau, 27. Mai 2003 Wernetshausen, 27. Mai 2003

Hans Muster Markus Jung

Swissphone AG dezember und juli gmbh

Gerichtsstand ist der Sitz der dezember und juli gmbh in Hinwil ZH

12




Erhebung und Analyse

stellt den Fadenzähler auf alles,

was mit dem Projekt zu tun hat. In

dieser Phase werden alle Informa-

tionen gesammelt, anschliessend

auf ihre Relevanz abgeklopft,

geprüft und hinterfragt. Das

Ziel dabei: Möglichst viel in die

Überlegungen miteinbeziehen zu

können, um jene nahezu perfekte

Lösung zu erreichen, die keine

Wünsche mehr offen lässt.


Einführung

13








Unter Erhebung versteht man das Sammeln von Informationen. Selbstverständlich nicht von irgendwel-

chen Informationen, sondern das Sammeln von Informationen, welche die gestalterische Lösung be-

einflussen oder beeinflussen könnten. Gerade bei Websites, beziehungsweise bei allen Publikationen,

welche dem Marketing untergeordnet werden können, gibt es in der Regel unzählige beeinflussende

Elemente, von denen der Designer vorteilhafterweise wissen sollte. Je mehr Informationen beschafft

werden, desto besser wird die Lösung einem Auftraggeber gefallen und desto besser wird die Lösung

aus gestalterischer Sicht ausfallen. Das mitunter Schwierigste für einen Designer bei der Erhebung: Die

Gefahr, die Augen vor unangenehmen Tatsachen zu verschliessen. Doch genau das rächt sich. Je früher

Probleme und Hürden erkannt werden, um so kleineren Schaden werden sie anrichten können.

Die Qualität des Designs hängt massgeblich davon ab, wie viele Lösungen das Design bereithält. Dabei

spielt Ästhetik eine Rolle, wenn auch nur eine untergeordnete. Gerade im Web ist die Realität gestalte-

risch oft eine bittere. Kaum meint man zu wissen, welche Information den Inhalt der Website ausmacht,

folgt auch schon ein neues Produkt, ein neuer Bereich, ein neuer Katalog, der unbedingt beworben

(‹angeteasert›!) werden muss. Die Aktualisierbarkeit des Internets bringt dem Besitzer einer Website

Segen, für den ungeübten Gestalter ist sie ein Fluch. Endlich sind alle Bilder mitsamt ihren OnMouse-

Over- und OnMouseOut-Varianten erstellt, schon müssen neue Links in die Navigation eingebaut wer-

den, eine weitere Hierarchiestufe kommt hinzu oder ein ganzer Bereich wird aus der Website entfernt,

weil das Unternehmen aus einer Abteilung eine neues Unternehmen gründet – mit eigener Website. Als

Designer kann man sich auf den Standpunkt stellen: Das konnte ich nicht wissen, jetzt muss halt ein

Redesign her! Oder aber – und das ist unsere Meinung – das Web-Design fängt wenn auch nicht alle,

so doch möglichst viele Eventualitäten auf. Das heisst, es muss gut gestaltet sein. Funktionalität geht

im Web immer vor. Ein Buch wird irgendwann gedruckt und landet irgendwann im Antiquariat. Eine

Website ist nicht fertig, sie besitzt nur vorläufige Zustände.

Gerade um diesem Umstand gerecht zu werden, ist es so wichtig, möglichst viele Eventualitäten zu

erheben, um das Design von vornherein richtig zu dimensionieren.

14





Das Umfeld der Website

Eine Website und ihr Design

werden von vielen Grössen

beeinflusst.

Wer die späteren Entscheidungs-

träger oder die bestehenden

Publikationen eines Unterneh-

mens nicht kennt, wird garantiert

am Ziel vorbeidesignen. Wer die

Struktur des Unternehmens nicht

kennt, läuft Gefahr, die Website

an der Unternehmensvision vor-

bei zu positionieren.

Holding/Konzern

Corporate-Design

LieferantenProduct-Design

Produktgruppen

Produktvarianten

Unternehmen

Abteilungen

Geschäftsfelder

Produkte

Corporate-Identity

Website

Entscheidungsträger/

Menschen (!)

Tochter-

gesellschaften

15









Eine Website ist – mindestens überall dort, wo eine Website Dienstleistungen zu erbringen hat – in ein

reguliertes Umfeld eingebettet. Dieses Umfeld beeinflusst die Website formal, funktional und inhaltlich.

Formal, wenn sich die Website beispielsweise einem Corporate- oder Product-Design (wie in vorlie-

gendem Fall) zu unterwerfen hat. Funktional, wenn beispielsweise (standardisierte) Geschäftsprozesse

undoder -strukturen abgebildet werden müssen. Inhaltlich, wenn etwa ein bestimmtes Corporate-Com-

munication-Konzept eingehalten werden muss. Erfahrungsgemäss haben viele Designer die Haltung,

der Auftraggeber habe sie über alle das Design beeinflussenden Tatsachen zu informieren, sie glauben,

der Auftraggeber sei in einer Art Bringschuld. Die Realität des Arbeitsalltags zeigt aber: Der Designer

hat sich die relevanten Informationen selbst zu beschaffen, in Briefings, in Interviews oder mittels Re-

cherchen im bestehenden Kommunikationsmaterial des Auftraggebers.

Am offensichtlichsten beeinflusst wird das Web-Design selbstverständlich durch übergeordnete De-

sign-Konzepte wie Corporate- oder Product-Designs. Aber auch weitaus weniger offensichtliche Dinge

haben einen Einfluss. So etwa die Frage, ob auf einer Produkt-Website neben dem Produkt-Logo auch

das Logo des Unternehmens (vgl. Ovomaltine/Wander/Nestlé) auftauchen soll und ob es auf jeder Sei-

te, nur auf einer Seite oder gar nie auftauchen soll.

Produktvariante

Produkt

Produktgruppe

Unternehmen

Pop3

Das Umfeld abbilden

Bereits die Erhebung und Analyse

des Umfelds einer Website kön-

nen etwa die späteren Internet-

adressen beeinflussen und wirken

sich schon deswegen auch auf

die Wartbarkeit in relevanter

Weise aus. Dabei gilt als Faust-

regel: Was in der Realität nicht

funktioniert, macht wohl auch im

Web Schwierigkeiten.

16






Ni

cht f

rank

iere

n

Ne p

as a

ffran

chir

No

n af

fran

care

Gesc

häfts

antw

orts

endu

ng

Invi

o co

mm

erci

ale-

rispo

sta

Envo

i com

mer

cial

-rép

onse

Swis

spho

ne A

GRo

osst

rass

e 53

CH-8

832 W

olle

rau

Gedankenübertragung ist eine feine Sache – Ihr Gesprächs-partner hört Ihre Gedanken und antwortet ebenso, einfach durch puren Willen, ohne Draht, ohne Welle, ohne Sender oder Empfänger, telepathisch. Leider funktioniert Telepa-thie nicht bei allen Menschen. Aber Mobile Mantra kommt der Telepathie ziemlich nahe. Diese Server- und Desktop-lösungen funktionieren wie E-Mail-Software, integrieren darüber hinaus aber nahtlos Mobilgeräte und ihre Techno-logien. Ob Pager, Handy (GSM, GPRS) oder Smartphone, Ihre Info kommt jederzeit überall an. Mobile Mantra unterstützt nahtlos auch Microsoft Outlook mitsamt Adressbuch.

Vorbei sind die Zeiten, wo Sie sich Ihre Finger wund telefo-nierten auf der Suche nach Ihren Mitarbeitern oder Kunden, vorbei die Zeiten, wo Ihr Server klammheimlich abstürzte, ohne sich von Ihnen zu verabschieden. Wer Sie auch sind, wen Sie auch immer erreichen wollen, Mobile Mantra bietet Ihnen die Lösung für Ihre persönliche oder Ihre Firmenkom-munikation.

Swissphone vertreibt Mobile Mantra in der Schweiz exklusiv.

Mobile Mantra verbindet Welten Die Mobile Mantra Produkt-Suite im Überblick

Mobile Mantra Enterprise, die Netzwerkversion von Mobile Mantra Offi ce Plus, ist als Version für Microsoft Exchange und als Stand-alone-Version erhältlich, mit zentraler Verwaltung der Lizenzen und Berechtigungen. Die Software arbeitet mit bestehenden Exchange/Outlook-Adressbüchern.

Mobile Mantra Enterprise für Microsoft ExchangeMobile Mantra Enterprise ist die ideale Kommunikationssoftware für Unternehmen oder Organisationen mit mehreren Arbeitsplätzen, welche Microsoft Exchange als Kommunikationssystem benutzen. Sie versenden damit von mehreren Arbeitsplätzen in einem Netzwerk via Microsoft Exchange einfach und schnell SMS und Paging-Meldungen über Internet und Modem (analog oder ISDN). Mobile Mantra Enter-prise stellt Ihnen in Microsoft Outlook einen integrierten SMS- sowie einen Paging-Button zur Verfügung. Diese Buttons machen den Ver-sand von Meldungen so leicht wie das Versenden einer E-Mail.

Mobile Mantra Enterprise als Stand-alone-VersionMobile Mantra Enterprise ist die ideale Kommunikationssoftware für Unternehmen oder Organisationen mit mehreren Arbeitsplätzen. Mit Mobile Mantra Enterprise versenden Sie aus einer Desktop-Applika-tion einfach und schnell von mehreren Arbeitsplätzen in einem Netz-werk SMS und Paging-Meldungen über Internet und über Modem (analog oder ISDN).

Mobile Mantra Offi ce Mit Mobile Mantra Offi ce versenden Sie sicher und schnell SMS über Internet aus einer Desktop-Applikation und nutzen dabei Ihr beste-hendes Outlook-Adressbuch. Diese Einzelplatzversion ist die ideale Kommunikationssoftware für KMUs und Unternehmen oder Organi-sationen mit wenigen Arbeitsplätzen. Die Software stellt wenig Anfor-derungen an Ihr Computer-System, sie ist einfach in der Handhabung und ermöglicht einen kostengünstigen und schnellen Versand von Meldungen übers Internet.

Offi cemobilemantra

Enterprisemobilemantra

Mobile Mantra Messaging License Für die einzelnen Mobile-Mantra-Produkte können Sie SMS und Paging-Meldungen im Pre-paid-Verfahren einkaufen. Diese Message-Lizenzen können mit einem Message Key pro Anwendung aktiviert werden; bei Mobile Mantra Enterprise können Sie die Lizen-zen zentral verwalten.

Your Software inspired by SadhuKeine Angst: Es ist ein Sadhu, ein hei-liger Mann. In Indien und Nepal ge-hören Sadhus zum Strassenbild. Sie legen unglaublich harte Gelübde ab und suchen nach der Erleuchtung. Über Sadhus gibt es viele Anekdoten, und eine davon erzählt, Sadhus kom-munizierten mittels Telepathie. Weil aber Telepathie bei uns westlichen Menschen nur bedingt funktioniert, bietet Ihnen Swissphone Mobile Mantra an, eine Software, die von der Telepathie der Sadhus inspiriert ist – ob Pager, Handy (GSM, GPRS) oder Smartphone, Ihre Info kommt jederzeit überall an. Mobile Mantra bietet Ihnen die Lösung für Ihre persönliche oder Ihre Firmenkom-munikation. Es soll inzwischen sogar Sadhus geben, die Mobile Mantra der Telepathie vorziehen.

MessagingLicense

mobilemantra

Mobile MantraMessaging License

MessagingLicense

Mobile Messaging Solutions.Near Telepathy.

mobilemantra

Mobile Mantra Messaging Platform Die Messaging Platform bietet Ihnen eine Komplettlösung für viele Anwender mit hohem Meldungsvolumen. Als kommerzielle Lösung stellt die Messaging Platform das ideale Kommunikationswerkzeug für Service-Provider und grosse IT-Abteilungen dar. Die Messaging Platform ist auch als ASP-Lösung (Application Service Provider) ver-fügbar. Damit können Wireless-Server im Outsourcing-Verfahren rund um die Uhr effi zient betrieben und unterhalten werden.

Die Messaging Platform ist eine stabile Lösung auf der Basis von neuesten Technologien, sie bietet sehr hohen Datendurchsatz und ein benutzerfreundliches Graphical User Interface (GUI) für Wireless Server.

Mobile Mantra Add-Ons: alternative Softwaremodule.Mobile Mantra Server Monitoring Mit Server Monitoring können Sie permanent eine Auswahl von Ser-vern und Applikationen überwachen lassen. Bei Störungen sendet das System automatisch Meldungen (SMS, Paging über Internet, Analog-/ISDN-Modem) an vordefi nierte Personen, generiert E-Mails oder startet eine Applikation.

Mobile Mantra Command Line Das Command Line Tool ist ein alternatives Softwaremodul für den Versand von SMS und Paging-Meldungen. Es hilft bei der Erstellung von Scripts und kann einfach in bestehende Fremdapplikationen eingebaut bzw. integriert werden.

Mobile Mantra POP3 POP3 verwandelt E-Mail-Nachrichten in Paging- oder SMS-Meldun-gen, die Sie überall empfangen können.

Mobile Mantra Offi ce Plus Mit Mobile Mantra Offi ce Plus versenden Sie einfach, sicher und schnell SMS und Paging-Meldungen über Internet und Modem (analog oder ISDN) aus einer Desktop-Applikation und nutzen dabei Ihr bestehendes Outlook-Adressbuch. Die Einzelplatzversion Mobile Mantra Offi ce Plus eignet sich für KMUs und Unternehmen oder Organisationen mit wenigen Arbeitsplätzen. Durch das Versenden über Internet und Modem entsteht Redundanz, die Meldung kommt auf zwei Kanälen noch sicherer ans Ziel.

Offi cePlusmobilemantra

Enterprise


mobilemantra

Mobile Mantra Enterprise

AddOnsmobilemantra

MessagingPlatform

mobilemantra


mobilemantra

Mobile Mantra ist eine Produkt-Suite der SWISSPHONE AG

SWISSPHONE Telecom AGRoosstrasse 53CH-8832 Wollerau

E-Mail [email protected] www.swissphone.com/mobilemantraHelpdesk 0848 88 99 99

Swissphone betreut seit März 2003 alle Schweizer Page-It- und Mobile- Mantra-Kunden exklusiv und stellt für Mobile Mantra eigene Marketing-, Verkaufs- und Support-Spezialisten ab. Das Produkt wird durch den Software-Hersteller Dharohar Info Tech AG (DIT) supported und mit einem Entwick-lungsteam in Indien angepasst und weiterentwickelt. Swissphone betreibt den Mobile Messaging Service.

Zudem hat Swissphone an der Mobile-Mantra-Entwicklerin DIT eine Minder-heitsbeteiligung erworben. Swissphone beteiligt sich ausserdem fi nanziell an kundenspezifi schen Anpassungen und der Weiterentwicklung.

Swissphone ist ein unabhängiges Schweizer Unternehmen mit über 350 Mitarbeiterinnen und Mitarbeitern. Als Pionier im Bereich der Funkrufalar-mierung entwickelte sich Swissphone im Laufe der Zeit zu einem europaweit führenden Anbieter von Mobilkommunikationslösungen. Swissphone enga-giert sich für Kunden aus den Segmenten Industrie, Hospitality, Behörden, Or-ganisationen mit Sicherheitsaufgaben, Pharma und Finanzdienst leistungen.

Seit ihrer Gründung konzentriert sich Swissphone auf Entwicklung, Pro-duktion und Betrieb von Kommunikationstechnologien für den mobilen Bereich. Sie verfügt darin über umfassendes Know-how. Gleichzeitig arbeitet Swissphone als Operator (mit eigenen Paging-Netzen), Service-Provider und Hersteller.

Swissphone – seit Jahrzehnten Ihr Partner für mobile Kommunikation und Alarmierung.

Page-It goes Mobile Mantra

Haben Sie Fragen zu unseren Produkten? Rufen Sie uns an – wir informieren Sie gerne.


mobilemantra

Wer steht hinter Mobile Mantra?

Mobile Mantra, das Nachfolgeprodukt der erfolg-reichen SMS/Paging Software ‹Page-It›, bietet eine umfangreiche Palette von mobilen Kommunika tions-werkzeugen (Mobile Messaging Tools) für professio-nelle Anwender wie beispielsweise Logistikunter-nehmen, Organisationen mit einer sehr mobilen Belegschaft, Service-Organisationen, Call-Center und IT-Departments.

Da die Anwendungsbereiche und Möglichkeiten die-ser Software so breit gefächert sind, hier nur die drei wichtigsten Features:

Mobile Mantra ermöglicht den Versand von SMS- und Paging-Meldungen mittels einer Desktop- Applikation an alle Arten von mobilen oder statio-nären Kommunikationsgeräten wie Pager, Handy (GSM, GPRS) und Smartphone.

Mit Mobile Mantra können Sie direkt aus Microsoft Outlook Meldungen übers Internet versenden und Ihr bestehendes Outlook-Adressbuch benutzen.

Mobile Mantra hilft Ihnen bei der Überwachung von Servern und Applikationen, Sie können defi nieren, welche Personen von Mobile Mantra benachrichtigt werden sollen.

Excellence in Mobilcom

Mobile M

essaging Solutions.

Near Telepathy.

mo

bilem

antra

Bitte senden Sie mir U

nterlagen zu folgenden Produkten:

M

obile Mantra O

ffi ce M

obile Mantra Add-O

ns

M

obile Mantra O

ffi ce Plus M

obile Mantra M

essaging Platform

M

obile Mantra Enterprise

Mobile M

antra Messaging License

Ich m

öchte mehr w

issen, rufen Sie mich an:

Telefon

Uhrzeit

Nam

e Firm

a

Vorname

Strasse

Funktion PLZ/O

rt

E-M

ail

Ich m

öchte regelmässig per E-M

ail-New

sletter über die Mobile M

antra Produkt-Suite informiert w

erden.

MobileMantra ist eine Produkt-Suite der SWISSPHONE AG

www.mobilemantra.ch

Excellence in MobilcomSWISSPHONE AGRoosstrasse 53CH-8832 Wollerau

Telefon +41 (0)1 786 77 70Telefax +41 (0)1 786 77 71

[email protected]


mobilemantra

Product-Design

Für das Web-Design im vorlie-

genden Fall die wohl offen-

sichtlichste Einflussgrösse: Das

Product-Design. Wird es in der

Website nicht adäquat repräsen-

tiert, verliert das Product-Design

seinen Sinn und Nutzen: Nämlich

durch Konsistenz Vertrauen

schaffen und durch Standardisie-

rung Kosten sparen (nicht jede

Publikation muss neu entwickelt

werden).

17









Lorperos num velit incillaor Mobile Mantra Offi ce V2.0

Lore dolorperat, vel dolore feum ex esecte dolobo-rem auguer sequat. Duis nulla consectem vel elit, consenis augiamet lum nibh exer sit lum aut lut lor si tem del dolore enis nulla ate dolutat augait loboreet, summy nullan ulput nostrud molent niate tin ute doloreet wiscincin exer sum ipit wis-ciduip euipsummy nummod euisit, suscipit ipit nulput prate dolore magna aut alit nis acillandre dolummy nullamconse dolorperat.

Lore magnis ea facil duipit dolor ilisl delit in et augait dignisi. Duipit ad magna faciliquis alissed dolobore min henim quate dolor sim ing et loreet adip eu feu feum vel eugueril ut iuscing eugait velit, si. Duis et wis nullamc nsequat. Dui tie del iliquat eugueril ut iuscing.

Ut iriuscilis nulla aci eugue vullam iril dolore mod etue min el euis adit dunt ulla amconsequat. Dui bla consequam, quat. Ut luptatu riuscipsum zzrillum dit numsan er in estrud modolor ercillaor sequi tetum volore tat, consectet lorperaesto com-my nonseni iscil utetum ilit luptat nim dipis num.


mobilemantra

Offi ceV 2.0

Lorperos num velit sim quipis nos aute velisci ex euis atuer incillaor Mobile Mantra Enterprise V2.0


www.mobilemantra.ch


Telefon +41 (0)1 786 77 70Telefax +41 (0)1 786 77 71

[email protected]

Ecte commy nibh eu feum irit praessi. Lorpero core dip el utpat wisisl do del ipsum.Lore dion ex er sit euipsum veliquisse core commy nonsed dolenissi.

Lore dolorperat, vel dolore feum ex esecte doloborem auguer se-quat. Duis nulla consectem vel elit, consenis augiamet lum nibh exer sit lum aut lut lor si tem del dolore enis nulla ate dolutat au-gait loboreet, summy nullan ulput nostrud molent niate tin ute doloreet wiscincin exer sum ipit wisciduip macillandre.

Lore consequat ametue dolenisl eu feu feugait utem zzriust onsequatem dolobore elissim ing eugait adignia etumsandiat pratuero dipit wis augiat nonullam, veliquis nostis doloreet pra-essenis duisi.

Duis nullum essismod ea feumsan:> Ionse molore enim etuer acidunt nulputpat velendre> Et praesto etuer inci tin henibh eu faccum dignit at nosto> Facinim accummy nit, venit wiscinis esequipit alit dolore ero

commy num dolorpe cillaore corem vel utpat> Dui te tat luptatummy nonsequat duis do diam

Lore dolorperat, vel dolore feum ex esecte doloborem auguer se-quat. Duis nulla consectem vel elit, consenis augiamet lum nibh exer sit lum aut lut lor si tem del dolore enis nulla ate dolutat augait loboreet, summy nullan ulput nostrud molent niate tin ute doloreet wiscincin exer sum ipit wisciduip euipsummy num-mod euisit, suscipit ipit nulput prate dolore magna aut alit nis acillandre dolummy nullamconse dolorperat.

Lore magnis ea facil duipit dolor ilisl delit in et augait dignisi.Duipit ad magna faciliquis alissed dolobore min henim quate dolor sim ing et loreet adip eu feu feum vel eugueril ut iuscing eugait velit, si. Duis et wis nullamc nsequat. Dui tie del iliquat.

Et ipsustrud minim ad dit dunt ing euguerc ncipit nonse modip ea facin henit nulla feu feu feu faciduisAute magna faccum del ipsustrud dolore vent lutat, consecte delissim nosto odolore commodigna feu faccum in utpat iniam, quate velestrud doluptatem dit numsan er in estrud nit.

Ut iriuscilis nulla aci eugue vullam iril dolore mod etue min el euis adit dunt ulla amconsequat. Dui bla consequam, quat. Ut luptatu riuscipsum zzrillum dit numsan er in estrud modolor ercillaor sequi tetum volore tat, consectet lorperaesto commy nonseni iscil utetum ilit luptat nim dipis num:> Facinim accummy nit, venit wiscinis esequipit alit dolore ero


Ad dit dunt ing euguerc ncipit

Dolobore dolorem Eum eugiam et venit

Vel ipis Niamquipisi

Eugue dolore Tem accum

Deliquisit alis Dionsed magnisl dolore

Tincil Utem vent

Praestin Ute dolor ing exeriure voluptat. Dui te diam, sisi eum zzrit autat.

Duissi blaore Feui tatum ing

<Dui tie del iliquat. Ut iriuscilis nulla aci eugue vullam iril dolore mod etue min el euis adit dunt ulla amconsequat.

<Ut luptatu riuscipsum zzrillum dit numsan er in estrud modolor ercillaor sequi tetum volore tat, consectet lorperaesto


mobilemantra

Offi ceV 2.0

Lorperos num velit incillaor Mobile Mantra Paging V2.0




PagingV 2.0


mobilemantra

Lorperos num velit incillaor Mobile Mantra Enterprise V2.0

EnterpriseV 2.0


mobilemantra




Lorperos num velit incillaor Mobile Mantra Command Line V2.0




Command Line

V 2.0


mobilemantra

Lorperos num velit incillaor Mobile Mantra Messaging License V2.0




MessagingLicense

V 2.0


mobilemantra

Lorperos num velit incillaor Mobile Mantra Messaging Platform V2.0




MessagingPlatform

V 2.0


mobilemantra

Mobile Mantra Offi ce


mobilemantra

Offi ce

Mobile Mantra Offi ce Plus

Offi cePlus


mobilemantra

Enterprise


mobilemantra


Mobile Mantra AddOns

AddOns


mobilemantra

Mobile MantraMessaging Platform

MessagingPlatform


mobilemantra


MessagingLicense


mobilemantra

Medienübergreifend!

Das Product-Design-Konzept lässt

sich anhand der abgebildeten Pu-

blikationen ableiten: Flyer, Schön-

und Widerdruck (Wickelfalz,

oben links), Präsentationsmappe

(links unten), Product-Sheets und

die produktspezifische CD-Hülle

(diese Seite). Das Product-Design

wurde so entwickelt, dass es

auch auf dem Internet konsis-

tent, also widerspruchsfrei und

zusammenhängend, umgesetzt

werden kann.

18





Der Inhalt der Website

Inhalt

Inhalte können geordnet oder

ungeordnet vorliegen. Unge-

ordnete Inhalte sind jedoch

schwer zugänglich und noch viel

aufwändiger à jour zu halten.

Irgendwann bleibt auch bei einer

Website nicht anderes übrig als

sie auszukippen und alles neu Ein-

zufüllen. Werden die Inhalte aber

schon zu Beginn richtig erhoben

und die passenden Unterteilun-

gen geschaffen, ist man auch für

inhaltliche Neuzuzügler bestens

gewappnet.

19









Neben dem Umfeld der Website müssen auch Informationen über den Inhalt der Website erhoben

werden. Gesucht ist die Antwort auf folgende zwei Fragen: Welche Inhalte werden später in Form von

Seiten repräsentiert? Welche semantischen Strukturen werden benötigt, um die Information auf den

einzelnen Seiten zu präsentieren? Der Begriff ‹Semantische Struktur› entspringt dem Knowledge-Ma-

nagement und meint die Menge von Informationselementen und deren wahrnehmbare Darstellung.

Erhebung und Analyse des Inhaltes liefern die wohl grundlegendsten Eckdaten für das spätere Design

der Website. Denn nach der Analyse ist bekannt, welche Web-Seiten zur Präsentation der Information

benötigt werden, wo gegebenenfalls Ausbaubedarf oder -potential vorhanden ist, welche Texte und

Bilder bereits vorhanden sind und welche noch verfasst bzw. aufgenommen werden müssen. Daneben

muss klar sein, welche Elemente für die Präsentation der Inhalte auf den Web-Seiten gestalterisch

bereitgestellt werden müssen: Benötigt es tiefe Überschriftenstrukturen? Aufzählungen? Werden viele

Bilder integriert? Art der Bilder: Zeichnungen, Fotografien, Pläne? Haben die Bilder schmückenden

oder informativen Charakter? Werden Bildlegenden undoder -überschriften gesetzt? Werden viele ta-

bellarische Darstellungen gefordert? Und vor allem: Was konnte zum jetzigen Zeitpunkt nicht erhoben

werden, könnte aber durchaus zu einem späteren Zeitpunkt eintreffen oder benötigt werden?

Es fällt auf, dass viele Websites bei der Gestaltung des Inhaltes schwere Defizite aufweisen: Die Sei-

tenelemente sind schön gestaltet, aber der Inhalt erinnert an Matrix-Kopien aus den siebziger Jahren.

In der Regel hat dies folgende Gründe: Entweder wird die Website von einem Kunden ohne Kenntnisse

selbst aktualisiert oder der Designer hat sich nicht die Mühe genommen, die für die Inhaltsgebung re-

levanten Elemente duchzugestalten. Er hätte damit auch dem Kunden die Aktualisierung in Eigenregie

einfacher gemacht. Es mag sein, dass es weitaus weniger lustvoll ist einen Seiteninhalt zu gestalten,

als pompöse Randelemente oder Navigationen. Nur macht in aller Regel der Inhalt die Website aus – er

verdient also auch die grösste Aufmerksamkeit.

1

2

3

4

5

6

7

8

Repräsentation von

Informationselementen:

Beispiel für semantische

Strukturen

Informationselement

‹Seitentitel› (1)

Informationselement

‹Lead› (2)

Informationselement

‹Aufzählungstitel› (3)

Informationselement

‹Aufzählung› (4)

Informationselement

‹Hervorhebung› (5)

Informationslelement

‹Datensatzüberschrift› (6)

Informationselement

‹Datensatztitel› (7)

Informationselement

‹Datensatztext› (8)

20






Support

Distributoren Kontakt

Hersteller

Impressum Produkte

Mobile Mantra Office

Mobile Mantra Office Plus


Mobile Mantra Add-Ons

Mobile Mantra Messaging Platform

Mobile Mantra Messaging License

Mobile Mantra Server Monitoring

Mobile Mantra Command Line

Mobile Mantra POP3

FAQs

Swissphone

Begrüssung

Allgemeine Geschäftsbedingungen

Bedienungsanleitung/Produkt

Hilfe/Produkt

Softwaredownload/Produkt

Welche Inhalte sollen im Web

präsentiert werden?

Obwohl sie in der Regel nur

kurzfristig gültig beantwortet wer-

den kann, ist dies die erste und

vielleicht wichtigste Frage. Jeder

Auftraggeber macht notwendi-

gerweise vom Vorteil gebraucht,

dass Websites einfach aktualisiert

und erweitert werden können.

Deswegen setzt die Analyse des

Inhaltes immer auch den Blick in

die Zukunft voraus. Diesen Blick

muss der Web-Designer haben,

nicht der Auftraggeber.

21









Exemplarische Inhalte

Nach der Analyse der Inhalte kön-

nen exemplarische Inhalte für die

Website angenommen werden,

die immer wiederkehren. Gerade

diese Inhalte müssen in das De-

sign-Konzept einfliessen.


KontaktProdukte


PDF-Dokumente mit viel Text und

Abbildungen

Inhaltsseiten mit verschieden hierar-

chischen Überschriften und gege-

benenfalls langen Texten, evtl. mit

mehreren Abbildungen mit Legenden

und Bildüberschriften

Übersichtsseiten mit verschieden hie-

rarchischen Überschriften und kurzen

Texten, evtl. mit mehreren Abbildun-

gen mit Legenden und Bildüberschrif-

ten, Links im Inhaltsbereich

Inhaltsseiten mit Kontaktinformation

und E-Mail-Formular

22






Art Kurzbeschreibung Repräsentant

Seitentitel Beschriftung des Browserfensters <title>

Produkt-Suite-Logo Anzeige des Logos gif-Bild

Produktlogo Anzeige von Inhalt abhängig (eins oder null) gif-Bild

Dateipfad Als Orientierung und alternative Navigation

Titel Darstellung der Seitenüberschrift <h1>

Lead Darstellung der Einführung in den Seiteninhalt

Überschrift 1 Darstellung von Überschriften über Textabschnitten <h2>

Grundtext Darstellung von Lesetext <p>

Textlinks Darstellung von Hyper-Verweisen im Text <a>

Link-Button Darstellung von Links zu einer ‹Mehr›-Ansicht

Blockhafte Hervorhebung im Text Darstellung von Fokus-Elementen (‹Kasten›)

Bildüberschrift Darstellung von Überschriften über einem oder mehreren Bildern

Bilder Darstellung und Integration von Bildern

Legenden Darstellung von Bildbeschreibungen

Nummerierte Aufzählungen Darstellung von nummerierten Aufzählungen

Unnummerierte Aufzählungen Darstellung von unnummerierten Aufzählungen

Tabellen Darstellung von tabellarischen Inhalten

Copyright Darstellung der Copyright-Zeile

Welche Elemente werden für

die Präsentation des Inhaltes

benötigt?

Um das semantische Problem

‹Wie stelle ich etwas dar?› ange-

hen zu können, muss erst einmal

bekannt sein, was dargestellt

werden soll. Welche Elemente

werden im Inhalt verwendet?

Welche werden zusätzlich

benötigt? Erst später kann sich

der Gestalter über die Darstellung

Gedanken machen.

23









Seitentitel Produkte/Mobile Mantra Office Plus

Dateipfad Produkte/Mobile Mantra Office Plus

Lead Mit Mobile Mantra Office Plus versenden Sie einfach, sicher und schnell SMS und Paging-Meldungen

über Internet (via TCP/IP) und über Modem (analog oder ISDN) aus einer Desktop-Applikation. Sie

können Ihre Adressen aus Microsoft Exchange/Outlook importieren. Die SMS-Empfangsbestätigung

sehen Sie direkt, Sie können Ihre Meldungen zu einem bestimmten Termin versenden und Sie können

die Empfänger in Gruppen zusammenschliessen.

Grundtext Mobile Mantra Office Plus unterstützt alle gängigen GSM-Netze weltweit und die Paging-Netze Euro-

message (Schweiz, Deutschland, Frankreich, Italien) und TPS (Schweiz). Die Einzelplatzversion Mobile

Mantra Office Plus ist die ideale Kommunikationssoftware für KMUs und Unternehmen oder Orga-

nisationen mit wenigen Arbeitsplätzen, die neben SMS auch Paging-Meldungen versenden wollen.

Durch das Versenden über Internet und Modem entsteht Redundanz, die Meldung kommen auf zwei

Kanälen noch sicherer ans Ziel. Die Software stellt wenig Anforderungen an Ihr Computer-System, sie

ist einfach und schnell in der Handhabung, ermöglicht einen kostengünstigen und schnellen Versand

von Meldungen über zwei Kommunikationskanäle (Internet und Modem) und sie ist integriert in MS

Outlook. Das bedeutet: Es ist weder eine separate Installation noch eine separate Schulung nötig. Ein

übersichtliches zentrales Tool für die interne Verrechnung ist bereits in Entwicklung.

Überschrift 1 Systemanforderungen

Unnummerierte Aufzählungen Hardware

– Intel® Pentium® III mit mindestens 128MB RAM und mindestens 15MB freier Harddisk-Speicher, CD

– Laufwerk für Installation ab CD

Betriebssystem

– Microsoft® Windows® 95/98/ME/Windows NT®* 4.0 mit Service Pack 5 oder 6, Windows 2000,

oder Windows XP

Software

– Microsoft® Outlook® 2000, Internet Explorer 5.0.1 oder höher für Windows NT Nutzer

Web-Zugang

– via LAN oder Modem (Analog/ISDN) über Com-Port

Tabellen Preise 1-5 Lizenzen (Preis pro Lizenz) CHF 650.00

Mehr als 5 Lizenzen (Preis pro Lizenz) CHF 590.00

Grundtext Alle Preise ab Werk, exklusive Mehrwertssteuer. Garantie: 1 Jahr. Diese Preisliste, gültig ab 15. Juli

2003, ersetzt alle früheren Ausgaben, Änderungen vorbehalten. Beachten Sie auch die Allgemeinen

Geschäftsbedingungen.

Copyright Copyright 2003 SWISSPHONE Telecom AG. Alle Rechte vorbehalten. Konzeption und Realisation 2003

dezember und juli

Beispiel

Die obenstehende Tabelle über-

prüft die erhobenen semantischen

Strukturen am Text einer geplan-

ten Seite.

24




Lösungsentwurf

Einführung

Lösungsentwurf

Am besten einmal vom Bild-

schirm Abstand nehmen – auch

wenn oder gerade weil das

Resultat später am Monitor

angezeigt wird. Eine gute Website

widerspiegelt die Realität, deshalb

müssen die Ideen vielleicht auch

jenseits vom Bildschirm entste-

hen, um tragfähig zu sein. Des-

halb frei nach Karl Gerstner: ‹Sie

wollen Web-Designer werden?

Dann nehmen Sie Papier und

Bleistift zur Hand – Sie müssen

lernen, Ideen zu formulieren›.

25







Lösungsentwurf

Bevor nun mit der eigentlich kreativen Tätigkeit begonnen wird, sollte das bisher geleistete ‹kritisch ge-

würdigt› werden: Ergeben die erhobenen Informationen und deren Analyse einen Sinn, sind Einflüsse

zu Tage gefördert worden, welche die Zielformulierung aus den Auftrag in Frage stellen und zu einer

Revision des Ziels führen?

Wenn nein, gehts weiter: Am Ende dieser Phase wird die Website Gestalt angenommen haben und

viele Fragen werden beantwortet sein. Welche Struktur hat die Website? Wie ist die Information zu-

gänglich, welches Navigationsprinzip wird angewendet? Welche Elemente stehen dem Benutzer als

Orientierungshilfe zur Verfügung? Und last but not least: Welches Kleid bekommt die Website?

26




Lösungsentwurf

Struktur

Struktur

Strukturen gibt es viele. Die pas-

sende zu finden – darin liegt das

Geheimnis. Jede Form von Inhalt

kann individuell strukturiert wer-

den. Aber bei jeder Struktur sollte

unbedingt bedacht werden: Panta

rhei – alles fliesst – eine Struktur

muss immer offene Stellen bereit-

halten, um neues aufnehmen zu

können.

27







Struktur

Die Qualität der Struktur einer Website kann sowohl für das Design, für die Verständlichkeit beim

Benutzer als auch für die Wartbarkeit matchentscheidend sein. Die Struktur entwicklelt sich aus den

erhobenen Inhalten. Sie setzt die Inhalte in Beziehung zu einander, sie unterwirft die Inhalte einem

Ordnungsprinzip. Es gibt verschiedene Ordungsprinzipien – häufig ist jenes, das sich der Realität anzu-

nähern versucht am erfolgversprechendsten, wahrscheinlich, weil es am einfachsten zu verstehen ist.

Allerdings – und das muss bei aller Strukturiertheit in die Überlegungen miteinbezogen werden – Web-

site-Benutzer navigieren oft absolut intuitiv, um nicht zu sagen: chaotisch. Der Benutzer wählt schneller

Links, hinter denen er das Ziel vermutet, als dass er sich die Mühe macht, die Umgebung nach passen-

deren Links zu durchforsten. ‹Explorativ› ist hier das Modewort: Nicht stringent und logisch, sondern

intuitiv, nach dem Lustprinzip. Vor diesem Hintergrund könnte man als Designer versucht sein, auf alle

Strukturen zu verzichten und den Dingen Ihren Lauf zu lassen. Das ist aber sicherlich aus verschiedenen

Gründen der schlechteste Weg. Vielmehr sollte der Web-Designer alternative Einstiege in den struku-

rierten Unterbau zulassen, welche eben nach dem explorativen Prinzip funktionieren. Daneben – nicht

anstatt! Die Struktur einer Website verbessert die Wartbarkeit ungemein, nicht zuletzt dann, wenn sie

sich von der Navigation über die Verkettung der Seiten bis hin zur (technischen) Verzeichnisstruktur

konsistent verhält.

Lösungsentwurf

28




Lösungsentwurf

Struktur

Support


Hersteller

Impressum Produkte









Mobile Mantra POP3

FAQs

Swissphone

Begrüssung



Hilfe/Produkt


Die Ausgangslage für die

Strukturierung: Die erhobenen

Inhalte.

Nach der Erhebung und Analyse

liegen die Inhalte unsortiert und

voneinander unabhängig auf dem

Tisch. Es geht nun darum die

Inhalte zu strukturieren, sie zu

nachvollziehbaren und benennba-

ren Einheiten zusammenzufassen.

29







Lösungsentwurf

Struktur

Begrüssung

Produkte

Support

Hersteller

Distributoren

Kontakt

Impressum









Mobile Mantra POP3

[Weiteres Add-On][Weiteres Produkt]

Swissphone

[Weiterer Distributor]

Bereich Thema Unterthema



Software zum Herunterladen

Hilfe/Produkt

Bestellprozedere

Struktur

In dieser Ansicht werden erstmals

Zusammenhänge sichtbar. Die

Strukturierungsarbeit orientiert

sich einerseits an der Realität und

berücksichtigt andererseits die

Ausbaubarkeit. Die Struktur der

geplanten Website muss offen

sein: Das heisst, sie muss zulas-

sen, dass neue Bereiche, neue

Themen undoder Unterthemen

problemlos zur Website hinzuge-

fügt werden können.

30




Lösungsentwurf

Navigation

Verschiedene Navigationstypen

führen den Benutzer zum Ziel

Die hierarchische Navigation,

das dynamische Menü, und

eine kombinierte bzw. verteilte

Navigation. Welcher Navigations-

typ der richtige ist, hängt von der

Aufgabenstellung ab – nicht vom

Geschmack des Designers.

31







Lösungsentwurf

Navigation

Die Navigation macht die Inhalte einer Website erst zugänglich. Im Unterschied zu einem Fachbuch

wird bei der Website auf jeder Seite das Inhaltsverzeichnis angezeigt. Dass dies den einen oder andern

Einfluss auf die Gestaltung hat, dürfte auf der Hand liegen. Mittlerweile haben sich verschiedene Typen

der Navigation etabliert – jeder mit seinen eigenen Vor- und Nachteilen. Am verständlichsten ist sicher

ein Navigationstyp, welcher versucht, die Struktur eines Inhaltsverzeichnisses abzubilden. Dieser Typ

befolgt den Grundsatz: Im Interface-Design soll sich möglichst viel an der Realität orientieren. Doch

gerade dieser Navigationstyp bringt Designer schnell einmal in die Bredouille, weil er sowohl vertikal

als auch horizontal viel Raum verlangt. Gerade in umfassenden Websites, wo besonders auf eine ver-

ständliche Navigation gesetzt werden sollte, funktioniert der Navigationstyp ‹Inhaltsverzeichnis› gestal-

terisch nur wenig befriedigend. Vor allem darf bei der Suche nach dem richtigen Navigationstyp nicht

vergessen werden, dass beim Stapellauf der Website lediglich ein erster Zustand abgebildet ist – die

Website wird sich verändern.

www.compendio.ch

www.dezemberundjuli.ch

www.eduscout.ch

32




Lösungsentwurf

Navigation

Begrüssung

Produkte

Support

Hersteller

Distributoren

Kontakt

Impressum









Mobile Mantra POP3


Swissphone






Hilfe/Produkt

Die Struktur bildet die

Ausgangslage für die Naviga-

tion.

Liegen erst einmal die Inhalte

strukturiert vor, kann der Web-

Designer damit beginnen, die

Inhalte untereinander (logisch) zu

vernetzen.

33







Lösungsentwurf

Navigation

Begrüssung

Produkte

Support

Hersteller

Distributoren

Kontakt

Impressum









Mobile Mantra POP3


Swissphone






Hilfe/Produkt

Bestellprozedere

Navigationsprinzip.

Aus dieser Darstellung wird

ersichtlich, wie die Inhalte mit

einander verknüpft, beziehungs-

weise auf welchen Wegen sie

erreichbar sind. Für das Design

der Navigation liefert diese

Darstellung zentrale Aussagen

darüber, welche Navigationstypen

überhaupt sinnvoll angewandt

werden können.

34










Willkommen

Produkte

Support

Hersteller

Distributoren

Kontakt

Impressum

Lösungsentwurf

Navigation

Willkommen

Produkte

Support

Hersteller

Distributoren

Kontakt

Impressum Mobile Mantra Server Monitoring


Mobile Mantra POP3







[Weiteres Produkt]

Willkommen

Produkte

Support

Hersteller

Distributoren

Kontakt

Impressum

1. 2. 3.

Welche Navigationstypen gibt es überhaupt?

Grundsätzlich kann man vier verschiedene Navigationsty-

pen ausmachen: Die hierarchische Navigation (‹Inhaltsver-

zeichnis›), das dynamische Menü, die kontextsensitive und

die verteilte Navigation. Sie werden hier kurz vorgestellt.

Jeder Typ hat seine Vor- und Nachteile – es gibt keine

abschliessenden Weisheiten über ihre Verwendung.

Die hierarchische Navigation

Die hierarchische Navigation orientiert sich an einem bekannten Element:

dem Inhaltsverzeichnis. Es spielt keine Rolle, wie die Hierarchiestufen aus-

gezeichnet sind. Wichig ist lediglich, dass Abhängigkeiten zum über- bzw.

untergeordneten Element deutlich sichtbar sind. Da dieser Navigationstyp

nicht dynamisch angezeigt wird, sondern kontextsensitiv, wird pro ange-

zeigte Hierarchiestufe auch eine neue HTML-Seite benötigt.

35







Lösungsentwurf

Navigation

Willkommen Produkte Support Hersteller










Mobile Mantra POP3








1.

Das dynamische Menü

ist immer häufiger anzutreffen. Es

orientiert sich an der Bedienung

von modernen Computersys-

temen und zeigt hierarchische

Abhängigkeiten durch ein Auf-

klappen eines Untermenüs beim

Berühren eines Menüpunktes.

Diese Art der Navigation kann

sehr schön und übersichtlich

sein. Aber durch den Einsatz von

viel Technik ist dieses Navigati-

onsprinzip einerseits nicht ganz

einfach herzustellen und es ist

dazu recht fehleranfällig.

Fokus:

Vorsicht mit Navigationsele-

menten bestehend aus Bildern

Es soll wohlüberlegt sein: werden

Bilder als Navigationselemente

eingesetzt, etwa um Schriftef-

fekte zu erzielen, müssen beim

Hinzufügen eines neuen Links

die entsprechenden Bilder neu

aufbereitet werden. Also wenn

schon mit Bildern arbeiten, dann

auf keinen Fall vergessen, sich

Vorlagen zu erstellen!

36










Willkommen

Produkte

Support

Hersteller

Distributoren

Kontakt

Impressum



Mobile Mantra POP3

Willkommen Produkte MobileMantra POP3

1. 2. 3.

Die kontextsensitive Navigation

zeigt jeweils nur die im aktuellen

Bereich erreichbaren Verweise

im Navigationsbereich. Um über-

geordnete Verweise (wieder) zu

erreichen, muss ein ‹Zurück›-Be-

fehl zur Verfügung stehen. Häufig

wird bei diesem Navigationstyp

der gesamte gewählte Pfad auf-

gezeigt, um auch auf Hierarchien,

die weiter zurückliegen, direkt

zugreifen zu können.

Lösungsentwurf

Navigation

37
























Mobile Mantra POP3

Die verteilte Navigation

zeigt die verschiedenen Ver-

weishierarchien an verschiede-

nen Orten auf dem Bildschirm.

Diese Navigation wird häufig bei

Websites verwendet, welche mit

Frames konstruiert wurden. Dabei

verliert der Benutzer sehr schnell

die Orientierung.

Lösungsentwurf

Navigation

38




Lösungsentwurf

Orientierungssystem

Kryptische Zustände

Zwei Websites, aufgerufen über

google.ch – zwei kryptische Zu-

stände: Weder bei Apple noch bei

UBS kann man sofort nachvoll-

ziehen, wo in der Website man

gerade gelandet ist.

39






zielorientiertes Web-Design mit HTML Lösungsentwurf

Orientierungssystem

Dem Orientierungssystem kommt im Web-Design eine entscheidende Funktion zu. Für die meisten Be-

nutzer ist das Internet ein – im besten Sinne des Wortes – unfassbarer Raum, im dem sie sich bewegen.

Kaum jemand kann – etwa anhand der Internetadresse – seinen genauen Standort nachvollziehen. Und

die Gefahr, sich zu verlaufen, ist gross. Das nicht-lineare Durchforsten einer Website und das Unwissen

darüber, was noch kommen mag, ist der zentrale Unterschied etwa zum Buch oder zur Zeitung. Das

Orientierungssystem hilft dem Benutzer: Er kann dadurch nachvollziehen, wo er sich gerade befindet

und es gibt ihm Hinweise, was geschieht, wenn dies oder jenes gemacht wird oder wurde. Leider wer-

den Orientierungssysteme nur selten konsequent angewendet, was sich besonders dann sehr kritisch

auswirken kann, wenn Web-Seiten über eine Suchmaschine gefunden werden und man mit einem

Klick irgendwo in der Website landet. Gute Orientierungssysteme sind redundant aufgebaut und sind

dadurch fehlertolerant. Das bedeutet, dass sie immer noch funktionieren, auch wenn ein Benutzer ei-

nen Teil des Orientierungssystems nicht wahrgenommen hat. Das Beispiel ‹mobilemantra› zeigt später

ein solches redundantes Orientierungssystem.

Danke für die Hilfe!

bluewin.ch zeigt in einer Zeile an,

wo man sich befindet. Nicht das

Nonplusultra eines Orientierungs-

systems, aber immerhin!

40




Lösungsentwurf

Orientierungssystem

Support


Hersteller

Impressum Produkte









Mobile Mantra POP3

FAQs

Swissphone

Begrüssung



Hilfe/Produkt


Orientierung durch Farbe

taugt für den Benutzer häufig

recht wenig. Die Zusammenhän-

ge sind nicht zwingend, und ge-

rade wenn Farbe subtil eingesetzt

wird, bleibt ihr Einsatz eher ein

formales denn ein funktionales

Element.

41







Lösungsentwurf

Orientierungssystem

Support


Hersteller

Impressum Produkte









Mobile Mantra POP3

FAQs

Swissphone

Begrüssung



Hilfe/Produkt

Sorfwaredownload/Produkt

Orientierung durch Form

bedeutet, dass dem Benutzer

Elemente bereitgestellt werden,

welche für einen Bereich oder

eine Hierarchie stellvertretend

sind. Aber Formen sind nicht

bedeutungstragend, sagen also

nichts wirklich Eindeutiges aus

und verlangen deshalb zu hohe

Lernfähigkeit und Abstraktion.

42




Lösungsentwurf

Orientierungssystem



Mobile Mantra POP3







[Weiteres Produkt]

Willkommen

Produkte

Support

Hersteller

Distributoren

Kontakt

Impressum

Orientierung durch Hervorhe-

bungen in der Navigation.

Zweifellos eine sehr geeignetes

Orientierungssystem, weil es

leicht verständlich ist: In einer hie-

rarchischen (oder auch verteilten)

Navigation werden jene Elemente

hervorgehoben, die in Abhängig-

keit stehen. Können aber inner-

halb der Website Seiten angezeigt

werden, welche über das Menü

nicht erreichbar sind, versagt

diese Art von Orientierung.

43







Lösungsentwurf

Orientierungssystem

Produkte Mobile Mantra Add-Ons Mobile Mantra POP3> >

Orientierung durch Anzeige des

‹gewählten Weges›

bedeutet, dass alle Hierarchi-

en, welche bisher durchlaufen

wurden, folgerichtig aufgeführt

werden. Diese Art des Orientie-

rungssystems kann mit der Anzei-

ge eines Dateipfades verglichen

werden.

Fazit

Der Einsatz eines redundanten,

also vielfältig abgestützten Orien-

tierungssystems schafft für den

Benutzer ein fehlertoleranteres

Umfeld. Besonders ein ausfor-

muliertes, ein ‹ausgedeutschtes›

Orientierungssystem ist als letzte

Rettung immer sehr hilfreich.

44




Lösungsentwurf

Design

Skizzen mit minimalen techni-

schen Überlegungen

Es lohnt sich – besonders als

Newbie im Bereich Web-Design

– zuerst Skizzen in vorgedruckte

Browserfenster zu erstellen. Diese

Skizzen können sowohl grobe

Proportionen und Dimensionen

abbilden wie auch erste Überle-

gungen enthalten, wie sich die

Web-Seite an verschiedene Brow-

serfenstergrössen anpassen soll.

Ebenso kann überprüft werden,

ob das Scrollen von langen Seiten

gestalterisch interessant bleibt.

Das gilt für Frame- und Tabellen-

konstruktionen!

Ebenso lässt sich anhand einer

solchen Skizze auch in etwa

abschätzen, ob die Summe aller

fi xen Breiten (Bilder und Spalten)

die Breite des üblichen A4-Hoch-

formates beim Ausdruck nicht

überschreitet.

Variabler Bereich

45







Design

Nun zur eigentlich kreativen Arbeit: Unter Berücksichtigung der bisher vollzogenen Schritte kann nun

mit der Gestaltung, mit dem eigentlich sichtbaren Lösungsentwurf der Website begonnen werden.

In einem ersten Schritt geht es darum – wie überdies in jedem andern Designprozess auch – nach-

zudenken, zu schreiben, zu skizzieren. Valable Begleiter dabei sind auf A4-Papier ausgedruckte, leere

Browserfenster, in welchen Skizzen angefertigt werden können. Sinnvollerweise skizziert man in

Browserfenstern unterschiedlicher Dimension und Proportion, so stellt man von Anfang an sicher,

dass die Website in verschiedenen Umgebungen funktioniert. Ist man überzeugt, einen brauchbaren

Entwurf gefunden zu haben, fertigt man noch eine Skizze des gewünschten Ausdrucks einer Web-

Seite an. Erscheint auch diese Skizze sinnvoll und machbar, kann damit begonnen werden, das Design

in Photoshop umzusetzen. Warum sich ausgerechnet Photoshop dafür eignet, wird weiter hinten in

diesem Kapitel beschrieben. Die gestalterische Arbeit in Photoshop ist mühsamer, als man sich dies

von Layout-Programmen gewohnt ist. Um so wichtiger ist es, Schritt für Schritt zu gestalten, immer

wieder kritisch zu hinterfragen und sehr sauber zu arbeiten. Denn was jetzt erstellt wird, dient später als

‹Halbfabrikate-Lager› für die Realisierung des Prototypen. Denn Photoshop erlaubt es, die benötigten

Teile des Designs als Bild-Dateien zu exportieren.

Zwei Punkte sind also im Hinblick auf das Ende dieses Schrittes besonders erwähnenswert: Erstens

sollte in Photoshop sinnvoll mit Ebenen gearbeitet werden – die wird Datei später noch intensiv als

‹Rohmateriallager› benötigt –, zweitens müssen alle Seiten abgebildet werden, die für das Verständnis

des Konzeptes relevant sind. Schliesslich werden die Dateien dem Auftraggeber präsentiert.

Lösungsentwurf

46




Lösungsentwurf

Design

47







Lösungsentwurf

Design

Lösungsfindung

Im vorliegenden Fall konnte die

Lösungsfindung stark abgekürzt

werden, da das Product-Design

sich für eine Anwendung auf

dem Web hervorragend eignete.

Grundsätzlich dient die Lösungs-

findung aber dazu, verschiedene

gestalterische Ansätze auf ihre

Machbarkeit hin zu prüfen, um

später den besten auswählen zu

können.

Ausarbeitung des Entwurfs

In Photoshop werden nun alle für

das Verständnis des Konzeptes

relevanten Seiten gestaltet und

bereits während des Gestaltens

fortwährend auf Machbarkeit hin

geprüft.

48




Das richtige Werkzeug:

Adobe Photoshop.

In Photoshop sollen die ver-

schiedenen Design-Elemente auf

Ebenen sauber verwaltet werden.

Die Datei wird dadurch nicht nur

zur Visualisierung des Designs

benötigt, sondern auch als ‹Halb-

fabrikate-Lager› für die spätere

Bild-Erstellung.

Lösungsentwurf

Design

49







Mit den Hilfslinien die Mach-

barkeit schon während des

Gestaltens immer wieder

überprüfen.

Mit den Hilfslinien kann der Ras-

ter, wie er später programmiert

werden könnte, schon mitgedacht

werden. Anhand der Hilfslinien

kann sich der Gestalter bei der Po-

sitionierung neuer Elemente be-

reits vorstellen, ob die gewünsch-

te Position im bestehenden Raster

abgebildet werden kann oder

ob neue, feinere Unterteilungen

notwendig werden. Diese können

die Website komplizieren oder

einschränken.

Lösungsentwurf

Design

50




Lösungsentwurf

Design

51







Illustrator oder Photoshop?

Eine immer wieder heiss disku-

tierte Frage, wenn es um Web-

Design geht. Illustrator ist im

Umgang zweifellos das handliche-

re Werkzeug. Und seit auch mit

der Masseinheit Pixel gearbeitet

werden kann, ist es grundsätzlich

möglich, bei einer 100%-Ansicht

auch in Illustrator verbindlich zu

arbeiten. Die Nachteile: Illustrator

kann Schriften nur generell oder

gar nicht glätten, was dazu führt,

dass die Schriftdarstellung nicht

nach dem späteren Verwen-

dungszweck (Text oder Bild)

ausgerichtet werden kann. Auch

wenn das Design in der Ansicht

vergrössert wird, erscheinen

Zeichnungs elemente gestochen

scharf anstatt gepixelt, dies

ebenso im Ausdruck, was die

spätere Darstellung am Monitor

nicht simuliert. Grundsätzlich sind

pixel-orientierte Werkzeuge beim

Web-Design vorzuziehen, obwohl

sie im Umgang wesentlich müh-

samer sind. Denn ihnen liegt der

exakt gleiche Aufbau zu Grunde,

wie später auch der Seite im

Web. Dies macht sich besonders

beim Exportieren der Dateien

bemerkbar. Wahrscheinlich lässt

sich dort dank höherer Genauig-

keit jene Zeit wieder aufholen,

die beim etwas mühsameren

Arbeiten verlorenging.

Lösungsentwurf

Design

52




Lösungsentwurf

Design

Bild oder Text?

Bereits während des Gestaltens

muss sich der Designer über-

legen, welche Elemente pro-

grammiert und welche als Bild

geladen werden müssen. Diese

Entscheidung kann besonders bei

Schriften gegebenenfalls schwer-

wiegende Folgen für die Wartbar-

keit haben. Denn gerade wenn

Titel oder Navigationselemente in

Photoshop so gestaltet werden,

dass sie später als Bilder integriert

werden müssen, werden diese bei

jeder Aktualisierung neu erstellt

werden müssen. Alles, was im

Programmcode geändert werden

kann, führt in der Regel zu verbes-

serter Wartbarkeit.

53







Lösungsentwurf

Design

Ein Web-Design muss aussehen

wie ein Web-Design.

Selbstverständlich bieten sich

in Photoshop wesentlich mehr

Möglichkeiten, die Darstellung zu

optimieren, als später im Web.

Der Designer darf aber unter

keinen Umständen im Designvor-

schlag beschönigen, was später

nicht realisierbar ist. Dies gilt ins-

besondere für Schriftverwendung

und -darstellung. Spielereien

wie die ‹Quarz-Textglättung› sind

Mac-spezifisch und dürfen nicht

vorausgesetzt werden.

54










Willkommen

Produkte

Support

Hersteller

Distributoren

Kontakt

Impressum

Willkommen

Produkte

Support

Hersteller

Distributoren

Kontakt

Impressum Mobile Mantra Server Monitoring


Mobile Mantra POP3







[Weiteres Produkt]

Willkommen

Produkte

Support

Hersteller

Distributoren

Kontakt

Impressum

1. 2. 3.

Lösungsentwurf

Design

55







Navigations-Design

Achtung Design-Falle! Gerne

würde man nur die optimalen

Fälle im Design zeigen: Einzeilige

Verweise, schöner Flattersatz.

In der Regel gilt gerade bei der

Navigation Murphys Gesetz: Was

schiefgehen kann, geht schief.

Also: immer mehrzeilige Verweise

einkalkulieren! Und vor allem: Die

verschiedenen Zustände, welche

die Navigation annehmen kann,

bereits im Design abbilden.

Lösungsentwurf

Design

56




Lösungsentwurf

Design

57







Produkte Mobile Mantra Add-Ons Mobile Mantra POP3> >

Redundantes

Orientierungssystem

Vorliegende Website stellt die Ori-

entierung vielfältig sicher: Durch

den Einsatz von Farbe und Form,

durch die Anzeige des ‹gewähl-

ten Weges› – die letzte ‹Station›

entspricht dem Seitentitel – und

durch Hervorhebung in der

Navigation.



Mobile Mantra POP3





Willkommen

Produkte

Lösungsentwurf

Design

58




Ni

cht f

rank

iere

n

Ne p

as a

ffran

chir

No

n af

fran

care

Gesc

häfts

antw

orts

endu

ng

Invi

o co

mm

erci

ale-

rispo

sta

Envo

i com

mer

cial

-rép

onse

Swis

spho

ne A

GRo

osst

rass

e 53

CH-8

832 W

olle

rau

Gedankenübertragung ist eine feine Sache – Ihr Gesprächs-partner hört Ihre Gedanken und antwortet ebenso, einfach durch puren Willen, ohne Draht, ohne Welle, ohne Sender oder Empfänger, telepathisch. Leider funktioniert Telepa-thie nicht bei allen Menschen. Aber Mobile Mantra kommt der Telepathie ziemlich nahe. Diese Server- und Desktop-lösungen funktionieren wie E-Mail-Software, integrieren darüber hinaus aber nahtlos Mobilgeräte und ihre Techno-logien. Ob Pager, Handy (GSM, GPRS) oder Smartphone, Ihre Info kommt jederzeit überall an. Mobile Mantra unterstützt nahtlos auch Microsoft Outlook mitsamt Adressbuch.

Vorbei sind die Zeiten, wo Sie sich Ihre Finger wund telefo-nierten auf der Suche nach Ihren Mitarbeitern oder Kunden, vorbei die Zeiten, wo Ihr Server klammheimlich abstürzte, ohne sich von Ihnen zu verabschieden. Wer Sie auch sind, wen Sie auch immer erreichen wollen, Mobile Mantra bietet Ihnen die Lösung für Ihre persönliche oder Ihre Firmenkom-munikation.

Swissphone vertreibt Mobile Mantra in der Schweiz exklusiv.

Mobile Mantra verbindet Welten Die Mobile Mantra Produkt-Suite im Überblick

Mobile Mantra Enterprise, die Netzwerkversion von Mobile Mantra Offi ce Plus, ist als Version für Microsoft Exchange und als Stand-alone-Version erhältlich, mit zentraler Verwaltung der Lizenzen und Berechtigungen. Die Software arbeitet mit bestehenden Exchange/Outlook-Adressbüchern.

Mobile Mantra Enterprise für Microsoft ExchangeMobile Mantra Enterprise ist die ideale Kommunikationssoftware für Unternehmen oder Organisationen mit mehreren Arbeitsplätzen, welche Microsoft Exchange als Kommunikationssystem benutzen. Sie versenden damit von mehreren Arbeitsplätzen in einem Netzwerk via Microsoft Exchange einfach und schnell SMS und Paging-Meldungen über Internet und Modem (analog oder ISDN). Mobile Mantra Enter-prise stellt Ihnen in Microsoft Outlook einen integrierten SMS- sowie einen Paging-Button zur Verfügung. Diese Buttons machen den Ver-sand von Meldungen so leicht wie das Versenden einer E-Mail.

Mobile Mantra Enterprise als Stand-alone-VersionMobile Mantra Enterprise ist die ideale Kommunikationssoftware für Unternehmen oder Organisationen mit mehreren Arbeitsplätzen. Mit Mobile Mantra Enterprise versenden Sie aus einer Desktop-Applika-tion einfach und schnell von mehreren Arbeitsplätzen in einem Netz-werk SMS und Paging-Meldungen über Internet und über Modem (analog oder ISDN).

Mobile Mantra Offi ce Mit Mobile Mantra Offi ce versenden Sie sicher und schnell SMS über Internet aus einer Desktop-Applikation und nutzen dabei Ihr beste-hendes Outlook-Adressbuch. Diese Einzelplatzversion ist die ideale Kommunikationssoftware für KMUs und Unternehmen oder Organi-sationen mit wenigen Arbeitsplätzen. Die Software stellt wenig Anfor-derungen an Ihr Computer-System, sie ist einfach in der Handhabung und ermöglicht einen kostengünstigen und schnellen Versand von Meldungen übers Internet.

Offi cemobilemantra

Enterprisemobilemantra

Mobile Mantra Messaging License Für die einzelnen Mobile-Mantra-Produkte können Sie SMS und Paging-Meldungen im Pre-paid-Verfahren einkaufen. Diese Message-Lizenzen können mit einem Message Key pro Anwendung aktiviert werden; bei Mobile Mantra Enterprise können Sie die Lizen-zen zentral verwalten.

Your Software inspired by SadhuKeine Angst: Es ist ein Sadhu, ein hei-liger Mann. In Indien und Nepal ge-hören Sadhus zum Strassenbild. Sie legen unglaublich harte Gelübde ab und suchen nach der Erleuchtung. Über Sadhus gibt es viele Anekdoten, und eine davon erzählt, Sadhus kom-munizierten mittels Telepathie. Weil aber Telepathie bei uns westlichen Menschen nur bedingt funktioniert, bietet Ihnen Swissphone Mobile Mantra an, eine Software, die von der Telepathie der Sadhus inspiriert ist – ob Pager, Handy (GSM, GPRS) oder Smartphone, Ihre Info kommt jederzeit überall an. Mobile Mantra bietet Ihnen die Lösung für Ihre persönliche oder Ihre Firmenkom-munikation. Es soll inzwischen sogar Sadhus geben, die Mobile Mantra der Telepathie vorziehen.

MessagingLicense

mobilemantra


MessagingLicense


mobilemantra

Mobile Mantra Messaging Platform Die Messaging Platform bietet Ihnen eine Komplettlösung für viele Anwender mit hohem Meldungsvolumen. Als kommerzielle Lösung stellt die Messaging Platform das ideale Kommunikationswerkzeug für Service-Provider und grosse IT-Abteilungen dar. Die Messaging Platform ist auch als ASP-Lösung (Application Service Provider) ver-fügbar. Damit können Wireless-Server im Outsourcing-Verfahren rund um die Uhr effi zient betrieben und unterhalten werden.

Die Messaging Platform ist eine stabile Lösung auf der Basis von neuesten Technologien, sie bietet sehr hohen Datendurchsatz und ein benutzerfreundliches Graphical User Interface (GUI) für Wireless Server.

Mobile Mantra Add-Ons: alternative Softwaremodule.Mobile Mantra Server Monitoring Mit Server Monitoring können Sie permanent eine Auswahl von Ser-vern und Applikationen überwachen lassen. Bei Störungen sendet das System automatisch Meldungen (SMS, Paging über Internet, Analog-/ISDN-Modem) an vordefi nierte Personen, generiert E-Mails oder startet eine Applikation.

Mobile Mantra Command Line Das Command Line Tool ist ein alternatives Softwaremodul für den Versand von SMS und Paging-Meldungen. Es hilft bei der Erstellung von Scripts und kann einfach in bestehende Fremdapplikationen eingebaut bzw. integriert werden.

Mobile Mantra POP3 POP3 verwandelt E-Mail-Nachrichten in Paging- oder SMS-Meldun-gen, die Sie überall empfangen können.

Mobile Mantra Offi ce Plus Mit Mobile Mantra Offi ce Plus versenden Sie einfach, sicher und schnell SMS und Paging-Meldungen über Internet und Modem (analog oder ISDN) aus einer Desktop-Applikation und nutzen dabei Ihr bestehendes Outlook-Adressbuch. Die Einzelplatzversion Mobile Mantra Offi ce Plus eignet sich für KMUs und Unternehmen oder Organisationen mit wenigen Arbeitsplätzen. Durch das Versenden über Internet und Modem entsteht Redundanz, die Meldung kommt auf zwei Kanälen noch sicherer ans Ziel.

Offi cePlusmobilemantra

Enterprise


mobilemantra


AddOnsmobilemantra

MessagingPlatform

mobilemantra


mobilemantra

Mobile Mantra ist eine Produkt-Suite der SWISSPHONE AG

SWISSPHONE Telecom AGRoosstrasse 53CH-8832 Wollerau

E-Mail [email protected] www.swissphone.com/mobilemantraHelpdesk 0848 88 99 99

Swissphone betreut seit März 2003 alle Schweizer Page-It- und Mobile- Mantra-Kunden exklusiv und stellt für Mobile Mantra eigene Marketing-, Verkaufs- und Support-Spezialisten ab. Das Produkt wird durch den Software-Hersteller Dharohar Info Tech AG (DIT) supported und mit einem Entwick-lungsteam in Indien angepasst und weiterentwickelt. Swissphone betreibt den Mobile Messaging Service.

Zudem hat Swissphone an der Mobile-Mantra-Entwicklerin DIT eine Minder-heitsbeteiligung erworben. Swissphone beteiligt sich ausserdem fi nanziell an kundenspezifi schen Anpassungen und der Weiterentwicklung.

Swissphone ist ein unabhängiges Schweizer Unternehmen mit über 350 Mitarbeiterinnen und Mitarbeitern. Als Pionier im Bereich der Funkrufalar-mierung entwickelte sich Swissphone im Laufe der Zeit zu einem europaweit führenden Anbieter von Mobilkommunikationslösungen. Swissphone enga-giert sich für Kunden aus den Segmenten Industrie, Hospitality, Behörden, Or-ganisationen mit Sicherheitsaufgaben, Pharma und Finanzdienst leistungen.

Seit ihrer Gründung konzentriert sich Swissphone auf Entwicklung, Pro-duktion und Betrieb von Kommunikationstechnologien für den mobilen Bereich. Sie verfügt darin über umfassendes Know-how. Gleichzeitig arbeitet Swissphone als Operator (mit eigenen Paging-Netzen), Service-Provider und Hersteller.

Swissphone – seit Jahrzehnten Ihr Partner für mobile Kommunikation und Alarmierung.

Page-It goes Mobile Mantra

Haben Sie Fragen zu unseren Produkten? Rufen Sie uns an – wir informieren Sie gerne.


mobilemantra

Wer steht hinter Mobile Mantra?

Mobile Mantra, das Nachfolgeprodukt der erfolg-reichen SMS/Paging Software ‹Page-It›, bietet eine umfangreiche Palette von mobilen Kommunika tions-werkzeugen (Mobile Messaging Tools) für professio-nelle Anwender wie beispielsweise Logistikunter-nehmen, Organisationen mit einer sehr mobilen Belegschaft, Service-Organisationen, Call-Center und IT-Departments.

Da die Anwendungsbereiche und Möglichkeiten die-ser Software so breit gefächert sind, hier nur die drei wichtigsten Features:

Mobile Mantra ermöglicht den Versand von SMS- und Paging-Meldungen mittels einer Desktop- Applikation an alle Arten von mobilen oder statio-nären Kommunikationsgeräten wie Pager, Handy (GSM, GPRS) und Smartphone.

Mit Mobile Mantra können Sie direkt aus Microsoft Outlook Meldungen übers Internet versenden und Ihr bestehendes Outlook-Adressbuch benutzen.

Mobile Mantra hilft Ihnen bei der Überwachung von Servern und Applikationen, Sie können defi nieren, welche Personen von Mobile Mantra benachrichtigt werden sollen.

Excellence in Mobilcom

Mobile M

essaging Solutions.

Near Telepathy.

mo

bilem

antra

Bitte senden Sie mir U

nterlagen zu folgenden Produkten:

M

obile Mantra O

ffi ce M

obile Mantra Add-O

ns

M

obile Mantra O

ffi ce Plus M

obile Mantra M

essaging Platform

M

obile Mantra Enterprise

Mobile M

antra Messaging License

Ich m

öchte mehr w

issen, rufen Sie mich an:

Telefon

Uhrzeit

Nam

e Firm

a

Vorname

Strasse

Funktion PLZ/O

rt

E-M

ail

Ich m

öchte regelmässig per E-M

ail-New

sletter über die Mobile M

antra Produkt-Suite informiert w

erden.

Lösungsentwurf

Design

59







Lorperos num velit incillaor Mobile Mantra Offi ce V2.0





mobilemantra

Offi ceV 2.0

Lorperos num velit sim quipis nos aute velisci ex euis atuer incillaor Mobile Mantra Enterprise V2.0


www.mobilemantra.ch


Telefon +41 (0)1 786 77 70Telefax +41 (0)1 786 77 71

[email protected]

Ecte commy nibh eu feum irit praessi. Lorpero core dip el utpat wisisl do del ipsum.Lore dion ex er sit euipsum veliquisse core commy nonsed dolenissi.

Lore dolorperat, vel dolore feum ex esecte doloborem auguer se-quat. Duis nulla consectem vel elit, consenis augiamet lum nibh exer sit lum aut lut lor si tem del dolore enis nulla ate dolutat au-gait loboreet, summy nullan ulput nostrud molent niate tin ute doloreet wiscincin exer sum ipit wisciduip macillandre.

Lore consequat ametue dolenisl eu feu feugait utem zzriust onsequatem dolobore elissim ing eugait adignia etumsandiat pratuero dipit wis augiat nonullam, veliquis nostis doloreet pra-essenis duisi.

Duis nullum essismod ea feumsan:> Ionse molore enim etuer acidunt nulputpat velendre> Et praesto etuer inci tin henibh eu faccum dignit at nosto> Facinim accummy nit, venit wiscinis esequipit alit dolore ero


Lore dolorperat, vel dolore feum ex esecte doloborem auguer se-quat. Duis nulla consectem vel elit, consenis augiamet lum nibh exer sit lum aut lut lor si tem del dolore enis nulla ate dolutat augait loboreet, summy nullan ulput nostrud molent niate tin ute doloreet wiscincin exer sum ipit wisciduip euipsummy num-mod euisit, suscipit ipit nulput prate dolore magna aut alit nis acillandre dolummy nullamconse dolorperat.

Lore magnis ea facil duipit dolor ilisl delit in et augait dignisi.Duipit ad magna faciliquis alissed dolobore min henim quate dolor sim ing et loreet adip eu feu feum vel eugueril ut iuscing eugait velit, si. Duis et wis nullamc nsequat. Dui tie del iliquat.

Et ipsustrud minim ad dit dunt ing euguerc ncipit nonse modip ea facin henit nulla feu feu feu faciduisAute magna faccum del ipsustrud dolore vent lutat, consecte delissim nosto odolore commodigna feu faccum in utpat iniam, quate velestrud doluptatem dit numsan er in estrud nit.

Ut iriuscilis nulla aci eugue vullam iril dolore mod etue min el euis adit dunt ulla amconsequat. Dui bla consequam, quat. Ut luptatu riuscipsum zzrillum dit numsan er in estrud modolor ercillaor sequi tetum volore tat, consectet lorperaesto commy nonseni iscil utetum ilit luptat nim dipis num:> Facinim accummy nit, venit wiscinis esequipit alit dolore ero


Ad dit dunt ing euguerc ncipit

Dolobore dolorem Eum eugiam et venit

Vel ipis Niamquipisi

Eugue dolore Tem accum

Deliquisit alis Dionsed magnisl dolore

Tincil Utem vent

Praestin Ute dolor ing exeriure voluptat. Dui te diam, sisi eum zzrit autat.

Duissi blaore Feui tatum ing

<Dui tie del iliquat. Ut iriuscilis nulla aci eugue vullam iril dolore mod etue min el euis adit dunt ulla amconsequat.

<Ut luptatu riuscipsum zzrillum dit numsan er in estrud modolor ercillaor sequi tetum volore tat, consectet lorperaesto


mobilemantra

Offi ceV 2.0

Lorperos num velit incillaor Mobile Mantra Paging V2.0




PagingV 2.0


mobilemantra

Lorperos num velit incillaor Mobile Mantra Enterprise V2.0

EnterpriseV 2.0


mobilemantra




Lorperos num velit incillaor Mobile Mantra Command Line V2.0




Command Line

V 2.0


mobilemantra

Lorperos num velit incillaor Mobile Mantra Messaging License V2.0




MessagingLicense

V 2.0


mobilemantra

Lorperos num velit incillaor Mobile Mantra Messaging Platform V2.0




MessagingPlatform

V 2.0


mobilemantra

Mobile Mantra Offi ce


mobilemantra

Offi ce

Mobile Mantra Offi ce Plus

Offi cePlus


mobilemantra

Enterprise


mobilemantra


Mobile Mantra AddOns

AddOns


mobilemantra

Mobile MantraMessaging Platform

MessagingPlatform


mobilemantra


MessagingLicense


mobilemantra

Integrationsprinzip

Die Website als integrales

Element des Product-Design:

So muss es sein!

Lösungsentwurf

Design

60




Lösungsausarbeitung

Nun gehts ans Eingemachte: Der

Prototyp ist die Nagelprobe für

das Design. Hier zeigt sich, ob

alles so funktioniert, wie dies vom

Designer gewünscht ist. Es kann

sein, dass kleinere Kompromisse

eingegangen werden müssen,

aber grundsätzlich sind die Photo-

shop-Dateien als Ausgangslage

verbindlich.


Einführung

61








Nachdem der Auftraggeber das Design aufgrund der Photoshop-Dateien und der (schriftlichen) Erläu-

terungen des Designers bewertet, ggf. bei mehreren Lösungsvarianten ausgewählt und freigegeben

hat, muss das Design in einen funktionstüchtigen Prototypen überführt werden. Wie die Photoshop-

Dateien muss auch der Prototyp alle für das Verständnis des Konzeptes relevanten Seiten und Elemente

abbilden. Das Wichtigste beim Programmieren des Prototypen (und auch der späteren Website) ist, in

sehr kleinen Schritten vorzugehen, um auftretende Schwierigkeiten nach und nach beheben zu können.

Folgende Schrittfolge hat sich dabei bewährt:

1. Arbeitsvorbereitung (Konstruktion) aufgrund der Photoshop-Dateien

2. Programmierung einer Vorlage mit allen allgemeingültigen Elementen

3. Tests der Vorlage auf relevanten Browsern und Betriebssystemen

4. Schrittweises Duplizieren der Vorlage in die verschiedenen Bereiche

5. Wo nötig, Anpassungen pro Bereich an der Vorlage vornehmen

6. Schrittweises Duplizieren der Vorlage innerhalb der einzelnen Bereiche

7. Wo nötig, Anpassungen pro Seite an der Vorlage vornehmen

62





Konstruktion

Konstruktion

Konstruiert wird mit Bleistift und

Lineal – und mit dem Radier-

gummi! Selten sitzt die erste

Konstruktion, denn eine richtige

Einteilung des Designs in Raster-

felder, welche später mit Tabellen

programmiert werden können,

ist matchentscheidend und sollte

unbedingt mehrmals hinterfragt

werden.

63






zielorientiertes Web-Design mit HTML Lösungsausarbeitung

Konstruktion

Die Konstruktion dient als Ausführungsanweisung für die Programmierung. Hauptsächlich definiert die

Konstruktion die verschiedenen Rasterfelder, welche später mit Tabellenzellen oder anderen Blockele-

menten (wie Divisions oder Paragraphs) programmiert werden. Dieser Prozessschritt legt aber auch

fest, an welchen Stellen Raster ineinander verschachtelt werden müssen, wo und wie Bildelemente

integriert werden und welche Farben zum Einsatz kommen.

Frühestens nach dem das Design konstruiert wurde, kann der Designer zu einem Programmierer gehen,

um den Prototypen herstellen zu lassen. Häufig kann – und sollte auch – der Designer den Prototypen

mindestens in Teilen selbst programmieren. Die Erfahrungen fürs nächste Webdesign sind immens!

64





Konstruktion

Konstruktion

Die Konstruktion liefert den

Raster, welcher der Webseite

zu Grunde liegt. Sie gibt dem

Programmierer wichtige Anhalts-

punkte, welche Elemente sich

gegenseitig wie beeinfl ussen.

Die Konstruktion kann zusätzlich

auch vermasst sein, allerdings

ist es in der Regel einfacher, im

Hintergrund ein Bildbearbeitungs-

werkzeug offen zu halten, aus

welchem der Programmierer die

Masse bei Bedarf messen kann.

Primärraster

Sekundärraster

Tertiärraster

Divisions

65








Konstruktion

Bilder und Farben

in der Konstruktion

Der Gestalter defi niert in dieser

Darstellung, welche Elemente

überhaupt als Bilder integriert

werden sollen, und im weiteren,

welche Bilder als Hintergrund-

bilder in den Body undoder in

Tabellenzellen integriert werden

sollen.

Raster

Bilder

Hintergrundbilder

nicht repetierend

Hintergrundbilder

repetierend

<body>

66





Prototyp

Prototyp

Alles ist vorbereitet – ab an

die Werkzeuge! Nun muss der

Lösungsentwurf den Ernstfall pro-

ben. Aber man bedenke: Besser

einmal länger nachdenken bevor

man einen Nagel einschlägt, als

ihn nachher wieder mühsam zu

entfernen.

67








Prototyp

Der Prototyp ist die Nagelprobe. Hier zeigt sich, ob das Design in aller Konsequenz umgesetzt werden

kann. Es ist möglich, dass sich gegenüber dem Entwurf kleinere Änderungen ergeben. In unserem Bei-

spiel wurde etwa auf die Aufzählungszeichen (>) verzichtet, da deren Verwendung im Inhalt zu unnötig

komplizierten Konstruktionen geführt hätte. Beim Prototyping muss der Gestalter – auch wenn er den

Prototypen selbst programmiert – ein gutes Gespür für Kompromisse haben. Manchmal muss man sich

vom einen oder anderen Element verabschieden, zugunsten einer einfacheren oder zweckdienlicheren

Programmierung. Aber der Designer sollte sich, gerade beim Einsatz externer Programmierer, nicht ins

Bockshorn jagen lassen und unnötige Kompromisse eingehen. Nicht zuletzt aus diesem Grund ist es

äusserst wichtig, dass der Designer fundierte Kenntnisse über die Programmiertechnik hat.

Der Prototyp

Zeigt alles, was für das Verständ-

nis des Konzeptes und damit für

die spätere Realisierung relevant

ist. Da der Prototyp freigegeben

wird und auch vom Auftragge-

ber von diesem Zeitpunkt an als

verbindlich für die Realisierung

angesehen wird, kommt ihm

eine entscheidende Bedeutung

zu. Auch Verzeichnisstrukturen

und Dateinamen (insbesondere

index.htm oder default.htm) soll-

ten im Prototyp abgebildet sein.

68




1

2

3

4

6


Prototyp

Einfach, aber elementar:

Erstens eine Vorlage erstellen,

testen, dann erst duplizieren.

Mit diesem Vorgehen erspart man

sich jede Menge Korrekturauf-

wand und vor allem: Ärger!

Erstens: Vorlage auf erster Hierar-

chie erstellen und testen.

Zweitens: Vorlage in die Bereiche

kopieren und gegebenenfalls

Anpassungen für die jeweiligen

Bereiche vornehmen. Testen!

Drittens: Vorlagen der Bereiche in

die Themen kopieren und gege-

benenfalls wieder Anpassungen

vornehmen. Testen!

7

5

69







1


Prototyp

2

1

3

2

3

3

70





Prototyp

Verbindlich für die Freigabe

durch den Auftraggeber, ver-

bindlich für die Realisierung.

Im Prototypen werden alle

Elemente abgebildet, die für das

Verständnis des Konzeptes – des

Bauplanes! – relevant sind. Das

Design muss allen Tests stand-

halten, der Auftraggeber kann

erstmals die Website bedienen

und sich ein detailliertes Bild

machen.

71








Prototyp

Auch kritische Tests

durchführen!

Keine Tests auslassen, nichts ist

schmerzlicher, als später während

der Realisierung in Duzenden von

Web-Seiten den gleichen Fehler

korrigieren zu müssen. Oder

festzustellen, dass die Art des Sei-

tenrasters ein sauberen Ausdruck

verhindert – eine Feststellung mit

verherenden Folgen. Auch eine

Überlegung wert: Was könnte

in suchmaschinen angezeigt

werden?

72





Prototyp

Vorher – nachher

Das Design, erstellt in Photoshop

sollte – wenn alles von Anfang

richtig durchdacht wurde – kaum

vom Screenshot der program-

mierten Seite abweichen. Wird

der Prototyp nun von allen Betei-

ligten in allen Punkten freigege-

ben, steht der nächsten Phase,

der Realisierung, nichts mehr

im Wege. Mit dem Prototypen

ist eine perfekte Schnittstelle zu

externen Programmierern vorhan-

den und grössere Überraschun-

gen sollten ausbleiben!

73








Prototyp

74



zielorientiertes Web-Design mit HTMLLiteraturhinweise

75







Literaturhinweise

Gui Bonsiepe

Interface-Design neu begreifen

Bollmann

Rudolf Maresch und Florian Rötzer (Hg.)

Cyberhypes – Möglichkeiten und Grenzen des Internets

Edition Suhrkamp

Roy McKelvey

Hypergraphics – Design und Architektur von Websites

rororo

Richard Frick, Christine Graber, Samuel Marty, Martin Sommer (Autorenkollektiv)

Satztechnik und Typografie ‹Typografie am Bildschirm›, Band 5

Comedia Verlag Bern

Hans Rudolf Bosshard

Der typografische Raster

Niggli

Götz Schmidt

Methode und Techniken der Organisation

Verlag Dr. Götz Schmid

Eric A. Meyer

Cascading Style Sheets – The Definitive Guide

O’Reilly

Danny Goodman

Dynamic HTML – The Definitive Reference

O’Reilly

76




Notizen


Grundlagen für planmässiges und zielorientiertes Web-Design mit HTML

Dieses Lehrheft richtet sich an ausgebildete Gestalter/-innen, welche sich bereits mit den technischen

Grundlagen HTML-basierter Websites bestens auskennen. Man könnte nun annehmen, dass genau

diese Zielgruppe Lehrhefte nicht mehr so sehr nötig habe – das vorliegende demnach eher überflüssig

ist. Wir bekommen aber häufig zu hören, wie mühsam und nervenaufreibend es doch sei, Websites

zu entwickeln, gerade wenn dabei auch Schnittstellen zu externen Programmierern eine Rolle spielen.

Auch dass Websites scheinbar allzu oft nach ihrer Realisierung kaum mehr etwas mit dem ursprüng-

lichen Entwurf des Designers zu tun haben.

Das Entwickeln einer dienstleistungsorientierten Website ist ein Informatikprojekt und hat spätestens

nach dieser Erkenntnis mit reiner Intuition und Schöngeisterei herzlich wenig zu tun. Verbindlichkeiten

sind gefragt – und ohne planmässiges und zielorientiertes Vorgehen keine Verbindlichkeiten. Es scheint

also doch sinnvoll, ein Lehrheft anzubieten: Es zeigt das Vorgehen in koordinierter Schrittfolge vom Auf-

trag bis zum Prototypen. Mit dem Prototypen endet die Konzeption und damit meist auch die Aufgabe

des Designers. Das Konzept einer Website stellt den ‹Bauplan› für die anschliessende Realisierung dar

und ist dementsprechend wegweisend. Dieses Lehrheft vermittelt keine technischen oder gestalte-

rischen Grundlagen, ausser sie haben auf die Konzeption oder die Vorgehensweise schwerwiegenden

Einfluss – es dokumentiert lediglich anhand eines realen Projektes die Schritte zum Ziel.

Dieses Lehrheft wird an der Berufsschule für Gestaltung Zürich in der Ausbildung zum/zur ‹Typogra-

fischen Gestalter/-in für visuelle Kommunikation› eingesetzt und ist für das schulinterne Diplom prü-

fungsrelevant.

Patrick Jauch

absolvierte nach abgebrochenem

Gymnasium die Berufsausbildung

als Typograf. Er ist Mitinhaber

einer Agentur für Kommunikation

und Design. Erste Unterrichts-

tätigkeit im Bereich Web als

Lehrgangsleiter der Weiterbildung

zum ‹Dipl. Onlinegestalter› an

der IG Mac, Zürich. Heute leitet

er zusammen mit Richard Frick

die Fachklasse ‹Typografischer

Gestalter› an der Berufsschule für

Gestaltung Zürich, und unter-

richtet unter anderem die Fächer

Web-Design und Semiotik.

Birgit Ostertag

hat nach dem Abitur den Vorkurs

an der Hochschule für Gestaltung

und Kunst in Zürich absolviert

und danach die Ausbildung zur

Grafikerin abgeschlossen. Seit

ihrer Weiterbildung zur dipl.

Onlinegestalterin arbeitet sie als

Designerin und entwickelt haupt-

sächlich medienübergreifende

Corpo rate- und Product-Designs.

Die im vorliegenden Lehrheft als

Fallstudie verwendete Website

und das dazugehörige Product-

Design entstand unter ihrer Feder-

führung.

methodik des web-design

Documents