Cyber Monday Sale 40% off unlimited courses & creative assets! 40% off unlimited assets! Save Now
Advertisement
  1. Web Design
  2. Workflow

Style Tiles: Eine Alternative zu Full Design Comps

by
Read Time:19 minsLanguages:
This post is part of a series called All About Style Guides.
Maintain Consistency With a Website Style Guide
Making the Most of Style Tiles for Leaner Design

German (Deutsch) translation by Katharina Grigorovich-Nevolina (you can also view the original English article)

Wenn Sie wie ich sind, werden Sie zustimmen, dass die anfängliche Entwurfsphase eines Projekts zeitaufwändig und frustrierend sein kann und die Erwartungen der Kunden beim ersten Genehmigungsmeeting selten erfüllt. Was wäre, wenn es einen besseren Weg gäbe, sich den Dingen zu nähern? Mit Style Tiles gibt es das neueste Kind im Design-Methodik-Block.

Style Tiles are a new approach to improving communication with your client and making the initial design phase of a project more efficient and effectiveStyle Tiles are a new approach to improving communication with your client and making the initial design phase of a project more efficient and effectiveStyle Tiles are a new approach to improving communication with your client and making the initial design phase of a project more efficient and effective

Einige sagen, dass die Tage der Erstellung vollständiger Modelle für Webdesign-Projekte in Photoshop vorbei sind, wenn nicht sogar tot. Andere sagen, dass das Entwerfen im Browser nicht alles ist, worauf es ankommt. Aber sind wir uns alle voraus? Vielleicht ist es nicht das Werkzeug, das wir uns ansehen sollten, sondern die gesamte Art und Weise, wie wir eine neue Site entwerfen und den Kundengenehmigungsprozess verwalten.

In diesem Tutorial werden wir uns Style Tiles genauer ansehen - eine neue Art, über die ersten Entwurfsphasen nachzudenken, ein Entwurfsansatz, der von der unnachahmlichen Samantha Warren geprägt und konzipiert wurde. Wir werden uns ansehen, was sie sind, warum Sie sie verwenden sollten, und Sie durch den Prozess führen, wie Sie eine Stilkachel für Ihr nächstes Projekt erstellen und implementieren.

[Mit Style Tiles können Sie]... Kunden die Auswahl der Benutzeroberfläche präsentieren, ohne in mehrere Photoshop-Modelle investieren zu müssen. - Samantha Warren

Bereit mehr zu erfahren? Lassen Sie uns anfangen.

Was sind Style Tiles?

In seiner einfachsten Form ist eine Stilkachel eine einseitige Sammlung allgemeiner Elemente, einschließlich Farben, Typografie, Texturen, Muster und Designmerkmale. Wenn ein Innenarchitekt seinem Kunden ein Moodboard mit Farbchips, Stoffen und Zeitungsausschnitten präsentieren kann, kann der progressive Webdesigner seinen Stakeholdern eine Reihe von Style Tiles präsentieren.

Das Wichtigste an Style Tiles ist, dass sie keine wörtliche Darstellung des Erscheinungsbilds der Website darstellen. Stattdessen helfen sie dabei, die Stimmung, den Ton und das Gefühl einer Website basierend auf dem zu definieren, was Sie in Ihren ersten Kickoff-Meetings vom Kunden gelernt haben.

Eine andere zu berücksichtigende Sache ist, dass der Style Tile-Ansatz kein Framework, definierter Prozess oder gar ein Werkzeug ist. Stattdessen basieren Style Tiles auf einer Reihe von Richtlinien, Techniken und Ansätzen, mit denen Sie sich auf das konzentrieren können, was für das Design wirklich wichtig ist (zumindest in der Anfangsphase eines neuen Projekts). Laden Sie zunächst eine psd-Vorlage herunter, um den Einstieg zu erleichtern. Sie können Ihre Style Tiles jedoch auch an Ihren eigenen Arbeitsablauf und Ihre kreative Ästhetik anpassen.

Beispiele

