Hypercode Blog, #Konzeption & Design
Introducing »Views by Hypercode«
Testgeräte, Simulatoren und Browser-DevTools haben wir bei Hypercode reichlich. Doch unterwegs oder beim schnellen Blick aufs iPhone sehen wir meist nur die eine Ansicht, die zum eigenen Display passt. Unsere neue App Views genau schließt diese Lücke: URL öffnen, mehrere Viewports vergleichen und direkt in die Device-spezifischen Details einsteigen.
Ein Gerät. Viele Perspektiven.
Views zeigt eine Website dazu in mehreren Gerätgrößen nebeneinander. Mit dabei: Alle iPhones und iPads, aktuelle Macs, ausgewählte Android-Devices, Boostrap-Breakpoints und die Möglichkeit eigene Viewports zu definieren. So seht ihr auf einen Blick, wie sich euer Responsive Webdesign schlägt, wo Texte ungünstig umbrechen oder eine Navigation zu voll wird.
- Viewports nach Wahl: Smartphone-, Tablet-, Foldable- und Desktop-Größen aus einem umfassenden Gerätekatalog, als Bootstrap-Breakpoints oder mit eigenen Abmessungen.
- Interaktive Vorschauen: Scrollen, Klicken, Links folgen, Menüs öffnen – mit synchronisierter Scroll-Position und direkt in den Device-Viewports.
- Live Reload und Auto Reload: Vorschauen aktualisieren sich bei Dateiänderungen über die kostenlose Views CLI für Mac und PC oder in einem festen Intervall.
- Im eigenen Workflow: Safari-Erweiterung, Apple Shortcuts, URL-Scheme, CLI und Markdown-Guides für euren KI-Coding-Agenten sind direkt mit dabei.
- Device-Screenshots: Einzelne Viewports in den Device-spezifischen Größen festhalten, teilen im Team besprechen und fixen waren nie einfacher.
Alle Funktionen und weitere Einblicke findet ihr auf unserer Projektseite zu Views.
Kostenlos plus Pro-Features
Views ist für iPhone und iPad kostenlos und zeigt bis zu drei Viewports gleichzeitig. Views Pro schaltet per einmaligem In-App-Kauf für 9,99 EUR unbegrenzt viele Viewports, unbegrenztes Live Reload und Auto Reload sowie Device-spezifische Screenshots ohne Views-Badge frei.
Wir würden uns freuen, wenn ihr Views ausprobiert. Und meldet euch gerne mit Feedback, Ideen oder Fragen!
Viel Spaß beim Perspektivwechsel!
Design & Development aus der Praxis: Vorstellung von datengetriebenen Messe- und Event-Apps an der Media University
Bevor das neue Semester beginnt, blicken wir noch einmal auf das vergangene zurück: Auf Einladung von Prof. Dr. Boris Becker gaben Florian und Stefan Einblicke in die Zusammenarbeit unserer Unternehmen. Prof. Becker, mit dem Stefan seit zwei Jahren das Modul „Web-Technologien“ im Studiengang „Digitales Marketing und E-Commerce“ in Köln gestaltet, begrüßte die beiden gemeinsam mit Prof. Dr. Alexander Rühle.
UX/UI-Design und Technologie für den Messebesuch
In anderthalb Stunden zeigten Stefan und Florian den Studierenden, wie Event-Apps den Messebesuch gezielt unterstützen können: bei der Suche nach relevanten Inhalten, der Orientierung vor Ort und beim Knüpfen passender Kontakte.
Am Beispiel der FairMate Event-App gaben sie Einblicke in die gemeinsame Produktentwicklung. Hypercode begleitet dimedis seit mehreren Jahren als strategischer Design- und Technologiepartner – von der Konzeption über das UX/UI-Design bis zum Development für iOS und Android. Die beiden teilten Erfahrungen aus dieser Zusammenarbeit und erläuterten das Zusammenspiel von Gestaltung und technischer Umsetzung.
Personalisierung und KI im Messealltag
Ein Schwerpunkt der Diskussion war die Frage, wie sich Inhalte, Empfehlungen und Interaktionen an individuelle Interessen und die jeweilige Situation anpassen lassen. Florian und Stefan erläuterten, wie die Auswertung von Daten dabei helfen kann, relevante Informationen im richtigen Moment bereitzustellen, sowie das Potenzial von KI und intelligentem Matching: Apps könnten passende Kontakte und Angebote vorschlagen und so zu persönlichen Messe-Assistenten werden. Ein Thema, das die beiden bereits bei ihrer Masterclass beim connect circle 2026 vertieften.
Danke an die Media University und die Studierenden für den Austausch – wir freuen uns auf das neue Semester!
→ Zum Bericht der Media University über den Gastvortrag
Über Stefans Lehrtätigkeit
Bereits seit dem Sommersemester 2023 unterrichtet Stefan an der Media University die Seminare „Web-Technologien“ und „User Experience & Web-Analytics“. Dabei bringt er Erfahrungen aus unserer täglichen Arbeit an digitalen Produkten in die Lehre ein – von der ersten Produktidee bis zum Zusammenspiel von Design, Development, Stakeholdern und Dienstleistern.
Welcome to the new hypercode.de!
Die neue hypercode.de ist kein Relaunch um des Relaunches willen. Sie ist das Ergebnis der Frage, wie wir das, was uns und unsere Arbeit ausmacht, noch besser sichtbar machen können. Denn es ist einiges passiert: Hypercode ist gewachsen, unser Portfolio hat sich weiterentwickelt und unser Anspruch an die eigene Außendarstellung ebenfalls1. Die neue Website greift das auf: Sie erzählt direkter, zeigt mehr und spricht klarer aus, was wir für unsere Kund*innen leisten.
Show, don't tell
Was schon in der Vorgängerversion angelegt war, haben wir konsequent weitergedacht: Hypercode ist ein Digital Product Studio mit eigenem, hohem (Qualitäts-)Anspruch – und genau das soll die Website vom ersten Moment an vermitteln. Der neue Auftritt setzt auf mehr Kontrast, stärkere Akzente und eine Bildsprache, die unsere Arbeit unmittelbar erlebbar macht. Weniger erklären, mehr zeigen.
Deshalb zeigt die neue hypercode.de deutlich mehr Bewegtbild – direkt aus unseren Projekten, nicht aus Stock-Archiven. Ergänzt wird das durch zahlreiche neue Case Studies, die unsere Projekte von Strategie über Konzeption bis zur Umsetzung konkret nachvollziehbar machen. Vom Showreel auf der Startseite bis zu jedem einzelnen Projekt-Screencast: Die neue Website macht unsere Arbeit so greifbar wie nie zuvor.
Spotlight: Unsere Leistungen
Ein zentraler Bestandteil der neuen Informationsarchitektur sind unsere neu gedachten Leistungsseiten, die präzise aufzeigen, wie wir arbeiten und was dabei entsteht. Das gliedern wir in What We Do, also wo unsere Expertise liegt, und What We Create, welche Outcomes für und mit unseren Kund*innen wir damit erreichen:
What We Do
- Produktstrategie & Architektur – Wir helfen bei der Entwicklung der Digitalstrategie und Produktidee, beraten bei der Technologieauswahl und Architektur und identifizieren frühzeitig Lösungsansätze durch die Analyse angrenzender Geschäftsprozesse.
- Konzeption & Design – Durch eine auf Kund*innen abgestimmte Designsprache schaffen wir ansprechende User Experiences. Unsere Nähe zum Development ermöglicht uns dabei die verlustfreie Realisierung komplexer Designanforderungen.
- Software- & Web-Entwicklung – Als tatkräftiger Implementierungspartner entwickeln wir hochperformante, intuitiv bedienbare Mobile Apps, Web-Apps, Konfiguratoren, Websites und Web-Services, die ihre Nutzer*innen begeistern.
What We Create
- Mobile Apps für iOS & Android – Wir entwickeln mobile Anwendungen, die auf allen Plattformen überzeugen – technisch präzise, gestalterisch klar und optimal integriert. Von hybriden Architekturen bis zur nahtlosen Nutzung nativer Funktionen.
- Corporate Websites – Wir gestalten und entwickeln individuelle Webauftritte, die komplexe Inhalte klar strukturieren, technologische Exzellenz vermitteln und durch beste Performance und spannende Interaktionen in der Nutzerführung überzeugen.
- Web-Apps & Produktkonfiguratoren – Interaktive Tools, die Entscheidungen erleichtern und Prozesse beschleunigen: modular, skalierbar und optimal integriert in bestehende Systeme und Geschäftsmodelle.
- Individualsoftware – Wenn Standardlösungen an Grenzen stoßen, entwickeln wir maßgeschneiderte Software, die genau auf die jeweiligen Anforderungen zugeschnitten ist. Modular gedacht, skalierbar umgesetzt – mit klarem Fokus auf Wartbarkeit und Effizienz.
Dazwischen findet ihr das ein oder andere Easter Egg, denn auch ein Business-Auftritt sollte unserer Meinung nach Spaß machen. 🐣 Viel Spaß beim Erkunden der neuen Inhalte – und wie immer freuen wir uns über Feedback und Anregungen!
Footnotes
- Tatsächlich ist es so, dass unsere Kund*innen den Prozess schon länger verfolgen konnten, denn unsere Präsentation, Kommunikation, etc. spiegelt das alles – samt der neuen Farbwelten – bereits seit einigen Monaten wider. ↩
Walzwerk-App – Ein interaktiver Lageplan mit Mietersuche und GPS-Wegfindung
Das Walzwerk ist nicht nur Unternehmensstandort für Firmen aus den Bereichen Digitalisierung, Online-Handel und Bildung, sondern auch ein beliebter Kultur- und Freizeitort im Großraum Köln. Das 35.000 Quadratmeter große Areal im Westen von Pulheim zieht täglich zahlreiche Besucher*innen an - darunter Geschäftsleute und Privatpersonen. Neben Ateliers und Unternehmen finden sich auf dem Gelände ein Theater, ein Schwimmbad, Gastronomie, eine Kirche sowie zahlreiche Künstlerwerkstätten. Angesichts der Größe und Vielfalt kann die Orientierung jedoch herausfordernd sein.
Seit Dezember wird den Besucher*innen mit der Walzwerk-App unter app.walzwerk.de digitale Unterstützung geboten:
- Interaktiver Lageplan und Mietersuche – Mit der App lassen sich Mieter*innen und Ateliers schnell suchen und auffinden. Ausgewählte Mieter*innen/Ateliers werden direkt im Lageplan verortet. Der Weg dorthin wird ausgehend von der GPS-Position des Besuchers direkt & live auf der Karte eingezeichnet.
- GPS-Wegfindung in Echtzeit – Besucher*innen können sich live zur gewünschten Location navigieren lassen. Die Route wird basierend auf der aktuellen GPS-Position direkt auf der Karte eingezeichnet. Falls GPS nicht verfügbar ist, wird die Hauptzufahrtsstraße oder der Standort der genutzten QR-Code-Hinweistafeln als Startpunkt verwendet.
- Browser-basiert ohne Installation – Die App funktioniert direkt im Internet-Browser, ohne dass eine Installation aus den App Stores erforderlich ist. Auf dem Gelände machen Hinweistafeln mit QR-Code auf die App aufmerksam.
- Für Mobile und Desktop – Die Anwendung funktioniert nicht nur auf Smartphones und Tablets, sondern auch auf Desktop-Rechnern, so dass Wegbeschreibungen überall eingesehen und geteilt werden können (z.B. in einer E-Mail-Signatur).
Der Schutz der Besucherdaten war ein besonders großes Anliegen: Die GPS-Position wird ausschließlich zur Routenführung genutzt und verbleibt auf dem Gerät der Besucher*innen. Es erfolgt keine Speicherung oder Weiterverarbeitung der Daten.
Die Walzwerk-App ist direkt an das digitale Mieterverzeichnis des Walzwerks angebunden. Dadurch sind alle Informationen stets auf dem neuesten Stand und Änderungen werden automatisch übernommen.