Projektplanung
So planst Du Dein Website-Projekt

Für eine Website benötigst Du viele Inhalte: Texte, Fotos, Icons, vielleicht Videos und vieles mehr. Damit Dein Website-Projekt gelingt, planst Du es am Besten zuvor. Was alles dazugehört, erkläre ich Dir im Folgenden.

Jede Website gestaltet sich ein wenig anders, aber ein paar grundlegende Webseiten sollte bzw. muss jede Website haben. Das sind…

• Startseite
• Impressum
• Datenschutzerklärung
• Kontaktseite

Ordnerstruktur für Website-Projekte

Für jede Webseite dieser einzelnen Webseiten, brauchst Du Texte und Bildmaterial. Wenn Du ein Projekt planst, dann helfen Ordner, die Du auf Deinem Rechner anlegst. Planst Du ein Projekt gemeinsam mit Freunden oder Kunden, helfen Services wie Dropbox, Google Drive und ähnliche Cloud-basierte Speicher. Die folgende Ordnerstruktur erklärt sich dann eigentlich von selbst:

.
├── Startseite
│   ├── Bildmaterial
│   └── Texte
├── Impressum
│   ├── Bildmaterial
│   └── Texte
├── Datenschutzerklärung
│   ├── Bildmaterial
│   └── Texte
└── Kontaktseite
    ├── Bildmaterial
    └── Texte

Beispielordner der Startseite

Wenn Du z.B. für die Startseite Deine Inhalte erstellst, recherchierst und sammelst, dann könnte anschließend der Ordner wie folgt aussehen. Gute benannte Dateinamen unterstützen die Ordnung noch mehr. Selbst wenn eine Datei verrutschen sollte, wissen alle später noch wohin die Datei eigentlich gehört.

.
└── Startseite
    ├── Bildmaterial
        ├── header_startseite_illustration_brennstoffzelle.jpg
        ├── startseite_icon_kompass.svg
        ├── startseite_icon_werkzeug.svg
        ├── startseite_icon_telefon.svg
        └── startseite_team.jpg
    └── Texte
        └── startseite.txt

Beispiele für den Aufbau einer Website

Einfache Projektseite

.
├── Startseite
├── Über Uns | Team | Wir über uns | Über den e.V. | Über unseren e.V.
├── Philosophie
├── Projekte
├── Spenden
├── Partner
├── Aktuelles | Neuigkeiten | Neues
├── Kontakt
└── Impressum & Datenschutz

Berufliche Websites

Websites für Geschäfte und Berufe mit Dienstleistungen wie z.B. Ärzte, Sportstudios, Anwälte strukturieren sich oft ähnlich. Variationen ergeben sich meist bei der Benennung des jeweiligen Menüpunktes.

So hat z.B. sowohl ein Arzt, ein Anwalt als auch ein Yoga-Studio einen oder mehrere Schwerpunkte. Diese kannst Du auf vielfältige Weise benennen, z.B. so:

• Schwerpunkte
• Service
• Dienstleistungen
• Leistung
• Behandlungsspektrum (eher Ärzte)
• Portfolio (eher Webdesigner)

Mögliche alternative Bezeichnungen für die jeweiligen Navigationspunkte und Ihre Inhalte findest Du einfach nebeneinander geschrieben und lediglich durch ein | getrennt.

.
├── Startseite
├── Über Uns | Team
├── Philosophie
├── Portfolio | Schwerpunkte | Service | Dienstleistungen | Leistung | Behandlungsspektrum
│   ├── Punkt #1
│   ├── Punkt #2
│   ├── Punkt #3
│   ├── ...
│   └── ...
├── Kunden | Auszeichnungen | Referenzen
├── Aktuelles | Neuigkeiten | Neues | News
├── Kontakt
├── Öffnungszeiten | Termine | Termin buchen
├── Anfahrt
└── Impressum & Datenschutz

Portfolio

Beim folgenden Aufbau handelt es sich um eine Portfolio-Website, auf welcher man sich und sein Können präsentiert. Als Blaupause habe ich meine eigene Website https://phlow.de/moritz-mo-sauer/ genommen.

.
├── Startseite
├── Portfolio
│   ├── Kunden
│   ├── Seminare
│   ├── Fachbücher
│   └── Webdesign
├── Über Mich
│   ├── Biografie
│   ├── Fotos
│   ├── Musik
│   └── DJ Mixe
├── Projekte
│   ├── Projekte Übersicht
│   ├── Phlow Magazin
│   └── Phlow.TV
├── Mein Blog
│   └── Archivseite
│       ├── Beitrag #1
│       ├── Beitrag #2
│       ├── Beitrag #3
│       └── Beitrag #4
├── Mein Blog
└── Impressum & Datenschutzerklärung

Blog

Blogs kommen meist mit einem ähnlichen Aufbau daher. Der Aufbau strukturiert sich in der Regel anhand der gewählten Kategorien, die die Themen des Blogs abdecken. Der Folgende Aufbau orientiert sich am Thema Modeblog.

.
├── Startseite
├── Über Mich
├── Fashion   (Kategorie)
├── Outfits   (Kategorie)
│   ├── Frühlings Outfits (Unterkategorie)
│   ├── Sommer Outfits    (Unterkategorie)
│   ├── Herbst Outfits    (Unterkategorie)
│   └── Winter Outfits    (Unterkategorie)
├── Beauty    (Kategorie)
├── Lifestyle (Kategorie)
├── Food      (Kategorie)
├── Interior  (Kategorie)
├── Travel    (Kategorie)
└── Impressum & Datenschutzerklärung

Software für die Planung einer Website

FlowMapp ist eine Web-App zur Erstellung visueller Sitemaps und User Flows, mit dem Sie die Benutzererfahrung effektiv gestalten und planen können.

Planst Du größere Projekte, dann unterstützt Dich die Web-App Flowmapp. Sie hilft bei der Planung von Web-Projekten, wie z.B. der Planung der Seitenstruktur. Flowmapp erleichtert die Arbeit, indem es bereits zu Anfang Vorlagen bzw. Sitemaps für verschiedene Web-Projekte anbietet.