ABB Digiteam
[NL] Nederlands 1.1.0
[NL] Nederlands 1.1.0
  • Bouw mee aan het Semantische Ecosysteem van ABB
  • LBLOD – Lokale Besturen & Linked Open Data
  • Samenwerken bij Digiteam ABB
    • Welkom bij ABB: over ons en onze visie
    • Scaled Agile Organisatie van het Digiteam
      • Rollen en verantwoordelijkheden
    • Agile productontwikkeling bij ABB: Intro
      • Roadmap en roadmap planning
      • Groeispurten groeispurt planning
        • Voorbereiding van de planning
          • IPI-element: Impact Mapping
          • IPI-element: Story mapping
        • Centrale planningsdagen
          • IPI-element: capaciteitscheck
        • Groeispurtkalender
      • Sprints en sprintplanning
        • De sprint ceremonies
          • Sprintplanning
          • Backlog Refinement Meeting
          • (Daily) stand-up
          • Sprint demo (review)
          • Sprintrapportering op Solution Stand Up (SSU)
        • Innovatie en Planning Iteratie (IPI)
          • IPI-element: Innovatie
          • IPI- element: Spurt retrospective
          • IPI-element: Inspect & Adapt
    • Doelstellingen van het Digiteam
    • Verwerking van persoons- en andere gegevens
    • Tools om samen te werken
      • MIRO
      • Jira at ABB
      • Feature Passports
    • Hybride (samen)werken
  • Producten & Diensten
    • Gelinkt Notuleren, Embeddable en Plug-ins
      • Gelinkt Notuleren App
        • Fase 1: Voorbereiden agendapunten
        • Fase 2: Agenda
        • Fase 3: Zitting vervolledigen
        • Fase 4 & 5: Ondertekenen, publiceren & melden
        • Terminologieën (in uitvoering)
      • Embeddable & Say-Editor
    • Register van Maatregelen: Borden & Markeringen
    • Loket voor Lokale Besturen
      • Over de Modules
      • Toegang krijgen als lokale bestuur
      • Proof of concept versie Form Builder
      • Klachtenformulier
    • Gelinkt Publiceren en Melden
    • Publieke databanken
      • Mandatendatabank
      • Leidinggevendendatabank
      • Publicatiepagina Gelinkt Notuleren
      • Lokaal Beslist
    • Toezicht
    • Organisatieportaal
    • Erediensten
    • Open Proceshuis
    • Subsidiedatabank en Subsidie App
    • Formbuilder
    • Lokaal Mandatenbeheer
    • Toegankelijk Vlaanderen
    • Toegang krijgen tot de producten en diensten van ABB
      • Gebruikersrechten bekijken
      • Aanmelden
      • Afmelden of wisselen van bestuurseenheid
      • Ondersteunende functie: Printen
      • Toegang verlenen aan gebruikers tot producten en diensten via Gebruikersbeheer Vlaanderen
    • Overzicht applicaties, handleidingen en ontwikkelomgevingen
  • Ontwikkeling
    • Architectuur
      • Introductie voor niet-technici
      • [EN] Semantic Works Application Framework (FKA mu.semte.ch)
      • [EN] Docker
      • [EN] Linked Data & SPARQL
        • [EN] SPARQL & Virtuoso in Depth
        • [EN] SPARQLing exercises
        • [EN] Virtuoso in Depth
      • [EN] Ember.js
      • [EN] Templates & Coding conventions
      • Data Modellen
      • Rechtenbeheer & Inloggen
    • Front-end (HTML, CSS, JS)
      • Appuniversum
      • Accessibility
      • Ember
  • Testing
    • Testing bij ABB
      • Roadmap Testing ABB
      • Test strategie bij ABB
        • Wat is een testplan?
    • User Interviews & Testing [remote]
  • Design team ABB
    • Design
      • Feedback geven op Figma mockups
      • Interesting reads
      • Werken als designer bij ABB
Powered by GitBook
On this page
  • Huisstijl
  • Algemene richtlijnen
  • Digitale richtlijnen
  • Mock-ups
  • Figma
  • Component libraries
  • Webuniversum
  • Appuniversum, Webuniversum's Little Sister

Was this helpful?

Export as PDF
  1. Design team ABB

Design

PreviousUser Interviews & Testing [remote]NextFeedback geven op Figma mockups

Last updated 1 year ago

Was this helpful?

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, , te maken. Deze is gebaseerd op, en volgt, de richtlijnen van .

Algemene richtlijnen

Digitale richtlijnen

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

Toegankelijkheid

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.

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

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.

Component libraries

Webuniversum

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.

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.

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.*

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

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

De bibliotheek is gebaseerd op de oude webcomponenten van de Vlaamse Overheid, . 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.

WCAG 2.1 richtlijnen
Feedback geven op Figma mockups
versie 2.0
Appuniversum
Webuniversum
Huisstijl en merkbeleidVlaanderen Intern
Digitale huisstijlVlaanderen Intern
Digitale toegankelijkheidVlaanderen Intern
Webpack App
Webpack App
Webcomponents Version 3
Introduction and project goalsHandleiding Appuniversum
https://www.figma.com/file/jXHrRIlecwdm1PH7fkblq2/Design-System-Library?type=design&node-id=0%3A1&mode=design&t=2AysRhRKckYsmlZP-1www.figma.com
Logo
Logo
Logo
Logo
Logo