Sollte ein Webdesigner mit der Erfindung von CSS3 Photoshop verwenden?

13

Ich sehe, dass viele Designer schöne Webdesign-Arbeiten in Photoshop erstellen, aber jetzt, mit der Einführung von CSS3, wenn sie dies in HTML & CSS ändern möchten, beginnen sie einfach von vorne und erstellen mit CSS3 etwa 80% des endgültigen Designs.

Beispielsweise verwenden sie Rahmenradius, Deckkraft, Hintergrundverlauf, Rahmenschatten und Textschatten sowie andere CSS3-Regeln, um das zu ermitteln, was sie in Photoshop erstellt haben. Oft importieren sie nur ein Bild aus Photoshop, das eher wie eine Pinselarbeit oder ein Logo oder ähnliches aussieht.

Meine Frage ist, sollten Webdesigner immer noch Photoshop verwenden, um etwas zu erstellen, von dem nur 20% für sie nützlich wären.

Kann ein Webdesigner das gesamte Design direkt in HTML und CSS erstellen, ohne sich die Mühe machen zu müssen, eine weitere mittlere Ebene zum Erstellen eines Designs in Photoshop hinzuzufügen, und dann einfach die verbleibenden Elemente dort erstellen?

adobe-photoshop website-design css

— Saeed Neamati
quelle

Das Entwerfen der Benutzeroberfläche der Site und das Entwerfen des Erscheinungsbilds sind zwei verschiedene Themen. Photoshop macht ein schreckliches Drahtrahmenwerkzeug; Produkte wie MockFlow sind jedoch ein schreckliches visuelles Werkzeug. 99% meiner Kunden KÖNNEN einen Drahtrahmen NICHT genau dahingehend interpretieren, wie ein Schatteneffekt oder ein Farbschema zusammenwirken (oder unzählige andere visuell abhängige Situationen).

— Dawson

Dies sollte ein Chat oder zumindest ein Meta sein. Es gibt keine endliche Antwort.

— b01

17

Ich muss mit allen nicht einverstanden sein. Photoshop ist kein Tool zum Entwerfen einer Website. Es ist ein Werkzeug zum Skizzieren einer Website. Die Website sollte immer noch in dem Medium gestaltet sein, in dem sie sich befindet - das tendenziell aus CSS, HTML und JS besteht.

Das heißt nicht, dass Sie Photoshop nicht verwenden. Das musst du aber sicher nicht.

Ich bin ein großer Fan von nicht immer Website - Designs in Photoshop Kunden zeigen. Es ist nicht das Medium, in dem die Site leben wird. Photoshop-Kompositionen bieten keine Möglichkeit, Interaktion, Geräteunterschiede, Browser-Eigenheiten, Klickbarkeit, Reaktionsfähigkeit usw. zu kommunizieren.

Zugegeben, in der Realität müssen Sie die meiste Zeit noch JPG-Modelle anzeigen. Fein. Verwenden Sie dazu Photoshop. Aber nimm diese PSD-Datei nicht und schneide sie in eine Website. Das ergab 1999 Sinn. Heute nicht mehr. Nehmen Sie stattdessen das PSD und verwenden Sie es nur als Leitfaden. Dies ist ungefähr die Art und Weise, wie die Site aussehen sollte, aber berücksichtigen Sie, dass sie in CSS / HTML / JS erstellt wird und je nach Bedarf angepasst werden kann.

Also, um die Frage zu beantworten:

Kann ein Webdesigner das gesamte Design direkt in HTML und CSS erstellen, ohne sich die Mühe machen zu müssen, eine weitere mittlere Ebene zum Erstellen eines Designs in Photoshop hinzuzufügen, und dann einfach die verbleibenden Elemente dort erstellen?

