{"id":381,"date":"2008-06-05T20:49:52","date_gmt":"2008-06-05T19:49:52","guid":{"rendered":"http:\/\/ollmetzer\/?p=381"},"modified":"2010-05-30T21:44:20","modified_gmt":"2010-05-30T19:44:20","slug":"look-ma-no-photoshop","status":"publish","type":"post","link":"https:\/\/www.ollmetzer.com\/?p=381","title":{"rendered":"Look ma, no Photoshop!"},"content":{"rendered":"

Jason von 37 Signals hat auf dem Firmenblog einen interessanten Beitrag ver\u00f6ffentlicht: „Why we skip Photoshop<\/a>„.<\/p>\n

Er beschreibt darin den Designprozess von 37 Signals f\u00fcr Webprojekte. Es gibt zun\u00e4chst Zeichnungen auf Papier mit denen das grundlegende Layout erarbeitet wird. Wenn diese funktionieren, wird sofort im Frontendcode gearbeitet – ohne den \u00fcblichen Zwischenschritt in einem Photoshop-Dummy. Als Gr\u00fcnde werden angegeben, da\u00df man Photoshopdateien nicht anklicken kann, obwohl man sie bereits auf dem Bildschirm hat, man leicht durch unwichtige Details abgelenkt wird, man kann nicht schnell mal den Text austauschen oder sehen, wie sich die Seite dynamisch verh\u00e4lt. Photoshop unterst\u00fctzt generell den Workflow in Gruppen nicht sinnvoll und f\u00fchrt dazu, da\u00df man l\u00e4nger braucht, weil man vieles doppelt macht.<\/p>\n

Prinzipiell kann ich da nur zustimmen – ich arbeite seit Jahren \u00e4hnlich. Mir f\u00e4llt auch gleich noch ein weiterer Punkt ein: Wenn man gleich im 2. Schritt den Code schreibt, erkennt man sofort, was in welchem Browser nicht so funktioniert, wie man es sich vorgestellt hat. Die Massen an nicht in sauberen Code umsetzbaren PSDs sind Legion. Dan Boland kommentiert noch:<\/p>\n

„Also, type in Photoshop never seems to be the right size as type in HTML . It just never seems to feel the same. It doesn’t wrap the same, it doesn’t space out the same.<\/em>„<\/p><\/blockquote>\n

Ein interessantes Gegenargument spricht daf\u00fcr cubiclegrrl in den Kommentaren an:<\/p>\n

Sie gibt ihren Kunden NIEMALS klickbare Dummies an die Hand, weil diese nicht verstehen, da\u00df es sich um einen Klickdummy und nicht bereits um die fertige Anwendung handelt („Wieso brauchen sie denn so lange? Sie waren doch vor vier Wochen schon fertig.<\/em>„). Unwissende Kunden f\u00fchlen sich dann oft \u00fcbert\u00f6lpelt, weil sie nicht wissen, wieviel Arbeit „unter der Haube“ n\u00f6tig ist. Sie bevorzugt deshalb Storyboards und Scribbles, auch wenn diese letztlich mehr Zeit ben\u00f6tigen.<\/p>\n

Das richtige Tool f\u00fcr die richtige Phase im jeweiligen Projekt.<\/strong><\/p>\n

Struktur<\/span>
\nIch glaube, da\u00df Scribbles und abstrakte Storyboards (oder Wireframe) genau die richtige Herangehensweise sind, um gleichzeitig den Content zu strukturieren, das Grundlayout anzulegen und zu \u00fcberpr\u00fcfen, ob das Ergebnis bedienbar ist.<\/p>\n

Aussehen<\/span>
\nPhotoshop ist ein wirklich erstklassiges Bildbearbeitungsprogramm, nur habe ich es nie f\u00fcr ein Tool gehalten, mit dem man gut Websites „entwerfen“ kann. Daf\u00fcr ist es einfach nicht gemacht. Aber um festzulegen, wie der Mood einer Website ist, halte ich es dennoch f\u00fcr sinnvoll. Um sich dem grunds\u00e4tzlichen Styles einer Site zu erarbeiten, sind ein-, zwei Screens recht mit einigen typischen Seitenelementen gut geeignet. Man darf nur nicht versuchen, die Seiten m\u00f6glichst pixelgenau nachbauen.<\/p>\n

Verhalten<\/span>
\nUnd zur Beurteilung dynamischen Verhaltens, ben\u00f6tigt man leider letztendlich codierte Prototypen. Es ist halt ein Unterschied, ob man eine „Website“ mit viel Eye-Candy baut, oder eine Webapplikation.<\/p>\n

Nicht zu vergessen, spricht m.E. ein gewichtiges Argument gegen Photoshop: \u20ac1.000.<\/p>\n","protected":false},"excerpt":{"rendered":"

Jason von 37 Signals hat auf dem Firmenblog einen interessanten Beitrag ver\u00f6ffentlicht: „Why we skip Photoshop„. Er beschreibt darin den Designprozess von 37 Signals f\u00fcr Webprojekte. Es gibt zun\u00e4chst Zeichnungen auf Papier mit denen das grundlegende Layout erarbeitet wird. Wenn diese funktionieren, wird sofort im Frontendcode gearbeitet – ohne den \u00fcblichen Zwischenschritt in einem Photoshop-Dummy. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-381","post","type-post","status-publish","format-standard","hentry","category-development"],"_links":{"self":[{"href":"https:\/\/www.ollmetzer.com\/index.php?rest_route=\/wp\/v2\/posts\/381","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ollmetzer.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ollmetzer.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ollmetzer.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ollmetzer.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=381"}],"version-history":[{"count":0,"href":"https:\/\/www.ollmetzer.com\/index.php?rest_route=\/wp\/v2\/posts\/381\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.ollmetzer.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=381"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ollmetzer.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=381"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ollmetzer.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=381"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}