2018-08-09 7 Minuten

Programmierer und Grafiker: eine unendliche Geschichte

Es gibt Jobs, an deren Schnittstellen gibt es einfach scheinbar unüberwindbare Schluchten.

Programmierer mit Projektmanagern.

Grafiker mit Projektmanagern.

Texter mit Projektmanagern.

Projektmanager mit Projektmanagern.

Und jeder mit dem Controlling.

Das ist natürlich überspitzt formuliert – dennoch gibt es im Arbeitsalltag immer wieder Situationen, wo ein gegenseitiges Verständnis das Leben aller um so viel einfacher macht.

Eine Schnittstelle, an der ich sehr viel unterwegs bin ist die zwischen Programmierern und Grafikern. Hier habe ich ein paar Dinge zusammengetragen. Dinge, von denen ich glaube, dass sie (angehenden) Webdesignern helfen können.

Nur: mit den Controllern musst du selber fertig werden. Da kann ich dir nicht helfen.

Die fabelhafte Welt der Programmierer

Ich habe schon einmal über die Zusammenarbeit mit Programmierern geschrieben. Diese Punkte gelten nach wie vor – viele davon interessanterweise auch für die Designer da draußen.

Kreative (und da zähle ich Programmierer dazu) sollte man nicht unterbrechen, wenn sie grad im Flow sind. “Kannst du nicht schnell…” stört Designer wie Developer gleichermaßen.

Dennoch: es sind zwei unterschiedliche Welten.

Ordnung vs. Chaos

Vor allem Personen, die viel mit Print-Design zu tun hatten fällt es schwer, sich auf die (im Vergleich doch sehr starre) Ordnung des Webdesigns einzulassen.

Im Web-Development ist alles nach Zeilen und Spalten eingeteilt. Und daran hat sich alles zu halten.

Hier ein Ausschnitt aus meinem Blog. Dieser ist – wie die meisten Webseiten heutzutage auf 12 Spalten aufgeteilt. Jede dieser Kategorien nimmt 4 Spalten + ein wenig Abstand ein.

Natürlich gibt es hier Ausnahmen – alleine schon aus ästhetischen Gründen. Aber im Hintergrund sollte ein Grid-System gedacht sein. Webseiten, die das überhaupt nicht haben, sind zwar vielleicht Kunstwerke, die super aussehen. Aber das oft auf genau einer Bildschirmgröße. Sehr selten sehe ich Webseiten, die kein (sichtbares) Gridsystem verwenden, und dennoch auf allen Devices gut aussehen.

Aber warum überhaupt diese einengende Spaltenlogik?

Es gibt nicht ein (1) Webdesign

Früher wurden Applikationen für genau 800×600 programmiert. Da war es natürlich ein leichtes, die grafische Oberfläche zu designen und zu programmieren.

Heute haben wir tausende Devices – und jedes hat seine eigenen Pixel-Abmessungen. Und im Optimalfall soll die Webseite ja auf allen Geräten funktionieren. Sehen wir uns mein Kategorie-Grid auf einem Tablet an:

aus den 3 Kategoriespalten wurden 2.

Daran erkennt man sofort den Vorteil des Grids:

Für mich als Programmierer ist hier sofort klar, wie sich das Layout auf mobilen Geräten anpasst. In diesem Fall würde ich höchstwahrscheinlich nicht einmal ein mobiles Design aus der Grafik benötigen. Das gesamte Ding hält sich an gelernte und sinnvolle Mechaniken.

Es spricht überhaupt nichts dagegen, Elemente außerhalb des Grids zu positionieren – jedoch muss in der Programmierung genau klar sein, was damit in welcher Bildschirmgröße passiert:

  • wird es ausgeblendet?
  • wird es anders positioniert?

Besondere Vorsicht ist hier bei Elementen geboten, die Text beinhalten. Man mag es vielleicht nicht glauben, aber so ein Störer kann Stunden verschlingen, bis er tatsächlich richtig positioniert ist, und auf allen Bildschirmgrößen noch funktioniert.

Eng einher mit dem Grid geht folgendes Konzept:

Denken in Komponenten

Mein Workflow beim Programmieren einer Seite ist grob wie folgt:

  • Farben und andere seitenweite Einstellungen programmieren
  • Design einzelner Komponenten wie z.B. Buttons, Cards, Tabs usw.
  • “Runterprogrammieren” des Layouts

Das Erstellen des Layouts ist im besten Fall eigentlich nur mehr:

„Füge die Komponenten in das Grid ein.“

Sehr selten, aber immer noch, sehe ich Webseiten, wo eine bestimmte Komponente viele verschiedene Designs im Laufe der Zeit annimmt. Das ist ganz schlechte Usability.

Ein fiktives Beispiel: Ein Link hat im Fließtext eine Signalfarbe, in der Sidebar jedoch ist nicht erkennbar, ob es sich überhaupt um einen Link handelt.

Je mehr unterschiedliche “Versionen” es von einem Element gibt, desto schwieriger wird es für den User, die Webseite zu verstehen.

