Das Prototyping ist eine wichtige Phase in der Webentwicklung, mit der Sie die DNA eines Projekts in einem frühen Stadium identifizieren und formen können. In den letzten Jahren hat die Anzahl der Online-Dienste und -Tools für das Prototyping erheblich zugenommen. In dieser Überprüfung werden 10 Dienste zum Erstellen visueller Sitemaps vorgestellt.

Bevor Sie mit der Beschreibung der Tools fortfahren, ist es nicht überflüssig, die Terminologie zu verstehen.

Eine Sitemap ist die Struktur der Site-Seiten, die in einem hierarchischen Modell dargestellt werden. Ein solches Schema hilft dabei, das Volumen der Seiten, die eine Site bilden, zu bewerten und die Logik ihrer Beziehung zu verstehen. Manchmal sind dies Schemata, die in Organisation und Struktur primitiv sind. Und manchmal sehr komplex mit mehrstufigen Verschachtelungskarten. Websites helfen bei der Planung der Verteilung von Inhalten und der Navigationsmechanismen für eine zukünftige Website.

Betrachten Sie drei Arten von Sitemaps:

Visuelle Sitemaps werden als Hilfselement bei der Projektplanung, -analyse und -prototypisierung verwendet. Heute ist der Beginn der Arbeit an einem Projekt ohne vorherige Planung kaum vorstellbar. Die Sitemap hilft dabei, die Mechanismen der zukünftigen Navigation besser zu verstehen und die Menge der erforderlichen Inhalte zu bewerten. Die visuelle Sitemap ist ein wichtiges Element beim Aufbau der Kommunikation innerhalb des Entwicklungsteams. Dank der visuellen Struktur der Site wird die Diskussion, Bewertung und Zuweisung von Ressourcen erheblich vereinfacht.

HTML-Website-Vorlagen sollen Ihnen beim Navigieren auf Ihrer Website helfen. Die Tradition, eine separate Seite mit einer Sitemap zu erstellen, wird als veraltet angesehen. Dieser Ansatz ist jedoch nicht überflüssig, wenn das Projekt eine komplexe Struktur und eine mehrstufige Verschachtelung aufweist.

XML-Sitemaps sind für Benutzer verborgen, aber wichtig. Durch die Beschreibung der Struktur der Site und der Beziehung der Seiten erleichtern XML-Sitepamps Suchmaschinen die Analyse der Site. Daher ein positiver Effekt auf das Ranking. In XML-Sites sind die Klarheit der Strukturbeschreibung und die verwendete Syntax wichtig, da die Crawler der Suchmaschinen keine Inkonsistenz und Schlaffheit des Codes tolerieren. Das Sitemap-XML ersetzte die ältere Methode "Direkter Download in Suchmaschinen" auf einer eigenen Seite. Jetzt wird die Sitemap direkt geladen oder die Entwickler warten nur, bis die Suchmaschine die Datei selbst findet. Durch Aktualisieren der Site-Map-Datei mit einer neuen Struktur können Sie Seiten schneller indizieren als mit der standardmäßigen automatischen Suchmaschinenprozedur.

Warum brauchen wir visuelle Sitemaps?

Website-Planung und Prototyping sind seit langem der Industriestandard. Meistens wird zuerst die Mind Map des Projekts erstellt. Dies wird durchgeführt, um die Haupt- und Nebenelemente der zukünftigen Site sowie die Aufgaben zu bestimmen, die die Site oder der Service lösen wird.

In der nächsten Phase, einer detaillierten Hierarchie der Seiten, wird deren Struktur geplant. Diese Phase erfordert Reflexion und Diskussion. Daher sollte ein solcher Prototyp allen am Prozess Beteiligten (Programmierern, Designern, Entwicklern, Inhaltsmanagern) klar sein. Die formalisierte Struktur der Site (Sitemap) wird zum Ausgangspunkt.

Octopus.do

