WorkAboutBlogContact
[campaign] exclusive
Get your new brand and web ready in 6 weeks.
Claim PackageClose

Die Rolle von AI für Webdesign: Den digitalen Horizont zum Besseren umgestalten? (2/3)

Der zweite Teil unserer Trilogie: Alles, was in Webdesign glänzt, ist nicht (KI) Gold.

6 min read

In dieser Trilogie erkunden wir die Möglichkeiten und Nachteile der Nutzung von KI zur Erstellung von Webseiten in 3 Artikeln. Wir haben die Serie mit einer Copywriting- und Wireframing-Perspektive gestartet. Nachdem wir in diesem Artikel ausführlich auf den Einfluss von KI auf das Design eingegangen sind, werden wir über Webentwicklung sprechen. 

Du wirst lieben, wie schnell du online gehen und großartig aussehen kannst! Beantworte ein paar einfache Fragen und Wix ADI wird sofort eine atemberaubende Webseite nur für dich gestalten.1


Die Designphase ist der Punkt, an dem wir Schwarz-Weiß-Wireframes in einen kreativen Ausbruch verwandeln, der Kunden und letztendlich Nutzer beeindruckt. Es gibt eine Menge KI-Tools, die es dir ermöglichen, nicht nur die Wireframes und den Text, sondern auch alle visuellen Elemente zu erstellen. Vom Logo über die visuelle Identität einschließlich Farben und Typografie bis hin zum Webdesign und Prototypen. Laut HubSpot Research nutzen 50 % der Webdesigner KI, um vollständige Webseiten-Designs zu erstellen.2 Aber ist das tatsächlich machbar? 

Wie kannst du KI für visuelle Elemente nutzen?

Bevor du mit dem Webdesign beginnst, musst du deine visuelle Identität festlegen. Es versteht sich von selbst, dass es viele KI-Tools gibt, die vorgeben, die Arbeit für dich zu erledigen. 

Lange bevor KI ins Designspiel eingetreten ist, machten Online-Logo-Generatoren bereits Designvorschläge. Jetzt nutzen Tools wie designs.ai beispielsweise KI, um ein Logo zu generieren. Wähle Stil, Farben, und du bist bereit. Offensichtlich bietet dies nicht viel Raum für Kreativität oder für die Berücksichtigung deiner Markenpersönlichkeit und anderer wichtiger Markenattribute, die entscheidend für die Erstellung eines starken Tech-Startup-Logos sind. 


Abgesehen davon muss dein Logo nicht nur für verschiedene Medien und Anwendungen funktionieren, du musst auch wissen, wie (nicht) du es verwenden kannst: Du musst verschiedene Hintergründe, Größen und Formate berücksichtigen und Markenrichtlinien festlegen, um Konsistenz über die Kanäle hinweg zu gewährleisten. Diese Schätzungen können sich nicht nur auf datengestützte Entscheidungen von Algorithmen verlassen, sondern müssen überprüft werden. 

KI kann verschiedene Farbkombinationen vorschlagen, die harmonisch und auffällig sind, und sie mit Schriftarten kombinieren, die leicht zu lesen sind und zum Thema der Webseite passen. Einige Hinweise zur visuellen Identität deiner Marke sind jedoch unerlässlich. Wenn du ausschließlich das „Aussehen“ deiner Marke berücksichtigst, könntest du dein Wesen und deine Markenstrategie vernachlässigen, die alle Entscheidungen leiten sollte.

Die Zusammenarbeit mit einer erfahrenen Startup-Branding-Agentur hilft, ein Branding zu schaffen, das mit deiner Markenpersönlichkeit übereinstimmt, deine Zielgruppe anzieht und als solide Grundlage über Jahre dient.

On-Demand-Bilder, die von KI erstellt wurden 

Während wir zuvor auf bereits vorhandene Fotografien auf verschiedenen Plattformen angewiesen waren, scheinen mit dem Start von Plattformen wie Midjourney und DALL-E die kreativen Möglichkeiten unendlich zu sein. KI hat bereits so viele Bilder erstellt, wie Fotografen in 150 Jahren gemacht haben.3 

KI-Bilderzeuger sind der neueste Trend, auch außerhalb des professionellen Kontexts: KI-generierte Fotografien beeindrucken Nutzer in sozialen Medien und führen zu Kontroversen. Mit dem richtigen Prompt kannst du atemberaubende visuelle Darstellungen mit allen Elementen erstellen, die du darstellen möchtest. Dies eröffnet eine breite Palette von Möglichkeiten für Tech-Startups, insbesondere wenn du noch kein MVP hast oder wenn du das Wesen deiner komplexen Lösung nicht in einem Foto erfassen kannst. 

Sieh dir das futuristische Foto an, das wir erstellt haben: rechts ein echtes Foto des Büros von The Branx als Ausgangspunkt. Links ist Midjourneys Antwort auf unsere Frage, wie unser Büro in 50 Jahren aussehen könnte.


