Skip to main content

Design, Layout, Farben

Das Template ist eines der wichtigsten Bestandteile einer Website. Es sorgt für das Erscheinungsbild, das Design. Es macht neue Besucher neugierig und sorgt dafür, dass sie sich auf der Website umsehen. Ständige Nutzer Ihrer Website freuen sich ebenfalls über ein schönes und nützliches Design.

Denken Sie einfach mal an andere Produkte. Ein Auto benötigt einen guten Motor und gute Reifen, aber einer der wichtigsten Gründe, ein Auto zu kaufen, ist oft das Design. Selbst wenn das Design nicht der Hauptgrund ist, so ist es doch oft ein Auslöser, um über andere Gründe nachzudenken, die für einen Kauf sprechen. Wenn das Design gut ist, meinen viele, dass der Rest auch gut sein wird (vergleiche Abbildung1 und Abbildung 2).

Bumper sticker car

Abbildung 1: Auto mit Aufklebern (Richardmasoner) -http://www.flickr.com/photos/bike/201402884

Ferrari 599GTB

Abbildung 2: Rotes Auto (FotoSleuth) - http://www.flickr.com/photos/51811543@N08/4978639642

Beide Autos haben bestimmte Zielgruppen. Sie sind ein Beispiel für unterschiedliche Ideen im Design.

Ein paar Definitionen

Ich möchte hier nur ein paar Begriffe näher erläutern um Sie ein wenig zum Nachdenken zu bringen.

Was ist Design?

Das ist gar nicht so einfach zu erklären, weil der Begriff in unterschiedlichen Sprachen eine unterschiedliche Bedeutung hat, siehe auch Wikipedia.

Im angelsächsischen Sprachraum wird darunter verstanden:

  • Das Substantiv Design steht für einen Plan oder eine Zeichnung welches die Funktionen eines Objekts beschreibt und/oder eine Vorschau darauf gibt. Design steht auch für den Vorgang bestimmte Ziele unter bestimmten Bedingungen bei Beachtung bestimmter Voraussetzungen zu erreichen.
  • Das Verb "to design” (designen) steht für den Vorgang ein Design in einer bestimmten Umgebung (in der der Designer arbeitet) zu erstellen.

Der Begriff Design wird benutzt

  • in der Kunst ("instinktiv", "eingebaut", "natürlich" und als Teil unseres "Sinns für die Richtigkeit"),
  • im Ingenieurswesen (Produkt Design eines neuen Autos)
  • in der Produktion (Planung und Ausführung)
  • in Prozessen (Geschäftsprozessoptimierung)

Was ist ein Seitenlayout?

Ein Seitenlayout ist ein Teilbereich von "Grafikdesign". Es handelt von der Anordnung und dem Erscheinungsbild von Elementen (Inhalte) auf Seiten. Um in Joomla Begriffe zu sprechen: Es geht um die Anordnung von Joomla Modulen und Komponenten in vordefinierten Templatepositionen.

Was sind Farben?

Farbe ist eine individuelle, visuelle Wahrnehmung, die durch Licht, das in dem für das menschliche Auge sichtbaren Bereich (rot, grün, gelb) liegt, hervorgerufen wird. Individuelle Farben haben oft auch eine kulturelle Bedeutung wie beispielsweise Nationale Farben (Flagge). Es gibt grosse Unterschiede in der Verwendung von Farben und deren Bedeutungen selbst innerhalb einer Kultur und zu unterschiedlichen Zeiten.
HTML Farben und CSS Farben können 16 Millionen unterschiedliche Farbwerte darstellen. Die Kombination aus Rot, Grün und Blau mit Intensitätswerten von 0 bis 255 ergibt diese 16 Millionen Farbwerte (256 x 256 x 256).
Beispiel: BLACK = Farbwert HEX #000000 = color RGB rgb(0,0,0)
Tools wie der Color Scheme Designer können bei der Auswahl der "richtigen" Farben für Ihre Website sehr hilfreich sein (Abbildung 3).

Color Scheme Designer

Abbildung 3: Color Scheme Designer

Templates

