Neue Webseite: Rückblick auf die Entwicklung

Die neue Webseite ist online! Ich stelle nie veröffentlichte Bilder von Versionen vor, wie diese entstanden sind und warum sie nie veröffentlicht wurden. Ein kleiner Ausschnitt auf die Entwicklung von bit01.

Nach nun sehr langer Zeit ist es geschafft: Die neue Webseite ist Online. Welche Schwierigkeiten hatte ich in der Entwicklung der letzten 5 Jahre? Dieser Artikel soll einen kurzen Eindruck vermitteln wie sich ein Design entwickelt und welche Probleme bzw. Unzufriedenheiten auftreten können.

Klein, aber fein (2009)

webdesign1

Die erste Version der Webseite habe ich 2009 fertig gestellt. Hier arbeitete ich getreu dem Motto klein, aber fein. Das Design war eher farblos und schlicht ohne Verläufe oder Bilder gestaltet. Damals war auch noch eher ein blau-lila die Akzentfarbe. Das Logo hatte aber damals schon die charakterisierende Pixelschrift.

Ein „Highlight“ des Layouts war der Banner im Kopfteil der Seite. Ich habe eine Art Monitor mit Tastatur und Maus gestaltet, um meinen Arbeitsplatz zu repräsentieren.

In dieser Version habe ich bereits ein recht komplexes Designkonzept verwendet: Sticky Footer. Hierbei ist es entscheidend, dass der Fußteil der Seite immer am Ende der Seite ist, egal wie hoch die Auflösung ist. Die Webseite war zentriert und hatte eine feste Breite, das hat mir damals schon gefallen.

Neues Logo muss her (2010)

Version 2

Eine neue Version ist 2010 entstanden, weil mir das alte Layout schlichtweg zu einfach und farblos war. Ich habe nun außerdem auf eine neue Akzentfarbe gesetzt — meine Lieblingsfarbe blau. Außerdem hat sich das Logo geändert. Von einem nach innen geprägten Textstil bin ich zu einer isometrischen 3D Perspektive gegangen. Die Null und die Eins habe ich hochgestellt.

In diesem Layout habe ich mehr mit Bildern (in Artikelvorschauen), Verläufen und Schattierungen gearbeitet. Das war zu der Anfangszeit von CSS3 auch beliebt. Außerdem wollte ich mehr auf den digitaltechnischen Aspekt eingehen und habe daher ein Bussystem einer Computerplatine in den Kopfteil gebracht. Das heutige Farbschema hatte damals schon ihre Geburtsstunde. Das dunkle Grau und das Blau habe ich auch für die jetzige Version weiterbehalten.

Am Ende hat mir das ganze Design nicht mehr gefallen, weil die ganzen Verläufe, die stark auffallende Platine und die langen Ladezeiten durch etliche Java-Scripte mich gestört haben. Ein einfacheres Design musste her.

Kurz mal Online (2012)

Version 3

Kommen wir nun zur vorletzten Version aus 2012. Ich habe mich ganze 2 Jahre mit dem neuen CSS3 und HTML5 beschäftigt und das komplette Design ohne Java-Script realisiert. Alle Slideshows, Effekte und Galerien habe ich mit CSS3 Animationen realisiert. Das hat ziemlich viel Zeit in Anspruch genommen, mehr als ich dachte.

Der Fokus lag hier auch mehr auf meine Arbeit, weniger auf meine Artikel. So habe ich meine Leistungen und Referenzen direkt auf die Startseite projiziert mit einem leicht blauen Verlauf im oberen Teil der Seite. Die Platine verblieb dabei im Kopfteil, war aber nur noch leicht prägend zu sehen. Auch in diesem Layout habe ich die Akzentfarbe blau und das (neue) Logo beibehalten.

Das ganze Design hat mir so schon ganz gut gefallen, doch ganz ohne Java-Script ging es doch nicht. Es war sehr mühsam kleinere Erweiterungen zu realisieren. Am Ende war mir die Schrift und die Symbole zu klein. Ich wollte auch mehr auf einen weniger starken Kontrast setzen.

Mit dieser Version war ich auch eine kurze Zeit online. Aufgrund der starken Unzufriedenheit bin ich dann doch wieder offline gegangen.

Easter Egg: Die kleine Zahl oben rechts hat die aktuelle Uhrzeit im Binärsystem dargestellt. Von oben nach unten: Stunden, Minuten und Sekunden.

»Hallo Welt« (2014)

shot-20140410-1412-nrtmey-0

Heute angekommen hat sich recht viel geändert. Eigentlich ist nur das Farbschema, das zentrale festbreiten Layout und das Logo geblieben, welches ich in eine Vektor-Grafik überführt und etwas angepasst habe. Auf Textur Hintergründe habe ich verzichtet und setze hier lieber auf gleichmäßige Farben ohne Verläufe. Die Startseite stellt mich und meine Arbeit kurz vor.

Die Webseite zeichnet sich aber durch viele neue tolle Features aus. So lässt sich die Seite auch auf Tablets und Handys voll genießen. Hierbei verwende ich die recht neue und aufwendige Technologie des Responsive Webdesign. Ich setze auf große, leserliche Schriften und Symbole und verwende dabei die Schriftart Open Sans und das Icon-Framework Font Awesome. Ein breiter dunkler Sticky Footer hebt sich von dem hellgrau/weiße Design ab und schafft ein wenig Abwechslung.

Weitere Erneuerungen sind bessere Soziale Netzwerk Anbindungen und flexible Inhalte. So ändert sich je Seite auch der Fußteil der Seite.

Wie in allen vorherigen Versionen verwende ich auch in dieser Version das beliebte Blog-CMS WordPress. An dieser Stelle ein großes Dankeschön für dieses hervorragende CMS.

Pläne für die Zukunft

Mein Großprojekt „Neue Webseite“ ist damit beendet, so kann ich an neuen Projekten arbeiten. So stehen schon neue Projekte in den Startlöchern. Ich arbeite an einem YouTube Kanal und einer neuen App Idee.

Schlusswort

Abschließend würde mich interessieren, ob Dir das aktuelle Design gefällt und warum? Oder hätte dir eine ältere Version besser gefallen? Über eine Kritik in Form eines Kommentars würde ich mich freuen.

Wenn dir das Design gefällt, kannst du das auch über eines der sozialen Netzwerke zeigen.

Schlagwörter: , , , ,

Ähnliche Artikel

Abonnieren Sie den RSS-Feed meines Blogs um über neue Artikel benachrichtigt zu werden.

2 Kommentare

  1. Elmo sagt:

    Du solltest die Rahmen um deine Textfelder mal ein wenig deutlicher machen, ich seh die so gar nicht xD -> Firefox, Bildschirm-Standardeinstellungen mit 50% Helligkeit.. und ich mein nicht nur die hier, sondern alle (auch die bei deiner Projektplanung und so ;)

    • Finn Dohrn sagt:

      Danke für den Tipp, Elmo.

      Habe nun die Input-Felder einwenig überarbeitet. Sie sind hoffentlich nun sichtbar! :-) (Cache löschen falls nichts passiert ist :D)


Schreib einen Kommentar