Kurze Zusammenfassung
Dieses Video ist ein Tutorial, das zeigt, wie man mit Hilfe von KI und dem Tool "Spotlight" in etwa 60 Minuten eine komplette Website erstellt. Es werden Beispiele für moderne Webdesign-Trends gegeben und erklärt, wie man eine Designsprache entwickelt, Werte definiert und Inhalte erstellt. Abschließend wird gezeigt, wie man die erstellte Website mit Spotlight verwaltet und live schaltet.
- Schnelle Website-Erstellung mit KI
- Nutzung von Spotlight als CMS
- Entwicklung einer Designsprache und Definition von Werten
INTRO
Das Video verspricht, in etwa 60 Minuten eine komplette Website mit KI zu erstellen, von der Konzeption bis zum fertigen Produkt mit Impressum, Datenschutz, Startseite und Aboutseite. Das Tutorial nutzt das neue Tool "Spotlight" und ist als One-Take-Video konzipiert, das den gesamten Prozess zeigt. Zur Entspannung während der Arbeit wird entspannende Musik im Hintergrund abgespielt.
BEISPIELE
Es werden aktuelle Webdesign-Trends vorgestellt, darunter Brutalismus mit Animationen und interaktiven Elementen wie FAQs und Quizze. Die neue Nexus-Website bietet Funktionen wie Light/Dark Mode und interaktive Quizze. Es werden Beispiele für verschiedene Website-Layouts gezeigt, darunter eine scrollende Bildleiste und eine Vergleichstabelle. Auch die Website von Yalia Intermitz, einem Sport-BH-Hersteller, wird als Beispiel genannt, die mit KI schnell erstellt wurde und ein Newsletter-Plugin sowie ein Quiz zur Interaktion bietet. Preventra K ist eine weitere Website, die komplett mit der Tastatur gesteuert werden kann und sich dem Layout anpasst.
KONZEPT
Um eine coole Website zu erstellen, muss man sich mit der eigenen Marke auseinandersetzen. Hierfür wird Cloud Code empfohlen, insbesondere mit dem Opus 4.6 Modell. Zuerst werden die Grundgedanken über das Unternehmen notiert. Für die Designsprache ist es wichtig, sich von anderen Websites inspirieren zu lassen, wie z.B. SAS Po, die moderne Websites für Software as a Service Businesses zeigt. Es ist wichtig, sich über die eigenen Werte, Vision und Brandsprache Gedanken zu machen. Als Beispiel wird eine Agenturwebsite für Scheurer Technologies erstellt, wobei betont wird, dass die Firma jetzt unter Start and Connect läuft.
ERSTELLUNG
Zuerst werden die Werte des Unternehmens aufgeschrieben, da diese die Designsprache beeinflussen. Für Scheurer Technologies sind die Werte Konkretheit, Proaktivität, Produktivität, Hilfsbereitschaft und Authentizität. Anschließend werden die Produkte beschrieben, wie z.B. das Software Studio und die Websiteerstellung, jeweils mit Alleinstellungsmerkmalen (USPs), Zielgruppen und Preisen. Die Designsprache wird durch Farbe (gelblich), Schriftart (Inter) und Stil (Technologieaffin, minimalistisch und clean) definiert. Es wird ein Technologie-affiner Stil gewählt, der aber dennoch minimalistisch und klar ist. Das Ziel der Website ist ein kostenloses Erstgespräch. Der Aufbau der Website soll als One Pager gestaltet sein, der alle notwendigen Informationen enthält, inklusive Impressum und Datenschutz.
SPOTLIGHT
Spotlight ist das Tool, mit dem die Website installiert wird und das demnächst auf der Website des Autors gebucht werden kann. Es kostet zum Release 12 € und später 17 € pro Monat, wobei es einen Code gibt, der den Preis lebenslang auf 12 € reduziert. Spotlight benötigt keinen Hoster, sondern nur eine Domain, die am besten bei Cloudfare erworben wird. Spotlight bietet vorinstallierte Seiten wie Startseite, Impressum und Datenschutzerklärung. Es gibt einen Medienbereich zum Hochladen von Bildern und PDFs bis maximal 60 MB. Benutzer können als Redakteure oder Admins eingeladen werden. Integrationen mit Google Analytics, Facebook Pixel und Cookie Banner sind möglich. In den Einstellungen können eine eigene Website hinterlegt, das Theme angepasst, Header und Footer angegeben sowie SEO-Einstellungen vorgenommen werden.
LIVE SCHALTEN
Der gesamte Code der erstellten Website wird in Spotlight kopiert. Es wird ein Bug festgestellt, der dazu führt, dass die JavaScript-Elemente nicht richtig geladen werden. Der Autor kontaktiert Cloud, um das Problem zu beheben. Die Website wird heruntergeladen und in Cloud Code geöffnet, um weitere Anpassungen vorzunehmen. Es werden interaktive Elemente wie ein Quiz erstellt und ein Light/Dark Mode Switcher eingebaut. Der Autor zeigt, wie man den Code anpasst, um den Download zu entfernen und die Animationen zu korrigieren. Abschließend werden noch ein Impressum und eine Datenschutzerklärung erstellt und in Spotlight eingefügt.
