Was ist der richtige Weg, um mit einem Grafikdesigner zu arbeiten? [geschlossen]

Kürzlich haben wir mit einem (vom Kunden arrangierten) Grafikdesigner zusammengearbeitet, um die Skin für eine von uns erstellte Django + Bootstrap-Anwendung bereitzustellen. Der Designer lieferte eine Reihe von statischen Bildern des neuen Layouts sowie ein Dokument, in dem einige technische Merkmale (Schriftgrößen, Farben, einige Abmessungen usw.) beschrieben wurden.

Es stellte sich als unglaublich zeitaufwendig heraus, dies umzusetzen. Obwohl die gesamte Site im Grunde eine Startseite, eine Indexseite und ein halbes Dutzend Detailseiten war, habe ich mindestens 5 Tage damit verbracht, die CSS- und HTML-Änderungen zu implementieren. Also werde ich mich auf die Beine stellen und dies den falschen Weg nennen .

Mein grundlegender Ansatz war:

1. Vergleichen Sie das statische Bild und das aktuelle Rendering und stellen Sie einen Unterschied fest.
2. Ratet mal, welche Änderung in CSS / HTML nötig wäre
3. Mach den Wechsel
4. Fahren Sie mit Schritt 1 fort.

Einige der besonderen Probleme waren, dass ich nicht verstand, dass das Design eine Änderung von 8 auf 12 Spalten enthielt, einige Bilder im falschen Format (.pngs können auf verschiedenen Browser / Plattform-Kombinationen unterschiedlich gerendert werden), Probleme beim Versuch, das Bootstrap-Styling rückgängig zu machen übliches CSS-Wrestling, um ein pixelgenaues Rendering usw. zu erzielen. Und gelegentlich musste ich die HTML-Vorlagen neu organisieren, um ein bestimmtes Verhalten zu erzielen.

Was ist der richtige Weg?

In meiner Firma gibt es einige Leute, die auf diesen Job spezialisiert sind.

Sie sind Designer. Und sie kennen sich mit HTML aus. Sie können eine Brücke zwischen den Designern und den Front-End-Ingenieuren sein. was sie normalerweise sind. Auf diese Weise müssen wir nur ihren HTML-Code integrieren.

Das ist ein harter Job. Es gibt einen Grund, warum Websites wie "PSD to HTML in 24h" gut funktionieren. Die Lösung in unserem Unternehmen besteht darin, sich darauf spezialisieren zu lassen. Für uns ist die Arbeit mit HTML ein Kinderspiel.

Es gibt keine Silberkugel.

Ich bin mir nicht sicher, ob es einen "richtigen Weg" gibt, aber eine einigermaßen effektive Art der Zusammenarbeit mit einem Designer besteht darin, zunächst ein nicht gestyltes System zu erstellen, das Vorlagen verwendet und den einfachen Austausch aller Vorlagen ermöglicht. Sobald Sie eine funktionale, aber nicht gestaltete (oder minimal gestaltete) Benutzeroberfläche haben, übergeben Sie die Ergebnisse dem Designer zum Stylen.

