Ich arbeite als UX/UI-Designer für die Websites meiner Firma. Nachdem ich die Designs erstellt habe, sende ich die Mockups an Webentwickler, die sie implementieren. Es ist ein bisschen kooperativer als das, aber das ist im Grunde der Prozess.
Da es seit langem mein Werkzeug der Wahl ist, verwende ich hauptsächlich Illustrator. Besonders mit der Fähigkeit von Google Drive, AI-Dateien anzuzeigen, schienen die Entwickler mit dem, was ich ihnen übergebe, zufrieden zu sein, und da ich ziemlich nah bei ihnen sitze, stehe ich für Fragen zur Verfügung.
Ich bin jedoch immer frustrierter darüber, wie oft Dinge auftauchen, wie Unterschiede in der Darstellung von Farben zwischen Illustrator und Browsern, Illustrators völlige Missachtung von Pixeln (ja, ich weiß, dass es Problemumgehungen gibt, aber ich kämpfe immer dagegen an ), die Zeit, die benötigt wird, um alles richtig zu redlinieren, und im Allgemeinen, wie unterschiedlich Illustrator über ein Design denkt und wie Browser es tun.
Was sind einige gute Workflows (+ Tools), die Ihre Designs näher an das bringen, was tatsächlich implementiert wird, und es Entwicklern wirklich einfach machen, genau zu wissen, wie es im Web aussehen soll?
Obwohl ich meine Designs in HTML+CSS erstellen kann , lohnt sich der Zeitaufwand für die meisten Dinge normalerweise nicht.
UPDATE (8 Monate später): Ich habe ein paar Dinge in meinem Prozess geändert, die anscheinend geholfen haben. 1) Umstieg auf Sketch – diese App „denkt“ wie das Web, daher sind meine Designs viel näher an dem, was sie implementieren werden. 2) Begann mit Redlining-Tools (z. B. Spectr) sowie Zeplin – ich mag das wirklich. 3) Ich habe begonnen, Entwickler durch Mini-Designstudios und Diskussionen in meinen Prozess einzubeziehen – dies hat wahrscheinlich die positivste Wirkung auf unsere Kommunikation gehabt.
Wenn Sie frustriert darüber sind, wie Ihre Designtools Designs im Vergleich zum Browser rendern, dann besteht die Lösung darin, mehr Zeit mit dem Entwerfen im Browser zu verbringen.
Die Realität ist, dass das Web mit HTML, CSS und JS erstellt wird. Es ist nicht mit Photoshop oder Illustrator erstellt. Also am besten so früh wie möglich in das eigentliche Medium einsteigen.
In Ihrem Fall haben Sie einen großen Vorteil:
Ich sitze ziemlich nah bei ihnen und stehe für Fragen zur Verfügung
Ich würde vorschlagen, dass Sie weniger liefern und mehr zusammenarbeiten. Mit anderen Worten: Verbringen Sie weniger Zeit mit der Erstellung von .ai-Dateien und mehr Zeit damit, neben den Entwicklern zu sitzen. Dadurch können Sie mehr von Ihrem Design „im Browser“ erledigen, wo es auf die Details ankommt.
Mein Unternehmen verwendet derzeit ein Illustrator-Markup-Plugin namens Specctr - es ist nicht perfekt und erfordert immer noch ein wenig TLC, aber wenn Sie es nicht bereits verwenden, sparen Sie viel Zeit beim Erstellen von UI-Spezifikationen.
Es gibt ein paar negative Seiten – das Laden des Plugins ist langsam und stürzt Illustrator gelegentlich ab (achten Sie darauf, vor dem Öffnen zu speichern) , und es kann nicht gut eine Reihe von Objekten auf einmal markieren. Im Großen und Ganzen ist es aber viel einfacher, als alles von Hand zu machen.
Scott