Webseiten mit Hilfe von künstlicher Intelligenz erstellen

Webseiten mit Hilfe von künstlicher Intelligenz erstellen

von | 16/11/2023 | Real life, SOCIUS Einblicke

Eine gute Website ist wichtig – das spürt man spätestens beim zähen Navigieren auf komplizierten Webseiten oder wenn man einfach nicht findet, wonach man auf einer Webseite sucht.

Gute Webseiten zu bauen ist allerdings auch nicht gerade einfach. Deshalb gibt es dafür vollkommen zurecht eine eigene Branche.

Neue Tools auf Basis von künstlicher Intelligenz (KI) können die Arbeit beim Erstellen von Webseiten sowohl auf professioneller Ebene als auch für self-made Webseiten sinnvoll unterstützen.

Wie das geht, haben Ralph Piotrowski und ich uns im dritten Teil unserer Crashkurs-Reihe angeschaut. Einige Tipps und Workflows beschreiben wir euch in diesem Blogbeitrag.

3 Möglichkeiten, KI für Webseiten einzusetzen

Im Bereich der Texterstellung für Webseiten sind u.a. folgende Punkte hervorzuheben:

  • Textgenerierung
  • Textzusammenfassung (z.B. für Teaser oder auf Übersichtsseiten)
  • Inhalts-Optimierung:
    • Grammatik- und Rechtschreibprüfung
    • Stilistische Verbesserungsvorschläge (z.B. einfachere und klarere Sätze)
    • SEO-Anreicherung: KI-basierte Tipps tragen dazu bei, Texte suchmaschinenfreundlicher zu gestalten und somit die Online-Sichtbarkeit zu verbessern (siehe unten)

Tipp: mehr dazu kannst du auch im Blogbeitrag zum Crashkurs KI in der Texterstellung nachlesen.

Auch die Integration von KI in Design, Bilder und Layoutprozesse ermöglicht Verbesserungen und Vereinfachungen:

  • Individuelle Logos erstellen (z.B. Looka.com, logomakerr.ai)
  • Bilder und Grafiken (z.B. DALL-E 3, Adobe Firefly)
  • Designvorschläge mittels integrierter KI in Canva Magic Studio oder Adobe Sensei
  • Layoutkonzepte (z.B. ChatGPT danach fragen, wie eine Website für ein beliebiges Thema aufgebaut sein sollte)

Tipp: mehr dazu kannst du auch im Blogbeitrag zum Crashkurs KI in der Bilderstellung nachlesen.

Kund*innen-Support ist wichtig und auch hier kann KI eine Rolle spielen:

  • Sofortiger Support: KI-Chatbots und virtuelle Assistenten bieten unmittelbare Hilfestellung bei Anfragen
  • Die Implementierung ist mittels Plattformen wie Dialogflow oder Microsoft Bot Framework möglich
  • Wie das genau geht? Lass dir z.B. von ChatGPT eine Schritt-für-Schritt Anleitung geben, die auf deine Bedürfnisse und deine Vorstellungen zugeschnitten ist.

Zugänglichkeit und Inklusivität von Webseiten mit KI erhöhen

Wichtig ist für Webseiten, dass sie gut bedienbar sind und Informationen leicht zugänglich machen. Dazu gehören die Aspekte:

  • Leistung: Wie kann die Ladegeschwindigkeit der Seite verringert werden?
  • Zugänglichkeit: Wie hoch ist die Benutzer*innenfreundlichkeit der Webseite (z.B. ausreichende hohe Kontraste, Schriftgrößen, etc.)?
  • Suchmaschinen-Optimierung (SEO): Wie gut wird die Webseite aufgefunden (durch Suchmaschinen wie Google oder Ecosia)

Diese Fragen lassen sich mithilfe des Analyse-Tools “Google Lighthouse” (kostenlos, keine KI) beantworten. Sollte sich daraus Verbesserungsbedarf ergeben, kann eine KI wie ChatGPT befragt werden, wo Einspar-Potenzial bei der Ladezeit zu finden ist (Leistung) oder bspw. welche Farbpalette für mehr Lesbarkeit und höhere Kontraste sorgt (Zugänglichkeit).

Möglichkeiten, wo KI für die Webseiten-Gestaltung eingesetzt werden kann

Möglichkeiten, wie KI für die Webseiten-Gestaltung eingesetzt werden kann

SEO erhöhen oder wie Webseiten besser auffindbar werden