Schauen wir uns einige Beispiele an, um zu zeigen, wie Style Tile präsentiert werden können. Ich habe zwei Websites rückentwickelt, um Ihnen zu zeigen, wie ihre Style Tilein den ersten Entwurfsphasen ausgesehen haben könnten:

tutsplus.com

Diese Stilkachel basiert auf der kürzlich überarbeiteten Tuts+ Premium-Website.

A Style Tile Representation of Envatos Tuts Premium WebsiteA Style Tile Representation of Envatos Tuts Premium WebsiteA Style Tile Representation of Envatos Tuts Premium Website

Wie Sie sehen können, wurde die Essenz der Tuts+ Premium-Site in dieser Stilkachel gut erfasst. Wir haben einige der Gestaltungselemente des orangefarbenen Hauptpräsentationsabschnitts der Website aufmerksam definiert und das Gefühl und Aussehen der Blog-Beiträge (d. h. Der Tutorial-Listen) vermittelt.

Da die Stilkachel nicht für eine bestimmte Bildschirmgröße, Ausrichtung oder etwas anderes als "digital" angezeigt wird, kann man sich leicht vorstellen, wie die Site auf jedem Gerät von einem Desktop über ein Tablet bis zu einem Smartphone aussehen würde.

styletil.es

Zum Spaß hier meine Interpretation, wie die Website http://styletil.es selbst in der ersten Entwurfsphase ausgesehen haben könnte:

A Style Tile Representation of the Style Tiles WebsiteA Style Tile Representation of the Style Tiles WebsiteA Style Tile Representation of the Style Tiles Website

Achten Sie besonders auf den Adjektivbereich dieser Stilkachel. Alle Farben, Typografieauswahlen und Designtexturen sprechen in irgendeiner Weise für diese Adjektive und stellen sicher, dass die Stilkachel sowohl in Bezug auf Design als auch in Bezug auf Ton und Markenbotschaft konsistent ist.

Allgemeine Hauptmerkmale

Schauen wir uns einige der gemeinsamen Ähnlichkeiten dieser beiden Stilkacheln an:

  1. Kundenlogo: Nur weil es sich nicht um wörtliche Modelle handelt, heißt das nicht, dass wir sie nicht dem jeweiligen Kunden zuordnen können. Das ist schließlich eine professionelle Kundenpräsentation!
  2. Mögliche Farben: Eine Auswahl der wichtigsten Farben. Sie sind nicht auf fünf Farben beschränkt. Sie können auch so viele oder so wenige Farben verwenden, wie das Projekt erfordert.
  3. Texturen: Verwechseln Sie Texturen nicht mit Photoshop-Mustern. In diesem Bereich werden einige wichtige Designelemente ausgewählt, die eine bestimmte Botschaft stark vermitteln. Stellen Sie sich Texturen eher als Gestaltungselemente vor. Im obigen Beispiel für Stilkacheln sehen Sie, dass ich den Rand eines Menübands, eine numerische Überschrift und einen Teil einer Abbildung ausgewählt habe, die alle eine bestimmte Botschaft vermitteln, die die gesamte Entwurfsrichtung des Projekts anspricht.
  4. Adjektive: Der wohl wichtigste Teil der Stilkachel, der Abschnitt Adjektive, ist eine Zusammenfassung der wichtigsten Wörter, die den Zweck des Kunden, der Marke oder der Website beschreiben. Wir werden etwas später darüber sprechen, wie man zu diesen Adjektiven kommt.
  5. Typografie: Verwenden Sie diesen Abschnitt, um die potenziellen Überschriften, Absatztexte und Links der Site zu definieren.
  6. Schaltflächen: Beide Websites versuchen, den Besucher der Website dazu zu bringen, eine bestimmte Aktion auszuführen: Bei der Tuts+-Site muss der Benutzer dazu gebracht werden, sich beim Premium-Programm anzumelden. Bei Stilkacheln muss der Benutzer die Photoshop-Vorlage herunterladen. Daher sind in beiden Fällen die Schaltflächen "Handlungsaufforderung" auf der endgültigen Website sehr wichtig. Bei anderen Websites, bei denen Schaltflächen nicht erforderlich sind (z. B. ein Blog), können Sie diesen Abschnitt weglassen und durch etwas anderes ersetzen.
  7. Hintergrund: Obwohl dies für eine Stilkachel nicht erforderlich ist, habe ich mich dafür entschieden, die Hintergrundmuster beider Sites in die Stilkachel selbst zu übersetzen. Auch hier sind die Hintergrundmuster an beiden endgültigen Standorten wichtige Gestaltungselemente. Planen Sie, das Design einfach zu halten? Behalten Sie einfach den Hintergrund der Stilkachel als neutrale Farbe bei.
  8. Version: Jede Stilkachel sollte den Projektnamen und die Versionsnummer tragen. Auf diese Weise können Sie problemlos mit dem Kunden über das Design sprechen und Verwirrung vermeiden (z. B. "Ich mag die Farben ab Version 1, bevorzuge jedoch die Schaltflächen ab Version 3").

