Website wireframe

Ein Drahtmodell für eine Person -Profilansicht

A Website Wireframe, auch bekannt als a Seitenschema oder Bildschirmplanung, ist ein visuelle Anleitung das repräsentiert den Skelettrahmen von a Webseite.^[1]^{: 166} Der Begriff Wireframe wird von anderen Feldern entnommen, die ein Skelettgerüst verwenden, um die 3 -dimensionale Form und das Volumen darzustellen.^[2] Wireframes werden zum Zweck der Anordnung von Elementen erstellt, um einen bestimmten Zweck am besten zu erreichen. Der Zweck wird normalerweise von einem Geschäftsziel und einer kreativen Idee angetrieben. Der Wire -Rahmen zeigt die Seitenlayout oder Anordnung des Inhalts der Website, einschließlich Schnittstellenelemente und Navigationssystemen sowie der Art und Weise, wie sie zusammenarbeiten.^[3]^{: 131} Dem Wireframe fehlt normalerweise typografischen Stil, Farbe oder Grafiken, da der Hauptaugenmerk auf Funktionalität, Verhalten und Priorität des Inhalts liegt.^[1]^{: 167} Mit anderen Worten, es konzentriert sich darauf, wie ein Bildschirm tut, nicht wie es aussieht.^[1]^{: 168} Wireframes können Bleistiftzeichnungen oder Skizzen auf einem Whiteboard sein oder mit einer breiten Palette kostenloser oder kommerzieller Softwareanwendungen hergestellt werden. Wireframes werden im Allgemeinen von Business -Analysten, Designerin, Entwicklern, visuellen Designern und von Fachkenntnissen in Wirtschaftsanalysten, Designer für Benutzererfahrungen erstellt. Interaktionsdesign, Informationsarchitektur und Benutzerforschung.

Wireframes konzentrieren sich auf:

Die Palette der verfügbaren Funktionen
Die relativen Prioritäten der Informationen und Funktionen
Die Regeln für die Anzeige bestimmter Arten von Informationen
Der Effekt verschiedener Szenarien auf die Anzeige^[1]^{: 169}

Die Website Wireframe verbindet die zugrunde liegende konzeptionelle Struktur oder Informationsarchitekturan der Oberfläche oder visuelles Design der Website.^[3]^{: 131} Wireframes beitragen, Funktionalität und die Beziehungen zwischen verschiedenen Bildschirmvorlagen einer Website zu ermitteln. Ein iterativer Prozess, der Drahtgitter erzeugt, ist ein effektiver Weg, um schnelle Prototypen von Seiten zu erstellen und gleichzeitig die Praktikabilität eines Designkonzepts zu messen. Wireframing beginnt typischerweise zwischen „strukturellen Arbeiten auf hoher Ebene-wie Flussdiagramme oder Standortkarten- und Bildschirmdesigns. “^[1]^{: 167} Im Aufbau einer Website wird das Denkdenken greifbar.^[4]^{: 186}

Wireframes werden auch für das Prototyping von mobilen Websites, Computeranwendungen oder anderen Bildschirmbasis verwendet, die beinhalten Menschliche interaktion mit dem Computer.^[2]

Verwendung von Wireframes

Wireframes können von verschiedenen Disziplinen verwendet werden. Entwickler verwenden Wireframes, um die Funktionalität der Website zu greifbarerisch zu verstehen, während Designer sie verwenden, um das zu schieben Benutzeroberfläche (UI) Prozess. Benutzererfahrungsdesigner und Informationsarchitekten verwenden Wireframes, um Navigationspfade zwischen Seiten anzuzeigen. Business Analysten verwenden Wireframes, um die Geschäftsregeln und Interaktionsanforderungen für einen Bildschirm visuell zu unterstützen. Business -Stakeholder prüfen Wireframes, um sicherzustellen, dass Anforderungen und Ziele durch das Design erfüllt werden.^[1]^{: 167} Zu den Fachleuten, die Wireframes erstellen, gehören Geschäftsanalysten, Informationsarchitekten, Interaktionsdesigner, Benutzererfahrungsdesigner, Grafikdesigner, Programmierer und Produktmanager.^[2]