SEO ist wie das präzise Beschriften eines Buchrückens in einer riesigen Bibliothek, damit Leser*innen genau das Buch finden können, das sie suchen, sobald sie den Katalog durchstöbern.

Die „Beschriftung des Buchrückens“ kann für eine  Website vorgenommen werden, indem:

  • Überschriften und Zwischenüberschriften aussagekräftig sind,
  • Schlagwörter in Texten und Überschriften enthalten sind,
  • Bilder aussagekräftige Titel, Beschreibungen, Unterschriften und “Alt Text” (was angezeigt wird, wenn das Bild nicht angeschaut oder geladen werden kann) erhalten und die richtige Größe haben,
  • Meta-Beschreibungen einer Webseite hinzugefügt werden.

Dabei kann KI unterstützen und Arbeit abnehmen: 

  • erforderliche Texte an SEO angepasst erstellen
  • Kontext (Text und Bild-Input) kann hochgeladen werden (z.B. mit GPT 4.0), um bessere Ergebnisse zu erzielen
  • Feedback geben lassen: “Sind Überschriften, Titel, Beschriftungen usw. für hohe Auffindbarkeit von Suchmaschinen noch zu verbessern?”

Webseiten individualisieren mit KI-generiertem Code

Mit neuen KI-Tools gibt es nun auch die Möglichkeit, eine Website selbst zu programmieren oder um Code zu ergänzen, mit dem sich individuelle Vorstellungen umsetzen lassen. Auch wenn Code, also die Regeln und Algorithmen, die im Hintergrund dafür sorgen, dass ein Programm funktioniert oder eine Webseite Funktionen und Gestalt hat, technisch klingen mag – mit KI braucht dieser Code weder geschrieben noch verstanden werden, um ihn nutzen zu können.

Soll für eine Webseite beispielsweise ein Button oder ein Inhaltsverzeichnis erstellt werden und dabei bestimmte Vorstellungen berücksichtigt werden, dann kann hierfür etwa ChatGPT für den entsprechenden Code verwendet werden. Die KI wird darum gebeten, den Code zu generieren, der den zu formulierenden inhaltlichen und äußerlichen Vorgaben entspricht. Daraufhin wird html-Code (Inhalt und Funktion) und CSS-Code (Erscheinungsbild) ausgegeben. Es handelt sich dabei um zwei unterschiedliche Programmiersprachen. Beide werden anschließend auf der Webseite eingefügt (z.B. als “neues Modul” bei WordPress). Gegebenenfalls sind Anpassungen, bzw. Iterationen des Prozesses nötig, um das Ergebnis zu optimieren.

KI-Komplettlösungen für Webseiten

Für die Website-Erstellung gibt es auch KI-gestützte Komplettlösungen wie sitekick.ai oder mixo.io.

Unsere Empfehlung diesbezüglich lautet, für sich abzuwägen zwischen mehreren KIs mit spezifischen Funktionen (meist in kostenpflichtigen Abos), dafür aber als bequeme Komplettlösungen oder einem (zahlungspflichtigen) Abo für einen der KI-Allrounder wie GPT 4, dafür allerdings mit Mehrarbeit durch Hin- und Herkopieren zwischen KI-Tool und Zielort.

Vielfalt und tolle Ergebnisse treffen auf bestehende Herausforderungen

Abschließend sind wir einerseits überrascht von der Vielfalt der Möglichkeiten, wo KI bereits sinnvoll und effektiv eingesetzt werden kann, um Workflows in der Website-Erstellung zu verbessern und zu beschleunigen und begeistert davon, wie gut teilweise die Ergebnisse sind. Andererseits sind uns auch noch einige Schwachstellen aufgefallen und offene Probleme (z.B. KI-Komplettlösungen). Allerdings ist auch da vermutlich nicht die Frage, ob auf diesen Feldern noch eine Lösung gefunden wird, sondern vielmehr, wie lange es noch bis zur Lösung dauert.

On the other hand

Für eine kritische Auseinandersetzung mit dem Thema Künstliche Intelligenz, den Implikationen und sozialen sowie ökologischen Konsequenzen von KI haben wir eine Seite eingerichtet, die verschiedene weiterführende Ressourcen bereitstellt: https://agency-in-ai.org/on-the-other-hand/

 

Auch zu den vergangenen Crashkursen (KI in der Texterstellung und KI in der Bilderstellung) findest du eine Zusammenfassung auf dem socius Blog:

Texterstellung:

https://socius.de/gedanken-ki-text/

Bilddarstellung:

https://socius.de/crashkurs-bilderstellung-ki/

 

Die Aufzeichnung vom Crashkurs kann weiterhin erworben werden für 50€ pro Crashkurs, bzw. 120€ für alle drei Crashkurse zusammen. Weitere Infos findet ihr hier: https://agency-in-ai.org/ki-crashkurse/

Fragen oder Anmerkungen? Schreib Ralph und Burkhard per hello@agency-in-ai.org

Bildquellen: pexels.com & midjourney

sinnvoll zusammen wirken

Socius change essentials

Entdecke praxisnahe Tipps für selbstorganisiertes Arbeiten in unserem gratis Onlinekurs, den SOCIUS change essentials. Mit über 30 Videos bietet der Kurs hilfreiche Selbstorganisations-Tools wie Konsentmoderation und Rollenboard-Tutorial.

Melde dich an und erhalte zusätzlich den SOCIUS brief, unseren Newsletter mit spannenden Themen und Veranstaltungen.

Hier kostenlos anmelden!
Wie geht Bilderstellung mit Künstlicher Intelligenz? Drei Levels, die weiterhelfen

Wie geht Bilderstellung mit Künstlicher Intelligenz? Drei Levels, die weiterhelfen

von | 23/10/2023 | Real life, SOCIUS Einblicke

Ein Foto schießen, eine Zeichnung anfertigen oder ein Bild nachbearbeiten lassen – das sind nur drei Funktionen von vielen, die mittlerweile mit künstlicher Intelligenz (KI) ausgeführt werden können.

In unserem zweiten Crashkurs am 17. Oktober stand die Bilderstellung im Fokus. Der Kurs orientierte sich dabei an 3 “Levels” der Bildgestaltung.

1. Level: Wie können Bilder mit KI generiert werden?

In den letzten Monaten gab es zahlreiche Neu- und Weiterentwicklungen im Bereich der KI-Bildgeneratoren. Firmen wie Adobe, Canva, OpenAI und Google haben regelmäßig neue Versionen ihrer Anwendungen vorgestellt. Aktuell kann man über die Suchmaschine Bing kostenlos auf das DALLE-3-Modell von OpenAI zugreifen, dem Unternehmen, das auch ChatGPT entwickelt hat (www.bing.com/create).

Damit können schnell und einfach Ergebnisse produziert werden, die zwar schon gut aussehen und etwas darstellen, aber noch nicht unbedingt das zeigen, was ich mir als Nutzer*in vorgestellt habe.

Hier der erste Versuch, ein Bild mit DALLE-3 zu produzieren. Ziel ist es, ein möglichst authentisches Bild von einem Workshop mit ca. 10 Personen zu erstellen, wovon hier noch keine Rede sein kann.

2. Level: Wie kann ich Bilder bewusst gestalten und eine bestimmte Bildidee umsetzen?

Um optimale Ergebnisse von KI-Bildgeneratoren zu erzielen, sind Anpassungen an den Prompts nötig. Wie bei der Texterstellung mit KI können auch hier zwei Grundsätze formuliert werden:

  • Prompts (die Aufforderungen, mit denen ich die KI starte) sollten klar, präzise und kompakt sein.
  • Detailreichtum verbessert das Resultat.

Aber was sind nun Details, die ich in einen Prompt einfließen lasse? Zu berücksichtigende Details lassen sich in vier Kategorien einteilen: 

  • Medium
    • z.B. Foto, Gemälde, Zeichnung, Icon, etc.
  • Stile und Effekte
    • z.B. animierter Stil, Stil einer bestimmten Künstlerin, etc.
    • z.B. Lichtquelle von oben, seitlich; Lichtstimmung nachmittags, herbstlich; Farbpalette aus Blautönen, warmen Farben
    • z.B. 3D-Effekt, schwarz-weiß Filter, Bokeh-Effekt, Tilt-Shift (“Miniatureffekt”)
  • Inhalt:
    • z.B. Subjekte, Objekte, Hintergrund, Haarfarbe, Alter etc.
    • z.B. Aktionen von Personen und Interaktionen mit Objekten (“hält Vase in der Hand”)
    • z.B. gemütliche, ruhige Atmosphäre
  • Technik:
    • z.B. Kamerawinkel (Weitwinkel, Vogelperspektive, Nahaufnahme),
    • z.B. Brennweite, Kameratyp (analoge Kamera oder Spiegelreflexkamera)