Wie bereits erwähnt, folgen Stilkacheln keinem festen Format. In der Tat können Sie so gut wie alles einbeziehen - solange es in irgendeiner Weise für das Designkonzept von grundlegender Bedeutung ist. Sie können beispielsweise den Abschnitt 'Schaltflächen' löschen und durch einen benutzerdefinierten Videoplayer, ein Widget mit einer Beschreibung oder einige Formularelemente ersetzen.

Fassen Sie zusammenfassend die allgemeine Richtung der Site in Ihrer Stilkachel zusammen, aber Sie können Ihre kreativen Muskeln spielen lassen.

Warum sollte ich Style Tiles verwenden?

Style Tiles sind nicht nur eine weitere Best-Practice-Methode, um Staub am unteren Rand Ihres Webdesign-Werkzeugkits zu sammeln. Sie haben eine Reihe von fantastischen Vorteilen für Sie und den Kunden, wenn sie korrekt implementiert werden:

Reduzieren Sie die Komplexität und klären Sie die Ziele

Style Tiles halten vor allem die anfängliche Entwurfsphase und den Kundengenehmigungsprozess einfach.

Wenn Kunden nach dem ersten Meeting ein voll ausgestattetes Design-Comp erhalten, besteht die Gefahr, dass der Wald vor lauter Bäumen fehlt. Anstatt dass der Kunde sich auf kleine Designmerkmale einlässt ("hmmm... Ich denke, die sozialen Schaltflächen müssen etwas "poppiger" sein "), Kunden können sicher darüber sprechen, wie die allgemeine Designrichtung ihre Ziele widerspiegelt (" Mir gefällt, wie diese Farben ein Gefühl des Vertrauens vermitteln, das perfekt für mein Acme-Widget ist ").

Denken Sie daran, unsere Kunden sind im Allgemeinen keine Designer, wissen aber oft, was sie mögen, auch wenn es nur allgemein ist. Stilkacheln sind ein perfektes Werkzeug, mit dem Laien über das gesamte Design sprechen können, ohne sich auf Dutzende einzelner Designelemente zu häufen, die schnell verwirrend und überwältigend werden können.

Zeit sparen

Pixel-perfekte Modelle brauchen Zeit. Echtzeit. Stunden und Stunden der Zeit.

Sie müssen nicht nur all diese Kosten in Ihre endgültige Rechnung einbeziehen, wenn Sie drei separate Kompositionen erstellen, das sind zwei Drittel Ihrer Zeit, die direkt in den Ordner "Nicht verwendete Ressourcen" auf Ihrer Festplatte verschoben werden - ganz zu schweigen von zwei Drittel des Geldes des Kunden für diesen Teil der endgültigen Rechnung gehen ebenfalls in Rauch auf.

