Wie erstelle ich ein Website mit Midjourney, Figma & ChatGPT?

Aufbau einer Karussell-Schnittstelle in HTML und CSS

• Zuerst erstellen wir das Karussell-System in Figma, um die Übergänge und Werte zu definieren.

• Anschließend bauen wir es in HTML auf, nachdem wir es in Figma gestaltet haben.

• Wir generieren ein Bild in Figma, das wir bereits im Mittelstreckenentwurf erstellt haben.

• Im UI/UX-Design haben wir zwei Bilder und die Plattformen Behance und Dribble erwähnt.

• Die Qualität wurde auf 2 und die Stilisierung auf 1000 gesetzt, wobei Modellversion 4 verwendet wurde.

• Wir importieren das Bild aus dem Mittelstreckenentwurf in Figma.

• Da es sich um eine mobile UI handelt, wählen wir eine der iPhone-Vorlagen aus.

• Wir zeichnen die UI-Elemente nach, erstellen perfekte Kreise und verteilen sie gleichmäßig.

• Anschließend wenden wir einen Farbverlauf und einen Schatten auf die Kreise an.

• Zum Schluss fügen wir den Text entsprechend der Farben, Positionen und Schriftarten in die Schnittstelle ein.

Aufbau einer Karussell-Schnittstelle in HTML und CSS

Grafikdesignschritte

• Im ersten Schritt geht es um die Größenanpassung des Textes innerhalb der Benutzeroberfläche.

• Als nächstes wird die Einbettung verschiedener Formen, Grenzen und Linien im Design betrachtet.

• Anschließend wird eine Rechteckform für den Header gezeichnet und ein Farbverlauf angewendet.

• Ein weiteres Rechteck wird für den Farbverlauf auf der linken Seite erstellt, zudem wird ein Schatten hinzugefügt.

• Die Hero-Bilder werden in Photoshop geöffnet, vergrößert und mit dem Stability Photoshop Plugin bearbeitet, um die Bildauflösung zu verbessern.

• Durch Wiederholung dieser Schritte für jedes Bild erhalten wir schließlich hochauflösende Bilder für das Design.

Grafikdesignschritte

Erstellung einer nahtlosen Maske und Karussellarbeit in Figma

• Zunächst erstellen wir eine Maske, die nahtlos in unseren Inhalt passt.

• Wir wählen das Stiftwerkzeug und zeichnen einen Pfad um den Bereich, den wir sauber maskieren möchten.

• Dann klicken wir mit der rechten Maustaste auf diesen Pfad und wählen "Vektormaske erstellen".

• Im Ebenenbedienfeld klicken wir anschließend auf die Maskenschaltfläche und nutzen das Zauberpinselwerkzeug, um Inhalte am Rand unseres Bildes auszuwählen.

• Dann wählen wir die Maske aus und verwenden das Pinselwerkzeug, um sie schwarz einzufärben.

• Wir stellen sicher, dass alles deselektiert ist, wählen unsere Maskenebene aus und nutzen einen größeren Pinsel, um einen Farbverlauf um das Bild zu malen.

• Das macht den Übergang in den Rest unseres Inhalts nahtlos.

• Anschließend speichern wir es als PNG und platzieren unser Bild in Figma.

• Nun beginnen wir mit der Arbeit an unserem Karussell, platzieren das andere Bild und versetzen es nach rechts.

• Dann duplizieren wir einfach unseren Rahmen, wählen die beiden Elemente aus und bewegen sie nach links, sodass unser neues Kopfbild sichtbar ist.

• Als nächstes wählen wir das erste Kopfbild aus, gehen in den Prototypenmodus und fügen eine Interaktion hinzu, bei der es beim Ziehen zu einem anderen Rahmen navigiert.

• Wir stellen sicher, dass es sich um eine intelligente Animation handelt.

• Das Gleiche tun wir dann mit dem anderen Kopfrahmen, nur umgekehrt.

