Vorgefertigte WordPress Themes aus dem Internet sind wenig individuell, da sie nicht einzigartig sind und meist von mehreren Blogs verwendet werden. Wenn ihr ein einzigartiges Theme für euer WordPress Blog haben wollt bleibt euch nichts anderes übrig als eines selbst zu erstellen, oder jemanden damit zu beauftragen. In diesem Artikel will ich mal ein wenig darauf eingehen, wie man am besten ein eigenes WordPress Theme erstellt.

Warum muss das Design überhaupt einzigartig sein

Wenn es das Blog Design nirgendwo sonst gibt, nur eben auf eurem Blog, dann ist das Design eures Blogs sozusagen das Aushängeschild dessen. Man kann euer Blog sofort am Design erkennen und somit prägt sich euer Blog auch mehr bei den Besuchern ein, als wenn ihr ein stinknormales Standard-Design verwenden würdet. Vor allem bei besonders Themen Fixierten Blogs, sollte man einen großen Wert auf das Design legen, denn es sollte in diesem Fall zum Thema passen und besser noch dieses unterstützen. Wenn man zum Beispiel ein Fußball Blog hat, kann man im Design Fußbälle unterbringen, um das Thema auf den ersten Blick deutlich zu machen und zu unterstreichen.

Wo soll ich anfangen

Ich habe es am Anfang so gemacht, dass ich mir zuerst im Web ein Theme gesucht habe, dass von der groben Struktur meinen Vorstellungen entspricht und dieses dann nach meinen Vorstellungen bearbeitet. Wenn man das so macht ist das viel einfacher, als ein Theme von Grund auf neu zu bauen, das erspart euch mitunter Stunden von Arbeit, ist aber im Endeffekt genauso gut, denn mit beiden Methoden bekommt man ein einzigartiges (unique) Design.

Die Farbwahl

Im Grunde ist es egal für welchen dominierenden Farbton man sich entscheidet. Wichtig ist nur das die einzelnen Farbtöne miteinander harmonieren und die Besucher eures Blogs nicht einschränken, da sie durch bestimmte Farben abgelenkt werden, oder es ihnen schwer gemacht wird bestimmte Dinge zu erkennen und zu lesen. Zudem sollte man versuchen in einer Farbe zu blieben und die einzelnen Farbtöne nur leicht abzuwandeln. Hat man zum Beispiel Blau als Hauptfarbe, sollte man versuchen das restliche Blog auch in Blau zu gestalten, es sollte nur wenige Ausnahmen geben, zum Beispiel um etwas besonders hervorzuheben, dann kann man auch mal eine auffälligere Farbe verwenden.

Wie bearbeitet man WordPress Themes

Man benötigt dafür leider ein paar Programmierkentnisse, man sollte HTML und CSS schon eingermaßen beherrschen, um das Design auch wirklich seinen Vrostelllungen anpassen zu können.

Nachdem ich in den letzten Tagen einige Änderungen am Design meines Blogs vergenommen habe, habe ich mir einige Gedanken darüber gemacht, welche Elemente in der Sidebar sein sollten, welche nicht und welche komplett sinnlos sind. Aus diesen Überlegungen ist dann dieser Artikel entstanden.

Wozu sollte die Sidebar dienen?

Die Sidebar ist ein Element im Blog, das dem User das Surfen auf dem Blog vereinfachen soll, mit anderen Worten, soll mit der Sidebar die Benutzerfreundlichkeit des Blogs erhöht werden.

Allerdings sollte sich jeder Blogger auch eigenständig überlegen wie er seine Sidebar aufbaut, denn eine Musterlösung gibt es nicht, Stichwort Individualität.

Auch hier gilt wie so oft beim Bloggen, wer erfolg haben will muss anders sein als die anderen, aber es gibt einige grundsätzlichen Dinge, die jeder Blogger beachten sollte. Es hat zum Beispiel keinen Sinn einfach nur eine Tag-Wolke in der Sidebar zu platzieren, man wäre dann zwar “anders”, würde aber den gegenteiligen Effekt erzielen und zwar würde man die Blog-Besucher eher abschrecken anstatt durch innovatives einzigartiges Design vom Blog zu faszinieren.