Mit Style Tiles hingegen ist es ein sehr schneller Prozess, verschiedene Versionen zu iterieren und ebenso schnell Änderungen im laufenden Betrieb vorzunehmen. Durch die Verwendung von Style Tiles können Sie den Entwurfsprozess optimieren, die Dynamik in den frühen Phasen des Projekts aufrechterhalten und auf Änderungsanforderungen in Minuten statt in Stunden reagieren.

Um das ins rechte Licht zu rücken, haben die beiden obigen Beispiel-Stilkacheln jeweils etwa 20 Minuten gedauert (und hätten jeweils 15 Minuten gedauert, wenn ich meine Layers besser benannt hätte).

Halten Sie Ihre eigenen Standards hoch

Ich spreche hier nur aus Erfahrung - jeder Designer ist anders -, aber wenn Sie drei separate Photoshop-Mocks erstellen, ist es nicht ungewöhnlich, einen zu erstellen, der perfekt, ziemlich gut und ziemlich durchschnittlich und weit davon entfernt ist deine beste Arbeit. Sie präsentieren die drei dem Kunden und versuchen, sie auf Ihrem Flaggschiff-Design zu verkaufen. Ausnahmslos wählen sie das Design aus, das Ihnen am wenigsten gefällt. t auch im besten Interesse des Kunden.

Selbst wenn Sie drei perfekte Kompositionen erstellen, auf deren Codierung Sie stolz wären, ist es leicht, kreativ zu blinken. Mit Style Tiles können Sie schnell mit verschiedenen Designkonzepten experimentieren und dem Kunden echte Designalternativen anbieten, die auf den definierten Anforderungen basieren.

Halten Sie die ersten Entwürfe für Geräteunabhängig

Okay, nehmen wir an, Sie verwenden keine Stilkacheln und haben beschlossen, dem Kunden eine Reihe vollständiger Design-Kompositionen zu präsentieren.

Womit präsentieren Sie sie? Eine 960px breite Desktop-Version? Was ist mit einer iPad-Version? Vergessen Sie auch nicht eine iPhone-Version. Oh, aber stellen Sie sicher, dass Sie auch Kindles, Blackberrys und die über 500 mobilen Android-Geräte ansprechen, die in den letzten Jahren hergestellt wurden. Und was ist, wenn sie fragen: "Wie wird das auf meinem Lieblings-Palm-Piloten aussehen, den ich hatte, seit Bush Präsident war?"

Style Tiles implizieren weder Abmessungen noch Geräte. nur dass das Design digital sein wird. - Samantha Warren

Der Zugriff auf das Web erfolgt heute buchstäblich auf hunderte Arten. Jedes Gerät verfügt über einen eigenen Satz von Haltepunkten, Macken und Funktionen.

Eine bessere Möglichkeit, sich der anfänglichen Entwurfsphase des Projekts zu nähern, besteht darin, das Gerät vollständig aus der Gleichung herauszunehmen. Das Tolle an Style Tiles ist, dass sie völlig geräteunabhängig sind.

Natürlich müssen Sie sich später im Projekt mit der Reaktion und/oder Anpassung der Website an verschiedene Geräte befassen. In den ersten Phasen wird jedoch nur das Wasser getrübt, um eine allgemeine Designrichtung mit der endgültigen Funktionalität der Website zu kombinieren .

Wie erstellen Sie eine Style Tiles?

Nachdem Sie nun erfahren haben, was Stilkacheln sind, und die Vorteile ihrer Verwendung als Alternative zu vollständigen Designkompositionen kennen, sind Sie sicher bereit, Photoshop zu öffnen und mit der Erstellung Ihrer ersten Stilkacheln zu beginnen .

Whoa da, Cowboy. Halten Sie Ihre Pferde! Bevor wir anfangen, Pixel zu verschieben, müssen wir die Bedürfnisse und Ziele des Kunden identifizieren und in Konzepte übersetzen, die es uns ermöglichen, fundierte Entwurfsentscheidungen zu treffen.

Der vierstufige Prozess zum Erstellen einer Stilkachel lautet wie folgt:

  • Hören Sie mal zu
  • Interpretieren
  • Definieren
  • Iterieren