Nicht alle der genannten Details sind notwendig, um ein qualitatives Bild zu kreieren. Sie bieten jedoch eine Orientierung und zeigen die Vielfalt an Informationen, die berücksichtigt werden können, um das KI-Bild den eigenen Wünschen entsprechend anzupassen.

Besonders wichtig ist bei der KI-Bilderstellung auch, dass Iterationen zum Prozess dazugehören. Oft lässt das erste Ergebnis erkennen, was noch nicht wie gewünscht aussieht und dementsprechend im Prompt präzisiert werden könnte.

3. Level: Wie kann ich einen einheitlichen Stil über unterschiedliche graphische Elemente hinweg entwickeln?

Nach der detaillierten Anleitung zur Erstellung eines guten KI-Bildes konzentrierte sich das darauffolgende Kapitel des Crashkurses auf die konsistente Erstellung mehrerer Bilder, beispielsweise für ein Corporate Design.

Dafür haben wir einen spezifischen Workflow entwickelt, der von KI-generierten Visualisierungsvorschlägen für Icons, über Prompt-Ideen bis zur Feinabstimmung von Ergebnissen reicht.

Und obwohl die KI einen Großteil der Arbeit übernimmt, bleibt die Kreativität der Nutzenden bei der Auswahl und manuellen Anpassung von Vorschlägen essenziell.

Für die Anpassung kann dann wiederum die um KI-ergänzte Design-Software von Canva Magic Studio oder Adobe Firefly zur Anwendung kommen.

 

Mit DALLE-3 erstelltes Bild eines Workshops mit mehreren Details im Prompt und einigen Iterationen.

DALLE 3 Crashkurs

Zu gut, um wahr zu sein?

Vor allem die KI-gestützte Bilderstellung stellt uns als Gesellschaft vor eine Reihe komplexer, ungeklärter und wichtiger Fragen. Um nur einige zu nennen: 

  • Welche Bilder dürfen zum Training der KI-Modelle verwendet werden?
  • Wem gehören die Bilder, die mit KI generiert werden?
  • Wie viele Ressourcen werden verbraucht (Wasser für die Kühlung & Strom für den Betrieb der Rechen- bzw. Serverzentren)
  • Wie viele Ressourcen werden verbraucht, um das technische Gerät hinter KI-Anwendungen herzustellen (z.B. Chips) und wie sind die Arbeitsbedingungen entlang der Lieferkette?

Auf einer Website sammeln wir kontinuierlich Ressourcen, die sich mit kritischen Themen rund um KI auseinandersetzen: https://agency-in-ai.org/on-the-other-hand/

Unser Fazit

In den letzten Monaten gab es beeindruckende Entwicklungen im Bereich der visuellen KI-Anwendungen. Trotzdem entsprechen manche Anwendungen nicht der Qualität, die in Marketing-Kampagnen wünschenswert wäre. Dabei bleibt offen, ob diese Qualitätsunterschiede dauerhaft oder nur vorübergehend sind.

Kritische Themen wie Urheberrechtsfragen finden zwar erste Lösungsansätze, z.B. bei Adobe. Dennoch wirkt es so, als rückten Ressourcen- und Lieferkettenprobleme aufgrund der Begeisterung für neue Technologien in den Hintergrund und blieben damit unbeantwortet.

Wie geht es weiter?

Allen Teilnehmenden wurden am Ende die Folien des Crashkurses, die Aufzeichnung der Veranstaltung sowie eine kleine Ressourcensammlung mit weiterführenden Links und den vorgestellten Workflow als Grafik zur Verfügung gestellt.

Der nächste und vorerst letzte Termin in unserer Crashkurs-Reihe findet schon bald statt:

Vielen Dank an alle Teilnehmenden und bis zum nächsten Mal!

Alle Bilder wurden mit DALLE-3 erstellt.

hier gehts weiter

sinnvoll zusammen wirken

Socius change essentials

Entdecke praxisnahe Tipps für selbstorganisiertes Arbeiten in unserem gratis Onlinekurs, den SOCIUS change essentials. Mit über 30 Videos bietet der Kurs hilfreiche Selbstorganisations-Tools wie Konsentmoderation und Rollenboard-Tutorial.

Melde dich an und erhalte zusätzlich den SOCIUS brief, unseren Newsletter mit spannenden Themen und Veranstaltungen.

Hier kostenlos anmelden!
Vom Gedanken – über die KI – bis zum fertigen Text

Vom Gedanken – über die KI – bis zum fertigen Text