Was sinnvoll in der Sidebar ist

Nicht jedes Element, von denen die ich unten Aufzähle muss in der Sidebar untergebracht werden, es gibt auch andere Bereiche im Blog, wie den Header oder den Footer in denen Usability Elemente, also Elemente die die Benutzerfreundlichkeit erhöhen, untergebracht werden können.

Ich habe zum Beispiel meine Artikel-Kategorien von der Sidebar in den Footer verschoben, da die Liste mit Kategorien in der Sidebar einfach zu viel Platz verschlungen hat. Dann habe die Themen noch mit einem Ankerlink mit meiner Navigationsleiste verbunden, sodass man schnell auf die Kategoeiren zugreifen kann.

Wie gesagt man sollte als Blogger stets versuchen die Sidebar und generell alle Elemente des Blogs speziell an die eigenen und die Bedürfnisse der Leser anzupassen, deswegen ist die folgende Liste auch, wie gesagt, keine Musterlösung, sie beeinhaltet nur was meiner Meinung Sinn in der Sidebar macht.

• Belieteste Artikel – Zeigen sofort was das Blog zu bieten hat und so werden die groben Konturen des Inhalts sichtbar.
• Neuste Artikel – Besonders für Stammleser interessant, die das Blog oft besuchen, da sie so sofort sehen was es neues gibt.
• Letzte Kommentare – Kommentare sind die Verbindung vom Autor zu seinen Lesern, über die Kommentarfunktion wird diskutiert und der Autor kann sich neue Anregungen holen, wie er sich und sein Blog in Zukunft verbessern kann.
• Infos über den Autor / RSS, Twitter und co. – Wenn der Autor eines Blogs aus der Anonymität tritt, entsteht ein engeres Verhältniss zu den Lesern. Und die User können mithilfe von RSS oder Twitter immer auf dem Laufenden sein.
• Suchfunktion – Ganz wichtig ist die Suchfunktion, sie hilft euren Usern Artikel wiederzufinden, oder einfach im Blog nach bestimmten Dingen zu suchen (is klar )
• Themen / Kategorien – Die Kategorien des Blogs sind auch ein angebrachtes Element für die Sidebar, allerdings werden die Kategorien zu umfangreich, sollte man überlegen sie zum Beispiel in den Footer des Blogs auszulagern, um die Sidebar nicht zu “verstopfen” , um auch weiterhin die Übersicht und die damit verbundene benutzerfreundlichkeit des Blogs gewährleisten zu können.

Welche Blog-Elemente sind eher sinnlos

Nun möchte ich noch auf die Blog Elemente eingehen, die eher weniger, bis gar nicht sinnvoll sind und eigentlich nur wertvolle Platz im Blog verschwenden und auf Kosten der Übersicht innerhalb des Blogs gehen.

Außerdem lenken sie die Besucher ab und verlängern nur unnötig die Ladezeit bzw. die Seitenaufbaugeschwindigkeit des Blogs.
Aber auch hier gilt diese Elemente sind nicht immer sinnvoll ich schreibe nur über meine eigenen Erfahrungen zu dem Thema und da haben sich eben die folgenden Elemente als weniger nützlich herausgestellt als die oben aufgelisteten.

• Tag-Wolke – Ein meiner Meinung nach sinnloses Element, denn was interessiert es einen Blog Benutzer wie oft bestimmte Tags im Blog benutzt wurden ? Ein Kategorie Element im Blog hat die gleiche Funktion und ist dabei noch übersichtlicher.
  Außerdem hat ein Artikel manchmal auch sehr viele Tags, wodurch sich differenzierte Suchen nach Artikeln mithilfe der Tag-Wolke schlichtweg nicht realisieren lassen.