Es ist jedoch nicht so einfach, wie es scheint: Die Erstellung von Prompts ist zu einer echten, mühsamen Aufgabe geworden. Die perfekten Worte zu finden, um das gewünschte Ergebnis zu erzielen, ist nicht einfach, und die Erwartungen an die Bilder steigen, da du jeden Pixel anpassen kannst. Kein Wunder, dass es bereits „Prompt-Generator“-Jobs gibt. 

Außerdem sind KI-Bilder nicht ohne Mängel: Menschen in den Bildern sehen oft nicht ganz „richtig“ aus4—kein Wunder, sie bestehen aus Daten.  

Für das Biotech-Startup Vivici haben wir Midjourney genutzt, um die fotografischen Elemente der Illustrationen zu erstellen, da sie keine Produktbilder hatten, die wir verwenden konnten. Mit Hilfe des KI-Tools und nachdem wir viel mit Prompts experimentiert haben, generierten wir Bilder von Joghurt und anderen Milchprodukten in einem Stil, der perfekt mit der visuellen Identität harmoniert. Um diesen visuellen Darstellungen einen Hauch von Originalität zu verleihen, haben wir sie weiter angepasst, indem wir illustrative Elemente hinzugefügt haben. 

Durch die Kombination von KI-generierten Bildern, mit viel menschlichem Input für den Prompt, und markenbezogenen Illustrationen haben wir einen einzigartigen Illustrationsstil für das Startup erreicht. Dies ist in der Tat eine Möglichkeit, die Vorteile von KI für das Design clever zu nutzen. 

Sieh dir auch die KI-Bilder an, die wir für das SaaS-Startup Revolear und das HR-Tech-Startup HRBench erstellt haben. Übrigens war ihre Erstellung nicht so einfach, wie du vielleicht glaubst: Wir benötigten ziemlich viele Versuche für Prompts und um die Fotos manuell zu retuschieren.

Von A bis Z: Wireframing, Design und Prototyping, erstellt von KI

Die Wireframes ins Design überführen 

Wenn du deine visuelle Identität festgelegt hast, wäre der nächste Schritt unseres Webdesign-Prozesses, die Low-Fidelity-Wireframes ins Design zu überführen. Dies beinhaltet normalerweise viel Hin und Her, die Eingabe des gesamten Teams und verschiedene Feedback-Schleifen, um jedes Detail zu perfektionieren. 

KI hat auch hier einen Anteil: Sie kann nicht nur Low-Fidelity-Wireframes erstellen, sondern unterstützt dich auch in der Designphase. Einer der Website-Builder, der schon lange existiert, Wix, hat KI in seinen Website-Builder integriert: Nachdem du den Firmennamen eingegeben hast, bist du bereit zu starten. Wähle dein bevorzugtes Thema und Layout und lass den Creator seine Arbeit tun. Du kannst es dann mit dem KI-Generator anpassen, der mit Open AI verbunden ist: Gib einige Schlüsselwörter ein und die KI schlägt verschiedene Varianten eines Abschnitts vor, die du überall hinziehen und ablegen kannst, wo du möchtest. 

Text, Struktur, Wireframes, Design und Prototyp: Das Non-Plus-Ultra?

Der Autodesigner 1.5 von Uizard (derzeit in der Beta-Version verfügbar) verfolgt einen anderen Ansatz und übertrifft Wix. Beginnend genau dort, wo wir im ersten Teil unserer Serie Webdesign trifft KI aufgehört haben, bietet er dir alles von Text bis zum Prototyp. Es klingt sehr vielversprechend: 

„Du bringst die Ideen, die KI macht den Rest. Nutze den Autodesigner, um einen ganzen Prototyp zu generieren und aktualisiere dein Projekt dann mit neuen Bildschirmen, Themen und Bildern mithilfe einfacher Text-Prompts.“5


Wie auch bei Relume musst du nur eine kurze Unternehmensbeschreibung angeben, um deine Low-Fidelity-Wireframes und deine gestalteten Wireframes zu erhalten, zwischen denen du wechseln kannst. Indem du einige Adjektive für den Stil deiner Webseite auswählst, lenkst du zumindest die Richtung des Designs. 


Als Nächstes kannst du Farben, Formen, Bilder, Icons, Buttons und Formulare bearbeiten. Die Palette der möglichen kreativen Optionen ist viel breiter als beim Wix-Creator. Außerdem ermöglicht es die Zusammenarbeit am Design, da Teammitglieder an deiner Aktivität teilnehmen können, und du kannst Seiten, Abschnitte oder einzelne Elemente exportieren. Darüber hinaus ermöglicht es dir, dein Webdesign einfach zu prototypisieren, anstatt Abschnitte manuell zu verbinden.   

KI für Webdesign, nur eine Illusion? 

Angesichts der Möglichkeiten und der Geschwindigkeit von KI-Website-Builder-Tools sind wir nicht überrascht, dass 78 % der Führungskräfte glauben, dass generative KI die Designprozesse effizienter und reibungsloser gestalten wird.6