Sind Sie Verwirrt? Seien Sie nicht. Schauen wir uns jeden Schritt im Detail an.

Hören Sie mal zu

Unabhängig davon, ob Sie sich persönlich mit Ihrem Kunden zusammensetzen, über Skype mit ihm sprechen oder sich auf E-Mails verlassen, müssen Sie immer einige Zeit und Mühe aufwenden, um sein Geschäft und seine Website-Ziele kennenzulernen. Wenn Sie dies nicht tun, gelangen Sie auf eine dunkle, beängstigende Straße voller Annahmen und Vermutungen, die fast immer ein erfolgloses Endergebnis und einen unglücklichen Kunden gewährleisten.

Listening is the first step of the Style Tiles processListening is the first step of the Style Tiles processListening is the first step of the Style Tiles process

Bei diesem Entdeckungsprozess geht es um viel mehr als nur darum, sie nach ihren Lieblingsfarben und den anderen Websites zu fragen, die sie im Internet mögen. Während wir leicht ein ganzes Tutorial über effektive Kundenfragen haben könnten, sind hier einige Entdeckungsstrategien, um Ihnen den Einstieg zu erleichtern:

Verstehen Sie ihren Markt, ihr Geschäft und ihr Produkt

Jeder liebt es, darüber zu sprechen, was ihm wichtig ist.

Wenn Sie einen Kunden dazu bringen, über sein Geschäft zu sprechen, fällt es Ihnen oft schwer, ihn zum Stoppen zu bringen. Je mehr sie zu diesem Zeitpunkt über ihr Geschäft sprechen, desto besser ist das Endergebnis.

Hier sind einige erste Fragen, die Ihren Kunden dazu bringen sollen, über sein Geschäft zu sprechen:

  • Wer ist Ihr typischer Kunde? Welche Art von Person möchten Sie Ihre Website besuchen?
  • Wer sind deine Konkurrenten?
  • Was unterscheidet Sie von Ihrer Konkurrenz?
  • Wo passt Ihr Produkt/Ihre Dienstleistung auf den Markt (z. B. ist es das billigste/teuerste/hochwertigste/innovativste usw.)
  • Was ist Ihren Kunden wichtig? (Versuchen Sie, mehr als "einen niedrigen Preis" zu erzielen - dies ist fast nie das einzig Wichtige für einen Endbenutzer eines Produkts oder einer Dienstleistung).
  • Welche Aktion (en) soll ein Besucher Ihrer Website ausführen? (z. B. Abonnieren Sie einen Newsletter/kaufen Sie ein Produkt/folgen Sie dessen Twitter-Konto/usw.)

Holen Sie sich aus der Box, um direkt auf ihre Bedürfnisse zu kommen

Sobald Sie einige der grundlegenden Fragen aus dem Weg geräumt haben und ein besseres Verständnis für deren Geschäft haben, ist es Zeit, etwas tiefer zu graben und die Bedürfnisse Ihres Kunden wirklich zu identifizieren und einige Schlüsselkonzepte auszuwählen, die Ihnen bei der Erstellung helfen eine Designrichtung im nächsten Schritt.

Während es Menschen oft schwer fällt, abstrakte Konzepte und Gefühle in Aussagen zu übersetzen, sprechen die Menschen gerne in Metaphern - vorausgesetzt, Sie stellen die richtigen Fragen.

Hier sind einige Fragen, die Sie stellen können, um loszulegen:

  • Wenn Sie eine Berühmtheit auswählen könnten, die Ihre Marke unterstützt, wer wäre das? Was spiegelt Ihre Marke/Ihr Produkt/Ihre Dienstleistung wider?
  • Wenn Ihr Produkt/Ihre Dienstleistung/Ihre Marke eine Automarke wäre, welche wäre das?
  • Wenn Ihr Produkt/Ihre Dienstleistung eine Person wäre, welche Fernsehsendungen würde sie/er sehen? Welche Musik würde er/sie hören?
  • Wenn Ihr Produkt/Ihre Dienstleistung eine Person wäre, welche Art von Wörtern würde ihr bester Freund verwenden, um sie zu beschreiben? (z. B. "freundlich", "stark"/"lustig" usw.)