• Der Kalender – Wozu muss man wissen wann genau was geschrieben wurde, Wenn man nach Informationen sucht ist es mir zumindest erstmal egal wie alt sie sind, hauptsache ich bekomme sie, wenn ein entsprechender Artikel zu alt sein sollte brauche keinen Kalender um das zu erkennen, sondern ich sehe es direkt in der Artikelinfo, deshalb ist der Kalender meiner Meinung nach gut gemeint, aber relativ nutzlos, so leid es mir auch tut

Ja das wars eigentlich schon mit den eher sinnloseren Usability Elementen, postet mir in den Kommentaren eure Meinung, welche Elemente findet ihr sinnvoll welche nicht? Sagt mir eure Meinung.

Das Design eures Blogs ist sehr wichtig, denn oft ist der erste Eindruck, den euer Blog beim Besucher erzeugt auschlagebend dafür, ob er weiterhin auf diesem Blog bleibt, oder diesen lieber verlässt. Außerdem erhöht ein außergewöhnliches einprägsames Design den Wiedererkennungswert eures Internetauftritts, so ensteht eine höhere Chance, dass sich eure Besucher auch noch einen Tag nach dem Besuch auf eurem Blog an diesen errinnern können und ihn bei Bedarf vielleicht erneut zu besuchen.

1. Ein aussagekräftiges Logo entwerfen

Das Logo eures Blogs, wird zuerst wahrgenommen, wenn ein Besucher auf euren Blog kommt, dementsprechend sollte es auch ansprechend sein und Lust auf mehr machen, außerdem sollte das Logo dem Blog eine Persönlichkeit verleihen, die sich im kompletten Blog-Design wiederfinden lassen sollte.

Ein gutes Logo sollte folgendes haben:

• Kräftige Farben
• eine ausreichende Größe, um gut wahrgenommen zu werden
• Einige zum Thema passende Bilder
• Gut lesbare Schrift
• vielleicht noch einen aussagekräftigen Slogan, der euren Blog gut beschreibt
• Keine Werbung, da das Logo wie gesagt das Aushängeschild eines Blogs ist und Werbung dieses nur verschandeln würde

Wem die grafischen Fähigkeiten fehlen kann auch einfach ein Text zu Bild Tool verwenden, dass es ermöglicht einen beliebigen Text in ein Bild umzuwandeln, dass man dann als Logo verwenden kann. Das sich damit zwar keine Meisterwerke erstellen lassen ist klar, aber besser als einfach nur simplen Text als “Logo” zu benutzen

2. Kommentare gestalten

Ein Blog lebt von der Beziehungen zu den Lesern und die Kommentarfunktion des Blogs ist dafür die Hauptschnittstelle. Aus den Kommentaren kann der Autor wichtige Dinge ziehen, um sein Blog immer weiter zu verbessern. Weil Kommentare so wichtig sind, sollte man sie auch dementsprechend optisch an das restliche Blog anpassen und außerdem, die Kommentare des Autors hervorheben, um eine bessere Übersicht für die Leser herzustellen.

Wie hebe ich die Autor-Kommentare hervor?

Ganz einfach, WordPress hat seit der Version zwei Vordefinierte CSS-Klassen eine für die Autorenkommentare und eine für die Userkommentare und so sehen die aus:

bypostauthor {
// Styles für Autor-Kommentare
}
byuser {
// Styles für Leser-Kommentare
}

Da das bei mir aber aus irgendeinem Grund nicht funktioniert hat und ich auch keine Lust auf ein Plugin hatte, hab ich mich an diese Anleitung gehalten und siehe da es hat funktioniert.

Am besten sollte man Autoren Kommentare mit einer anderen Hintergrundfarbe und vielleicht auch mit einer anderen Textfarbe ausstatten, als die User-Kommentare. Sodass die Leser des Blogs, direkt erkennen können das es sich bei diesem Kommentar um eins vom Autor handelt.

3. Ein einheitliches Farbschema benutzen

Bei den Farben gilt weniger ist mehr, man sollte auch nicht verschiedene Farben mischen. Wenn man zum Beispiel,wie ich es bei mir der Fall ist, ein blaues Blog-Design benutzt, sollte man hauptäschlich Blau-Töne verwenden, wenn es doch mal eine Ausnahme gibt, sollte man darauf achten das die Farben Harmonieren.

