Gestaltungsvorlage für Deine Website: das Theme

Hier findest Du wichtige Kriterien für die Auswahl des Themes, eine Übersicht der änderbaren Elemente und ein paar grundlegende Regeln für Gestaltung und Inhalt.

Auswahl des Themes

Nachdem Du das Material für Deine Website geordnet und strukturiert hast, kannst Du mit der Suche nach der passenden Gestaltungsvorlage ( Theme) beginnen.

Achte dabei darauf, dass:

  • das Theme ist responsive ist (mittlerweile Standard)
  • die Navigationsstruktur grundsätzlich Deinem Vorhabe entspricht, z.B.:
    • visueller Zugang zu den Arbeiten („Kacheln“)
    • Navigation über Titel
    • alle Arbeiten direkt von der Homepage aus erreichbar
    • Arbeiten erst nach einen Zwischenschritt (z.B. nach Wahl einer Kategorie) zugänglich
  • die Position des Navigationsmenü (oben, am linken oder rechten Rand) Deiner Vorstellung entspricht
  • falls gewünscht, ein Hamburger Menü (drei Striche) oder anders klappbares Menü integriert ist

Bei der Suche nach einem geeigneten Theme solltest Du zunächst folgende Kriterien ausblenden – all das kann im Kurs geändert werden:

  • Schriftart
  • bestimmte Elemente, die Dir nicht gefallen (z.B. Linien, Umrandungen, farbiger Hintergrund)
  • Anordnung von Bildern und Texte (z.B. Textlauflänge, Abstände zwischen Bildern, Polsterung von Text und Bildern)
  • (Social) Icons
  • Animationen
  • Elemente in der Seitenleiste

Änderbare Elemente

Schriften

  • Schriftfamilie
  • Schriftgröße
  • Schriftfarbe
  • Schriftgewicht (fett, normal etc.)
  • Zeilenabstand

    Farben

  • Hintergrund
  • Schriften
  • Feldern
  • Buttons
  • Umrandungen
  • Linien

Sichtbarkeit von Elementen

  • Viele Elemente können per CSS ausgeblendet werden (z.B. Icons wie Pfeile, Meta-Angaben wie Datum, Autor, usw.).
  • Die Kommentare können global oder pro Beitrag / Seite ausgestellt werden.
  • Widgets in der Seitenleiste könne unter Design > Widgets erstellt oder gelöscht werden.

Anordnung von Bildern und Text

  • Ein Spaltenlayout – für Text und/oder Bilder –  kann mittels Plugin eingebunden werden. Bedenke, dass die Darstellung auf verschiedenen Bildschirmgrößen variiert.
  • Bilder können neben- oder untereinander gestellt werden. Mit einem Slider-Plugin kann eine Galerie zum durchklicken erstellt werden. Auch bildschirmfüllende Hintergrundbilder sind möglich.
  • Tabellen können erstellt werden, z.B. für die Vita.
  • Text kann ein Bild umfließen.

Positionierungen von Elementen

  • Höhe und Breite des Navigationsmenüs
  • Breite des Inhalts (also die Breite von Texten und Bildern)

Grundlegende Regeln für Gestaltung und Inhalt

  • Vermeide Blocksatz. Er wirkt schnell zerhackt, da der Textbereich je nach Bildschirmgröße angepasst wird.
  • Die beste Position des Navigationsmenüs ist oben oder links. Unten oder rechts ist je nach Bildschirm woanders.
  • Mehr als 2, max. 3 Schriften zu benutzen führt zu langen Ladezeiten.
  • Videos und/oder Soundfiles selbst zu hosten kostet Speicherplatz und Ladezeit. Daher besser extern hosten (youtube, vimeo, soundcloud u.ä.) und verlinken.
  • Gestalte die Seite so, dass jede Aktualisierung ohne großen Aufwand passieren kann. (Bedenke z.B., dass eine neue Werkgruppe dazukommen kann.)
  • Benutze keine Bilder anstelle von Text für die Navigation. Suchmaschinen mögen Text …
  • Die Homepage sollte bereits wichtige Informationen enthalten. Für Suchmaschinen ist die Startseite eine der wichtigsten Seiten, hinterlege hier – wenn möglich, News oder eine Übersicht Deiner Arbeiten.
  • To be continued