Verbessern Sie Ihren Arbeitsablauf mit Prototyping-Tools für Designer

Ich weiß nicht, wie es Ihnen geht, aber ich bin immer auf der Suche nach dem perfekten Prototyping-Tool für meinen Webdesign-Workflow. Es gibt viele Möglichkeiten, aber eines ist sicher: Mit Rapid Prototyping können Sie effizienter an Ihren Projekten arbeiten.

Irgendwelche HTML-, CSS- oder Javascript-Fans da draußen? Wenn Ihnen diese Technologien gefallen, sind Sie vielleicht nur ein Rapid Prototyper. Als Webdesigner haben immer mehr von uns die Lücke geschlossen und Front-End-Entwicklungsarbeit geleistet. Wir sind nicht nur visuelle Superstars, sondern auch erfahrene Programmierer von Codes.

Mit einem funktionierenden, codierten Prototyp können Sie schnell einsatzbereit sein, Ihre Website mit Kunden teilen und frühzeitig Feedback einholen. Wenn Programmieren nicht Ihr Ding ist, Sie aber trotzdem schnell Prototypen erstellen möchten, gibt es eine Reihe von Tools, mit denen Sie Ihren Kunden einen hochwertigen Prototyp liefern können.

Warum Rapid Prototyping?

Rapid Prototyping ist oft eine Schlüsselkomponente in einem agilen Prozess. Ein funktionierendes Live-Beispiel Ihrer Website wird entworfen und entwickelt, und oft kann der Code aus dem Prototypen später für den eigentlichen Entwicklungsprozess wiederverwendet werden. Feedback wird frühzeitig im Prozess eingeholt und gegeben, was dazu beiträgt, die Anzahl der Änderungen während der Entwicklungsphase zu reduzieren. Designer sind sich oft einig, dass es das endgültige Design verbessert, weil verschiedene Variationen auf dem Weg ausprobiert werden. Beim Erstellen eines Prototyps ist es wichtig, ein Tool zu wählen, mit dem Sie schnell und effizient arbeiten können, unabhängig davon, ob Code involviert ist oder nicht.

Rapid Prototypers bringen Wert in jedes Projekt, und Kunden lieben es sicherlich, ein funktionierendes Beispiel zu sehen. Die meisten Menschen sind visuell und wenn ihnen ein Prototyp zur Verfügung steht, finden sie es vorteilhaft, das Design im Browser zu sehen, vorzugsweise auf mehreren Geräten.

Statische und funktionierende Prototypen

Traditionell erstellten Designer ein statisches Mockup für Prototypen, oft in Photoshop oder Illustrator. Diese statischen Mockups bieten einen enormen Wert, aber funktionierende Prototypen sind eine großartige Option, da Designs sofort im Browser getestet werden können, während sie entwickelt werden. Viele Designer stellen fest, dass sie mit zunehmender Programmierfähigkeit schneller programmieren und das Entwerfen im Browser zur Norm für sie wird. Wenn Sie möchten, müssen Sie sich nicht mehr so ​​sehr auf ein statisches Photoshop/Illustrator-Mockup verlassen wie früher.

Wie detailliert müssen Prototypen sein?

Es gibt keine richtige oder falsche Antwort auf die Menge an Designdetails, die Sie bereitstellen müssen, es hängt nur vom Kunden und Projekt ab. Vielleicht kennen Sie den Begriff „Treue“ aus der Designwelt. Dies bezieht sich auf die Menge an Details und Interaktionen, die in einem Design enthalten sind. Low Fidelity ist sehr einfach, oft „skizzenhaft“ und erlaubt dem Benutzer nicht, mit dem Design zu interagieren. Es werden nur sehr wenige Designdetails bereitgestellt, und Low Fidelity enthält nur die grundlegenden Informationen für die Platzierung der Komponenten im Prototyp. High-Fidelity-Prototypen ermöglichen häufig Benutzerinteraktionen und kommen einer echten Darstellung der Website sehr nahe. Designelemente enthalten oft viele Details und sind sehr raffiniert.

Low-Fidelity-Prototyp.

High-Fidelity-Prototyp.

Die Werkzeuge, die Sie für Ihren Prototypen auswählen, hängen von den Genauigkeitsanforderungen ab. Das eine ist nicht unbedingt besser als das andere, es hängt nur vom Projektumfang ab.

Großartige Prototyping-Tools

Nachdem wir nun die Grundlagen des Prototyping besprochen haben, werfen wir einen Blick auf einige der verfügbaren Tools. Prototyping-Tools haben unterschiedliche Genauigkeitsstufen und Einschränkungen. Wenn die Codierung in Ihrem Steuerhaus ist, großartig! Aber wir werfen auch einen kurzen Blick auf einige Optionen, die keine Code-Kenntnisse erfordern.

Prototyping-Tools für schnelles Codieren

Frameworks sind Tools, die einen Ausgangspunkt für standardisierten Code bieten, der aus HTML, CSS, JS usw. besteht. Im Falle eines Prototyps ist ein Framework eine großartige Option, um schnell ein Webprojekt zu erstellen. Es kann auch eine große Hilfe sein, ein Starter-Theme zu erstellen, das Sie für Ihren nächsten Prototypen wiederverwenden können.

Es gibt zwei großartige Frameworks, die ein schnelles Erstellen ermöglichen. Auch beim Codieren haben Sie die Wahl zwischen Low Fidelity oder High Fidelity. Sie können so detailliert oder so grundlegend werden, wie Sie möchten, wenn Sie sich dem Rapid Prototyping nähern. Sobald Sie die Nuancen dieser Tools kennen, werden Sie überrascht sein, wie schnell die Dinge gehen.

Rapid-Prototyp-Option eins – Twitter Bootstrap