Vom Schema abweichende Farben können aber auch ein Mittel sein, um bestimmte Dinge hervorzuheben, zum Beispiel Werbeanzeigen: Stichwort Banner Blindness, allerdings sollte soetwas nur dezent eingesetzt werden.

Hier könnt ihr nachgucken, um zu sehen welche Farben zu einander passen und wie diese Farbkombinationen auf einander wirken.

Man kann Online Geld verdienen, indem man selbst hergestellte Grafiken online anbietet entweder auf einer Plattform extra für diesen Zweck, oder auf der eigenen Seite.
Außerdem kann man Fotos machen und diese dann auf Fotobörsen handeln.

Andere User werden dann eure angefertigten Grafiken sehen und bei Bedarf eine Lizenz kaufen, die sie zum Herunterladen und verwenden der Grafik berechtigt.
Ich selbst hab zwar noch keine Erfahrung mit dieser Art des Geld Verdienens, da ich einfach zu wenig grafisches Talent habe, als das ich meine Grafiken gegen Geld anbieten könnte.
Man kann aber nicht nur selbsterstellte Grafiken anbieten, nein es gibt auch viele Online Portale bei denen man gelungene Fotos hochladen kann und dann eine Vergütung pro download bekommt, die man sich wiederum ab einem bestimmten Betrag auszahlen lassen kann.

Geld Verdienen Mit Fotos auf Online Portalen

Meiner Meinung nach ist es leichter mit Fotos Geld zu verdienen als mit Grafiken, da man für ein Foto lediglich eine Kamera braucht und nicht viel wissen in Photoshop und anderen Grafikprogrammen. Allerdings ist das professionelle Fotografieren eine Kunst für sich und man kann nicht erwarten, dass man irgendein beliebiges Foto macht und davon reich wird. Nein, eure Fotos sollten schon besonders sein, dazu noch hochwertig und zumindestens ansatzweise professionell wirken.
Eine gute und große Seite mit viel Auswahl und vielen Benutzern, das heißt es gibt mehr potenzielle Käufer eurer Werke, sollte die Wahl sein.
Solche Seiten sind zum Beispiel:

Fotolia.de oder 123 Royality

Wenn ihr überzeugt seid von euren Fotos, dann ladet sie dort hoch, wenn sie wirklich besonders sind werden sie downgeloadet, wenn nicht dann… das erklärt sich eigentlich von selbst.

Welche Fotos haben eine Chance

Erfolgreiche Fotos sollten mehrere Eigenschaften haben um erfolgreich zu sein,also oft downgeloadet zu werden, sodass ihr am meisten Geld mit ihnen macht.

Die Fotos sollten…

• …einzigartig sein, das heißt es soll am besten kein gleiches Foto und wenige ähnliche geben
• …eine breite Masse an Menschen ansprechen, so wird die Chance erhöht, dass eure Bilder downgeloadet werden
• …eine gute Qualität haben, Pixelige Fotos haben eher keine Chance und es lässt sich auch kein Geld mit solchen Bildern verdienen, da sie einfach niemand haben möchte
• …ganz nett aber wie ich finde nicht notwendig: einen tieferen Sinn haben
• …farblich nicht zu aufdringlich sein
• …zu einem Thema passen, denn die User laden eure Bilder mit einem bestimmten Verwendungszweck im Kopf zB. um sie auf eine Website zu laden und da ist ein klares Thema zu dem man das Bild ordnen kann von Vorteil

Wo kann ich meine Grafiken anbieten

Es gibt auch Online Portale um Grafiken für Websites anzubieten, die ihr selbst erstellt habt
zum Beispiel Istockphoto, das funktioniert genauso wie mit den Fotos, also anmelden und hochladen und bei Downloads Provision kassieren

Vorteile von gekauften Bildern

