Stillstand heißt Rückschritt! Es ist Zeit Neues zu probieren, jetzt!

Wir haben 2014 und irgendwie hab ich das Gefühl, dass sich dieses Jahr, vielleicht auch schon letztes Jahr (ach, ganz sicher schon letztes Jahr) einiges ändert was meinen Job betrifft bzw. die Arbeitsweise in diesem. Man sollte seine eigenen Stärken kennen aber natürlich genauso gut die eigenen Schwächen im Hinterkopf haben. Daraus kann man dann für sich Schlüsse ziehen, die einen im besten Falle weiterbringen. Worauf ich hinaus möchte ist einfach…

Das ist an dieser Stelle ganz praktisch, da ich ja in diesem Moment hier sitze, den Text schreibe und eine gewisse Selbsteinschätzung besitze, die vielleicht auch etwas zutrifft.

Nein, ich möchte jetzt nicht auflisten was ich denke zu können und was ich denke nicht zu können. Das würde mir gerade nicht helfen und auch dir nicht, falls du hier noch weiterlesen möchtest.

Reden wir über den generellen Workflow, den wohl jeder von uns hat. Egal ob als Freelancer, als Angestellter in einer kleinen- oder großen Agentur. Man hat eine gewisse Art wie man arbeitet und vor allem mit was man arbeitet. Das ist auch ein Stück weit Gewohnheit, da wir das so Tag für Tag, Woche für Woche, Monat für Monat … machen und das auch nicht oft in Frage stellen werden. Never change… Na ihr wisst schon.

Wie ich viele Jahre (als Designer / Frontend Developer) gearbeitet habe, war in etwa so:

• Man bekommt ein Konzept in welcher Form auch immer. (am sympathischsten finde ich immer noch handgemalt (quick & dirty)). Das ist natürlich auch schon fertig angenommen vom Kunden.
• Man wird irgendwann sein Photoshop öffnen und loslegen Seite für Seite zu gestalten. (Ja, eine meiner Schwächen ist oft zu schnell loszulegen :))
• Diese Designs der einzelnen Seiten werden dann immer mal zum Kunden wandern und mit Feedback zurückkommen.
• Und schon sind wir in den Feedback-Schleifen mit dem Kunden. Das geht dann solange bis entweder das Budget weg ist oder man auf einen Nenner kommt :D
• Freigabe der Designs. Wir reden hier wohl zu 90% über PNG Files, also reine Bilder.
• Der Frontend Dev darf jetzt auch loslegen die HTML’s der einzelnen Seiten zu bauen. inkl. Schritt 4 & 5 natürlich wieder.
• Wir sind fertig. Backend… nicht interessant an dieser stelle.

So, jetzt schaut man sich mal um wo wir uns gerade befinden. Wir bauen Websites die man nicht mehr wie früher für ne 1024er Auflösung baut und fertig. Was wir heute machen ist eine Website für so unendlich viele Geräte zu erstellen das der oben genannte Ablauf in meinen Augen nur noch wenig Sinn macht. Warum? Ich versuche mich mal zu erklären…

Statische Sachen sind super wenn das Endprodukt auch so sein wird. Wenn eine Website hinten raus kommen soll, die auf 1024px optimiert sein soll und auch nur für da dann ist das natürlich was anderes. Aber im hier und jetzt wird das immer weniger der Fall sein. Das heißt, dass wir auch unserer Arbeitsweise überdenken müssen. Auch müssen wir uns die Frage stellen ob die Tools die wir nutzen die richtigen sind für das was wir tun.

Wireframes müssen für mich so aussehen:

Wenn das jetzt noch im Browser wäre und sich responsive Verhalten würde, perfekt! Noch mehr schöne Beispiele kann man hier sehen: Wireframes auf dribbble

