3 Top-Möglichkeiten zum Erstellen eines Website-Prototyps

Website-Modell von Ian Pilon

Website-Modell von Ian Pilon

Fragen: 'Wie kann ein Website-Prototyp am besten erstellt werden?' ist wie die Frage 'Was ist der beste Weg, um eine Website zu erstellen?' Es gibt keinen einzigen 'besten' Weg. Jeder einzelne Prototyp hat wie jede einzelne Website seine eigenen Stile, Ziele und Strategien.

In diesem Artikel werden drei der gängigsten Methoden zum Prototyping von Websites erläutert: Präsentationssoftware (hauptsächlich für Anfänger), codierte Prototypen (Mittelstufe bis Fortgeschrittene) und spezielle Prototyping-Apps (für alle Kompetenzstufen).



01. Prototyping mit Präsentationssoftware

Keynote Promo Bild

Wie schwer ist es, Mixer zu lernen?
Keynote wird für den Bau von Prototypen immer beliebter

Für den Anfang gibt es das traditionelle PowerPoint, ein zuverlässiges Geschäftsmodell, das seit über zwei Jahrzehnten für Präsentationen verwendet wird. Wenn Sie nach einer moderneren Alternative suchen, wird Keynote immer beliebter.

Werfen wir einen Blick auf die Vor- und Nachteile, damit Sie eine fundierte Entscheidung treffen können.

Vorteile des Prototyping mit Präsentationsprogrammen

  • Vertrautheit: Sie kennen die Grundlagen und es ist nicht so schwer, erweiterte Funktionen wie Animationen, Folienübergänge und das Verknüpfen von Folien für Interaktionen zu erlernen
  • Grundlegende Elementbibliotheken: Dank einfach Wireframing Bibliotheken mögen Keynotopie können Sie schnell Drahtgitter mit niedriger Wiedergabetreue erstellen und diese dann zu einem anklickbaren Prototyp verknüpfen
  • Natürlicher linearer Fluss: Die Diashow dieser Tools führt Sie durch einen sequentiellen Benutzerfluss, der Sie dazu zwingt, neben der visuellen Darstellung auch über die Erfahrung nachzudenken. Für fortgeschrittene Benutzer können Sie Folien auf komplexe Weise verknüpfen, die über den linearen Verlauf hinausgehen

Nachteile des Prototyping mit Präsentationsprogrammen

  • Begrenzter Fokus: Wie im kostenlosen E-Book von UXPin beschrieben Der ultimative Leitfaden zum Prototyping Sobald Sie anfangen, mit erweiterten Benutzerabläufen und Interaktionen herumzuspielen, haben Sie im Grunde die Grenze der Präsentationssoftware erreicht
  • Eingeschränkte Zusammenarbeit: Die meisten Präsentationssoftware bieten keine Zusammenarbeit (außer Google Presentation). Der Nachteil ist, dass der kollaborativen Präsentationssoftware Interaktivität, Grafikmanipulation, Formen, Text und Farboptionen fehlen, die sie für das Prototyping lohnenswert machen. Wenn Sie ohne Kompromisse zusammenarbeiten möchten, halten Sie sich an ein Prototyping-Tool
  • Eingeschränktes Flussdiagramm: Obwohl es möglich ist, erweiterte Benutzerströme zu kommunizieren, ist dies nicht einfach und Sitemaps sind nicht mit den Prototypen verknüpft, wie dies in einer speziellen Prototyping-Software der Fall ist
  • Eingeschränkte Interaktivität: Einfallsreiche Benutzer können ziemlich weit kommen, wenn sie alle Funktionen in Keynote oder Powerpoint nutzen. Wenn Sie sich jedoch all diese Mühe machen, ist es möglicherweise einfacher und effektiver, auf etwas Spezialisiertes umzusteigen

Wenn Sie mehr erfahren möchten, bietet Keynotopia einige grundlegende Prototyping-Tutorials für Power Point und Keynote .

