Der Leitfaden für Webdesigner zum Stylen von Kacheln

Stilkacheln sind ein visueller Verweis auf die Designsprache einer Website (oder eines anderen zu liefernden Designs). Sie helfen dabei, eine Geschichte anhand von Schriftarten, Farb- und Stilsammlungen zu erzählen. In Kombination mit Drahtgittern, Site-Maps und anderen Elementen der Benutzeroberfläche definieren sie diese Geschichte auf zugängliche, kundenfreundliche Weise. In diesem Artikel werde ich erklären, wie Sie das Beste aus dieser praktischen Technik herausholen können.

01. Was enthalten Stilkacheln?

Eine erfolgreiche Stilkachel sollte Beispielelemente für die Benutzeroberfläche enthalten, ein Farbschema definieren, zeigen, wie die Prinzipien des typografischen Designs verwendet werden, und die Beziehung zwischen der Marke des Kunden und der vorgeschlagenen visuellen Lösung demonstrieren. Wenn ein Kunde beispielsweise die Wörter 'zuverlässig' oder 'zuverlässig' verwendet hat, um sein Geschäft zu beschreiben, sollte die Stilkachel dies visuell darstellen.



Stilkacheln bieten vor allem einen Ausgangspunkt für Diskussionen und Erläuterungen zu den Geschäftszielen und persönlichen Vorlieben des Kunden.



02. Wann werden Stilkacheln verwendet?

Stilkacheln bieten einen flexiblen Ausgangspunkt, um zu definieren, wie eine Website aussehen soll, und zwar auf eine zugängliche Weise, die Kunden verstehen können. Betrachten Sie sie als etwas zwischen a Moodboard und ein Modell - sie helfen bei der Definition und Kommunikation, wie ein visueller Stil auf einer Website angewendet wird, einschließlich sowohl Desktop- als auch mobiler Benutzeroberflächen.

Sie können sie anstelle der herkömmlichen ersten Modelle verwenden und Ideen und Feedback vom Kunden generieren, um den endgültigen Entwurfsansatz zu ermitteln. In Samantha Warrens Eine Liste auseinander In einem Artikel beschreibt sie, wie der Stilkachelprozess dazu beiträgt, „die Leidenschaft hinter einer Marke herauszufiltern und Nuggets beschreibender Güte zu enthüllen, während der Kunde mit dem Projekt verbunden wird“.



03. Wie sehen Stilfliesen aus?

Fliesen im Washinton Examiner-Stil 1

Bild mit freundlicher Genehmigung von Phase2 Technology

Fliesen im Washinton Examiner-Stil 2

Bild mit freundlicher Genehmigung von Phase2 Technology

Fliesen im Washinton Examiner-Stil 3



Bild mit freundlicher Genehmigung von Phase2 Technology

Es gibt keine festgelegte Art und Weise, wie Ihre Stilkacheln aussehen müssen. Der Schlüssel besteht darin, sicherzustellen, dass Sie sie nicht mit Moodboards verwechseln, die nicht ausreichen, um eine visuelle Sprache vollständig zu etablieren, und gleichzeitig nicht zu weit in Richtung eines vollständigen Designmodells gehen.

So duplizieren Sie eine Zeile im Illustrator

Schauen Sie sich die obigen Beispiele aus Phase2 Technology an, die während der Arbeit an einer neuen Website für die Website der Washington Examiner 2012 Campaign erstellt wurden.

04. Erfolgreiche Verwendung von Stilkacheln

Sobald Sie die Prinzipien von Stilkacheln verstanden haben, sollten sie genau in Ihren Entwurfsprozess passen. In der Regel werden sie früher im Entwurfslebenszyklus generiert, als Sie möglicherweise Ihre ersten Modelle erstellt haben, und als Ergebnis können Sie schneller Feedback erhalten. Befolgen Sie die vier folgenden Schritte, um Stilkacheln in Ihren Workflow einzufügen:

Hören Sie Ihrem Kunden zu

Stilfliesen 1

Bild mit freundlicher Genehmigung von https://twitter.com/heyitsgarrett

Treffen Sie sich zu Beginn Ihres Projekts mit Ihrem Kunden und sammeln Sie so viele relevante Informationen wie möglich. Einige Designer finden es möglicherweise einfacher, Einzelinterviews mit Stakeholdern durchzuführen, während andere ein Gruppentreffen bevorzugen. mach was für dich funktioniert. Stellen Sie sicher, dass Sie allen wichtigen Entscheidungsträgern und Stakeholdern dieselben Kernfragen stellen.

wie man nass auf nassem Öl malt

Wenn es hilft, können Sie vor dem ersten Projekttreffen einen Fragebogen für Ihre Kunden erstellen. Wenn Sie Schwierigkeiten haben zu wissen, welche Fragen Sie Ihrem Kunden stellen sollten, ist die StyleTil.es Website hebt einige nützliche Ressourcen hervor, einschließlich dieser von Andy Rutledge und Kim Cullen .