Ein anständiges Beispiel für ein solches Entwurfsmuster wäre jQueryUI ( http://jqueryui.com/ ).

Zunächst muss ich zugeben, dass ich bisher noch nie mit Web-Frontends gearbeitet habe.

Aber ich denke, es ist eine gute Übung für Sie und den Designer, eine Prosa darüber zu schreiben, wie das endgültige Design aussehen soll. Auf diese Weise können Sie sicherer sein, dass es konsistent ist, denn es würde riechen, wenn Sie für jede Seite unterschiedliche Tabellen beschreiben würden. Prose kann Ihre Implementierung vereinfachen, da Sie tatsächlich Code schreiben, der Ihrer Implementierung näher steht als Bilder.

Versuchen Sie auch, den Designer auf Komponenten zu konzentrieren, nicht auf ganze Seiten. Wenn Sie die Komponenten einer Seite richtig zusammenstellen, ist es viel einfacher, sie für die gesamte Seite zu komponieren.

Ich habe HTML / CSS mit mehreren Designern entwickelt und wie bereits erwähnt, gibt es kein "Wundermittel". Die Designer, mit denen ich zusammengearbeitet habe, wussten nicht viel (nichts) über HTML / CSS. Einige von ihnen hatten einige Erfahrung im Webdesign und ich muss sagen, wenn sie über dieses Wissen verfügen, ist es immer einfacher, eine "bessere Website" zu entwickeln, insbesondere wenn es um die Reaktionsfähigkeit einer UX geht.

Ich vermute, dass einige Unternehmen, die eine Website suchen, diese nicht kennen / ignorieren: Jeder kann sagen, dass er ein Grafikdesigner / Webentwickler / Webdesigner / UI-Designer mit Grundkenntnissen (oder gar keiner, ja, das habe ich gesehen) ist. Während "echte" die Extrameile gehen und wartungsfähige, effektive Websites erstellen können. Ich versuche, den Kunden zu "erziehen" und zu erklären, dass Webdesign Fähigkeiten beinhaltet, die Grafikdesigner "nur für den Druck" nicht haben. Wenn dies funktioniert, sende ich den Kunden normalerweise an Designer, mit denen ich bereits gearbeitet habe und mit denen ich einen gemeinsamen Workflow habe.

Das heißt, es kommt oft aus vielen Gründen vor, dass Sie Websites mit Leuten erstellen, die über grafische Fähigkeiten und keine Fähigkeiten zum Webdesign verfügen. In dieser Situation habe die beste Weise , die ich gefunden Codierung Zeit zu sparen und nicht mit undevellopable Layouts am Ende ist in dem Design - Prozess einbezogen werden und kommuniziert mit dem Designer und erklären , was Sie können / nicht tun können und was wäre einfacher / besser Deiner Ansicht nach.

Obwohl dies in manchen Situationen schwierig zu organisieren sein kann, ist es wichtig, dem Kunden und dem Designer zu erklären, dass "wenn Sie glauben, dass Webdesign die Grundlage eines Webprojekts ist, sparen Sie am Ende Zeit, Geld und Kopfschmerzen" Wir freuen uns, am Designprozess teilnehmen zu können, um Zeit, Geld und Kopfschmerzen zu sparen.

Dies ist der Workflow, den ich in den meisten Projekten verfolge:

1. Der Designer erstellt Grafikstandards, wenn diese nicht vorhanden sind (ich werde hier normalerweise nicht einbezogen. Ich versuche nur, den Designer auf webfähige Schriftarten hinzuweisen, z. B .: Google-Schriftarten).
2. Mokup vom Designer gemacht. Ich mache hier mit und arbeite mit dem Designer zusammen, um webkonforme Layouts (insbesondere für reaktionsschnelle) zu erstellen, bevor der Kunde sie sieht .
3. Client validiert Mokup
4. Ich codiere das Mokup

Die Zeit, die ich für die Kommunikation und die Arbeit mit dem Designer aufgewendet habe, wird während des Codierungsprozesses gespart, was zu einem einfacheren, wartbareren und übersichtlicheren Code führt.

Das rettet Sie nicht vor einem glücklichen Designer, der Sie am Freitagabend mit einem sehr hübschen Mokup anruft, das der Kunde gesehen hat und das er jetzt mit diesem Satz sehen möchte: "Hey pall, könnten Sie das für mich kodieren, Frist ist ... gestern! " Dann fällt die ganze Theorie auseinander und wenn Sie in diesem Moment Arbeit suchen, sind Sie das ganze Wochenende über für einen Kopfsprung gut.

Fazit :

Ich denke nicht, dass dies sehr anders ist als jeder Code, der sich auf kein Projekt bezieht. Der beste Weg, mit anderen Menschen zusammenzuarbeiten, ist, mit ihnen zu kommunizieren.

Als Grafikdesigner, der zum Full-Stack-Webentwickler wurde, war dies für mich bisher der einfachste Teil. Ich finde, dass es häufig eine Kommunikationslücke zwischen einem UX-Designteam und den Entwicklern gibt, die das Produkt implementieren. Sicher, Dokumente helfen, aber der Prozess kann sich viel natürlicher anfühlen, sobald Gespräche über Strategien von Angesicht zu Angesicht geführt werden. Ich weiß auch, dass die Zeit für alle knapp ist, aber versuchen Sie, sich während der Design- und Layoutphase einzubringen. Dies kann enorm hilfreich sein, wenn eine Kommunikation zwischen einem Designer und einem Entwickler erforderlich ist. Das Projekt erfordert mehr Teamarbeit und weniger das Szenario "Nun, ich habe meinen Teil getan, über die Mauer geht es". Ich habe es als sehr vorteilhaft empfunden, dass die Design- und Entwicklungsarbeiten parallel ablaufen. Ermutigen Sie das Designteam, Ihnen frühzeitig Drahtmodelle zur Verfügung zu stellen. Auf diese Weise können Sie einen Stilübergang ausführen, der sich ausschließlich mit Layout und Positionierung befasst. Dann, wenn die Gehörlosen reicher und vollständiger werden. Nehmen Sie einen weiteren CSS-Pass für das Erscheinungsbild und andere Stilattribute. Zumindest müssen Sie sich nicht auf alles gleichzeitig konzentrieren.

Ich stehe vor einem ähnlichen Problem. Ich habe die Idee, dass Tools wie Greasemonkey oder Tampermonkey für diesen Zweck verwendet werden können. Erst letzte Woche habe ich um Kommentare zu dieser Idee gebeten: Wie kann man die Benutzeroberfläche einer dynamischen Webanwendung auslagern? , bekam aber keine zufriedenstellenden Antworten.

Mit diesen Tools können Sie einer Seite CSS, HTML und Javascript hinzufügen. In meiner Idee geben Sie dem Designer die URL der Arbeits-Site und erwarten als Gegenleistung Greasemonkey-Skripte. Theoretisch sollten Sie in der Lage sein, diese sehr schnell in die vorhandene Site zu integrieren. Auf diese Weise ist es die Aufgabe des Designers, HTML und CSS zu schreiben und die Website zum Funktionieren zu bringen. Dies erfordert jedoch wesentlich mehr Programmierkenntnisse auf der Designerseite.

Ich weiß, dass diese Idee viel Ausarbeitung erfordert. Aber ich habe das noch nicht ausprobiert und weiß nicht, ob das jemand anderes tut. Es können Probleme bei der Implementierung auftreten.