Become a Creator today!Start creating today - Share your story with the world!
Start for free
00:00:00
00:00:01
#17 - Diese NoCode-Tools eignen sich perfekt für Prototyping
179 Plays4 years ago
Prototypen eignen sich perfekt dafür Produktideen zu testen und zu validieren. Es gilt mit minimalstem Aufwand und in kürzester Zeit den Bedarf für ein digitales Produkt zu testen.
In dieser Folge möchten wir dir 3 NoCode-Tools vorstellen, die sich perfekt für das Prototyping eignen.
Glideapps kostenlos nutzen: https://bit.ly/2SBiuMw
Adalo kostenlos nutzen: https://bit.ly/3q03bJR
*Softr kostenlos nutzen: https://bit.ly/35n4PM2
Michael Ionita auf YouTube: https://bit.ly/3gGcnhU
VisualMakers auf YouTube: https://bit.ly/3gui2J7
Tritt unserer kostenlosen NoCode Community bei: https://bit.ly/3iLTpZW
------------------------------------------------------------------------ VisualMakers.de ist eine Lernplattform und Community für den Bereich NoCode. Lerne mit uns, wie du Webseiten, Web-Apps & Mobile-Apps und Prozesse automatisieren kannst, ohne eine Zeile Programmiercode schreiben zu müssen. ----------------------------------------------------------------------- Bei den mit * gekennzeichneten Links handelt es sich um Affiliate-Links. Wir empfehlen in unseren Videos ausschließlich Produkte, die wir auch selber nutzen. Dafür erhalten ich eine Provision. Diese Provision ermöglicht es uns diesen Kanal und unsere Plattform zu unterhalten und zu verbessern. Mit dem Verwenden unserer Links unterstützt du diesen Kanal und unsere Plattform. Vielen Dank.
Recommended
Transcript
Einführung in No-Code Prototyping
00:00:00
Speaker
Herzlich willkommen zum Visual Makers Podcast. Ich bin Alex. Und ich bin Lilith. Wir unterhalten uns jede Woche über Themen rund um No-Code.
00:00:13
Speaker
Hey und herzlich willkommen zu einer neuen Podcast-Folge. Heute mal ohne Gast, aber dafür trotzdem mit einem sehr spannenden Thema, wie ich finde. Und zwar geht es heute um Prototyping mit No-Code. Ich habe letztens in der Frühstückssession von Sabrina Görlich's Beyond Designs Print Community einen kleinen Vortrag darüber halten dürfen.
00:00:36
Speaker
Und Sabrina hat mich im Vorderen gefragt, inwieweit Prototyping mit No-Code relevant für einen Design-Sprint sein
Tools für Bildschirmdesigns und Klick-Dummies
00:00:44
Speaker
kann. Also ein Design-Sprint ist ja eine Innovations-Workshop-Methode, in der in vier bis fünf Tagen eine Produkt-ID, ein Geschäftsmodell, vielleicht auch eine Idee für eine Dienstleistung getestet wird. Das heißt, es werden verschiedene Fragen zur Kern-ID definiert, gechallengt.
00:01:00
Speaker
Das Ganze wird dann in einem Storyboard und in einem Prototyp ausgearbeitet, um es anschließend mit Testnutzern zu testen und zu validieren. Und da man also in diesem Prozess nur einen Tag Zeit hat, um diesen Prototyp zu erstellen, gilt es natürlich, sich Methoden rauszusuchen, mit denen das relativ schnell realisierbar ist.
Funktionale Prototypen mit No-Code
00:01:22
Speaker
In der Regel werden jetzt zum Beispiel
00:01:25
Speaker
Design Tools dafür eingesetzt wie Figma, Adobe XD oder Sketch, mit denen einfach verschiedene Screen Designs erstellt wird und diese verbunden werden, um daraus ein Clickdummy zu generieren. Und der sieht dann aus wie ein reales Produkt, fühlt sich auch ein bisschen so an, aber natürlich hat der keine darunter liegenden Funktionalitäten.
00:01:47
Speaker
Mit NoCoTools kann man das Ganze eben auf ein neues Level heben. Das heißt, mit NoCoTools kann man in der gleichen Zeit zu einem identischen Ergebnis kommen, dazu aber dann eben auch Funktionalitäten in diesem Prototyp integrieren.
00:02:04
Speaker
Und dementsprechend hatte ich mir da drei Tools rausgesucht, die ich in der Frühstückssession einmal vorgestellt habe.
Werkzeuge für schnelle Landing Pages
00:02:10
Speaker
Und genau, ich kann sagen, die waren allesamt begeistert von den Möglichkeiten, die es mit No-Code-Tools eben gibt, mit diesen dreien, die ich dort vorgestellt habe. Und wir hatten auch einen kleinen Praxisteil, wo die Teilnehmer eben selbst
00:02:25
Speaker
eine Landingpage erstellt haben mit einem dieser Tools und wir hatten im Prinzip fünf Minuten Zeit dafür und ich muss sagen, die Ergebnisse konnten sich wirklich wirklich sehen lassen. Also es waren wirklich tolle Landingpages dabei, die von den Teilnehmern erstellt wurden, in so kurzer Zeit vor allen Dingen auch. Genau und ich dachte mir, ich nehme das einfach mal mit und erzähle dir ein bisschen was über diese drei Anwendungen, die ich dort vorgestellt habe, weil ich einfach glaube,
00:02:52
Speaker
dass die erstmal super einsteigerfreundlich sind und sich zweitens super gut eigenen, um einen eigenen Prototyp für eine Produktidee zu entwickeln und damit halt eben auf Testnutzer zuzugehen, um sich Feedback dazu einzuholen.
00:03:08
Speaker
An dieser Stelle sei noch mal kurz gesagt, all die Tools, die ich gleich vorstelle, sind in der Basisversion kostenlos nutzbar. Das heißt, du kannst sie einfach ausprobieren, du kannst auch deinen Prototyp komplett mit diesen Apps erstellen und deinen Testnotz dann zur Verfügung stellen, ohne dass du da jetzt irgendwie zahlen musst. Also da wird es wirklich erst relevant, wenn du zum Beispiel mehr als 500 Datensätze in deiner App speichern möchtest.
00:03:32
Speaker
dann müsstest du da wahrscheinlich deinen Tarif upgraden, aber ich denke mal, für das Testen einer Produktidee reichen die Funktionen vollkommen aus, die die Apps in der Grundversion zur Verfügung stellen.
Glide Apps: Einfache App-Erstellung aus Tabellen
00:03:44
Speaker
Und die erste Anwendung, die ich dir hier einmal vorstellen möchte, ist Glide Apps. Mit Glide lassen sich progressive Web- und Mobile Apps mit Hilfe von Spreadsheets erstellen. Und jetzt fragst du dich vielleicht erstmal, okay, was ist eigentlich progressiv? Was sind denn progressive Mobile Apps? Und vor allen Dingen auch, wie lassen sich Mobile Apps aus Spreadsheets erstellen? Was ist eigentlich die Funktion dahinter?
00:04:07
Speaker
Also, progressiv bedeutet im Prinzip, dass es sich dabei nicht um native Mobile Apps handelt. Das heißt, du kannst diese Apps nicht in den Apple App Store oder in den Google Play Store veröffentlichen. Stattdessen läuft die App auf einem Webserver, sozusagen eine Website, die auf dem Smartphone aufgerufen wird. Du kannst dir also von dieser Website sozusagen einen Shortcut erstellen und den auf deinem
00:04:36
Speaker
Smartphone Homescreen ablegen, sodass es sich anfühlt und so aussieht wie eine normal funktionierende App. Kleine Besonderheit dabei ist allerdings, dass das Ganze nicht im Offline Modus funktioniert. Das bedeutet, wenn du keine Netzwerkverbindung hast, dann besteht natürlich auch keine Verbindung zum Webserver und dementsprechend kann dann auch die App nicht aufgerufen werden. Also das sollte man auf jeden Fall beachten.
00:04:58
Speaker
Und zweitens, okay, was hat eigentlich das Spreadsheet für einen Sinn dahinter? Im Spreadsheet speicherst du im Prinzip Daten, die du in der App anzeigen möchtest. Also eignet sich das super für zum Beispiel Online-Shops oder Directories, wo du einfach Produkte oder vielleicht auch Orte, Restaurants, in meinem Fall waren es zum Beispiel Lieblingsbücher, in dieser Tabelle speicherst, dir verschiedene Spalten anlegst. Bei mir waren es zum Beispiel eine Spalte für
00:05:25
Speaker
den Buchtitel für ein Bild von dem Buch, dann eine Beschreibung und den Namen vom Autor. Und dann kannst du das Ganze einfach mit zwei Klicks in Glide hochladen und Glide generiert dir daraus ein richtig gut aussehendes App-Interface, mit dem du dann weiterarbeiten kannst. Und das, was Sabrin auch nochmal hervorgefoben hat, was ich auch nochmal wichtig fand, ist,
00:05:49
Speaker
dass sie mit ihrem Design Background es sehr gut findet, dass man, was das Designer geht, relativ eingeschränkt ist mit diesen Apps. Also natürlich kannst du das Designer deine Bedürfnisse anpassen, es lassen sich Ansichten verändern, es lässt dich das gesamte Farbkonzept anpassen, du kannst Fonts und so weiter anpassen.
00:06:06
Speaker
Aber du kannst eben nicht bis ins kleinste Detail deine App individualisieren. Und das hindert sie so ein bisschen daran, ihren Perfektionismus auszuleben und sich in Details zu verlieren. Und auf der anderen Seite befähigt es natürlich auch Leute, die von sich glauben, dass sie eben kein Experte im Bereich Design sind, das Ganze zu überkommen, indem halt die App den Großteil der Arbeit einfach abnimmt und im Prinzip ein wunderschönes Design liefert, ohne dass man da viel machen
Einschränkungen und Möglichkeiten in Glide
00:06:36
Speaker
muss.
00:06:36
Speaker
Ich habe also meine Liste mit Lieblingsbüchern in GlideApps hochgeladen und das erste was ich dann sehe ist im Prinzip schon eine Mobile App die ich dann vor mir habe mit einer Liste meiner Lieblingsbücher und es sieht zu dem Zeitpunkt schon wirklich gut aus. Ich kann dann natürlich noch verschiedene Einstellungen vornehmen für das Ganze.
00:06:57
Speaker
Im Prinzip könnte man die App so wie sie ist schon hochladen, veröffentlichen und dann auf seinem Smartphone nutzen. Man hat also, wie gesagt, habe ich jetzt so die Liste mit Büchern vor mir und wenn ich jetzt auf das Buch klicke, dann bekomme ich auch eine Detailansicht mit weiteren Infos, also zumindest alle Infos, die ich eben gespeichert habe in der Tabelle.
00:07:14
Speaker
Ich kann mich hier hin und her bewegen, kann nach Büchern suchen, also das sind alles so Standard-Funktionalitäten, die sind bereits von Anfang an integriert. Wenn ich jetzt das Design ändern möchte, dann klicke ich hier einfach ein beliebiges Element an und bekomme dann rechts ein Eigenschaftenfenster aufgerufen, in dem ich dann weitere Einstellungen vornehmen kann. Also ich kann zum Beispiel die
00:07:34
Speaker
Die Übersicht meiner Bücher kann ich anpassen in zum Beispiel so eine Kacheloptik. Ich könnte jetzt hier auch die Liste, die Listenansicht verändern. Ich kann hier die Bildgrößen anpassen, Texten zufügen oder entfernen, Informationen einblenden, ausblenden. Kann zum Beispiel so eine Favoritenfunktion auch einschalten mit einem Klick, dass ich hier im Prinzip Bücher als Favorit markieren kann, die dann in einer extra Liste gespeichert werden.
00:08:02
Speaker
Und ich kann auch mit einem Klick eine Funktion aktivieren, um neue Bücher in diese Liste hinzuzufügen. Das heißt, oben rechts ploppt dann sozusagen so ein kleines Plus auf, mit dem ich dann ein Formular bekomme, in das ich neue Bücher eintragen kann und abspeichern kann.
Adalo: Native App-Erstellung
00:08:18
Speaker
Das ist natürlich ein Use Case, für das ich Glide nutzen kann. Hier habe ich natürlich super viele Funktionalitäten, die ich noch hinzuschalten kann. So was wie zum Beispiel User Signups. Das heißt also, ihr könnt sich Nutzer anmelden, registrieren. Ich kann verschiedene Bereiche nur für registrierte Nutzer zugänglich machen. Ich kann auch Zahlungsfunktionen implementieren, wenn ich jetzt zum Beispiel einen Online-Shop plane und das mit Glide einrichten möchte.
00:08:44
Speaker
Dann kann ich hier auch Produkte listen, die dann tatsächlich über ein Formular gekauft werden können und bezahlt werden können. Superspannendes Thema. Ich verlinke dir auch mal zwei Beispiel Apps, die ich mir hier rausgesucht habe. Die kannst du dann einfach mal dir anschauen, austesten. Genau, Link findest du einfach in den Show Notes. Ein weiteres No-Code-Tool, was ich dir vorstellen möchte, ist Adello. Im Gegensatz zu Glide lassen sich mit Adello native iOS und Android Apps erstellen.
00:09:13
Speaker
Das Interface unterscheidet sich ein bisschen von Glide. Hier haben wir zum Beispiel eben nicht die Möglichkeit, uns einfach eine App aus einem Spreadsheet generieren zu lassen, sondern wir bekommen direkt verschiedene App-Screens hier zur Verfügung gestellt. Also man kann sich das vorstellen, man hat im Prinzip eine weiße Canvas, auf der sich alle App-Screens tummeln. Man kann dann von einem Screen zum anderen navigieren, die miteinander verknüpfen und da Schritt für Schritt jeden App-Screen einmal bearbeiten.
00:09:43
Speaker
Das coole ist hier, dass es neben den Komponenten, die Adado bereitstellt, also sowas wie Listen oder einfache Funktionalitäten, Navigation und so weiter, einen Komponentenmarktplatz gibt, auf dem die Community eigene Komponenten hochladen kann. Und damit man mal so einen Eindruck bekommt, was mit Adado eigentlich möglich ist,
00:10:06
Speaker
kann man sich mal den YouTube Kanal von Michael Ionita anschauen, den werde ich auch mal verlinken in den Show Notes. Der zeigt nämlich ganz cool, welche Apps man mit Adalo bauen kann. Unter anderem hat er da einen Instagram-Clone gebaut oder auch einen Clubhouse-Clone. Also es ist auch möglich, solche Sprachräume mit Adalo zu erstellen und zu veröffentlichen.
Softa: Dynamische Webapps mit Airtable
00:10:31
Speaker
Jetzt noch ein Tool, mit dem sich Webseiten und Webapps erstellen lassen. Und zwar handelt es sich dabei um SOFTA. SOFTA ist ein Berliner Unternehmen, ein Berliner No-Code-Startup, existiert seit 2019. Und mit SOFTA lassen sich Webapps und Webseiten in wenigen Minuten erstellen. Und das Konzept dahinter ist ziemlich cool, denn deine Website besteht dann aus vorgebauten Sektionen, sogenannte Blöcke.
00:11:00
Speaker
Das heißt, man startet mit einer blanken Canvas und kann sich dann vorgebaute Sektionen zu seiner Website hinzufügen. Und das verleiht dann natürlich einen enormen Geschwindigkeitsvorteil, weil man so mit fünf Klicks sozusagen schon eine komplette Seite gebaut hat, die man dann noch an seine eigenen Bedürfnisse anpassen kann. Was ist jetzt nochmal genau der Unterschied zwischen Webseiten und Webapps?
00:11:23
Speaker
Also Webseiten arbeiten mit statischen Inhalten. Das heißt, normalerweise, wenn man zum Beispiel eine Unternehmenswebsite hat, da definiert man einmal Texte und Bilder und dann ist das einmal statisch aufgesetzt. Dann bleibt das so über den gesamten Zeitraum. Vielleicht macht man nochmal eine Anpassung, nimmt so ein paar Änderungen im Text vor und so weiter, aber generell sind das halt die Daten, die auf der Website dargestellt werden und es bleibt im Großen und Ganzen auch so.
00:11:51
Speaker
Webapps hingegen arbeiten mit dynamischen Daten. Das heißt, dahinterliegend haben wir immer eine Datenbank, in der Daten gespeichert werden. Software bietet in diesem Fall eine native Integration zu Airtable an. Falls du Airtable noch nicht kennst, das ist ein Tabellenkalkulations- und Datenbankhybrid, der ähnlich funktioniert wie Google Sheets zum Beispiel, aber noch deutlich, deutlich mächtiger ist.
00:12:18
Speaker
Du kannst dir also in Airtable deine Datenstruktur aufbauen, zum Beispiel wieder, wenn man daran denkt, einen Online-Shop zu veröffentlichen oder eine Directory-App, einen Marktplatz, wie auch immer. Dann kann man in Airtable alle seine Daten strukturieren und speichern, das Ganze dann mit Software verbinden und dann lassen sich eben in Software Listen, Directories oder auch Online-Shops mit genau diesen Daten erstellen.
00:12:42
Speaker
Und das ist eben auch super schnell gemacht. Da muss man einmal den Connect herstellen zwischen den beiden Anwendungen, aber dann nimmt Software dich sehr gut an die Hand, beziehungsweise auch bei Visual Makers findest du Tutorials, wie man den Connect herstellt und Daten aus Airtable in Software anzeigen lassen kann.
00:12:59
Speaker
Software bietet dir außerdem auch an, Nutzerregistrierungen, eine gesamte Nutzerverwaltung aufzusetzen und vor allen Dingen auch Zahlungen durchzuführen. So eignet sich das Ganze zum Beispiel für einen Online-Shop, in dem es normale Produktverkäufe gibt oder auch für Mitgliedschaftsmodelle, wo zum Beispiel wiederkehrende Zahlungsmodelle eingesetzt werden.
Ermutigung zur Nutzung und Feedback
00:13:21
Speaker
In der kostenlosen Software Version lassen sich sogar eigene Domains verknüpfen. Das heißt, wenn du dich an dem Software Branding nicht störst, was irgendwo unten rechts an der Ecke rumschwebt, dann kannst du super einfach auch deine Software Seite komplett kostenlos betreiben mit deiner eigenen Domain. Also das waren die drei Tools, die ich dir heute vorstellen wollte. Ich hoffe, du hast einen guten Eindruck gewonnen und hast Lust bekommen, diese Anwendung einfach mal auszuprobieren.
00:13:48
Speaker
Wie gesagt, alle diese Anwendungen sind kostenlos nutzbar und vor allen Dingen auch schnell erlernbar. Dementsprechend super einsteigerfreundlich und es lassen sich richtig schnell tolle Ergebnisse erzielen. Falls du Fragen zu den obergenannten Tools hast oder deine Erfahrungen teilen möchtest, dein selbstgebautes No-Code-Projekt teilen möchtest, dann würden wir uns freuen, wenn du unserer kostenlosen No-Code-Community beitrittst bei Visual Makers und deine Erfahrungen teilst, dich mit anderen Makern austauscht und genau, da würden wir uns auf jeden Fall freuen.
00:14:18
Speaker
Ansonsten wünsche ich dir jetzt noch einen richtig schönen Tag. Mach's gut. Bis zum nächsten Mal. Wenn dir diese Folge gefallen hat, dann freuen wir uns, wenn du in der Apple Podcast App eine Bewertung für uns hinterlässt. Das hilft uns, in Zukunft besser gefunden zu werden. Und wenn du mehr über No-Code erfahren willst, dann schau doch gerne mal auf unserer Website vorbei visualmakers.de Ansonsten freuen wir uns, wenn du auch in der nächsten Folge wieder dabei bist. Bis zum nächsten Mal.