Hey Designer, treibst du deine Entwicklerkollegen verrückt?
Die Chancen stehen gut, dass Sie einige Gewohnheiten haben, die sich nicht besonders gut in Code übersetzen lassen, und es macht dem Entwickler das Leben schwer, wenn er mit Ihnen an Projekten arbeitet. Willst du ein besserer Kollege (und Freund) sein?
Erfahren Sie, wie Sie besser kommunizieren und gestalten können, damit Entwickler Sie lieben werden. Es wird Projekte beschleunigen und das Arbeitsleben erleichtern. Und es geht auch nicht darum, Süßigkeiten in Meetings zu bringen. Sie können Entwickler dazu bringen, Sie zu lieben, indem Sie geringfügige Änderungen an Ihrer Arbeitsweise vornehmen.
Das größte Problem zwischen Designern und Entwicklern ist, dass sie oft in Blasen arbeiten. Die Personen oder Teams beginnen erst, wenn der erste Entwurf des Entwurfs abgeschlossen ist. Dann gibt es eine Übergabe vom Designer zum Entwickler.
Seufzer.
Das ist einfach nicht die Art zu arbeiten. Designer und Entwickler sollten von Anfang an zusammenarbeiten, um darüber zu sprechen, wie ein Projekt zustande kommt. Während der Designer sich auf Farben und Schriften und Bilder konzentrieren kann, kann der Entwickler einen Einblick in Benutzerfreundlichkeit, Funktion und Leistung geben.
Designer und Entwickler sollten eine gute Vorstellung davon haben, wie die andere Seite aussieht. Designer sollten genug Code und Benutzerfreundlichkeit verstehen, um mit Entwicklern zu sprechen und Herausforderungen zu verstehen; Entwickler sollten ein wenig Kenntnisse der Designtheorie haben, damit sie Vorschläge machen können, wenn Designideen nicht für das Web geeignet sind.
Eines der größten Dinge, die ein Designer tun kann, ist, jedes Mal Dateien auf die gleiche Weise vorzubereiten und zu verpacken.
Wie oft haben Sie ein Photoshop-Dokument mit hunderten von unbenannten Ebenen geöffnet? Geben Sie diesen Dateityp nicht an einen Entwickler weiter. Jede Ebene und jeder Stil - unabhängig davon, welche Software Sie verwenden - sollte entsprechend benannt werden.
Wie oft haben Sie ein Photoshop-Dokument mit hunderten von unbenannten Ebenen geöffnet?
Stile, Farbfelder und Typografie sollten im gesamten Design konsistent sein. (Eine Schaltfläche sollte nicht von Seite zu Seite unterschiedlich aussehen.)
Benennen Sie Dateien und Stile auf die gleiche Weise für jedes Projekt. Gruppieren Sie ähnliche Elemente auf ähnliche Weise und verwenden Sie ein einheitliches Ordnersystem. Auf diese Weise muss der Entwickler nicht neu lernen, wie er Teile und Elemente bei jedem neuen Projekt findet.
Eine der größten Herausforderungen für Designprojekte, die gedruckte und digitale Stücke umfassen, ist das Typografie-Management. Verwenden Sie Desktop-Schriftarten nicht für Druckprojekte für Web- oder App-Designs und gehen Sie nur davon aus, dass sie funktionieren. (Oft nicht.)
Wählen Sie für digitale Projekte Google Fonts für Typografie. Dies bedeutet, dass Sie möglicherweise eine ähnliche Schriftart für das Web finden müssen, die mit der für den Druck verwendeten Schriftart übereinstimmt. (Das ist ok.)
Lassen Sie den Entwickler das nicht für Sie tun. Suchen Sie sich die vergleichbaren Google Fonts aus und verwenden Sie sie von Anfang an. Sie können sogar Druckschriften im Vergleich zu digitalen Schriftarten in Ihrem Styleguide erkennen.
Der Grund dafür ist einfach: Das Einbetten von Schriften kann ein wenig kompliziert werden. Außerdem sind Google Fonts kostenlos und stellen sicher, dass Ihnen keine zusätzlichen Projektkosten entstehen. (Wenn Sie schon dabei sind, können Sie das Gleiche mit Icons tun und ein Paket wie Font Awesome verwenden, mit dem der Entwickler Icons mit CSS formatieren kann. Importieren Sie nicht eine Menge Bilddateien!)
Während wir uns mit dem Thema Bild-Assets beschäftigen, ist es sehr wichtig, Dateien richtig zu exportieren und zu verpacken. Während ein Entwickler alle Bilddateien öffnen und exportieren kann, um ihre Bedürfnisse zu erfüllen, könnten Sie fragen, was sie brauchen, und dies auf dem Weg tun.
Dadurch wird sichergestellt, dass Sie die gewünschten Ausschnitte auf Bildern erhalten, während Sie die Dateien komprimieren, damit die Website schneller geladen werden kann.
Versuche nicht, das alleine zu machen. Fragen Sie den Entwickler, wie Dateien für die beste Verwendung gespeichert, benannt und komprimiert werden sollen.
Es gibt nur so viele Gerätegrößen und Seitenverhältnisse, über die Sie beim Entwerfen von Websites und mobilen Apps nachdenken sollten. Als Designer müssen Sie die Leinwandgröße, die Ränder, die Füllung usw. kennen, um ein Modell zu erstellen, das tatsächlich verwendbar ist.
Sprechen Sie vor dem Zeichnen mit dem Entwickler, um sicherzustellen, dass Sie wissen, wie die Designumgebung aussieht, bevor Sie beginnen. Es gibt nichts Schlimmeres als ein Design, das in Photoshop oder Sketch erstaunlich aussieht und in der Produktion nicht funktioniert.
Sie müssen diese Dinge im Voraus wissen:
Es wurde schon ein paar Mal erwähnt, aber die Kommunikation zwischen Designer und Entwickler ist wirklich der Schlüssel, um all das zu funktionieren. Kommunikation kann Projekte prägen oder brechen, Fristen beeinflussen und das Design und die Funktionalität des Endprojekts beeinflussen.
Kommunikation kann Projekte machen oder brechen
Bring deinen Entwickler zum Mittagessen. Sie kennenlernen. Stellen Sie viele Fragen auf dem Weg. Wenn Sie nicht sicher sind, ob etwas funktioniert oder nicht, fragen Sie einfach. Entwickler sind keine gruseligen Menschen und es ist viel einfacher, eine Frage in einem frühen Stadium des Prozesses zu beantworten, als das gesamte Konzept zu überdenken.
Während Sie mit dem Entwickler sprechen und Fragen stellen, tauchen Sie tiefer ein. Lernen Sie einige Grundlagen der Entwicklung, wenn Sie diese Fähigkeiten nicht bereits in Ihrem Design-Arsenal haben.
Designer, die an digitalen Projekten arbeiten, sollten sich selbst veräppeln:
Sie werden vielleicht nie Code schreiben, aber das Lernen von Entwicklungsprinzipien wird Sie zu einem besseren Designer machen, weil Sie den Wert der Tools und Workflows verstehen.
Der Designprozess erstreckt sich auch auf die Entwicklung. Designer müssen erkennen, dass der Entwickler für den Designprozess genauso wichtig ist wie Sie.
In diesem Sinne erstellen Sie einen "lebendigen" Style Guide, der nicht nur Farben und Schriften, sondern auch Komponenten enthält. Jeder sollte in der Lage sein, auf das Dokument zuzugreifen und es zu aktualisieren, wenn das Projekt zum Leben erweckt wird.
Ein guter Styleguide hilft jedem, der an einem Projekt arbeitet, die Konsistenz mit visuellen Elementen beizubehalten, Kontext für Designentscheidungen bereitzustellen, als ein Punkt der Zusammenarbeit für das Projekt zu dienen und Code zu standardisieren. Der Living Style Guide ermöglicht es jedem, Ideen auszutauschen und während eines Projekts Anleitung zu geben. Es ist nicht nur ein Dokument, das jemand erstellt, bevor ein Design live geht.
Fügen Sie die folgenden Informationen in den Style Guide ein, um das Beste daraus zu machen:
Respektiere das Gitter. Im responsiven Website-Design ist das Raster mehr als nur eine Richtlinie für die Platzierung von Elementen auf dem Bildschirm, es kann auch bestimmen, wo Elemente mit unterschiedlichen Bildschirmgrößen und wie Spalten gestapelt und gemischt werden.
Das Raster kann Ihnen helfen, den Fluss zu gestalten und aufrechtzuerhalten. (Die Herausforderung besteht darin, dass Sie Entwurfsregeln nicht willkürlich durchbrechen können.)
Denken Sie darüber nach: Ihr Design besteht aus vier Inhaltsblöcken, die hintereinander auf einem Vollbildschirm-Monitor über den Bildschirm verteilt sind (mit gleichen Rinnenbreiten). Auf einem Tablett verschieben sich diese Blöcke dann zu zwei Spalten mit zwei Zeilen. Auf einem mobilen Gerät verschieben sie sich zu einer einzelnen Spalte mit vier Zeilen.
Zu verstehen, wie sich das Raster auf die Größe von Objekten auswirkt und wie sich Objekte auf verschiedenen Geräten verschieben, ist wichtig, da es die Art und Weise bestimmen kann, wie Sie den Inhalt entwerfen, den Sie haben. Denken Sie noch einmal an dasselbe Szenario. Was wäre, wenn Sie fünf Inhaltsblöcke hätten? Es würde ein Redesign erfordern, um sicherzustellen, dass Sie eine konsistente visuelle Gliederung erstellen.
Der wahre Schlüssel, um Projekte mit Leichtigkeit zusammenzubringen, ist flexibel zu sein. Designtechniken und Standards für das Web ändern sich ständig. Während einige Projekte es Ihnen erlauben, detailverliebter und unbeweglicher zu bleiben, funktioniert Responsive Design nicht so.
Die goldene Regel, wenn es um die Arbeit mit Entwicklern geht, ist ... sei kein Idiot.
Designer, mit denen man einfach arbeiten kann, verdienen mehr Respekt und haben bessere Beziehungen zu Entwicklern. Dies wird zu besseren und erfolgreicheren Projekten führen. Es sollte selbstverständlich sein, aber zu oft gibt es eine Menge Idiotenverhalten. Fallen Sie nicht in diese Falle.
Sei flexibel, öffne und sprich mit deinem Entwickler. Sie werden dich dafür lieben.