DH
David Hellmann
2012/11/17

Relaunch… und noch ein paar Zeilen dazu!

Da ist es mal wieder passiert — ein kleiner Relaunch meiner Seite hier. Die Homies die hier lesen werden sicher wissen, dass es nicht unnormal ist, dass die Seite von Zeit zu Zeit neu gemacht wird. Meistens passiert das, weil irgendwas an der alten Seite stört oder ich mich einfach satt gesehen habe. Manchmal hält es ein Design länger durch aber es kann auch schon mal schnell gehen. Das vorhergehende hat es glaub immerhin über sechs Monate geschafft, Respekt! Was mich darn störte? Es waren relativ viele und auch große Grafiken im Einsatz. Auch so war es ziemlich voll gepackt. Das neue Design sollte etwas einfacher werden und die Seite generell etwas aufgeräumter und übersichtlicher. Das sollte geklappt haben, jeden Falls aus meiner Sicht. Wer das anders sieht darf sich natürlich gern äußern ;)

Was sollte genau anders werden

Generell gesagt: weniger ist mehr!

Startseite

Der Portfolio part ist wieder etwas prominenter jetzt. Aber es wird jetzt auch nur noch das letzte Projekt angezeigt und nicht mehr fünf wie bei der letzten Seite. Hier sollte einfach die Spielerei rausfliegen (Tooltips etc.) und die Darstellung klarer werden.

Die letzte drei Artikel haben nun auch etwas mehr Luft bekommen und die Artikel aus der Kategorie "Empfehlungen" verlinken jetzt erstmal in die Detailansicht und nicht mehr direkt auf die externe Website. Könnte den ein oder anderen vielleicht etwas verwirrt haben.

Blog Bereich

Im Blog sollte der Inhalt mehr in den Vordergrund rücken und das Design etwas zurückgenommen werden. Heißt im konkret, dass die Blog-Übersicht deutlich vereinfacht wurde. Viel mehr im sichtbaren Bereich und generell eher eine Liste die man deutlich besser Überblicken kann als bisher. Das Suchfeld drüber ist geblieben da suchen ein immer beliebteres Navigationsmittel ist sollte man dieses auch prominent platzieren. Unter der Liste finden sich die Kategorien. Diese sind wie auch schon vorher eher zurückgenommen da ich denke das diese nicht sonderlich wichtig sind. Der Blog wird eher bei aktuellen Sachen gelesen was heißt, dass wenn ich etwas publiziere die Leute über die sozialen Kanäle hier landen. Später werden diese dann eher über Google oder Verlinkungen den weg hier her finden. Auch gehe ich hier natürlich von mir aus wie ich andere Blogs lese bzw. diese navigiere. Die Suche ist mir deutlich wichtiger und meist auch schneller Zielführend als mich durch Kategorien zu klicken. Soweit so gut.

Artikel mit Tags versehen mache ich schon lange nicht mehr. Irgendwie ist das ganze in meinen Augen eher nutzlos da auch hier wieder die Suche ähnlich effektiv sein sollte wie sich durch Tags zu kämpfen. Auch ist es wieder eine Meta-Info die gezeigt werden möchte. Aber es sollte ja reduziert werden. Gegenstimmen? Nein? Danke!

Der Rest ist im Blog recht gleich geblieben. Textblöcke mit wenig Satzlänge, relativ große Typo und natürlich große Bilder. Never change... na ihr wisst schon!

Der Rest der Website

Hier ist vieles gleich geblieben. Rausgeflogen sind die Dribbble-Shots die zwar nett waren aber dennoch weichen mussten. Sagte ich es schon? Weniger ist mehr! About, Contact & Portfolio sind wirklich nahezu gleich geblieben. Hier sah ich keinen Grund etwas zu ändern. Es geht mir bei meiner Seite nicht um Fancy Effekt oder jeden Trend schnellstmöglich hier unter zu bringen. Es soll eine Visitenkarte sein meine Ansicht einer guten Website widerspiegeln.

Responsive — Natürlich!

Ein bisschen Trend muss dann schon sein, haha. Auch diesmal ist die Seite wieder komplett Responsive. Von 1200px Breite geht es runter bis auf Smartphone-Hochformat-Größe und das sollte auch ganz gut klappen. Natürlich hab ich keine Scharr an Testgeräten hier. Interessiert mich auch nicht wirklich. Meine Seite, meine Hausordnung. Aber im Ernst, wer Bugs findet darf diese mir gern mitteilen und ich versuche diese dann auch zu beheben. IE Optimierung mache ich aber nicht!!! Ehrlich gesagt hab ich das auch schon lang nicht mehr. Der IE9 & IE10 sollten das hier schon alles ganz sauber darstellen. Das was da drunter passiert ist mir letztendlich egal. Die Zielgruppe der Seite hier wird aber meisten schon auf den moderneren Browsern dieser Welt unterwegs sein und von daher wird es hier wenig Probleme geben.