Samantha Eine Liste auseinander Der Artikel hilft auch dabei, einige nützliche Fragetechniken zu definieren, um das Beste aus diesen ersten Besprechungen herauszuholen. Entscheidend ist, dass Sie Adjektive sammeln, um die Geschichte, die Ihre Kunden auf ihrer Website darstellen möchten, sinnvoll zu beschreiben.

Verwenden Sie ein Design-Framework, um den Auftrag zu interpretieren

Stilfliesen 2

Bild mit freundlicher Genehmigung von https://twitter.com/heyitsgarrett

Erstellen Sie mit den Adjektiven, die Sie im ersten Schritt aufgezeichnet haben, einen aggregierten Satz, um Themen in der Adjektivsprache zu identifizieren. Wenden Sie diese Themen mithilfe von auf Ihr Design-Framework an Design-Prinzipien wie Harmonie und Einheit, um Entscheidungen über die Elemente des Designs und ihre visuelle Darstellung der Geschichte zu treffen. Vergessen Sie nicht, eine vorhandene Branding-, Handschrift- und Bildsprache zu verwenden, die bereits vorhanden ist, um den Entwurfsauftrag und Ihre Antwort zu kontextualisieren.

Definieren Sie die visuelle Sprache

Stilfliesen 3

Bild mit freundlicher Genehmigung von https://twitter.com/heyitsgarrett

Bestimmen Sie anhand der Informationen, die Sie in Schritt 01 gesammelt haben, und der Ausgabe, die durch Ihre Interpretation in Schritt 02 generiert wurde, übergreifende Themen und beginnen Sie, diese mit Stilmitteln abzugleichen. Generieren Sie für jede visuelle Interpretation, die Sie erstellt haben, eine andere Kachel. Mit den ausgefüllten Stilkacheln können Sie schnell feststellen, ob Sie sich aus Sicht der visuellen Sprache auf derselben Seite wie Ihr Kunde befinden.

Die von Samantha Warren erstellte Website styletil.es bietet Ihnen eine praktische PSD-Vorlage herunterladen und als Ausgangspunkt für die Ausgabe Ihrer Stilkacheln verwenden.

Iterieren Sie, bis der Stil vereinbart ist

Stilfliesen 4

Bild mit freundlicher Genehmigung von https://twitter.com/heyitsgarrett

Arbeiten Sie mit Ihrem Kunden zusammen, um Änderungen an der Stilkachel vorzunehmen. Da Sie außerhalb des Kontexts des endgültigen Website-Layouts iterieren, können Sie sich darauf konzentrieren, dass Ihr stilistischer Ansatz weiterhin die Geschäftsziele und Designziele widerspiegelt.

lerne Bücher für Kinder zu zeichnen

05. Sollten Stilkacheln Modelle ersetzen?

Stilkacheln: Mock-Ups ersetzen

Anstatt zu Beginn eines Designprojekts Modelle zu erstellen, erstellen Sie Stilkacheln, argumentiert Samantha Warren

Zu Beginn eines Designprojekts ist es ein gängiger Ansatz, Seitenmodelle zu erstellen. Wenn Sie jedoch jemals über einen Hybrid verhandeln mussten, der Elemente aus zwei oder mehr Modellen umfasst und Kompromisse beim Designansatz eingeht, müssen Sie Ich bin mit der Frustration vertraut, die die Verwendung von Modellen zu Beginn des Designprozesses mit sich bringen kann.

Aus Kundensicht stellt ein Modell eine vollständige Designlösung dar. Da es jedoch häufig das erste Mal ist, dass Sie Ihre Interpretation des Designauftrags sehen, ist es verständlich, dass sie Elemente identifizieren, die ihnen gefallen, und Elemente, die sie nicht mögen. Es ist auch eine natürliche Schlussfolgerung, dass das Feedback, das Sie erhalten, Sie dazu zwingen wird, unterschiedliche Elemente aus den verschiedenen Modellen zusammenzuführen, was zu den Marken von Samantha Warren führt 'Franken-comp'-Lösung .

Modelle scheinen eine einfache und offensichtliche Möglichkeit zu sein, um zu definieren, wie ein Projekt den Prozess des Übergangs vom Entwurfsauftrag zum Abschluss starten kann. Stilkacheln können jedoch eine intelligentere Methode sein, um Dinge zu erledigen, Feedback zu erhalten und frühzeitig in Zusammenarbeit mit Ihrem Kunden eine visuelle Sprache zu definieren.

Dies kann dazu beitragen, das Gefühl der Frustration und Enttäuschung zu vermeiden, wenn ein endgültiges Modell aus einzelnen Teilen vollständig getrennter Comps zusammengestellt werden muss, und hilft, den Kunden voll und ganz in den Designprozess einzubeziehen.

06. Wo kann man mehr erfahren?

Wörter :: Sam Hampton-Smith

So was? Lese das!

Was denken Sie? Wirst du Stilkacheln ausprobieren oder bleibst du bei traditionellen Seitenmodellen? Teilen Sie uns Ihre Meinung in den Kommentaren unten mit ...