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

Unsere Kompetenzen


Alexander¬īs Webdesign

Mosebergstraße 1
37441, Bad Sachsa

+49-(0)-5523-952 89 98
+49-(0)-160-932 435 66
Diese E-Mail-Adresse ist vor Spambots gesch√ľtzt! Zur Anzeige muss JavaScript eingeschaltet sein.

Montag - Freitag 09:00 - 18:00 Uhr

Kundenstimmen

So bewerten uns unsere Kunden.

4.8 / 5 Sternen

4.8 / 5 bei 108 Stimmen

Alle Bewertungen


  • Folgen Sie uns

Copyright © 2003 - 2022 Alexander¬īs Webdesign - Alle Rechte vorbehalten.