So, genug geschrieben dazu! Ach ja, das erste mal kam eine Icon-Font zum Einsatz. GEILER SCHEISS!!!

Meine PSD-Datei zum aktuellen Design

Dhpsd 1280X2819

Schnell in den Browser wechseln!

Gestern war ein ganz guter Artikel dazu im Design Tagebuch: Responsive Webdesign – Eine Herausforderung für Webdesigner zu lesen. Ich bin auch der Meinung das man viel schneller in den Dummy / Entwicklungsmodus wechseln muss um ein Design zu fühlen. Gerade beim Thema Responsive Webdesign ist das wichtiger den je. Natürlich sollte man hier auch nicht übertreiben denn umso eher man sein Layout Programm verlässt desto mehr besteht die Gefahr das man sich im Design einschränkt. Aber auch der Weg, dass man jede Unterseite einer Website komplett in Photoshop (Pixel Perfect) erarbeitet ist wohl etwas überholt. Problem ist wohl hier eher der Designer bzw. das Team das die Website erarbeitet als vielmehr der Kunde. Er ist es gewöhnt jede Seite — mit einigen Korrekturschleifen — als Bilddatei zu sehen, zu beurteilen und dort wieder Änderungswünsche umsetzen zu lassen. Das ist so gelernt und wird seit Jahren so gehandhabt und wird es wohl auch weiterhin werden. Einen Vorwurf kann man hier nicht machen. Glück hat man natürlich, wenn der Kunde selbst an solch einem Vorgehen interessiert ist. Hier bleibt abzuwarten wie sehr sich die Kunden hier erziehen lassen um solch ein Vorgehen öfters einsetzen zu können. Natürlich ist diese Art des Arbeitens auch keine die man immer und überall einsetzen kann. Aber doch deutlich mehr als man das aktuell macht.

Die Kurve zurück zu meiner PSD-Datei. Wie man sieht ist nicht all so viel passiert. Natürlich muss man auch sagen, dass die Seite von mir in vielen Bereich weitestgehend übernommen wurde und hier nicht viel angepasst wurde. Aber die PSD war für mich in diesem Fall und auch in vielen anderen einfach nur eine Datei die mir so grob die Richtung vorgeben sollte. Es gibt dann immer einen Punkt X wo ich sage: "Jetzt geht's ans HTML" und ab dann wird das meiste direkt im Browser gemacht. Hier wird dann nur noch Photoshop geöffnet um Grafiken zu produzieren die gebraucht werden. Das vorgehen erfordert natürlich eine gewisse Vorstellung was am Ende heraus kommen soll. Es gibt dann auch das ein oder andere Element oder Bereich wo das nicht mehr so klar ist dann geht man wieder in Photoshop und erarbeitet dort eine Lösung. Das muss auch wieder nicht bis zum bitteren Ende passieren. Das vorgehen bleibt das gleiche. Sobald klar ist was am Ende dabei raus kommen soll wird wieder in den HTML Modus gewechselt.

Die Vorteile liegen für mich klar auf der Hand:

  • zeitsparend!
  • das Design wird fühlbar. Ein statischer Screen ist nett anzuschauen aber das ganze im Browser zu sehen unter "realen" Bedingungen ist etwas ganz anderes
  • responsive Sachen kann man schlecht auf statischen Screens darstellen. Natürlich kann man verschiedene Versionen gestalten (z.B. Smartphone- & Tablet-Ansicht) aber letztendlich bleibt es statisch.
  • Fluide Layouts muss man an Hand von Dummys testen. Hier lassen sich sicher Regeln festlegen wie etwas auszusehen hat wenn Ausgabegerät X mit Auflösung Y im Einsatz ist. Doch 100% passen wird das letztendlich nicht. Hier muss am Dummy probiert und angepasst werden.
  • Designer & Entwickler arbeiten viel eher viel enger zusammen. Kein Wasserfall-Prinzip nach dem Motte: Hier sind die Designs, mach du mal das HTML. Durch das engere Zusammenarbeiten sind beide Parteien auch auf gleichem Stand und können Probleme schneller erkennen bzw. diese lösen.

So, weitermachen oder einen Kommentar hinterlassen. Auswahl... nervig oder? :)

comments powered by Disqus

Maybe interesting…

UP