Vom wireframe zum interaktiven Prototyp mit dem Kendo UI Kit von Justinmind

Wir stellen Ihnen das Kendo UI Kit von Justinmind vor! Das neue UI-Kit enthält alle UI-Komponenten, die Sie benötigen, um mit dem kostenlosen Wireframe-Tool von Justinmind interaktive Web- und Mobile-Wireframes im Stil des Kendo-Frameworks zu erstellen und zu gestalten.

Die Zeiten, in denen Sie beim Prototyping Zeit mit der Suche nach Komponenten oder der Erstellung von Widgets von Grund auf verschwendet haben, sind vorbei. Mit der kostenlosen Kendo UI Bibliothek von Justinmind können Sie mehr Arbeit in weniger Zeit erledigen: Sie müssen keine Schaltflächen, Aktionsaufrufe oder Fortschrittsbalken mehr neu erstellen.

Das UI-Kit von Justinmind hat es in sich – mit über 70+ Komponenten, aus denen Sie wählen können, gibt es für Designprobleme jetzt detailorientierte Designlösungen. Mit diesen Komponenten wird Ihr UX design von Anfang bis Ende konsistent sein.

In diesem Beitrag zeigen wir Ihnen außerdem, wie Sie mit Justinmind und dem Kendo UI Kit Ihre eigene E-Commerce-Website von der ersten Idee bis zum interaktiven Wireframe erstellen und prototypisieren können.

Kendo UI ist eine vollständige Komponentenbibliothek, die Designern und Entwicklern hilft, hochwertige und leistungsstarke responsive Web- und Mobilanwendungen zu erstellen.

Mit Kendo Framework können Sie HTML5- und JavaScript-Anwendungen mit den neuesten Web- und Mobilstandards erstellen. Es kombiniert das Beste aus HTML5, CSS3 und jQuery und profitiert von einer breiten Browserunterstützung einschließlich Chrome, Safari und Firefox. Und mit der neuen Kendo Widget-Bibliothek von Justinmind können Designer per Drag & Drop Wireframes für Web- und mobile Anwendungen erstellen, die sich nativ anfühlen.

Das UI-Framework von Kendo bietet alles, was Sie brauchen, um JavaScript-Anwendungen nahtlos zu erstellen. Das Framework umfasst drei verschiedene Produkte, die alle im Widget-Kit von Justinmind enthalten sind..:

• Kendo UI Web: enthält alle wichtigen Elemente des Kendo Kits, einschließlich DataSource, Vorlagen, Drag-and-Drop und themenbezogene Widgets.
• Kendo DataViz: HTML5-basierte, mobilfähige Datenvisualisierungs-Widgets.
• Kendo UI Mobile: Native UI-Widgets für die Erstellung von HTML5-basierten mobilen Anwendungen.

Viele Entwickler und Designer verwenden UI-Frameworks als Grundlage – einen Ausgangspunkt – weil sie weit verbreitet sind und verstanden werden. Ein Framework wie das von Kendo kann verwendet werden, um eine Standardisierung über alle Web- und Mobilanwendungen hinweg zu gewährleisten, so dass die Designs konsistent sind und sich an vordefinierte Konfigurationen halten.

Mit den Kendo Widgets von Justinmind können Sie Wireframes für Web- und mobile Anwendungen erstellen, die genauso aussehen und sich anfühlen wie Produkte, die mit dem eigentlichen Framework erstellt wurden. Außerdem können Sie alle UI-Komponenten nach Ihren eigenen Wünschen anpassen.

Sparen Sie Zeit und Nacharbeit und arbeiten Sie mit über 70 anpassbaren UI-Komponenten, darunter:

• Raster
• Herausgeber
• Planer
• Diagramme
• DropDownList
• Fenster
• Hochladen
• TreeView
• ProgressBar
• TabStrip

Um den Rahmen in die Tat umzusetzen, folgen Sie zunächst diesen 4 Schritten:

1. Download Justinmind wireframe tool
2. Kendo von der UI kits Seite herunterladen
3. Importieren Sie das UI-Kit in Justinmind. Die Widgets sind auf der linken Seite sichtbar
4. Starten Sie einen neuen Prototyp mit über 70 Kendo UI Komponenten!

