Inhalt
- Eine reaktionsschnelle Methodik
- Wie behalte ich zuerst Inhalte?
- Warum?
- 01. Definieren Sie Ihre Geschäfts- und Benutzerziele
- 02. Referenziere sie bei jeder Gelegenheit
- 03. Hab keine Angst zurückzudrängen
- 04. Schieben Sie auch Ihr eigenes Team
- 05. Definieren Sie alle Ihre Inhaltsanforderungen im Voraus
- Wie abstrahiere ich Inhalte von Präsentationen?
- Wir müssen aufhören, an Inhalte in Bezug auf das Layout zu denken
- Zwingen Sie Ihre Kunden, ihre Inhalte unabhängig vom Design zu planen
- Finalisieren Sie Ihre Inhalte vor dem Design
- Verwenden Sie echte Inhalte - jedes Mal
- Wie funktionieren Wireframes für Responsive Design-Projekte?
- Skizzierung
- In-Browser-Framework
- Anmerkungen
- Verwenden Sie echten Inhalt in Drahtgittern
- Wie entwerfe ich zuerst für kleine Bildschirme?
- Abstrakte Designs von Geräten am Anfang
- Verwenden Sie Stilkacheln
- Erstellen Sie eine harmonische Benutzeroberfläche
- Alles im Browser anzeigen
- Stellen Sie mit statischen Programmen ein Gleichgewicht her
- Fazit
Lassen Sie uns klar sein: Design ist nur dann die Lösung, wenn es sich auf die tieferen Themen konzentriert, das Warum hinter allem. Ein solider Prozess sollte immer unsere Arbeit leiten, aber wir müssen etwas Flexibleres annehmen. Unser Medium hat sich endlich als flüssig erwiesen. Sollte unser Prozess nicht so sein? Denken Sie an das Systemdesign: Sie müssen sowohl das gesamte Bild als auch die kleinen Details sehen. Unmöglich? Weit davon entfernt!
Frank Chimero bringt es in seinem Buch The Shape of Design auf den Punkt: „Es gibt einen Teil, in dem der Künstler von der Staffelei zurücktritt, um eine neue Perspektive auf die Arbeit zu erhalten. Malerei ist zu gleichen Teilen nah und fern: In der Nähe arbeitet der Künstler hart, um sich zu profilieren; Wenn weit, bewertet er die Arbeit, um ihre Qualitäten zu analysieren. Er tritt zurück, um die Arbeit mit ihm sprechen zu lassen. “
Wir müssen unsere Arbeit, unser Medium, zu uns sprechen lassen. Mit dem Aufkommen von Responsive Design nehmen wir unser Medium endlich so an, wie es sein sollte: flüssig. Es ist eine brillante Zeit, einen Schritt zurückzutreten und die Arbeit zu bewerten, eine neue Art und Weise zu analysieren und anzunehmen, einen neuen Prozess. Vorbei sind die Zeiten statischer Modelle und Webdesigner, die Code nicht verstehen. Es ist Zeit für einen reaktionsschnellen Prozess.
Eine reaktionsschnelle Methodik
Wir werden gleich zu Beginn dieses Artikels das große Geheimnis für einen soliden Prozess preisgeben. Weil wir so verrückt sind. Bereit? Ein reaktionsfähiger Prozess ist ein verantwortungsbewusster Prozess. Vage? Kann sein. Dumm? Nein. Wie die Bewegung für Webstandards zuvor treibt Responsive Design das Web mit zukunftsfreundlichen Methoden voran.
Wie bei jedem Designprozess sollte es sich auf das „Warum“ konzentrieren, das dahinter steckt. Warum gibt es Websites? Inhalte liefern. Das könnte aufgabenbasiert, sozial, informativ sein ... es spielt keine Rolle. Es kommt alles darauf an: Beginnen Sie mit dem Warum, gut strukturierten Inhalten und Interaktionen, die wichtig sind.
Hier sind die Fragen, die wir am häufigsten über unseren reaktionsschnellen Entwurfsprozess hören.
Wie behalte ich zuerst Inhalte?
Wir sind alle zu Beginn eines Projekts so optimistisch. "Inhalt zuerst!" wir sagen. „Benutzerziele! Denken Sie daran, was wichtig ist! " Es ist wahr. Aber was bedeutet es? Wie implementieren Sie einen Content-First-Prozess?
Selbst wenn Sie es wissen (oder zu wissen glauben), ist es im Verlauf eines Projekts leicht zu vergessen. Langfristige Projekte tendieren dazu, sich weiter und weiter zu ziehen (und weiter… und weiter…). Wir hören auf, über das Warum nachzudenken, und konzentrieren uns auf das Wie. Wir täuschen uns vor, dass unsere Projekte in separate „Entdeckungs-“ und „Entwicklungsphasen“ unterteilt werden können, die unabhängig voneinander existieren können.
Die Wahrheit ist, wir müssen die ganze Zeit fragen, warum. Egal wie viel Sie zu wissen glauben, egal wie viel Sie geplant haben - jedes Mal, wenn Sie eine Entscheidung treffen, jedes Mal, wenn Sie eine Schaltfläche entwerfen oder eine Überschrift schreiben, müssen Sie fragen ...
Warum?
Warum mache ich das? Für wen ist das? Welches Geschäftsziel wird es meinem Kunden helfen, es zu erreichen? Welchen Bedarf wird es meinen Benutzern helfen, zu adressieren? Behalten Sie nicht nur den Inhalt zuerst bei. Behalte das Warum zuerst.
Das klingt einfach. Aber um es gut zu machen, musst du pushen. Schieben Sie Ihre Kunden und Ihr Team dazu, zuerst zu definieren, warum. Kein Lorem Ipsum, kein "Wir werden später darauf zurückkommen". Mach deine Hausaufgaben! Alle Ihre Anleitungen müssen mit einem soliden Warum beginnen. Bei Yellow Pencil bedeutete dies große Änderungen in der Art und Weise, wie wir Projekte aufstellen, schätzen, budgetieren und planen. Wir mussten auf Budget und Zeit drängen, um solide Forschung, Strategie und Planung zu betreiben. Du könntest auch. Sobald Ihre Kunden und Ihre Teams die enormen Vorteile der Definition von Inhaltsanforderungen im Voraus erkennen, werden sie nie mehr zurückblicken.
Und es ist unsere Aufgabe, sie zu erziehen. (Lesen Sie Mike Monteiros ausgezeichnetes Buch Design is a Job, wenn Sie mehr über den Umgang mit Kunden erfahren möchten.) Kunden können es schwer haben, den Wert all dieser Recherchen und Arbeiten im Voraus zu verstehen. Und warum sollten sie? Sie bekommen am Ende nichts "fertig" - und allzu oft bekommen sie nur eine Rechnung und ein großes altes Word-Dokument.
Das ist nicht ihre Schuld - es ist unsere Schuld. Es liegt in unserer Verantwortung, diesen Wert besser zu demonstrieren. Bei jedem Schritt müssen wir alles auf das alles entscheidende Warum zurückführen.
Dies ist besonders wichtig für das reaktionsschnelle Design. Eine reaktionsschnelle Website erfordert nicht viel mehr Entwicklungsaufwand, bedeutet jedoch viel mehr Planung. Wirklich, es ist geplant, dass wir es die ganze Zeit hätten tun sollen. Erleben Sie den aktuellen Projektzyklus, der alle drei Jahre neu gestaltet wird. Willst du das weiter machen? Das tun wir sicher nicht.
Hier sind drei Schritte, um den Inhalt an erster Stelle in Ihrem Projektprozess zu halten.
01. Definieren Sie Ihre Geschäfts- und Benutzerziele
Erstellen Sie eine priorisierte Liste mit Geschäfts- und Benutzerzielen für Ihr Projekt. Was möchten Ihre Benutzer am meisten wissen oder tun? Recherchiere. Machen Sie fundierte Schlussfolgerungen, keine wilden Vermutungen. Lassen Sie alle Ihre Stakeholder zustimmen.
02. Referenziere sie bei jeder Gelegenheit
Jedes Mal, wenn Sie eine Entscheidung treffen, wenn jemand ein neues Feature oder Designelement oder eine neue Inhaltsseite vorschlägt, veranlassen Sie ihn, die Anforderung einem Geschäfts- und Benutzerziel zuzuordnen. Welchen tatsächlichen Bedarf wird diese Funktion erfüllen? Was ist der wahre Grund? (Hinweis: "Weil ich will" oder "Ich mag Blau wirklich" oder "Jeder auf Facebook" zählt nicht.)
03. Hab keine Angst zurückzudrängen
Dies kann eine schwierige Frage sein. Kundenbeziehungen können heikel sein und es kann verlockend sein, den Kampf um den Krieg aufzugeben. Aber denken Sie daran, wir sind alle zusammen! Es geht nicht um Geschäft gegen Benutzer. wir gegen sie.
Die Erfüllung der Benutzeranforderungen ist der beste Weg, um die geschäftlichen Anforderungen zu erfüllen. Denn ohne unsere Benutzer haben wir kein Geschäft! Kunden (gute Kunden) stellen Sie nicht ein, um zu allem „Ja“ zu sagen. Wenn Ihr Kunde also nach etwas fragt, das seinen Zielen oder den Bedürfnissen seiner Benutzer nicht entspricht, haben Sie keine Angst, sie herauszufordern. Es geht nicht um Ego. Es geht darum, die bestmögliche Lösung zu finden.
04. Schieben Sie auch Ihr eigenes Team
Dies kann auch eine Herausforderung sein, wenn Sie in einem Kreativteam arbeiten. Die Trennung von Rollen - visuelles Design, Benutzererfahrung, Informationsarchitektur, Inhaltsstrategie, Inhaltsproduktion - kann zu Missverständnissen führen. Wir werden beschäftigt, wir werden mit E-Mails überwältigt. Es ist schwierig, von Anfang bis Ende bei einem Projekt zu bleiben, insbesondere wenn „Ihre“ Arbeit erledigt ist.
Die Beziehung Ihres Teams ist mindestens genauso wichtig wie Ihre Kundenbeziehung. Wir müssen uns an das Warum erinnern, genau wie wir es bei unseren Kunden tun. Zusammenarbeit ist der Schlüssel. Sie können einen Inhaltsplan, Drahtmodelle oder Designs nicht einfach „übergeben“. Wir müssen so viel wie möglich Hand in Hand arbeiten. Es ist einfach, ein Ergebnis zu "beenden" und zu etwas anderem überzugehen. Es ist viel schwieriger, bei einem Projekt zu bleiben, wenn es schwierig wird.
Ein Wasserfall-Ansatz für kreative Arbeit funktioniert einfach nicht. Agile, kollaborative Arbeit zwischen Teammitgliedern sorgt für bessere Ergebnisse.
05. Definieren Sie alle Ihre Inhaltsanforderungen im Voraus
Hier ist die Sache: Die Planung von reaktionsschnellen Websites dauert länger. Wir planen nicht mehr nur einen einzigen Kontext. Wir planen alle Kontexte, die wir jetzt kennen, und einige, die es noch nicht gibt.
Es dauert jedoch viel weniger Zeit, um all diese Komplexitäten im Voraus zu planen, als zurück zu gehen und Features und Funktionen nachzurüsten, die Sie nicht berücksichtigt haben. Verbringen Sie also Zeit / Mühe / Budget. Zwingen Sie Ihre Kunden und Ihr Team, alle Inhalte zu definieren (und sich dazu zu verpflichten!), Bevor Sie mit dem Design beginnen. Verwenden Sie Seitentabellen. Verwenden Sie strukturierte Inhalte. Machen Sie Ihre Inhalte jetzt zukunftssicher! Oder später weinen.
Wie abstrahiere ich Inhalte von Präsentationen?
Sie hören dies viel im Internet-o-Bereich. Aber warte, was? Und warte - warum?
Weil sich die Präsentation ändern kann (und wird). Die Art und Weise, wie wir Websites vor 15 Jahren gestaltet haben, ist fast nicht wiederzuerkennen, wie wir sie jetzt präsentieren. Aber wissen Sie, was sich nicht geändert hat? Wörter. Wir benutzen sie immer noch. Das Internet existiert hauptsächlich für (textbasierte) Inhalte. Wir verwenden es immer noch, um Informationsprobleme zu lösen. Aufgaben zu erfüllen. Wenn Ihr Inhalt jedoch von einem Präsentationsmittel abhängt (Flash-Intro-Seiten, irgendjemand?), Besteht die Wahrscheinlichkeit, dass er in einigen Jahren nicht mehr verwendet werden kann. Und das ist scheiße.
Wir müssen aufhören, an Inhalte in Bezug auf das Layout zu denken
Wir (als Branche) haben unsere Kunden geschult, Inhalte in Bezug auf das Layout zu betrachten. "Legen Sie es in die Seitenleiste", sagen wir. "Das sollte in die Fußzeile gehen." Halt! Hör auf. Halt. Es geht nicht um den Standort. Es geht um Priorität. Was ist der wichtigste Inhalt für Ihre Benutzer? Denn raten Sie mal: Das Layout ändert sich kontextübergreifend. Es wird (wahrscheinlich) keine Seitenleiste in Ihrem Design für kleine Bildschirme geben.
Das riesige Super-Menü, das Ihr Kunde möchte? Ich werde nicht auf einem iPhone fliegen.
Zwingen Sie Ihre Kunden, ihre Inhalte unabhängig vom Design zu planen
Okay, du musst sie nicht zwingen. Ermutigen Sie sie. Stark ermutigen. Seitentabellen sind dafür großartig. Wenn Sie es noch nicht gelesen haben, fahren Sie sofort mit Kristina Halvorson und Melissa Rachs Content Strategy for the Web fort, um weitere Informationen zu deren Erstellung zu erhalten. Organisieren Sie sie in Prioritätsreihenfolge. Verweisen Sie nicht auf Standort oder Layout. Dies hilft Ihren Kunden, produktiver über ihre Inhalte nachzudenken, und bringt den Prozess der Inhaltserstellung in Schwung, bevor die Drahtmodelle oder das Design fertiggestellt werden.
Finalisieren Sie Ihre Inhalte vor dem Design
Okay, das ist nicht immer möglich. Aber je mehr Unsicherheit Sie beseitigen können, bevor Sie mit dem Entwerfen beginnen, desto weniger müssen Sie später zurückgehen und Änderungen vornehmen.
Verwenden Sie echte Inhalte - jedes Mal
Verwenden Sie nach Möglichkeit Edge-Case-Inhalte - zeigen Sie Ihren Kunden die kompliziertesten Seiten, Bilder und Menüs. Dies vermeidet später im Prozess Überraschungen, wenn sie ihren unordentlichsten Inhalt im fertigen Produkt sehen.
Funktionale Wireframes im Browser machen einen großen Unterschied. Ermöglichen Sie Ihren Kunden, zu beobachten, wie sich ihre Inhalte über eine Reihe von Bildschirmgrößen hinweg bewegen und ändern. Weisen Sie darauf hin, während Sie Ihre Wireframes präsentieren (Sie führen persönliche Präsentationen durch, oder?). Zeigen Sie ihnen, wie die Priorität ihrer Informationen über die Bildschirmgrößen hinweg gleich bleibt, während sich das Layout ändert.
Wie funktionieren Wireframes für Responsive Design-Projekte?
Wir sind der festen Überzeugung, dass das Interaktionsdesign für RWD schnell und häufig in den Browser gelangen muss. Es ist so gut wie unmöglich, ein statisches Dokument zu erstellen, das alles beschreibt. Natürlich könnten wir ein Dokument erstellen, das drei, vier oder fünf Haltepunkte zeigt, aber das ist nur ein Bruchteil der Geschichte. Was ist mit all den Momenten zwischen den Haltepunkten? Das passiert im Browser.
Skizzierung
Trotzdem ist es gut, schnell Ihre Ideen gemeinsam skizzieren zu können. Dies muss in keinem bestimmten Medium geschehen, aber Bleistift auf Papier hat nur etwas zu bieten. Hier geht es darum, Ideen schnell und iterativ zu verbreiten. Wir lieben es, wann immer möglich zu skizzieren, und dafür gibt es sogar eine App: UI Sketcher.
In-Browser-Framework
Hier ist das echte Ticket für uns. Wir lieben es, Muster und Systeme wiederzuverwenden, wenn wir RWD im Browser demonstrieren. Natürlich könnten wir jedes Mal unser eigenes System von Grund auf neu erstellen, aber das hilft uns oder unseren Kunden nicht.
Wir verwenden auch gerne schnell reagierende Prototyping-Frameworks wie Twitter's Bootstrap oder Zurb's Foundation. Wir persönlich neigen zu Foundation, weil es zu unserem Workflow passt. Es wäre großartig, wenn einer von beiden einen Ansatz mit kleinem Bildschirm und geringer Bandbreite wählen würde, aber genau so rollen wir.
Anmerkungen
Anmerkungen für RWD-Drahtgitter sind unerlässlich, werden jedoch häufig übersehen. Sagen Sie es laut: Dokumentation, Dokumentation, Dokumentation! Wir haben einige Beispiele von Freunden gesehen und sind der Meinung, dass die Jury immer noch nicht auf dem besten Weg ist, um im Browser reagierende Wireframes richtig zu kommentieren. Wie oben erwähnt, verwenden wir regelmäßig Foundation by Zurb und verwenden gerne das Reveal-Add-On, um unsere Anmerkungen anzuzeigen. Diese Anmerkungen werden nur für größere Bildschirme angezeigt und können idealerweise ein- und ausgeschaltet werden.
Verwenden Sie echten Inhalt in Drahtgittern
Lorem Ipsum wurde viel über Drahtmodelle und Designmodelle diskutiert, aber wenn Sie keine echten Inhalte in Ihren Drahtmodellen haben, machen Sie es falsch. Der Inhalt informiert über die Interaktionsentscheidungen und teilt Ihnen mit, wann ein Design beschädigt wird. Wie kann Lorem Ipsum das tun?
Wie entwerfe ich zuerst für kleine Bildschirme?
Wir haben jahrelang mit einer bestimmten Auflösung entworfen. Es war eine Standardeinstellung. Ob beim Skizzieren in Notizbüchern, beim Wireframing in OmniGraffle, beim Arbeiten in Photoshop oder beim Entwerfen im Browser - wir wussten, wie groß unsere Leinwand sein würde. Diese Zeiten sind vorrüber. Wir glauben fest daran, zuerst für den kleinen Bildschirm zu entwerfen und diese schrittweise zu verbessern. Wie ändert ein Designer seinen Workflow von einer festen Leinwandgröße in eine flüssige?
Abstrakte Designs von Geräten am Anfang
Wenn wir nicht für ein bestimmtes Gerät entwerfen, ist es wichtig, dass wir aufhören, an Geräte zu denken, und anfangen, über Erfahrungen nachzudenken. Alle folgenden Techniken helfen Designern, ihre Erfahrungen zu basteln und gleichzeitig geräteunabhängig zu bleiben (bis zu einem gewissen Punkt).
Verwenden Sie Stilkacheln
Verwenden Sie Stilkacheln, um die Richtung festzulegen und schnell zu iterieren. Mit Style Tiles kann ein Designer die Richtung eines Designsystems festlegen, ohne zu spezifisch zu werden. Ihre Schöpferin, Samantha Warren, beschreibt sie folgendermaßen:
„Style Tiles sind für den Fall gedacht, dass ein Moodboard zu vage und eine Komposition zu wörtlich ist. Stilkacheln stellen eine direkte Verbindung mit den tatsächlichen Oberflächenelementen her, ohne das Layout zu definieren. “
Erstellen Sie eine harmonische Benutzeroberfläche
Stellen Sie sich eine Leinwand mit allen visuellen und interaktiven Elementen vor. Nicht um ein bestimmtes UI-Layout zu sehen, sondern um zu sehen, wie alle Elemente zusammenarbeiten. Dies ist eine Oberfläche Harmony Canvas. Eine Benutzeroberfläche für die Harmonie der Benutzeroberfläche ermöglicht es einem Designer, Ideen zusammenzuhalten, sich jedoch nicht auf eine Bildschirmgröße zu konzentrieren. Darüber hinaus ist dies eine hervorragende Möglichkeit, entworfene Elemente effizient zu kommunizieren und zu dokumentieren, anstatt einen vollständigen Styleguide zu erstellen.
Wenn Sie weiterlesen möchten, finden Sie hier und hier zwei hervorragende Artikel zum Thema Interface Harmony.
Alles im Browser anzeigen
Alles muss im Browser zusammengeführt werden. Hier wird das UI-Design wirklich lebendig. Es ist entscheidend zu sehen, wie der reale Inhalt mit den visuellen Elementen interagiert. In einer statischen Umgebung gibt es keine Möglichkeit, dies ordnungsgemäß durchzuführen. Sie müssen sehen, wie es auf dem nativen Medium reagiert.
Stellen Sie mit statischen Programmen ein Gleichgewicht her
Es gibt einen Fluss zwischen dem Browser und statischen Programmen wie Photoshop. Es sollte ein Gleichgewicht vorhanden sein, das es ermöglicht, das Designsystem auf flüssige und natürliche Weise zu erstellen. Sicher, dies wird in Photoshop passieren, aber ein Designer, der reaktionsschnell entwirft, muss lernen, auch im Browser kreativ zu denken.
Fazit
Noch einmal mit Gefühl: Beginnen Sie mit dem Warum, mit gut strukturierten Inhalten und Interaktionen, die wichtig sind. Konzentrieren Sie sich zuerst auf den kleinen Bildschirm und die geringe Bandbreite und verbessern Sie schrittweise Ihre Reaktionskonzepte. Unser Medium wird erwachsen. Wir haben die Möglichkeit, die Dinge richtig zu machen und die Welt zu verändern, ein Webprojekt nach dem anderen.
Entdecken Sie die besten 20 Wireframing-Tools für Designer
Steve Fisher koordiniert Forschung, Analyse, Design und Strategie bei Yellow Pencil in Kanada und spricht zu Themen wie RWD, UX und Open Source. Alaine Mackenzie ist Content-Strategin bei Yellow Pencil.
