Hat es einen Vorteil, ein vollständiges Image-Mock-up zu erstellen, anstatt direkt HTML / CSS zu schreiben?

In der Vergangenheit hatten viele Unternehmen und Webdesigner einen Workflow, der aus zwei oder drei Teilen bestand: Minimum - Design, Markup, Backend. Diese verallgemeinern und die Linien können ein bisschen verwischen ... aber ich bin sicher, dass Sie meinen Kern verstehen.

Oft war der Webdesigner "nur visuell" und nur für die Erstellung eines sehr detaillierten Modells in Bildbearbeitungssoftware wie Photoshop oder Fireworks verantwortlich. Die Modelle zeigen alle möglichen Aspekte einer Webseite, von Farben und Typen bis hin zu Hintergründen, Symbolen, Fotos und anderen zu verwendenden Bildern. Der "Designer" befasste sich jedoch nie mit der tatsächlichen Live-Konstruktion und -Implementierung. Sie konzentrierten sich ausschließlich auf das Aussehen.

Sobald das Design genehmigt war (durch Überprüfen dieser Bilddateien), wurde Schritt 2 durchgeführt - der Übergang der Bilddatei (en) zu Live-HTML / CSS.

• In einer Einzelplatz- oder freiberuflichen Umgebung hat der Webdesigner möglicherweise Slices verwendet und über einige interne Anwendungsoptionen nach HTML exportiert. In seltenen Fällen kann der Designer einfache HTML / CSS-Seitenrahmen erstellen.

• In einigen Unternehmensumgebungen verbleiben diese Modelle in Form einer Bilddatei mit Ebenen (.psd, .png [für Fireworks]) für den Webdesigner, und der Designer würde sich niemals Gedanken über die Implementierung von Markups oder Code machen. Der "Designer" musste sich nie mit der Erstellung von HTML oder CSS befassen, um dieses von ihm erstellte Bildmodell zu implementieren. Bilddateien wurden / werden an einen "Entwickler" übergeben, der dann für die Erstellung von HTML / CSS verantwortlich ist, das mit der Bilddatei übereinstimmt .

Ich stelle mir vor, manche arbeiten noch sehr viel auf diese Weise. Mit den Fortschritten bei den Auszeichnungssprachen, nämlich CSS3, und den Verbesserungen bei der Browserunterstützung, kann jedoch in vielen Fällen der Zeitaufwand für die sorgfältige Erstellung einer Raster-Darstellung einer vollständigen Webseite weitgehend nutzlos sein.

Mit dem aktuellen Markup ist es sehr einfach, viele Webdesign-Anforderungen direkt über HTML / CSS zu implementieren, und die Verwendung der Bildanwendung beschränkt sich auf das Generieren kleiner Bildelemente oder Fotos, die möglicherweise benötigt werden. (Bibliotheken und / oder Vorlagen wie Bootstrap haben diesen Begriff weiter vorangetrieben.)

In meinem eigenen Workflow habe ich vor allem bewegt weg von der vollen Seite Mockups es sei denn , sie sind ausdrücklich angefordert. Ich mache dies, um die Entwurfsgeschwindigkeit zu verbessern und sicherzustellen, dass das, was genehmigt wird, dem nahe kommt, was in Browsern endgültig gerendert wird. Tatsächlich habe ich seit einigen Jahren kein vollständiges Seitenmodell mehr erstellt. Mir ist jedoch bewusst, dass es immer noch Workflows gibt, die diese Methode verwenden.

Gibt es einen wirklichen Vorteil bei der Erstellung ganzseitiger Modelle in Bildbearbeitungsanwendungen, bevor Sie direkt in HTML / CSS für die Designerstellung eintauchen?

Der Vorteil der Erstellung ganzseitiger Modelle liegt in der Arbeitsteilung.

In größeren Unternehmen, die sowohl einen Designer als auch einen (Front-End-) Entwickler haben, ist die Aufgabe des Designers das Entwerfen und die Aufgabe des Entwicklers das Schreiben von Code .

Durch diese Unterteilung kann der Designer seine gesamte Zeit mit dem Erscheinungsbild und der Benutzeroberfläche der Website verbringen und muss nichts darüber wissen, wie sie erstellt wird. Sie können qualitativ hochwertigere Designs erstellen und Entscheidungen länger durchdenken, gerade weil sie nicht daran arbeiten, den Code dazu zu bringen, gleichzeitig das zu tun, was sie wollen.

Außerdem kann der Entwickler mehr Code schreiben, indem er sich keine Gedanken darüber machen muss, wie er aussehen wird, einschließlich der kleinen Details und der unterschiedlichen Status. Sie setzen das Design so gut wie möglich in der vorgegebenen Zeit um und können mit einem anderen Projekt fortfahren.

Wenn der Designer auch der Entwickler ist, werden die meisten Leute mehr oder weniger auf Ihrer Seite stehen, weil sie ein gröberes Produkt erstellen und schnell iterieren, um die Dinge zu testen. Auf diese Weise können Ideen schnell getestet werden, anstatt ein pixelgenaues Photoshop-Dokument zu erstellen.

Grobes, iteratives Design ohne Code ist jedoch auch ein gültiger und unglaublich nützlicher Ansatz, insbesondere für Layouts und Arbeitsabläufe. Markup-Sprachen und neue Technologien haben nicht schnell erfunden, mit groben Ideen zu arbeiten :)

Ich werde Guffa mit dieser Antwort aufgreifen. Um klar zu sein, ich versuche nicht, Guffa herauszusuchen, sondern die Punkte mit den Aufzählungszeichen sind sehr häufig, die ich höre. Ich möchte auch einige Gegenpunkte anbieten. Ich sage nicht, dass Guffa falsch ist und ich habe recht. Ich biete nur einen Kontrapunkt.