Sobald Sie das UI-Kit heruntergeladen haben, können Sie mit der Erstellung von Web- und mobilen Erlebnissen beginnen. Lassen Sie uns gemeinsam eine E-Commerce-Website erstellen, die die Kendo Widgets von Justinmind verwendet, um zu zeigen, wie einfach es ist, von der ersten Idee zum interaktiven Wireframe zu gelangen.

Erstellen Sie in Justinmind einen neuen Webprototyp. Von dort aus können Sie die Bildschirmabmessungen festlegen. Wir bleiben in diesem Fall bei der Standardeinstellung, aber Sie können sie gerne an Ihre eigenen Vorlieben anpassen.

Jetzt haben wir unsere leere Leinwand, die wir mit Bildern, Text und anderen Widgets aus den vordefinierten Bibliotheken von Justinmind sowie dem Kendo UI Kit, das Sie gerade heruntergeladen haben, füllen wollen.

Denken Sie daran, dass die Kendo Bibliothek vollständig anpassbar ist, so dass unsere Version anders aussehen wird als die Standardstile in Justinmind. Ein Grund mehr, zu experimentieren und Spaß am UX-Design zu haben.

Lassen Sie uns ein Heldenbild hinzufügen. Heldenbilder sind eine großartige Möglichkeit, die Besucher Ihrer Website zu beeindrucken und Ihr Produkt oder Ihre Dienstleistungen zu präsentieren. Ziehen Sie das Justinmind Standard-Bilder-Widget auf Ihre Leinwand und passen Sie die Größe entsprechend an. Idealerweise sollte das Bild ein Viertel bis die Hälfte des Bildschirms einnehmen, damit es seine volle Wirkung entfalten kann.

Die meisten Homepages haben eine Navigationsleiste am oberen Rand. Unsere E-Commerce-Website wird über Dropdown-Menüs verfügen, über die Benutzer zu anderen Bereichen der Website navigieren können. Wir können das Kendo UI Widget zur Menüausrichtung verwenden. Ziehen Sie dieses Widget auf die obere rechte Seite Ihres Bildschirms. In der Ereignisleiste können Sie Ihre Navigationselemente mit anderen Bildschirmen verknüpfen.

Vergessen Sie nicht, dass Sie mit Vorlagen Inhalte wiederverwenden können, um beim Design Zeit zu sparen. Das bedeutet, dass sich wiederholende Elemente wie Navigationsleisten und Logos jedes Mal an der gleichen Stelle erscheinen können, wenn Sie einen neuen Bildschirm erstellen und so für Konsistenz im Web und in Ihren mobilen Anwendungen sorgen.

Sie können Ihrem Heldenbild einen inspirierenden Text, einen Verkaufstext oder einen dramatischen Aufruf zum Handeln hinzufügen, da dies die Konversionsrate erhöhen kann. Wenn Sie eine Schaltfläche hinzufügen möchten, verwenden Sie ein Schaltflächen-Widget. Sie können der Schaltfläche Ereignisse hinzufügen. Ein Ereignis “bei Klick” könnte beispielsweise dazu dienen, den Benutzer zu einem anderen Bildschirm zu führen. Das gleiche Verfahren können Sie auch für Ihre Top-Navigation verwenden.

Links von Ihrer Navigationsleiste können Sie ein weiteres Bild-Widget hinzufügen, wenn Sie ein Logo einfügen möchten, oder ein Text-Widget, wenn Sie einfach den Namen der E-Commerce-Website schreiben möchten. Sie müssen sich auch nicht mit den Standard-Schriftarten zufrieden geben – Justinmind verfügt über eine vollständige Google Fonts-Integration.

Unterhalb Ihres Heldenbildes fügen wir einen Bereich für die beliebtesten Produkte hinzu.

In unserem Beispiel haben wir die ScrollView von Kendo verwendet. Es ähnelt einem Karussell – das in Justinmind auch einfach mit dynamischen Panels erstellt werden kann – insofern, als dass der Benutzer entweder nach links oder nach rechts klicken muss, um sich durch den Inhalt zu bewegen. Zum Glück können Sie mit der Kendo UI Zeit sparen, indem Sie das ScrollView-Widget einfach auf den Canvas ziehen und es mit Ihren eigenen Inhalten füllen.