Ein Service mit einem minimalistischen und frischen Ansatz für das Interface-Design, der 2019 eingeführt wurde. Ohne unnötige Details und Add-Ons arbeitet Octopus schnell und dank einer sauberen visuellen Sprache funktioniert es.

Die Grundidee des Octopus-Website-Designs besteht darin, Seiten aus Blöcken zu bilden. Solche Designs sind klar und so gestaltet, dass sie einen detaillierten Überblick über die Struktur der zukünftigen Seite geben.

Testen Sie Octopus.do ohne Registrierung. Sie müssen nur ein Profil registrieren, wenn das Projekt gespeichert wird.

Die intuitive Benutzeroberfläche ist nicht mit Elementen und Animationen überladen. Obwohl die einzelnen Symbole etwas klein erscheinen können. Das Erstellen und Hinzufügen von Blöcken ist mit offensichtlichen Mechanismen schnell und einfach.

Es gibt eine bequemere Möglichkeit, einen Block hinzuzufügen. Drücken Sie einfach die Eingabetaste. Ein neuer Block wird unten auf der Seite angezeigt. Mit dieser Methode können Sie den Inhalt schnell mit nur einer Tastatur ausfüllen. Drag'n'drop läuft vorhersehbar und schnell.

Blöcken können Farben aus einer bestimmten Farbpalette zugewiesen werden:

Benutzer von kostenpflichtigen Octopus.do-Abonnements können Export-Sitemaps in PNG und PDF exportieren. Mit einem kostenlosen Abonnement können Sie einen direkten Link zum Projekt freigeben. Gleichzeitig können externe Benutzer Änderungen an der Sitemap vornehmen, was die Teamarbeit vereinfacht.

Die Organisation von Informationsebenen und Abschnitten des Dienstes wird in übersichtlichen Popups geöffnet. Dies erweckt den Eindruck, dass der Benutzer den Arbeitsbereich eines minimalistischen Editors nicht verlässt.

Die Funktion zum Hinzufügen einer Textbeschreibung zu Blöcken ist nützlich für die Planung von Inhalten in einem Projekt. Das Popup wird durch Klicken auf das Dokumentsymbol auf der rechten Seite des Blocks aufgerufen:

Bei der Zusammenstellung von Inhalten ist es häufig erforderlich, die Position von Bildmaterial (Fotos, Illustrationen) schnell zu bestimmen. Die Funktion zum Hinzufügen von Bildern hilft bei der Bewältigung dieser Aufgabe:

Übrigens können Sie durch Hinzufügen von Bildern zur Struktur vollwertige Layouts für das Seitendesign einfügen, sobald diese fertig sind.

Eine Besonderheit von Octopus ist das Vorhandensein der Schätzfunktion. Die Schnittstelle ist in Form eines Wanderfeldes implementiert, das eine Rechner-Tabelle zur Schätzung der Arbeitskosten enthält. Mit einem bekannten Stundensatz für eine bestimmte Prüfung können Sie die Zeitkosten und das Budget des Projekts schätzen.

Benutzer haben die Möglichkeit, Seiten in einer Hierarchie zu duplizieren und eine Kopie des Projekts zu erstellen. Kontrolle über das Sitemap-Design: Anpassbare Seitenrahmenstile und -stile für Smartphone-Frames sowie ein verbesserter Teamwork-Mechanismus.

Zusammenfassung

Eine rationale Reihe von Werkzeugen und ein intelligentes Interface-Design, das dem Zeitgeist entspricht. Regelmäßige Updates und Funktionsverbesserungen durch das Octopus-Team machen den Service attraktiv und natürlich nützlich.

Kosten, Abonnement : Ein kostenloser Plan beinhaltet 1 aktives Projekt. Bezahlte Abonnements ab 8 USD pro Monat.
Benutzerfreundlichkeit : für Anfänger und Fortgeschrittene
Design : ★★★★ ☆
Teamarbeit : ✓
Exportieren : Link, PDF und PNG (nur für bezahlte Benutzer)