02. Codiertes (HTML) Prototyping

Eine der größten Fragen, die Designer beim Erstellen eines Website-Prototyps haben, ist, ob Code verwendet werden soll oder nicht. Diese Unsicherheit ergibt sich aus dem mangelnden Komfort einiger Designer beim Codieren: Sie wissen entweder nicht, wie es geht, oder sie mögen es nicht. Im Vergleich zu der unterhaltsameren und intuitiveren Methode, ein Prototyping-Tool zu verwenden oder sogar von Hand zu skizzieren, kann sich das Schreiben von Code mühsam anfühlen.

Heute gibt es mehr Gründe als je zuvor, frühzeitig mit dem Codieren zu beginnen. Die Wasserfallmentalität „Ich entwerfe es, du baust es“, die Designer in der Vergangenheit vertreten, ist veraltet, da die Technologie in großen Schritten voranschreitet und die Zusammenarbeit obligatorisch wird.

Das Prototyping im Code bietet einige deutliche Vorteile, vor allem aufgrund der Tatsache, dass Sie das Design in einer Form starten, die der endgültigen Form ähnelt.

bester 4k Monitor für die Videobearbeitung

Vorteile des codierten Prototyping

So konvertieren Sie ein Bild in Photoshop in den RGB-Farbmodus
  • Plattformunabhängig: HTML-Prototypen funktionieren auf jedem Betriebssystem, und niemand benötigt externe Software, um sie zu verwenden
  • Modular: HTML ist komponentenbasiert, was zur Steigerung der Produktivität beitragen kann
  • Kostengünstig: Es gibt viele kostenlose HTML-Texteditoren, aber Sie müssen einige Zeit damit verbringen, die Sprache zu lernen, bevor sie hilfreich ist (oder verwendet wird) dieses HTML-Spickzettel )
  • Technische Grundlage: Vorausgesetzt, Sie erstellen produktionsfertigen Code (und nicht nur für einen schnellen Prototyp), können Sie Zeit in der Entwicklung sparen

Codierte Prototypen können auf verschiedene Arten erstellt werden, aber HTML ist vielleicht das beliebteste. Die eigentliche Überlegung bei der Entscheidung, ob Code in Ihrem Prototyp verwendet werden soll oder nicht, ist natürlich Ihr Können. Nicht alle Designer können Code schreiben. Überfordern Sie sich also nicht, es sei denn, Sie sind technisch sicher.

Darüber hinaus kann das direkte Eintauchen in Code die Kreativität beeinträchtigen. Fragen Sie sich, wie viele Interaktionen und Seitenflüsse Sie mit einem Prototyping-Tool in 30 Minuten im Vergleich zu einem Code wie HTML oder JavaScript erstellen können.

03. Verwenden von Prototyping-Software und Apps

Möchten Sie direkt in ein Computerprogramm eintauchen, das Ihre Idee tatsächlich widerspiegelt? Das Schöne an Prototyping-Software und -Apps ist, dass sie speziell für diesen Zweck entwickelt wurden und somit die perfekte Balance zwischen Funktionalität, Lernkurve und Benutzerfreundlichkeit bieten.

Sowohl Anfänger- als auch Veteranendesigner verwenden spezielle Tools wie die folgenden - Anfänger für die Benutzerfreundlichkeit und Veteranen für die Steuerungen, die auf ihre speziellen Bedürfnisse zugeschnitten sind.

UXPin Screengrab

Ein Tool wie UXPin kann Nicht-Codierern helfen, funktionierende Prototypen zu erstellen

Diese Tools unterscheiden sich in ihren Funktionen, wobei einige besser auf bestimmte Situationen abgestimmt sind als andere. Daher ist es am besten, das für Ihre Anforderungen am besten geeignete zu finden. Um mit Ihrer Suche zu beginnen, können Sie Tools wie überprüfen UXPin , InVision und Omnigraffle . Schauen Sie sich unsere Liste der an Top 10 Prototyping-Tools für mehr.

