So entwerfen Sie einen Website-Prototyp aus einem Wireframe

Sie haben vielleicht das alte Sprichwort gehört: "Zweimal messen, einmal schneiden." Genau deshalb sollten Sie eine Website planen, bevor Sie sie erstellen. Und hier kommt das Prototyping ins Spiel.

Bei der Gestaltung unserer Websites entwickeln wir uns vom Wireframing über das Prototyping bis hin zum vollständigen Design.

Ich wollte untersuchen und erweitern, was Prototyping eigentlich bedeutet, indem ich Sie durch den gesamten Prozess führte.

Beachten Sie, dass ich einen weiteren Kurs erstellt habe, der den ersten Schritt beim Entwerfen einer Website abdeckt: das Erstellen eines Drahtgitters. Sie können über Wireframing lesen und meinen 30-minütigen Videokurs hier ansehen.

In diesem Tutorial werden wir Folgendes behandeln:

  1. Was für ein früher Prototyp ist
  2. Erstellen einer Struktur: Rahmen, Zeilen, Spalten
  3. Hinzufügen von Inhalten: Header, Slider, Info
  4. Abschnitte entwerfen
  5. Fazit: Was wir aus dem Prototyping-Prozess gelernt haben

Was ist ein früher Prototyp?

Ein Prototyp ist normalerweise die sekundäre Iteration eines Entwurfs, da er auf einem Drahtmodell aufgebaut ist.

Bei einem Drahtmodell handelt es sich normalerweise um eine einfache gezeichnete Skizze mit Papier, Stift oder Online-Tool. Als nächstes bauen wir den Prototyp, der unser verfeinertes Modell für die Website oder App ist.

Werfen wir einen Blick auf das frühe Drahtmodell, das wir im vorherigen Artikel erstellt haben:

Es verfügt über eine Reihe von Seiten, Abschnitten und Bereichen, in denen später Text und Bilder hinzugefügt werden.

Das Ziel des Prototyps ist es also, dies visuell zu erstellen, ohne jedoch Farben oder Bilder hinzuzufügen.

In diesem Beispiel werde ich Figma verwenden, um den Prototyp zu erstellen. Hier können Sie den gesamten Figma-Prototyp anzeigen.

So erstellen Sie eine Website-Prototypstruktur: Rahmen, Zeilen, Spalten

Bei der Erstellung des Drahtgitters haben wir die Gitter berücksichtigt - aber sie wurden von Hand gezeichnet.

Wenn wir einen frühen Prototyp erstellen, müssen wir sie richtig definieren, damit das gesamte Design der Gitterstruktur folgt.

In diesem Beispiel verwende ich ein 12-Spalten-Design mit einer regulären Breite von 1140 Pixel, das traditionell in Bootstrap-Designs verwendet und verwendet wird. Dies ergibt einen Abstand von 15 bis 30 Pixel zwischen den Rastereinheiten.

Dies ist später nützlich, wenn wir die Spalten für die mobile Reaktionsfähigkeit in Zeilen reduzieren.

In Figma können Sie eine eigene Rasterstruktur erstellen. Beachten Sie jedoch, dass Sie (oder eine andere Person) diese Designs später tatsächlich codieren müssen.

Berücksichtigen Sie beim Entwerfen unbedingt den Entwickler.

Hinzufügen von Inhalten zu einem Website-Prototyp: Kopfzeile, Schieberegler, Abschnitte

Im Gegensatz zum Drahtmodell stellen wir keinen Text mehr mit Linien und keine Überschriften mit Blöcken dar. Stattdessen müssen wir Inhalte für ein Modell ausfüllen.

Dies bedeutet nicht, Farben oder Bilder hinzuzufügen. Das heißt aber, wir müssen echten Text zeigen.

In diesem Stadium ist es eine gute Idee, sicherzustellen, dass die Kopfzeile und die Abschnitte mit dem tatsächlichen Inhalt angezeigt werden, den sie enthalten sollen. Dies ermöglicht eine bessere Auswahl für Farben und Bilder in späteren Phasen des Designs.

In diesem Teil des Beispiels habe ich den Schieberegler mit Heldentext und einer Beschreibung darunter erstellt. In dieser Phase des Prototypenprozesses sind einige Dinge zu beachten:

  • Schriftgröße und Positionierung
  • Speicherort und Abstand des Inhalts
  • Ränder und Auffüllung zwischen Abschnitten und Inhalten

Entwerfen von Abschnitten des Website-Prototyps

Für das Prototyping und das endgültige Modell ist es wichtig, dass Sie Ihre Gruppen und Abschnitte überlagern. Abschnitte können Dinge wie den Header, den Abschnitt "Über uns" und den Abschnitt "Sponsoren" enthalten.

Sie können Gruppen in Ihrem UI-Tool erstellen (Figma tut dies mit Strg + G). Beschriften Sie Ihre Abschnitte und legen Sie sie mit verschiedenen Hintergrundfarben fest. Auf diese Weise können Sie sie leicht identifizieren und problemlos verschieben.

Zu oft wurde ich gebeten, bestimmte Teile einer Website in der Gruppierung auf und ab zu verschieben. Indem Sie alle Ihre Komponenten in Abschnitte gruppieren, erleichtern Sie sich während der Prototypenphase der Entwurfsarbeit erheblich.

Fazit: Was wir aus dem Prototyping-Prozess gelernt haben

Während wir den Rest des Designs ausbauen, ist es wichtig sicherzustellen, dass dieser frühe Prototyp kein vollständiges Modell für ein Website-Design wird.

Es ist leicht, sich mitreißen zu lassen. Das Ziel eines Prototyps nach einem Drahtmodell ist es jedoch sicherzustellen, dass wir die Entwicklung der Website weiter planen können.

Es ist viel einfacher, Probleme und Probleme in der frühen Planungsphase zu identifizieren und zu aktualisieren, bevor Sie mit der Erstellung des vollständigen Designs beginnen. Ein solches Prototyping dauert möglicherweise nur einige Stunden, kann jedoch später im Prozess Tage an Mühe sparen.

Sobald Sie mehrere Seiten als Prototyp erstellt haben, können Sie mit der vollständigen Modellierungsphase fortfahren. Dies beinhaltet das Herausfinden von Farbtheorie, Typografie und Bildern, die entsprechend funktionieren. Wir werden uns dies im nächsten Artikel dieser Reihe im nächsten Monat ansehen.

Bonus: Hinzufügen eines interaktiven Prototyplaufs

Für dieses Beispiel haben wir nur eine einzige Seite erstellt. Mit Prototyping können Sie jedoch auch ein emuliertes Beispiel für den Betrieb der Site erstellen.

Diese Emulation ist sehr nützlich, um Demos durchzuführen, zu testen, wie Kunden auf ein reales Beispiel eines frühen Modells reagieren, und um zu überarbeiten, wie alle Ihre Links fließen.

Ich hoffe, Ihnen hat dieser Artikel gefallen. Wenn Sie nicht wissen, wer ich bin, bin ich Adrian aus Australien. ? Ich habe einen winzigen Kanal auf Twitter und YouTube. Wenn Sie also mehr über mich erfahren oder meine Inhalte genießen möchten, schauen Sie sich mich irgendwann an.

  • Youtube: //youtube.com/adriantwarog
  • Twitter: //twitter.com/adrian_twarog