Zum Schluss möchte ich nochmal auf die Vorteile von gekauften Bildern eingehen. Gekaufte Bilder sind günstig, haben gute Qualiät und ersparen einiges an Arbeit, wenn man bedenkt dass man sonst ein Fotostudio oder ähnliches beauftragen müsste, oder eben selbst versuchen müsste ein Bild zu schießen und anschließend zu bearbeiten, dass es seinen Vorlieben gefällt. Aber gerade wenn man eine Website oder eine Blog betreibt und viele Grafiken und Bilder benötigt wäre es eine zu große Aufgabe jedes Bild in mühseliger Handarbeit anzufertigen, deshalb greifen viele Webmaster auf fertige Bilder aus dem Web zurück. Dieser Artikel den ich gestern veröffentlicht habe hat noch einige Informationen zum Thema.

Dieser Artikel ist eine Auflistung von Seiten, die Gratis Grafiken für Webmaster anbieten, mit dabei: Gif Animationen, Hintergrundbilder, Avatare, Smileys und andere nützliche Grafiken.
Der Visuelle Aspekt einer Website ist wichtig und somit ist es logisch das man auch immer wieder neue Grafiken benötigt, wo genau ihr was findet seht ihr unten in der Liste.

• Kostenlosegrafiken.de – Viele Hintergründe, Smileys, Banner, Animation und noch ein paar andere Bildersorten.
• Microsoft – Tausende kostenlose Bilder von Microsoft in vielen verschiedenen Kategorien sortiert
• Grafikseite.de – Gif´s und Hintergründe, aber wenig professionell.
• Bilderpilot.de – Hintergründe eigentlich für den Desktop
• Backgroundlabs.de – Viele Nach Farben sortierte Hintergründe
• www.gif-co.de – Viele Grafiken, egal ob Animationen oder Hintergründe
• Meisch.de – Wieder eine Seite mit vielen Animationen
• mattonimages – Gute Hintergrundbilder, allerdings muss man auf die Lizenz achten!
• MeineErsteHomePage Eine Auflistung von Seiten mit Grafiken

Für Webprojekte braucht man Grafiken, das ist klar. Nur woher soll man diese beziehen? Soll man sie selbst erstellen, oder doch lieber downloaden oder gar einen Grafiker beauftragen? Vor diesen Fragen standen sicherlich schon einige von euch. Soll man sich lieber die Arbeit machen und alles selbst malen, das dauert zwar lange und sieht oft auch nicht gerade professionell aus, allerdings wird durch die individuellen selbst hergestellten Grafiken die Individualität und somit der Wiedererkennungswert der Website oder des Blogs erhöht.

Oder man greift auf fertige Grafiken aus dem Web zurück, man hat dann den Vorteil, dass man durchaus gut aussehende Grafiken finden kann, die, wenn man nicht gerade begabt ist mit Photoshop und co, auch deutlich besser aussehen werden als die Eigenkreationen. Allerdings muss man damit rechnen das Grafiken die frei im Web zur Verfügung stehen schon auf anderen Websites genutzt werden und somit entfällt der Individualitätsfaktor, den man mit eigenen Grafiken hätte.

Die beiden eben genannten Möglichkeiten waren beide kostenlos und hatten jeweils ihre Vor- und Nachteile. Wenn ihr einen Grafiker beauftragen wollt, wird das sehr warscheinlich etwas kosten, außer ihr kennt einen Grafiker sehr gut und er macht vielleicht eine Ausnahme.
Der Preis ist allerdings auch der einizige Haken an der Sache, denn sonst bietet ein Grafiker nur Vorteile. Er kann dir Grafiken nach deinen Wünschen erstellen, dazu kannst du ihm deine Vorstellungen vermitteln und er wird versuchen ihnen Ausdruck zu verleihen. Man bekommt individuelle Grafiken in professionellem Look, was will man mehr ?
Die Liste unten bietet nochmal alle Vor- und Nachteile der 3 Möglichkeiten auf einen Blick.

Selbserstellte Grafiken

Pro

• Individualität
• Freie Gestaltungsmöglichkeiten – kann an leicht an das Design der Website angepasst werden
• Kostenlos

Kontra

