Bevor Sie eine Website oder Landingpage entwerfen und entwickeln, müssen Sie dies tun Erstellen Sie ein visuelles Modell, das die Struktur, Elemente und Funktionalitäten Ihres Projekts abbildet. Diese Vorarbeit ist nützlich, um einen Bedarf abzuschätzen oder die Arbeit der Webdesigner und -entwickler zu steuern, die Sie übernehmen werden.
Aber tatsächlich verbergen sich hinter dem Wort „Modell“ mehrere Formate und Methoden, die so viele Stufen zwischen Ideenfindung und Prototyping darstellen, mit dem gemeinsamen Ziel, … Modellieren Sie die digitale Schnittstelle eines Produkts oder einer User Journey.
Zoneneinteilung, Wireframe, Prototyp, Modell, Mockup …: Wir werden es in diesem Artikel versuchen klären Sie die Unterschiede zwischen diesen Terminologien. Dies ist eine Gelegenheit, die wir Ihnen anbieten können eine Auswahl an kostenlosen Tools (zumindest in der Test- oder Basisversion), um Ihre Website-Projekte, Anwendungen oder neuen Funktionen zu modellieren.
Wireframe und Zoning, was ist der Unterschied?
Nein, Zoneneinteilung und Wireframing bedeuten nicht dasselbe. Tatsächlich geht es sogar darum 2 komplementäre Schritte, die aufeinander folgen und es ermöglichen, das Design einer Weboberfläche zu optimierendie als visuelle Vorgaben dienen. Einfach ausgedrückt ist die Zoneneinteilung die „Entwurfsversion“ des Wireframes.
Was ist Zoneneinteilung?
In dem für uns interessanten Kontext, nämlich Digital und UX, ist die Erstellung von Zonen der vorläufige Schritt jeder Design- und Entwicklungsarbeit an einer Webseite.
Es ist ein grobe Schematisierung (manche sprechen von „Skizzieren“), das darauf abzielt, die verschiedenen Arten von Seiten sowie die Inhalte und Funktionalitäten, aus denen sie bestehen, schnell darzustellen.
Wir sprechen von „Zoning“, weil dieses Diagramm die „Zonen“ der zukünftigen Site/App/Seite in Form von Blöcken identifiziert.
Mehrere Ziele hier:
- Bestimmen Sie die Phasen der User Journey, skizzieren Sie eine Baumstruktur und identifizieren Sie die Seitentypen (Homepage, Kategorieseite, Produktseite usw.).
- Teilen Sie den Inhalt und die Funktionen auf, indem Sie sie priorisieren und auf jeder Seite anordnen (Kopfzeile, Fußzeile usw.): Mithilfe der Blöcke können Sie die Position und Bedeutung der verschiedenen Elemente visualisieren
- Validieren Sie einen Entwurf, bevor Sie ein Wireframe erstellen, um eine Antwort auf einen funktionalen Bedarf zu geben und seine technische/budgetäre Machbarkeit zu validieren
Unsere Auswahl an Zoning-Tools
Die beste Zoneneinteilung bleibt die mit Papier und Bleistift 🙂 Im Übrigen: Rahmenbox (etwas altmodisch, aber effektiv), das Werkzeug Whiteboard von Mockflow oder Drahtmodell wird den Zweck erfüllen.
Definition eines Wireframes
Eine logische Fortsetzung der Zonierung ist das Wireframe eine vollständigere Version der Site-Struktur zum Designer.
Wir sprechen von „Wireframe“, wörtlich „Drahtrahmen“, weil es so isteine Art Storyboard, in dem die validierten Elemente der Zoneneinteilung schematisch dargestellt werden, mit Details zu Ergonomie und Besonderheiten. Dabei sind die Inhalte stets fiktiv und der visuell-ästhetische Aspekt wird im 4. Schritt, dem Modell, thematisiert.
WAHR grafische Spezifikationen Das Wireframe ähnelt einem detaillierten Plan und verfolgt mehrere Ziele:
- Simulieren Sie Benutzerreisen, indem Sie die Navigationsschritte grafisch darstellen (Kinematik der Abfolge zwischen Aktionsschaltflächen und verschiedenen Seiten, Abfolge von Bildschirmen).
- Verfeinern Sie in der Art von Spezifikationen die Elemente der Zoneneinteilung (Abmessungen, Positionen, Details zum Inhalt, AusfĂĽllen von Feldern in Formularen usw.)
- Validieren Sie die Reaktion auf Bedürfnisse in Bezug auf Ergonomie, Funktionalität und Benutzererfahrung
- Ermöglichen Sie die technische Validierung des Projekts (Konsistenz der Architektur, Machbarkeit der Funktionalitäten).
- Lassen Sie das Projekt im Hinblick auf das Erstellungsbudget (Grafikdesign) und die Entwicklung vorab bewerten
Nach der Validierung dient das Wireframe den Webdesignern als Arbeitsgrundlage fĂĽr die Gestaltung der Modelle.
Kostenlose Tools zum Erstellen eines Drahtmodells oder zum Zeichnen einer Baumstruktur
Mein Favorit ist das schnelle und kostenlose Zeichnen der Baumstruktur Ihrer Website GlooMaps. Es handelt sich um ein kostenloses Tool, das sehr einfach zu bedienen ist und sehr praktische Anpassungs- und Freigabemöglichkeiten bietet:
Das Referenztool zum Erstellen eines Wireframes, mit kostenloser Testversion: Mockflow. Ganz einfach: Wir wählen eine Designbasis (Mobilgerät oder Computer) und wir Drag &038; Drop Elemente, die aus einer Bibliothek grafischer Inhalte ausgewählt wurden. Sie können mehrere Seiten erstellen und diese in einer Baumstruktur klassifizieren. Für die weniger Mutigen können Sie sogar vorgefertigte und sehr vollständige Wireframe-Modelle herunterladen und diese personalisieren.
Und außerdem: Spottdrossel (am wenigsten komplex, mit 6-tägiger kostenloser Testversion), Smartdraw, Drahtmodell (meiner Meinung nach eher zum Thema Zoneneinteilung, aber ich zitiere es trotzdem hier, weil es in der Basisversion funktionsfähig und kostenlos ist).
Beachten Sie, dass es auf dem Markt viele anerkannte Softwareprogramme zur Erstellung professioneller Wireframes gibt, mit vielen Möglichkeiten wie interaktiver Teamarbeit, Wiederherstellung/Transformation externer Dateien usw. Zu den bekanntesten zählen wir hier Balsamiqweit verbreitet in der Wirtschaft, oder sogar SkizzierenMac-Software, die eine 30-Tage-Testversion bietet und den Vorteil hat, für Wireframes, Mockups und endgültige Modelle verwendet zu werden.
Prototyp, Modell und Mockup, was ist der Unterschied?
Definition des Mockups
Ebenso wie Wireframing eine fortgeschrittenere Version des Zonings ist, Das Mockup ist eine verbesserte und dynamische Version des Wireframes : Wir wenden eine grafische Charta und Interaktivität zwischen den Elementen und den Seiten an.
Der letzte Schritt vor dem Modell ist daher das Mockup die treueste Version der zukünftigen Schnittstelle in Bezug auf Aussehen und Gefühl. Mit dem Mockup können Sie die Navigation und Bedienung der verschiedenen Elemente simulieren (Klick auf eine Schaltfläche). Aufruf zum HandelnAusfüllen eines Formulars, Auslösen von Fehlermeldungen usw.)
Da es ein reales Szenario ermöglicht, bezeichnet das Modell im weiteren Sinne die Werkzeuge, die dies ermöglichen simulieren die Visualisierung einer Schnittstelle auf dem Bildschirm eines Geräts (Computer, Handy oder Tablet, sogar auf einem T-Shirt oder einer Tasse, darüber habe ich im Artikel „15 kostenlose Tools zum Erstellen all Ihrer digitalen Inhalte ohne Photoshop“ gesprochen).
Kostenlose Tools zum Erstellen eines Modells
- Axureein kollaboratives Tool in professioneller Qualität, mit dem Sie Inhalte und Seiten animieren können (der erste Monat ist kostenlos).
- proto.iomit dem Sie die Navigation mit einer intuitiven und kollaborativen Benutzeroberfläche und einer umfangreichen Bibliothek anpassbarer Elemente simulieren können
- Origami 100 % kostenlos, aber 100 % Software zur Erstellung von Mac-Modellen
- MoqUps mit einer wirklich schönen Testversion, meiner Meinung nach das günstigste Tool, intuitiv, mit einer reichhaltigen ikonografischen Basis
- Vorstellungeine beliebte Lösung zum Erstellen oder Animieren von Dateien, die bereits in anderer Software wie der Adobe Suite oder Sketch erstellt wurden. Ziemlich cool, das erste Mockup ist kostenlos.
Definition des Modells
Das Modell ist die ultimative und endgültige Version vor der Entwicklung des Endprodukts : Es müssen keine fiktiven Inhalte und Elemente mehr validiert werden, das Layout, der Inhalt und die grafische Gestaltung sind endgültig. Die Mockups werden häufig im PSD-Format (dem Photoshop-Format) geliefert und enthalten die Mobil-, Tablet- und Desktop-Versionen der Benutzeroberflächen. Dies wird mit den Spezifikationen die grundlegende Unterstützung für die Arbeit der Entwickler sein.
Definition des Prototyps
Der Prototyp ist eine Simulationsversion des endgültigen Projekts. Es ist funktional und interaktiv und verfügt über alle Look-and-Feel-Attribute der endgültigen Benutzeroberfläche. Seine Entwicklung kann zwei Ziele haben:
- Experimental : Der Prototyp ist eine Testversion, um seine Verwendung mit einer Stichprobe von Benutzern vor einem endgĂĽltigen Start zu validieren. Wir reden darĂĽber Betaversion.
- Wirtschaftlich : Der Prototyp ist eine Simulationsversion, um den Appetit des Marktes zu testen oder das Produkt im Hinblick auf eine Investition vorzustellen, die die Entwicklung des Endprodukts ermöglicht. In der Welt des Unternehmertums und der Innovation sprechen wir über „ MVP »: Minimum Viable Product
Für einfallsreiche Menschen, die versuchen möchten, ihren Prototypen ohne Entwickler oder Grafikdesigner zu entwickeln, ist die Plattform Bubble.io verspricht, dies zu erreichen, ohne zu wissen, wie man programmiert. Die persönliche Nutzung ist kostenlos, also eine gute Möglichkeit, es auszuprobieren!
Zum Abschluss
Die Herausforderung bei der Auswahl eines CMS
In die Entwicklung großer digitaler Projekte (Website/Anwendung/E-Shop mit innovativen Funktionalitäten oder einer komplexen Baumstruktur) sind die Phasen des Interface-Designs kein Luxus: Es geht darum, einen Bedarfsausdruck zu übersetzen und die Entwicklung, das Design, die Ergonomie, Funktionalität und Benutzererfahrung.
Die Phasen der Modellierung, von der Zoneneinteilung bis zum Prototyping, garantieren die Entwicklung eines effektiven und brauchbaren Endprodukts. In dieser Perspektive, die Wahl des CMS (Content-Management-Systemdas Content-Management-System) ist von entscheidender Bedeutung, weil Es leitet die grafischen, interaktiven und funktionalen Möglichkeiten der zukünftigen Website.
Hinterfragen der Phasen der Modellierung…
Seien Sie vorsichtig, die beliebtesten CMS auf dem Markt demokratisieren die Erstellung von Websites tendenziell revolutionieren die traditionellen Schritte zur Erstellung funktionaler Schnittstellen (Shopify, Strikingly, Wix, Prestashop … siehe den ihnen gewidmeten Artikel hier).
Sie bieten vorgefertigte Vorlagen an Vorlagen zum Anpassenmit Hunderten von Funktionen, die in den Modus integriert werden können Drag &038; Drop : Gleichzeitig erstellen wir eine grafische Oberfläche, arrangieren eine Architektur und testen Funktionalitäten was das traditionelle Diagramm-Zoning > Wireframe > Mockup >-Modell in Frage stellt.
Wenn Sie sich für das Thema CMS der neuen Generation interessieren, hat Sébastien in diesem Artikel verschiedene Lösungen auf dem Markt verglichen!