Legen Sie den richtigen Ton für das Projekt fest

Sobald Sie den Kern des Kundenprojekts erreicht haben, ist es an der Zeit, einen Grundton für das Gesamtdesign festzulegen.

Es gibt verschiedene Möglichkeiten, dies zu tun. Ein effektiver Ansatz besteht jedoch darin, den Kunden eine interaktive Umfrage ausfüllen zu lassen. Mit ein wenig kreativem HTML, CSS und Javascript können Sie eine Reihe von Schiebereglern erstellen, mit denen der Kunde seine Marke zwischen verschiedenen Dichotomien positionieren kann:

Survey your client to establish the correct tone of voice for the project moving forwardSurvey your client to establish the correct tone of voice for the project moving forwardSurvey your client to establish the correct tone of voice for the project moving forward

Wenn ich mir dieses Beispiel anschaue, denke ich bereits an ein lustiges, farbenfrohes, retro-inspiriertes Design für unseren fiktiven Kunden. Welche Designkonzepte fallen Ihnen sofort ein, wenn Sie dies sehen?

Interpretieren

Sobald wir unseren Kunden befragt haben, ist es Zeit, die Essenz des Projekts, des Produkts und der Bedürfnisse des Kunden für seine Website herauszuarbeiten. Der Zweck dieses Teils des Prozesses besteht darin, eine Auswahl beschreibender Wörter zu definieren, die den Abschnitt "Adjektive" unserer Stilkachel füllen.

Interpret Your Clients Statements To Arrive at a Set Of AdjectivesInterpret Your Clients Statements To Arrive at a Set Of AdjectivesInterpret Your Clients Statements To Arrive at a Set Of Adjectives

Schauen wir uns ein Beispiel an. Hier sind einige Aussagen, die unser fiktiver Kunde Ihnen während der Entdeckungsphase sagt:

  • "Mein Produkt ist kompliziert und meine Kunden versuchen normalerweise, mehr zu lernen, ohne verwirrter zu werden als sie es bereits sind."
  • "Meine Konkurrenten sind alle sehr ernst. Ich möchte, dass meine Website ganz anders ist als ihre langweiligen Websites."
  • "Ich möchte, dass sich meine Besucher auf meiner Website wohl fühlen und sich nicht von dem Produkt einschüchtern lassen."
  • "Meine Kunden sind hauptsächlich junge Frauen, die nicht viel Geduld für Marketing-Sprache oder Jargon haben."

Aus diesen Aussagen besteht Ihre Aufgabe darin, ein einzelnes Adjektiv zu identifizieren, das die Schlüsselbotschaft dessen beschreibt, was sie Ihnen gesagt haben.

Hier sind vier Adjektive, mit denen wir die obigen Aussagen zusammenfassen können, um auf den Punkt zu bringen, was der Kunde wirklich zu uns sagt:

  • Auf den Punkt gebracht
  • Spaß
  • Zugänglich
  • Auf dem Boden geblieben

Nachdem wir diese Gruppe von Adjektiven definiert haben, sind wir an einem Punkt angelangt, an dem wir tatsächlich damit beginnen können, Wörter in Design zu übersetzen. Obwohl Sie die oben genannten Adjektive möglicherweise etwas anders interpretieren als ich, ist es sehr wahrscheinlich, dass unsere Entwürfe gemeinsame Elemente aufweisen - oder zumindest können wir uns gegenseitig beschreiben, warum wir die von uns getroffenen Entscheidungen getroffen haben .

Definieren

Puh! Alles geredet? Gute Nachricht: Wir haben die Grunzarbeit gemacht, jetzt können wir Spaß haben. Sobald wir die gesamte Entdeckungsphase auf vier bis sechs Dynamit-Adjektive reduziert haben, ist es Zeit, Ihre erste Stilkachel zu erstellen.