Ja. Das kann man sicher. Ich habe gesehen, dass das parallel mit PSD-Designern gemacht wurde. Das größte Problem beim PSD-Ansatz ist die Arbeit in einem agilen Team. Schwere Dateien, die für die Dokumentation verwendet werden (z. B. PhotoShop), belasten den Agile-Prozess ziemlich stark und verursachen am Ende mehr Probleme, als sie lösen. Wir neigen dann dazu, umgekehrt zu arbeiten ... wir skizzieren nach Bedarf in PS und entwerfen und bauen dann in HTML / CSS / JS. Wenn wir dann schnelle visuelle Aktualisierungen für Besprechungen vornehmen müssen, machen wir einfach einen Screenshot des Markups der funktionierenden Präsentationsebene und bearbeiten es in PhotoShop.

— DA01
quelle

Ich bin bei dir @ DA01. +1.

— Saeed Neamati

1

+1 toller Artikel (okay, vielleicht ist es kein Artikel), aber du hast es wirklich gut zusammengefasst! Ich stimme fast allem zu, was Sie gesagt haben. Ich persönlich lege Wert darauf, meinen Kunden Live-HTML- und CSS-Modelle mit sämtlichen Designfunktionen zur Verfügung zu stellen, damit sie das Design „erleben“ können!

— Web_Designer

2

+1 für "Screenshot des Markups der Arbeitspräsentationsebene". Bis ich diese Antwort gelesen habe, habe ich darüber nachgedacht, in meiner eigenen Antwort so etwas zu sagen, aber ich hätte nicht viel hinzuzufügen, also stimme ich dem stattdessen zu ...

— 10.

+1 Ich habe angefangen, einen Großteil meiner Entwurfsarbeit im Browser mit CSS3 pro Jahr zu erledigen, und selten sogar Photoshop mehr geöffnet.

— Chris_O

1

+1! Photoshop ist in erster Linie ein Bitmap-Bearbeitungsprogramm. Für leichten, gut kontrollierten Code gibt es keinen besseren Weg als Direct HTML und CSS. Es wird immer Dinge geben, die sich von PS zu Web ändern müssen, und wie ich es sehe; PS fügt dem Client nur eine komplizierte Ebene hinzu.

— Benteh

7

** EDIT **

Neuer Kunde?

Absolut - Wenn Sie ein Design für einen NEUEN Kunden / eine NEUE Site erstellen. Laien tun sich im Allgemeinen schwer, zu sehen, was in deinem (meinem) Kopf ist. Drahtgitter, Zeichnungen usw. schneiden es auch nicht immer - kratzen Sie daran - sie schneiden es nicht. Ich höre mehr "Ich dachte, es würde X tun" von Kunden, wenn sie nur einen WF oder eine Skizze haben, als ich, wenn sie ein Modell mit ihrem Logo, ihren Fotos, Unternehmensschriften und einer Benutzeroberfläche erhalten.

Beliebiges anderes Szenario:

Möglicherweise nicht - Wenn Sie vorhandenes HTML / CSS / JS verwenden können, das den Jobanforderungen entspricht, oder wenn Sie den Inhalt eines vorhandenen Clients bearbeiten, ist es besser, nur im Code zu arbeiten. Wenn nicht, werden Sie wahrscheinlich viel Zeit in Photoshop für sehr wenig Rendite verschwenden. Es gibt Fälle (wie @ DAO1), in denen ein Screenshot und eine Optimierung über Photoshop den Genehmigungsprozess erheblich beschleunigen oder eine oder drei Ideen hervorbringen können.

** Ende **

Ich sage ja -

Es ist viel einfacher, Ihre Designs zu verkaufen (und Comps viel schneller zu erstellen) - auch wenn es vereinfacht ist. Dort ist PS für meine Jobs am hilfreichsten.

Ich baue auch eine Ebene in ein Rastersystem ein, damit ich sehen kann, wie die Dinge angeordnet sind, und ziehe sie schnell dorthin, wo ich sie brauche. Auch dies hilft bei Comps und vom Client angeforderten Änderungen.

Wenn Sie eine Photoshop-Bibliothek mit häufig verwendeten Elementen haben: vektorbasierte Eingabefelder mit abgerundeten Ecken, Raster, Feld "Logo geht hierher" ... alles in Ebenen einer einzelnen Datei oder in mehreren Dateien (nach Ihrer Wahl) - Sie können Startseiten und Innenseiten in einem Bruchteil der Zeit erstellen, die zum Codieren erforderlich ist.

