{"id":4883,"date":"2016-07-20T10:47:14","date_gmt":"2016-07-20T09:47:14","guid":{"rendered":"https:\/\/www.zeichenschatz.net\/?p=4883"},"modified":"2016-07-20T10:47:14","modified_gmt":"2016-07-20T09:47:14","slug":"4883","status":"publish","type":"post","link":"https:\/\/zeichenschatz.net\/en\/webdesign\/4883\/","title":{"rendered":"F\u00fcnf Gr\u00fcnde warum Webdesigner keine Angst vor Code haben sollten"},"content":{"rendered":"

Webdesigner sollten Code beherrschen. Und zwar nicht um den technischen Part zu \u00fcbernehmen, sondern um besser und effizienter gestalten zu k\u00f6nnen. Doch wie alles Neue ist es mit einer gewissen Einstiegsh\u00fcrde verbunden.<\/p>\n

Ich selbst besch\u00e4ftige mich wieder seit Ende 2012 intensiv mit HTML<\/strong> und vor allem CSS.<\/strong>\u00a0Damals kristallisierte sich Responsive Webdesign<\/strong> als die Vorgehensweise f\u00fcr Webdesign heraus und\u00a0es wurde immer absurder f\u00fcr jedes Template und jeden Breakpoint eine Photoshop-Vorlage zu erstellen. Seitdem ich den Umgang mit Code als Teil meines Design-Prozesses adaptiert habe, erfahre ich viele Vorteile.\u00a0Das sind meine\u00a0f\u00fcnf Gr\u00fcnde warum sich Designer mit Code auseinander setzen sollten:<\/p>\n

1. Es ist einfach\u00a0zu lernen<\/h2>\n

HTML und CSS zu lernen ist leicht. Die\u00a0Sprachen sind daf\u00fcr gemacht\u00a0worden,\u00a0um m\u00f6glichst einfach angewandt\u00a0werden zu k\u00f6nnen. Die Lernkurve ist steil und man hat schnell Erfolgserlebnisse. Nat\u00fcrlich gibt es auch gewisse T\u00fccken\u00a0(der Teufel liegt wie immer im Detail), doch das Beste ist HTML, CSS und Java Script kann man\u00a0kostenlos\u00a0lernen.<\/strong> Es gibt zahlreiche wirklich gute Tutorials und Ressourcen wie Codecademy<\/a>, CSS Tricks<\/a>\u00a0oder\u00a0HTML Dog<\/a>, alle nur eine Suchanfrage entfernt.<\/p>\n

Ganz wichtig:\u00a0es muss dabei kein produktionsreifer Code<\/strong>\u00a0rausspringen.\u00a0Ich nenne das Ergebnis Design-Code <\/strong>mit dem Ziel einen Prototyp erstellen zu k\u00f6nnen\u00a0um besser zu gestalten. Dinge\u00a0wie Browser-Kompartibilit\u00e4t oder\u00a0Wartbarkeit m\u00fcssen\u00a0hier kein Thema sein. F\u00fcr den Start ist es am besten die Erwartungen nicht zu hoch zu schrauben. Es reicht wenn der Prototyp erst mal nur als Vorlage<\/b> f\u00fcr ordentliches Front End Development dient. Mit der Zeit und Neugierde wird sich die Qualit\u00e4t des Codes steigern.<\/p>\n

2. Es ist nachhaltig<\/h2>\n

Es\u00a0gibt mittlerweile einige grafische Tools, die sich den Anspr\u00fcchen von Responsive Webdesign stellen. Das sind zum Beispiel Sketch<\/a>,\u00a0Webflow<\/a>, Macaw<\/a><\/del>, Adobe Edge Reflow<\/a>, mittlerweile auch Adobe Muse<\/a>\u00a0oder vielleicht\u00a0auch\u00a0bald\u00a0Adobe Experience Design<\/a>. Mit all diesen Tools\u00a0k\u00f6nnen (mal besser mal schlechter) interaktive Prototypen<\/strong> mit flexiblen Layouts\u00a0erzeugt werden, mit einigen\u00a0sogar ganze\u00a0Websites. Wozu dann also\u00a0Code lernen?<\/p>\n

Ich selbst habe mich vor\u00a0zwei\u00a0Jahren genauer mit Adobe Edge Reflow<\/strong> und mit Macaw<\/strong> auseinandergesetzt. Die Gr\u00fcnde, warum ich mich damals\u00a0dagegen entschieden<\/strong> habe damit zu arbeiten waren:<\/p>\n

    \n
  1. Der Workflow war ziemlich anstrengend und buggy<\/li>\n
  2. Die M\u00f6glichkeiten\u00a0waren\u00a0recht eingeschr\u00e4nkt<\/li>\n
  3. Die Zukunft dieser Produkte war sehr vage\u00a0(mittlerweile wurde\u00a0die Weiterentwicklung von Macaw eingestellt)<\/li>\n<\/ol>\n

    Das m\u00f6gen alles Kinderkrankheiten gewesen sein und vieles mag mittlerweile auch besser laufen. Doch im Endeffekt l\u00e4uft es mit diesen Tools ja auch nur auf Code hinaus. Sie erzeugen HTML,<\/strong> CSS,<\/strong> vielleicht ein bisschen Java Script<\/strong> \u2013 die drei Grundbausteine des Web Designs.<\/strong>\u00a0Ich halte es\u00a0f\u00fcr\u00a0sinnvoller und nachhaltiger\u00a0sich gleich mit diesen ohne Umweg zu besch\u00e4ftigen. Hier kann man davon ausgehen, dass diese\u00a0weiterhin erhalten bleiben. Bevor ich also lerne, wie ich eine\u00a0Software so bediene, dass sie den Code erzeugt, den ich brauche \u2013 warum nicht gleich den Code direkt erzeugen? Das schafft Flexibilit\u00e4t,\u00a0Unabh\u00e4ngigkeit und ist deshalb nachhaltiger.<\/p>\n

    \"Die
    Die drei heiligen Klammern des Webdesigns \u2013 lieber gleich direkt lernen, als sich von Hilfmitteln abh\u00e4ngig machen<\/figcaption><\/figure>\n

    3. Es entsteht besseres Design<\/h2>\n

    Es ist ein Problem in einem statischen Design-Programm Entscheidungen f\u00fcr ein dynamisches Medium zu treffen. In\u00a0Photoshop, Illustrator oder Sketch\u00a0simulieren wir f\u00fcr unser Webdesign den Browser. Wir k\u00f6nnen hier aber nur bedingt die\u00a0Dynamik\u00a0erleben, die gutes Webdesign oft ausmacht. Seien es:<\/p>\n

      \n
    • Verschiedene\u00a0Inhaltsarten und -l\u00e4ngen<\/li>\n
    • Interaktionen (Hover, Animationen, \u00dcberg\u00e4nge)<\/li>\n
    • Verschiedene Bildschirmgr\u00f6\u00dfen und Ger\u00e4te<\/li>\n<\/ul>\n

      Designer kennen den ern\u00fcchternden Moment,<\/strong> in dem\u00a0man\u00a0das\u00a0in\u00a0Photoshop entworfene Webdesign auf einmal im Browser mit echten Inhalten auf echten\u00a0Ger\u00e4ten\u00a0sieht. Und man\u00a0merkt auf einmal welche Design-Entscheidungen\u00a0nicht funktionieren.\u00a0Wer mit einem Prototyp\u00a0diese Dynamiken\u00a0schon im Entwicklungsprozess am Design beachten kann, wird bessere, flexiblere und nachhaltigere Designs erstellen. Denn die Design-Entscheidungen werden im\u00a0Browser\u00a0getroffen\u00a0<\/strong>\u2013\u00a0<\/strong>am echten\u00a0Ding und nicht in der Photoshop-Simulation.<\/p>\n

      4. Photoshop spielt weiterhin\u00a0eine Rolle<\/h2>\n

      F\u00fcr Design-Entscheidungen im Web Design sind Grafik-Programme nicht ideal. Doch sie haben immer noch ihren Platz \u2013 n\u00e4mlich beim Entwicklen einer Design Richtung. Denn\u00a0Designen\u00a0im Browser funktioniert nicht.<\/strong> Zumindest nicht f\u00fcr mich. Vielleicht ist das so eine linke\/rechte Hirnh\u00e4lfte-Sache, aber um eine visuelle Idee zu entwickeln ist Adobe Illustrator f\u00fcr mich immer noch unschlagbar. Fr\u00fcher war es Photoshop, dann Fireworks, morgen ist es vielleicht etwas anderes \u2013 im Wesentlichen geht es\u00a0darum ein Tool zu haben bei dem man\u00a0noch nicht an den\u00a0technischen Aufbau denken muss. In dem man\u00a0frei und<\/strong> schnell herumprobieren kann. <\/strong>Sobald dann\u00a0eine\u00a0ungef\u00e4hre visuelle\u00a0Richtung da ist, setze ich diese als Prototyp in HTML und CSS um und entwickle das Design im Browser weiter.<\/p>\n

      \"Photoshop
      Photoshop liebt HTML und hat immer noch seinen Platz im Webdesign<\/figcaption><\/figure>\n

      5. Es erleichtert die\u00a0Zusammenarbeit<\/h2>\n

      Designer, die mit Design-Code einen HTML-Prototyp ihres Webdesigns erstellen k\u00f6nnen erleichtern sich das Leben in dreierlei\u00a0Hinsicht:<\/p>\n

      Die\u00a0Abstimmung\u00a0mit Kundinnen und Kunden wird leichter<\/h3>\n

      Es\u00a0kann zu einem Problem werden, wenn\u00a0Kundinnen und Kunden auf Basis eines Photoshop-Entwurfs ein Webdesign freigeben. Machen\u00a0f\u00e4llt es schwer zu abstrahieren, andere abstrahieren zu viel. Es entsteht\u00a0jedenfalls Spielraum f\u00fcr falsche Annahmen.<\/strong> Diese k\u00f6nnen den\u00a0Prozess gef\u00e4hrden, da sie unerwartete \u00c4nderungen nach Freigabe mit sich ziehen k\u00f6nnen, die\u00a0wiederum h\u00f6here Kosten und Unmut verursachen\u00a0k\u00f6nnen.\u00a0Mit einem interaktiven Prototyp kann man vieles davon bereits am Weg abwenden und erzeugt keine falschen Erwartungen<\/strong> von Kundenseite.<\/p>\n

      Die Kommunikation mit\u00a0Developerinnen und Developern\u00a0wird leichter<\/h3>\n

      Ein Prototype ist ebenso ein wunderbares Briefing f\u00fcr die Technik.<\/strong>\u00a0Funktionalit\u00e4t,\u00a0Interaktion und Aussehen bei\u00a0verschiedenen Bildschirmgr\u00f6\u00dfen sind darin bereits abgedeckt und m\u00fcssen nicht lange erkl\u00e4rt oder\u00a0beschrieben werden. So sinkt die Anzahl m\u00f6glicher\u00a0Fehlerquellen.\u00a0Oft k\u00f6nnen Teile vom Code \u00fcbernommen werden, was die technische Entwicklung effizienter und\u00a0g\u00fcnstiger macht.<\/p>\n

      Die Feinabstimmung und\u00a0Finalisierung der Website\u00a0wird leichter<\/h3>\n

      Mit der \u00dcbergabe des Prototypen an\u00a0die Technik muss die Arbeit des Designers oder der Designerin mit HTML und CSS\u00a0nicht enden. Feinabstimmungen<\/strong> k\u00f6nnen direkt im Code<\/strong> durchgef\u00fchrt\u00a0werden und die Feedbackschleife wird dadurch k\u00fcrzer. Auch wenn man sich das am Anfang vielleicht nicht gleich zutraut, mit der Zeit werden die pers\u00f6nlichen Verantwortungen und\u00a0Kompetenzen im Code steigen. Und\u00a0da die meisten Developer ohnehin mit Git arbeiten, braucht man sich auch nicht f\u00fcrchten etwas unwiderruflich kaputt zu machen.<\/p>\n

      \n

      Noch einmal kurz und b\u00fcndig:<\/strong> es geht nicht\u00a0darum aus Grafikdesignern top Front End Developer zu machen. Es geht darum mit HTML und CSS\u00a0einfachen \u201eDesign-Code\u201c zu schrieben\u00a0mit dem man einen funktionalen Prototyp erstellen kann. Dadurch kann man bessere Design-Entscheidungen treffen,\u00a0sich leichter mit Kunden abstimmen und in der Umsetzung der Website fl\u00fcssiger\u00a0zusammenarbeiten. Vielleicht motivieren euch diese Gr\u00fcnde\u00a0ja den\u00a0ersten Schritt zu tun.\u00a0Hinterlasst gerne eure\u00a0Gedanken (seinen sie von Kunden-, Designer- oder Developerseite)\u00a0zu dem\u00a0Thema in den Kommentaren.<\/p>","protected":false},"excerpt":{"rendered":"

      Webdesigner sollten Code beherrschen. Und zwar nicht um den technischen Part zu \u00fcbernehmen, sondern um besser und effizienter gestalten zu k\u00f6nnen. Doch wie alles Neue ist es mit einer gewissen Einstiegsh\u00fcrde verbunden. Ich selbst besch\u00e4ftige mich wieder seit Ende 2012 intensiv mit HTML und vor allem CSS.\u00a0Damals kristallisierte sich Responsive Webdesign als die Vorgehensweise f\u00fcr […]<\/p>","protected":false},"author":3,"featured_media":4884,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13],"tags":[83,169,414,428],"class_list":["post-4883","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webdesign","tag-css","tag-html","tag-webdesign","tag-workflow"],"_links":{"self":[{"href":"https:\/\/zeichenschatz.net\/en\/wp-json\/wp\/v2\/posts\/4883","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zeichenschatz.net\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zeichenschatz.net\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zeichenschatz.net\/en\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/zeichenschatz.net\/en\/wp-json\/wp\/v2\/comments?post=4883"}],"version-history":[{"count":0,"href":"https:\/\/zeichenschatz.net\/en\/wp-json\/wp\/v2\/posts\/4883\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/zeichenschatz.net\/en\/wp-json\/wp\/v2\/media\/4884"}],"wp:attachment":[{"href":"https:\/\/zeichenschatz.net\/en\/wp-json\/wp\/v2\/media?parent=4883"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zeichenschatz.net\/en\/wp-json\/wp\/v2\/categories?post=4883"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zeichenschatz.net\/en\/wp-json\/wp\/v2\/tags?post=4883"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}