Benodigde gegevens voor een eigen huisstijl

Een leverancier die gebruik maakt van het Business of Enterprise prijsmodel heeft de mogelijkheid tot een eigen huisstijl voor e-UUR. Dit gaat over een huisstijl (CSS) die wordt ontwikkeld door Akyla op basis van maatwerk. Voor algemene informatie over de huisstijl functionaliteit van e-UUR zie het artikel Huisstijlen.

In dit artikel vind je informatie over de gegevens die nodig zijn voor de ontwikkeling van een eigen huisstijl. De volgende onderwerpen worden behandeld:

1. Overzicht    
   • Aanpassingen
   • Kader
   • Perspectieven
   • Mobiel / Responsive
2. Algemene vormgeving
   • Logo & Kleur
   • Lettertype
3. Inlogscherm
   • Standaard
   • Voorbeeld met vormgeving
   • Welkom tekst
4. Dashboard
   • Voorbeeld met vormgeving
   • Perspectieven
   • Tegels
   • Actionbar en stream
5. Formulieren
   • Elementen

Overzicht

Voor het toepassen van een huisstijl in e-UUR is het goed om te weten wat er aangepast kan worden. Zodat de juiste gegevens en afbeeldingen aangeleverd kunnen worden. Dan kunnen wij daarmee aan de slag.

Aanpassingen

De ontwerper is in principe vrij om zijn creativiteit los te laten op de schermen, zoals deze aanwezig zijn in e-UUR. Na het ontvangen van de ontwerpen gaan wij deze beoordelen en eventueel alternatieve ontwerpen voorstellen, mocht er iets bij zitten dat niet haalbaar is.

Bij het toepassen van een huisstijl ligt de focus voornamelijk op de volgende onderdelen:

• Algemene styling (lettertype & kleur)
• Inlogscherm
• Dashboard
• Formulieren

Kader

Bij het maken van de ontwerpen zijn er een aantal zaken waar rekening mee gehouden moet worden:

• Schermafmeting
  Voor de ontwerpen gaan we uit van een resolutie van 3840x2160 pixels.
• Elementen

De elementen die op een scherm staan moeten zichtbaar blijven en behouden ook dezelfde positie ten opzichte van elkaar.

Perspectieven

Flexkrachten, inleners en leveranciersgebruikers maken gebruik van e-UUR. Voor deze type gebruikers geldt een eigen perspectief. Het is in principe mogelijk om per perspectief een afwijkend ontwerp toe te passen. E-UUR kent de volgende perspectieven:

• Leveranciersgebruiker
• Inlener
• Flexkracht
• Bemiddelaar (indien deze module is geactiveerd)

Het perspectief van de inlener en flexkracht heeft ook een afwijkende interface ten opzichte van de leverancier en bemiddelaar. De leverancier en bemiddelaar werken voornamelijk vanuit het menu ’Start’. Bij de inlener en flexkracht voornamelijk vanuit de tegels.

1. Perspectief Inlener / Flexkracht

2. Perspectief Leverancier / bemiddelaar

Mobiel / Responsive

Het uitgangspunt is dat alle schermen ook werken in een mobiele weergave. Hiervoor wordt responsive design toegepast. Ook hier kunnen ontwerpen voor worden aangeleverd.

Een voorbeeldontwerp voor een iPhone X met een resolutie van 375 x 812 pixels.

3. Mobiele weergave

Algemene vormgeving

Logo & Kleur

Een e-UUR omgeving zonder eigen huisstijl heeft al de mogelijkheid om een logo toe te passen. Daarnaast is het ook al mogelijk om een primaire en secundaire kleur toe te kennen die gebruikt wordt door e-UUR. Meer informatie hierover vind je in de artikelen Eigen huisstijl bemiddelaar of inlener en Hoe stel ik de kleurstelling van de tegels op het dashboard in?. De werking van deze instellingen verandert niet, tenzij daarvan wordt afgeweken in het aangeleverde ontwerp.

Lettertype

Bij het toepassen van een huisstijl is het ook mogelijk om een eigen lettertype toe te passen. Denk aan

• Lettertype (Font)
• Lettergrootte
• Dikgedrukt (of schuin )
• Letterkleur

Indien er wordt gekozen voor een betaalde font, dan dient deze ook te worden aangeleverd bij het ontwerp.

Inlogscherm

Standaard

Het standaard inlogscherm ziet eruit zoals hieronder. 

4. Standaard inlogscherm

Voorbeeld met vormgeving

5. Inlogscherm met vormgeving

Welkom tekst

Op de inlogpagina wordt een welkomsttekst weergegeven die instelbaar is in e-UUR. Indien deze niet is ingevuld, wordt alleen de tekst ‘Welkom’ weergegeven.  

Deze tekst wordt automatisch door Akyla aangevuld met een aankondiging tot onderhoud, op het moment dat een onderhoud is gepland. Te zien in het voorbeeld.

Dashboard

Voorbeeld met vormgeving

6. Dashboard met vormgeving

Bij het ontwerpen van het dashboard kan rekening worden gehouden met de volgende onderdelen:

• Perspectieven
• Tegels
• Achtergrond

Perspectieven

De leverancier en de bemiddelaar hebben een ander dashboard dan de flexkracht en inlener. Bij het ontwerpen van het dashboard zijn er dus minimaal twee ontwerpen nodig.

1. Leverancier / Bemiddelaar
2. Inlener / Flexkracht

Het is eventueel ook mogelijk om per perspectief een afwijkend ontwerp aan te leveren.

Tegels

Bij het toepassen van een huisstijl wordt vaak gekozen voor ronde hoeken, zoals te zien is in het voorbeeld.

De kleur die wordt toegepast op de tegels is afhankelijk van de ingestelde kleuren (primair en secundair) in de omgeving en in het dashboard beheer. Zie het artikel Hoe stel ik de kleurstelling van de tegels op het dashboard in?. Het toepassen van een afwijkende kleur op specifieke tegels valt niet binnen de standaard huisstijl toepassing. Indien dit gewenst is, zal dat per tegel bekeken moeten worden.

Actionbar en stream

Het dashboard van de inlener en de flexkracht heeft ook een ‘Actionbar’ en een ‘Stream’ die afzonderlijk zijn vorm te geven.

7. Actionbar en Stream

Formulieren

8. Standaard formulier

Elementen

Voor het ontwerp zijn een aantal punten interessant op een formulier:

• De knoppen (ook hier worden vaak ronde hoeken gebruikt). Het is mogelijk om bijvoorbeeld op het inlogformulier een afwijkende vormgeving te kiezen voor de knoppen.
• Elementen die bij elkaar horen worden gegroepeerd.
• Indien de ingevoerde waarde niet wordt gevalideerd, zal daar een melding bij verschijnen met een kleur ter indicatie (‘Voornaam’ in bovenstaand voorbeeld).
• Indien een element wordt geselecteerd om in te voeren, krijgt het element een ‘Focus’ indicatie. Standaard is dat met een blauwe kleur (‘Achternaam’ in bovenstaand voorbeeld).