Derzeit befindet sich Twitter Bootstrap in der dritten Version, also wurde es im Laufe der Zeit perfektioniert. Dies ist ein großartiges Framework zum Erstellen eines funktionierenden Prototyps, wenn Sie Code erstellen möchten. Es ist großartig, weil es reaktionsschnell ist, leicht zu erlernen ist und viele Designkomponenten wie Schaltflächen, Modelle, Symbole usw. enthält. Mit diesen Elementen können Sie ein Webprojekt schnell und einfach zum Laufen bringen. Viele Websites werden mit Bootstrap erstellt, sodass später auch Prototypcode verwendet werden kann.

Rapid-Prototyp-Option zwei – Foundation

Wie Twitter Bootstrap ist Foundation eine großartige Option, um schnell einen Prototyp zu erstellen. Dieses Framework ist einfacher als Bootstrap und erfordert im Voraus mehr CSS-Styling, da es nicht so viele Standardeinstellungen gibt. Es ist auch eine gute Wahl, weil Sie schnell einsatzbereit sind und gleichzeitig wiederverwendbaren Code entwickeln können. Sie können dieses Tool verwenden, um einen Prototyp zu erstellen, der je nach Ihren Vorlieben Low-Fidelity oder Very-High-Fidelity sein kann.

Prototypoptionen, die keine Codierung erfordern

Wie versprochen, hier sind einige Prototyping-Optionen, die keine Codierung erfordern. Es gibt viele Optionen für High- und Low-Fidelity oder etwas dazwischen.

Rapid-Prototyp-Option drei – gutes altes Papier und Bleistift

Dieser statische Prototyp kann sehr schnell erstellt werden. Diese Methode ist einfach anzuwenden und Sie sollten bereits mit der Funktionsweise vertraut sein! Obwohl es als Low Fidelity angesehen wird, kann das Skizzieren den Druck vom Projekt nehmen und Ideen frei fließen lassen. Ob Sie es glauben oder nicht, das könnte manchmal alles sein, was Sie für einen Prototypen brauchen. Es kommt nur auf das Projekt und den Kunden an.

Rapid-Prototyp-Option vier – Stilfliesen

Stilkacheln sind eine großartige Option, wenn Sie den statischen Ansatz des Prototypings bevorzugen und auch etwas mit hoher Wiedergabetreue wollen. Design-Mockups haben einen starken Platz im Webdesign (schließlich sind Designelemente das, was wir zum Erstellen der Seite brauchen). Aber bevor Sie die Zeit investieren, um ein ganzseitiges Mockup zu erstellen, sind Stilkacheln eine großartige Lösung. Diese dienen als wichtiger Schritt, bevor Zeit in einen detaillierten vollständigen Prototyp investiert wird. Thesen enthalten alle visuellen Informationen, die ein statisches Mockup haben würde. Farben, Bilder, Schaltflächenstile usw. sind enthalten, um Kunden eine Vorstellung davon zu geben, wie die Designelemente aussehen werden.

Rapid-Prototyp-Option fünf – Omnigraffle

OmniGraffle ist eine großartige Option, mit der Sie schnell ein Website-Wireframe erstellen können, das als Prototyp mit niedriger bis mittlerer Wiedergabetreue dient. Sie können Links hinzufügen, aus vordefinierten Stilen und Objekten auswählen und vieles mehr. Es ist eine großartige Möglichkeit, Ihren Prototypen zu entwerfen und dann etwas zu erstellen, mit dem Ihre Kunden interagieren können.

Rapid-Prototyp-Option sechs – Invision Ap

InVision ist eine einzigartige Option, da Sie einen vorhandenen statischen Prototyp hochladen und interaktiv gestalten können, ohne dass Code erforderlich ist. Es ist eine großartige Möglichkeit, einen statischen Prototyp zu verwenden, ihn mit Ihren Kunden zu teilen und Feedback zu verfolgen. Darüber hinaus können Sie mit diesem Tool Benutzertests durchführen und sonstiges Feedback übermitteln.

Rapid-Prototyp-Option sieben Axure

Mit Axure können Sie einen interaktiven Prototyp erstellen. Außerdem gibt es verschiedene UI-Elemente, die verwendet werden können, damit Sie Ihre Ideen entwickeln und teilen können. Von schnellen Wireframes bis hin zu einem ausgefeilten Design mit Farben, Farbverläufen, Bildern usw. bietet dieses Tool eine Vielzahl von Wiedergabetreueoptionen. Es kommt auch mit einer praktischen Freigabeoption, damit Ihre Benutzer sich durchklicken und sehen können, wie Ihr Projekt funktionieren wird.

Rapid-Prototyp-Option acht – Lucidchart

Lucidchart ist Cloud-basiert und funktioniert auf mehreren Geräten. Die Zusammenarbeit wird auch erleichtert, wenn mehrere Personen an einem Projekt arbeiten. Es ermöglicht Echtzeit-Chats mit Ihrem Team und Sie können auch Kommentare direkt im Prototyp hinterlassen. Dynamische Website-Prototypen mittlerer Genauigkeit werden mit den vielen angebotenen UI-Elementen erstellt.

Was kommt als nächstes?

Es gibt eine Menge zu beachten, wenn Sie das Prototyping-Tool Ihrer Wahl finden. Unabhängig davon, ob Sie Live-Code bevorzugen oder nicht, es gibt Tools, die verschiedene Treueoptionen bieten. Wenn Sie alleine arbeiten oder sich stark auf Teamkommunikation verlassen, finden Sie die perfekte Lösung, die Ihren Anforderungen entspricht.

Jetzt, da Sie mit den perfekten Prototyping-Werkzeugen ausgestattet sind, können Sie stolz das Abzeichen eines Rapid Prototypers tragen.