Wie erstellt man eine Website mit 7 KI-Tools?

AI-gesteuertes Webdesign

• Der Autor plant, KI in das Webdesign einzubeziehen, um zu sehen, wie das Endergebnis aussieht.

• Er verwendet Relum, ein Tool für Webdesigner, um ein KI-gesteuertes Wireframe zu erstellen.

• Das Unternehmen, für das das Design erstellt wird, stellt organische und vegane Hautpflegeprodukte für Männer und Frauen her.

• Relum generiert schnell eine grundlegende Sitemap für die Website und erstellt darauf basierend ein Wireframe.

• Die verschiedenen Abschnitte können angepasst werden, um mehr Kontrolle über das Endergebnis zu erlangen.

AI-gesteuertes Webdesign

Design- und Entwicklungsvorbereitung mit Relum

• Teile und Komponenten werden aus der Relum-Bibliothek für Webflow und Figma hergestellt, um das Design und die Entwicklung zu beschleunigen.

• Bevor ich mit Relum fortfahre, werde ich zu Dribble gehen und ein Moodboard erstellen, um Inspirationen für das Projekt zu sammeln.

• Es gibt keine genaue Wissenschaft für die Erstellung eines Moodboards. Ich suche einfach nach Dingen, die mir gefallen, wie Farben, die Verwendung von Abschnitten und die Darstellung des Produkts.

• Sobald ich meine Inspiration habe, werde ich mein Wireframe durchgehen, anpassen und sicherstellen, dass es dem entspricht, was ich aus dem Moodboard gesammelt habe.

• Anhand meiner gesammelten Inspiration und Ideen werde ich mein Wireframe anpassen, um sicherzustellen, dass es meinen Vorstellungen entspricht.

• Mit der Relum-Bibliothek kann ich verschiedene Abschnitte auswählen und an mein Design anpassen. Zum Beispiel kann ich eine Hero-Sektion auswählen und durch eine andere ersetzen, die am besten zu meinem Design passt.

• Relums AI-Tool Relum Ipsum generiert außerdem den Text basierend auf meiner Unternehmensbeschreibung. Wenn Sie Relum Ipsum selbst ausprobieren möchten, habe ich einen Affiliate-Link in der Beschreibung.

Design- und Entwicklungsvorbereitung mit Relum

Erstellung einer Wireframe-Landeseite in Figma und Markenkonzeption

• Ein schönes Figment-Plugin ermöglicht es, das Plug-in direkt in den Design-Dateien zu nutzen und eine ansprechende Kopie zu generieren.

• Es erfolgt ein Wechsel zwischen Sitemap und Wireframe sowie Anpassungen der Abschnitte, um sie etwas besser aufeinander abzustimmen.

• Nach Fertigstellung des Wireframes wird dieser in Figma exportiert.

• Die Farbpalette wird mit Hilfe von aicolors.com erstellt, indem eine beschreibende Eingabe wie 'Ultraleichtes organisches Grün mit Pfirsichrosa' verwendet wird.

• Zur Erstellung des Logos wird Mid Journey aufgesucht, wobei eine präzise Beschreibung wie 'Modernes, minimalistisches Lotusblumen-Logo, schwarz-weiß, natürliche Blume' verwendet wird.

Erstellung einer Wireframe-Landeseite in Figma und Markenkonzeption

Design und Branding Prozess

• Nach dem Hochladen des Lotusblumen-Logos auf vectorizer.ai wurde es in wenigen Sekunden komplett vektorisiert und heruntergeladen.

• Anschließend wurde das Unternehmen mithilfe von ChatGPT und der Schriftart Satoshi ein passender Firmenname generiert und mit einem Farbschema kombiniert, um das Logo zu erstellen.

• Die Farben und Stile wurden auf das Design angewendet, um eine konsistente Verwendung zu gewährleisten.

• Der Fokus lag darauf, das Wireframe zu verfeinern, die visuelle Anziehungskraft zu maximieren und gleichzeitig die Konsistenz bei Abständen und Schriftgrößen zu wahren.

• Das Wireframe wurde solide bearbeitet, wobei einige Komponenten und Auto Layouts angepasst wurden, um das gewünschte Design zu erreichen.

• Abschließend wurde die Platzierung von Bildern und Produktfotos berücksichtigt, um die visuelle Darstellung der Website zu optimieren.

Design und Branding Prozess

Wireframe und Designverbesserung

• Das Layout wird durch verschiedene Hervorhebungselemente aufgewertet.

• Die Blockabschnitte haben abgerundete Ecken und sind nicht in voller Breite, was eine ästhetische Wirkung erzeugt.

• Durch die Kontraste zwischen Überschrift und Absatztext wirkt das Design sauberer.

• Grüntöne im Design verleihen einen ansprechenden Gesamteindruck.

• Der Überschriftentyp wurde auf Cabinet Grotesque geändert und die Schaltflächen von normal auf mittel verstärkt.

• Die Marke wird durch die Darstellung von Produkten gestärkt, für die passende Bilder ausgewählt und bearbeitet wurden.

Wireframe und Designverbesserung

Fertigstellung der Website mit Hilfe von KI-Tools

• Für die Gestaltung der Website für ein Unternehmen für organische Hautpflege wurden insgesamt sieben KI-Tools verwendet.

• Die Tools reichten von der Erstellung des Layouts und der Texte bis hin zur Bearbeitung der Produktfotos.

• Der Einsatz von KI-Tools war mehr ein Experiment, um zu sehen, wie stark die KI in den Designprozess eingreifen kann, anstatt den Designer komplett zu ersetzen.

Fertigstellung der Website mit Hilfe von KI-Tools

Conclusion:

Der Einsatz von KI-Tools war ein Experiment, um zu sehen, wie stark die KI in den Designprozess eingreifen kann, anstatt den Designer komplett zu ersetzen. Mithilfe von KI-Tools wie Relume AI, MidJourney, ChatGPT und anderen wurde eine Website für ein Unternehmen entwickelt, das organische Hautpflegeprodukte herstellt. Erfahren Sie, wie diese Tools den gesamten Design- und Entwicklungsvorgang beeinflusst haben.