Erste Schritte mit Wireframing mit Balsamiq

Wireframing kann idealerweise als eine Aktivität zur Visualisierung des Layouts eines Bildschirms definiert werden. Es gibt heute viele Wireframing-Tools auf dem Markt, aber das einfachste und am weitesten verbreitete ist Balsamiq – unser heutiges Thema. Aber vorher wollen wir zuerst verstehen, warum wir Wireframes brauchen?
Bei der Softwareentwicklung ist es wichtig zu wissen, wie das Endprodukt aussehen wird, noch bevor die Entwicklung beginnt. Diese anfängliche Visualisierung des Produkts dient als Richtlinie für alle Beteiligten und hilft, eventuelle Unklarheiten in der Zukunft zu vermeiden.
Früher wurden Textabsätze verwendet, um die Softwareanforderungen zu ermitteln.

Diese Textblöcke reichten jedoch nicht aus, um die Visualisierung in Gang zu bringen – da jede Person, die die Anforderungen liest, sie auf eine Weise visualisieren würde, die sich von den anderen unterscheiden könnte. Diese Mehrdeutigkeit führt zu vielen Verwechslungen und verschwendet Zeit, Geld und Mühe. Um der Sache zu helfen, kommt Wireframing ins Spiel. Aufgrund der Leichtigkeit, die es für den gesamten Entwicklungsprozess bringt.

In diesem Artikel helfen wir Ihnen, Fragen zu verstehen wie:

• • Was ist Balsamiq?

• • Wie fange ich damit an?

• Wie exportiere ich das endgültige Wireframe/Mockup?

Was ist Balsamiq?

Wireframing kann im Wesentlichen auf einer Serviette mit einem Stift durchgeführt werden. Am Ende ist es doch nur eine Skizze. Wenn es jedoch um die Zusammenarbeit und den Austausch mit Fachleuten geht, ist es eine bessere Idee, zu einem der vielen Tools zu wechseln, die heute auf dem Markt erhältlich sind. Ein solches Tool ist Balsamiq – es ist einfach zu bedienen und bietet viele Funktionen, um ein nützliches Wireframe zu erstellen.
Balsamiq ist ein hervorragendes Tool und erfüllt alle Anforderungen an Wireframing und Collaboration. Es verfügt über eine einzigartige Reihe von Funktionen, mit denen Sie schnelles Wireframing durchführen, Echtzeit-Feedbacks erhalten, diese Feedbacks integrieren und das Wireframe verbessern können. Dadurch wird schließlich das gesamte Team mit der Funktionalität der Anwendung in Bezug auf das Layout abgestimmt.
Mit Balsamiq ist auch die Zusammenarbeit mit entfernten Teammitgliedern ein Kinderspiel, da Wireframes in PNG- oder PDF-Formaten exportiert werden können, was Flexibilität beim Teilen der Wireframes ermöglicht.
Die 10 effektivsten Wireframing-Tools

Erste Schritte mit Balsamiq

Balsamiq ist für Windows und Mac OS verfügbar und kann online heruntergeladen werden . Sobald Sie das Tool heruntergeladen und geöffnet haben, sehen Sie einen Bildschirm wie:

Wie im obigen Screenshot gezeigt, ist die Benutzeroberfläche für Balsamiq in die vier folgenden Teile unterteilt.

• • Navigator

• • UI-Bibliothek

• • Inspektor

• Drahtgitterraum/Fläche

Der rot hervorgehobene Abschnitt dient zum Umschalten zwischen Abschnittsinspektor und Projektinformationen. Die Funktionen sind in der UI-Bibliothek enthalten, werfen wir einen genaueren Blick darauf.

Die UI-Bibliothek

Die UI-Bibliothek ist basierend auf verschiedenen Bildschirmelementen kategorisiert.
Machen wir uns mit den verschiedenen Kategorien von Bildschirmelementen vertraut, die in Balsamiq verfügbar sind.

• • Alle − Wenn Sie darauf klicken, werden Ihnen alle UI-Elemente angezeigt, die Balsamiq anbietet. Wenn Sie horizontal scrollen, können Sie sie anzeigen oder verwenden.

• • Assets – Dieser Abschnitt enthält die Dinge, die Sie hochladen und später in Ihren Wireframes verwenden können.

• • Groß – Dazu gehören die relativ größeren Bildschirmelemente wie Platzhalter, Browserfenster, iPhone und iPad.

• • Schaltflächen – Dieser Abschnitt enthält alle Schaltflächensteuerelemente, die Sie in einem Drahtmodell benötigen, wie Aktionsschaltflächen, Kontrollkästchen usw.

• • Häufig – Dieser Abschnitt umfasst die Formen, die verwendet werden, um die häufigsten Interaktionen zu kennzeichnen.

• • Container – Es enthält Optionen wie Window, FieldSet, Browser usw. Wie der Name schon sagt, enthält es Window, FieldSet, Browser usw.

• • Formulare – Diese Kategorie enthält alle Steuerelemente, die sich auf Formulare beziehen, wie Eingabeelemente, Optionsfelder, Schaltfläche zum Senden und dergleichen.

• • Symbole – Dies enthält eine Reihe von Symbolen, die Sie verwenden können, um eine bestimmte Operation zu kennzeichnen. Zum Beispiel ein Diskettensymbol anstelle des Speichern-Buttons usw. Balsamiq bietet eine riesige Sammlung kostenloser Symbole, die für verschiedene Aktionen verwendet werden können.

