Konzeption, Design und Entwicklung eines One-Pagers
Für die Kommunikationsagentur comboxx.ch durfte ich eine neue Webseite konzipieren, gestalten und programmieren.
Die gut 25 Jahre junge Agentur mit langjähriger Erfahrung in Kommunikation, Marketing, Design und Projektleitung brauchte einen zeitgemässen digitalen Auftritt. Ziel war eine frische, reduzierte Webseite, die Inhalte kompakt vermittelt und dennoch Raum für visuelle Stilmittel lässt.
In der Umsetzung war ich weitgehend frei. Auf Basis eines eigenen Figma-Entwurfs entschied ich mich bewusst für einen One-Pager. Die Struktur ermöglicht es, alle relevanten Informationen übersichtlich auf einer Seite zu bündeln, ohne dass das Scrollen zu lang oder unruhig wird.
Vorher / Nachher
Während die bestehenden Texte übernommen wurden, behielt die Bildwelt zwar die gleichen Sujets, wurde jedoch mithilfe von KI neu generiert. Die verschiedenen Motive greifen folgendes Konzept auf: comboxx steht für Kommunikationsboxx, also einen Ort, in dem alle Kompetenzen und Erfahrungen der Agentur gebündelt sind. Diese Box-Motive visualisieren diese Idee und schaffen eine konsistente, moderne Bildsprache, die sowohl zur Agentur als auch zum Namen comboxx passt.
Während des Programmierens habe ich punktuell mit KI-Chats gearbeitet. Dabei war mir wichtig, den Code jederzeit selbst zu verstehen und nachvollziehen zu können. Die KI diente eher als Unterstützung beim Denken und Debuggen, nicht als Ersatz für eigenes Coden. Das Programmieren hat mir in diesem Projekt zunehmend Spass gemacht, insbesondere das Lösen konkreter Probleme und das schrittweise Optimieren und Vorankommen der Webseite.
Entstanden ist eine stabile, moderne und reduzierte Webseite für die Kommunikationsagentur meines Vaters sowie ein Projekt mit vielen wertvollen Learnings für mich. Von der Konzeption über den Figma-Entwurf bis zur KI-gestützten Bildentwicklung und technischen Umsetzung konnte ich meine gestalterischen und programmiertechnischen Fähigkeiten gezielt vertiefen.
(vha)
Ein zentrales Gestaltungselement war das Overlay von Text und Bild, das im Figma-Entwurf visuell gut funktionierte, sich in der technischen Umsetzung jedoch als anspruchsvoll herausstellte. Besonders im Bereich der Responsiveness war es schwierig, die Kommunikations-Boxen über verschiedene Bildschirmgrössen hinweg konsistent zu positionieren. Erst nach intensivem Testen, Anpassen und Verwerfen einzelner Lösungsansätze konnte ich eine akzeptable Umsetzung realisieren.
Weitere Herausforderungen ergaben sich beim Onlineschalten der Webseite. Durch ein Coaching konnte ich diese Hürden jedoch erfolgreich meistern. Rückblickend war das Projekt besonders lehrreich, da ich nicht nur gestalterische Entscheidungen treffen, sondern auch technische Probleme eigenständig analysieren und lösen musste. Diese Erfahrungen haben mein Verständnis für sauberen, nachvollziehbaren Code gestärkt und meine Freude am Programmieren weiter gefördert.