Methodik des Web-Design by dezember und juli gmbh

Methodik des Web-Design Patrick Jauch

Grundlagen f체r planm채ssiges und

Birgit Ostertag

zielorientiertes Web-Design mit HTML

Herzlichen Dank an Markus Jung, der uns in die Welt des methodischen Arbeitens eingeführt und von dessen Nutzen längst überzeugt hat.

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 geschützt. Jede Verwertung in anderen als den gesetzlich zugelassenen Fällen bedarf der vorgängigen schriftlichen Zustimmung des Autorenteams. © Copyright Patrick Jauch und Birgit Ostertag

Methodik des Web-Design Inhaltsverzeichnis

Grundlagen für planmässiges und 3

Vorwort

Methodik versus Kreativität

Erhebung und Analyse

Das Umfeld der Website

Der Inhalt der Website

Lösungsentwurf

Struktur

Navigation

Orientierungssystem

Design

Lösungsausarbeitung

Konstruktion

Prototyp

Literaturhinweise

zielorientiertes Web-Design mit HTML

Methodik des Web-Design Grundlagen für planmässiges und Vorwort

zielorientiertes Web-Design mit HTML

Web-Design und vor allem das spätere Programmieren 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.

Methodik des Web-Design Grundlagen für planmässiges und 5

Vorwort Die Regale in den Buchhandlungen sind voll von Büchern über Web-Design. Weshalb also ein weiteres schreiben? Weil ein Buch fehlt, welches das Vorgehen vom ersten Briefing bis zum Prototypen folgerichtig aus der Sicht des Praktikers beschreibt. Web-Design ist – wie der Name bereits vermuten lässt – eine Design-Disziplin, es gelten dieselben Werte 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 Designer. 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 individuell 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 verlieren. 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öglichkeiten. 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 loslegen 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 Geschmack 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 – langjä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 programmierten Seiten fatale Konsequenzen haben und zu Neuprogrammierungen führen. Und die treiben einen, 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 aufgezeigt – und mindestens bis zum Prototypen muss ein Web-Designer mit seinen Kenntnissen kommen.

zielorientiertes Web-Design mit HTML

Methodik des Web-Design Grundlagen für planmässiges und Vorwort

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 – Design 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 Betriebssystemen 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 InterfaceDesign 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 Inhalten 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 Irrglauben, Design bedeute ausschliesslich Repräsentation. Dem ist aber nicht so. Deshalb kümmert sich der zweite Band um die ‹Grundlegenden funktionalen Einflussgrössen im WebDesign›. 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, Motorenleistung, 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 Strukturierung 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

zielorientiertes Web-Design mit HTML

Methodik des Web-Design Grundlagen für planmässiges und Vorwort

zielorientiertes Web-Design mit HTML

Inhalt

Bedienung

Aufbau

Aufzählungen?

Navigation?

Struktur?

Lesetexte?

Orientierungssystem?

Hierarchietiefe?

Design

Technik

Blackbox(es)

Verschiedene Bildschirmgrössen?

Frame oder Tabelle?

Scrollbare Seiten?

HTML oder DHTML?

Verbrechen am Design nach dem

Druckbar oder nur Bildschirmanzeige?

Ausdruck?

Dynamische oder statische Inhalte?

Konstruktion, Raster?

Indexierbar durch Suchmaschinen?

Navigation?

Wartbarkeit?

Corporate-Design?

Seitenkonstruktion?

Leads? Quotes? Download-Bereiche? Titelhierarchien? Bilder?

Product-Design?

Gegenseitige Beeinflussung Auch in anderen Disziplinen des Medien-Designs beinflussen sich die obenstehenden Grössen. In Websites sind allerdings die Abhängigkeiten durch den Anspruch an Aktualisierbarkeit und Wartbarkeit und durch die komplexe 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 WebDesigner dürfen grundlegende Kenntnisse in den angrenzenden Bereichen auf keinen Fall fehlen.

Methodik des Web-Design Grundlagen für planmässiges und Methodik versus Kreatitvität

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 Gestaltungsprozess 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 des Web-Design Grundlagen für planmässiges und 9

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 Konzeption 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 WebDesigners 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 Bestellprozedere 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 Rahmenbedingungen 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.

Briefing

Auftrag

Präsentation

Konzeption

Realisierung

Einführung

Erhaltung

1. Erhebung und Analyse

Definitive Musterseiten

Inbetriebnahme, Schulung

Unterstützung,

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

erstellen, Inhaltsgebung,

Wartung,

Inhalte usw.

Tests

Reparatur

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.

Methodik des Web-Design Grundlagen für planmässiges und Methodik versus Kreatitvität

zielorientiertes Web-Design mit HTML

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 Produktdesign 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 Aufgabenstellung 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 notwendige Technik und die anschliessende Realisierung aufgezeigt wird. Der Lösungsvorschlag soll anhand eines Prototypen präsentiert werden. Untersuchungsbereich: Worauf müssen wir uns konzentrieren?

Der Auftrag

– Erhebung und Analyse Inhalt.

ist das organisatorische und

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

juristische Regelwerk für jedes

oder Kreditkarte. – Lösungsvorschlag für Aufbau (Struktur und Verzeichnisse), Bedienung (Navigation und Orientierung). – 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).

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.

Methodik des Web-Design Grundlagen für planmässiges und 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 Leistungen 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 Ergebnisses. 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 Unvorhergesehenem 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 abgegolten. 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

zielorientiertes Web-Design mit HTML

Methodik des Web-Design Erhebung und Analyse Einführung

Grundlagen für planmässiges und 12

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 Informationen 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.

Methodik des Web-Design Grundlagen für planmässiges und 13

Erhebung und Analyse Unter Erhebung versteht man das Sammeln von Informationen. Selbstverständlich nicht von irgendwelchen Informationen, sondern das Sammeln von Informationen, welche die gestalterische Lösung beeinflussen 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 gestalterisch 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 werden, 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.

zielorientiertes Web-Design mit HTML

Methodik des Web-Design Erhebung und Analyse

Grundlagen für planmässiges und 14

Das Umfeld der Website

zielorientiertes Web-Design mit HTML

Tochter gesellschaften Abteilungen Unternehmen Geschäftsfelder

Corporate-Identity Produkte

Website Produktgruppen

Entscheidungsträger/ Menschen (!)

Produktvarianten Holding/Konzern

Corporate-Design Product-Design

Lieferanten

Eine Website und ihr Design werden von vielen Grössen beeinflusst. Wer die späteren Entscheidungsträger oder die bestehenden Publikationen eines Unternehmens nicht kennt, wird garantiert am Ziel vorbeidesignen. Wer die Struktur des Unternehmens nicht kennt, läuft Gefahr, die Website an der Unternehmensvision vorbei zu positionieren.

Methodik des Web-Design Erhebung und Analyse

Grundlagen für planmässiges und 15

zielorientiertes Web-Design mit HTML

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 vorliegendem Fall) zu unterwerfen hat. Funktional, wenn beispielsweise (standardisierte) Geschäftsprozesse undoder -strukturen abgebildet werden müssen. Inhaltlich, wenn etwa ein bestimmtes Corporate-Communication-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-

Das Umfeld abbilden

cherchen im bestehenden Kommunikationsmaterial des Auftraggebers.

Bereits die Erhebung und Analyse des Umfelds einer Website kön-

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

nen etwa die späteren Internet

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

adressen beeinflussen und wirken

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

sich schon deswegen auch auf

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

die Wartbarkeit in relevanter

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

Weise aus. Dabei gilt als Faustregel: Was in der Realität nicht funktioniert, macht wohl auch im Web Schwierigkeiten.

Pop3

Produktvariante

Produkt

Produktgruppe

Unternehmen