Wird von Anfang an in Komponenten gedacht, kann dieses Problem sehr leicht vermieden werden. Und das Endprodukt ist qualitativer, weil das Development nicht 7 Einzelfälle einprogrammieren muss.

Die Kunst ein wenig zurückschrauben

Ich möchte eigentlich nicht zu weit in ein Gebiet zu wandern, in dem ich mich nicht auskenne (aber hey, Designen kann ja nicht so schwer sein, mein Neffe macht das auch 😜).

Trotzdem möchte ich diese eventuell unpopuläre Meinung loswerden:

Eine Webseite muss funktionieren. Sie hat ein Ziel, und die gesamte Page muss darauf ausgerichtet sein, dieses Ziel zu erreichen.

Stöbern kannst in einem Buch.

Liest man ein Print-Magazin, lässt man sich auf das Design ein, man will ein Gesamterlebnis. Im Internet nimmt sich niemand die Zeit, ein zu künstlerisches Design zu entwirren. Alles muss dort sein, wo ich es erwarte.

Da ist weniger oft mehr.

Die Moral hier: künstlerische Ansätze haben natürlich ihren Platz. Meiner Meinung jedoch nur dann, wenn sie der User Experience nicht im Weg stehen. Was hilft es, wenn der “In den Warenkorb” Button noch so ästhetisch ist, wenn ihn niemand findet?

Anlieferung des Designs

Ich werde immer wieder gefragt, wie ich denn ein Design erhalten soll.

Die Antwort ist wahrscheinlich für jeden Developer unterschiedlich. Bei mir sind es meist die Design-Dateien selbst. Also Indesign, Photoshop oder was auch immer die Grafik verwendet. So kann ich mir

  • Einzelne Bilder selbst exportieren wie ich es will und muss nicht 3 Mails schreiben dafür.
  • Kann Elemente zu z.B. einem Bild kombinieren, wenn nötig.
  • Finde direkt die Farben, wo ich sie suche.

Kriege ich Designs in jpg, muss ich für jeden, entschuldige bitte, Schas jemanden kontaktieren. Man möge mir doch dieses Icon noch einmal in leicht veränderter Form rausspeichern.

Das ist ineffizient, das mag ich gar nicht.

Darüber hinaus ist super, wenn ich folgende Dinge mitgeliefert kriege:

  • Farben mit HEX-Codes in einer .txt Datei
  • Bilder gesammelt, und bereits für Web gespeichert
  • Komponenten mit deren Spezifikationen (Farben, Fonts, was passiert, wenn man drüber hovert?)
  • Die Webfont-Files
  • Texte direkt in einer Textfile. Nicht in Word, nicht in einer PDF, in einer Textfile.

Dinge, von denen du nicht wusstest, dass ich mich damit herumschlagen muss

Ganz ehrlich, ich weiß nicht, wie ich dieses Kapitel sonst benennen kann.

Mein größter Feind hier sind Webseitentexte.

Kein Programmierer liest die Texte, die er oder sie auf die Webseite stellt. Wir werden fürs Programmieren bezahlt, nicht fürs Korrekturlesen. Ich habe Texte schon auf vielerlei Arten angeliefert bekommen. Und irgendwie war keine optimal.

Einige Dinge fallen mir immer wieder auf:

  • Warum müssen Abteilungen manuell in den Text eingefügt werden? Ist das eine Print-Angewohnheit, die nicht weg zu kriegen ist? Immer wieder super wenn ich den gesamten Text durchgehen muss, um zu checken, ob nicht doch vielleicht irgend- wo (see what i did there?) ein Wort falsch umgebrochen ist.
  • Fuck Ligaturen.
  • Oder Ä’s, die keine Ä’s sind, sondern irgendeine Mixtur schwarzer Magie.

Okay, das mit den Ä’s muss ich euch zeigen, sonst glaubt es mir keiner:

WAS IST DAS!?

Ich habe ehrlich keine Ahnung, warum das so ist. Wenn hier irgendjemand ein wenig Licht in die Sache bringen kann, bitte unten kommentieren.

Fazit

Man könnte bei allen obenstehenden Punkten natürlich argumentieren, dass es mein Job ist, all diese Dinge genau umzusetzen. Und man würde recht haben.

Aber ich denke, dass gegenseitiges Verständnis uns allen helfen kann, unsere Jobs besser zu erledigen.

Wenn ich verstehe, dass ein Element außerhalb des Grids hilft, eine Webseite nicht ich-habe-ein-template-gekauft-und-inhalte-reingeklatscht aussehen zu lassen, und dafür in der Grafik direkt mitgedacht wird, welche Infos ich benötige um effizient zu arbeiten, dann…

Ja dann leben wir alle glücklich und zufrieden, bis auch der letzte Internet Explorer endgültig das Zeitliche gesegnet hat.

Du hast Fragen? Oder eine Anekdote aus dem Alltag? Kommentiere unten! ⬇️

Von Hackern, Wordpress, SEO & Co

  • Wo kommt mein Spam her?
  • Wie leicht ist es, eine Wordpress Seite zu hacken?
  • Wie Umzugsfirmen ihre Gaunereien mit SEO umsetzen

...wöchentlich in deiner Inbox! 🚀

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.