Planung einer Website
Ob es nun eine erste Seite werden soll oder ihre Seite ein Redesign benötigt, es lohnt immer vorab ein wenig Zeit für die Planung zu investieren. Die Schritte der Planung wiederholen sich für jeden neuen Entwurf und jedes Webseitenthema. Ich möchte ihnen lediglich etwas zu meiner Vorgehensweise, zu den Überlegungen eines Designs und der Vorgehensweise bei der 'Herstellung' beschreiben.
Da ich sämtliche Seiten mit einem simplen HTML-Editor erstelle und Seitenelemente nicht einfach mit der Maus hin- und herschieben kann, ist eine wirtschaftliche Arbeitsweise angeraten. Ich erstelle eine Musterdatei (als Basis jeder Seite vorgesehen), in die ich später die unterschiedlichen Seiteninhalte einkopiere.
Mein Grundsatz
Für den Entwurf dieser Musterseite nehme ich mir viel Zeit. Schließlich möchte ich (möglichst) nur an dieser Musterseite herumprobieren und experimentieren. Nicht hinterher an den 50 fertigen Seiten alles nachtragen und ändern.
Für die Entwicklung einer neuen Seite gibt es eine bewährte Vorgehensweise, soll ihre Arbeit von Erfolg gekrönt sein (Heute kann ich leicht reden, war ich doch zu Beginn meiner HTML-Experimente viel zu ungeduldig, um mich an solche Regeln zu halten). Seien sie vernünftiger als ich und denken erst einmal nach:
Was wollen sie?
Welche Informationen wollen sie im Netz veröffentlichen? Was möchten sie mit ihrem Projekt erreichen?
- ihr Hobby oder Wissensgebiet vorstellen
- Produkte und Dienstleistungen anbieten
- als Einrichtung Arbeitsbereiche vorstellen
- als Verein Aktivitäten veröffentlichen
Wen wollen sie erreichen?
Welchen Personenkreis möchten sie adressieren? Welche Benutzergruppe(n) erwarten sie als Seitenbesucher?
- Hobbytreibende und Gleichgesinnte
- Kunden und Käufinteressenten
- Hilfe- und Ratsuchende
- Fachleute oder Laien?
- Kinder, Schüler, Jugendliche, Erwachsene
- lokale, regionale, überregionale, weltweite Besucher?
Daten- und Bildquellen?
Wenn sie ihre eigenen Rezepte oder Gedichte veröffentlichen möchten, ist die Frage nach den Textquellen natürlich überflüssig.
Zur Ausschmückung der Seiten wären Grafiken und (eigene) Fotos vorteilhaft. Bei der Planung der Inhalte sollten sie ihre Texte und passende Grafiken erst einmal zusammenstellen und in digtaler Form ablegen.
- Texte für den Seiteninhalt
- zum Thema passende eigene Fotos
- lizenzfreie Fotos (z.B. www.pixelio.de)
- lizenzfreie Grafiken (z.B. www.kneller-gifs.de)
Die Fotos und Grafiken werden sie später evtl. in Größe und Farbe dem geplanten Design anpassen müssen.
Später bei der Feinarbeit benötigen sie außerdem eine Sammlung der üblichen Mini-Grafiken wie Pfeile, Aufzählungszeichen und kleine 'Blickfänger'. Die gibts kostenlos im Netz. Die Auswahl dieser Grafiken treffen sie erst, sobald sie sich für die Farbgebung ihrer Seite entschieden haben.
Inhalte: Aufbau Struktur und Gliederung
Überdenken sie den Aufbau und die Struktur ihrer Seite und lassen sie viel Platz für spätere Erweiterungen.
Wenn die Gliederung feststeht, ist es an der Zeit sich auf eine Navigation festzulegen. Wenige Seiten kommen mit nur einem Menü aus, eine deutlich strukturierte Seite erfordert eine Navigation mit einem Hauptmenü und mehreren Untermenüs.
Farben und Erscheinungsbild
Bei den Farben haben sie die Qual der Wahl! Oder doch nicht?
Möchten sie z.B. eine Seite für einen Hospiz erstellen, ist Blau die falsche Grundfarbe.
Machen sie sich mit den Hintergründen der psychologischen Zusammenhänge zwischen Farben und Empfindungen vertraut. Denken sie dabei an ihre Zielgruppe.
Bleiben wir einmal bei der Hospizseite: Die Hilfesuchenden wollen Rat, Unterstützung und einen Blick nach vorn. Manchmal auch einen kleinen Schubser. Gelb in einem passenden Farbton wäre hier die richtige Wahl. Vermittelt diese Farbe doch unterbewusst Antrieb und Neuanfang.
| |
|
Jede Farbe vermittelt einen anderen Eindruck - der Bauch entscheidet.
Design und Aufteilung
Die Aufteilung der Seite hängt von technischen und geschmacklichen Faktoren ab und ist daher einem dauernden Wandel unterlegen.
Dabei müssen die dem Seitenbesucher zur Verfügung stehenden technischen Mittel (Bildschirmbreite) berücksichtigt werden. Waren das vor 5 Jahren noch 800 Pixel Bildschirmbreite, ist der Standard mittlerweile bereits 1024 und mehr. Seien sie dabei aber nicht zu großzügig, nur weil an ihrem Arbeitsplatz 1600 Pixel Flachbildschirme stehen. Die 'großen' Seiten (z.B. Google) machen es vor: Oft wird noch 'für 800-Pixel-Besucher designed' und auf jeglichen Schnik-Schnak verzichtet.
Eine 3-spaltige Aufteilung für 1024 Pixel ist allerdings zeitgemäß!
Erster Entwurf
Der erste Entwurf wird auf Papier skizziert. Häufig wird danach mit einem Grafikprogramm ein digitales Bild entworfen. 1024 Pixle breit, mit den vorgesehenen Spalten und Menübereichen.
Dann wird dieser Entwurf 'zerschnippelt' und mit HTML wieder zusammengesetzt. So entsteht ein erster Rahmenentwurf, der dann verfeinert wird.
Entscheiden sie sich zu diesem Zeitpunkt für ein Design mit oder ohne Frames!
Für Texte, farbliche Balken und Linien werden (mit CSS) Größe und Farben festgelegt. Zu verwendende Grafiken (aus ihrer Sammlung) werden in Farbe + Größe angepasst oder neu entwickelt. Der eigentliche Inhaltsbereich wird mit 'Dummy-Text' gefüllt.
Die Navigation wird entwickelt, Titel- und Fußzeilen berücksichtigt. Dieser Entwurf wird als Musterdatei gespeichert.
An dieser Stelle rate ich dazu, alles weitere auf den nächsten Tag zu verschieben.
Fließbandarbeit
Wenn sie auch am nächsten Tag noch mit ihrem Entwurf zufrieden sind, geht dank ihrer Vorarbeit nun (und auch für zukünftige Erweiterungen) alles recht schnell.
Da sich lediglich der Seiteninhalt ändert und alles andere identisch bleiben soll, speichern sie die Musterseite unter einem neuen Dateinamen ab und passen als Erstes die Grafik dem Seitenthema an.
Wenn sie sehr rationell arbeiten, liegen die zu vewendenden Grafiken bereits alle in gleicher Bildgröße vor. Die Dateinamen dieser Grafiken lauten bis auf eine Nummerierung gleich. So müssen sie in der Musterdatei lediglich die Endnummer ändern, um eine zum Seitenthema passende Grafik einzubinden.
Dann geht es (für jede neue Seite) weiter wie am Fließband:
- Thementext aus ihrer Sammlung kopieren
- in den Inhaltsbereich einfügen
- CSS Formatierungen eintragen (Überschriften + Rahmen)
- evtl. Designelemente (Grafiken) eintragen
- speichern, fertig
Für jede neu erstellte Seite wird in der Navigation der Link entsprechend angepasst.
|