Design

Huisstijl

Wij zijn verplicht de huisstijl van de Vlaamse overheid te volgen. Zij hebben uitgebreide en transparante richtlijnen (kleuren, logo, lettertypes, ...). We gebruiken deze richtlijnen om ons eigen open-source Design systeem, Appuniversum, te maken. Deze is gebaseerd op, en volgt, de richtlijnen van Webuniversum.

Algemene richtlijnen

Vlaanderen InternVlaanderen.be

Digitale richtlijnen

Er zijn ook specifieke richtlijnen voor de digitale huisstijl, die lichtjes verschillen van de algemene richtlijnen.

https://overheid.vlaanderen.be/communicatie/huisstijl-en-merkbeleid/digitale-huisstijloverheid.vlaanderen.be

Toegankelijkheid

Al de applicaties en websites die we publiceren, moeten toegankelijk zijn, volgens de WCAG 2.1 richtlijnen [EN].

Vlaanderen InternVlaanderen.be

Global Header & Footer

Header: Om vlot te integreren met onze codebase en snelheid te verhogen, hebben we de header nagemaakt in Ember. Deze verschijnt altijd en overal.

Webpack Appappuniversum.github.io

Footer: De footer werd ook nagemaakt. Deze gebruiken we enkel op log-in pagina's, omdat onze applicatiepatronen anders in elkaar zitten.

Webpack Appappuniversum.github.io

Mock-ups

We maken momenteel gebruik van een mix van klikbare prototypes in Figma, en echte prototypes in HTML en CSS. We werken ook samen met andere departementen om hier een degelijke componenten bibliotheek aan te leggen, zowel in vectoren (Figma) en HTML en CSS.

Figma

We gebruiken Figma, maar we hebben nog geen licentie.

Feedback geven op Figma mockups

Component libraries

Webuniversum

Vlaanderen Design SystemVlaanderen.be

De Vlaamse Overheid heeft een webcomponentenblibiotheek gebouwd. We maken daar momenteel geen gebruik van:

• In haar huidige vorm, de 3.0 versie, is deze bibliotheek beschikbaar wanneer we gebruik maken van hun Webplatform. Binnen onze applicatiearchitectuur maken we geen gebruik van dat Webplatform, en kunnen we dus ook geen gebruik maken van de webcomponentenbibliotheek.

• De 3.0 versie is niet open source. Wij maken open source applicaties, en hebben dus nood aan open source oplossing.

Appuniversum, Webuniversum's Little Sister

Om onze applicaties mee te bouwen, hebben we een open source componentenbibliotheek gebouwd.

De bibliotheek is gebaseerd op de oude webcomponenten van de Vlaamse Overheid, versie 2.0. Hier bouwden we onze applicaties mee in het begin, toen deze versie nog open source gepubliceerd werd. Om ervoor te zorgen dat we bugs konden oplossen, de bibliotheek konden uitbreiden voor specifieke applicatie componenten en onze applicaties open source konden publiceren, riepen we Appuniversum in het leven. Iedereen die gebruik wil maken van deze bibliotheek, meer specifiek in kader van projecten voor de Vlaamse Overheid, mag hier aan meewerken.

Deze componenten bibliotheek bestaat momenteel uit twee delen: Appuniversum & Ember-Appuniversum.

Appuniversum Project

Dit Design systeem is zover gegroeid dat het een project op zich is geworden. We werken eraan om de communicatie tussen de verschillende partijen en bewegende delen te optimaliseren.

Introduction to APP Universum | Handleiding Appuniversumabb-vlaanderen.gitbook.io

Figma Library

Appuniversum is niet alleen voor developers, of designers die prototypes in HTML & CSS bouwen. We bieden ook een open-source Figma library, waar designers, analisten, project managers,... eigen wireframes en mock-ups kunnen bouwen, gebruik makend van vooraf gedefinieerde onderdelen.

Deze bibliotheek bootst Ember-Appuniversum na.*

https://www.figma.com/file/jXHrRIlecwdm1PH7fkblq2/Design-System-Library?type=design&node-id=0%3A1&mode=design&t=2AysRhRKckYsmlZP-1www.figma.com

*Dit werk is nog in uitvoering en er kunnen nog kleine discrepanties in bestaan.