• • iOS – Dies enthält die für iOS spezifischen UI-Steuerelemente.

• • Layout − Layouts sind extrem wichtig, wenn Sie eine grundlegende Seite/Funktion darstellen müssen. Diese Kategorie umfasst die meisten Layouts wie vertikale / horizontale Registerkarten, Akkordeons usw.

• • Markup – Dies wird verwendet, um einen Kommentar zu einem bestimmten Steuerelement im Wireframe hinzuzufügen. Es enthält auch Callouts, die in vielen Szenarien zum Anzeigen der Konnektivität verwendet werden.

• • Medien – Alle medienbezogenen UI-Steuerelemente sind in diesem Abschnitt verfügbar, die dabei helfen, ein Bild/Video/Ton im Drahtmodell anzuzeigen.

• • Symbole – Dies ist eine Sammlung wiederverwendbarer Komponenten, die die Zeit zum Erstellen der gemeinsamen Komponenten verkürzen können.

• Text – Wie der Name schon sagt, enthält dies alle UI-Steuerelemente, die sich auf den Text beziehen. Funktionen wie ein Textblock, ein Kombinationsfeld, eine Linkleiste usw. sind in dieser Kategorie verfügbar.

Das Wissen über diese Komponenten in Verbindung mit der Tatsache, dass Balsamiq es Ihnen ermöglicht, die Komponenten einfach per Drag-and-Drop zu verschieben, hilft Ihnen dabei, schnell und effektiv Drahtmodelle Ihrer Wahl zu erstellen.
Welche dieser Produktmanagement-Tools verwenden Sie bereits?

Angenommen, Sie haben für Ihre Website ein Drahtmodell aus diesen vier Seiten erstellt – Startseite, Produkte und Dienstleistungen, Kontakt und Über uns. Jetzt müssen wir eine weitere wichtige Aufgabe ausführen, die unser Wireframe ein bisschen mehr wie eine vollwertige Website und weniger wie eine Skizze aussehen lässt. Dazu müssen wir unsere Seiten verlinken, wie sie idealerweise in einer Website verlinkt wären. Das Verknüpfen hilft Ihnen auch dabei, zwischen den Wireframes hin und her zu wechseln.

Verlinkung der Seiten

Dieser Schritt wird dazu beitragen, dass Ihre Wireframes in der richtigen Reihenfolge erscheinen – wie auf jeder Website. Um diese Navigation zu erreichen, klicken Sie auf die Linkleiste in der oberen rechten Ecke .
Lassen Sie uns zunächst damit beginnen, die Homepage mit der Seite Produkte und Dienstleistungen zu verbinden:

• • Gehen Sie zur Startseite

• Klicken Sie auf die Linkleiste in der oberen rechten Ecke

Siehe Eigenschaftenbereich

Der grün hervorgehobene Abschnitt zeigt die verschiedenen Wireframes, die Sie bisher erstellt haben. Beginnen wir mit der Verlinkung der Homepage. Klicken Sie auf das Dropdown-Menü, um die Liste der verfügbaren Mockups anzuzeigen. Es wird eine Liste wie unten angezeigt:

Wählen Sie in der angezeigten Dropdown-Liste Produkte und Dienste aus, um einen Link von der Startseite zu Produkten und Diensten zu erstellen. Wiederholen Sie dasselbe Verfahren für die anderen Seiten.
Die Kunst der Entscheidungsfindung: Für Manager, Führungskräfte und Produktmenschen

Exportieren des Drahtmodells

Das soeben erstellte Wireframe ist nutzlos, wenn Sie es Ihrem Kunden/Endbenutzer nicht in einem gebräuchlicheren Format wie PDF oder PNG präsentieren können. Zu diesem Zweck ermöglicht Ihnen Balsamiq den einfachen Export von Mockups in eines dieser Formate.
In diesem Beispiel exportieren wir unser Mockup in ein PDF-Format. Klicken Sie dazu auf das Menü Projekt und dann auf Als PDF exportieren.
Sie erhalten einen Bildschirm wie den unten gezeigten:

Aktivieren Sie das Kontrollkästchen – „Verknüpfungshinweise anzeigen“.
Klicken Sie dann auf Als PDF exportieren . Es wird ein Popup-Fenster angezeigt, in dem Sie ein lokales Verzeichnis angeben können, in das das PDF exportiert werden soll. Der Fortschritt wird in einem Fortschrittsbalken wie unten angezeigt.

Wenn der Export abgeschlossen ist, wird ein Bestätigungsfeld angezeigt. Wenn Sie auf das Kästchen klicken, können Sie das PDF zusammen mit allen von Ihnen eingerichteten Navigationen anzeigen.
Aufbau von Minimum Viable Products – Wie viel ist zu viel?

Abschluss…
Die Bedeutung von Wireframing in der heutigen Welt der Anwendungsentwicklung lässt sich nicht leugnen. Sie bieten viele Funktionen, die Ihre allgemeine Arbeitsbelastung verringern – es gibt absolut keinen Mangel an Wireframing-Tools, aber Balsamiq ist eines der wenigen Tools, das Ihren Allround-Anforderungen gerecht wird!

Lernen Sie Online-MBA-Kurse von den besten Universitäten der Welt. Erwerben Sie Master-, Executive PGP- oder Advanced Certificate-Programme, um Ihre Karriere zu beschleunigen.