Herausgeberbewertungen: Benutzerbewertungen:[Gesamt: 0 Durchschnitt: 0] @media(min-width: 500px) { } @media(min-width: 800px) { }

Noya ist ein kostenloses UI-Prototyping-Tool mit Notion-ähnlichem Editor und Figma-Export. Dieses Tool ist nur ein weiteres UI-Prototyping-Tool für Sie, funktioniert jedoch anders. Es ist schneller und bietet Ihnen eine völlig neue Möglichkeit, Webseiten oder andere Benutzeroberflächen zu entwerfen. Sie können die UI-Blöcke per Drag-and-Drop zeichnen und dann das endgültige Layout in Echtzeit generieren. Es verfügt über Notion-ähnliche Schrägstrichbefehle, mit denen Sie verschiedene Blöcke in Ihre Designs einfügen können.

Damit können Sie Ihre Designs in nur wenigen Sekunden erstellen. Für Platzhalter wie Bilder und Tabellen können automatisch bearbeitbare Dummy-Daten für Sie generiert werden. Sie können sich ganz auf das Entwerfen konzentrieren und sobald das Design fertig ist, können Sie es als PNG-, PDF-und Figma-Datei exportieren. Es unterstützt auch den Export in React, aber ich denke, das ist nicht im kostenlosen Plan enthalten.

Mit dem kostenlosen Plan von Noya können Sie jeden Design-Prototyp einer Website, Landingpage oder Webanwendung erstellen. Sie sind jedoch nur auf 200 Blöcke begrenzt. Das ist gut für die Gestaltung von Websites für kleine Unternehmen. Der Editor beschränkt Sie nicht auf Blöcke mit fester Größe. Sie können die Größe und Form der Blöcke mit der Maus ändern, genau wie Sie die Größe von Bildern ändern.

🎉🚀 Wir stellen vor: Noya (YC W23) 🚀🎉

Noya ist ein Wireframing-Tool, das Designs generiert & Code. Probieren Sie es aus:https://t.co/Cxrcs1bWkb

Noya lässt Sie arbeiten Low-Fidelity-Wireframes und erstellen gleichzeitig High-Fidelity-Designs und React-Prototypen, die Sie mit Ihrem Team teilen können. pic.twitter.com/WV3bcXkLLt

– Devin Abbott (@dvnabbott) 9. Februar 2023

Kostenloses UI-Prototyping-Tool mit Notion wie Editor, Figma Export: Noya

Auf der Hauptwebsite von Noya, Sie haben gerade Sie müssen ein kostenloses Konto erstellen, um es nutzen zu können. Wenn Sie das also tun, landen Sie auf dem Haupt-Dashboard. Von hier aus können Sie Ihr erstes Projekt erstellen und dann mit dem Entwurf beginnen.

Im Editor müssen Sie als Erstes den Namen des Projekts und dann die Abmessungen festlegen. Außerdem wählen Sie ein Designsystem, aber derzeit wird nur Charka UI unterstützt.

Jetzt kann der wahre Spaß beginnen. Im Ansichtsfenster beginnen Sie einfach mit dem Zeichnen der Blöcke. Klicken Sie auf das „+“-Symbol und ziehen Sie dann einen Block. Basierend auf der Größe des gezeichneten Blocks wird versucht, automatisch zu erraten, was Sie wollen. Wenn Sie ein schmales Rechteck zeichnen, wird in der Kopfzeile automatisch vermutet, dass es sich um eine Navigationsleiste handelt.

Ebenso können Sie Ihren Designs weitere Blöcke hinzufügen, z. B. Bilder und einen Heldenbereich.

Blocks unterstützen Schrägstrichbefehle und es gibt auch ein Menü zum Ändern des Blocktyps. Geben Sie einfach einen Schrägstrich (/) ein und sehen Sie sich dann die Optionen an. Oder Sie können auch das Dropdown-Menü unten rechts in jedem Block verwenden, um den Typ festzulegen.

Nachdem Sie mit dem Entwerfen fertig sind, können Sie die Live-Vorschau des Designs sehen. Klicken Sie einfach auf „Live-Vorschau öffnen“ und dann darauf rendert Ihr Design auf einer Webseite im neuen Tab.

Auf die gleiche Weise können Sie weiterhin Blöcke hinzufügen und das Design sowie die Vorschau werden weiterhin für Sie generiert. Sobald Sie fertig sind, können Sie Ihr Design einfach exportieren. Klicken Sie auf die Option „Exportieren“ und dann sehen Sie die verschiedenen Optionen, die Ihnen dort angeboten werden.

Auf diese Weise können Sie dieses einfache und neue UI-Prototyping-Tool verwenden, das mit neuen Tools ausgestattet ist und einem anderen folgt Workflow beim Entwerfen von Benutzeroberflächen. Auch die Generierung von KI-Inhalten, die es bietet, ist lobenswert und Sie dürfen Ihre Projekte hier duplizieren.

Abschließende Gedanken:

Wenn Sie sich für UI-und UX-Design interessieren, dann bin ich es Sie werden dieses Tool sicher wegen seiner Einfachheit und leistungsstarken Funktionalität lieben. Das Beste an diesem Tool ist das Freihandzeichnen. Sie können die Bausteine ​​nach Ihren Wünschen gestalten und formen. Auch der Figma-und React-Export ist sehr nützlich, da dort mittlerweile moderne Designs erstellt werden.

Categories: IT Info