Trübsinn

Die Notwendigkeit einer Registrierung ist ein Vorteil des Gloompas-Service. Der Benutzer befindet sich sofort in einer Arbeitsumgebung mit minimalistischem Design. Die Benutzeroberfläche ist intuitiv und hilft Ihnen, sich schnell in den Prozess einzubringen. Das Hinzufügen und Entfernen von Sitemap-Blöcken erfolgt mit verständlichen und vorhersehbaren Mechanismen.

Die Möglichkeit, die Farbe jedes einzelnen Blocks anzupassen und die Schriftgröße festzulegen, ist eine praktische Funktion, mit der Akzente in der Sitemap gesetzt werden können.

Separat sind die Ansichtseinstellungen zu beachten: Kartenansicht, Matrixansicht und Gliederung. Abhängig von der Struktur und dem Umfang des Projekts können Sie auswählen, wie die Sitemap angezeigt werden soll.

In Projekten mit einer umständlichen Struktur und einer mehrstufigen Verschachtelung ist das Reduzieren und Erweitern einer Gruppe von Seiten praktisch. Gloomaps ist ein kostenloser Service, aber nicht ohne Einschränkungen. Der Link zum Projekt wird 14 Tage lang gespeichert, und jeder neue Besuch der Projektseite verlängert die Verfügbarkeit des Links für die nächsten 14 Tage. Soweit bekannt, können keine privaten Projekte erstellt werden. Funktionen zur automatischen Erstellung von Sitemaps werden nicht bereitgestellt.

Für diejenigen, die den Dienst regelmäßig nutzen, ist es nützlich, Verknüpfungen zu verwenden, die in der Menüleiste zum Verlassen beschrieben werden. Die Exportfunktionen in verschiedenen Formaten erweitern die Möglichkeit, die erstellte Sitemap freizugeben.

Zusammenfassung
Ein kostenloser Service mit einem optimalen Funktionsumfang und zahlreichen Möglichkeiten zum Exportieren eines fertigen Projekts.

Kosten, Abonnement : kostenlos
Benutzerfreundlichkeit : geeignet für Anfänger
Design : ★★★ ☆☆
Teamarbeit : ✓
Exportieren : Link, PNG, PDF, XML

Flowmapp

Flowmapp ist intuitiv und reich an Vorlagen und hilft dabei, sowohl visuelle Sitemaps zu erstellen als auch Benutzerflüsse zu planen.

Sie müssen sich zuerst registrieren. Das Projekt kann:

von vorne anfangen
Import aus XML-Datei
Erweitern Sie die vorhandene Vorlage

Die vorbereiteten Vorlagen enthalten drei Arten von Projekten: E-Commerce, Unternehmensprojekt und Nachrichtenportal.

Während des Kennenlernens des Dienstes werden regelmäßig in der unteren rechten Ecke nützliche Empfehlungen und Tipps zu Tools und Funktionen der Arbeitsumgebung angezeigt.

Animationen und Reaktionen von Schnittstellenelementen helfen, sich in den Prozess einzubringen und grundlegende Manipulationen zu lernen. Bequem implementierte Gruppenzuordnung von Seiten zum Löschen oder Ändern der Beschriftung.

Einer der Hauptvorteile sind die visuellen Seitenvorlagen. Die Vorlagenbibliothek deckt die meisten möglichen Informationsmuster ab - ein unverzichtbares und klares Merkmal bei der Vorbereitung und Planung von Inhalten für die zukünftige Site.

Und für diejenigen, die hauptsächlich an der Struktur interessiert sind, können Sie zu einer kompakten Ansicht mit nur Überschriften wechseln.

Für die Navigation wurde dem Standardfeatureset eine recht praktische Mechanik, Project Map, hinzugefügt. Project Map kombiniert sowohl visuellen als auch mechanischen Wert - das Bewegen der Struktur großer Projekte wird vereinfacht.