Define Your Style Tile in PhotoshopDefine Your Style Tile in PhotoshopDefine Your Style Tile in Photoshop

Gehen Sie zu http://styletil.es und laden Sie die Photoshop-Vorlage herunter (oder erstellen Sie Ihre eigene).

Die nächsten Schritte liegen ganz bei Ihnen. Werde kreativ! Ich gehe davon aus, dass Sie bereits ein ziemlich gutes Verständnis von Photoshop haben, sodass ich Sie nicht durch jeden einzelnen Schritt führen werde (die Photoshop-Vorlage lässt sich sehr einfach anpassen), aber die Hauptidee besteht darin, eine Reihe von Designelementen zu erstellen (Farben, Texturen, Schaltflächen, Typografie usw.), die mit den Adjektiven sprechen, zu denen Sie im vorherigen Schritt gelangt sind.

Möchten Sie genauer untersuchen, wie Sie ein Farbschema erstellen und Typografiepaarungen für Ihre Stilkachel (und vieles mehr) auswählen? Hier sind einige Webdesigntuts + Artikel, die Sie überprüfen können:

Iterieren

Sobald Sie Ihre erste Stilkachel erstellt haben, ist es Zeit, die Tafel zu bereinigen und zu wiederholen. Es gibt keine festgelegte Anzahl von Versionen, die Sie erstellen sollten, aber drei bis vier Stilkacheln für jedes Projekt sind wahrscheinlich eine gute Balance zwischen der Erforschung ausreichender unabhängiger Designkonzepte und der Überforderung Ihrer Kunden mit zu vielen Optionen.

Iterate Different Versions of Your Initial Style TileIterate Different Versions of Your Initial Style TileIterate Different Versions of Your Initial Style Tile

Denken Sie daran, dass Ihre Adjektive für jede Stilkachel gleich sein können, aber auch unterschiedlich sein können - insbesondere, wenn Sie Schwierigkeiten hatten, die Bedürfnisse Ihrer Kunden aufzuschlüsseln, oder wenn sie Ihnen verschiedene Alternativen vorgestellt haben, die Sie als Teil der Kachel untersuchen können Befragungsphase.

Zum Beispiel haben wir aus unseren Entdeckungsfragen aus Schritt zwei möglicherweise drei separate Sätze von Adjektiven gefunden, die alle ähnlich, aber unterschiedlich genug sind, um unterschiedliche Ansätze für das Design unseres fiktiven Kunden zu verfolgen:

Alternative Adjektivsätze

  • Version Eins: Auf den Punkt gebracht, zugänglich, lustig, bodenständig.
  • Version Zwei: Skurril, einzigartig, informativ, humorvoll
  • Version Drei: Freundlich, vertraut, entspannt, vertrauenswürdig

Wie Sie sehen können, können diese drei Adjektivsätze alle zu einer sehr unterschiedlichen Designrichtung führen. Hier kommen Style Tiles voll zur Geltung. Mit ein paar schnellen Farb- und Typografieänderungen können Sie auf einfache Weise drei völlig unterschiedliche Iterationen in sehr kurzer Zeit erstellen.

Präsentieren von Style Tiles für den Kunden

Stellen Sie sicher, dass Ihr Kunde weiß, was ihn erwartet

Nachdem Sie Ihre Stilkacheln erstellt haben, ist es Zeit, sie Ihrem Kunden zu präsentieren. Wie bei jedem Schritt dieses Prozesses müssen eine Reihe von Strategien implementiert werden, um sicherzustellen, dass Sie die besten Ergebnisse erzielen und Ihr Kunde sicher ist, mit den nächsten Schritten des Projekts fortzufahren.

Ihr Kunde sollte nicht erwarten, dass Sie eine vollständige Design-Komposition präsentieren, nur damit Sie Ihre Stilkacheln herausziehen können. Zeigen Sie Ihren Kunden am Ende der Befragungsphase Beispiele für andere von Ihnen erstellte Stilkacheln und erläutern Sie deren Wert für die Festlegung der Entwurfsrichtung der Website.