Ein Template beinhaltet sich wiederholende Elemente einer Website. Die Anordnung von Elementen innerhalb eines Templates benötigt weniger Kenntnisse in Grafikdesign als vielmehr Kenntnisse über die Erstellung eines Templates (das Design des Templates). Templates werden genutzt, wenn nur minimale Anpasssungen der Elemente des Hintergrunds und häufige Veränderung der Inhalte im Vordergrund stattfinden.

Webdesign

Webdesign umfasst die Gestaltung, den Aufbau und die Nutzerführung  und das Interface-Design von Websites. Der Webdesigner hat dabei die Aufgabe, die Kommunikationsziele des Auftraggebers mit Hilfe der technischen Gegebenheiten umzusetzen.

Webdesign ist also eine Art Handwerk und ein weit gefächertes Gebiet. Man benötigt vielerlei Kenntnisse auf verschiedenen Gebieten, wie beispielsweise HTML, CSS, JavaScript, PHP, Bildbearbeitung und vieles andere mehr.
Joomla! ist nur ein zusätzliches Werkzeug im grossen Baukasten eines Webdesigners.

Ein gutes Joomla Template hat nicht nur mit Farben und Grafiken zu tun. Die Gestaltung und Positionierung der Inhalte ist mindestens genauso wichtig. Die Website muss benutzerfreundlich und verlässlich sein. Und genau diese Herausforderung erinnert mich wieder an die beiden Autos am Anfang des Kapitels.

Webdesign ist immer noch ein junger Beruf. Ein Webdesigner ist oft mit solchen Themen wie langsame Internetverbindungen, inkompatible Browser, unerfahrene Benutzer, die Inhalte erstellen und vielen anderen Dingen, die mit der Erstellung einer "guten" Website zu tun haben, konfrontiert. Die Erstellung einer Joomla Website ist oft auch ein Vorgang, bei dem alle Beteiligten eine Menge lernen.

Gutes Webdesign ist harte Arbeit! :-)

Mit Joomla 3 wird eine Joomla User Interface library (JUI) mit dem Protostar Template eingeführt.

Nachdem Sie Ihre Website in der gewünschten Sprache haben, wollen die meisten Leute etwas an den Farben verändern und ein Logo hochladen, auch wenn noch keine Inhalte vorhanden sind. Joomla enthält vordefinierte Templates und sogenannte Templates Stiles. Ein Template Stil ist eine Sammlung von Parametern (Farben, Logo, Layout) für das eigentliche Template. Die Möglichkeiten der Konfiguration hängen vom Template ab. Manche Templates bieten eine riesige Auswahl an Einstellungen, manche dagegen sind sehr limitiert.
Sie können beliebig viele Stile zu einem Template erstellen und diese Stile auf unterschiedlichen Seiten Ihrer Website nutzen.

Struktur

Joomla ist bekannt für seine Qualität und seine leichte Bedienbarkeit. Jede von Joomla erzeugte HTML Seite setzt sich zusammen aus der HTML Ausgabe einer Komponenten, beliebig vielen Modulen und den statischen Elementen des Templates. Jede Seite ist erreichbar über einen eindeutigen URL. Nehmen Sie als Beispiel die Startseite. Die "Content" Komponente erzeugt die HTML Ausgabe für die Artikel in der Mitte der Seite. Der Screenshot basiert auf dem Joomla Beez Template (Abbildung 4). Die Blöcke, die die Artikel umgeben sind unterschiedliche Module. Sie können die HTML Ausgabe einer Komponente mit der HTML Ausgabe beliebig vieler Module kombinieren. Bestehende Module können auf mehreren Seiten genutzt werden.

Structure

Abbildung 4: Joomla! front page

Positionen