Methodik des Web-Design Erhebung und Analyse

Grundlagen für planmässiges und 16

Das Umfeld der Website

Name

Vorname

Funktion

Mobile Mantra Office

Mobile Mantra Office Plus

Bitte senden Sie mir Unterlagen zu folgenden Produkten:

Ich möchte mehr wissen, rufen Sie mich an:

Mobile Mantra Enterprise

Mobile Messaging Solutions. Near Telepathy.

Excellence in Mobilcom

SWISSPHONE Telecom AG Roosstrasse 53 CH-8832 Wollerau

Mobile Mantra ist eine Produkt-Suite der SWISSPHONE AG

E-Mail mobilesolutions@swissphone.com Internet www.swissphone.com/mobilemantra Helpdesk 0848 88 99 99

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

mobilemantra Mobile Messaging Solutions. Near Telepathy.

Page-It goes Mobile Mantra Haben Sie Fragen zu unseren Produkten? Rufen Sie uns an – wir informieren Sie gerne.

Zudem hat Swissphone an der Mobile-Mantra-Entwicklerin DIT eine Minderheitsbeteiligung erworben. Swissphone beteiligt sich ausserdem finanziell an kundenspezifischen Anpassungen und der Weiterentwicklung. Swissphone ist ein unabhängiges Schweizer Unternehmen mit über 350 Mitarbeiterinnen und Mitarbeitern. Als Pionier im Bereich der Funkrufalarmierung entwickelte sich Swissphone im Laufe der Zeit zu einem europaweit führenden Anbieter von Mobilkommunikationslösungen. Swissphone engagiert sich für Kunden aus den Segmenten Industrie, Hospitality, Behörden, Organisationen mit Sicherheitsaufgaben, Pharma und Finanzdienstleistungen.

Firma

Strasse

PLZ / Ort

Mobile Mantra Add-Ons

Mobile Mantra, das Nachfolgeprodukt der erfolgreichen SMS/Paging Software ‹Page-It›, bietet eine umfangreiche Palette von mobilen Kommunikationswerkzeugen (Mobile Messaging Tools) für professionelle Anwender wie beispielsweise Logistikunternehmen, Organisationen mit einer sehr mobilen Belegschaft, Service-Organisationen, Call-Center und IT-Departments.

Seit ihrer Gründung konzentriert sich Swissphone auf Entwicklung, Produktion 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. Mobile Messaging Solutions. Near Telepathy.

mobilemantra

Mobile Mantra Messaging Platform

E-Mail

Mobile Mantra Messaging License

Ich möchte regelmässig per E-Mail-Newsletter über die Mobile Mantra Produkt-Suite informiert werden.

Telefon

Uhrzeit

mobilemantra

zielorientiertes Web-Design mit HTML

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

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

Mobile Mantra ermöglicht den Versand von SMSund Paging-Meldungen mittels einer DesktopApplikation an alle Arten von mobilen oder stationä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.

Die Mobile Mantra Produkt-Suite im Überblick

Office

Keine Angst: Es ist ein Sadhu, ein heiliger Mann. In Indien und Nepal gehö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 kommunizierten mittels Telepathie. Weil aber Telepathie bei uns westlichen Menschen nur bedingt funktioniert,

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 thie nicht bei allen Menschen. Aber Mobile Mantra kommt

der Telepathie ziemlich nahe. Diese Server- und Desktoplösungen funktionieren wie E-Mail-Software, integrieren

ist – ob Pager, Handy (GSM, GPRS)

logien. Ob Pager, Handy (GSM, GPRS) oder Smartphone, Ihre Info kommt jederzeit überall an. Mobile Mantra unterstützt

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.

mobilemantra

AddOns

mobilemantra

Mobile Mantra Office Plus Mit Mobile Mantra Office 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 Office 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.

mobilemantra

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

OfficePlus

darüber hinaus aber nahtlos Mobilgeräte und ihre Techno-

nahtlos auch Microsoft Outlook mitsamt Adressbuch.

Vorbei sind die Zeiten, wo Sie sich Ihre Finger wund telefonierten 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-

Enterprise

munikation.

Mobile Mantra Enterprise für Microsoft Exchange Mobile 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 Enterprise stellt Ihnen in Microsoft Outlook einen integrierten SMS- sowie einen Paging-Button zur Verfügung. Diese Buttons machen den Versand von Meldungen so leicht wie das Versenden einer E-Mail.

Swissphone vertreibt Mobile Mantra in der Schweiz exklusiv.

mobilemantra Mobile Messaging Solutions. Near Telepathy.

Enterprise

Mobile Mantra Enterprise

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

Mobile Mantra Add-Ons: alternative Softwaremodule. Mobile Mantra Server Monitoring Mit Server Monitoring können Sie permanent eine Auswahl von Servern und Applikationen überwachen lassen. Bei Störungen sendet das System automatisch Meldungen (SMS, Paging über Internet, Analog-/ISDN-Modem) an vordefinierte 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.

oder Empfänger, telepathisch. Leider funktioniert Telepa-

bietet Ihnen Swissphone Mobile

Mantra an, eine Software, die von der Telepathie der Sadhus inspiriert

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

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

mobilemantra

Messaging Platform

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) verfügbar. Damit können Wireless-Server im Outsourcing-Verfahren rund um die Uhr effizient 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.

mobilemantra

Messaging License mobilemantra Mobile Messaging Solutions. Near Telepathy.

Messaging License

Swissphone AG Roosstrasse 53 CH-8832 Wollerau

mobilemantra

Your Software inspired by Sadhu

Nicht frankieren Ne pas affranchir Non affrancare

Mobile Mantra verbindet Welten

Geschäftsantwortsendung Invio commerciale-risposta Envoi commercial-réponse

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

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 Lizenzen zentral verwalten.

Mobile Mantra Messaging License

Excellence in Mobilcom MobileMantra ist eine Produkt-Suite der SWISSPHONE AG www.mobilemantra.ch

mobilemantra

SWISSPHONE AG Roosstrasse 53 CH-8832 Wollerau

Mobile Messaging Solutions. Near Telepathy.

Telefon +41 (0)1 786 77 70 Telefax +41 (0)1 786 77 71 info@swissphone.com www.swissphone.com

Product-Design Für das Web-Design im vorlie genden Fall die wohl offensichtlichste Einflussgrösse: Das Product-Design. Wird es in der Website nicht adäquat repräsentiert, verliert das Product-Design seinen Sinn und Nutzen: Nämlich durch Konsistenz Vertrauen schaffen und durch Standardisierung Kosten sparen (nicht jede Publikation muss neu entwickelt werden).

Methodik des Web-Design Erhebung und Analyse

Grundlagen für planmässiges und 17

Das Umfeld der Website

mobilemantra Mobile Messaging Solutions. Near Telepathy.

Excellence in Mobilcom

Office

MobileMantra ist eine Produkt-Suite der SWISSPHONE AG

V 2.0

www.mobilemantra.ch

SWISSPHONE AG Roosstrasse 53 CH-8832 Wollerau

zielorientiertes Web-Design mit HTML

mobilemantra

Mobile Messaging Solutions. Near Telepathy.

Office

Paging

Enterprise

V 2.0

Telefon +41 (0)1 786 77 70 Telefax +41 (0)1 786 77 71 info@swissphone.com www.swissphone.com

Lorperos num velit incillaor Mobile Mantra Office V2.0

V 2.0

Lorperos num velit incillaor Mobile Mantra Paging V2.0

Lorperos num velit incillaor Mobile Mantra Enterprise V2.0

Lore dolorperat, vel dolore feum ex esecte dolobo-

lor si tem del dolore enis nulla ate dolutat augait loboreet, summy nullan ulput nostrud molent