Die Arbeit mit Wireframes kann eine gemeinsame Anstrengung sein, da sie die Informationsarchitektur in das visuelle Design überbrückt. Aufgrund von Überschneidungen in diesen beruflichen Rollen können Konflikte auftreten, wodurch Drahtverdrahtung ein kontroverser Bestandteil des Entwurfsprozesses ist.^[4]^{: 186} Da Wireframes eine Ästhetik für „nackte Knochen“ bedeuten, ist es für Designer schwierig zu beurteilen, wie genau das Drahtmodus die tatsächlichen Bildschirmlayouts darstellt.^[1]^{: 168} Um Konflikte zu vermeiden, wird empfohlen, dass Unternehmensanalysten, die die Benutzeranforderungen verstehen, einen grundlegenden Drahtrahmen erstellen und dann mit Designern zusammenarbeiten, um die Wireframes weiter zu verbessern. Eine weitere Schwierigkeit bei Wireframes besteht darin, dass sie nicht effektiv interaktive Details aufweisen, da sie statische Darstellungen sind. Das moderne UI-Design umfasst verschiedene Geräte wie Expansion Panels, Schwebeffekte und Karussells, die eine Herausforderung für 2-D-Diagramme darstellen.^[1]^{: 169}

Der Hauptvorteil von Wireframes besteht darin, dass sie verwendet werden können, um auf agile Weise an jeder Schnittstelle zu iterieren. Dies geschieht durch einen Prozess, der oft als Usability -Tests bezeichnet wird, bei der Benutzer die Möglichkeit haben, mit der Schnittstelle zu interagieren und entweder laut über ihren Denkprozess nachzudenken oder strukturiertere Fragen zu beantworten. Nach jedem Versuch mit einem Benutzer kann ein Benutzererfahrungsforscher gemeinsame Interaktionen mit der Schnittstelle identifizieren, die Daten synthetisieren und entsprechend neu gestalten.^[5]

Aufgrund der allgemein niedrigeren Art von Wireframe ist es sehr einfach und kostengünstig, Änderungen vorzunehmen. Der Punkt eines Drahtmodus besteht darin, das Design der grundlegenden Struktur, das Interaktionsmuster auf hoher Ebene innerhalb einer Grenzfläche, zu erfassen, auch als kritische Punkte bezeichnet.^[5] Daher ermöglicht es einem Designer wirklich, schnell zu arbeiten, perfekt für eine agile Umgebung, in der Gruppenmitglieder zusammenarbeiten, um die nächste Iteration zu "sprint".

Wireframes können unterschiedliche Detaillierungsstufen haben und können in zwei Kategorien in Bezug auf die Treue unterteilt werden oder wie genau sie dem Endprodukt ähneln.

Niedrigkundig

Ein raues Skizze oder ein schnelles Modell ähnelt schneller Drahtgitter mit niedrigem Fidelity können schnell erzeugt werden. Diese Wireframes helfen einem Projektteam dabei, Ideen zu kommunizieren und effektiver zusammenzuarbeiten, da sie abstrakter sind und Rechtecke und Kennzeichnung zur Darstellung von Inhalten verwenden.^[4]^{: 185} Dummy -Inhalt, lateinamerikanischer Füllstofftext (Lorem Ipsum), Beispiel- oder symbolische Inhalte werden verwendet, um Daten darzustellen, wenn realer Inhalte nicht verfügbar sind.^[1]^{: 175} Anstatt tatsächliche Bilder zu verwenden, kann beispielsweise ein Platzhalter -Rechteck verwendet werden.

Low-Fidelity-Wire-Rahmen können verwendet werden, um die Teamkommunikation bei einem Projekt zu erleichtern, und wird in den frühen Stadien eines Projekts verwendet.^[6]^[7]

Hi-Fi

Drahtrahmen mit hohem Fidelity werden häufig zum Dokumentieren verwendet, da sie ein Detailniveau enthalten, das dem Design der tatsächlichen Webseite genauer entspricht und so die Erstellung länger dauert.^[4]^{: 185}

Für einfache oder niedrig fädelische Zeichnungen, Papierprototyping ist eine gemeinsame Technik. Da diese Skizzen nur Darstellungen sind, Anmerkungen- Adjacent Notes, um das Verhalten zu erklären - sind nützlich.^[1]^{: 194} Für komplexere Projekte ist das Rendern von Wireframes mit Computersoftware beliebt. Einige Tools ermöglichen die Einbeziehung der Interaktivität einschließlich Flash -Animationund Front-End-Webtechnologien wie, wie, Html, CSS, und JavaScript.

Die High -Fidelity -Wire -Wire -Rahmen umfassen mehr reale Inhalte, spezifische Typografie -Auswahlmöglichkeiten und Informationen zu Bildabmessungen. Im Gegensatz zu Drahtrahmen mit niedriger Wiedergabetreue können High -Fidelity -Drahtbeamte tatsächliche Bilder enthalten. Farbauswahl sind nicht enthalten, aber unterschiedliche Werte in der Farbe können in Graustufen dargestellt werden.^[6]^[7]

Elemente von Wireframes

Der Skelettplan einer Website kann in drei Komponenten unterteilt werden: Informationsdesign, Navigationsdesign und Schnittstellendesign. Seit dem Seitenlayout kommen diese Komponenten zusammen, während Drahtframing die Beziehung zwischen diesen Komponenten darstellt.^[3]^{: 131}