ScrollView ist nicht die einzige Möglichkeit, mit Inhalten in der E-Commerce-App zu spielen. Das Widget Loading Content with AJAX ist eine großartige Möglichkeit, den Nutzern einen zusätzlichen Inhalt zu bieten, der ihre Erfahrung bereichert.

Wenn der Benutzer mit dem Mauszeiger über ein Bild fährt, erscheint ein Popup-Fenster mit zusätzlichen Informationen zu diesem Bild, in unserem Fall mit den Abmessungen des Produkts und einer Handlungsaufforderung innerhalb des Fensters mit ‘Mehr anzeigen’.

Jetzt können wir uns auf eine Produktseite in unserem Webprototyp konzentrieren. Eine Produktseite wie die, die wir erstellen werden, wird Ihnen das Potenzial des Kendo UI Kits zeigen. Das wichtigste Merkmal einer Produktseite sind die Bilder – eine Chance, Ihre Produkte zu präsentieren und Kunden zu beeindrucken. Hier können wir die Replace/Effects des Kendo UI Kits einsetzen.

Mit dem Ersetzen-Widget wird das Bild auf der linken Seite vergrößert, wenn Sie mit dem Mauszeiger über die kleineren Bilder auf der rechten Seite fahren. Das bedeutet, dass die Nutzer einen detaillierteren Blick auf das angebotene Produkt erhalten, zusammen mit einem verlockenden Text.

Wir haben auch Optionsfelder hinzugefügt, mit denen Sie die Farbe des Stuhls ändern können. Dazu verwenden Sie das Optionsfeld-Widget im Widget-Panel unter Formulare und Eingabe.

Nehmen wir an, ein Stuhl ist in zwei Farben erhältlich: blau und braun. Sie können mehrere dynamische Panels verwenden, um den Inhalt darin zu platzieren, und dann ein Ereignis On Click > Set Active Panel im Panel Events hinzufügen. Der Benutzer kann auf die Optionsfelder klicken, um den Inhalt des dynamischen Panels anzuzeigen.

Wenn Sie die PanelBar von Kendo UI verwenden, können Sie mit Hilfe von Dropdowns zusätzliche Inhalte ein- und ausblenden. In unserem Beispiel sehen Sie ein Feld, das Material, Maße, Gewicht und Verpackung enthält. Jedes dieser Felder verfügt über einen Dropdown-Pfeil, mit dem Sie Informationen anzeigen können. Das sieht auf den ersten Blick sehr kompliziert aus, aber mit der vorgefertigten UI-Komponente müssen Sie nur noch Ihren eigenen Text hinzufügen.

Unsere Inspirations-Seite hat viel zu bieten und ist gleichzeitig nach UX-Design-Standards relativ einfach gehalten. Die Inspirationsseite verwendet dieselbe Navigationsleiste wie die gesamte E-Commerce-Website, so dass Sie bereits wissen, wie der Großteil dieser Seite aufgebaut ist. Außerdem wiederholen sich viele UI-Elemente, was ebenfalls ein schnelleres Prototyping ermöglicht.

Da diese Seite inspirieren soll, besteht sie mit Ausnahme des Hauptbildes (Hero) hauptsächlich aus Bild-Widgets.

Das Besondere an dieser Seite ist eines der leistungsstarken Kendo UI Widgets, die in unserem neuen Kit enthalten sind: Tooltip. Sie können ein Bild mit verschiedenen Produkten hochladen und dann Hotspots hinzufügen. Wenn Sie mit dem Mauszeiger über diese Hotspots fahren, können Sie zusätzliche Informationen wie Preis, Größe und Produktname anzeigen lassen. Es ist ein großartiges Widget, das in vielen verschiedenen Kontexten verwendet werden kann.

Und damit haben Sie eine Homepage, eine Produktseite und eine Inspirationsseite einer E-Commerce-Website mit einer Mischung aus Standard-Widgets von Justinmind und Kendo UI Komponenten erstellt.

Mit mehr als 70 anpassbaren Widgets und Hunderten von Standard-Widgets von Justinmind können Sie im Handumdrehen interaktive Wireframes und Prototypen erstellen, die dem Kendo UI Framework treu bleiben. Laden Sie es jetzt herunter.