Website-Modelle: 4 beliebte Ansätze zum Erkunden

Website-Modelle

Website-Modelle können auf viele verschiedene Arten erstellt werden. Es ist wahr, dass es keinen 'besten' Ansatz gibt, aber abhängig von den Stilen und Vorlieben bestimmter UI- und UX-Designer (und dem Designprozess) funktionieren einige besser als andere.

In diesem Artikel werden die Vor- und Nachteile von vier der beliebtesten Optionen erläutert: End-to-End-UX-Tools, Mockup-Tools, Grafikdesign-Tools sowie codierte Designs, die die Grenzen zwischen Website-Mockups verwischen und Prototypen.



Unterschied zwischen meinem Reisepass und meinem Reisepass ultra

Wenn Sie speziell nach Wireframing-Tools suchen, lesen Sie diesen Beitrag auf der beste Drahtgitterwerkzeuge , oder für eine größere Sammlung, schauen Sie sich unsere Mega-Zusammenfassung der beste Webdesign-Tools .



GenerateJS Banner

Klicken Sie auf das Bild, um mehr zu erfahren und Ihre Tickets abzuholen(Bildnachweis: Future / Toa Heftiba, Unsplash)

Machen Sie nicht den Fehler zu glauben, dass alle Website-Modelle gleich sind. Einfache Entscheidungen über Plattformen, Wiedergabetreue und Codierung führen zu erheblich unterschiedlichen Ergebnissen. Wissen Sie, was Sie wollen und was Ihre Ziele sind, bevor Sie überhaupt mit dem Designprozess beginnen. Wenn Sie ein Tool möchten, das alle drei Phasen unterstützt, ist es am besten, es zunächst zu verwenden, als zur Hälfte umzuschalten. Wenn Sie ein herausragendes, vollständig realistisches Modell benötigen, denken Sie daran, dass Sie irgendwann einen Grafikdesign-Editor verwenden werden.



01. End-to-End-UX-Tools

Auf der höchsten Ebene stehen End-to-End-Tools, die den gesamten Workflow erfüllen sollen: Modelle, Prototyping, Dokumentation, Entwicklerübergaben und Designsysteme. UXPin wird diesem Bedarf seit Anfang der 2010er Jahre gerecht, aber eine Reihe anderer Marken, wie Adobe und InVision, versuchen nun ebenfalls, ein „einziges Tool, um sie alle zu regieren“ zu schaffen.

UXPin

UXPin bietet robustes Prototyping, Modelle, Dokumentation und Entwicklerübergaben

Wie stapeln sich diese Tools für die Erstellung von Modellen? Sie können sie problemlos angehen - und noch einige mehr. Mit UXPin können Sie beispielsweise Modelle mit mehreren Status und Interaktionen erstellen. Es ahmt sogar einige Funktionen von Photoshop und Sketch nach, indem es ein Stiftwerkzeug enthält.



Auf der anderen Seite, Studio von InVision , ermöglicht eine ziemlich raffinierte Animationsbearbeitung; während Adobe XD Mit dieser Option können Sie Photoshop- und Skizzendateien in Ihren XD-Designs öffnen und Farben, Symbole, lineare Verläufe und Zeichenstile anwenden.

Studio InVision

Studio by InVision zielt darauf ab, einen End-to-End-Workflow zu erstellen

Am wichtigsten ist, dass End-to-End-Tools jetzt Entwurfssysteme anbieten, um die Konsistenz von Modellen über Projekte hinweg sicherzustellen. Design-Systeme bieten jedem eine einzige Quelle der Wahrheit für Assets und Design-Prinzipien in allen Tools. Wenn Sie viele Modelle erstellen möchten, ist diese Funktion fast obligatorisch.

Bei der Auswahl eines End-to-End-Tools zum Erstellen Ihres Website-Modells sollten folgende Aspekte berücksichtigt werden:

  • Treue : Wie leistungsfähig ist das Tool für visuelles und Interaktionsdesign?
  • Konsistenz : Welche Funktionen gewährleisten Designkonsistenz in Ihrer Arbeit?
  • Richtigkeit : Spiegeln die Elemente, mit denen Sie arbeiten, die „Quelle der Wahrheit“ in Ihrer Organisation wider?
  • Zusammenarbeit : Können Sie mit Stakeholdern oder anderen Designern zusammenarbeiten?
  • Entwicklerübergabe : Wie generiert das Tool Spezifikationen und Assets für Entwickler?

02. Spezielle Mockup-Tools

Weniger robuste Lösungen wie Prinzip , Framer , Moqups oder Balsamiq Sie erhalten weiterhin alles, was Sie zum Erstellen Ihres Modells benötigen - Sie verlieren lediglich die zusätzlichen Funktionen für Workflow und Designkonsistenz. Diese Tools sollen den Erstellungsprozess so einfach wie möglich gestalten, sodass Sie sich mehr auf Stilentscheidungen und weniger auf die Manipulation des Programms konzentrieren können.

Spezielle Mockup-Tools haben klare Vorteile: Anfänger profitieren von ihrer Benutzerfreundlichkeit, während Experten die Designs schätzen, die speziell auf ihre fortgeschrittenen Anforderungen zugeschnitten sind. Im fortgeschrittenen Bereich sind Tools wie Framer und Principle auf Animationen und Interaktionen für Modelle spezialisiert.

Framer

Tools wie Framer sind auf Interaktionen spezialisiert

Am unteren Ende bieten Moqups und Balsamiq mehr Funktionen als Nicht-Design-Tools, die manchmal für Drahtmodelle und Modelle verwendet werden (z Keynote ), aber sie sind nur auf Designs mit niedriger Wiedergabetreue beschränkt. Sie können jedoch sehr nützlich sein, wenn das Ziel darin besteht, sehr schnell Drahtgitter mit niedriger Wiedergabetreue zu erstellen.

