Gestern habe ich bereits das Logo für Duochords erstellt und einen ersten Entwurf vorgestellt. Im Anschluss habe ich das Logo noch fertig gestellt und den WordPress-Blog eingerichtet. Das Installieren des Blogs lief problemlos und ich habe bereits alles für die Weiterleitung der .com-Domain vorbereitet. Diese wurde bereits freigeschaltet und nun kann es sich nur noch um wenige Stunden handeln, bis die Nameserver-Einträge aktualisiert werden und die Webseite über die Adresse „duochords.com“ erreichbar ist.
Heute stand das Design der Webseite auf dem Plan. Ich habe ja bereits gestern ein Farbschema zusammengestellt, an dem ich mich orientieren konnte um das Design an das bereits vorhandene Logo anzupassen. Das Design habe ich zunächst in HTML/CSS umgesetzt und anschließend in ein sogenanntes „WordPress Child Theme“ überführt. Was es damit auf sich hat, und wie das Ganze schließlich aussieht, erfahren Sie in diesem Artikel.
Fertigstellung des Logos
Das Logo hat sich seit dem Entwurf von gestern doch noch ein ganzes Stück verändert. Die beiden Gitarren habe ich etwas mehr ineinander verschmelzen lassen und durch eine elegante Trennlinie ergänzt, so dass ich ausreichend Raum für die langen Slogans hatte.
Von dem Entwurf zum fertigen Logo
Das Logo habe ich nach meinem klassischen Vorgehen für simple Logos erstellt: Zunächst wird der Logotext in die Mitte gesetzt und ich überlege mir ein passendes Motiv, welches zum Thema passt. Bei DuoChords war es selbstverständlich, dass es zwei Gitarren sein sollten. Anschließend wähle ich aus den Google-Fonts unter ca. 1200 Schriften eine Schriftart aus, welche zum Motiv und Thema der Seite passt. Welche Schriften zu welchen Themen passen lässt sich teilweise schwierig in Worte fassen, aber grob unterscheide ich beispielsweise zwischen seriös, verspielt, persönlich und modern. DuoChords fällt dabei sowohl in die Kategorie persönlich als auch in die Kategorie seriös, weswegen die Auswahl auf eine gut lesbare, aber handschriftlich anmutende Schriftart fiel.
Anschließend habe ich mir recht lange einen passenden Untertitel für das Logo überlegt. Es sollte dabei auf jeden Fall hervorgehoben werden, dass es sich um eine private Seite von meinem Freund und mir handelt und außerdem sollte natürlich auf einen Blick die Funktion der Seite erkennbar sein. Insgesamt empfinde ich den Untertitel nach wie vor als zu lang, jedoch wollte ich keine der Informationen weglassen und musste daher versuchen alles mit dem bisherigen Logo in Einklang zu bringen.
Das Design der Webseite
Das Design der Webseite entstand heute, wie bei den meisten meiner Designs in drei Schritten. Im ersten Schritt arbeite ich ausschließlich mit meinem Grafikprogramm und entwerfe das eigentliche Design. Dabei geht es um Anordnung des Logos, Menüs und Footers (unterer Bereich der Webseite), aber zunächst weniger um die konkrete Anordnung im Inhaltsbereich (Contentbereich) der Webseite. Der Gesamteindruck der Seite und das Zusammenspiel der Farben stehen hier im Vordergrund.
Im zweiten Schritt wird das Design in HTML/CSS umgesetzt. Dabei wird die bereits erstellte Grafik der gesamten Webseite in ihre Einzelteile zerlegt und durch entsprechenden Code wieder aufgebaut. Der HTML Code beschreibt den eigentlichen Inhalt der Seite und trennt Überschriften, Texte und Bilder voneinander. Das CSS (Cascading Style Sheets) ist anschließend dafür zuständig, die Inhalte optisch anzupassen. So wird beispielsweise die Überschrift etwas größer und in einer anderen Farbe dargestellt als der Inhaltstext. Dieser Schritt ist notwendig, um Inhalte in das Design einfügen zu können und diese auch auf verschiedenen Geräten (unterschiedlich große Monitore, Handys, …) darzustellen, ohne dass dabei das Design verrutscht.
An dieser Stelle ist das Design im Grunde fertig, doch lässt es sich in dieser Form noch nicht verwenden ohne weitere Anpassungen an das jeweils genutzte Webseiten System vorzunehmen. Im dritten und letzten Schritt habe ich darum die HTML/CSS Seite in ein WordPress-Template umgewandelt. Dadurch wird es schließlich möglich, die Inhalte der Webseite dynamisch in das Design einzufügen. Das Design habe ich aus Zeitgründen als sogenanntes „Child-Theme“ zu einem vorhandenen WordPress-Design angelegt. Was es damit auf sich hat werde ich ggf. zu späterer Zeit in einem anderen Beitrag erklären.
Bei der Umsetzung des Designs habe ich insbesondere darauf geachtet, dass die Webseite auch auf mobilen Endgeräten gut lesbar bleibt, da wir selbst die Seite häufiger vom Handy aufrufen wollen, um auch unterwegs Zugriff auf unsere Gitarrennoten zu haben.
In den nächsten Stunden werde ich sicher noch einige Anpassungen am Design vornehmen, bis alles so funktioniert, wie ich es mir vorstelle. Morgen steht dann die Installation der ersten Plugins auf dem Plan.
Kommentare und Diskussion