Musterrechnung webdesign

Designmuster bieten eine gemeinsame Sprache zwischen Designern. Sie ermöglichen eine Debatte über Alternativen, bei denen die bloße Erwähnung des Namens eines Entwurfsmusters implizit viel mehr Bedeutung hat als nur der Name. Im Webdesign gibt es bestimmte gängige Entwurfsmuster, die für die Interaktion verwendet werden. Die Websitenavigation verfügt über eine Vielzahl gängiger und vertrauter Entwurfsmuster, die als Grundlage für den Aufbau einer effektiven Informationsarchitektur für eine Website verwendet werden können. Das Layout-Verschiebungsmuster ist das reaktionsschnellste Muster mit mehreren Haltepunkten über mehrere Bildschirmbreiten. Die meisten Layouts, die von reaktionsschnellen Webseiten verwendet werden, können in eines von fünf Mustern kategorisiert werden: meist flüssig, Spaltenabfall, Layoutverschiebung, kleine Optimierungen und Off-Canvas. In einigen Fällen kann eine Seite eine Kombination von Mustern verwenden, z. B. Spaltenablage und Off-Canvas.

Diese Muster, die ursprünglich von Luke Wroblewski identifiziert wurden, bieten einen soliden Ausgangspunkt für jede reaktionsschnelle Seite. In der Praxis werden Muster häufig austauschbar mit spezifischen Features verwendet, die aus einer der gängigen Designmuster- und Drahtmodellbibliotheken kopiert werden – siehe eine vollständige Liste in UXPins Leitfaden für Wireframing. Responsive Webdesign-Muster entwickeln sich schnell weiter, aber es gibt eine Handvoll etablierter Muster, die auf dem Desktop und auf mobilen Geräten gut funktionieren. Nehmen Sie diese Designmuster und -elemente aus uxPins kostenlosem E-Book Web UI Design Patterns 2014 und passen Sie sie an Ihre eigenen Probleme und vor allem an die Ihrer Benutzer an. Sie bieten keine Erklärung für die Probleme, die diese Muster lösen, und wie Entscheidungen bei der Umsetzung der Musterbeispiele getroffen wurden. Ein Bild mag mehr als tausend Worte wert sein, aber es ist wahrscheinlicher wertlos, wenn das Bild völlig missverstanden wird. Im Folgenden habe ich Pinterest und Facebooks Hover-Steuerelemente dekonstruiert, um Ihnen ein echtes Beispiel dafür zu geben, wie Sie täglich über mobile Designmuster nachdenken können. UI-Entwurfsmuster können anspruchsvolle Konzepte sein, die es zu erfassen und zu nutzen gilt. Dies ist zum Teil auf den Mangel an Literatur zu diesem Thema im Vergleich zu den massiven Archiven technischer Designmuster zurückzuführen. Es ist zum Teil auch darauf zurückzuführen, dass es die menschliche Natur ist, Muster in ähnlicher Weise wie Schablonen zu verwenden – die Umrisse zu verfolgen, ohne die Kanten zu verstehen; jede Kurve, Linie, Drehung und Drehung in den gezeichneten Formen.

Im E-Book mobile UI Design Patterns spreche ich ausführlich über Animationen und Gesten, die sich stark auf die Designmuster der mobilen Benutzeroberfläche auswirken, die für das Webdesign immer relevanter werden, da Mobile und Web ihre Konvergenz fortsetzen. Aber wollen sie auch hier wegen ihrer Bedeutung kurz ansprechen. Es braucht Übung und Disziplin, um über Muster auf diese Weise nachzudenken, wenn du es noch nicht getan hast. Nehmen Sie sich die Zeit, diese Fragen beim Entwerfen Ihres Produkts zu beantworten, da es Ihnen helfen könnte, viel Zeit bei der Umgestaltung zu sparen, wenn Ihre Benutzer und Ihr Team nach ähnlichen Details fragen.