ciduip euipsummy nummod euisit, suscipit ipit nulput prate dolore magna aut alit nis acillandre

Lorperos num velit sim quipis nos aute velisci ex euis atuer incillaor Mobile Mantra Enterprise V2.0 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 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 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 praessenis 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 sequat. Duis nulla consectem vel elit, consenis augiamet lum nibh exer sit lum aut lut

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 faciduis Aute 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.

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 nummod euisit, suscipit ipit nulput prate dolore magna aut alit nis acillandre

< Dui tie del iliquat. Ut

dolummy nullamconse dolorperat.

iriuscilis nulla aci eugue

Lore magnis ea facil duipit dolor ilisl delit in et augait dignisi. Duipit ad magna faciliquis alissed

vullam iril dolore mod etue min el euis adit dunt

dolobore min henim quate dolor sim ing et loreet

ulla amconsequat.

adip eu feu feum vel eugueril ut iuscing eugait velit, si. Duis et wis nullamc nsequat. Dui tie del

Lore dolorperat, vel dolore feum ex esecte doloborem 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 wisciduip euipsummy nummod euisit, suscipit ipit nulput prate dolore magna aut alit nis acillandre dolummy nullamconse dolorperat.

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

iliquat eugueril ut iuscing.

Dolobore dolorem

Dui bla consequam, quat. Ut luptatu riuscipsum

zzrillum dit numsan er in estrud modolor ercillaor sequi tetum volore tat, consectet lorperaesto com-

Vel ipis

Niamquipisi Tem accum

Deliquisit alis

Dionsed magnisl dolore

zzrillum dit numsan er in estrud modolor ercillaor

Tincil

Utem vent

Praestin

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

Duissi blaore

Feui tatum ing

Ut luptatu riuscipsum

my nonseni iscil utetum ilit luptat nim dipis num.

sequi tetum volore tat, consectet lorperaesto

rem auguer sequat. Duis nulla consectem vel elit, consenis augiamet lum nibh exer sit lum aut lut

niate tin ute doloreet wiscincin exer sum ipit wis-

dolummy nullamconse dolorperat.

Lore magnis ea facil duipit dolor ilisl delit in et augait dignisi. Duipit ad magna faciliquis alissed

adip eu feu feum vel eugueril ut iuscing eugait velit, si. Duis et wis nullamc nsequat. Dui tie del

dolobore min henim quate dolor sim ing et loreet

iliquat eugueril ut iuscing.

Eum eugiam et venit

Eugue dolore

Ut iriuscilis nulla aci eugue vullam iril dolore mod etue min el euis adit dunt ulla amconsequat.

rem auguer sequat. Duis nulla consectem vel elit, consenis augiamet lum nibh exer sit lum aut lut

iliquat eugueril ut iuscing.

Ut iriuscilis nulla aci eugue vullam iril dolore mod etue min el euis adit dunt ulla amconsequat.

zzrillum dit numsan er in estrud modolor ercillaor sequi tetum volore tat, consectet lorperaesto com-

Dui bla consequam, quat. Ut luptatu riuscipsum

my nonseni iscil utetum ilit luptat nim dipis num.

mobilemantra

Mobile Messaging Solutions. Near Telepathy.

Office

Messaging License

Enterprise

Mobile Mantra Messaging License

Mobile Mantra Office

Mobile Mantra Enterprise

mobilemantra

Mobile Messaging Solutions. Near Telepathy.

Command Line

Messaging License

Messaging Platform

V 2.0

Lorperos num velit incillaor Mobile Mantra Command Line V2.0

Lorperos num velit incillaor Mobile Mantra Messaging License V2.0

Lorperos num velit incillaor Mobile Mantra Messaging Platform V2.0

Lore dolorperat, vel dolore feum ex esecte doloborem 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 wisciduip euipsummy nummod euisit, suscipit ipit nulput prate dolore magna aut alit nis acillandre dolummy nullamconse dolorperat.

iliquat eugueril ut iuscing.

my nonseni iscil utetum ilit luptat nim dipis num.

Mobile Mantra AddOns

iliquat eugueril ut iuscing.

my nonseni iscil utetum ilit luptat nim dipis num.

mobilemantra

Mobile Messaging Solutions. Near Telepathy.

AddOns

OfficePlus

Mobile Mantra Office Plus

Messaging Platform

Mobile Mantra Messaging Platform

Medienübergreifend! Das Product-Design-Konzept lässt sich anhand der abgebildeten Publikationen ableiten: Flyer, Schönund 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 konsistent, also widerspruchsfrei und zusammenhängend, umgesetzt werden kann.

Methodik des Web-Design Erhebung und Analyse Der Inhalt der Website

Grundlagen für planmässiges und 18

zielorientiertes Web-Design mit HTML

Inhalt Inhalte können geordnet oder ungeordnet vorliegen. Ungeordnete 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 Einzufüllen. Werden die Inhalte aber schon zu Beginn richtig erhoben und die passenden Unterteilungen geschaffen, ist man auch für inhaltliche Neuzuzügler bestens gewappnet.

Methodik des Web-Design Erhebung und Analyse

Grundlagen für planmässiges und 19

zielorientiertes Web-Design mit HTML

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-Management 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 tabellarische 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 Seitenelemente 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 relevanten 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. Repräsentation von Informationselementen: Beispiel für semantische 1

Strukturen Informationselement ‹Seitentitel› (1)

2 Informationselement ‹Lead› (2) 3 Informationselement 4

‹Aufzählungstitel› (3) Informationselement ‹Aufzählung› (4)

Informationselement ‹Hervorhebung› (5) Informationslelement ‹Datensatzüberschrift› (6)

7 Informationselement 8

‹Datensatztitel› (7) Informationselement ‹Datensatztext› (8)

Methodik des Web-Design Erhebung und Analyse

Grundlagen für planmässiges und 20

Der Inhalt der Website

zielorientiertes Web-Design mit HTML

Bedienungsanleitung/Produkt

Mobile Mantra Messaging License

Support

Distributoren

Mobile Mantra Messaging Platform

FAQs

Kontakt

Hersteller Impressum

Produkte

Mobile Mantra Office Swissphone Mobile Mantra Office Plus Mobile Mantra Enterprise Mobile Mantra Add-Ons Mobile Mantra Server Monitoring Mobile Mantra Command Line

Mobile Mantra POP3 Begrüssung Allgemeine Geschäftsbedingungen Hilfe/Produkt

Softwaredownload/Produkt

Welche Inhalte sollen im Web präsentiert werden? Obwohl sie in der Regel nur kurzfristig gültig beantwortet werden kann, ist dies die erste und vielleicht wichtigste Frage. Jeder Auftraggeber macht notwendigerweise 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.

Methodik des Web-Design Erhebung und Analyse

Grundlagen für planmässiges und 21

Der Inhalt der Website

Bedienungsanleitung/Produkt

zielorientiertes Web-Design mit HTML

Mobile Mantra Office Plus

PDF-Dokumente mit viel Text und

Inhaltsseiten mit verschieden hierar-

Abbildungen

chischen Überschriften und gegebenenfalls langen Texten, evtl. mit mehreren Abbildungen mit Legenden und Bildüberschriften

Produkte

Kontakt

Übersichtsseiten mit verschieden hie-

Inhaltsseiten mit Kontaktinformation

rarchischen Überschriften und kurzen

und E-Mail-Formular

Texten, evtl. mit mehreren Abbildungen mit Legenden und Bildüberschriften, Links im Inhaltsbereich

Exemplarische Inhalte Nach der Analyse der Inhalte können exemplarische Inhalte für die Website angenommen werden, die immer wiederkehren. Gerade diese Inhalte müssen in das Design-Konzept einfliessen.

Methodik des Web-Design Erhebung und Analyse

Grundlagen für planmässiges und 22