Sie müssen natürlich wissen an welchen Stellen Sie die Module positionieren können. Für diesen Zweck gibt es in jedem Template sogenannte Positionien. Um sie sehen zu können, müssen Sie die Vorschau Modulpositionen freigeben (Erweierungen → Templates → Optionen). Danach können Sie Ihre Website mit dem Parameter tp=1 aufrufen (http://localhost/index.php?tp=1) oder auf den Vorschau Link inErweiterungen → Templates → Templates klicken (Abbildung 5).

Site Templates - Positions Preview

Abbildung 5: Site Templates

Nun sehen Sie die hervorgehobenen Modulpositionen und Ihre Namen (Abbildung 6).

Positions

Abbildung 6: Modulpositionen - Protostar Template

In Erweiterungen → Module können Sie diese Positionen jedem Modul zuweisen. Wenn Sie ein Modul an zwei Positionen benötigen, können Sie es kopieren.

Core Templates

Joomla! enthält zwei Site Templates und zwei Administrator Templates. Sie sehen eine Vorschau inExtensions → Template Manager. Sie können die Anzeige von Site und Administrator Stilen über Bereich wählen filtern (Abbildung 6 und Abbildung 7).

Admin Templates

Abbildung 7: Administrator Templates

Stile

Stile bieten die Möglichkeit unterschiedliche Versionen eines Templates zu erzeugen. Ein Template benötigt mindestens einen Stil. In diesem Stil können beispielsweise die Farben und das Logo verändert werden. Probieren Sie einfach mal einen anderen Standard Stil für Ihre Website aus Erweiterungen → Templates → Stile.

Beispiel: Ein individueller Stil

Lassen Sie uns einen eigenen Stil für die Website erzeugen:

  • Name: cocoate
  • Template-Farbe: #f88638
  • Fluid-Layout

Sie können einen vorhandenen Stil kopieren. Für dieses Beispiel benutze ich das Protostar Template (Abbildung 8).

Duplicate Style

Abbildung 8 - Stil kopieren

Vergeben Sie einen Namen und setzen Sie ihn als Standard für alle Sprachen. Falls Sie ein mehrsprachiges Joomla erstellen, können Sie Stile pro Sprache nutzen (Abbildung 9)

Style Name

Abbildung 9 - Einstellungen in einem Template Stil

Im Optionen Tab können Sie die Template- und Hintergrundfarbe, sowie das Logo und den Schrifttyp setzen (Abbildung 10, Abbildung 11)

Website Colors

Abbildung 10 - Optionen Tab - Stil

Logo Upload

Abbildung 11 - Hochladen eines Logos

Jeder Stil kann (und muss) einem Menüeintrag zugeordnet werden. Wenn Sie beispielsweise einen grünen Hintergrund auf Ihrer Website haben wollen, wenn die Besucher auf Menüeintrag A klicken, und einen blauen Hintergrund, wenn sie auf B klicken, können Sie das entsprechend zuweisen. Ich habe hier nun einen Menüeinrag, da ich ja immer noch keinen Inhalt auf der Seite habe. Daher ordne ich den neuen Stil dem Home Link zu (Abbildung 12).

Assigned Menu

Abbildung 12 - Menüzugehörigkeit

Nach dem Speichern sieht auch die Website anders aus (Abbildung 13) und weil das Protostar Template responsiv ist, wird es auch perfekt in einem Mobilbrowser angezeigt (Abbildung 14

Website with new style

Abbildung 13 - Website auf einem Desktop PC 

Website on a mobile device

Abbildung 14 - Website in einem Mobilbrowser 

Ändern Sie Ihre Template Dateien online

Wenn Sie wissen, was Sie tun, können Sie Ihre Template Dateien online ändern. Ein Template besteht aus vielen Dateien und Sie können die zentralen Dateien direkt online ändern.
Falls Sie beispielsweise das Protostar Template verändern wollen, gehen Sie zu Erweiterungen → Templates → Protostar Details und Dateien und klicken den Link zur gewünschten Datei.

Changing the Template Markup

Abbildung 15: Anpassen von Templates

Es ist natürlich auch möglich, die Template Dateien in einem externen Editor zu verändern
Die Templates finden Sie im /templates Ordner. Jedes Template hat seinen eigenen Ordner. Im/templates/systems Ordner finden Sie die Dateien für das Offline- und das Fehlerseitentemplate.
Die Administrator Templates befinden sich im Ordner /administrator/templates.

Weiterführende Informationen