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:
- Overzicht
- Aanpassingen
- Kader
- Perspectieven
- Mobiel / Responsive
- Algemene vormgeving
- Logo & Kleur
- Lettertype
- Inlogscherm
- Standaard
- Voorbeeld met vormgeving
- Welkom tekst
- Dashboard
- Voorbeeld met vormgeving
- Perspectieven
- Tegels
- Actionbar en stream
- 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.
- Leverancier / Bemiddelaar
- 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).