Blueprint

„Blueprint“ ist im Allgemeinen eine Vorlage, die als Ausgangspunkt für die Entwicklung eines Systems, einer Anwendung oder einer Webseite dient. Ein Blueprint stellt sicher, dass alle Komponenten und Systeme einheitlich entwickelt und integriert werden.

Design-Vorlage

Ein Blueprint soll als strukturelles Modell dienen, das Layout, Designrichtlinien und wichtige Designelemente wie Header, Footer, Layout und Grid sowie die User Area definiert. Es legt die grundlegende Gestaltung fest und dient als Referenz für die Umsetzung.

Layout

Das allgemeine Layout und der Grid müssen strikt angewendet werden, um eine konsistente und kohärente Gestaltung sicherzustellen. Diese Vorgaben bilden die Grundlage für alle Designentscheidungen und gewährleisten eine einheitliche Nutzererfahrung. Abweichungen sind nicht zulässig, da sie die visuelle Struktur und Funktionalität des Projekts beeinträchtigen würden. Detaillierte Infos unter Layout-Grid.

Jeder neue Projektentwurf muss den definierten Header und seine Varianten gemäß den festgelegten Vorgaben verwenden, um Konsistenz und Einheitlichkeit zu gewährleisten. Detaillierte Infos unter Header.

User Area

Jede Implementierung der User Area muss dem vorgegebenen Layout und Designprinzipien Interaktionsmöglichkeiten folgen. Die User Area ist für den Nutzer besonders wichtig, da sie ihm einen personalisierten und vertrauten Bereich bietet. Gleichzeitig trägt sie durch ihre konsistente Gestaltung zur Orientierung und einer positiven Nutzererfahrung bei.

Der Footer ist statisch und bleibt am Ende der Seite positioniert. In Fällen von sehr kurzen Seiteninhalten muss er dynamisch den unteren Bildschirmrand ausfüllen. Detaillierte Infos unter Footer.

Template

Die verlinkten Templates sind klar in zwei Produktbereiche unterteilt: Für wko.at gibt es einen spezifischen Blueprint, ebenso wie für eServices und das Benutzerkonto, um eine konsistente Gestaltung und Nutzererfahrung in beiden Bereichen sicherzustellen.
Vorschau Blueprint WKO.at
Vorschau e-Services oder Benutzerkonto

Hinweis

Um sicherzustellen, dass Designrichtlinien konsequent eingehalten werden, sind regelmäßige Check-ins im Projektverlauf empfehlenswert. Dieser Austausch stärkt die Konsistenz und verbessert die Qualität des Endprodukts. So profitieren alle Beteiligten von einer frühzeitiger Problembehebung und einem abgestimmten Endergebnis, das den definierten Standards entspricht.

Die Templates bestehen aus einer festgelegten Grundstruktur, sowie einem Bereich für individuellen Inhalt. Weitere Gestaltungsmöglichkeiten können mit Containern umgesetzt werden.

<html>
  <head>
    <!-- Metadaten der Seite -->
    <!-- Zusätzliches Styling -->
  </head>
  <body class="blueprint"><!-- Klasse bleibt bestehen -->
    <a href="#skip-to-main" class="visually-hidden-focusable">Zum Inhalt springen</a><!-- Accessibility relvant-->

    <!-- Header Komponente -->
    <header>
      <!-- Header Elemente wie Logo, User Area und Navigation -->
    </header>
    <!--  -->

    <div class="main" id="skip-to-main">
      <!-- individueller Bereich für Sections > Container > Komponenten und Inhalte -->
    </div>

    <!-- Footer Komponente -->
    <footer ...>
      <!-- Footer Elemente wie Links und Logos -->
    </footer>
    <!--  -->

    <!-- Modal Komponenten direkt im <body /> -->

  </body>
</html>

Bei individuellen Anforderungen ist es gegebenenfalls notwendig ein weiteres Styling zu ergänzen. In diesen Fällen enthält das Package weitere Files, die eingebunden werden müssen.

Package

Die Basis einer einheitlichen Entwicklung wird als Package zur Verfügung gestellt. Dieses enthält die Bluprint Templates, sowie alle notwendigen und zugehörigen Styles, Scripts und Asset um eine konsistente Gestaltung und Nutzererfahrung zu ermöglichen.