Diese Tools haben den Vorteil, dass sie speziell für Wireframing und Prototyping entwickelt wurden. Sobald Sie die Grundfunktionen kennengelernt haben, können Sie mit diesen Methoden im Vergleich zu herkömmlichen Methoden wie dem Papier-Prototyping möglicherweise noch schneller Prototypen erstellen.

wie man aktionen in photoshop aufzeichnet

Vorteile der Verwendung eines speziellen Prototyping-Tools

  • Geschwindigkeit: Hauptbenutzer können sogar schneller mit speziellen Tools arbeiten als mit dem Prototyping von Papier, da sie mit nur wenigen Mausklicks erweiterte Interaktionen erstellen, kopieren und erstellen können
  • Elementbibliotheken: Während Tools wie InVision sich hervorragend für schnell anklickbare Prototypen eignen, die mehrere Bildschirme mit einfachen Interaktionen (wie Klicken und Schweben) miteinander verbinden, verfügen andere Tools wie UXPin über integrierte Elementbibliotheken (und Sie können Ihre eigenen für die wiederholte Verwendung erstellen).
  • Erweiterte Benutzerabläufe: Fluss und Funktionalität sind die wichtigsten Aspekte des Prototyping, und die meisten Tools verfügen über diese integrierten Funktionen. Mit den meisten können Sie auch Sitemaps erstellen, während Sie neue Bildschirme erstellen, und diese zur einfachen Navigation nebeneinander anzeigen
  • Eingebaute Zusammenarbeit: Viele spezielle Tools stellen die Zusammenarbeit in den Mittelpunkt, einschließlich der Möglichkeit, Entwürfe zu kommentieren, sie als Team zu bearbeiten und sie über eine URL zu teilen. Das beste Angebot für den Revisionsverlauf und den Cloud-Speicher, um Ihren Workflow zu vereinfachen, indem er geräteunabhängig wird
  • Optimierte Präsentation: Dies kann bedeuten, dass Sie in PDF exportieren oder in ein Web oder eine mobile App exportieren, um ein echtes Prototypenerlebnis zu erzielen

Wie alles im Leben müssen Sie es lernen, wenn Sie es noch nie benutzt haben. Daher wird es wahrscheinlich einige Zeit dauern, bis Sie sich mit dem von Ihnen ausgewählten Werkzeug vertraut gemacht haben. Viele App-Designer arbeiten jedoch daran, die Lernkurve so flach wie möglich zu gestalten.

Auswahl einer Prototyping-Methode

Um die Frage 'Was ist der beste Weg zum Prototyping?' Zu beantworten, werden wir mit der Antwort fortfahren: 'Welcher Weg für Sie am besten funktioniert'. Dies ist jedoch kein Euphemismus für 'Was am einfachsten ist' oder 'Was am wenigsten Arbeit erfordert'. Der beste Weg zum Prototyp ist der Weg, der für Sie die besten Ergebnisse liefert.

Sie müssen die Besonderheiten sowohl des Produkts als auch des Designteams berücksichtigen. Mit welchen Plattformen und Methoden sind die Designer und Entwickler am besten oder am besten vertraut? Welche spezifischen Ziele, Zeitrahmen und Einschränkungen sind mit dem Produkt verbunden, mit dem Sie arbeiten? Zu wissen, wohin Sie gehen, ist der wichtigste Teil - wir erklären nur die verschiedenen Routen, um dorthin zu gelangen.

Laden Sie das kostenlose herunter, um weitere praktische Tipps zum Prototyping mit niedriger oder hoher Wiedergabetreue zu erhalten Leitfaden zum Prototyping . Erfahren Sie, wie und wann Sie verschiedene Prototyping-Tools und -Taktiken verwenden müssen, mit Best Practices von Zurb, Google Ventures, IDEO und vielen anderen.

Zum Thema passende Artikel: