Titelpagina Styleguide Jij&Overijssel

Maat: px

Weergave met pagina beginnen:

Download "Titelpagina Styleguide Jij&Overijssel"

Tessa Beckers
7 jaren geleden
Aantal bezoeken:

1 Huisstijlrichtlijnen Digitaal Titelpagina Styleguide Jij&Overijssel

2 Inhoudopgave Onderwerp Pagina 1 Responsive design 3 2 Tone of voice 4 3 Kleurgebruik 5 4 Typografie 6 5 Formulieren 8 6 Pictogrammen 9 7 Buttons 10 8 Afbeeldingen 12 9 Navigatie 13 PAGINA 2

3 1 Responsive design Het platform Jij&Overijssel dient ontworpen te worden voor het gebruik op alle mogelijke apparaten / devices. Hieronder een korte toelichting op responsive design (Bron: Wikipedia) Responsive webdesign is een benadering van webdesign waarbij de web developer streeft naar een optimale webervaring voor een breed scala aan apparaten (van desktop computerschermen tot mobiele telefoons). Het ontwerp van een responsive website schaalt mee met de afmetingen van een scherm, zonder in te leveren op leesbaarheid van tekst of bruikbaarheid van de gebruikersinterface. Een voorbeeld van hoe verschillende elementen van een webpagina zich aanpassen aan de schermgrootte van verschillende apparaten zoals het beeldscherm van een desktopcomputer, een tablet-pc en een smartphone. PAGINA 3

4 2 Tone of voice Kernwoorden die hiervoor gelden zijn: - Informeel - Direct - Ontvankelijk/open - Eerlijk - Passie/bevlogen - Persoonlijk - Gezond verstand/slim PAGINA 4

5 3 Kleurgebruik De basiskleuren voor het ontwerp van jij&overijssel staan hiernaast benoemd. De primaire kleuren zijn blauw, wit, zwart en licht- en donker grijs. Daarnaast is het mogelijk om te werken met een secundair kleurenpalet, mits deze kleuren goed zijn onderbouwd. De kleuren moeten altijd in volvlak gebruikt worden. Het is dus niet mogelijk gradients te gebruiken. Uitgangspunt voor het ontwerp én kleurgebruik is flat design. Flat design houdt in het kort in: geen gedetailleerde structuren, geen schaduwen en geen diepte. Hierdoor ontstaat een ontwerp vanuit de eenvoud en simpelheid. Dit zorgt voor een heldere communicatie naar de bezoeker. Kleur RGB HEX Blauw 37 / 92 / 159 #255C9F Donker grijs #6E6E6E Licht grijs #EFEFEF Wit #FFFFFF Zwart # Inspiratie (flat design): PAGINA 5

6 4 Typografie Het primaire font voor jij&overijssel is de Frutiger Next. Deze brede fontfamily mag vrij gebruikt worden. Als secundaire fontfamilie mag de Verdana en de Swift gebruikt worden. Het is mogelijk, ter ondersteuning van het ontwerp en concept, dat er nieuwe fontfamilies toegevoegd worden aan deze basis. Richtlijnen leestekst: - Formaat minimaal 14px Op de volgende pagina staan enkele voorbeelden van typografische toepassingen. Gebruikte fonts Frutiger Next Frutiger Next Light Frutiger Next Regular Frutiger Next Italic Frutiger Next Bold Frutiger Next Bold Italic Swift Swift light Swift regular Swift italic Swift bold Swift extra bold Verdana Verdana regular Verdana italic Verdana bold Verdana bold italic PAGINA 6

98 +34 Gezien> bekijk 16 Favorites > bekijk Nieuw ZoieZo Album!

7 4 Typografie Hallo Jeroen! Enkele voorbeelden van typografische toepassingen. Heb je zin om je eerste idee uit te werken en te zien hoeveel mensen jou graag willen helpen? Gezien> bekijk 16 Favorites > bekijk Nieuw ZoieZo Album! Voor de komende tijd is dit het enige optreden die we gaan doen. Wees erbij!! 100% spoorlijn Hier kan een tekst staan Een nieuwe beek in Twente PAGINA 7

