Stilfliesen bieten einen frischen und produktiven Weg, um sich dem Designprozess zu nähern. Sie ermöglichen es Ihnen, die Persönlichkeit und die Stimmung eines Projekts gezielt zu verfeinern und sich auf Sie zu konzentrieren, ohne sich um bestimmte Layoutentscheidungen zu kümmern.
Heute zeigen wir Ihnen genau, was Style Tiles sind, warum Sie sie verwenden sollten und wie Sie sie in Ihren Designprozess integrieren können. Folgen Sie mit und vielleicht ändern Sie die Gestaltung für immer.
Was sind Stilfliesen?
Mit Stilkacheln können Sie die visuelle Identität einer Website unabhängig von der komplizierten Logistik entwickeln, die beim Entwickeln eines vollständigen Modells zum Tragen kommt. Die Idee stammt von Samantha Warren, einer extrem talentierten Designerin und Bloggerin bei Badass Ideas.
Anstatt sich um den heißen Brei herumzuschlagen, springen wir direkt dahin, wie eine Stilkachel aussieht. Es ist schwer zu beschreiben, also hier ein Beispiel von der Style Tiles-Website.
Wenn Sie sich nach visuellem Design richten, sollten Sie sofort die Nützlichkeit dieses Tools erkennen können. Es ist bemerkenswert einfach und unglaublich hilfreich. Hier wurden viele wichtige Entscheidungen in Bezug auf Typografie, Farbe, Button-Styling und mehr getroffen. Wenn wir eine Website basierend auf diesem Board erstellen würden, hätten wir eine solide Vorstellung von der visuellen Richtung, die wir verfolgen würden.
Die Kehrseite von Wireframes
Die Style Tiles-Website beschreibt sie als etwas zwischendurch ein zu ungenaues Mood-Board und ein zu genaues Modell. Ich persönlich sehe sie etwas anders: als die Kehrseite von Wireframes.
Denken Sie darüber nach, Ihr Ziel bei Wireframes ist es, sich auf das Layout ohne Stil zu konzentrieren. Sie denken nur darüber nach, wie eine Seite strukturiert wird, wie die Größenverhältnisse zwischen den Elementen aussehen werden usw. Wenn Sie ein vereinfachtes Drahtgitter verwenden, können Sie schnell viele Ideen entwickeln, da Sie nicht durch Dinge wie Farben, Schatten, Ablenkungen abgelenkt werden. Muster, Schriftarten und Bilder.
Eine Stilkachel ist das Gegenteil davon, dh sie ergänzt diesen Prozess perfekt. Hier können Sie die Vorstellung von Layout aufgeben und sich ganz auf das konzentrieren, was als Markengefühl bezeichnet werden kann. die spezifischen Designentscheidungen, die der Site eine eindeutige Identität verleihen.
Drei Gründe, Stilplatten zu verwenden
Nachdem Sie jetzt einen guten Überblick über die Eigenschaften von Stil-Kacheln haben, gehen wir einige der Hauptgründe an, die Sie überlegen sollten, um sie in Ihren Workflow zu integrieren.
Schnelle visuelle Entwicklung von Ideen
Der erste Grund, warum Style Tiles großartig sind, besteht darin, dass Sie in der Lage sein sollten, mehrere davon in relativ kurzer Zeit zu entfernen. Es kann Stunden oder sogar Tage dauern, bis vollständige Modelle hergestellt werden. Diese Boards sind jedoch ein kleiner Geschmack des größeren Designs und sollten nur einen Bruchteil der Zeit in Anspruch nehmen.
Dies bedeutet, dass Sie ganz einfach drei bis fünf einzigartige Ideen für die Persönlichkeit Ihrer Website erstellen und dann auswählen können, welche am besten geeignet sind, oder aus welchen Elementen Elemente gemischt werden.
Das Feedback der Kunden lässt sich einfacher integrieren
Wenn Sie eine Woche damit verbracht haben, den ersten Blick auf ein Projekt eines Kunden zu werfen und Sie zurück an das Zeichenbrett zu schicken, kann dies eine entmutigende Erfahrung sein. Alle Zeit und Mühe, die Sie für das Projekt aufgewendet haben, wurden in einer einzigen Besprechung ausgelöscht, und Sie bleiben auf Platz eins zurück.
Mit Style Tiles können Sie Ihren Kunden frühzeitig in den Designprozess einbeziehen. Zeigen Sie ein paar verschiedene Kacheln und sie bekommen sofort ein Gefühl dafür, was los ist, und werden wahrscheinlich die Gelegenheit lieben, einzusteigen und Feedback zu geben.
In dieser Phase ist es unglaublich einfach, kleine Änderungen oder sogar große globale Änderungen vorzunehmen, ohne das Gefühl zu haben, dass Sie die Hälfte Ihrer Zeit und Ihres Budgets verloren haben.
Perfekt für einen Responsive Workflow
Da responsives Webdesign immer beliebter wird, müssen Designer ihre Arbeitsabläufe überdenken. Die Entwicklung statischer Komponenten für ein Design, das sich ständig anpasst, ist ein schwieriges und vielleicht sogar fruchtloses Unterfangen.
Als Alternative können Sie mit Style Tiles das Aussehen Ihrer Elemente festlegen, ohne sich über bestimmte Geräteabmessungen oder Haltepunkte Gedanken zu machen. Wenn Sie diese gefunden haben, können Sie sie in ein responsives Grid einbinden.
Lass uns eins machen
Sprechen ist billig, mal sehen, ob wir diesen Prozess tatsächlich nutzen können, um etwas Wertvolles zu finden. Wenn Sie von vorne anfangen wollen, ist das großartig. Wenn Sie jedoch nach einem guten Ausgangspunkt suchen, laden Sie die kostenlose Vorlage von der Style Tiles-Website herunter. So sieht es aus:
Wie Sie sehen, gibt es mehrere Elemente, die Ihnen helfen, ein Gefühl für ein allgemeines Layout sowie die Arten von Elementen zu bekommen, über die Sie in dieser Phase des Entwurfsprozesses nachdenken sollten. Beachten Sie, dass sich in der rechten unteren Ecke dieser Vorlage ein sehr wichtiger Hinweis befindet: Seien Sie kreativ, verwenden Sie diese Vorlage nicht einfach so wie sie ist !?
Es ist verlockend, einfach mit dem zu laufen, was Sie hier erhalten haben, aber lassen Sie sich nicht von diesem Werkzeug Ihre Kreativität beeinträchtigen, es soll es tatsächlich verbessern.
Als Beispielprojekt erstellen wir ein Style-Tile für meinen Lieblings-Burrito-Ort: Chipotle. Wir geben vor, dass sie entweder keine Website haben oder von uns abhängig sind, um einen überarbeiteten Look zu erstellen.
Logo
Der erste Schritt, den wir unternehmen, besteht darin, ein Logo hinzuzufügen. Gleich darauf stoßen wir auf die Notwendigkeit, die Vorlage für unsere eigenen Zwecke zu ändern. Der Logo-Container oben ist rechteckig und das Chipotle-Logo ist rund. Glücklicherweise ist die PSD-Vorlage sehr übersichtlich angeordnet, so dass es mir leicht fällt, alle Header-Elemente zu deaktivieren und unser rundes Logo zu verwenden.
Hintergrund
Es gibt keine festgelegte Reihenfolge, um die Elemente zu aktualisieren, springen Sie einfach von Stück zu Stück, wenn die Ideen zu Ihnen kommen. Ein logischer nächster Schritt war für mich der Hintergrund. Da es sich bei Chipotle um ein Restaurant im Südwesten-Stil handelt, habe ich dem Hintergrund eine Atmosphäre der alten Welt gegeben.
Wir sind nur zwei Schritte entfernt und haben die Vorlage bereits dramatisch beeinflusst. Wir können deutlich erkennen, dass der Style Guide mit der Entstehung einer Markenpersönlichkeit Gestalt annimmt.
Farben
Jetzt, da wir ein Logo und einen Hintergrund haben, können wir ein bisschen Farbidentität erkennen. Ich werde den vorhandenen Farbbereich nutzen, um diesen Bereich zu einer vollen Palette zu erweitern.
Typografie
Nach den Farben springe ich weiter und lande auf der Typografie. Ich finde es sehr gut, dass die Vorlage Ihnen nicht nur einen Ort gibt, an dem Sie einen Beispieltyp angeben können, sondern auch kleine Beschriftungen, mit denen Sie sich die verwendeten Schriftarten notieren können.
Das fertige Produkt
Ich drängte mich vorwärts und iterierte und zwickte mich weiter, bis ich auf etwas landete, das ich als fertiges Plättchen betrachten konnte. Dabei gab ich den Ratschlag, die Vorlage gut zu ändern und das Layout komplett neu zu formatieren, wobei die Abschnitte, die ich hilfreich fand, beibehalten wurden. Folgendes habe ich mir ausgedacht:
Wie Sie sehen, ist es weit von der Originalvorlage entfernt. Ich habe die mitgelieferte PSD als Ausgangspunkt für meine Ideen verwendet, nicht als Krücke. Nun habe ich eine solide Basis, von der aus ich beginnen kann, wenn ich anfange, Layout und Stil zu einem fertigen Produkt zusammenzufügen.
Fazit: Ein Hauch frischer Luft
In letzter Zeit bin ich ziemlich mit glänzenden neuen Schlagworten wie CSS3, HTML5 und Responsive Design beschäftigt gewesen. Infolgedessen habe ich mich seit einiger Zeit nicht mehr mit dem reinen Design auseinandergesetzt. Die Erkundung der Nützlichkeit von Style Tiles war nur die Erinnerung daran, dass ich unbedingt daran denken musste, dass hier meine wahre Leidenschaft liegt.
Ich habe es absolut genossen, die Freiheit zu haben, einen visuellen Stil zu entwickeln, ohne mir Gedanken darüber zu machen, ob die Startseite ein drei- oder vierspaltiges Layout haben soll oder nicht. Es ist ziemlich erfrischend, sich auf bestimmte Teile des Entwurfsprozesses konzentrieren zu können, ohne sich vom größeren Umfang des gesamten Projekts einschüchtern oder ablenken zu lassen.
Ein großes Dankeschön geht an Samantha Warren für das Teilen ihres Prozesses und der Startvorlage. Ich denke, dass Style Tiles von nun an ein sehr wichtiger Teil meines Prozesses sein wird.
Hinterlassen Sie einen Kommentar und lassen Sie uns wissen, was Sie denken. Verwenden Sie Moodboards, Wireframes oder ähnliche Tools in Ihrem Designprozess? Würde die Einführung von Style Tiles Ihre Arbeitsweise verbessern? Wir wollen wissen!
Wireframe-Bild mit freundlicher Genehmigung von Joe Crawford.