Zu jeder Seite des Projekts können Sie eine erweiterte Beschreibung hinzufügen und einzelne Dateien anhängen. Diese Funktion ist nützlich, um die Site mit Inhalten zu füllen.

Mit den breiten Exportoptionen in den Formaten SVG und PNG können Sie die beste Option auswählen und sogar die Bildauflösung am Ausgang einstellen.

Zusammenfassung
Service mit einem durchdachten Funktionsumfang und einer schönen Oberfläche. In einem kostenlosen Abonnement stehen Funktionen in einer Vielzahl von Funktionen zur Verfügung. Geeignet für eine effektive und qualitativ hochwertige Präsentation von Sitemap-Projekten.

Kosten, Abonnement : Der kostenlose Plan sieht 1 aktives Projekt und 100 MB Speicherplatz ohne Einschränkung für Mitarbeiter vor. Bezahlte Abonnements ab 8 USD pro Monat für die jährliche Zahlung.
Benutzerfreundlichkeit: für Anfänger und Fortgeschrittene
Design : ★★★★★
Teamarbeit : ✓
Exportieren : Link, PNG, SVG, PDF, DOCX

Writemaps

Relativ einfach in der Organisation Writemaps hilft beim Entwerfen von Sitemaps und beim Planen von Projektinhalten. Um den Dienst zu testen, müssen Sie sich registrieren.

Aus gestalterischer Sicht kann die Benutzeroberfläche als „Folk“ oder „Plain“ bezeichnet werden. Ein kostenloser Plan bietet Zugriff auf einen Teil der Funktion: 3 aktive Sitemaps mit 50 Seiten. Die restlichen Funktionen stehen bezahlten Benutzern zur Verfügung.

Zu den kostenpflichtigen Funktionen gehört die Möglichkeit, Projektseiten farbig hervorzuheben, Inhalte zu kombinieren und hinzuzufügen, Abschnitte zu erstellen, das Projekt freizugeben und Sitemaps als PDF zu exportieren. Obwohl für kostenlose Pläne, Export nach CSV und XML bereitgestellt wird.

Es ist erwähnenswert, dass das Umschalten zwischen der Sitemap und dem Inhalt bequem und klar implementiert wird. Eine Liste mit Verknüpfungen beschleunigt die Arbeit.

Zusammenfassung
"Nur das Notwendigste" ist genau, wie Sie den Ansatz zur Funktionalität der kostenlosen Version charakterisieren können. Ein kostenpflichtiges Abonnement eignet sich zusätzlich zur allgemeinen Struktur der Website für Benutzer, die Inhalte verbreiten möchten.

Kosten, Abonnement : Der kostenlose Plan umfasst 3 aktive Projekte mit einem Limit von 50 Seiten. Bezahlte Abonnements ab 14,99 USD pro Monat.
Benutzerfreundlichkeit: für Anfänger und Fortgeschrittene
Design : ★★ ☆☆☆
Teamarbeit : ✓
Export : CSV, XML, PDF und Link (nur für bezahlte Benutzer)

Raarchie

Die Beta-Version des Projekts verfügt über bescheidene Funktionen. Die Sitemap wird sowohl von Grund auf neu als auch in generativer Reihenfolge über den Link zur Site erstellt.

Zum Zeitpunkt der Veröffentlichung der Überprüfung sind die Mechanismen zum Hinzufügen von Seiten wie folgt angeordnet: Sie müssen das Kontextmenü aufrufen, indem Sie auf die Seitenblöcke klicken.

Es werden keine zusätzlichen Einstellungen für die Blockanzeige bereitgestellt. Drag'n'drop funktioniert jedoch verständlicherweise. Mit den Anzeigeformaten des Schemas können Sie das Projekt in ein biomorphes Schema umwandeln. Vielleicht erscheint diese Ansicht klar und angemessen.

