OffeneVergaben.at ist eine klare, moderne Seite mit einem ruhigen Farbschema. Die Hauptfarbe Blau ist aus dem Auftritt des Forum Informationsfreiheit, das OffeneVergaben.at betreibt, übernommen. Ein Rotton ist eine gute Ergänzung als kontrastierende Highlightfarbe. 

Für den Text verwenden wir statt des klassischen Schwarz oder Dunkelgrau ein dunkles Graubraun. Es wirkt etwas wärmer, weniger hart zu Blau und Rot und ist abgetönt gut für sanfte Hintergründe wie die Hinterlegung der Tabellen geeignet. 

Die Verwendung der Farben zieht sich im Logo und in den Interface-Elementen durch – für die Diagramme kommen vermutlich noch ein paar Farben dazu, um bessere Unterscheidbarkeit und mehr Lebendigkeit zu erhalten.

Schrift

Als Schrift kommt die Open Source Schrift “Archivo” von Omnibus Type zum Einsatz – wir verwenden die Schriftschnitte Regular und Bold zur Auszeichnung. Italics gibt es natürlich ebenfalls. Es ist eine geradlinige, gut lesbare serifenlose Schrift mit einigen besonderen Details und freundlicher Anmutung.

Verspielter wird es bei den Icons: die Linien-Icons stammen von der Orion Icon Library. Sie sind zweifarbig, haben je nach Größe 1–2 Pixel Linienstärke. Sie unterstützen bei Schaltflächen und Links, sowie in Tabellen die Textelemente.

Mobile

Auf Mobile sind wir gewohnt, dass der Inhalt die ganze Breite des Bildschirms einnimmt. Wir bleiben auch in der Desktop-Darstellung dabei – wir haben sehr viele datenintensive Tabellen, die sich so besser darstellen und übersichtlicher lesen lassen.

Daraus ergibt sich auch, dass unterschiedliche Abschnitte wie interaktive Grafiken, Filter, u.ä. nicht nebeneinander, sondern untereinander platziert sind. Diese Elemente können in der Regel auf- und zugeklappt werden – sie sind vorhanden, aber müssen nicht viel Platz brauchen. 

Ein weiterer Vorteil ist, dass Abschnitte an verschiedenen Stellen in den Templates problemlos eingesetzt werden können.

Navigation

Die Navigation erfolgt einerseits über den Header. Er bleibt über der Seite beim Scrollen fixiert, sodass die Hauptnavigation und die Suche immer erreichbar sind. Darüber hinaus sind im Inhalt alle Texte verlinkt, welche die Leserinnen und Leser weiterführen. Infografiken sind ebenfalls zum Filter und Navigieren in den Auftragsdaten da und machen die Inhalte visuell zugänglicher.

So gibt es Treemaps, mit denen beispielsweise die Branchen auf Basis der CPV-Kategorien abbilden. Für die geographische Zuordnung bieten wir auf Grundlage der NUTS-Codes ebenfalls interaktive Grafiken an.

Bei beiden müssen mehrere Ebenen abgebildet werden, die Benutzerinnen und Benutzer also in die Tiefe klicken. Häufig kommt man dann nicht mehr auf die darüberliegende Ebene. Um die Karten und Treemaps leichter navigierbar zu machen, haben wir als Lösung eine Breadcrumbs-Leiste eingeführt. Wir benutzen diese Funktionsleiste auch, um Grafiken wie ein Akkordeon zu minimieren.

Auf den Detailseiten (sowohl Auftraggeber-, als auch Lieferanten-Seiten) werden die Breadcrumbs direkt in der ersten Überschrift angezeigt. Es folgt eine Zusammenfassung, eine Art „Factsheet“, und dann die Datensätze.

Der farblich kontrastierende Footer schließt die Seite durchgängig ab und enthält alle zusätzlichen Seitenlinks und Partnerlogos.