Wir präsentieren den ersten 3D-UI-Maker für Webdesigner

Entdecke den einfachsten Weg, UI für 3D und AR zu erstellen. Lerne die fortschrittliche SVG-Importfunktion von Vectary kennen.

UI-Design auf völlig neue Art

Da sich die Kreativbranche ständig weiterentwickelt, Grenzen verschiebt und große Sprünge macht, ist es wichtig, bei neuen Trends immer auf dem Laufenden zu bleiben. Designer, die sich auf 2D konzentrieren, nutzen bei der Erstellung von Prototypen für neue UIs meist vektorbasierte Formate und Tools. Das neue Feature von Vectary bietet eine Schnittstelle zwischen kreativen 3D- und 2D-Tools mit dem Ziel, den Designprozess zu vereinfachen. Vectary ist die einzige 3D-Designplattform, die dabei hilft, 3D- und AR-Design 2D-Designern näherzubringen.

Die Grundidee hinter diesem Feature ist, dass die 2D-Designer von heute mit Sicherheit die 3D-UI-Designer von morgen sein werden. Die meisten Interfaces gehen mittlerweile langsam in den AR- und 3D-Raum über.

Vorteile des neuen SVG-Imports von Vectary

Der SVG-Import bringt eine Reihe von Vorteilen mit sich:

• Vectary speichert SVG-Dateien als Vektorobjekte, sodass du die volle Kontrolle über Pfadqualität, Meshing und Rasterung hast.
• Alle Einstellungen für SVG-Dateien lassen sich ganz einfach in einem einzigen Panel anpassen und während des kreativen Prozesses jederzeit rückgängig machen.
• Du entscheidest, ob du mit der SVG-Datei als 2D-Bild oder als 3D-Geometrie arbeiten möchtest.

So startest du das Prototyping eines 3D- und AR-UI-Mockups:

1. Lade deine SVG-Datei herunter.
2. Ziehe die Datei per Drag-and-Drop in Vectary. Zuerst wird sie als gerastertes 2D-Bild angezeigt. Im rechten Panel erscheint dann ein Menü für das SVG-Objekt.
3. Im Tab „Geometry“ findest du 3 Eigenschaften, die du bearbeiten kannst: „Segments“, „Offset“ und „Extrude“. Durch Erhöhen des Werts für „Extrude“ erhält dein Objekt einen 3D-Look – je höher der Wert, desto dicker das Objekt. „Segments“ definiert die Qualität von 2D-Formen, die in 3D-Geometrie umgewandelt werden – je höher der Wert, desto präziser wird das Objekt. Bitte beachte, dass sich dadurch die Größe der exportierten Datei erhöht. Die Funktion „Offset“ zerlegt das Objekt im Wesentlichen basierend auf der SVG-Struktur in verschiedene Ebenen. Diese Ebenen werden dann in die dritte Dimension versetzt, was dir eine Explosionsansicht bietet.
4. Klicke mit der rechten Maustaste auf das Objekt und dann auf  „Convert To Geometry“ – die SVG-Datei wird in 3D umgewandelt. Jetzt kannst du Farbe und Materialien ändern, verschiedene 3D-Funktionen wie „Bend“ nutzen oder das gesamte Mesh bearbeiten, indem du in den Edit-Modus wechselst (drücke Enter, wenn es ausgewählt ist).
5. Das grundlegende 3D-Modell ist fertig. Jetzt kannst du verschiedene Hintergründe und Beleuchtungsoptionen hinzufügen.
6. Wenn du fertig bist, kannst du das Projekt als PNG-Datei oder 3D-Datei exportieren oder es in deine Website einbetten, sodass es für alle als interaktives 3D-Element mit AR-Vorschau sichtbar ist.

Tipp: So exportierst du eine SVG-Datei in Figma, um den geschichteten 3D-UI-Effekt in Vectary zu erzielen

1. Die Struktur deiner SVG-Datei bestimmt den Abstand zwischen den Objekten in 3D. Je tiefer eine Ebene oder Gruppe in der Wurzelstruktur der Datei liegt, desto weiter oben erscheint sie in den SVG-Einstellungen für „Geometry“ in Vectary, wenn du „Offset by structure“ verwendest.

Erstelle 3D- und AR-Logos

Nutze Vectary, um 3D-Logos zu erstellen, die als interaktives 3D-Element auf deiner Website oder als Objekt in Augmented Reality betrachtet werden können. Ziehe einfach die SVG-Datei deines 2D-Logos per Drag-and-Drop in die Szene und extrudiere sie in den Geometry-Einstellungen im rechten Panel.

Zeige dein 3D-UI-Design auf deiner Website und in Augmented Reality

UIs und 3D-Logos umhüllen und verformen

Ein weiteres Anwendungsbeispiel ist das Wickeln der UI oder des Logos um ein Objekt. Das kann eine UI sein, die in Augmented Reality präsentiert wird, oder ein Etikett, das um eine Flasche gewickelt ist. Du kannst mit „Deform“-Tools wie „Bend“ experimentieren, um diesen Effekt zu erzielen. Der neue SVG-Datei-Import von Vectary eröffnet 2D-Designern völlig neue Möglichkeiten, insbesondere bei der Erstellung von Mockups und beim Testen verschiedener Szenarien.