MHASMO STYLEGUIDE
MHASMO Styleguide |
DE INLEIDING
2
MHASMO Styleguide |
MHASMO staat voor het maken van connecties. Connecties met de klanten, connecties tussen bedrijven en connecties van netwerken (data). Dit alles doen ze op hun eigen manier; persoonlijk, betrokken en met hoogwaardige dienstverlening. Het doel van MHASMO tijdens deze werkzaamheden is de klant ten alle tijden te ontzorgen. Het concept heet; MAAKT DE CONNECTIE. De tagline is MHASMO maak connectie. De misie en visie zijn heel belangrijk. De visie: wij willen klanten een voorsprong geven door data snel en veilig beschikbaar te maken. en de missie: ‘Een bijdrage leveren aan een snelle, stabiele en inspirerende werkomgeving.’ Daarnaast komen de kernwaarden duidelijk naar voren. De drie voornaamste kernwoorden van MHASMO zijn persoonlijk, ontzorgen en hoogwaardige dienstverlening. MHASMO onderscheidt zicht door: persoonlijk, flexibel, hoogwaardige
service gerichtheid, oplossingsgericht, ontzorgend, dienstverlening, communicatief en betrouwbaar.
Dit alles komt heel duidelijk naar voren in de gehele visuele vormgeving van alle uitingen. Het logo (te zien in deze styleguide) is vernieuwd. Door de nieuw vormgegeven letter M en het oude logo te combineren , past het perfect bij “Maak connectie”. De letter M is gemaakt door verschillende punten met elkaar te verbinden. De connectie komt hierdoor heel duidelijk naar voren. Ook het extra elementen zorgt voor een geheel en sluit heel goed aan bij het concept. Verder is er gebruik gemaakt van een hoofdkleur blauw. Drie verschillende tinten blauw worden er verwerkt. Ook dit zorgt weer voor een geheel en een eigen stijl. Aan de fotografie zitten ook eisen verbonden. Dit is ook om de consistentie door te voeren en het als eenheid te zien. In deze styleguide wordt de huisstijl van Mhasmo vast gelegd. Deze gids is gemaakt om ervoor te zorgen dat alle uitingen die vanuit het concept worden gepubliceerd dezelfde identiteit uitstralen. Deze styleguide is dan ook bedoeld voor alle medewerkers, ontwerpers, drukkers en anderen partijen die in opdracht van Mhasmo een uiting maken. In deze gids vind je alle voorwaarden, regels, de gehele huisstijl en alle uitingen.
3
MHASMO Styleguide |
DE INHOUDSOPGAVE
4
06 HET LOGO
Logo Logo technisch Logo opbouw Logo gebruik Logo misbruik
12 EXTRA ELEMENTEN 14 TYPOGRAFIE 16 KLEUREN 18 FOTOGRAFIE
20 MOODBOARD 22 ICONEN 24 TOEGEPAST 26 TITELBALK 28 MOCK-UPS Computer Extra Papier Twitter LinkedIn
MHASMO Styleguide |
HET LOGO
6
MHASMO Styleguide | Logo
MHASMO 7
MHASMO Styleguide | Logo technisch
980 px
Allemaal M-en in elkaar verwikkeld
204 px
198 px
MHASMO 8
Verbind punten (connectie)
Het originele logo van Mhasmo
MHASMO Styleguide | Logo opbouw
1.
2.
3.
4.
9
MHASMO Styleguide | Logo gebruik
√
√
MHASMO
MHASMO Het logo zonder een achtergrond, de M is blauw (zie kleurcode op blz. 17) en het logo is zwart. Dit is het originele Mhasmo logo.
Het logo met een achtergrond wordt wit. Er kan gebruik gemaakt worden van de kleuren te zien op bladzijde 17.
10
MHASMO Styleguide | Logo misbruik
×
×
MHASMO ×
×
MHASMO ×
×
MHASMO
MHASMO
O M AS
MH 11
MHASMO
MHASMO Styleguide |
EXTRA ELEMENT
12
MHASMO Styleguide | Extra element
Het element is ontstaan uit het logo. De punten kun je met elkaar verbinden. Dit verwijst naar de connectie en past daarom goed binnen het concept. Doordat de punten elke keer verschillend verbonden kunnen worden is het element dynamisch. Het element kan zonder achtergrond in het blauw gebruikt worden en met een achtergrond in het wit. Het kan verwerkt worden op alle uitingen: denk aan een folder, het visitekaartje, briefpapier, een pen, notitieboekje, maar ook online zoals op de website en de social media kanalen. 13
MHASMO Styleguide |
TYPOGRAFIE
14
MHASMO Styleguide | Typografie
Aa Aa Aa
Arial Regular abcdefghijklmnopqrstuvwqxz 1 2 3 4 5 6 7 8 9 0 !? @ & ^ * . , “ ‘ :
Arial Bold abcdefghijklmnopqrstuvwqxz 1 2 3 4 5 6 7 8 9 0 !? @ & ^ * . , “ ‘ :
Arial Black abcdefghijklmnopqrstuvwqxz 1 2 3 4 5 6 7 8 9 0 !? @ & ^ * . , “ ‘ :
15
MHASMO Styleguide |
KLEUREN
16
MHASMO Styleguide | Kleuren
Blauw tinten: R 101 G 168 B 199
R 46 G 145 B 190
R 15 G 109 B 154
#65a8c7
#2e91be
#0f6d9a
R0 G0 B0
R 255 G 255 B 255
#000000
#ffffff
Basis kleuren:
17
MHASMO Styleguide |
FOTOGRAFIE
18
MHASMO Styleguide | Fotografie
1.
2.
1. Er zit een zwart filter over alle foto’s heen van 40%. Dit zorgt voor een eenheid op de website. Daarnaast zullen er personen te zien zijn op de foto’s voor een persoonlijke touch. Op de foto’s op de website zal het extra element te zien zijn. 2. Ook zal de werkplek naar voren komen om de sfeer binnen het bedrijf vast te leggen. De foto’s worden, zoals op de voorbeelden te zien is, van voor geschoten.
19
MHASMO Styleguide |
MOODBOARD
20
MHASMO Styleguide | Moodboard
PERSOONLIJK
VERBINDEN
CONNECTIE
21
MHASMO Styleguide |
ICONEN
22
MHASMO Styleguide | Iconen
Dit zijn de iconen die gebruikt worden op de website. Ze worden weergegeven in een getekende stijl. De omlijning is blauw (#65a8c7) en
de inhoud doorzichtig waardoor ze ook ergens overheen gezet kunnen worden. De iconen zorgen er voor dat er minder tekst gebruikt hoeft te worden. Dit ziet er visueel aantrekkelijk uit en je ziet in een keer waar het over gaat. Het ondersteunt de tekst die er bij staat.
23
MHASMO Styleguide |
TOEGEPAST
24
MHASMO Styleguide | Toegepast
Het logo
Foto met filter
Arial black
Extra element
2 kleuren titel
Arial regular
25
MHASMO Styleguide |
TITELBALK
26
MHASMO Styleguide | Titelbalk
27
MHASMO Styleguide |
MOCK-UPS
28
MHASMO Styleguide |
29
MHASMO Styleguide |
30
MHASMO Styleguide |
31
MHASMO Styleguide | Twitter
32
MHASMO Styleguide | LinkedIn
33