Zum Zeitpunkt der Veröffentlichung ist der Export nur in eine CSV-Datei verfügbar. Sie können keinen direkten Link freigeben.

Kosten, Abonnement : kostenlos
Benutzerfreundlichkeit : für Anfänger
Design : ★★ ☆☆☆
Teamarbeit :
Export : CSV

Visuelle Sitemaps

Im Visual Sitemaps-Dienst werden Sitemaps auf der Grundlage bereits gestarteter Projekte automatisch erstellt. Das Tool crawlt die Site-Struktur und erstellt Screenshots von Seiten in voller Größe. Gleichzeitig bestimmt der Benutzer die Anzahl der Screenshots und die Tiefe des Crawls in den Ebenen. Benutzer mit kostenlosem Abonnement haben Zugriff auf eine Tiefe von nicht mehr als 2 Ebenen.

Der Crawling-Prozess ist relativ schnell. Wenn das Projekt jedoch umfangreich ist, ist es ratsam, den Prozess zu starten und sich von anderen Aufgaben ablenken zu lassen. Der Dienst benachrichtigt die Site-Bereitschaft automatisch per E-Mail. Das Projekt wird als PDF exportiert.

Zum Zeitpunkt der Veröffentlichung gibt es nicht so viele zusätzliche Funktionen, aber Kommentare zu Screenshots von Seiten, die Möglichkeit, die Projektstruktur neu zu organisieren und Projekte mit einem Passwort zu schützen, wurden angekündigt.

Zusammenfassung
Visuelle Sitemaps sind praktisch für die vorläufige Analyse des Projekts. Insbesondere, wenn das Layout der Seiten überprüft und bewertet werden muss.

Kosten, Abonnement : Ein kostenloser Plan sieht die Registrierung eines Benutzers und 50 Screenshots vor, wobei die Tiefe des Crawls auf zwei Ebenen begrenzt ist. Bezahlte Abonnements ab 29 USD pro Monat.
Benutzerfreundlichkeit: für Anfänger und Fortgeschrittene
Design : ★★★★ ☆
Teamarbeit : ✓
Exportieren : Link, PDF

Slickplan

Der multifunktionale Slickplan-Dienst umfasst einen Site Map Designer, ein Diagramm und ein Tool zur Erstellung von Flüssen. Eine breite Palette von Tools und Inhaltsvorlagen für die Inhaltsplanung.

Die Umgebung ist logisch, der Arbeitsbereich ist klar von den Navigationselementen getrennt. Die Navigationsleiste übernimmt die Logik klassischer Desktopanwendungen. Sie können eine Sitemap von Grund auf neu erstellen oder importieren: Sie können XML- und Textdateien sowie einen integrierten Crawler verwenden.

Die Mechanik der Blockmanipulation ist intuitiv. Das Hinzufügen neuer Seiten ist schnell und mit Drag & Drop-Objekten können Sie die Reihenfolge und Hierarchie ändern. Zu den Einstellungen für jedes Element (Seite, Block) der Sitemap gehören:

Hinzufügen von Inhalten (Text und Multimedia)
Notizen hinzufügen
Auswahl des Seitentyps
Verteilungsentwurfsvorlage
Diagramme
Link hinzufügen

In Slickplan können Sie eine Sitemap nicht nur mit Hilfe vorbereiteter Farbschemata, sondern auch individuell stilisieren. Einstellungen finden Sie auf der Registerkarte Stile in der oberen Symbolleiste.

Teamwork wird im Detail umgesetzt. Zusätzlich zu Benutzern mit Editorrechten können Sie Benutzer verbinden, deren Rechte auf das Anzeigen des Projekts beschränkt sind. Ein Abschnitt mit Kommentaren hilft bei der Online-Diskussion über das Projekt.

Der Dienst ermöglicht die Verbindung von Google Analytics. Dies ist eine Besonderheit und nützliche Funktion von Slickplan. Durch die Integration mit Diensten von Drittanbietern (Basecamp, Slack und andere) können Sie das Projekt in einem praktischen Format freigeben. Das Projekt kann passwortgeschützt sein.

