Styleguide V1.0
Dit is de styleguide gemaakt voor Plantswap. Een living styleguide biedt consistentie tussen merkuitingen, het is een referentiekader voor je team en nieuwe ontwerpers/developers kunnen sneller aan de slag met een goede merkreferentie.
Belangrijke punten:
Op de desktopversie staat het logo van de buurtcampus links en het menu naar de andere webpaginas van de buurtcampus rechts.
De links naar de verschillende webpaginas zijn in het lettertype Arial en bold, de kleur van de links is de blauwe kleur uit de huisstijl als niet op een pagina, de oranje als je op een specifieke van deze paginas zit.
De font-size van de links is 16px.
Boven en onder het menu en het logo zit een padding van 25px.
Net als in de desktopvertie zit er een padding onder en boven het logo en de drie streepjes onder elkaar waarmee je het menu opent.
In de mobiele versie is het menu in de vorm van een uitklapmenu. Dit menu is, wanneer geopend, het blauw van de huisstijl met witte letters. Het lettertype is Arial en bold.
De font-size van de links is 16px.
Aan de linkerkant van de menu items is een padding van 20px.
Als je op een van de webpaginas zit, wordt de link van die pagina de oranje van de huisstijl.
Vertel hoe dingen vooral niet toegepast moeten worden.
 - kopie.png){kind=logo}