Erstellung einer nahtlosen Maske und Karussellarbeit in Figma

Erstellung eines HTML/CSS-Prototyps mit Figma und AI-Tools

• Es wird erläutert, wie man in einem Figma-Prototypen zwischen zwei Header-Bildern hin- und herschalten kann, und wie die Farben angeglichen werden.

• Die Verwendung von Auto-Animate ermöglicht automatische Farbübergänge zwischen den beiden Ansichten.

• Zusätzlich wird gezeigt, wie man mit dem Stiftwerkzeug das Hintergrund-Vektorshape nachzeichnet, um es als SVG zu exportieren und in HTML zu integrieren.

• Die Verwendung von KI-Tools wie ChatGPT wird vorgestellt, um den Codeerstellungsprozess zu vereinfachen. Es wird gezeigt, wie man ChatGPT verwendet, um HTML-Vorlagen oder Skript-Tags generieren zu lassen.

Erstellung eines HTML/CSS-Prototyps mit Figma und AI-Tools

Erstellung eines interaktiven Carousels mit der GreenSock-Animationsplattform

• Die Erstellung eines interaktiven Carousels mit der GreenSock-Animationsplattform beginnt mit dem Einsatz von Chat GPT, um den HTML-Code für die Animation zu generieren.

• Anschließend wird der generierte HTML-Code in das HTML-Dokument kopiert und das CSS für die Gestaltung des Carousels angepasst.

• Danach wird der JavaScript-Code hinzugefügt, um die Interaktivität des Carousels zu ermöglichen.

• Um zwischen den einzelnen Carousel-Elementen navigieren zu können, wird eine Anpassung des Codes für die Swipe-Funktion vorgenommen, sodass Benutzer sowohl auf Desktops als auch auf mobilen Geräten zwischen den Elementen navigieren können.

• Die Anpassungen ermöglichen eine reibungslose Navigation zwischen den Carousel-Elementen durch Wischgesten nach links oder rechts.

• Zum Abschluss werden die Carousel-Elemente durch Hero-Bilder ersetzt und das Layout sowie die CSS-Anpassung vorgenommen.

Erstellung eines interaktiven Carousels mit der GreenSock-Animationsplattform

Hinzufügen von Klassen und Stilen basierend auf der aktuellen Seite

• Der nächste Schritt ist das Hinzufügen einer Klasse zum body-Tag basierend auf der aktuell sichtbaren Karussell-Elemente.

• Diese Klasse ermöglicht es, alle Styles auf der Seite basierend auf dieser spezifischen Klasse zu aktualisieren.

• Der JavaScript-Code wird angepasst, um mit der aktuellen Seitenvariable zu funktionieren und wird bei jedem Seitenwechsel sowie initial aufgerufen.

• Anschließend wird das CSS-Gradient aus Figma für die Hintergründe kopiert und für jede Seite eingefügt, so dass es beim Übergang zwischen den Karussell-Elementen ändert.

• Des Weiteren werden Kreis-Elemente hinzugefügt, indem das CSS für diese Elemente kopiert und mittels Flexbox gleichmäßig platziert wird.

• Zusätzlich erfolgt das Erstellen des Markup und Anpassen des CSS-Layouts sowie das Kopieren von Variablen aus Figma und deren Integration in das CSS.

• Am Ende sollte das Ergebnis wie in der Beschreibung aussehen, und der vollständige Quellcode ist auf GitHub verfügbar.

Hinzufügen von Klassen und Stilen basierend auf der aktuellen Seite

Conclusion:

Die Erstellung einer Website mithilfe von Midjourney, Figma und ChatGPT ist ein faszinierender Prozess, der von der Entwurfsphase bis zur Interaktivität reicht. Wir hoffen, dass dieser Blogbeitrag Ihnen dabei hilft, ein ansprechendes und optimiertes Website-Karussell zu erstellen. Bleiben Sie dran für weitere spannende Entwicklungen in der Webentwicklung!