Post on 30-Mar-2016
description
Patrick Jauch
Birgit Ostertag
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Impressum
Patrick Jauch
Birgit Ostertag
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
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
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
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
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
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
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
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
Methodik des Web-Design
Grundlagen für planmässiges und
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
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Methodik des Web-Design
Grundlagen für planmässiges und
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
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
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 des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
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
Methodik des Web-Design
Grundlagen für planmässiges und
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
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Methodik des Web-Design
Grundlagen für planmässiges und
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, hmuster@swissphone.ch
Projektleiter Auftragnehmer MJung, mjung@dezemberundjuli.ch
Projektmitabereiterin BOstertag, (Design) bostertag@dezemberundjuli.ch
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
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
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.
Erhebung und Analyse
Einführung
13
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Erhebung und Analyse
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
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Erhebung und Analyse
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
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Erhebung und Analyse
Das Umfeld der Website
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
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Erhebung und Analyse
Das Umfeld der Website
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
Mobile Messaging Solutions.Near Telepathy.
mobilemantra
Mobile Mantra Enterprise
AddOnsmobilemantra
MessagingPlatform
mobilemantra
Mobile Messaging Solutions.Near Telepathy.
mobilemantra
Mobile Mantra ist eine Produkt-Suite der SWISSPHONE AG
SWISSPHONE Telecom AGRoosstrasse 53CH-8832 Wollerau
E-Mail mobilesolutions@swissphone.comInternet 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.
Mobile Messaging Solutions.Near Telepathy.
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
info@swissphone.comwww.swissphone.com
Mobile Messaging Solutions.Near Telepathy.
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
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Erhebung und Analyse
Das Umfeld der Website
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.
Mobile Messaging Solutions.Near Telepathy.
mobilemantra
Offi ceV 2.0
Lorperos num velit sim quipis nos aute velisci ex euis atuer incillaor Mobile Mantra Enterprise V2.0
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
info@swissphone.comwww.swissphone.com
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
commy num dolorpe cillaore corem vel utpat> Dui te tat luptatummy nonsequat duis do diam
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
Mobile Messaging Solutions.Near Telepathy.
mobilemantra
Offi ceV 2.0
Lorperos num velit incillaor Mobile Mantra Paging 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.
PagingV 2.0
Mobile Messaging Solutions.Near Telepathy.
mobilemantra
Lorperos num velit incillaor Mobile Mantra Enterprise V2.0
EnterpriseV 2.0
Mobile Messaging Solutions.Near Telepathy.
mobilemantra
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.
Lorperos num velit incillaor Mobile Mantra Command Line 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.
Command Line
V 2.0
Mobile Messaging Solutions.Near Telepathy.
mobilemantra
Lorperos num velit incillaor Mobile Mantra Messaging License 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.
MessagingLicense
V 2.0
Mobile Messaging Solutions.Near Telepathy.
mobilemantra
Lorperos num velit incillaor Mobile Mantra Messaging Platform 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.
MessagingPlatform
V 2.0
Mobile Messaging Solutions.Near Telepathy.
mobilemantra
Mobile Mantra Offi ce
Mobile Messaging Solutions.Near Telepathy.
mobilemantra
Offi ce
Mobile Mantra Offi ce Plus
Offi cePlus
Mobile Messaging Solutions.Near Telepathy.
mobilemantra
Enterprise
Mobile Messaging Solutions.Near Telepathy.
mobilemantra
Mobile Mantra Enterprise
Mobile Mantra AddOns
AddOns
Mobile Messaging Solutions.Near Telepathy.
mobilemantra
Mobile MantraMessaging Platform
MessagingPlatform
Mobile Messaging Solutions.Near Telepathy.
mobilemantra
Mobile MantraMessaging License
MessagingLicense
Mobile Messaging Solutions.Near Telepathy.
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
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Erhebung und Analyse
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
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Erhebung und Analyse
Der Inhalt der Website
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
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Erhebung und Analyse
Der Inhalt der Website
Support
Distributoren Kontakt
Hersteller
Impressum Produkte
Mobile Mantra Office
Mobile Mantra Office Plus
Mobile Mantra Enterprise
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
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Erhebung und Analyse
Der Inhalt der Website
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.
Mobile Mantra Office Plus
KontaktProdukte
Bedienungsanleitung/Produkt
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
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Erhebung und Analyse
Der Inhalt der Website
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
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Erhebung und Analyse
Der Inhalt der Website
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
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
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
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
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
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
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
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
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
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Lösungsentwurf
Struktur
Support
Distributoren Kontakt
Hersteller
Impressum Produkte
Mobile Mantra Office
Mobile Mantra Office Plus
Mobile Mantra Enterprise
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
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
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Lösungsentwurf
Struktur
Begrüssung
Produkte
Support
Hersteller
Distributoren
Kontakt
Impressum
Mobile Mantra Office
Mobile Mantra Office Plus
Mobile Mantra Enterprise
Mobile Mantra Add-Ons
Mobile Mantra Messaging Platform
Mobile Mantra Messaging License
Mobile Mantra Server Monitoring
Mobile Mantra Command Line
Mobile Mantra POP3
[Weiteres Add-On][Weiteres Produkt]
Swissphone
[Weiterer Distributor]
Bereich Thema Unterthema
Allgemeine Geschäftsbedingungen
Bedienungsanleitung/Produkt
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
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
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
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
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
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Lösungsentwurf
Navigation
Begrüssung
Produkte
Support
Hersteller
Distributoren
Kontakt
Impressum
Mobile Mantra Office
Mobile Mantra Office Plus
Mobile Mantra Enterprise
Mobile Mantra Add-Ons
Mobile Mantra Messaging Platform
Mobile Mantra Messaging License
Mobile Mantra Server Monitoring
Mobile Mantra Command Line
Mobile Mantra POP3
[Weiteres Add-On][Weiteres Produkt]
Swissphone
[Weiterer Distributor]
Bereich Thema Unterthema
Allgemeine Geschäftsbedingungen
Bedienungsanleitung/Produkt
Software zum Herunterladen
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
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Lösungsentwurf
Navigation
Begrüssung
Produkte
Support
Hersteller
Distributoren
Kontakt
Impressum
Mobile Mantra Office
Mobile Mantra Office Plus
Mobile Mantra Enterprise
Mobile Mantra Add-Ons
Mobile Mantra Messaging Platform
Mobile Mantra Messaging License
Mobile Mantra Server Monitoring
Mobile Mantra Command Line
Mobile Mantra POP3
[Weiteres Add-On][Weiteres Produkt]
Swissphone
[Weiterer Distributor]
Bereich Thema Unterthema
Allgemeine Geschäftsbedingungen
Bedienungsanleitung/Produkt
Software zum Herunterladen
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
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Mobile Mantra Office
Mobile Mantra Office Plus
Mobile Mantra Enterprise
Mobile Mantra Add-Ons
Mobile Mantra Messaging Platform
Mobile Mantra Messaging License
Willkommen
Produkte
Support
Hersteller
Distributoren
Kontakt
Impressum
Lösungsentwurf
Navigation
Willkommen
Produkte
Support
Hersteller
Distributoren
Kontakt
Impressum Mobile Mantra Server Monitoring
Mobile Mantra Command Line
Mobile Mantra POP3
Mobile Mantra Office
Mobile Mantra Office Plus
Mobile Mantra Enterprise
Mobile Mantra Add-Ons
Mobile Mantra Messaging Platform
Mobile Mantra Messaging License
[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
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Lösungsentwurf
Navigation
Willkommen Produkte Support Hersteller
Willkommen Produkte Support Hersteller
Mobile Mantra Office
Mobile Mantra Office Plus
Mobile Mantra Enterprise
Mobile Mantra Add-Ons
Mobile Mantra Messaging Platform
Mobile Mantra Messaging License
Mobile Mantra Server Monitoring
Mobile Mantra Command Line
Mobile Mantra POP3
Willkommen Produkte Support Hersteller
Mobile Mantra Office
Mobile Mantra Office Plus
Mobile Mantra Enterprise
Mobile Mantra Add-Ons
Mobile Mantra Messaging Platform
Mobile Mantra Messaging License
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
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Mobile Mantra Office
Mobile Mantra Office Plus
Mobile Mantra Enterprise
Mobile Mantra Add-Ons
Mobile Mantra Messaging Platform
Mobile Mantra Messaging License
Willkommen
Produkte
Support
Hersteller
Distributoren
Kontakt
Impressum
Mobile Mantra Server Monitoring
Mobile Mantra Command Line
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
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Willkommen Produkte Support Hersteller
Willkommen Produkte Support Hersteller
Mobile Mantra Office
Mobile Mantra Office Plus
Mobile Mantra Enterprise
Mobile Mantra Add-Ons
Mobile Mantra Messaging Platform
Mobile Mantra Messaging License
Willkommen Produkte Support Hersteller
Mobile Mantra Office
Mobile Mantra Office Plus
Mobile Mantra Enterprise
Mobile Mantra Add-Ons
Mobile Mantra Messaging Platform
Mobile Mantra Messaging License
Mobile Mantra Server Monitoring
Mobile Mantra Command Line
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
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
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
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Methodik des Web-Design
Grundlagen für planmässiges und
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
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Lösungsentwurf
Orientierungssystem
Support
Distributoren Kontakt
Hersteller
Impressum Produkte
Mobile Mantra Office
Mobile Mantra Office Plus
Mobile Mantra Enterprise
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
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
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Lösungsentwurf
Orientierungssystem
Support
Distributoren Kontakt
Hersteller
Impressum Produkte
Mobile Mantra Office
Mobile Mantra Office Plus
Mobile Mantra Enterprise
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
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
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Lösungsentwurf
Orientierungssystem
Mobile Mantra Server Monitoring
Mobile Mantra Command Line
Mobile Mantra POP3
Mobile Mantra Office
Mobile Mantra Office Plus
Mobile Mantra Enterprise
Mobile Mantra Add-Ons
Mobile Mantra Messaging Platform
Mobile Mantra Messaging License
[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
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
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
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
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
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
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
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Lösungsentwurf
Design
47
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
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
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
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
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
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
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Lösungsentwurf
Design
51
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
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
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
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
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
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
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Mobile Mantra Office
Mobile Mantra Office Plus
Mobile Mantra Enterprise
Mobile Mantra Add-Ons
Mobile Mantra Messaging Platform
Mobile Mantra Messaging License
Willkommen
Produkte
Support
Hersteller
Distributoren
Kontakt
Impressum
Willkommen
Produkte
Support
Hersteller
Distributoren
Kontakt
Impressum Mobile Mantra Server Monitoring
Mobile Mantra Command Line
Mobile Mantra POP3
Mobile Mantra Office
Mobile Mantra Office Plus
Mobile Mantra Enterprise
Mobile Mantra Add-Ons
Mobile Mantra Messaging Platform
Mobile Mantra Messaging License
[Weiteres Produkt]
Willkommen
Produkte
Support
Hersteller
Distributoren
Kontakt
Impressum
1. 2. 3.
Lösungsentwurf
Design
55
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
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
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Lösungsentwurf
Design
57
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
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 Server Monitoring
Mobile Mantra Command Line
Mobile Mantra POP3
Mobile Mantra Office
Mobile Mantra Office Plus
Mobile Mantra Enterprise
Mobile Mantra Add-Ons
Willkommen
Produkte
Lösungsentwurf
Design
58
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
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
Mobile Messaging Solutions.Near Telepathy.
mobilemantra
Mobile Mantra Enterprise
AddOnsmobilemantra
MessagingPlatform
mobilemantra
Mobile Messaging Solutions.Near Telepathy.
mobilemantra
Mobile Mantra ist eine Produkt-Suite der SWISSPHONE AG
SWISSPHONE Telecom AGRoosstrasse 53CH-8832 Wollerau
E-Mail mobilesolutions@swissphone.comInternet 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.
Mobile Messaging Solutions.Near Telepathy.
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
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
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.
Mobile Messaging Solutions.Near Telepathy.
mobilemantra
Offi ceV 2.0
Lorperos num velit sim quipis nos aute velisci ex euis atuer incillaor Mobile Mantra Enterprise V2.0
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
info@swissphone.comwww.swissphone.com
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
commy num dolorpe cillaore corem vel utpat> Dui te tat luptatummy nonsequat duis do diam
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
Mobile Messaging Solutions.Near Telepathy.
mobilemantra
Offi ceV 2.0
Lorperos num velit incillaor Mobile Mantra Paging 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.
PagingV 2.0
Mobile Messaging Solutions.Near Telepathy.
mobilemantra
Lorperos num velit incillaor Mobile Mantra Enterprise V2.0
EnterpriseV 2.0
Mobile Messaging Solutions.Near Telepathy.
mobilemantra
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.
Lorperos num velit incillaor Mobile Mantra Command Line 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.
Command Line
V 2.0
Mobile Messaging Solutions.Near Telepathy.
mobilemantra
Lorperos num velit incillaor Mobile Mantra Messaging License 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.
MessagingLicense
V 2.0
Mobile Messaging Solutions.Near Telepathy.
mobilemantra
Lorperos num velit incillaor Mobile Mantra Messaging Platform 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.
MessagingPlatform
V 2.0
Mobile Messaging Solutions.Near Telepathy.
mobilemantra
Mobile Mantra Offi ce
Mobile Messaging Solutions.Near Telepathy.
mobilemantra
Offi ce
Mobile Mantra Offi ce Plus
Offi cePlus
Mobile Messaging Solutions.Near Telepathy.
mobilemantra
Enterprise
Mobile Messaging Solutions.Near Telepathy.
mobilemantra
Mobile Mantra Enterprise
Mobile Mantra AddOns
AddOns
Mobile Messaging Solutions.Near Telepathy.
mobilemantra
Mobile MantraMessaging Platform
MessagingPlatform
Mobile Messaging Solutions.Near Telepathy.
mobilemantra
Mobile MantraMessaging License
MessagingLicense
Mobile Messaging Solutions.Near Telepathy.
mobilemantra
Integrationsprinzip
Die Website als integrales
Element des Product-Design:
So muss es sein!
Lösungsentwurf
Design
60
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
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.
Lösungsausarbeitung
Einführung
61
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Lösungsausarbeitung
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
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Lösungsausarbeitung
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
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Methodik des Web-Design
Grundlagen für planmässiges und
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
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Lösungsausarbeitung
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
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Lösungsausarbeitung
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
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Lösungsausarbeitung
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
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Lösungsausarbeitung
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
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
1
2
3
4
6
Lösungsausarbeitung
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
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
1
Lösungsausarbeitung
Prototyp
2
1
3
2
3
3
70
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Lösungsausarbeitung
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
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Lösungsausarbeitung
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
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Lösungsausarbeitung
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
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Lösungsausarbeitung
Prototyp
74
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTMLLiteraturhinweise
75
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
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
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Notizen
Methodik des Web-Design
Grundlagen für planmässiges und
zielorientiertes Web-Design mit HTML
Methodik des Web-Design
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.