von | 06/10/2023 | Real life, SOCIUS Einblicke

Rückblick auf den Crashkurs Texterstellung mit Künstlicher Intelligenz September 2023

Es kann eine Menge von Gründen geben, warum es uns schwerfällt, einen umfangreichen Text zu schreiben. Mit text-generierenden KI-Tools wird es uns da etwas leichter gemacht. Aber wie genau funktioniert das?

In sechs Schritten, haben wir uns dieser Frage in einem Online-Crashkurs gewidmet. Ziel dabei war es, neben dem Teilen praxisnaher Anleitungen auch ein gemeinsames Verständnis der Grenzen dieser Technologie zu entwickeln – beides Voraussetzungen für einen selbstbestimmten Umgang mit Künstlicher Intelligenz.

1. Schritt: Den Workflow verstehen

Um sich einer Aufgabe, bzw. dem Schreiben eines Textes zu nähern, kann es praktisch sein, einen Workflow zu entwickeln. Dieser hilft dann dabei, sich immer wieder zu orientieren und strukturiert vorzugehen.

2. Schritt: Anleitung zu guten Prompts

Prompts sind die Aufforderungen, die KIs zum Arbeiten bringen, also die Auslöser, die ein Ergebnis anfordern. Dabei kommt es darauf an, wie diese formuliert werden. Denn auch vom Prompt hängt ab, wie gut das Ergebnis der KI wird. Daher haben wir uns im zweiten Schritt genau angesehen, was es zu beachten gilt, um gute Prompts zu formulieren.

3. Schritt: Ergebnis checken, Tipps und Tricks

Einige Risiken wie die sogenannten Halluzinationen (z.B. falsche Fakten) sind bei KI-generierten Texten besonders wichtig zu erwähnen. Daher haben wir uns diesen Punkt einmal genauer angeschaut. Dazu gab es Tipps, wie effektive Prompts zeiteffizient eingesetzt werden können, sodass am Ende der KI-Einsatz eine Zeitersparnis bedeutet und nicht mehr Zeit verbraucht, als den Text ohne KI zu verfassen.

4. Schritt: Ab in die Praxis per Hands-On Demo

In Kleingruppen haben wir uns anschließend mit zwei konkreten Fällen beschäftigt. Wie gehe ich vor, um ein Buchkapitel mit KI zu schreiben? Und wie gehe ich vor, um einen Blogbeitrag mit KI zu verfassen?

5. Schritt: Den eigenen Stil integrieren

Um die Texte, die mit Hilfe von KI verfasst wurden, zu verbessern, gibt es die Möglichkeit, Stile zu integrieren (z.B. den eigenen Schreibstil). Auch hierfür haben wir einen kleinen Workflow entwickelt, mit dem etwa der Ton oder die Wortwahl  des eigenen Stils bei KI-generierten Texten berücksichtigt wird.

6. Schritt: Viel Input? Sense-making!

Nach dem Input zur Texterstellung galt es zum Schluss einmal in Kleingruppen anzuhalten und zurückzublicken:

  • Was war neu für mich?
  • Wo gibt es noch Fragen?
  • Wie kann ich das Gelernte in meinen (Arbeits-) Alltag integrieren?

Das Schreiben umfangreicher Texte kann eine Herausforderung sein, aber mit einem klaren Workflow, dem Verständnis von Prompts und einigen bewährten Tipps kann es eine bereichernde Erfahrung werden und entlasten – zumindest dort, wo man den Einsatz von KI in der Texterstellung für sinnvoll und verantwortungsvoll hält.

Allen Teilnehmenden wurden am Ende die Folien des Crashkurses, die Aufzeichnung der Veranstaltung sowie eine kleine Ressourcensammlung mit weiterführenden Links zur Verfügung gestellt.

Hier ein kurzer Zusammenschnitt aus dem ersten Crashkurs im September.

hier gehts weiter

sinnvoll zusammen wirken

Socius change essentials

Entdecke praxisnahe Tipps für selbstorganisiertes Arbeiten in unserem gratis Onlinekurs, den SOCIUS change essentials. Mit über 30 Videos bietet der Kurs hilfreiche Selbstorganisations-Tools wie Konsentmoderation und Rollenboard-Tutorial.

Melde dich an und erhalte zusätzlich den SOCIUS brief, unseren Newsletter mit spannenden Themen und Veranstaltungen.

Hier kostenlos anmelden!
Visit Us On LinkedinVisit Us On FacebookVisit Us On InstagramVisit Us On Youtube