Share
Wenn Sie wie ich sind, stimmen Sie zu, dass die anfängliche Entwurfsphase eines Projekts zeitaufwändig, frustriert sein kann und die Erwartungen der Kunden beim ersten Genehmigungsgespräch selten erfüllt. Was wäre, wenn es eine bessere Annäherung gab? Mit Style Tiles gibt es das neueste Kind im Design-Methodologie-Block.
Einige sagen, dass die Tage, in denen vollständige Modelle für Webdesign-Projekte in Photoshop erstellt werden, im Sterben liegen, wenn nicht sogar tot. Andere sagen, dass das Design-in-the-Browser nicht alles ist, worauf es ankommt. Aber kommen wir uns alle voraus? Vielleicht ist es nicht das Tool, nach dem wir suchen sollten, sondern die gesamte Vorgehensweise, mit der wir einen neuen Standort entwerfen und den Genehmigungsprozess für Kunden verwalten.
In diesem Tutorial werfen wir einen Blick auf Style Tiles - eine neue Art, über die anfänglichen Entwurfsphasen nachzudenken, einen Designansatz, der von der unnachahmlichen Samantha Warren geprägt und konzipiert wurde. Wir werden einen Blick darauf werfen, was sie sind, warum Sie sie verwenden sollten, und Sie durch den Prozess der Erstellung und Implementierung einer Stilkachel für Ihr nächstes Projekt führen.
[Mit Stilkacheln können Sie]… Präsentieren Sie Ihren Kunden die Schnittstellenauswahl, ohne in mehrere Photoshop-Modelle investieren zu müssen. - Samantha Warren
Bereit mehr zu lernen? Lass uns anfangen.
In seiner einfachsten Form handelt es sich bei einer Stilkachel um eine Sammlung einzelner Elemente, darunter Farben, Typografie, Texturen, Muster und Designelemente. Wenn ein Innenarchitekt seinen Kunden ein Moodboard mit Farbchips, Stoffen und Zeitungsausschnitten vorlegen kann, kann der progressive Webdesigner seinen Stakeholdern eine Reihe von Stilkacheln präsentieren.
Das Wichtigste an Style Tiles ist, dass sie nicht wörtlich dargestellt werden, wie die Site aussehen wird. Stattdessen helfen sie dabei, die Stimmung, den Ton und das Gefühl einer Website zu bestimmen, basierend auf dem, was Sie in Ihren ersten Kick-Off-Meetings vom Kunden gelernt haben.
Dabei ist zu beachten, dass der Style Tile-Ansatz kein Framework, ein definierter Prozess oder gar ein Werkzeug ist. Stilkacheln basieren stattdessen auf einer Reihe von Richtlinien, Techniken und Ansätzen, mit denen Sie sich auf das konzentrieren können, was im Entwurf wirklich wichtig ist (zumindest in den Anfangsphasen eines neuen Projekts). Laden Sie zunächst eine psd-Vorlage herunter, die Ihnen den Einstieg erleichtern soll. Sie können jedoch Ihre Style Tiles an Ihren eigenen Workflow und Ihre kreative Ästhetik anpassen.
Schauen wir uns ein paar Beispiele an, um zu zeigen, wie Style Tiles präsentiert werden können. Ich habe zwei Websites zurückentwickelt, um Ihnen zu zeigen, was ihre Stilkacheln sind könnte haben wie in den ersten Designphasen ausgesehen:
Diese Stilkachel basiert auf der kürzlich überarbeiteten Tuts + Premium-Site.
Wie Sie sehen können, wurde die Essenz der Tuts + Premium-Site in dieser Stilkachel schön eingefangen. Wir haben einige der Designelemente des Hauptteils der orangefarbenen Präsentation der Website sorgfältig definiert und das Gefühl und das Aussehen der Blogbeiträge (d. H. Die Auflistung der Lernprogramme) vermittelt..
Da das Style Tile nicht für eine bestimmte Bildschirmgröße, Ausrichtung oder sogar für etwas anderes als "digital" angezeigt wird, ist es leicht vorstellbar, wie die Site auf jedem Gerät aussehen würde, vom Desktop über das Tablet bis zum Smartphone.
Um ein wenig Spaß zu haben, hier meine Interpretation der Website von http://styletil.es anfangs beim Entwurf:
Achten Sie besonders auf den Adjektivabschnitt dieser Stilkachel. Alle Farben, Typografieauswahl und Designtexturen sprechen in gewisser Weise mit diesen Adjektiven und stellen so sicher, dass die Stilkachel sowohl in Bezug auf das Design als auch in Bezug auf Ton und Markenbotschaft konsistent ist.
Schauen wir uns ein paar Gemeinsamkeiten dieser beiden Stil-Kacheln an:
Wie bereits erwähnt, haben Style Tiles kein festes Format. In der Tat könnte man so gut wie alles einschließen - solange dies für das Designkonzept von grundlegender Bedeutung ist. Sie können beispielsweise den Bereich "Schaltflächen" löschen und durch einen benutzerdefinierten Videoplayer, ein Widget mit einer Beschreibung oder Formularelemente ersetzen.
Zusammenfassend können Sie die gesamte Ausrichtung der Site in Ihrem Style Tile erfassen, aber Sie können Ihre kreativen Muskeln spielen.
Stilfliesen sind nicht einfach nur ein weiterer „Wahnsinn“ -washy-Best-Practice-Ansatz, wenn Sie die Zeit haben, um Staub am unteren Rand Ihres Webdesign-Toolkits zu sammeln. Sie haben eine Reihe von großartigen Vorteilen für Sie und den Kunden, wenn sie richtig implementiert werden:
Style Tiles hält vor allem die anfängliche Entwurfsphase und den Kundengenehmigungsprozess einfach.
Wenn Kunden nach dem ersten Meeting ein voll ausgestattetes Design-Comp präsentiert wird, besteht die Gefahr, dass der Wald für die Bäume verfehlt wird. Anstatt dass der Kunde an kleinen Designmerkmalen hängen bleibt ("hmmm ... Ich denke, die sozialen Schaltflächen müssen etwas" poppier "sein), können Kunden zuversichtlich darüber sprechen, wie die allgemeine Designrichtung ihre Ziele widerspiegelt (" Ich mag, wie. " Diese Farben geben ein Gefühl des Vertrauens, das perfekt für mein Acme-Widget ist. ").
Denken Sie daran, dass unsere Kunden in der Regel keine Designer sind, aber oft wissen, was ihnen gefällt, auch wenn dies nur in allgemeiner Form geschieht. Stilfliesen sind ein perfektes Werkzeug, um den Laien die Möglichkeit zu geben, über das gesamte Design zu sprechen, ohne Dutzende einzelner Gestaltungselemente aufzustocken, die schnell verwirrend und überwältigend werden können.
Pixelgenaue Modelle brauchen Zeit. Echtzeit. Stunden und Stunden der Zeit.
Sie müssen nicht nur all diese Kosten in Ihre Endabrechnung einkalkulieren. Wenn Sie drei separate Comps erstellen, gehen Sie zu zwei Dritteln Ihrer Zeit direkt in den Ordner "Unbenutzte Ressourcen" auf Ihrer Festplatte Drittel des Kundengeldes für diesen Teil der Endabrechnung gehen ebenfalls in Rauch auf.
Mit Style Tiles hingegen ist es ein sehr schneller Prozess, um verschiedene Versionen zu durchlaufen, und ebenso schnell Änderungen vorzunehmen. Die Verwendung von Stilkacheln bedeutet, dass Sie den Entwurfsprozess rationalisieren können, die Dynamik zu Beginn des Projekts aufrechterhalten können und innerhalb von Minuten statt Stunden auf Änderungsanforderungen reagieren können.
Um dies in die richtige Perspektive zu bringen, haben die beiden Beispielstile oben jeweils etwa 20 Minuten gedauert (und ich hätte je 15 Minuten gebraucht, wenn ich meine Ebenen besser benennen würde)..
Ich spreche hier nur aus Erfahrung - jeder Designer ist anders -, aber wenn Sie drei separate Photoshop-Vorlagen erstellen, ist es nicht ungewöhnlich, einen zu erstellen perfekt, einer, der ist ziemlich gut und einer, der ist sehr durchschnittlich, und weit weg von deiner besten Arbeit. Sie präsentieren die drei dem Kunden und versuchen, sie auf Ihrem Flaggschiff-Design zu verkaufen, und sie wählen immer dasjenige, das Ihnen am wenigsten gefällt… und jetzt stecken Sie fest, eine Website zu programmieren, auf die Sie nicht stolz sind und die auch nicht so ist. Im besten Interesse des Kunden.
Selbst wenn Sie drei perfekte Comps erstellen, auf die Sie stolz sein könnten, ist es einfach, kreativ zu blinzeln. Mit Style Tiles können Sie schnell mit verschiedenen Designkonzepten experimentieren und echte Design-Alternativen für den Kunden basierend auf den definierten Anforderungen bieten.
Okay, lassen Sie uns sagen, dass Sie keine Stilkacheln verwenden, und Sie haben sich entschieden, dem Kunden einen Satz voller Design-Comps zu präsentieren.
Womit präsentierst du sie? Eine 960px breite Desktop-Version? Was ist mit einer iPad-Version? Vergiss auch keine 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 produziert wurden. Und wie sieht es aus, wenn sie fragen "Wie wird das auf meinem Lieblings-Palm-Pilot aussehen, den ich hatte, seit Bush Präsident war?"
Stilfliesen bedeuten weder Abmessungen noch Gerät. Nur dass das Design digital ist. - Samantha Warren
Auf das Web wird heute auf hunderte von Wegen zugegriffen, wobei jedes Gerät seine eigenen Haltepunkte, Macken und Funktionen hat.
Eine bessere Annäherung an die anfängliche Entwurfsphase des Projekts besteht darin, das Gerät vollständig aus der Gleichung herauszunehmen. Das Tolle an Style Tiles ist, dass sie vollständig geräteunabhängig sind.
Natürlich müssen Sie später im Projekt darauf eingehen, wie die Website auf verschiedene Geräte reagiert und / oder sich an unterschiedliche Geräte anpasst. In den Anfangsphasen wird das Wasser jedoch nur getrübt, um eine allgemeine Designrichtung mit der endgültigen Funktionalität der Website zu kombinieren.
Nachdem Sie nun gelernt haben, was Style Tiles sind, und Sie die Vorteile ihrer Verwendung als Alternative zu vollständigen Design-Comps bereits verkauft haben, sind Sie sicher, dass Sie bereit sind, Photoshop zu öffnen und Ihre erste Style Tile zu erstellen.
Whoa da, Cowboy. Halte deine Pferde! Bevor wir mit dem Pixelspielen beginnen, müssen wir die Bedürfnisse und Ziele des Kunden ermitteln und in Konzepte umsetzen, die es uns ermöglichen, fundierte Designentscheidungen zu treffen.
Die vier Schritte beim Erstellen einer Stilkachel sind wie folgt:
Verwirrt? Sei nicht Lassen Sie uns jeden Schritt im Detail betrachten.
Egal, ob Sie sich persönlich mit Ihrem Kunden zusammensetzen, über Skype mit ihnen sprechen oder sich auf E-Mail verlassen, Sie müssen immer Zeit und Mühe aufwenden, um ihr Unternehmen und die Ziele Ihrer Website kennenzulernen. Andernfalls führt Sie ein dunkler, unheimlicher Weg von Annahmen und Vermutungen durch, der fast immer ein erfolgloses Endergebnis und einen unglücklichen Kunden garantiert.
Bei diesem Entdeckungsprozess geht es um mehr als nur darum, sie nach ihren Lieblingsfarben zu fragen und welche anderen Websites sie im Internet mögen. Während wir leicht ein komplettes Tutorial über effektive Kundenbefragungen haben könnten, finden Sie hier einige Erkundungsstrategien, um Ihnen den Einstieg zu erleichtern:
Jeder spricht gerne darüber, was für ihn wichtig ist…
Sobald ein Kunde über sein Geschäft spricht, wird es oft schwierig, ihn zum Stoppen zu bringen. In der Tat ist es umso besser für das Endergebnis, je mehr sie über ihr Geschäft reden.
Hier sind ein paar erste Fragen, um Ihren Kunden dazu zu bringen, über sein Geschäft zu sprechen:
Sobald Sie einige der grundlegenden Fragen gelöst haben und ein besseres Verständnis für ihr Geschäft haben, ist es an der Zeit, ein wenig tiefer zu graben und wirklich die Bedürfnisse Ihres Kunden zu erkennen und einige Schlüsselkonzepte herauszufinden, die Ihnen bei der Erstellung helfen eine Designrichtung im nächsten Schritt.
Während Menschen oft Schwierigkeiten haben, 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 den Einstieg zu erleichtern:
Sobald Sie sich mit dem Kern des Kundenprojekts befasst haben, ist es Zeit, einen Grundton für das Gesamtdesign festzulegen.
Es gibt verschiedene Möglichkeiten, dies zu tun, aber ein effektiver Ansatz besteht darin, dass der Kunde eine interaktive Umfrage ausfüllt. Mit etwas kreativem HTML, CSS und Javascript können Sie eine Reihe von Schiebereglern erstellen, mit denen der Kunde seine Marke zwischen verschiedenen Dichotomien positionieren kann:
Wenn ich mir dieses Beispiel anschaue, denke ich bereits über ein witziges, farbenfrohes Retro-Design für unseren fiktiven Kunden nach. Welche Design-Konzepte fallen mir sofort ein, wenn Sie dies sehen?
Nachdem wir unseren Kunden befragt haben, ist es an der Zeit, das Wesentliche 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.
Schauen wir uns ein Beispiel an. Hier einige Aussagen, die Ihnen unser fiktiver Kunde während der Entdeckungsphase sagt:
Aus diesen Aussagen besteht Ihre Aufgabe darin, ein einzelnes Adjektiv zu identifizieren, das die Kernbotschaft dessen beschreibt, was sie Ihnen gesagt haben.
Hier sind vier Adjektive, die wir verwenden könnten, um die obigen Aussagen zusammenzufassen und auf den Punkt zu bringen, was der Kunde ist Ja wirklich zu uns sagen:
Nun, da wir diese Gruppe von Adjektiven definiert haben, sind wir an einen Punkt gerückt, an dem wir Wörter in Design umsetzen können. Sie haben zwar eine etwas andere Interpretation der obigen Adjektive als ich, aber es ist 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.
Puh! Alle geredet? Gute Nachrichten: Wir haben die Grunzarbeit geleistet, jetzt haben wir Spaß. Wenn wir die gesamte Entdeckungsphase auf vier bis sechs Dynamit-Adjektive reduziert haben, ist es an der Zeit, Ihre erste Style-Kachel zu erstellen.
Besuchen Sie 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, so dass ich Sie nicht durch jeden einzelnen Schritt führen werde (Die Photoshop-Vorlage lässt sich sehr leicht anpassen), aber die Hauptidee ist die Erstellung einer Reihe von Designelementen (Farben, Texturen, Schaltflächen, Typografie usw.), die zu den Adjektiven sprechen, zu denen Sie im vorherigen Schritt gelangt sind.
Möchten Sie tiefer in die Erstellung eines Farbschemas eintauchen und Typografie-Paarungen für Ihre Stilkachel (und vieles mehr) wählen? Hier sind ein paar Webdesigntuts + Artikel, die Sie überprüfen können:
Nachdem Sie Ihre erste Stilkachel erstellt haben, müssen Sie die Schieferplatte reinigen und iterieren. Es gibt keine Vielzahl von Versionen, die Sie erstellen sollten, aber drei bis vier Style Tiles für jedes Projekt sind wahrscheinlich eine gute Balance zwischen der Erkundung ausreichender unabhängiger Designkonzepte und der Überforderung Ihrer Kunden mit zu vielen Optionen.
Denken Sie daran, dass Ihre Adjektive für jedes Style-Tile gleich sind, sie können jedoch auch anders sein. Dies gilt insbesondere, wenn Sie Schwierigkeiten hatten, die Bedürfnisse Ihres Kunden aufzuschlüsseln, oder Sie haben Ihnen verschiedene Alternativen vorgestellt, die Sie als Teil des Konzepts erkunden können Fragestufe.
Zum Beispiel haben wir aus unseren Entdeckungsfragen aus Schritt zwei drei separate Adjektivsätze herausgefunden, die alle ähnlich sind, sich aber voneinander unterscheiden, um unterschiedliche Konzepte für den fiktionalen Kunden zu finden:
Wie Sie sehen, können diese drei Adjektivsätze zu einer sehr unterschiedlichen Designrichtung führen. Hier kommen Style Tiles wirklich zur Geltung. Mit ein paar schnellen Farb- und Typografieänderungen können Sie innerhalb kürzester Zeit drei völlig unterschiedliche Iterationen erstellen.
Stellen Sie sicher, dass Ihr Kunde weiß, was Sie erwartet
Nachdem Sie nun Ihre eigenen Stil-Kacheln erstellt haben, können Sie sie Ihrem Kunden präsentieren. Wie bei jedem Schritt dieses Prozesses gibt es eine Reihe von Strategien, die implementiert werden müssen, 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 einen vollständigen Design-Comp nur präsentieren, damit Sie Ihre Style-Tiles herausziehen können. Zeigen Sie zum Abschluss der Fragestellung Ihren Kunden Beispiele für andere von Ihnen erstellte Stilelemente und erläutern Sie deren Wert für die Festlegung der Entwurfsrichtung der Website.
Stellen Sie sicher, dass Ihr Kunde weiß, was Sie ihm vor dem Präsentationsmeeting zeigen!
Vorbereiten der Präsentation auf PhotoDune Lassen Sie Ihren Kunden frei über Ihre Gestaltungskonzepte sprechen, stellen Sie jedoch sicher, dass Sie sie nicht zu leicht vom Haken lassen. Ermutigen Sie Ihre Kunden, ihre Aussagen zu erweitern. Mit ein bisschen effektiver Befragung können wir leere Aussagen in außergewöhnliche Aussagen umwandeln:
Denken Sie daran, dass Sie, während Sie den ganzen Tag über Websites erstellen, jeden Tag sehr wahrscheinlich nicht viel Erfahrung mit Ihrem Kunden haben werden. Seien Sie geduldig, helfen Sie Ihrem Klienten, ihre Aussagen zu klären, weisen Sie ihn auf, wertvolle Aussagen zu treffen, aber machen Sie niemals Annahmen, die auf den generellen, direkten Reaktionen Ihres Klienten auf Ihre Arbeit basieren.
Stil-Kacheln sind eine bessere Alternative zu vollständigen Design-Comps in den frühen Phasen des Projekts (dh während des Kundengenehmigungsprozesses). Abhängig davon, wie Sie arbeiten möchten, kann ein vollständiger Entwurf der nächste Schritt für das Projekt sein, falls dies der Fall ist Teil Ihres etablierten Workflows.
Nachdem Sie nun die Richtung des Designs definiert haben und der Kunde sich bei einer Ihrer Style Tile-Versionen abgemeldet hat, können Sie sicher sein, dass Ihr Comp den Erwartungen Ihres Kunden viel näher kommt, als wenn Sie direkt in die Eröffnung von Photoshop einsteigen würden nach dem ersten treffen. Das Mockup ist nicht nur viel näher an der Bestandsaufnahme, es ist auch nicht notwendig, mehrere Iterationen des Designs zu erstellen - diese Arbeit wurde bereits mit unseren Style Tiles erledigt.
Je nachdem, wie Sie Ihre Kundenarbeit ansprechen möchten, sind dies alles mögliche Beispiele für den Workflow für den Rest des Projekts:
Vielen Dank, dass Sie bei mir geblieben sind und alles über das Was, Wie und Warum von Style Tiles gelesen haben. Ich hoffe, es hat Ihnen Spaß gemacht, so viel darüber zu erfahren, wie ich darüber geschrieben habe, dass ich Sie darüber informiert habe!
Style Tiles sind eine revolutionäre Herangehensweise an den Gestaltungsprozess und helfen Ihnen und Ihrem Kunden, eine klare Richtung für die Website selbst aus den kompliziertesten und kompliziertesten Projekten zu finden.
Was sind deine Gedanken? Verwendest du Style Tiles in deinem nächsten Projekt? Wir würden gerne Ihre Gedanken in den Kommentaren hören!
Accentsconagua