Und jetzt kommt der wichtige Punkte. Genau hier müssen wir anfangen das Multi Device denken anzuwenden. Aber für mich heißt das nicht, dass wir jetzt noch einen Wireframe erstellen für iPad Größe und noch einen für iPhone Größe. Dann haben wir auch wieder nur statischen output und der ist das Problem. Wir wissen nicht mit welchem Device der User unsere Website anschauen wird. Wir wissen nur mit welchen Geräten er sie bisher angeschaut hat. Aber bringt uns das so viel Erkenntnis? Es kommen ständig neue Geräte hinzu und deren Größe / Auflösung (was auch immer) kann wieder ganz anders sein als das was wir bisher kennen.

Vor ein paar Jahren war mobiles surfen wohl ziemlich auf das iPhone beschränkt und man kannte die Auflösungen und konnte dann mit dem Adaptive Prinzip ganz gut arbeiten. Heute ist es wohl eher ein Mix aus Fluid und Adaptive. Adaptive sind für mich die Schritte wo es nötig wird härter einzugreifen und Fluid ist für mich nichts anderes als stufenloses skalieren von dem was da ist.

4 Bilder nebeneinander heißt im Fluid Beispiel das diese einfach 25% breit sind und dann immer kleiner werden. Adaptive wäre dann einfach, dass man die Bilder irgendwann in 2x2 aufteilt und dann vielleicht noch in 1x4. Adaptive sind in meinen Augen die deutlich schwierigeren Schritte weil sich da dann oft auch am Aufbau der Seite was ändert.

Responsive Websites heißt doch heute, dass man in der Entwicklung, also beim HTML, dieses Verhalten dann einbaut. Das ist ZU SPÄT! Wenn man ein Projekt hat, was überall immer sauber funktionieren soll, dann muss man damit schon im Konzept anfangen. Und nein, ich rede wieder nicht von Wireframes für verschieden Viewports und auch keine Designs in verschiedenen Viewports. PROTOTYPEN,DYNAMISCHE PROTOTYPEN!

Nur hier ist das Problem. Das ganze Thema ist zwar nicht so neu das jetzt alle davon überrascht worden sind aber es ist auch nicht mehr so alt das man so tun kann als gehe einen das nichts an. Man muss sich selber Fragen ob die Tools mit denen man die ganze Zeit gearbeitet hat in der Lage sind die heutigen Anforderungen abzubilden.

Das Problem an der Sache ist wohl das es gerade so viele Programme gibt die aus dem Boden schießen und jedes behauptet von sich DIE LÖSUNG zu sein. Letztendlich hilft wohl nur, dass man ein Stück weit einfach probieren muss um das für sich passende zu finden. Vielleicht ist es auch nicht mehr die eine Anwendung die man braucht sondern je nach Projekt eine passende?! Wie man nicht sagen kann das Typo3 das perfekte CMS für alles ist.

Gehen wir davon aus, dass wir jetzt ein dynamisches Konzept haben was den ganzen Responsive Part schon berücksichtigt geht es jetzt daran den Prototypen anzumalen. Design, klingt viel wichtiger! :)

So, jetzt aber mal einen Zwischenabsatz um die Kurve zurück auf die Headline und den ersten Absatz zu bekommen. (Manchmal gar nicht so einfach…). Ich sagte ja, dass man seine Stärken und Schwächen kenne muss und das man neues probieren sollte…

Photoshop, die Anwendung unserer Wahl für Design. OK, ob das unserer Wahl war, lassen wir mal im Raum stehen. Festhalten kann man, dass ein .psd-File wohl Industriestandard ist. Nur ist die Frage, ob Photoshop denn überhaupt wirklich das ist was wir brauchen. Wer mir auf dem ein oder anderen Sozialen Kanal folgt, wird festgestellt haben, dass ich im Moment viel über Sketch rede. Was ich schon mal getan habe, ist mir Sketch zu kaufen um einen ersten Schritt zu machen es dann auch zu nutzen. Bisher hatte ich noch keinen Fall wo ich es tatsächlich hätte einsetzen können aber ich versuche das in nächster Zeit produktiv zu nutzen. Photoshop hat mit dem CC-Update schon einen großen Schritt gemacht und hat viel eingebaut was uns das Leben einfacher macht. Aber Photoshop ist keine Anwendung die dafür gemacht wurde, wofür wir sie tagtäglich einsetzen. Der Name sagt es ja auch schon ein wenig :)