8 5 Formulieren Bij het ontwerpen van formulieren geldt dat deze eenvoudig en overzichtelijk moeten zijn. Ook hier mag geen gebruik gemaakt worden van gradients, schaduwen of verloopkleuren (flat design). Hiernaast voorbeelden van mogelijke invulvelden. Twitter? Modern ;-) Type een #hashtag Nog een #hashtag toevoegen Foto s werken goed. Selecteer een afbeelding: Drag and drop of selecteer een foto hier Nog een foto toevoegen Korte toelichting bij de afbeelding: 0/50 Volgende stap Volgende stap Verrijk je idee! Om de lezer een beter beeld te geven van je idee, kan het mogelijk zijn dat je gebruik wilt maken van ondersteunende diensten zoals foto s, video of zelfs geluid. Selecteer hieronder de diensten die je graag wilt gebruiken. www. w Volgende stap PAGINA 8

9 6 Pictogrammen Er is een sterke voorkeur voor het gebruik van pictogrammen. Pictogrammen bieden een goede oplossing als het gaat om het vertalen van een teksten in één beeld. Als basis kan de hiernaast afgebeelde pictogrammenset Entypo gebruikt worden. Deze pictogrammenset is te downloaden op: Uiteraard kan het zijn dat deze set niet alle benodigde pictogrammen bevat. Nieuwe pictogrammen mogen ten alle tijden ontworpen en toegevoegd worden. Deze nieuwe pictogrammen dienen wel naadloos aan te sluiten bij de stijl van de Entyposet. Maak bij het gebruik van pictogrammen altijd gebruik van gevectoriseerde formaten op het web, zoals een webfont of.svg. PAGINA 9

10 7 Buttons Bij de ontwikkeling en het ontwerp van buttons voor jij&overijssel dienen de volgende richtlijnen aangehouden te worden: - Het kleur van de buttons moet volvlak zijn. Er mag geen gebruik gemaakt worden van verlopen en schaduwen. - De button dient afgeronde hoeken te hebben. - Er moet rekening gehouden worden met het formaat van de button, dus ook geschikt voor touchscreen. - Formaat font: minimaal 16px. - Kleurgebruik dient logisch te zijn, dit houdt in dat verschillende kleuren gekoppeld moeten worden aan verschillende statussen (van de button). Volgende stap Volgende stap Connect met Facebook Hiernaast voorbeelden van buttons. PAGINA 10

11 7 Buttons Overige buttons (zoals radiobuttons, playbuttons enz.), dienen in zijn eenvoud toegepast te worden. Enkele richtlijnen: Droom 1/4 100% spoorlijn - Geen verloop - Formaat geschikt voor alle devices Veel van dit soort buttons kunnen rechtstreeks vanuit Entypo (zie pagina 9) gebruikt worden. Reacties Favorites Gezien PAGINA 11

12 8 Afbeeldingen Het gebruik en toepassen van afbeeldingen is vrij. Het is mogelijk om afbeeldingen in te kaderen, kaders moeten wel vierkant, rechthoekig of rond zijn. Bij een vierkante of rechthoekige uitkadering dienen de hoeken afgerond zijn. Hiernaast enkele voorbeelden van uitkaderingen. Persoonlijke instellingen Een idee toevoegen Ik wil deelnemen aan mooie ideeën PAGINA 12

13 9 Navigatie De richtlijnen voor de navigatie zijn vrij. Er moet wel rekening gehouden worden met het feit dat de navigatie voor alle devices optimaal in gebruik moet zijn (responsive design). Hiernaast enkele voorbeelden van navigatiemogelijkheden. Overzicht Inleiding Twitter Video Aan tafel Zwart voor m n ogen Afbeeldingen Spotify playlist + Onze vraag aan jou: Meningen Foto s Video s Jeroen Jeroen Mijn dashboard Mijn ideeën Persoonlijke instellingen Idee toevoegen Geïnspireerd worden Uitloggen Titel + beschrijving Verrijking Afbeelding(en) Twitter Wat heb je nodig Wat vraag je PAGINA 13

Vergelijkbare documenten

Inhoudsopgave. Styleguide Bewust. Pagina 2

Inhoudsopgave. Styleguide Bewust. Pagina 2 Huisstijl Inhoudsopgave Inleiding Logo Logo gebruik Logo misbruik Logo app Kleuren Typografie Grid Beeld gebruik Beeld misbruik Beeld toepassing Buttons & iconen 3 4 5 6 7 8 9 10 11 12 13 14 Pagina 2 Inleiding