Mit diesem Funktionsumfang sollten Sie natürlich keine kostenlosen Abonnements erwarten. Eine 30-tägige Testphase führt zur Auswahl eines geeigneten Plans ab 9,99 USD pro Monat.

Zusammenfassung
Umfangreicher Funktionsumfang und intelligente Benutzeroberfläche. Eine Vielzahl von Funktionen und Exporteinstellungen.

Kosten, Abonnement : 30 Tage Testzeit. Bezahlte Abonnements ab 9,99 USD pro Monat.
Benutzerfreundlichkeit: für Benutzer mittlerer und fortgeschrittener Stufen
Design : ★★★★ ☆
Teamarbeit : ✓
Exportieren : Link, PDF, EPS, HTML, CSV, TXT, DOCX, Slickplan Sitemap XML

Dynomapper

Um sich in Dynomapper umzusehen, müssen Sie ein Konto erstellen. Eine 14-tägige Testphase ist verfügbar. Die Bekanntschaft mit dem Dienst beginnt mit einem visuellen Video-Explorer.

Wie bei den erweiterten visuellen Site-Mapping-Diensten wird der Benutzer aufgefordert, das Projekt von Grund auf neu zu starten oder den Export zu verwenden. Crowling gibt es übrigens auch.

Es ist erwähnenswert, dass das Design der Umgebung zurückhaltend und konservativ ist. Das Erstellen einer Sitemap ähnelt eher einer klassischen Interaktion mit Explorer (Win) oder Finder (Mac). Die Struktur der Site wird im Gegensatz zu den zuvor beschriebenen Diensten in einer Form angezeigt, die einem Dateibaum ähnelt.

Kompakt und spricht diejenigen an, die an eine solche Interaktion gewöhnt sind. Der Vorschaumodus wird zwar bereits in Form eines Flussdiagramms angezeigt und bietet 4 zusätzliche Anzeigetypen.

Die Einstellungen für die Eigenschaften und Funktionen von Elementen befinden sich bequem im rechten Bereich der Registerkarten:

Seite (erweiterte Seiteninformationen)
Inhalt (Planen (Hinzufügen) von Text- und Multimedia-Inhalten)
Analytik
Kommentar

Ein privates Projekt steht nur Benutzern zur Verfügung, die mit dem Konto verbunden sind.

Mit den flexiblen Exportoptionen in PDF können Sie vor dem Speichern das Format (die Größe) auswählen. Darüber hinaus definiert und begrenzt der Benutzer die Anzahl der Verschachtelungsebenen für den Export.

Separate Manipulationen und Aktionen erfordern eine detailliertere Untersuchung des Hilfeabschnitts.

Zusammenfassung
Das Tool macht einen gründlichen Eindruck und impliziert höchstwahrscheinlich eine eingehendere Untersuchung von Projekten und die Arbeit mit Inhalten.

Kosten, Abonnement : 14 Tage Testzeit. Bezahlte Abonnements ab 49 USD pro Monat.
Benutzerfreundlichkeit: für Benutzer mittlerer und fortgeschrittener Stufen
Design : ★★ ☆☆☆
Teamarbeit : ✓
Exportieren : Link, PDF, CSV

Visual Site Mapper

Free Crawler, generiert automatisch eine Sitemap einer vorhandenen Site. Das Ergebnis des Crawls ist ein Diagramm der Links auf den Seiten der Website. In einigen Fällen kann das Ergebnis großräumig sein.

Die Ersteller des Dienstes haben den Quellcode auf Github ( https://github.com/alentum ) veröffentlicht. Der Crawler speichert den Verlauf der Anforderungen sorgfältig.

Kosten, Abonnement : kostenlos
Benutzerfreundlichkeit : für Anfänger
: ★★☆☆☆