Ob Sketch eher so eine Anwendung ist wird sich zeigen. Letztendlich muss das aber auch jeder für sich selber rausfinden und vielleicht kann man es auch gar nicht alleine entscheiden. Ich werde es auf jeden Fall mal genauer testen. Es klingt in der Tat vielversprechend und sinnvoll was man so hört und liest. Auf Medium findet ihr ein paar gute Artikel dazu. Ein paar davon hab ich auch Empfohlen die ihr hier findet: Medium — Recommended By David Hellmann. Einfach mal rein schauen und lesen.

Was ich interessant finde ist das es komplett Vektor basiert ist. Und da sind wir auch schon bei meinen Schwächen. Ich habe nicht viel damit am Hut. Illustrator überfordert mich da es ähnlich wie Photoshop halt ein recht umfangreiches Program ist. Wenn ich es nutze dann brauch ich wohl noch nicht mal die Basics. Da denke ich das ich mit Sketch schneller ans Ziel komme.

Letztendlich geht es ja bei Arbeit auch ein Stück weit darum so zu arbeiten das man Produktiv ist. Und wenn mir Sketch erlaubt deutlich produktiver zu sein ist es die Anwendung meiner Wahl. In größeren Teams wird es wohl schwer da nicht jeder sofort alles ändern wird was er lieb gewonnen hat. Aber für kleine Projekte kann man damit sicher experimentieren. Und das geht nur an echten Projekten denn da bekommt man zu sehen was es kann, wo es einen einschränkt und wo es einen schneller macht.

…zum Design. Ob das nun mit Sketch, Photoshop oder Illustrator passiert ist im Grunde egal. Irgendein initiales Design muss es geben und das wird wohl auch weiterhin statisch sein. Aber man sollte hier nicht Seite für Seite gestalten sondern ein paar wichtige Punkte angehen. Die Startseite ist sicher eine gute Idee und dann sollte man eher in Modulen denken. Man sollte mit dem Kunden eine Richtung finden und wenn diese gefunden ist sollte er auch gar keine statischen Screens mehr zu sehen bekommen sondern eigentlich nur noch HTML-Templates. Jeder Designer weiß wie nervig es ist wieder und wieder Texte in einer Photoshop Datei auszutauschen.

Ein weiterer großer Vorteil ist einfach, dass man in fertigen Templates auch viel mehr vermitteln kann was Zustände angeht. Animationen, Hover Effekte etc. etc. Das wird man mit einem statischen Screen nie rüberbringen können. Auch nicht wenn man 100 Zustände davon anfertigt. Das HTML Template ist das was zum Schluss wichtig sein muss. Das muss funktionieren, gut aussehen, sauber umgesetzt sein und sich gut anfühlen.

Nicht viel…

Nur das man seine Arbeitsweise immer mal hinterfragen sollte. Ist die Anwendung mit der ich arbeite wirklich gut für das was ich damit mache oder gibt es da draußen Sachen die es deutlich besser erledigen würden. Was nicht heißt das man alles ausprobieren sollte aber es gibt Anwendungen die machen länger von sich reden und das dann oft auch nicht zu unrecht.

Die Projektabläufe genauso hin und wieder hinterfragt werden sollten. Man kann ein 10.000 Euro Projekt nicht so abarbeiten wie ein 10.000.000 Millionen Projekt. Man sollte hier einfach flexibel sein.

Und ich wollte mal wieder bloggen, hehe! Ihr könnt das natürlich alles ganz anders sehen wie ich das oben geschriebene :)