1. Der kreative Teil des Designprozesses leidet, wenn Zeit aufgewendet wird, um herauszufinden, wie man verschiedene Dinge in HTML und CSS macht.

Dies gilt, wenn man Code nicht gleichermaßen als kreativ ansieht. Photoshop und HTML / CSS / JS sind beide Medien, in denen ein Künstler arbeiten kann. So wie eine Farbe so kreativ ist wie Kohle, kann Photoshop auch so kreativ sein wie ein Medium wie HTML / CSS / JS.

Der große Vorteil der direkten Arbeit in HTML / CSS / JS liegt in der Mehrdimensionalität. Letztendlich ist Photoshop eine flache Leinwand. HTML / CSS / JS ist eine dynamische Zeichenfläche mit Fluidität, Interaktion, Animation usw.

Unterm Strich würde ich argumentieren Code das ist mehr kreative Medium in diesem Fall.

2. Wenn die Designer und Programmierer unterschiedliche Leute sind, sind sie selten wirklich gut im Programmieren, auch wenn die Designer in HTML und CSS ziemlich gut sind. Das Ergebnis wäre (in unterschiedlichem Maße) ineffizienter Code, der aufgebläht und schwer zu warten ist.

Der Gegenpol dazu ist leider etwas, auf das ich nur allzu oft stoße: Die meisten Entwickler, die in dedizierten Rollen arbeiten, arbeiten in größeren Organisationen (wo dedizierte Rollen eher die Norm sind) und aufgrund mangelnder disziplinübergreifender Kenntnisse ( und oft ein völliger Mangel an Code für die Präsentationsebene) machen einige der aufgedunsensten zu einem schwierig zu pflegenden Front-End-Code, den ich je gesehen habe.

Ich würde die visuellen Gestaltungsfähigkeiten nicht als Hinweis auf ihre Codierungsfähigkeiten betrachten. Ich würde noch einen Schritt weiter gehen und behaupten, dass ein talentierter Generalist, der Design und Codierung kennt - auch wenn er nicht der beste Designer oder der beste Codierer ist - aufgrund der Tatsache oftmals ein besseres Gesamtprodukt als das hochgradig getrennte Team erstellen kann dass sie das größere Bild sehen können, während sie erschaffen. Viel weniger geht in der Übersetzung verloren.

3. Wenn Sie mit dem Schreiben des Codes beginnen, bevor Sie eine klare Vorstellung davon haben, wie das Design aussehen soll, treffen Sie uninformierte Entscheidungen zum Erstellen des Codes. Das Risiko besteht darin, dass der Code dadurch schlechter wird und die Entwurfsmöglichkeiten eingeschränkt werden.

Das Entwerfen im Code bedeutet jedoch nicht, dass dies Ihr Produktionscode ist. Ich habe an Projekten gearbeitet, bei denen der größte Teil des von uns erstellten Codes ausschließlich für das Design und anschließend für das Prototyping bestimmt war. Sobald wir fertig sind, werden wir ein sauberes Rewrite durchführen. Dies hatte den zusätzlichen Vorteil, dass wir in der ersten Codierungsrunde viele "Fallstricke" finden konnten.

4. Der HTML- und CSS-Code kann sich bei kleinen Änderungen im Design ziemlich stark ändern, wodurch der Designprozess statischer wird. Sie riskieren, sich nur auf die Änderungen zu beschränken, die im Code leicht vorzunehmen sind.

Das Gegenargument dazu ist, dass sich der Designer nur auf die Änderungen beschränkt, die in Photoshop einfach durchzuführen sind. Es ist auch kein sehr gutes Argument.

Der einzige Grund, nicht zuerst ein Photoshop-Modell zu erstellen, besteht darin, dass der Designer die Einschränkungen des Codes nicht versteht. Sie möchten dem Kunden niemals eine Zusammenstellung von Dingen geben, die er im Finale nicht haben kann.

Solange die PSD etwas darstellt, das in CSS / HTML ziemlich genau nachgebildet werden kann (angesichts der browser- und medienübergreifenden Einschränkungen), würde ich es in Photoshop (oder InDesign - ich kenne ein paar Designer, die daran arbeiten) tun. Es ist schneller und einfacher, Bilder zu manipulieren. In CSS nachzuahmen, wäre für mich Codierung, bevor ich codierte, wenn das Sinn macht.

Es gibt verschiedene Gründe, das Gestaltungselement vom Codeerzeugungselement getrennt zu halten:

• Der kreative Teil des Designprozesses leidet, wenn Zeit aufgewendet wird, um herauszufinden, wie man verschiedene Dinge in HTML und CSS macht.

• Wenn die Designer und Programmierer unterschiedliche Leute sind, sind sie selten wirklich gut im Programmieren , auch wenn die Designer in HTML und CSS ziemlich gut sind . Das Ergebnis wäre (in unterschiedlichem Maße) ineffizienter Code, der aufgebläht und schwer zu warten ist.

• Wenn Sie mit dem Schreiben des Codes beginnen, bevor Sie eine klare Vorstellung davon haben, wie das Design aussehen soll, treffen Sie uninformierte Entscheidungen zum Erstellen des Codes. Das Risiko besteht darin, dass der Code dadurch schlechter wird und die Entwurfsmöglichkeiten eingeschränkt werden.

• Der HTML- und CSS-Code kann sich bei kleinen Änderungen im Design ziemlich stark ändern, wodurch der Designprozess statischer wird. Sie riskieren, sich nur auf die Änderungen zu beschränken, die im Code leicht vorzunehmen sind.