| Webdesign - Schritt für Schritt |
|---|
| HTML |
|---|
| 1. Einführung |
| 2. Grundaufbau |
| 3. einfache Seite |
| 4. Farben und Bilder |
| 5. Listen und Tabellen |
| 6. Verweise |
| 7. Frames |
| 8. Formulare |
| 9. Layer |
| 10. Style Sheets |
| Javascript |
|---|
| 1. Einführung |
| 2. Einfaches Script |
| 3. Tricks |
| 4. Formulare |
| 5. Layer |
| Grafik fürs Web |
|---|
| 1. Formate |
| 2. Buttons |
| 3. Hintergruende |
| 4. Leisten |
| Layout erklärt |
|---|
| 1. Fireball |
| 2. T-Online |
| HTML | Grafiken | Buttons | E-Mail an die Redaktion |
|---|
| In diesem Kapitel erfahren Sie alles über Buttons. Von den
einfachen Grundregeln, über Vorrausetzungen, bishin zum erstellen eines
einfachen Basic-Buttons |
|
Diese Seite enthält folgende Themen: |
| HTML | Grafiken | 1. Allgemeines über Buttons | zum Anfang der Seite |
|---|
| Die Gestaltung eines Buttons (ins Deutsche übersetzt: "Knopf") wird von den 110-prozentigen Screen-Designern heiß geliebt. Denn hier kann man so richtig schön am Detail herumfummeln und eine individuelle Note hineinbringen. Genauso wie Schuhe zur Kleidung passen sollten, so sollten die Buttons auch zum Screendesign passen. Im Web findet man aber IMO allzuoft unpassendende Kombinationen, z.B. Smoking mit Turnschuhen, Badehose mit Cowboystiefeln, Kartoffelsack mit Pumps. Ich will hier jedoch keine Mode-Tipps geben, sondern lediglich zeigen, wie Sie sich schöne Schuhe selber herstellen. Ob sie dann letzten Endes zu Ihrem Screendesign passen, müssen Sie einfach selbst entscheiden. Im Web gibt es bereits zahlreiche Seiten mit kostenlosen Buttons zum Selbstverwenden. Diese Massenabfertigung ist hier nicht angesagt. Denn vor dem Lohn hat der Herr bekanntlich den Schweiß gesetzt. In diesem Sinne zeige ich lediglich, wie es gemacht wird. Bei der Beschreibung des Lösungsweges beziehe ich mich auf den Picture Publisher Version 8. Aber auch wenn Sie mit einem anderen Programm arbeitet, sollten Sie keine Probleme haben, den Gestaltungsweg zu verstehen und mit Ihrem Programm nachzuvollziehen. Zunächst beginne ich mit ein paar Grundlagen, wie man Buttons anlegt usw., dann zeige ich Basic-Buttons, die mit kaum mehr als 3 Klicks erstellt werden. Wenn Sie dies dann alles verstanden habt, dann dürften die fortgeschrittenen Buttons keine Probleme mehr bereiten. |
| HTML | Grafiken | 2. Vorraussetzung und Grundlagen für die Buttonerstellung | zum Anfang der Seite |
|---|
|
Im Web findet man Buttons in den verschiedensten Farben und Formen. Einige davon sind in mühevoller Kleinst-Arbeit entstanden, andere wurden im Schnellverfahren generiert oder ganz einfach von anderen Seiten geklaut. Aber ganz gleich, wie viel Mühe man in die Erstellung der Buttons auch investiert, ein Designer sollte nie ihre eigentliche Funktion aus den Augen verlieren. In erster Linie sind sie dazu da, den Besuchern die "Sprungmöglichkeiten" einer Web-Seite klar und schnell zu offerieren und sie gezielt zu den gewünschten Inhalten zu navigieren. Was sollte man also bei der Gestaltung eines Buttons beachten? Neben bestimmten ästhetischen Anforderungen, die jedoch immer nur subjektiv beurteilt werden können, erfüllt ein gelungener Button IMO noch folgende Kriterien: Er hebt sich genügend vom Hintergrund und übrigem Screendesign ab, wird vom Besucher als "drückbar" identifiziert und seine Funktion ist sofort und intuitiv zu erkennen. Der "typische" Button besitzt deshalb eine eingegrenzte Fläche mit einem Rahmen oder Schlagschatten (durch die er sich abhebt), eine durch Licht und Schatten erzeugte Plastiziät (die ihn "drückbar" macht) und eine Beschriftung (durch die seine Funktion klar wird). Buttonform. Ein Button braucht keine allzu ausgetüftelte Grundform zu besitzen. Je ungewöhnlicher ein Button geformt ist, desto größer ist sogar die Gefahr, dass die Besucher ihn nicht als Button erkennen. Häufig wählt man deshalb auch einfache Formen wie Kreis, Dreieck und Rechteck. Es können aber durchaus auch innovative Buttonformen verwendet werden, wenn dafür gesorgt wird, dass sich der Button am Ende deutlich vom Hintergrund abhebt, als solcher erkannt wird und dessen Funktion klar wird. Klassische Bildbearbeitungsprogamme, wie etwa der Picture Publisher, bieten in der Regel keine besonders komfortablen Möglichkeiten, um Buttonformen herzustellen. Oft kann man dies mit nur mit den Maskenwerkzeugen und Hilfslinien erledigen. Eine weitaus komfortablere Möglichkeit, schnell zur gewünschten Form zu gelangen besteht darin, sie einfach in einem Vektorgrafikprogramm wie z.B. Corel Draw erzeugen und in das Bildbearbeitungsprogramm zu exportieren. Rahmen und / oder Schlagschatten. Rahmen oder Schlagschatten sind vor allem dann richtig wichtig, wenn der Button keine ausreichend kontrastierende Farbe zum Hintergrund besitzt. Ein Schlagschatten ist nicht zwingend erforderlich, hilft aber den Besuchern dabei, die Navigation noch deutlicher vom Inhalt unterscheiden zu können. Letztendlich geht es darum, dass die Besucher schnell sehen, von wo aus es wohin weitergeht. Niemand möchte erst nach Buttons suchen müssen. Licht und Schatten. Ein Button muss nicht zwingend Licht- und Schattenkanten haben. Dies ist in erster Linie eine Frage des persönlichen Geschmacks und der vertretenen "Design-Philosophie". Da die Buttons aus der realen Welt (z.B. Klingelknöpfe oder Tasten an Geräten) ebenfalls plastisch sind, verstärkt ein plastisch wirkender Web-Button nocheinmal die Gewissheit, dass man dort auch "draufdrücken" kann. Beschriftung. Die Beschriftung ist das Wichtigste an einem Button. Ohne sie weiß niemand, was passiert, wenn man draufklickt. Der Button ist also ohne sie unnütz. (Ausnahme: Die Buttonform selbst ist schon Beschriftung genug, z.B. Pfeil nach rechts = weiterblättern, Fragezeichen = Hilfe). Bei der Verwendung von Symbolen sollte man aufpassen: Was für einen selbst vielleicht glasklar ist, gibt Besuchern unter Umständen Rätsel auf. Und die will im Web weiß Gott niemand lösen, sondern das Ganze sollte gefälligst intuitiv sein. Inzwischen haben sich aber einige Symbole etabliert, die von nahezu jedem Besucher intuitiv verstanden werden. Dazu gehören u.a. das Haus (= "zur Startseite"), Pfeile (= "weiter" v "zurück", ...), Fragezeichen (="Hilfe"), Häckchen (="OK"), Briefumschlag (="E-Mail schicken"), usw. Da ein Button nicht viel Platz für Text bietet, stellt sich ein Ähnliches Problem, wenn man die Funktion eines Buttons mit Hilfe eines Begriffes eindeutig beschreiben möchte. So haben sich inzwischen (nicht nur auf Firmen-Sites) Begriffe wie "Kontakt" etabliert, obwohl sie eigentlich kein Web-Gestalter so richtig liebt. Gäbe es einen besseren Begriff, dann hätte er sich schon etabliert. Es gibt ihn aber nicht, oder kennst Du einen? Auf der anderen Seite ist es aber nicht sinnvoll, neue Begriffe einzuführen oder gar zu erfinden, wenn Besucher deren Bedeutung erst lernen müssen oder intuitiv anders verstehen. (So pochen z.B. viele Marketing-Abteilungen aus persönlicher Eitelkeit oft darauf, dass "Ihre" Begriffe oder Sprachschöpfungen auch auf der Web-Site verwendet werden. Das Resultat: Der Besucher findet sich nicht zurecht.) Will man also eine besucherfreundliche Web-Site erschaffen, dann bleibt am Ende nichts anderes übrig, als mit der Masse zu schwimmen und bei den Buttons Begriffe zu verwenden, die sich bereits bewährt und etabliert haben. Eines ist aber auf jeden Fall zu empfehlen: Die Beschriftung eines Buttons sollte mit einer "schnörkellosen" Schriftart erfolgen. Schreibschriften o.Ä. sehen zwar hübsch aus, haben aber auch einen hohen Lesewiderstand. Der Begriff kann bei diesen nicht "auf einen Blick" erfasst werden, sondern muss gelesen werden. Und das strengt an. Damit hätten wir alle Grundlagen beisammen, die aus meiner Sicht bei der Button-Gestaltung zu beachten sind. Zusammenfassung über den Button: -Er hebt sich genügend vom Hintergrund und übrigem Screendesign ab |
| HTML | Grafiken | 3. Erstellung eines Basic-Buttons | zum Anfang der Seite |
|---|
|
Hier zeige ich ihnen nun wie man einen Basic-Button erstellt. Ich verwende das
Programm "Picture Publisher 8" von Microsoft.
Los gehts. |
| HTML | Grafiken | 4. Kontrollfragen | zum Anfang der Seite |
|---|
|
Beantworten Sie folgende Fragen: 1. Welche Anweisungen sind falsch?
|
| HTML | Grafiken | Buttons | zum Anfang der Seite |
|---|