Web-Mockup für Dev

„Was ist der Prozess/Workflow“

Es gibt keinen. Oder besser gesagt, es gibt nicht nur einen. Es wird von Projekt zu Projekt, von Team zu Team unterschiedlich sein.

Gemeinsame Prozesse, die ich gesehen habe.

1. Senden Sie eine große PSD an Dev

Der Designer verbringt seine ganze Zeit mit Photoshop und sendet die Datei dann an den Entwickler, um herauszufinden, wie er sie in HTML umwandeln kann. Dies kann funktionieren, wenn der Designer keine Entwicklungsfähigkeiten hat und der Entwickler ein gutes Auge für Design hat, um die richtige Entscheidung darüber treffen zu können, welche Teile der PSD Bilder oder Text oder CSS usw. sein müssen.

2. Erstellen Sie Mockups, Wireframes und Styleguides

Dies ist wie Option 1, wird aber tendenziell in viel größeren Teams verwendet. Ein Designteam erstellt verschiedene detaillierte Dokumentationen (Photoshop-Dateien, Wireframes, Prototypen, Styleguides usw.) und sendet sie dann an die Entwicklungsteams, um daraus zu bauen.

3. Designer sind die Entwickler und/oder Entwickler und Designer arbeiten Seite an Seite

In einigen Fällen ist der Webdesigner ein fähiger Frontend-Entwickler. Oder der Webdesigner ist im selben Team wie der Frontend-Entwickler. In diesem Szenario gibt es viel weniger formale Dokumentation und viel mehr Zusammenarbeit, und das Design wird im tatsächlichen Code, in dem es geliefert wird, optimiert.

und viele andere...

Es gibt natürlich so viele Workflows wie Webdesign- und Entwicklungsteams, aber ich denke, die meisten werden in eines der oben genannten 3 Lager fallen.

Option 1 funktioniert gut in sehr kleinen Teams.

Option 2 funktioniert selten. Aber es ist eher die „Norm“ in Fortune-500-Unternehmen, die stark in ausgelagerte Entwicklung und Design investieren.

Option 3 macht mir am meisten Spaß und ich habe das Gefühl, dass sie die solidesten Endergebnisse liefert.

Als Entwickler kann ich sagen, dass Sie nur eine Datei an einen Entwickler senden und sicherstellen müssen, dass der Entwickler über die entsprechende Software verfügt, um diese Datei wie Photoshop oder andere zu öffnen.

Über Schriftarten:

Wenn Sie eine Hauptschrift verwenden, können Sie diese natürlich beschreiben, aber wenn der Entwickler eine PSD hat, kann ein Entwickler sie ohne Ihre Kommentare überprüfen, falls die Ebene als Text und nicht nur als Grafikebene dargestellt wird.

Über #Farben

Wie im Fall von Schriftarten denke ich, dass es für Entwickler einfacher ist, sie mit Photoshop zu überprüfen.

Hier nur eine Anmerkung, die mir bei der Arbeit aufgefallen ist. Beispielsweise erlaubt Photoshop Designern, einige Ebenen mit Float-Werten wie 33,33 pt usw. zu erstellen. Wenn wir jedoch beispielsweise von einer Website oder einer mobilen Anwendung sprechen, können wir beispielsweise eine Ebene mit einer Breite von 100 px nicht in 3 Teile teilen, nur wenn ein Teil dies tut ein zusätzliches Pixel haben, wie 33, 33, 34 oder eine andere Reihenfolge dieser Werte. Seien Sie sich dieser Dinge bewusst.

Ich stimme Matrosov Alexander zu, und da ich hier ein Neuling bin, kann ich das nicht kommentieren, aber etwas hinzufügen.

Viele Webdesigner haben unterschiedliche Arbeitsabläufe. Meiner Erfahrung nach ist es am besten, den Entwickler zu fragen, was seine bevorzugte Dokumentation wäre. Wenn ich beispielsweise als Webentwickler nicht direkt an UI-Entscheidungen beteiligt sein kann, sehe ich gerne Storyboards/Miniaturansichten, wie Elemente interagieren oder animiert werden. Die meisten Designer, mit denen ich zusammenarbeite, erstellen diese bereits, also machen sie einfach Screenshots oder Bilder davon und senden sie mit dem Design.

Als jemand, der mit einem Entwickler zusammenarbeitet, denke ich, dass es wirklich nützlich wäre, die PSD in Creative Cloud mit ihnen zu teilen (und ich meine nicht nur, dass ich Produktmanager bei Adobe bin), weil Sie nicht nur den Leuten ermöglichen können, die PSD herunterzuladen Sie können aber auch alle Schriftarten/Schriftgrößen, die Farben, die verwendeten Farbverläufe auf einen Blick sehen und Messungen innerhalb des Browsers verwenden, um Werte (und den Text) abzurufen und von da an besser zusammenzuarbeiten.

Hier finden Sie weitere Informationen dazu: http://helpx.adobe.com/creative-cloud/help/extract-css-images-psd-files.html

Wir befinden uns in einer ähnlichen Situation und arbeiten mit PSDs, um High-Fidelity-Websites zu erstellen, und unser Ansatz bestand darin, eine App zu erstellen, um Layouts visuell zu markieren, um schnell eine umfassende Spezifikation zu erstellen. Wir sind immer noch am Feintuning, aber wenn jemand interessiert ist, teile ich gerne einen Link, sobald er fertig ist - ich versuche, eklatante Eigenwerbung hier in Schach zu halten.