Auf Basis von Anwenderszenarien und Use Cases einer Website oder eines Onlineshop lassen sich Page-Flow-Diagramme erstellen. Ein Page-Flow-Diagramm nutzt die einfache Notation bestehend aus Pfeilen und Rechtecken um die Abfolge von Seiten darzustellen, die ein Anwender im Lauf seiner Customer-Journey aufruft. Dabei skizziert das Page-Flow-Diagramm in der Entwurfsphase einer Website auch den Idealfall eines bestimmten Szenarios, beispielsweise die Suche nach einem Produkt in einem Onlineshop die Auswahl dieses Produktes im Warenkorb bis zum Absschluss des Kaufprozesses. Nützlich ist ein Page-Flow-Diagramm mit Use-Case-Beschreibung als Aktivitätsdiagramm. Hier ist im Idealfall gleich durch die Beschriftung der Kanten und Transaktionspfeilen konkretisiert, von welchen Use Cases der betreffende Page Flow ausgelöst wird.
Den Ausgangspunkt bei der Modellierung eines Page Flows bildet in der Regel die Homepage, also die Startseite, die beim Aufruf der Domain angezeigt wird. Von dieser Webseite gelangt der Anwender über die Navigationsstruktur auf weiterführende Seiten, die in Abhängigkeit des betreffenden Anwendungsszenarios wiederum auf Unterseiten verweisen. Der Modellierungsprozess wird so lange fortgesetzt, bis die vollständige Seitenabfolge dokumentiert ist. Die Page-Flow-Diagramme bleiben jedoch noch relativ allgemein. In der Vorprojektphase und bei der Kalkulation eines Business Case unterstützen sie aber die Beurteilung der Komplexität einer Website sowie der Schätzung des Aufwands für jeden Use Case. Gleichzeitig ermöglichen Page-Flow-Diagramme erste Schlüsse hinsichtlich der Navigation zu relevanten Inhalten und dabei möglicherweise auftretenden Anwendungsprobleme. Im Optimalfall gelangt der User mit maximal drei bis vier Klicks zur gewünschten Ergebnisseite. Ein gut gestaltetes Page-Flow Diagramm kann aufzeigen, wie dieses Ziel gewährleistet ist. Eine vorhergehende Auswertung von Klickpfaden trägt zur Optimierung der Conversionrate bei.
Als Informationsquelle für die Webentwicklung eignen sich Page-Flow-Diagramme aufgrund ihres Allgemeinheitsgrades jedoch nur begrenzt. So bleibt beispielsweise unklar, welche Call2Action einer Seite den Page Flow auslösen. Bei der Ausarbeitung der Detailspezifikation müssen solche einfachen Page-Flow-Diagramme deshalb präzisiert werden. In der Praxis dienen Wireframes zu genau dieser Präzisierung. Der Begriff Wireframe leitet sich dabei vom englischen “Wire” also Draht ab; so werden Webseiten bei der Wireframe-Methode auf Basis verschiedener geometrischer Formen modelliert, die im Ganzen einem Drahtmodell ähnlich sind.