Wenn es um Mockup-Tools geht, müssen Sie entscheiden, ob eine einfache Wireframing-Lösung nur ausreicht oder ob Sie ein erweitertes Bildschirmdesign benötigen. Unabhängig davon, für welches Mockup-Tool Sie sich entscheiden, stellen Sie sicher, dass Sie bereit sind, den Verlust an kollaborativem Workflow und die geringeren Designkonsistenzfunktionen von End-to-End-Tools zu akzeptieren.

03. Grafikdesign-Software

Einige Designer schwören auf Software wie Photoshop CC , Skizze oder Illustrator CC , insbesondere diejenigen, die besonders gut mit Werkzeugen vertraut sind, die eine Steuerung bis auf das Pixel bieten. Grafikdesign-Plattformen funktionieren am besten, wenn Sie ein Höchstmaß an Realismus und visueller Wiedergabetreue anstreben. Und wie wir in unserem Leitfaden erklären Rapid Prototyping mit Photoshop CC Es kann einfacher sein als Sie denken.

Photoshop CC

Photoshop bietet eine fein abgestimmte Steuerung, kann jedoch für einfache Modelle übertrieben sein

Wenn Sie mit Grafikdesign-Software arbeiten, haben Sie Zugriff auf eine nahezu endlose Auswahl hoch definierter Farben. Wenn Sie also innerhalb der Einschränkungen eines starren und voreingestellten Farbschemas arbeiten - beispielsweise unter bestimmten Markenregeln -, sind diese Programme möglicherweise die besten für Sie Möglichkeit. Diese Programme bieten nicht nur Farboptionen, sondern auch weitaus mehr visuelle Werkzeuge, mit denen Sie die Detailgenauigkeit in den Griff bekommen können.

Der Nachteil der Verwendung dieser Art von Software besteht jedoch darin, dass es schwierig sein kann, zu übersetzen, wenn es Zeit ist, mit dem Codieren des Designs zu beginnen. Was in Photoshop funktioniert hat, funktioniert möglicherweise nicht immer im Code (Elemente wie Schriftarten, Schatten, Verlaufseffekte usw.), was zu Zeitverschwendung bei der Suche nach Lösungen für die Prototyping-Phase führen kann.

Bei stilintensiven Seiten kann es hilfreich sein, die spezifischen visuellen Details während der Modellierungsphase herauszuarbeiten. In diesem Fall bieten Ihnen Photoshop oder Sketch die meisten Optionen. Wenn Sie es mit einem wählerischen oder schwer zu befriedigenden Kunden zu tun haben, können Sie ihn leichter überzeugen, wenn Sie ihm ein wunderschönes und beeindruckendes Modell präsentieren.

Modelle können in UXPin gezogen werden

In Photoshop oder Sketch erstellte Modelle können per Drag & Drop in UXPin gezogen werden

Erwähnenswert ist auch, dass in Photoshop oder Sketch erstellte Modelle mit UXPin per Drag & Drop in die Prototyping-Phase gezogen werden können. Auf diese Weise können Sie alle Ebenen mit wenigen Klicks animieren (ohne Abflachung) und müssen nicht bei Null anfangen, wenn es Zeit für den Prototyp ist.

Wenn die visuelle Darstellung nicht Ihre einzige Priorität ist, können Sie mit einem Tool, mit dem Sie das Wireframing, die Modelle und das Prototyping an einem Ort durchführen können, effizienter arbeiten. Grafikdesign-Software kann mehr Probleme bereiten, als es für Modelle wert ist, es sei denn, Sie suchen nach einer optimalen Visualisierung. Sie müssen auf jeden Fall regelmäßig mit Ihrem Entwickler kommunizieren, da diese Tools nicht für die Zusammenarbeit konzipiert sind.

04. Codierte Modelle

Wenn Sie hauptsächlich Designer sind und mit dem Codieren nicht vertraut sind, ist dies offensichtlich keine Option. Wie in diskutiert Der Leitfaden zu Mockups , codierte Modelle sind nicht die Standardauswahl.

Die meisten Codierungen können bis zur Prototyping-Phase (wenn Sie einen HTML / JavaScript-Prototyp erstellen) oder sogar später (wenn Sie ein Prototyping-Tool verwenden) verschoben werden. Trotz der Komplexität und potenziellen Hindernisse gibt es viele angesehene Designer, die sich dafür einsetzen, Code in die Modellphase einzuführen.

Während Verbesserungen bei Tools und Technologie dazu führen, dass sich im Layoutdesign immer mehr Möglichkeiten eröffnen, ist es nicht einfach (oder sogar möglich), alles im Code neu zu erstellen. Wenn Sie mit Code beginnen, wissen Sie sofort, was Sie können und was nicht. Wenn Sie mit Code vertraut sind, kann auch argumentiert werden, dass es weniger verschwenderisch ist, damit zu beginnen - das Modell wird sowieso in HTML / CSS enden.

Wie bereits erwähnt, sind Modelle mit Codierung aus mehr Gründen als der Schwierigkeit der Codierung keine beliebte Strategie. Wenn Sie zu früh mit dem Codieren beginnen, kann dies Ihre Kreativität und Experimentierbereitschaft einschränken, da Sie sich leicht Gedanken über die Machbarkeit Ihrer Ideen im Code machen können, anstatt darüber, wie aufregend sie aussehen könnten.

Es liegt an Ihnen, wann Sie die Codierung einführen. Stellen Sie einfach sicher, dass Sie Ihre Entwurfsziele kennen, und halten Sie die Entwickler darüber auf dem Laufenden, wie Sie Funktionen priorisieren.

Weiterlesen: