Share
Ich werde eine Designtheorie teilen, an der ich seit einigen Jahren in meinem eigenen Workflow arbeite: Pixel-perfekte Modelle. Für manche mag das offensichtlich sein, aber es ist ein Grundsatz, der für meinen eigenen Designprozess jetzt so entscheidend ist, dass ich sagen würde, dass dies die einflussreichste Idee war, die mir in über 10 Jahren Design präsentiert wurde.
Diese Theorie zu übernehmen ist nicht nur ein weiterer Schritt im Designprozess, sondern eine Perspektive, die die Revolution des Geistes verändert und die die Qualität jedes Designs, an dem Sie jemals arbeiten, zweifellos verbessert. Möchten Sie ein besserer Webdesigner sein und größere Projekte annehmen? Weiter lesen.
Auf der SXSW 2008 wurde ich vor einigen Jahren zum ersten Mal mit der Idee von "pixelgenauen" Design-Modellen vertraut gemacht. Michael Lopp (Autor mehrerer großartiger Designbücher und leitender technischer Manager bei Apple) war bei einer Sitzung mit dem Titel "Great Design Hurts" anwesend. Seine Rede war urkomisch und ebenso profanistisch wie eine Bill Maher-Episode. Zu seinen unglaublich einsichtigen Vortragspunkten gehörte ein kleines Juwel, das erklärte, wie jeder Designer sich auf die Idee von pixelgenauen Comps konzentriert. Das heißt, dass jeder Comp um das Unternehmen herumgereicht wird so präzise, so makellos, so detailliert Dass der gelegentliche Betrachter den Unterschied zwischen dem Design Comp und einem vollständig codierten Screenshot nicht erkennen kann.
… Jeder Comp wird im Unternehmen herumgereicht so präzise, so makellos, so detailliert Dass der gelegentliche Betrachter den Unterschied zwischen dem Design Comp und einem vollständig codierten Screenshot nicht erkennen kann
"Das war's!", Dachte ich, "die Idee, die meinen Designprozess revolutionieren wird". Und das tat es auch.
Sehen Sie, um jedes Design-Projekt mit der Absicht zu beginnen, es bis zum letzten Pixel zu verfolgen, ändert sich fast jeder Aspekt des Design-Prozesses. Auch wenn Sie nicht jedes Mal wirklich durchkommen, Die Vorstellung, das Design mit dieser Absicht begonnen zu haben, wird dramatische Auswirkungen auf das Endprodukt haben.
Nach ein oder zwei Monaten waren die PSDs sauberer, meine Dateien wurden schneller, meine Projekte "schleiften" sich in den späteren Phasen nicht mehr und ich verbrachte weniger Zeit mit Kunden, um den Unterschied zu erklären zwischen einem groben Entwurfsmodell und dem fertigen Produkt. Oh, und ich wurde mehr eingestellt, was eine gute Messgröße ist, die von jeder Maßnahme verfolgt werden kann.
Also, was macht ein Pixel perfekt comp? Im Wesentlichen wird ein Mockup entworfen (insbesondere ein Web-Mockup, aber es kann alles sein), als ob Sie es überhaupt per Code gestylt hätten. Wenn Sie überhaupt mit CSS / HTML gearbeitet haben, wissen Sie, was ich meine. Es enthält:
Lassen Sie mich auf diese Idee eingehen. Wenn die meisten Designer ein Projekt beginnen, ist das Design so, als wäre es Nur ein Modell. Das Wissen, das einige Entwickler oder Qualitätssicherungsspezialisten später einbringen und alles genau abstimmen, begrenzt, wie viel Zeit und Mühe sie in die einzelnen Entwürfe investieren.
Was als Nächstes passiert, ist für die meisten Designer eine Selbstverständlichkeit: Den Kunden wird gesagt, dass Bilder und Symbole "nur Platzhalter" sind. Lorem Ipsum-Text wird anstelle von echtem Inhalt verwendet. Selbst die Navigation und andere wichtige Elemente der Benutzeroberfläche werden in den meisten Fällen bis unmittelbar vor dem Start mit "Füllstoff" -Inhalten ausgetauscht.
"Perfekt" bedeutet, dass jedes Element eines Design Comps ist genau so, wie Sie es im endgültig programmierten Produkt beabsichtigen.
Mit Margen und Polsterung bedeutet dies, dass sie über das gesamte Site-Design hinweg konsistent sind. Wenn jeder Seitenleistenblock in einem Design einen Rand von 10 Pixeln haben soll, entwerfen Sie ihn auf diese Weise jedes Mal, wenn ein Seitenleistenblock vorhanden ist.
Mit Schriftart und Farbe bedeutet dies eine konsistente Verwendung auf der gesamten Site. Gestalten Sie jedes Schriftstück so, als wäre es mit einem HTML-Element verknüpft (dh alle H1s sind immer 18px, fett, Georgia mit schwarzer Farbe). Machen Sie keine Abweichung - wie mir einer meiner Lieblings-Projektmanager einmal erzählte, sollte es auf einer Seite nicht mehr als 3 oder 4 Schriftstile geben, es sei denn, Sie haben einen verdammt guten Grund, dies zu tun. Wenn Sie eine bestimmte Farbe Rot als Hervorhebungsfarbe auf der Website verwenden, stellen Sie sicher, dass sie an jeder Stelle genau Rot ist (es sei denn, Sie haben einen Grund dafür, dass es anders ist)..
Grenzen, HR-Regeln und Hintergründe sollten ebenfalls konsistent sein. Ich habe einige Comps gesehen, bei denen jede Grenze und HR unterschiedliche Farbnuancen derselben Farbe haben. Dies führt letztendlich dazu, dass Comps schlampig und unprofessionell aussehen. Für ein ungeübtes Auge ist es leicht zu erkennen, wann sich ein Entwurf halb fertig fühlt… auch wenn diese Person nicht genau den Finger darauf legen kann, was falsch ist.
Verwenden Sie schließlich Symbole, Bilder, Titel und Text, die der Realität so nahe wie möglich kommen. Wenn Sie eine Website umgestalten, verwenden Sie den bereits veröffentlichten Inhalt anstelle von Lorem Ipsum. Wenn der Client angibt, dass er neue Symbole oder Bilder für die Neugestaltung verwendet, fragen Sie nach diesen und fügen Sie sie in das Design ein.
Denken Sie daran, wir bemühen uns, Design-Comps zu erstellen, die so präzise sind, dass sie wie Screenshots der tatsächlichen, live codierten Implementierung aussehen.
Bevor ich jedoch einen weiteren Schritt mache, wollen wir die offensichtlichen Gegenargumente ansprechen. Kosten. Zeit. Anstrengung. Frustration… das Argument, das sich bereits in Ihrem Kopf formt, könnte sich so anhören:
"Wenn ich die Zeit verbringe, um jedes einzelne Entwurfsmodell, das durch meine Hände geht, akribisch detailliert zu beschreiben, werde ich dreimal so viel Zeit für das Design aufwenden ... ganz zu schweigen von der Tatsache, dass der Kunde das Design nicht mag, es geht alles in den müll ".
Ein faires Argument, das sicherlich seine Vorzüge hat, aber es reicht nicht aus, diesen Artikel zu entgleisen. Erinnern Sie sich, das Ziel ist nicht, jedes Design-Modell wirklich perfekt zu machen (das wäre verrückt und teuer). - Ziel ist es, Ihre Herangehensweise an das Design zu ändern. Tatsache ist, dass der pixelgenaue Ansatz in vielen Fällen nicht wirklich praktisch ist… aber das sollte Sie davon abhalten, danach zu streben.
Untersuchen wir die Vorteile von pixelgenauen Comps und kehren wir zu diesem Argument zurück.
Es zwingt dich, besser organisiert zu sein. Mehr Organisation bedeutet weniger Zeit für das Wrestling mit Ihren PSDs und mehr Zeit für das Design.
Kein Erklären mehr für Kunden. Wenn Sie einen Comp perfekt entworfen haben, das heißt, alles ist an dem Ort, an dem Sie es beabsichtigt haben, müssen Sie den Kunden nicht erklären, dass das, was sie im Design Comp sehen, nicht das ist, was im Endprodukt enthalten ist.
Keine Erklärungen mehr für Entwickler. Dies ist besonders praktisch, wenn Ihr Kunde Ihre Design Comps an ein Entwicklungsteam in Indien schickt, in dem langwierige erklärende E-Mails einfach nicht übersetzt werden. Wenn ihre einzige Aufgabe darin besteht, EXAKT das zu codieren, was sie auf dem Comp sehen, verringert dies die Wahrscheinlichkeit, dass sie Designspezifikationen falsch interpretieren. Und zum Teufel ist es für die fließenden Programmierer, mit denen ich arbeite, noch einfacher. Sie können sich auf das Programmieren konzentrieren und versuchen nicht herauszufinden, ob ich 10px-Margen oder 15px-Margen will.
Weniger Zeit in der Qualitätssicherung. Wenn Sie sich nicht auskennen, sind Sie bei der Qualitätsanalyse die letzten Designrunden, bei denen Sie mit einem groben „vorgeschlagenen“ Design beginnen und es für die endgültige Präsentation vorbereiten. Für Entwickler ist dies auch der Name der letzten "Pre-Launch" -Runde, in der jedes Detail, Funktionsfehler und verirrte Pixel ausgeglichen werden. Sicher, in kleinen Projekten durchlaufen Sie möglicherweise niemals einen QA-Zyklus. Bei größeren Projekten, die über das Budget verfügen, gehen Sie einfach nicht von einem Projekt weg, bis dieser Schritt abgeschlossen ist und die bereinigte Quelldatei übergeben wird.
Glückliche Art Directors / Kunden. Wenn Ihr Art Director (oder was auch immer sein Titel ist) in der Lage ist, weniger Zeit mit dem Auswählen der Details Ihrer Comps zu verbringen und mehr Zeit mit wertvollen Anweisungen zu geben, sinkt der Blutdruck (und der Ihre) bei Design-Review-Meetings unweigerlich.
Professionellere Endergebnisse. Ja, Ihre Comps werden professioneller aussehen. Da Sie jetzt weniger Zeit damit verbringen, schlampige Modelle zu erklären oder zu entschuldigen, können Sie mehr Zeit damit verbringen, Ihre Rate zu erhöhen…
Als Antwort auf das Argument gegen pixelgenaue Comps möchte ich diese abschließenden Punkte ansprechen.
Ihre Comps sollten bereits perfekt sein. Es ist das Endziel eines Designprojekts, und wenn Sie nicht irgendwann dorthin gelangen, kann es einfach daran liegen, dass Sie es gar nicht erst wollten.
Es dauert weniger Zeit als die Alternative. Wählen Sie eine aus: Verbringen Sie 6 Stunden sorgfältig ein Web-Modell und erhalten Sie schnell eine Kundengenehmigung ODER Verbringen Sie 4 Stunden mit einem Design und 4 weiteren, um dumme Fehler zu beheben, bevor Sie den Kunden dazu bringen, ein Design abzumelden.
Bearbeitungen und Revisionen laufen auf diese Weise schneller ab, nicht langsamer. Wenn Sie Ihr Modell mit dieser Mentalität entworfen haben und Ihre PSD entsprechend organisiert ist, werden alle nachfolgenden Änderungen, die der Client anfordert, blitzschnell ausgeführt.
Ausgezeichnete Modelle bedeuten weniger Entwicklungszeit. Dadurch sparen Sie (oder Ihr Kunde) bares Geld. Dies ist der Grundmieter von Rapid-Prototyping - machen Sie es richtig, bevor es in einen teuren Entwicklungszyklus geht.
Es ist die größte Lücke zwischen kleinen Projekten und großen Budget-Konzerten. Die einfache Tatsache ist, dass ein Personalvermittler, der Freelancer sucht, um an seinen Projekten teilzunehmen, die "Aufmerksamkeit fürs Detail" als die wichtigste Indikation dafür verwendet, ob ein freiberuflicher Designer in der Lage ist, ein großes Webprojekt in Angriff zu nehmen. Wenn Sie ein Portfolio voller schlampiger Comps haben, wird es nur noch schwieriger zu beweisen, dass Sie vertrauenswürdig und fähig sind.
Ich habe es schon gesagt, aber es ist mein letzter Punkt. Sie werden nicht wirklich Pixel-Perfektion auf jedem Comp erreichen und das ist in Ordnung. Es gibt eine Zeit und einen Ort für den Rough-Sketch-Comp und Sie (und Ihr Kunde) werden wissen, wann es ist. Diese Theorie der "pixelgenauen Kompositionen" erfordert nicht zu 100% 100% der Ergebnisse, sondern gibt nur die Grundeinstellung vor, die Sie zu jedem Projekt einbringen. Nach jahrelanger Arbeit in meinen eigenen Projekten kann ich sagen, dass es den Schmerz wert ist.
!
Accentsconagua