Het logo moet duidelijk zichtbaar en goed leesbaar zijn. Voor het Plantswap logo is de letterstijl van het logo van Buurtcampus Oost aangehouden. Hierdoor blijft Plantswap voor bezoekers herkenbaar als project van Buurcampus Oost. Om het logo beter te laten aansluiten bij het planten thema, is gekozen voor de kleur groen (#224D12)
De aanbevolen minimum grootte voor het plantswap logo op desktop is … pixels.
Het icoon dat in het tabblad zichtbaar is laat een blaadje zien, dit is het blaadje dat in het logo gebruikt wordt.
De aanbevolen minimum grootte voor het plantswap logo op mobiel is … pixels hoog.
Dit is de richtlijn en een aantal voorbeelden voor het toepassen van het logo op verschillende achtergronden
Vertel hoe dingen vooral niet toegepast moeten worden.
Een website die toegankelijk is voor alle gebruikers is belangrijk voor Buurtcampus Oost en dus voor project Plantswap. Zorg daarom altijd dat het logo gecombineerd wordt met een boodschap die hardop wordt voorgelezen door een screen reader.
Kleuren brengen onze merkpersoonlijkheid en waarden over, maar helpen gebruikers ook om door de interface te navigeren. De juiste combinatie van kleuren kan van invloed zijn op hoe ze zich voelen, denken en gedragen. Zie hieronder meer informatie over ons kleurgebruik.
Wit 45% en Groen 40%
Blauw 10% en Oranje 5%
Groen, blauw, wit en oranje vormen het kernkleurenpalet van de PlantSwap. We gebruiken ze voornamelijk voor achtergronden, inhoud, om belangrijke elementen of oproepen tot actie te benadrukken.
Een tekstinvoer is een veld waarin gebruikers tekst kunnen invoeren
Tekstinvoer kan gebruikersinvoer op twee verschillende manieren weergeven:
Vertel hoe dingen toegepast moeten worden.
Label
Vermijd het maskeren van het label: houd het label altijd zichtbaar).
Breedte & Nabijheid
Gebruik visuele nabijheid.
Auto-focus
Automatische scherpstelling instellen.
Layout
Plaats tekstinvoer op dezelfde regel als de totale breedte past in de schermbreedte en als de invoer gekoppeld is. Gebruik breedte als afbetaling (zoals postcode voorbeeld
<form method="POST" class="form-code"></form>
<p><label>Naam:
<input name="name" required autocomplete="send name"></label></p>
<p><label>Achternaam:
<input name="family-name" required autocomplete="send family-name"></label></p>
<p><label>Telefoonnummer:
<input type=tel name="tel" autocomplete="send tel"></p>
<p><label>E-mail:
<input type="email" required autocomplete="send email"></label></p>
<p><label>Schrijf je E-mail
<textarea name="text" rows="4" minlength=18 maxlength=200>Hoi, buurtgenoot!
</textarea></label></p>
<title>Verstuur email
<p class="form-box"><button class="form-button"type="submit">Verstuur E-mail
</button></p>
</form>
.form-code {
background-color: #D6D6E1;
width: 60%;
height: 32rem;
padding: 1rem;
border-radius: 5px;
}
.form-code input,
textarea {
width: 100%;
padding: 10px 10px;
margin: 8px 0;
box-sizing: border-box;
border: 1px solid #333467;
border-radius: 5px;
resize: none;
}
input, label, textarea {
display:block;
}
.form-code input:focus-visible {
outline: 2px solid #333467;
border-radius: 3px;
}
.form-code textarea:focus-visible {
outline: 2px solid #333467;
border-radius: 3px;
}
.form-button {
background-color: #333467;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
border-radius: 5px;;
cursor: pointer;
}
.form-box {
text-align: center;
font-family: arial;
color: #515183;
}
Maak van de tab/menu een button die in en uitgeschoven kan worden.
Behoud grofweg dezelfde layout van de website
Behoud niet de hele nav, hierdoor neemt het te veel ruimte in.
Maak niet een volledig andere layout zodat het niet een heel andere website is op lagere resoluties, het moet consistent blijven
Maak de ruimte die de afbeeldingen innemen kleiner, verwijder zonodig een aantal afbeeldingen
Meerdere afbeeldingen naast elkaar zetten in de breedte, dit kan ervoor zorgen dat de pagina niet genoeg ruimte heeft (afbeeldingen maken een te groot deel uit van de pagina).
De meeste afbeeldingen zullen van stekjes en planten zijn. Verder zal er veel gebruik gemaakt word van groene kleuren die passen bij de huisstijl. Om afbeeldingen afgeronde hoeken te geven word er gebruik gemaakt van een one - value border radius:
.border-radius-image {
border-radius: 5px;
width: 20em;
padding-bottom: 30px;
}
We maken geen gebruikt van two, tree of four values. Dit is dat je bepaalde hoeken wel afrond, en sommige vierkant laat. Het volgende voorbeeld is een two values border-radius:
Arial
1rem
16px
140%
#333467
Grumpy wizards make a toxic brew for the jovial queen.
Arial (Bold)
1.2rem
19px
150%
#333467
Grumpy wizards make a toxic brew for the jovial queen.
Normale text dient links uitgelijnd te worden, met een maximale regellengte van 30rem
Headings dienen gecentreerd boven text of elementen geplaatst te worden.
| Heading | h1 | h2 | h3 | h4 | h5 | h6 |
|---|---|---|---|---|---|---|
| Size | 32pt | 26pt | 22pt | 20pt | 18pt | 16pt |
Headings dienen volgens semantische volgorde de aangegeven groottes te hebben.
Duurzaamheid
Strook van de icons is: solid 1.5px
Download de icons vanuit deze website: The Noun project
Gebruik een knop om acties mogelijk te maken die belangrijk zijn voor een gebruiker. |
Wanneer twee knoppen nauw worden gebruikt, moeten knoppen worden benadrukt. |
Knoppen kunnen een combinatie van een duidelijk label en een pictogram/icoon bevatten, terwijl linkjes altijd tekst zijn.
Hier is te zien dat we de buttons onderscheiden doormiddel het achtergrond kleur op verschillende manieren te tonen, zo kunnen we de nadruk leggen welke echt van belang is en welke minder.
Je kan als primaire kleur ook gebruik maken van de kleur groen, hover moet oranje zijn.
| Primary | Secondary | Tertiary |
|---|---|---|
| De button wordt eenmaal per weergave gebruikt. Het wordt gebruikt wanneer een actie duidelijk belangrijker is dan de ander. | De secundaire knop is de standaardknop voor de meeste gebruikssituaties. De geschetste styling legt minder nadruk op deze knoppen. | De tertiaire knop wordt meestal gebruikt voor diverse acties: de actie is belangrijk, maar is misschien niet wat de gebruiker op dat moment wil doen. |
<article class="btn-kader">
<button class="btn1"> Primary button</button>
<button class="btn2"> Secondary button</button>
<button class="btn3"> Tertiary button</button>
</article>
.btn1 {
background-color: #333467;
color: white;
}
.btn2 {
background-color: white;
border-style: solid #333467;
color: #333467;
}
.btn3 {
background-color: #33346727;
border-style: solid #333467;
color: #333467;
}
css: Width: 126px; height: 132px;
.png)
css: Width: 120px; height: 150px; rotate: 40;
Andere achtergrond kleur gebruiken