[{"data":1,"prerenderedAt":357},["ShallowReactive",2],{"navigation":3,"projects-page":30,"projects":54},[4],{"title":5,"path":6,"stem":7,"children":8,"page":29},"Blog","/blog","blog",[9,13,17,21,25],{"title":10,"path":11,"stem":12},"From Mockup to Market: My End-to-End Product Design Process","/blog/from-mockup-to-market","blog/from-mockup-to-market",{"title":14,"path":15,"stem":16},"How I Built My Design System from Scratch","/blog/how-i-built-my-own-design-system-from-scratch","blog/how-i-built-my-own-design-system-from-scratch",{"title":18,"path":19,"stem":20},"Modal-Dialoge im UX-Design: Best Practices, häufige Fehler und echte Beispiele","/blog/modal-dialoge","blog/modal-dialoge",{"title":22,"path":23,"stem":24},"The Psychology of Color in UI Design","/blog/psychology-of-color-in-ui-design","blog/psychology-of-color-in-ui-design",{"title":26,"path":27,"stem":28},"The Case for Slow Design in a Fast-Paced Digital World","/blog/slow-design-in-fast-paced-digital-world","blog/slow-design-in-fast-paced-digital-world",false,{"id":31,"title":32,"body":33,"description":37,"extension":44,"links":45,"meta":48,"navigation":49,"path":50,"seo":51,"stem":52,"__hash__":53},"pages/projects.yml","Creating Brands, Designing Interfaces, Building Experiences.",{"seo":34,"title":32,"description":37,"links":38},{"title":35,"description":36},"Projekte – Branding, Webdesign & Code","Projekte von Bureau Kainbacher: Corporate Design, Websites und Webanwendungen für Kunden wie den Regionalverband Bodensee-Oberschwaben, Zemtu und IRR.","Als UX/UI-Designer und Front-End-Entwickler mit über 15 Jahren Erfahrung nutze ich meinen Abschluss in Interactive Design von der FH Vorarlberg, um benutzerzentrierte digitale Erlebnisse zu gestalten. Mein Ansatz verbindet kreative Strategien mit technischem Fachwissen, um Konzepte in funktionale, zielgerichtete digitale Produkte zu transformieren, die Design und Technologie nahtlos integrieren.",[39,42],{"label":40,"color":41},"Let's talk","neutral",{"label":43},"E-Mail","yml",[46,47],{"label":40,"color":41},{"label":43},{},true,"/projects",{"title":35,"description":36},"projects","MpRvaLKz46-TbOWTpn6jPo2DL01-Gn8oFe9uB-WyxGc",[55,148,170,190,209,227,246,264,282,302,321,340],{"id":56,"title":57,"client":58,"color":59,"date":62,"description":63,"extension":44,"featured":49,"gallery":64,"image":106,"label":107,"meta":108,"partner":107,"sections":141,"stem":145,"summary":113,"tags":146,"url":111,"website":112,"__hash__":147},"projects/projects/00 zukunft-flaechennutzung.yml","Zukunft Flächennutzung","Regionalverband Bodensee-Oberschwaben",{"bg":60,"fg":61},"#3E5902","#F2F2E6","2026-01-01T00:00:00.000Z","Für das Projekt „Zukunft Flächennutzung“ des Regionalverbands Bodensee-Oberschwaben wurde ein eigenständiges Erscheinungsbild entwickelt. Die Bildmarke aus vier ineinandergreifenden Flächen steht für die vielen Ansprüche an den begrenzten Raum – Wohnen, Arbeiten, Natur und Energie. Ergänzt wird sie durch ein Farbsystem aus Grün, Lime, Rot und Gelb, die Typografie aus Bricolage Grotesque und Inter sowie einen Logo-Guide für den einheitlichen Einsatz.",[65,69,74,78,82,86,90,94,98,102],{"src":66,"alt":67,"layout":68},"/projects/zukunft-flaechennutzung/guide-01.jpg","Titelseite des Logo-Guides mit dem Logo auf hellen Farbflächen","full",{"src":70,"alt":71,"caption":72,"layout":73},"/projects/zukunft-flaechennutzung/guide-02.jpg","Logo Zukunft Flächennutzung in der farbigen Hauptvariante","Hauptlogo in Farbe","half",{"src":75,"alt":76,"caption":77,"layout":73},"/projects/zukunft-flaechennutzung/guide-04.jpg","Logo Zukunft Flächennutzung in Weiß auf schwarzem Hintergrund","Negativvariante",{"src":79,"alt":80,"caption":81,"layout":68},"/projects/zukunft-flaechennutzung/guide-05.jpg","Konstruktionsraster und Schutzzone des Logos","Konstruktion und Schutzzone",{"src":83,"alt":84,"caption":85,"layout":68},"/projects/zukunft-flaechennutzung/guide-06.jpg","Logo in vier Farbkombinationen auf Schwarz, Grün, Gelb und Lime","Erlaubte Farbkombinationen",{"src":87,"alt":88,"caption":89,"layout":73},"/projects/zukunft-flaechennutzung/guide-07.jpg","Beispiele für falsche Logo-Anwendungen auf unpassenden Hintergründen","Fehlanwendungen",{"src":91,"alt":92,"caption":93,"layout":73},"/projects/zukunft-flaechennutzung/guide-03.jpg","Logo Zukunft Flächennutzung in Schwarz","Schwarzvariante",{"src":95,"alt":96,"caption":97,"layout":68},"/projects/zukunft-flaechennutzung/guide-08.jpg","Farbsystem mit Grün, Lime, Rot und Gelb in vier Abstufungen","Farbsystem – Grün, Lime, Rot und Gelb",{"src":99,"alt":100,"caption":101,"layout":73},"/projects/zukunft-flaechennutzung/guide-09.jpg","Typografie mit Bricolage Grotesque für Überschriften und Inter für Fließtext","Typografie – Bricolage Grotesque & Inter",{"src":103,"alt":104,"caption":105,"layout":73},"/projects/zukunft-flaechennutzung/guide-10.jpg","Beispielseite mit Überschriften und Fließtext im neuen Erscheinungsbild","Typografie in der Anwendung","/projects/zukunft-flaechennutzung/logo-animation.gif",null,{"path":109,"body":110},"/projects/00-zukunft-flaechennutzung",{"title":57,"description":63,"image":106,"url":111,"website":112,"client":58,"summary":113,"color":114,"tags":115,"date":119,"featured":49,"sections":120,"gallery":130},"/projects/zukunft-flaechennutzung","https://www.rvbo.de/","Ein Erscheinungsbild für die Zukunft der Region",{"bg":60,"fg":61},[116,117,118],"Branding","Logo Design","Corporate Design","2026",[121,124,127],{"title":122,"text":123},"Ausgangslage","Mit dem Projekt RegioStrat fragt der Regionalverband Bodensee-Oberschwaben, wie sich die vielen berechtigten Ansprüche an die knappe Fläche der Region künftig vereinbaren lassen – vom Wohnen über Gewerbe und Verkehr bis zu Landwirtschaft und Energie. Für den Dialog mit Kommunen, Fachleuten und Bürger:innen brauchte das Projekt einen eigenständigen, zugänglichen Auftritt.",{"title":125,"text":126},"Idee","Vier Flächen, die ineinandergreifen, ohne sich zu überlagern. Die Bildmarke übersetzt den Kern der Regionalplanung in ein einfaches, einprägsames Zeichen – unterschiedliche Nutzungen finden nebeneinander Platz und ergeben gemeinsam ein Ganzes.",{"title":128,"text":129},"Umsetzung","Entstanden sind ein Logo in Farb-, Schwarz- und Weißvariante mit definierter Konstruktion und Schutzzone, ein Farbsystem aus vier Hauptfarben mit Abstufungen, die Typografie aus Bricolage Grotesque und Inter, mehrere Logo-Animationen sowie ein Logo-Guide für den einheitlichen Einsatz.",[131,132,133,134,135,136,137,138,139,140],{"src":66,"alt":67,"layout":68},{"src":70,"alt":71,"caption":72,"layout":73},{"src":75,"alt":76,"caption":77,"layout":73},{"src":79,"alt":80,"caption":81,"layout":68},{"src":83,"alt":84,"caption":85,"layout":68},{"src":87,"alt":88,"caption":89,"layout":73},{"src":91,"alt":92,"caption":93,"layout":73},{"src":95,"alt":96,"caption":97,"layout":68},{"src":99,"alt":100,"caption":101,"layout":73},{"src":103,"alt":104,"caption":105,"layout":73},[142,143,144],{"title":122,"text":123},{"title":125,"text":126},{"title":128,"text":129},"projects/00 zukunft-flaechennutzung",[116,117,118],"t__v0MV9zFatC31ffWwEGPeBG9pUJ83rPE3Snm04Ie8",{"id":149,"title":150,"client":107,"color":151,"date":154,"description":155,"extension":44,"featured":49,"gallery":107,"image":156,"label":107,"meta":157,"partner":107,"sections":107,"stem":167,"summary":161,"tags":168,"url":160,"website":107,"__hash__":169},"projects/projects/01 dr-luise-krause.yml","Dr. Luise Krause",{"bg":152,"fg":153},"#2F7BBF","#FFFFFF","2025-01-01T00:00:00.000Z","Für die Zahnärztin Dr. Luise Krause wurde ein individuelles Erscheinungsbild entwickelt. Dies umfasst die Gestaltung eines Logos, die Auswahl eines harmonischen Farbschemas, die Typografie sowie die Iconographie. Das Ergebnis ist eine einprägsame Logobildmarke, die die Identität der Praxis wirkungsvoll widerspiegelt.","/projects/dr-luise-krause-2.jpg",{"path":158,"body":159},"/projects/01-dr-luise-krause",{"title":150,"description":155,"image":156,"url":160,"summary":161,"color":162,"tags":163,"date":166,"featured":49},"https://www.dr-luise-krause.at/","Eine Logobildmarke für die Zahnarztpraxis",{"bg":152,"fg":153},[164,165],"UX Design","UI Design","2025","projects/01 dr-luise-krause",[164,165],"H9GD4MJxGbn1faCjjhM98py82L1E9wi6fNEPsEX9Nzg",{"id":171,"title":172,"client":107,"color":173,"date":154,"description":176,"extension":44,"featured":49,"gallery":107,"image":177,"label":107,"meta":178,"partner":107,"sections":107,"stem":187,"summary":182,"tags":188,"url":181,"website":107,"__hash__":189},"projects/projects/03 zemtu.yml","Zemtu - Mobilitätslösungen",{"bg":174,"fg":175},"#8DB33A","#14220A","Für Zemtu wurde ein umfassendes Corporate Identity (CI) entwickelt, das ein prägnantes Logo umfasst. Darüber hinaus wurden das Corporate Design (CD), die Webseite sowie das App-Design gestaltet. Diese Elemente wurden harmonisch aufeinander abgestimmt, um eine konsistente Markenpräsenz zu gewährleisten und eine ansprechende Benutzererfahrung zu bieten.","/projects/zemtu.jpg",{"path":179,"body":180},"/projects/03-zemtu",{"title":172,"description":176,"image":177,"url":181,"summary":182,"color":183,"tags":184,"date":166,"featured":49},"https://www.zemtu.com","Marke, Website und App für Mobilität",{"bg":174,"fg":175},[165,185,186],"Front-End Dev","App Development","projects/03 zemtu",[165,185,186],"oe59JFzwfHLALdmAni-G_B8I7MxCNaLJ7Z41aQTICVE",{"id":191,"title":192,"client":107,"color":193,"date":154,"description":196,"extension":44,"featured":29,"gallery":107,"image":197,"label":107,"meta":198,"partner":107,"sections":107,"stem":206,"summary":202,"tags":207,"url":201,"website":107,"__hash__":208},"projects/projects/05 spiellernraum.yml","Spiellernraum Webseite",{"bg":194,"fg":195},"#F5EEE4","#1F1A14","Für den Spiellernraum wurde ein umfassendes Design und Konzept entwickelt, das die Zielgruppe anspricht und eine einladende Atmosphäre schafft. Die Webseite wurde vollständig umgesetzt, um eine benutzerfreundliche Erfahrung zu gewährleisten und die Inhalte optimal zu präsentieren.","/projects/spiellernraum.jpg",{"path":199,"body":200},"/projects/05-spiellernraum",{"title":192,"description":196,"image":197,"url":201,"summary":202,"color":203,"tags":204,"date":166},"https://www.spiellernraum.at/","Ein einladender Auftritt zum Spielen und Lernen",{"bg":194,"fg":195},[165,205],"Web Development","projects/05 spiellernraum",[165,205],"8BIInOx2qicCoI1rzZBBjOByjsSyRm2q2PIX7kSG6oU",{"id":210,"title":211,"client":107,"color":212,"date":154,"description":215,"extension":44,"featured":29,"gallery":107,"image":216,"label":107,"meta":217,"partner":107,"sections":107,"stem":224,"summary":221,"tags":225,"url":220,"website":107,"__hash__":226},"projects/projects/06 architekturinform.yml","Architekturinform",{"bg":213,"fg":214},"#E6E2DB","#1A1A1A","Architekturinform.com bietet Architekturreisen mit einem klaren Fokus auf Nachhaltigkeit. Für dieses Projekt wurde ein umfassendes Corporate Identity (CI) entwickelt, das die Werte und Ziele der Plattform widerspiegelt. Zusätzlich wurde die Webseite konzipiert und umgesetzt. Die Begleitung umfasst auch die Bewerbung über Social Media und Anzeigen, um die Reichweite und Sichtbarkeit der nachhaltigen Architekturreisen zu erhöhen.","/projects/architekturinform.webp",{"path":218,"body":219},"/projects/06-architekturinform",{"title":211,"description":215,"image":216,"url":220,"summary":221,"color":222,"tags":223,"date":166},"https://www.architekturinform.com/","Marke und Website für nachhaltige Architekturreisen",{"bg":213,"fg":214},[165,205],"projects/06 architekturinform",[165,205],"xsqIXCsRmNZnUGgo8St2ZLcxEWdm6lrMZxJ0KMUg67c",{"id":228,"title":229,"client":107,"color":230,"date":154,"description":233,"extension":44,"featured":29,"gallery":107,"image":234,"label":107,"meta":235,"partner":107,"sections":107,"stem":243,"summary":239,"tags":244,"url":238,"website":107,"__hash__":245},"projects/projects/08 moosbrugger.yml","Bauunternehmen Moosbrugger",{"bg":231,"fg":232},"#F07D1A","#1A1206","Neue Website für das Bauunternehmen Moosbrugger, das seit über 20 Jahren für nachhaltiges Bauen und präzises Handwerk steht. Die Seite stellt Leistungen, Referenzen und aktuelle Wohnbauprojekte übersichtlich dar und macht das Unternehmen auch als Arbeitgeber sichtbar.","/projects/moosbrugger-sichtbeton.jpg",{"path":236,"body":237},"/projects/08-moosbrugger",{"title":229,"description":233,"image":234,"url":238,"summary":239,"color":240,"tags":241,"date":166},"https://moosbrugger.gmbh/","Eine Website mit Gespür fürs Bauhandwerk",{"bg":231,"fg":232},[242,205],"Webdesign","projects/08 moosbrugger",[242,205],"KNwdMyLysRBviBooRk-eYSfHRKnVoLJbYCzPut5a4LI",{"id":247,"title":248,"client":107,"color":249,"date":154,"description":251,"extension":44,"featured":29,"gallery":107,"image":252,"label":107,"meta":253,"partner":260,"sections":107,"stem":261,"summary":257,"tags":262,"url":256,"website":107,"__hash__":263},"projects/projects/10 kuenstlerportraits.yml","KünstlerPortraits",{"bg":214,"fg":250},"#EDEDED","Für das Projekt „KünstlerPortraits“ portraitiert der Fotograf Ivo Vögel Künstlerinnen und Künstler aus Vorarlberg. Die Website präsentiert die Portraits, die beteiligten Künstler:innen und die geplante Ausstellung – entstanden in enger Zusammenarbeit mit Ivo Vögel.","/projects/kuenstlerportraits-atelier.jpg",{"path":254,"body":255},"/projects/10-kuenstlerportraits",{"title":248,"description":251,"image":252,"url":256,"summary":257,"color":258,"tags":259,"date":166,"partner":260},"https://www.ivo.photo/","Portraits von Künstler:innen aus Vorarlberg",{"bg":214,"fg":250},[242,205],"Gemeinsam mit Ivo Vögel","projects/10 kuenstlerportraits",[242,205],"WQ6-e2609eSftkq3hZGo2xdGgf7cV7mDHg9Z7eYXJBE",{"id":265,"title":266,"client":107,"color":267,"date":154,"description":270,"extension":44,"featured":29,"gallery":107,"image":271,"label":107,"meta":272,"partner":107,"sections":107,"stem":279,"summary":276,"tags":280,"url":275,"website":107,"__hash__":281},"projects/projects/11 michael-zerwas.yml","Michael Zerwas",{"bg":268,"fg":269},"#231F20","#F0ECE5","Website für Michael Zerwas aus Sulz – Konzept, Planung und Umsetzung von Innenausbau, Fenstern, Türen, Terrassen sowie Holz- und Textilfassaden. Große Typografie, eine reduzierte Farbwelt und nach Kategorien filterbare Referenzen rücken das handwerkliche Können in den Mittelpunkt.","/projects/michael-zerwas.jpg",{"path":273,"body":274},"/projects/11-michael-zerwas",{"title":266,"description":270,"image":271,"url":275,"summary":276,"color":277,"tags":278,"date":166},"https://www.michaelzerwas.at/","Eine Website für Raum, Holz und Handwerk",{"bg":268,"fg":269},[242,205],"projects/11 michael-zerwas",[242,205],"bO9uFNb3m8FOjcrr3JU-4PXFEyC7DkrIUOPtV7H-eyE",{"id":283,"title":284,"client":107,"color":285,"date":288,"description":289,"extension":44,"featured":29,"gallery":107,"image":290,"label":107,"meta":291,"partner":107,"sections":107,"stem":299,"summary":295,"tags":300,"url":294,"website":107,"__hash__":301},"projects/projects/02 irr.yml","IRR Webseite",{"bg":286,"fg":287},"#0A0A0A","#F5F5F5","2024-01-01T00:00:00.000Z","Die neue Webseite zeichnet sich durch ein innovatives Design aus, das ein horizontales Scrollen von links nach rechts ermöglicht. Im Hintergrund kommt das Directus CMS zum Einsatz, während das Frontend mit Vue.js und Nuxt.js realisiert wurde. Diese Kombination sorgt für eine moderne und benutzerfreundliche Erfahrung.","/projects/irr.gif",{"path":292,"body":293},"/projects/02-irr",{"title":284,"description":289,"image":290,"url":294,"summary":295,"color":296,"tags":297,"date":298},"https://www.irr.at/","Eine Website, die horizontal erzählt",{"bg":286,"fg":287},[165,205],"2024","projects/02 irr",[165,205],"hgnJR8GyerUFTys4Obef6r2ReFe_RGWYfP8CqlgLA-E",{"id":303,"title":304,"client":107,"color":305,"date":288,"description":308,"extension":44,"featured":29,"gallery":107,"image":309,"label":107,"meta":310,"partner":107,"sections":107,"stem":318,"summary":314,"tags":319,"url":313,"website":107,"__hash__":320},"projects/projects/04 steinhaus.yml","Steinhaus Plattenkonfigurator",{"bg":306,"fg":307},"#1C2530","#F2F4F7","Der Plattenkonfigurator wurde für das Unternehmen Steinhaus entwickelt. Es handelt sich um eine Webanwendung, die es ermöglicht, Platten in verschiedenen Größen und Formen zu konfigurieren. Die Anwendung wurde in Vue.js und Nuxt.js entwickelt.","/projects/steinhaus.gif",{"path":311,"body":312},"/projects/04-steinhaus",{"title":304,"description":308,"image":309,"url":313,"summary":314,"color":315,"tags":316,"date":298},"https://plattenkonfigurator.steinhaus.com/","Ein Konfigurator für Steinplatten",{"bg":306,"fg":307},[165,317],"Web Application","projects/04 steinhaus",[165,317],"HT09DGX2X3E-SgPbcUj8E_SVmsbPchvmjVS64G4iSvw",{"id":322,"title":323,"client":107,"color":324,"date":288,"description":326,"extension":44,"featured":29,"gallery":107,"image":327,"label":107,"meta":328,"partner":336,"sections":107,"stem":337,"summary":332,"tags":338,"url":331,"website":107,"__hash__":339},"projects/projects/07 geschichtenwerkstatt.yml","Geschichtenwerkstatt Webseite",{"bg":325,"fg":153},"#D63A2F","Das Design der Webseite für die Geschichtenwerkstatt stammt von der Werbeagentur IRR – die technische Umsetzung habe ich als Entwicklungspartner übernommen. Das Design kombiniert kreative Elemente mit einer benutzerfreundlichen Navigation, um eine ansprechende und einladende Plattform für alle Geschichtenerzähler zu schaffen. Die visuelle Gestaltung unterstützt die Mission der Geschichtenwerkstatt und fördert eine inspirierende Atmosphäre.","/projects/geschichtenwerkstatt.gif",{"path":329,"body":330},"/projects/07-geschichtenwerkstatt",{"title":323,"description":326,"image":327,"url":331,"summary":332,"color":333,"tags":334,"date":298,"partner":336},"https://www.geschichtenwerkstatt.at/","Umsetzung einer Website zum Geschichtenerzählen",{"bg":325,"fg":153},[335,205],"Frontend-Entwicklung","Design: IRR – Umsetzung: Roland Kainbacher","projects/07 geschichtenwerkstatt",[335,205],"L7E9g2I6Lw5jHmLwUFoEnE6JuLHVzGTQivLPYm-YPdE",{"id":341,"title":342,"client":107,"color":343,"date":288,"description":345,"extension":44,"featured":29,"gallery":107,"image":346,"label":107,"meta":347,"partner":107,"sections":107,"stem":354,"summary":351,"tags":355,"url":350,"website":107,"__hash__":356},"projects/projects/09 ivo-voegel.yml","Ivo Vögel Fotograf",{"bg":344,"fg":214},"#F2F0EC","Website für den Bregenzer Berufsfotografen Ivo Vögel. Die Seite rückt seine Arbeiten aus Werbe- und Industriefotografie, Portraits, Kunstreproduktionen und Architektur in den Mittelpunkt – reduziert gestaltet, damit die Bilder wirken.","/projects/ivo-voegel-seebad.jpg",{"path":348,"body":349},"/projects/09-ivo-voegel",{"title":342,"description":345,"image":346,"url":350,"summary":351,"color":352,"tags":353,"date":298},"https://ivovoegel.photo/","Eine Bühne für die Fotografie",{"bg":344,"fg":214},[242,205],"projects/09 ivo-voegel",[242,205],"CpXnrovugkzsDZeWORXpHPxoG-TSQPrFpF6dGceVJBQ",1792831448849]