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


41

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?


2
Mir scheint, Sie brauchen einen besseren Designer. Jemand, der das Web versteht.
boatcoder

Antworten:


15

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.


Interessant - mypsdtohtml.com . Fragen Sie sich, wie HTML aussieht - und ob sie mit Dingen wie Django-Vorlagen-Tags umgehen können.
Steve Bennett

1
@SteveBennett sie haben ein Portfolio :) Warum möchten Sie, dass sie Django-Template-Tags verarbeiten? Sie haben eine PSD, sie geben Ihnen ein HTML. Ich verstehe nicht, was sie noch tun würden. Sie erwarten nicht, dass sie Ihren Code integrieren, oder? ;)
Florian Margaine

1
Ha, haben Sie Ihre durchschnittliche Arbeitsqualität in Ihr Portfolio aufgenommen? :) Wie auch immer, wenn sie ein paar statische Bilder in ein paar statische HTML-Seiten konvertiert haben ... ist es immer noch ein gutes Stück Arbeit, diese in dynamisch generierte Seiten umzuwandeln, sie in verschachtelte Vorlagen zu zerlegen usw. Ich frage mich, welche Arten von Sites Dieser Prozess wäre tatsächlich nützlich für.
Steve Bennett

1
@SteveBennett, ich habe das Gefühl, dass es relativ einfach ist, vollständig erstellte HTML-Seiten in dynamische Vorlagen und Teilbereiche zu zerlegen - es ist im Grunde ein einfacher Code-Refactor. Für die meisten Designs ist es aus Sicht eines Programmierers meiner Meinung nach viel einfacher, das HTML / CSS direkt über die PSDs aufzubauen.
Ben Lee

6

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/ ).


1
Ja, ein Fehler, den wir gemacht haben, war das Bauen nicht hilfreicher Schichten von Skins. 1 Raw Bootstrap, dann 2 kleinere Änderungen, dann 3 eine ziemlich raue Oberfläche für eine Demo, dann 4 die professionelle Oberfläche - die absolut nichts mit Schritt 3 zu tun hatte.
Steve Bennett

Fehler gemacht werden, nur stellen Sie sicher, dass Sie aus ihnen lernen, im Allgemeinen versuchen, die Dinge so einfach wie möglich zu halten, während modular bleiben :)
Eva

3

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.


+1 für "Fokus auf Komponenten, nicht ganze Seiten". Gute Idee.
Steve Bennett

0

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.


-1

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.


1
Dieser Beitrag ist ziemlich schwer zu lesen (Textwand). Hätten Sie etwas dagegen bearbeiten sie in eine bessere Form ing?
gnat

-2

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.


3
Es tut uns leid, dies zu verallgemeinern, aber viele 'Grafikdesigner' kennen HTML und CSS nicht, sie kennen Photoshop, Corel / Illustrator, InDesign, Quark usw. Dies wird durch das OP bestätigt, das besagt, dass das Design als 'Serie' geliefert wurde von statischen Bildern '. Wenn sie HTML und CSS kennen würden, wären sie "Front-End-Entwickler".
Auspuff

In diesem Fall behauptete der Designer, ein bisschen CSS und HTML zu kennen, und drückte Teile des Designs auf diese Weise aus (z. B. #abc Farben), aber nicht genug, um einen großen Unterschied zu machen. Und einige der Begriffe (z. B. "Auffüllen") waren mehrdeutig - nicht ihre CSS-Bedeutung.
Steve Bennett
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.