• Ohne Grafikerfähigkeiten warscheinlich unprofessionelles Design
• Zeitaufwändig

Grafiken aus dem Web

Pro

• Schnelle Verfügbarkeit
• Große Auswahl
• Kostenlos
• Kein Zeitaufwand
• Es sind auch professionelle Grafiken zu finden

Kontra

• Keine Individualität
• Man kann die Grafiken nicht optimal an seine Website anpassen

Grafiken vom Grafiker

Pro

• Individuell
• Zur Seite passend
• Kein Zeitaufwand

Kontra

• Die Kosten

Eine übersichtliche Website ist wichtig, sodass sich eure Besucher gut auf eurer Seite zurecht finden und diese nicht sofort wieder verlassen. In diesem Artikel zeige ich euch ein paar Tipps, wie man die Übersichtlichkeit erhöhen kann.

Jeder von euch kennt die Google Startseite. Sie ist übersichtlich aufgebaut und bietet alles wichtige auf einen Blick. Eure Seite sollte möglichst Intuitiv zu bedienen sein und der Leser sollte immer die Übersicht behalten können, auf was ihr dabei achten müsst, zeigt euch die Liste unten.

• Alles Wichtige auf einen Blick – Das wichtige an eurer Seite, wie zum Beispiel Überschriften, oder die Navigation sollten sofort ins Auge springen.
• Struktur ist wichtig – Ohne Struktur ist es schwer für eure Leser sich auf euren Seiten zurecht zu finden und sie werden diese schnell wieder verlassen, wenn sie nicht zügig die gesuchten Informationen erhalten. Um eure Seiten zu strukturieren setzt gut sichtbare Überschriften , Farben, Schriftgrößen andere Strukturmittel geschickt ein
• Schriftgröße und Schriftart – Die Schrift darf weder zu groß noch zu klein sein, außerdem sollte man eine Schrift ohne Serifen verwenden, wie zum Beispiel Verdana oder Arial.
• Aussagekräftige Bilder – Die Bilder sollten gut ausgewählt sein und zum Verständnis des Artikels beitragen.
• Einheitliche Farben – Man sollte nicht wahllos Farben benutzen sondern seine Seite in einem bestimmten Farbschema halten, zum Beispiel verschiedene Blau- und Grautöne, oder bestimmte Gelb- und Schwarztöne.

Beispiele für übersichtliche Seiten

Ein Beispiel für eine übersichtliche Website ist das Blog Basicthinking.de….



…ein weiteres ist online-cash.org



oder die Seite 2Creatawebsite, die sich mit dem erstellen von Websites beschäftigt….

Die gängiste Programmiersprache für das Design von Webseiten und Blogs ist CSS. CSS alleine bringt nicht viel, die Programmiersprache wird deshalb meist zusammen mit Html oder Html und PhP verwendet.
Eigentlich ist CSS schnell erlernt und bietet dem Webdesigner trotzdem nahezu unendlich Möglichkeiten seine Seiten zu gestalten

In diesem Artikel will ich euch 2 CSS-Tricks zeigen, mit denen ihr eure Seiten ordentlich aufpeppen könnt.

Seite mittig ausrichten

Den Anfang macht ein recht simpler Trick, die Rede ist vom Ausrichten der gesamten Seite in der Mitte des Bildschirms, wobei sich die Seite beim Verändern der Browserfenstergröße automatisch den neuen Verhältnissen anpasst.
Der Code dafür lautet:

body{ margin: 0px auto 0px; }

Text in anderer Farbe unterstreichen als die Textfarbe

Um einen Text abschnitt unterstreichen zu lassen genügt normalerweise das <u>...</u>-Tag, dann hat die unterstreichende Linie allerdings die gleiche Farbe wie der Text selbst und das wollen wir ja nicht

Also zuerst muss man den text den man unterstreichen möchte in ein <span>Text der unterstrichen werden soll</span>-Tag legen, und anschließend das Span-Tag mit CSS bearbeiten und zwar wie folgt:

<span style="border-bottom: 1px red solid;">Text der unterstrichen werden soll</span>