Informationsdesign

Informationsdesign ist die Präsentation - Plakement und Priorisierung von Informationen auf eine Weise, die das Verständnis erleichtert. Informationsdesign ist ein Bereich von Benutzer-Erfahrung-Design, um Informationen für eine klare Kommunikation effektiv anzeigen. Für Websites sollten Informationselemente auf eine Weise angeordnet werden, die die Ziele und Aufgaben des Benutzers widerspiegelt.^[3]^{: 126}

Navigationsdesign

Das Navigationssystem bietet eine Reihe von Bildschirmelementen, mit denen der Benutzer Seite über die Website auf Seite verschieben kann. Das Navigationsdesign sollte die Beziehung zwischen den Links kommunizieren, damit die Benutzer die Optionen für die Navigation der Website verstehen. Häufig enthalten Websites mehrere Navigationssysteme wie globale Navigation, lokale Navigation, ergänzende Navigation, kontextbezogene Navigation und Höflichkeitsnavigation.^[3]^{: 120–122}

Schnittstellen-Design

Das Design der Benutzeroberfläche umfasst das Auswahl und Anordnen von Schnittstellenelementen, mit denen Benutzer mit der Funktionalität des Systems interagieren können.^[3]^{: 30} Das Ziel ist es, zu erleichtern Benutzerfreundlichkeit und Effizienz so viel wie möglich. Gemeinsame Elemente, die im Schnittstellendesign zu finden sind, sind Aktionsschaltflächen, Textfelder, Kontrollkästchen, Optionsschaltflächen und Dropdown-Menüs.

Siehe auch

Verweise

^ ^a ^b ^c ^d ^e ^f ^g ^h ⁱ ^j Brown, Dan M. (2011). Kommunikationsdesign: Entwicklung der Website -Dokumentation für Design und Planung entwickeln (2. Aufl.). Neue Reiter Presse. ISBN 978-0321712462.
^ ^a ^b ^c Angeles, Michael (25. September 2014). ""Wireframes"". Konigi Wiki. Archiviert von das Original Am 2018-05-05. Abgerufen 2011-03-25.
^ ^a ^b ^c ^d ^e ^f Garrett, Jesse James (2010). Die Elemente der Benutzererfahrung: benutzerzentriertes Design für das Web und darüber hinaus. Neue Reiter Presse. ISBN 978-0321683687.
^ ^a ^b ^c ^d Wodtke, Christina; Govella, Austin (2009). Informationsarchitektur: Blaupausen für das Web (2. Aufl.). Neue Reiter Presse. ISBN 978-0321600806.
^ ^a ^b https://wtf.tw/ref/holtzblatt.pdf^{[Bare URL PDF]}
^ ^a ^b "Low-Fidelity gegenüber High-Fidelity-Wire-Rahmen-standhaft kreativ". Standhaft kreativ. 2016-09-13. Abgerufen 2018-02-06.
^ ^a ^b "Wireframes: Low-Fidelity vs. High Fidelity". Dupont Creative. 2016-11-27. Abgerufen 2019-07-08.

[brown-1] ^ ^a ^b ^c ^d ^e ^f ^g ^h ⁱ ^j Brown, Dan M. (2011). Kommunikationsdesign: Entwicklung der Website -Dokumentation für Design und Planung entwickeln (2. Aufl.). Neue Reiter Presse. ISBN 978-0321712462.

[konigi-2] Angeles, Michael (25. September 2014). ""Wireframes"". Konigi Wiki. Archiviert von das Original Am 2018-05-05. Abgerufen 2011-03-25.

[garrett-3] ^ ^a ^b ^c ^d ^e ^f Garrett, Jesse James (2010). Die Elemente der Benutzererfahrung: benutzerzentriertes Design für das Web und darüber hinaus. Neue Reiter Presse. ISBN 978-0321683687.

[wodtke-4] Wodtke, Christina; Govella, Austin (2009). Informationsarchitektur: Blaupausen für das Web (2. Aufl.). Neue Reiter Presse. ISBN 978-0321600806.

[Holtzblatt-5] ttps://wtf.tw/ref/holtzblatt.pdf^{[Bare URL PDF]}

[:0-6] "Low-Fidelity gegenüber High-Fidelity-Wire-Rahmen-standhaft kreativ". Standhaft kreativ. 2016-09-13. Abgerufen 2018-02-06.

[dupont-7] "Wireframes: Low-Fidelity vs. High Fidelity". Dupont Creative. 2016-11-27. Abgerufen 2019-07-08.

[1]

[2]

[3]

[4]

[5]

[6]

[7]