Der Inhalt der Website

zielorientiertes Web-Design mit HTML

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

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

<h1>

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

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?› angehen 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.

Methodik des Web-Design Erhebung und Analyse

Grundlagen für planmässiges und 23

Der Inhalt der Website

zielorientiertes Web-Design mit HTML

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 Euromessage (Schweiz, Deutschland, Frankreich, Italien) und TPS (Schweiz). Die Einzelplatzversion Mobile Mantra Office Plus ist die ideale Kommunikationssoftware für KMUs und Unternehmen oder Organisationen 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

Grundtext

1-5 Lizenzen (Preis pro Lizenz) CHF 650.00 Mehr als 5 Lizenzen (Preis pro Lizenz)

CHF 590.00

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.

Beispiel Die obenstehende Tabelle überprüft die erhobenen semantischen Strukturen am Text einer geplanten Seite.

Methodik des Web-Design Lösungsentwurf Einführung

Grundlagen für planmässiges und 24

zielorientiertes Web-Design mit HTML

Lösungsentwurf Am besten einmal vom Bildschirm 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 entstehen, um tragfähig zu sein. Deshalb frei nach Karl Gerstner: ‹Sie wollen Web-Designer werden? Dann nehmen Sie Papier und Bleistift zur Hand – Sie müssen lernen, Ideen zu formulieren›.

Methodik des Web-Design Grundlagen für planmässiges und 25

Lösungsentwurf Bevor nun mit der eigentlich kreativen Tätigkeit begonnen wird, sollte das bisher geleistete ‹kritisch gewü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 zugä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?

zielorientiertes Web-Design mit HTML

Methodik des Web-Design Lösungsentwurf Struktur

Grundlagen für planmässiges und 26

zielorientiertes Web-Design mit HTML

Struktur Strukturen gibt es viele. Die passende zu finden – darin liegt das Geheimnis. Jede Form von Inhalt kann individuell strukturiert werden. Aber bei jeder Struktur sollte unbedingt bedacht werden: Panta rhei – alles fliesst – eine Struktur muss immer offene Stellen bereithalten, um neues aufnehmen zu können.

Methodik des Web-Design Lösungsentwurf

Grundlagen für planmässiges und 27

Struktur Die Qualität der Struktur einer Website kann sowohl für das Design, für die Verständlichkeit beim Benutzer als auch für die Wartbarkeit matchentscheidend sein. Die Struktur entwicklelt sich aus den erhobenen Inhalten. Sie setzt die Inhalte in Beziehung zu einander, sie unterwirft die Inhalte einem Ordnungsprinzip. Es gibt verschiedene Ordungsprinzipien – häufig ist jenes, das sich der Realität anzunähern versucht am erfolgversprechendsten, wahrscheinlich, weil es am einfachsten zu verstehen ist. Allerdings – und das muss bei aller Strukturiertheit in die Überlegungen miteinbezogen werden – Website-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 passenderen 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 strukurierten 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.

zielorientiertes Web-Design mit HTML

Methodik des Web-Design Lösungsentwurf

Grundlagen für planmässiges und 28

Struktur

zielorientiertes Web-Design mit HTML

Bedienungsanleitung/Produkt

Mobile Mantra Messaging License

Support

Distributoren

Mobile Mantra Messaging Platform

FAQs

Kontakt

Hersteller Impressum

Produkte

Mobile Mantra Office Swissphone Mobile Mantra Office Plus Mobile Mantra Enterprise Mobile Mantra Add-Ons Mobile Mantra Server Monitoring Mobile Mantra Command Line

Mobile Mantra POP3 Begrüssung Allgemeine Geschäftsbedingungen 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 benennbaren Einheiten zusammenzufassen.

Methodik des Web-Design Lösungsentwurf

Grundlagen für planmässiges und 29

Struktur

Bereich

Thema

zielorientiertes Web-Design mit HTML

Unterthema

Begrüssung

Produkte

Mobile Mantra Office

Support

Mobile Mantra Office Plus

Hersteller

Mobile Mantra Enterprise

Mobile Mantra Add-Ons

Mobile Mantra Server Monitoring

Mobile Mantra Messaging Platform

Mobile Mantra Command Line

Mobile Mantra Messaging License

Mobile Mantra POP3

[Weiteres Produkt]

[Weiteres Add-On]

Distributoren

Swissphone

Kontakt

[Weiterer Distributor]

Impressum

Allgemeine Geschäftsbedingungen

Bestellprozedere

Bedienungsanleitung/Produkt Struktur In dieser Ansicht werden erstmals Software zum Herunterladen

Zusammenhänge sichtbar. Die Strukturierungsarbeit orientiert sich einerseits an der Realität und

Hilfe/Produkt

berücksichtigt andererseits die Ausbaubarkeit. Die Struktur der geplanten Website muss offen sein: Das heisst, sie muss zulassen, dass neue Bereiche, neue Themen undoder Unterthemen problemlos zur Website hinzugefügt werden können.

Methodik des Web-Design Lösungsentwurf Navigation

Grundlagen für planmässiges und 30

zielorientiertes Web-Design mit HTML

Verschiedene Navigationstypen führen den Benutzer zum Ziel Die hierarchische Navigation, das dynamische Menü, und eine kombinierte bzw. verteilte Navigation. Welcher Navigationstyp der richtige ist, hängt von der Aufgabenstellung ab – nicht vom Geschmack des Designers.

Methodik des Web-Design Lösungsentwurf

Grundlagen für planmässiges und 31

zielorientiertes Web-Design mit HTML

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 verständliche Navigation gesetzt werden sollte, funktioniert der Navigationstyp ‹Inhaltsverzeichnis› gestalterisch 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

Methodik des Web-Design Lösungsentwurf

Grundlagen für planmässiges und 32

Navigation

Bereich

Thema

zielorientiertes Web-Design mit HTML

Unterthema

Begrüssung

Produkte

Mobile Mantra Office

Support

Mobile Mantra Office Plus

Hersteller

Mobile Mantra Enterprise

Mobile Mantra Add-Ons

Mobile Mantra Server Monitoring

Mobile Mantra Messaging Platform

Mobile Mantra Command Line

Mobile Mantra Messaging License

Mobile Mantra POP3

[Weiteres Produkt]

[Weiteres Add-On]

Distributoren

Swissphone

Kontakt

[Weiterer Distributor]

Impressum

Allgemeine Geschäftsbedingungen

Bedienungsanleitung/Produkt

Software zum Herunterladen

Hilfe/Produkt

Die Struktur bildet die Ausgangslage für die Navigation. Liegen erst einmal die Inhalte strukturiert vor, kann der WebDesigner damit beginnen, die Inhalte untereinander (logisch) zu vernetzen.

Methodik des Web-Design Lösungsentwurf

Grundlagen für planmässiges und 33

Navigation

Bereich

Thema

zielorientiertes Web-Design mit HTML

Unterthema

Begrüssung

Produkte

Mobile Mantra Office

Support

Mobile Mantra Office Plus

Hersteller

Mobile Mantra Enterprise

Mobile Mantra Add-Ons

Mobile Mantra Server Monitoring

Mobile Mantra Messaging Platform

Mobile Mantra Command Line

Mobile Mantra Messaging License

Mobile Mantra POP3

[Weiteres Produkt]

[Weiteres Add-On]

Distributoren

Swissphone

Kontakt

[Weiterer Distributor]

Impressum

Allgemeine Geschäftsbedingungen

Bestellprozedere

Bedienungsanleitung/Produkt

Software zum Herunterladen

Navigationsprinzip. Aus dieser Darstellung wird ersichtlich, wie die Inhalte mit

Hilfe/Produkt

einander verknüpft, beziehungsweise 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.

