Ich bin Designer bei einer Agentur, die hauptsächlich Webentwicklung "PSD to HTML" durchführt. Ich weiß, dass einige argumentieren können, dass es nicht ideal ist, aber in meiner Agentur funktioniert es so, weil die meisten Layouts genehmigt werden müssen, bevor sie produziert werden. Kunden und Führungskräfte vertrauen den Entwicklern einfach nicht, Dinge ohne Genehmigung zu produzieren.
Der übliche Arbeitsablauf ist:
Dies überlässt das „Dazwischen“ der Layouts den Entwicklern, die es normalerweise herausfinden können, aber manchmal am Ende wackelig aussehen (wie ein Handy bei 320 Pixel, das bei 600 Pixel Müll aussieht, weil 640 Pixel ein Tablet-Haltepunkt ist).
Abgesehen von den Mängeln sind die meisten in unserer Agentur mit diesem Ansatz vertraut, aber es gibt eine Sehnsucht nach etwas, das nähere / pixelgenauere Reaktionserlebnisse erzeugen kann. Ich weiß, dass es nicht 100 % sein wird, aber ich würde hoffen, dass wir uns näher kommen.
Meine Frage ist konkret:
Wie zeige ich als Designer den Entwicklern, was zwischen den Haltepunkten passieren soll, abgesehen davon, dass ich Dutzende von Layouts für alle Bereiche zwischen den Haltepunkten erstelle (kleine Agentur und wir haben kein Produktionspersonal)?
Ich bin offen für Techniken in Photoshop oder die Verwendung anderer Software, wenn es hilft, solange es uns erlaubt, Layouts vor der Entwicklung zur Genehmigung durch den Kunden zu erstellen, und immer noch ein intuitives Dokument erstellen kann, das Entwickler in HTML kodieren können (wie eine mehrschichtige PSD mit Typhinweisen und so weiter).
Danke!
Ehrlich gesagt sind diese Zwischengrößen mehr Platzhalter als alles andere. Ich würde gegen die "Standards" (iPhone 5 und 6/Samsung Galaxy) entwerfen und alles in der Mitte hängt davon ab, ob möglicherweise der Haltepunkt selbst angepasst wird (dh ob das Tablet auf 600 Pixel statt auf 640 Pixel herunterfährt). Wenn es ein Dazwischen gibt und Sie es wirklich auf eine bestimmte Weise aussehen lassen müssen, würde dies einen neuen Haltepunkt erfordern. Daran führt kein Weg vorbei. Ob es dem Entwickler etwas vorzuschreiben ist, das der Kunde nie sieht, weil alles in der Entwicklung erledigt ist, oder Sie ein Layout erstellen.
Ich würde empfehlen, ein offenes Gespräch mit den Entwicklern Ihrer Agentur darüber zu führen, wie sie Anleitungen erhalten möchten (anstelle von unzähligen Layouts). Als persönliches Beispiel empfehlen wir, dem responsiven 12-Spalten-Raster für Desktop-Layouts in Photoshop zu folgen, wobei zu verstehen ist, dass mobile Layouts von dem verwendeten CSS-Framework gesteuert werden, in unserem Fall von Bootstrap. Kreative bereiten also das Desktop-Layout vor, vielleicht sogar ein paar mobile Status für eine einzelne Vorlage, kreative und Entwickler überprüfen es gemeinsam, um sicherzustellen, dass alle die Regeln für die Abstände und die Neuanordnung / Größenänderung von Inhalten für Mobilgeräte und die Codierung kennen. Sobald der erste Build abgeschlossen ist, durchläuft er eine interne Überprüfung mit Agenturkreativen, die spezifisches Feedback zu allen von ihnen identifizierten Layoutproblemen geben können.
Dies funktioniert ziemlich gut für benutzerdefinierte Website-Builds, hält kreative Stunden vernünftig und gibt Entwicklern ausreichende Anleitung, um einen Build auszuführen.
Um den Prozess zu rationalisieren und das Hin und Her zwischen Designern und Entwicklern zu minimieren, empfehlen wir außerdem, dass Kreative ihre PSD-Dateien durch Web Preflight laufen lassen , um potenzielle Codierungsprobleme vor Beginn der Entwicklung zu identifizieren.
Marco
Max Tokmann