Das Beibehalten einer gemeinsamen CSS-Datei (mit gängigen Einstellungen) hilft auch beim Codieren, aber ich sehe keinen Nutzen darin, PS aus dem Arbeitsablauf zu entfernen - unabhängig davon, wie robust CSS wird.

— Dawson
quelle

"in einem Bruchteil der Zeit, die es braucht, um sie zu codieren", hängt das wirklich von einer ganzen Reihe von Dingen ab - einschließlich der Fähigkeiten des Designers. Ich finde, dass es oft schneller ist, Änderungen / Optimierungen am Client direkt in CSS / HTML / JS vorzunehmen, als wieder in Photoshop zu arbeiten. Aber es hängt von vielen Faktoren ab.

— DA01,

DA01 - absolut. Mein Arbeitsablauf ändert sich mit der Reife des Projekts. Nach dem Start werden die PSDs nicht berührt.

— Dawson

3

Können Sie garantieren, dass 100% Ihrer Benutzer Browser haben, die Ihre Site genau so anzeigen, wie Sie (oder, was noch wichtiger ist, der Kunde) es beabsichtigt haben? Nein? Wie viel Prozent? 90%? 80%?

Können Sie sich vergewissern, dass die Qualität des Produkts abnimmt, sodass die von den verbleibenden 10% (20%? 40%?) Gesehene alternative Version akzeptabel ist?

Wenn eines oder beide dieser Probleme ein Problem sind, benötigen Sie Photoshop.

— Lauren-Reinstate-Monica-Ipsum
quelle

Es tut uns leid; Warum das? Kannst du erklären, was du meinst?

— Benteh

@boblet Bitte spezifizieren Sie Ihre Frage. Erklären, was?

— Lauren-Reinstate-Monica-Ipsum

Oh, tut mir leid; Ich habe mich gefragt, warum du sagst, du brauchst etwas PS, weil die Konsistenz des Browsers nicht stimmt. Irgendwie ergibt das für mich keinen Sinn.

— Benteh

@boblet Ich meine, mit einigen Effekten (z. B. abgerundeten Ecken) können Sie es in CSS oder Photoshop erstellen. Ältere Browser können jedoch keine abgerundeten CSS-Ecken verarbeiten. sie kommen wie normale Kastenecken heraus. Wenn die runde Ecke wirklich wichtig ist, müssen Sie sie mit Photoshop als Grafik erstellen, damit alle Browser sie sehen können.

— Lauren-Reinstate-Monica-Ipsum

Aha! Das macht etwas mehr Sinn. Ich sehe jetzt jedoch, dass dies ein alter Beitrag ist, und heutzutage sind abgerundete Ecken, Schatten usw. kein Problem mehr. Ich habe mich nur mit der Praxis befasst, in PS entzückende Modelle zu erstellen und dann auf Probleme zu stoßen, die sich in vernünftigen Code umsetzen lassen. Kunden haben es oft schwer, das zu schlucken. Sie verstehen oft nicht die Brücke, die die Lücke zwischen Bitmap und Code schließen muss. Danke fürs Erklären.

— Benteh

2

Dinge, über die man nachdenken sollte:

Es wird viel Wert darauf gelegt, diese ausgefallenen Designs ins Internet zu stellen. Zumindest für die komplexeren. Photoshop hilft dabei, das Endergebnis schneller zu sehen.
Für einen Designer an seinem Arbeitsplatz ist das Erstellen eines Modells in Photoshop in der Regel schneller, da Sie nicht den ganzen Tag damit verbringen, sich mit HTML und CSS3 zu beschäftigen.
Wie Sie bereits erwähnt haben, können sie 80% davon in CSS3 ausführen, benötigen dann aber irgendwann Photoshop.
Ich würde argumentieren, dass Sie auf ein Modell in Photoshop verzichten, wenn Sie der Designer und Entwickler sind, und dies würde Zeit sparen, andernfalls sollten Sie immer ein Modell in Photoshop erstellen.

— b01
quelle