All das glänzt nicht

Bis zu einem gewissen Punkt kann KI dein Webdesign inspirieren, sie kann helfen, Ideen zu sammeln und die grundlegende Struktur zu erstellen, die du brechen musst, um etwas inspirierenderes, markenbezogenes und einzigartiges zu gestalten. Sie könnte dir Zeit sparen, um den ersten wirklich groben Entwurf zu erstellen und auch helfen, einzigartige Fotografien zu erstellen, die noch niemand zuvor gesehen hat. 

Jesus Coto, CEO und Mitgründer von The Branx, weist darauf hin: 

„KI wird dich verführen zu glauben, dass du schnellere Ergebnisse erzielst. Aber du wirst wahrscheinlich genauso weit davon entfernt sein, eine einzigartige Webseite zu erstellen, wie du es vor der Nutzung von KI warst.“ 


Auf den ersten Blick hast du den Eindruck, dass du deine Sitemap, Wireframe usw. in einem Bruchteil der Zeit erstellt hast, die es ohne KI dauern würde. Wenn du jedoch genauer hinsiehst, stellst du fest, dass das Ergebnis an Einzigartigkeit, Kreativität und dem menschlichen Touch fehlt, der ansprechendes Branding und Webseiten auszeichnet, was bedeutet, dass es noch ein langer Weg ist. Das bedeutet nicht, dass die KI-Ergebnisse überhaupt nicht nützlich sind—du kannst sie zur Inspiration nutzen oder um mehr Informationen darüber zu sammeln, was wahrscheinlich funktionieren oder nicht funktionieren wird, was dir hilft, bessere Entscheidungen zu treffen. 

Warum das menschliche Element im Webdesign entscheidend ist

Normalerweise verbringen wir mit all den Strukturierungs-, Copywriting- und Designbemühungen Stunden an einem einzigen Abschnitt einer Webseite. Das liegt daran, dass es ein kreativer, innovativer Prozess ist, bis du eine einzigartige und überzeugende digitale Erfahrung erreichst. KI-generierte Designs sind jedoch standardisiert, ganz das Gegenteil von einzigartig. Damian Bello, Webdesigner und Mitgründer von The Branx, weist darauf hin:

„KI-generierte Webseiten stechen nicht hervor und setzen keine Grenzen. Sie schaffen nicht das Markenerlebnis, das jeder Nutzer sucht.“ 


Daher fehlt den von KI erstellten Designs die Menschlichkeit und die strategische Ausrichtung, die du durch die Zusammenarbeit mit einem menschlichen Designer erhältst. Außerdem geht effektives Webdesign über Ästhetik und Funktionalität hinaus; es hängt davon ab, die Bedürfnisse, Emotionen und kulturellen Kontexte der Nutzer zu verstehen. KI ist hauptsächlich datengestützt und kann die nuancierten Aspekte der Nutzererfahrung, insbesondere emotionale und kulturelle Details, nicht vollständig erfassen.7


Sei einzigartig oder sei nichts 

Wenn die unreflektierte Nutzung von KI im Webdesign weiterhin zunimmt, könnten Webseiten in Bezug auf Layout, Formulierungen und visuelle Elemente sehr ähnlich werden. Kein Startup kann sich mit einer Webseite, die eine Nachbildung dessen ist, was bereits erstellt wurde, abheben und Investitionen anziehen. 

Um den Nutzern ein einzigartiges digitales Erlebnis zu bieten, musst du die Fähigkeiten von Markenstrategen, Copywritern, Designern und schließlich Entwicklern ausrichten und nutzen. KI kann jedem von ihnen in irgendeiner Phase helfen, indem sie Alternativen bereitstellt, schnell Ideen entwickelt und mit spezifischen menschlich erstellten Prompts nützliche Inhalte erstellt. Daher wird es wahrscheinlich nicht helfen, ausschließlich auf KI-Tools zu setzen, um deine Branding- und Webseitenziele zu erreichen.

Hat dir der Artikel gefallen? Es kommt noch mehr: Der letzte Teil unserer Serie wird über die Nutzung von KI für die Webentwicklung sprechen. In der Zwischenzeit kannst du gerne unsere Branding- und Webprojekte für Startups durchstöbern. 

Übrigens, wenn du neugierig bist, wie unsere KI-Bilder in die jeweiligen Webseiten integriert sind, schau dir die Vivici-Fallstudie und die HRBench-Fallstudie an.

Quellen: 
1 Wix
2 HubSpot
3 EveryPixel
4 The Meisle
5 Uizard
6 Capgemini Research Institute

7 Sophisticated Cloud

About the author

Tamara Hofer
Copywriter & Marketing Assistant

Tamara ist unsere mehrsprachige Expertin für Texte und Storytelling. Sie hilft auch bei allen digitalen Marketingmaßnahmen.

In this article...