Methodik des Web-Design Lösungsentwurf

Grundlagen für planmässiges und 34

Navigation

zielorientiertes Web-Design mit HTML

Willkommen

Produkte

Support

Mobile Mantra Office

Hersteller

Mobile Mantra Office Plus

Distributoren

Mobile Mantra Enterprise

Kontakt

Mobile Mantra Add-Ons

Impressum

Mobile Mantra Messaging Platform

Mobile Mantra Server Monitoring

Mobile Mantra Messaging License

Mobile Mantra Command Line

Support

Mobile Mantra POP3

Hersteller

Mobile Mantra Messaging Platform

Distributoren

Mobile Mantra Messaging License

Kontakt

[Weiteres Produkt]

Impressum

Support Hersteller Distributoren Kontakt Impressum

Welche Navigationstypen gibt es überhaupt?

Die hierarchische Navigation

Grundsätzlich kann man vier verschiedene Navigationsty-

Die hierarchische Navigation orientiert sich an einem bekannten Element:

pen ausmachen: Die hierarchische Navigation (‹Inhaltsver-

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

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

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

die verteilte Navigation. Sie werden hier kurz vorgestellt.

untergeordneten Element deutlich sichtbar sind. Da dieser Navigationstyp

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

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

abschliessenden Weisheiten über ihre Verwendung.

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

Methodik des Web-Design Lösungsentwurf

Grundlagen für planmässiges und 35

Navigation

zielorientiertes Web-Design mit HTML

Willkommen

Produkte

Support

Hersteller

Willkommen

Produkte

Support

Hersteller

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 Mobile Mantra Office Mobile Mantra Office Plus Mobile Mantra Enterprise Mobile Mantra Add-Ons

Mobile Mantra Server Monitoring

Mobile Mantra Messaging Platform

Mobile Mantra Command Line

Mobile Mantra Messaging License

Mobile Mantra POP3

Das dynamische Menü ist immer häufiger anzutreffen. Es

Fokus:

orientiert sich an der Bedienung

Vorsicht mit Navigationsele-

von modernen Computersys-

menten bestehend aus Bildern

temen und zeigt hierarchische

Es soll wohlüberlegt sein: werden

Abhängigkeiten durch ein Auf-

Bilder als Navigationselemente

klappen eines Untermenüs beim

eingesetzt, etwa um Schriftef-

Berühren eines Menüpunktes.

fekte zu erzielen, müssen beim

Diese Art der Navigation kann

Hinzufügen eines neuen Links

sehr schön und übersichtlich

die entsprechenden Bilder neu

sein. Aber durch den Einsatz von

aufbereitet werden. Also wenn

viel Technik ist dieses Navigati-

schon mit Bildern arbeiten, dann

onsprinzip einerseits nicht ganz

auf keinen Fall vergessen, sich

einfach herzustellen und es ist

Vorlagen zu erstellen!

dazu recht fehleranfällig.

Methodik des Web-Design Lösungsentwurf

Grundlagen für planmässiges und 36

Navigation

zielorientiertes Web-Design mit HTML

Willkommen

Produkte

MobileMantra POP3

Willkommen

Mobile Mantra Office

Mobile Mantra Server Monitoring

Produkte

Mobile Mantra Office Plus

Mobile Mantra Command Line

Support

Mobile Mantra Enterprise

Mobile Mantra POP3

Hersteller

Mobile Mantra Add-Ons

Distributoren

Mobile Mantra Messaging Platform

Kontakt

Mobile Mantra Messaging License

Impressum

Die kontextsensitive Navigation zeigt jeweils nur die im aktuellen Bereich erreichbaren Verweise im Navigationsbereich. Um übergeordnete Verweise (wieder) zu erreichen, muss ein ‹Zurück›-Befehl zur Verfügung stehen. Häufig wird bei diesem Navigationstyp der gesamte gewählte Pfad aufgezeigt, um auch auf Hierarchien, die weiter zurückliegen, direkt zugreifen zu können.

Methodik des Web-Design Lösungsentwurf

Grundlagen für planmässiges und 37

Navigation

zielorientiertes Web-Design mit HTML

Willkommen

Produkte

Support

Hersteller

Willkommen

Produkte

Support

Hersteller

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

Mobile Mantra Office

Mobile Mantra Server Monitoring

Mobile Mantra Office Plus

Mobile Mantra Command Line

Mobile Mantra Enterprise

Mobile Mantra POP3

Mobile Mantra Add-Ons Mobile Mantra Messaging Platform Mobile Mantra Messaging License

Die verteilte Navigation zeigt die verschiedenen Verweishierarchien an verschiedenen 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.

Methodik des Web-Design Lösungsentwurf Orientierungssystem

Grundlagen für planmässiges und 38

zielorientiertes Web-Design mit HTML

Kryptische Zustände Zwei Websites, aufgerufen über google.ch – zwei kryptische Zustände: Weder bei Apple noch bei UBS kann man sofort nachvollziehen, wo in der Website man gerade gelandet ist.

Methodik des Web-Design Grundlagen für planmässiges und Lösungsentwurf

zielorientiertes Web-Design mit HTML

Orientierungssystem Dem Orientierungssystem kommt im Web-Design eine entscheidende Funktion zu. Für die meisten Benutzer 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 werden 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 einen 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 Orientierungssystems, aber immerhin!

Methodik des Web-Design Lösungsentwurf

Grundlagen für planmässiges und 40

Orientierungssystem

zielorientiertes Web-Design mit HTML

Bedienungsanleitung/Produkt

Mobile Mantra Messaging License

Support

Distributoren

Mobile Mantra Messaging Platform

FAQs

Kontakt

Hersteller Impressum

Produkte

Mobile Mantra Office Swissphone Mobile Mantra Office Plus Mobile Mantra Enterprise Mobile Mantra Add-Ons Mobile Mantra Server Monitoring Mobile Mantra Command Line

Mobile Mantra POP3 Begrüssung Allgemeine Geschäftsbedingungen Hilfe/Produkt

Softwaredownload/Produkt

Orientierung durch Farbe taugt für den Benutzer häufig recht wenig. Die Zusammenhänge sind nicht zwingend, und gerade wenn Farbe subtil eingesetzt wird, bleibt ihr Einsatz eher ein formales denn ein funktionales Element.

Methodik des Web-Design Lösungsentwurf

Grundlagen für planmässiges und 41

Orientierungssystem

zielorientiertes Web-Design mit HTML

Bedienungsanleitung/Produkt

Mobile Mantra Messaging License

Support

Distributoren

Mobile Mantra Messaging Platform

FAQs

Kontakt

Hersteller Impressum

Produkte

Mobile Mantra Office Swissphone Mobile Mantra Office Plus Mobile Mantra Enterprise Mobile Mantra Add-Ons Mobile Mantra Server Monitoring Mobile Mantra Command Line

Mobile Mantra POP3 Begrüssung Allgemeine Geschäftsbedingungen 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.

Methodik des Web-Design Lösungsentwurf Orientierungssystem

Grundlagen für planmässiges und 42

zielorientiertes Web-Design mit HTML

Willkommen Produkte Mobile Mantra Office Mobile Mantra Office Plus Mobile Mantra Enterprise Mobile Mantra Add-Ons Mobile Mantra Server Monitoring Mobile Mantra Command Line Mobile Mantra POP3 Mobile Mantra Messaging Platform Mobile Mantra Messaging License [Weiteres Produkt] Support Hersteller Distributoren Kontakt Impressum

Orientierung durch Hervorhebungen in der Navigation. Zweifellos eine sehr geeignetes Orientierungssystem, weil es leicht verständlich ist: In einer hierarchischen (oder auch verteilten) Navigation werden jene Elemente hervorgehoben, die in Abhängigkeit stehen. Können aber innerhalb der Website Seiten angezeigt werden, welche über das Menü nicht erreichbar sind, versagt diese Art von Orientierung.

Methodik des Web-Design Lösungsentwurf

Grundlagen für planmässiges und 43

Orientierungssystem

Produkte

Mobile Mantra Add-Ons

zielorientiertes Web-Design mit HTML

Mobile Mantra POP3

Orientierung durch Anzeige des ‹gewählten Weges› bedeutet, dass alle Hierarchien, welche bisher durchlaufen wurden, folgerichtig aufgeführt werden. Diese Art des Orientierungssystems kann mit der Anzeige eines Dateipfades verglichen werden.

Fazit Der Einsatz eines redundanten, also vielfältig abgestützten Orientierungssystems schafft für den Benutzer ein fehlertoleranteres Umfeld. Besonders ein ausformuliertes, ein ‹ausgedeutschtes› Orientierungssystem ist als letzte Rettung immer sehr hilfreich.

Methodik des Web-Design Lösungsentwurf Design

Grundlagen für planmässiges und 44

zielorientiertes Web-Design mit HTML

Variabler Bereich

Skizzen mit minimalen technischen Ü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 Überlegungen enthalten, wie sich die Web-Seite an verschiedene Browserfenstergrössen anpassen soll. Ebenso kann überprüft werden, ob das Scrollen von langen Seiten gestalterisch interessant bleibt. Das gilt für Frame- und Tabellenkonstruktionen! Ebenso lässt sich anhand einer solchen Skizze auch in etwa abschätzen, ob die Summe aller fixen Breiten (Bilder und Spalten) die Breite des üblichen A4-Hochformates beim Ausdruck nicht überschreitet.

Methodik des Web-Design Grundlagen für planmässiges und Lösungsentwurf

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 – nachzudenken, 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 WebSeite 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.

zielorientiertes Web-Design mit HTML

Methodik des Web-Design Lösungsentwurf Design

Grundlagen für planmässiges und 46

zielorientiertes Web-Design mit HTML

Methodik des Web-Design Lösungsentwurf Design

Grundlagen für planmässiges und 47

zielorientiertes Web-Design mit HTML

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ösungsfindung 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.

Methodik des Web-Design Lösungsentwurf Design

Grundlagen für planmässiges und 48

zielorientiertes Web-Design mit HTML

Das richtige Werkzeug: Adobe Photoshop. In Photoshop sollen die verschiedenen Design-Elemente auf Ebenen sauber verwaltet werden. Die Datei wird dadurch nicht nur zur Visualisierung des Designs benötigt, sondern auch als ‹Halbfabrikate-Lager› für die spätere Bild-Erstellung.

Methodik des Web-Design Lösungsentwurf Design

Grundlagen für planmässiges und 49

zielorientiertes Web-Design mit HTML

Mit den Hilfslinien die Machbarkeit schon während des Gestaltens immer wieder überprüfen. Mit den Hilfslinien kann der Raster, wie er später programmiert werden könnte, schon mitgedacht werden. Anhand der Hilfslinien kann sich der Gestalter bei der Positionierung neuer Elemente bereits vorstellen, ob die gewünschte Position im bestehenden Raster abgebildet werden kann oder ob neue, feinere Unterteilungen notwendig werden. Diese können die Website komplizieren oder einschränken.

Methodik des Web-Design Lösungsentwurf Design

Grundlagen für planmässiges und 50

zielorientiertes Web-Design mit HTML

Methodik des Web-Design Lösungsentwurf Design

Grundlagen für planmässiges und 51

zielorientiertes Web-Design mit HTML

Illustrator oder Photoshop? Eine immer wieder heiss diskutierte Frage, wenn es um WebDesign geht. Illustrator ist im Umgang zweifellos das handlichere 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 Verwendungszweck (Text oder Bild) ausgerichtet werden kann. Auch wenn das Design in der Ansicht vergrössert wird, erscheinen Zeichnungselemente 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ühsamer 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.

Methodik des Web-Design Lösungsentwurf Design

Grundlagen für planmässiges und 52

zielorientiertes Web-Design mit HTML

Bild oder Text? Bereits während des Gestaltens muss sich der Designer überlegen, welche Elemente programmiert und welche als Bild geladen werden müssen. Diese Entscheidung kann besonders bei Schriften gegebenenfalls schwerwiegende Folgen für die Wartbarkeit 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 verbesserter Wartbarkeit.

Methodik des Web-Design Lösungsentwurf Design

Grundlagen für planmässiges und 53

zielorientiertes Web-Design mit HTML

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 Designvorschlag beschönigen, was später nicht realisierbar ist. Dies gilt insbesondere für Schriftverwendung und -darstellung. Spielereien wie die ‹Quarz-Textglättung› sind Mac-spezifisch und dürfen nicht vorausgesetzt werden.

Methodik des Web-Design LĂśsungsentwurf

Grundlagen fĂźr planmĂ¤ssiges und 54

Design

zielorientiertes Web-Design mit HTML

Willkommen

Produkte

Support

Mobile Mantra Office

Hersteller

Mobile Mantra Office Plus

Distributoren

Mobile Mantra Enterprise

Kontakt

Mobile Mantra Add-Ons

Impressum

Mobile Mantra Messaging Platform

Mobile Mantra Server Monitoring

Mobile Mantra Messaging License

Mobile Mantra Command Line

Support

Mobile Mantra POP3

Hersteller

Mobile Mantra Messaging Platform

Distributoren

Mobile Mantra Messaging License

Kontakt

[Weiteres Produkt]

Impressum

Support Hersteller Distributoren Kontakt Impressum

Methodik des Web-Design Lösungsentwurf Design

Grundlagen für planmässiges und 55

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.

Methodik des Web-Design Lösungsentwurf Design

Grundlagen für planmässiges und 56

zielorientiertes Web-Design mit HTML

Methodik des Web-Design Lösungsentwurf

Grundlagen für planmässiges und 57

Design

Produkte

Mobile Mantra Add-Ons

zielorientiertes Web-Design mit HTML

Mobile Mantra POP3

Willkommen Produkte Mobile Mantra Office Mobile Mantra Office Plus Mobile Mantra Enterprise

Redundantes Orientierungssystem

Mobile Mantra Add-Ons

Vorliegende Website stellt die Orientierung vielfältig sicher: Durch

Mobile Mantra Server Monitoring

den Einsatz von Farbe und Form, durch die Anzeige des ‹gewähl-

Mobile Mantra Command Line

ten Weges› – die letzte ‹Station› entspricht dem Seitentitel – und

Mobile Mantra POP3

durch Hervorhebung in der Navigation.

Methodik des Web-Design Lösungsentwurf

Grundlagen für planmässiges und 58

Design

Name

Vorname

Funktion

Mobile Mantra Office

Mobile Mantra Office Plus

Bitte senden Sie mir Unterlagen zu folgenden Produkten:

Ich möchte mehr wissen, rufen Sie mich an:

Mobile Mantra Enterprise

Mobile Messaging Solutions. Near Telepathy.

Excellence in Mobilcom

SWISSPHONE Telecom AG Roosstrasse 53 CH-8832 Wollerau

Mobile Mantra ist eine Produkt-Suite der SWISSPHONE AG

E-Mail mobilesolutions@swissphone.com Internet www.swissphone.com/mobilemantra Helpdesk 0848 88 99 99

mobilemantra Mobile Messaging Solutions. Near Telepathy.

Page-It goes Mobile Mantra Haben Sie Fragen zu unseren Produkten? Rufen Sie uns an – wir informieren Sie gerne.

Firma

Strasse

PLZ / Ort

Mobile Mantra Add-Ons

mobilemantra

Mobile Mantra Messaging Platform

E-Mail

Mobile Mantra Messaging License

Ich möchte regelmässig per E-Mail-Newsletter über die Mobile Mantra Produkt-Suite informiert werden.

Telefon

Uhrzeit

mobilemantra

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

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

Die Mobile Mantra Produkt-Suite im Überblick

Office

Keine Angst: Es ist ein Sadhu, ein heiliger Mann. In Indien und Nepal gehören Sadhus zum Strassenbild. Sie

legen unglaublich harte Gelübde ab

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 thie nicht bei allen Menschen. Aber Mobile Mantra kommt

der Telepathie ziemlich nahe. Diese Server- und Desktoplösungen funktionieren wie E-Mail-Software, integrieren

ist – ob Pager, Handy (GSM, GPRS)

logien. Ob Pager, Handy (GSM, GPRS) oder Smartphone, Ihre Info kommt jederzeit überall an. Mobile Mantra unterstützt

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.

mobilemantra

AddOns

mobilemantra

OfficePlus

darüber hinaus aber nahtlos Mobilgeräte und ihre Techno-

nahtlos auch Microsoft Outlook mitsamt Adressbuch.

Vorbei sind die Zeiten, wo Sie sich Ihre Finger wund telefonierten 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-

Enterprise

munikation.

Swissphone vertreibt Mobile Mantra in der Schweiz exklusiv.

mobilemantra Mobile Messaging Solutions. Near Telepathy.

Enterprise

Mobile Mantra Enterprise

oder Empfänger, telepathisch. Leider funktioniert Telepa-

bietet Ihnen Swissphone Mobile

Mantra an, eine Software, die von der Telepathie der Sadhus inspiriert

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

mobilemantra

Messaging Platform

mobilemantra

Messaging License mobilemantra Mobile Messaging Solutions. Near Telepathy.

Messaging License

Mobile Mantra Messaging License

Swissphone AG Roosstrasse 53 CH-8832 Wollerau

mobilemantra

Your Software inspired by Sadhu

Nicht frankieren Ne pas affranchir Non affrancare

Mobile Mantra verbindet Welten

Geschäftsantwortsendung Invio commerciale-risposta Envoi commercial-réponse

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

zielorientiertes Web-Design mit HTML

Methodik des Web-Design Lösungsentwurf

Grundlagen für planmässiges und 59

Design

mobilemantra Mobile Messaging Solutions. Near Telepathy.

Excellence in Mobilcom

Office

MobileMantra ist eine Produkt-Suite der SWISSPHONE AG

V 2.0

www.mobilemantra.ch

SWISSPHONE AG Roosstrasse 53 CH-8832 Wollerau

zielorientiertes Web-Design mit HTML

mobilemantra

Mobile Messaging Solutions. Near Telepathy.

Office

Paging

Enterprise

V 2.0

Telefon +41 (0)1 786 77 70 Telefax +41 (0)1 786 77 71 info@swissphone.com www.swissphone.com

Lorperos num velit incillaor Mobile Mantra Office V2.0

V 2.0

Lorperos num velit incillaor Mobile Mantra Paging V2.0

Lorperos num velit incillaor Mobile Mantra Enterprise V2.0

Lore dolorperat, vel dolore feum ex esecte dolobo-

lor si tem del dolore enis nulla ate dolutat augait loboreet, summy nullan ulput nostrud molent

Lore dolorperat, vel dolore feum ex esecte doloborem 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 wisciduip 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

< Dui tie del iliquat. Ut

mobilemantra Mobile Messaging Solutions. Near Telepathy.

iriuscilis nulla aci eugue

vullam iril dolore mod etue min el euis adit dunt

Office

ulla amconsequat.

adip eu feu feum vel eugueril ut iuscing eugait velit, si. Duis et wis nullamc nsequat. Dui tie del

Dolobore dolorem

Dui bla consequam, quat. Ut luptatu riuscipsum

zzrillum dit numsan er in estrud modolor ercillaor sequi tetum volore tat, consectet lorperaesto com-

Niamquipisi Tem accum

Deliquisit alis

Dionsed magnisl dolore

zzrillum dit numsan er in estrud modolor ercillaor

Tincil

Utem vent

Praestin

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

Duissi blaore

Feui tatum ing

Ut luptatu riuscipsum

my nonseni iscil utetum ilit luptat nim dipis num.

sequi tetum volore tat, consectet lorperaesto

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

niate tin ute doloreet wiscincin exer sum ipit wis-

Dui bla consequam, quat. Ut luptatu riuscipsum

zzrillum dit numsan er in estrud modolor ercillaor sequi tetum volore tat, consectet lorperaesto com-

my nonseni iscil utetum ilit luptat nim dipis num.

mobilemantra

Mobile Messaging Solutions. Near Telepathy.

Command Line

Messaging License

Messaging Platform

V 2.0

Lore dolorperat, vel dolore feum ex esecte doloborem 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

Mobile Mantra AddOns 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.

AddOns

Mobile Mantra Office Plus 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.

Mobile Messaging Solutions. Near Telepathy.

OfficePlus

Enterprise

Ut iriuscilis nulla aci eugue vullam iril dolore mod etue min el euis adit dunt ulla amconsequat.

Mobile Messaging Solutions. Near Telepathy.

mobilemantra

Mobile Messaging Solutions. Near Telepathy.

Mobile Mantra Enterprise

mobilemantra

adip eu feu feum vel eugueril ut iuscing eugait velit, si. Duis et wis nullamc nsequat. Dui tie del

Ut iriuscilis nulla aci eugue vullam iril dolore mod etue min el euis adit dunt ulla amconsequat.

Lore dolorperat, vel dolore feum ex esecte doloborem 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

dolobore min henim quate dolor sim ing et loreet

iliquat eugueril ut iuscing.

Lorperos num velit incillaor Mobile Mantra Messaging Platform V2.0

Mobile Messaging Solutions. Near Telepathy.

Lore magnis ea facil duipit dolor ilisl delit in et augait dignisi. Duipit ad magna faciliquis alissed

Messaging License

Lorperos num velit incillaor Mobile Mantra Messaging License V2.0

mobilemantra

dolummy nullamconse dolorperat.

Mobile Messaging Solutions. Near Telepathy.

Lorperos num velit incillaor Mobile Mantra Command Line V2.0

ciduip euipsummy nummod euisit, suscipit ipit nulput prate dolore magna aut alit nis acillandre

mobilemantra

iliquat eugueril ut iuscing.

Vel ipis

Ut iriuscilis nulla aci eugue vullam iril dolore mod etue min el euis adit dunt ulla amconsequat.

ciduip euipsummy nummod euisit, suscipit ipit nulput prate dolore magna aut alit nis acillandre

Mobile Mantra Messaging License

Eum eugiam et venit

Eugue dolore

Mobile Mantra Office

rem auguer sequat. Duis nulla consectem vel elit, consenis augiamet lum nibh exer sit lum aut lut

niate tin ute doloreet wiscincin exer sum ipit wis-

adip eu feu feum vel eugueril ut iuscing eugait velit, si. Duis et wis nullamc nsequat. Dui tie del

Ad dit dunt ing euguerc ncipit

iliquat eugueril ut iuscing.

rem auguer sequat. Duis nulla consectem vel elit, consenis augiamet lum nibh exer sit lum aut lut

loboreet, summy nullan ulput nostrud molent niate tin ute doloreet wiscincin exer sum ipit wisciduip 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.

mobilemantra Mobile Messaging Solutions. Near Telepathy.

Messaging Platform

Mobile Mantra Messaging Platform

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.

Integrationsprinzip Die Website als integrales Element des Product-Design: So muss es sein!

Methodik des Web-Design Lösungsausarbeitung Einführung

Grundlagen für planmässiges und 60

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.

Methodik des Web-Design Grundlagen für planmässiges und 61

Lösungsausarbeitung Nachdem der Auftraggeber das Design aufgrund der Photoshop-Dateien und der (schriftlichen) Erläuterungen 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 PhotoshopDateien 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

zielorientiertes Web-Design mit HTML

Methodik des Web-Design Lösungsausarbeitung Konstruktion

Grundlagen für planmässiges und 62

zielorientiertes Web-Design mit HTML

Konstruktion Konstruiert wird mit Bleistift und Lineal – und mit dem Radiergummi! Selten sitzt die erste Konstruktion, denn eine richtige Einteilung des Designs in Rasterfelder, welche später mit Tabellen programmiert werden können, ist matchentscheidend und sollte unbedingt mehrmals hinterfragt werden.

Methodik des Web-Design Grundlagen für planmässiges und 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 Blockelementen (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!

zielorientiertes Web-Design mit HTML

Methodik des Web-Design Lösungsausarbeitung Konstruktion

Grundlagen für planmässiges und 64

zielorientiertes Web-Design mit HTML

Primärraster

Sekundärraster

Tertiärraster

Divisions

Konstruktion Die Konstruktion liefert den Raster, welcher der Webseite zu Grunde liegt. Sie gibt dem Programmierer wichtige Anhaltspunkte, welche Elemente sich gegenseitig wie beeinflussen. Die Konstruktion kann zusätzlich auch vermasst sein, allerdings ist es in der Regel einfacher, im Hintergrund ein Bildbearbeitungswerkzeug offen zu halten, aus welchem der Programmierer die Masse bei Bedarf messen kann.

Methodik des Web-Design Lösungsausarbeitung

Grundlagen für planmässiges und 65

Konstruktion

zielorientiertes Web-Design mit HTML

Raster

Bilder Hintergrundbilder nicht repetierend Hintergrundbilder repetierend

<body>

Bilder und Farben in der Konstruktion Der Gestalter definiert in dieser Darstellung, welche Elemente überhaupt als Bilder integriert werden sollen, und im weiteren, welche Bilder als Hintergrundbilder in den Body undoder in Tabellenzellen integriert werden sollen.

Methodik des Web-Design Lösungsausarbeitung Prototyp

Grundlagen für planmässiges und 66

zielorientiertes Web-Design mit HTML

Prototyp Alles ist vorbereitet – ab an die Werkzeuge! Nun muss der Lösungsentwurf den Ernstfall proben. Aber man bedenke: Besser einmal länger nachdenken bevor man einen Nagel einschlägt, als ihn nachher wieder mühsam zu entfernen.

Methodik des Web-Design Lösungsausarbeitung

Grundlagen für planmässiges und 67

zielorientiertes Web-Design mit HTML

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 Beispiel 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ändnis des Konzeptes und damit für die spätere Realisierung relevant ist. Da der Prototyp freigegeben wird und auch vom Auftraggeber 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) sollten im Prototyp abgebildet sein.

Methodik des Web-Design Lösungsausarbeitung

Grundlagen für planmässiges und 68

Prototyp

zielorientiertes Web-Design mit HTML

3 4

Einfach, aber elementar: Erstens eine Vorlage erstellen, testen, dann erst duplizieren. Mit diesem Vorgehen erspart man sich jede Menge Korrekturaufwand und vor allem: Ärger! Erstens: Vorlage auf erster Hierar7

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 gegebenenfalls wieder Anpassungen vornehmen. Testen!

Methodik des Web-Design LĂśsungsausarbeitung

Grundlagen fĂźr planmĂ¤ssiges und 69

Prototyp

1 2

3 2 3 3

zielorientiertes Web-Design mit HTML

Methodik des Web-Design Lösungsausarbeitung Prototyp

Grundlagen für planmässiges und 70

zielorientiertes Web-Design mit HTML

Verbindlich für die Freigabe durch den Auftraggeber, verbindlich 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 standhalten, der Auftraggeber kann erstmals die Website bedienen und sich ein detailliertes Bild machen.

Methodik des Web-Design Lösungsausarbeitung Prototyp

Grundlagen für planmässiges und 71

zielorientiertes Web-Design mit HTML

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 Seitenrasters ein sauberen Ausdruck verhindert – eine Feststellung mit verherenden Folgen. Auch eine Überlegung wert: Was könnte in suchmaschinen angezeigt werden?

Methodik des Web-Design Lösungsausarbeitung Prototyp

Grundlagen für planmässiges und 72

zielorientiertes Web-Design mit HTML

Vorher – nachher Das Design, erstellt in Photoshop sollte – wenn alles von Anfang richtig durchdacht wurde – kaum vom Screenshot der programmierten Seite abweichen. Wird der Prototyp nun von allen Beteiligten in allen Punkten freigegeben, steht der nächsten Phase, der Realisierung, nichts mehr im Wege. Mit dem Prototypen ist eine perfekte Schnittstelle zu externen Programmierern vorhanden und grössere Überraschungen sollten ausbleiben!

Methodik des Web-Design LĂśsungsausarbeitung Prototyp

Grundlagen fĂźr planmĂ¤ssiges und 73

zielorientiertes Web-Design mit HTML

Methodik des Web-Design Grundlagen f체r planm채ssiges und Literaturhinweise

zielorientiertes Web-Design mit HTML

Methodik des Web-Design Grundlagen für planmässiges und 75

Literaturhinweise Gui Bonsiepe Interface-Design neu begreifen Bollmann Rudolf Maresch und Florian Rötzer (Hg.) Cyberhypes – Möglichkeiten und Grenzen des Internets Edition Suhrkamp Roy McKelvey Hypergraphics – Design und Architektur von Websites rororo Richard Frick, Christine Graber, Samuel Marty, Martin Sommer (Autorenkollektiv) Satztechnik und Typografie ‹Typografie am Bildschirm›, Band 5 Comedia Verlag Bern Hans Rudolf Bosshard Der typografische Raster Niggli Götz Schmidt Methode und Techniken der Organisation Verlag Dr. Götz Schmid Eric A. Meyer Cascading Style Sheets – The Definitive Guide O’Reilly Danny Goodman Dynamic HTML – The Definitive Reference O’Reilly

zielorientiertes Web-Design mit HTML

Methodik des Web-Design Grundlagen f체r planm채ssiges und 76

Notizen

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ünglichen 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 Auftrag 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 gestalterischen 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 ‹Typografischen Gestalter/-in für visuelle Kommunikation› eingesetzt und ist für das schulinterne Diplom prüfungsrelevant.

Patrick Jauch

Birgit Ostertag

absolvierte nach abgebrochenem

hat nach dem Abitur den Vorkurs

Gymnasium die Berufsausbildung

an der Hochschule für Gestaltung

als Typograf. Er ist Mitinhaber

und Kunst in Zürich absolviert

einer Agentur für Kommunikation

und danach die Ausbildung zur

und Design. Erste Unterrichts

Grafikerin abgeschlossen. Seit

tätigkeit im Bereich Web als

ihrer Weiterbildung zur dipl.

Lehrgangsleiter der Weiterbildung

Onlinegestalterin arbeitet sie als

zum ‹Dipl. Onlinegestalter› an

Designerin und entwickelt haupt-

der IG Mac, Zürich. Heute leitet

sächlich medienübergreifende

er zusammen mit Richard Frick

Corporate- und Product-Designs.

die Fachklasse ‹Typografischer

Die im vorliegenden Lehrheft als

Gestalter› an der Berufsschule für

Fallstudie verwendete Website

Gestaltung Zürich, und unter-

und das dazugehörige Product-

richtet unter anderem die Fächer

Design entstand unter ihrer Feder-

Web-Design und Semiotik.

führung.