Stellen Sie sicher, dass Ihr Kunde vor dem Präsentationstreffen weiß, was Sie ihm zeigen werden!

Vorbereiten der Präsentation auf PhotoDune

Lassen Sie Ihren Kunden frei über Ihre Designkonzepte sprechen, aber stellen Sie sicher, dass Sie sie nicht zu leicht vom Haken lassen. Ermutigen Sie Ihre Kunden, ihre Aussagen zu erweitern. Mit ein wenig effektiver Befragung können wir leere Aussagen in außergewöhnliche Aussagen verwandeln:

  • "Ich mag das, weil ich denke, dass Sie die lebenslustige Natur meiner Marke eingefangen haben."
  • "Ich mag das nicht, weil es mich zu sehr an die Website meines Konkurrenten erinnert und ich mein Geschäft von anderen abheben möchte."
  • "Dieses Design muss mehr platzen, indem es eine leuchtend rosa Farbe hinzufügt, die meine Kunden alle lieben."
  • "Ich mag diese burgunderfarbene Farbe nicht, weil sie mein Produkt alt und stickig erscheinen lässt."
  • "Können Sie dafür sorgen, dass es eher wie die Website von Apple aussieht, weil meine Kunden alle technologieorientierte Early Adopters sind?"

Denken Sie daran, dass es sehr wahrscheinlich ist, dass Ihr Kunde, während Sie den ganzen Tag über Websites entwerfen, nicht viel Erfahrung damit hat. Seien Sie geduldig, helfen Sie Ihrem Kunden, seine Aussagen zu klären, führen Sie ihn zu wertvollen Aussagen, aber treffen Sie niemals Annahmen, die auf den allgemeinen, direkten Reaktionen Ihres Kunden auf Ihre Arbeit beruhen.

Was ist der nächste Schritt?

Stilkacheln sind eine bessere Alternative zu vollständigen Design-Kompositionen in den frühen Phasen des Projekts (dh während des Kundengenehmigungsprozesses). Je nachdem, wie Sie arbeiten möchten, kann ein vollständiges Modell der nächste Schritt für das Projekt sein, wenn dies der Fall ist Teil Ihres etablierten Arbeitsablaufs.

Nachdem Sie die Richtung des Designs definiert haben und der Kunde eine Ihrer Style Tile-Versionen abgemeldet hat, können Sie sicher sein, dass Ihre Komposition den Erwartungen Ihres Kunden viel näher kommt, als wenn Sie direkt mit dem Öffnen von Photoshop begonnen hätten nach dem ersten Treffen. Das Modell ist nicht nur viel näher an der Musterung, es müssen auch nicht mehrere Iterationen des Designs erstellt werden - diese Arbeit wurde bereits mit unseren Stilkacheln durchgeführt.

Je nachdem, wie Sie sich Ihrer Kundenarbeit nähern möchten, sind dies alles Beispiele für den Workflow für den Rest des Projekts:

  • Style Tile > Drahtmodell > Modell > Code
  • Style Tile > Drahtmodell > Code
  • Style Tile > Modell > Code
  • Style Tile > Code

Schlussfolgerung

Vielen Dank, dass Sie bei mir geblieben sind und alles über das Was, Wie und Warum von Style Tiles gelesen haben. Ich hoffe, Sie haben es genauso genossen, etwas über sie zu lernen, wie ich es genossen habe, darüber zu schreiben, wie ich sie Ihnen vorstelle!

Style Tiles sind eine revolutionäre Herangehensweise an den Designprozess und helfen Ihnen und Ihrem Kunden, selbst aus dem kompliziertesten und kompliziertesten Projekt eine klare Richtung für die Website zu finden.

Was sind deine Gedanken? Verwenden Sie in Ihrem nächsten Projekt Style Tiles? Wir würden uns freuen, Ihre Gedanken in den Kommentaren zu hören!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.