Dit bericht verscheen oorspronkelijk in de sectie Marketing. Om meer van dit soort inhoud te lezen, abonneert u zich op Marketing.
Als je je ooit hebt afgevraagd hoe ontwerpers bij Apple elk klein element in iOS definieerden terwijl ze het aan het bouwen waren, dan ben je hier aan het juiste adres. Klaar om te nerds en tegelijkertijd geïnspireerd te raken? Dat weet ik zeker.
Misschien ben je bekend met het concept van inhoudsstijlgidsen, die leden van een bedrijf op één lijn brengen met alle grammatica- en interpunctieregels die ze moeten volgen. post, laat ik u voorbeelden zien van de versie van deze stijlgidsen voor webontwerpers, die we digitale stijlgidsen noemen.
Wat is een digitale stijlgids precies? Het is een handleiding die de ontwerpnormen vastlegt voor de merkidentificaties van een bedrijf, zoals documenten en bewegwijzering. Het belangrijkste doel is om een universele ontwerpstijl voor het merk te creëren en te zorgen voor consistentie in alle kanalen en media. Hier stelt u uw logo, kleurenpalet, typografie, beeldrichtlijnen, enzovoort vast.
Stijlgidsen zijn altijd een hoofdbestanddeel van het ontwerp geweest, met sommige gedrukte versies die teruggaan tot meer dan 100 jaar geleden. Maar terwijl design voor het web steeds meer geformaliseerd wordt, beginnen stijlgidsen ook hun rechtmatige plaats in het digitale medium te vinden. Ze zijn vooral handig voor websites en producten die eersteklas gebruikerservaringen moeten bieden.
Maar als UX-ontwerper ben ik altijd nieuwsgierig geweest … wat kun je vinden in de digitale stijlgidsen van invloedrijke bedrijven als Apple, Google en Starbucks?
Geloof het of niet, maar veel bedrijven maken deze informatie daadwerkelijk openbaar – ze maken het alleen niet zo gemakkelijk te vinden. Dus elke keer dat ik er een tegenkom, maak ik er een bladwijzer van. Hier zijn enkele van de beste die ik tot nu toe heb gevonden.
Contents
10 voorbeelden van geweldige digitale stijlgidsen
1) Apple
De stijlgids van Apple is vooral interessant omdat daarin wordt beschreven hoe je een volledig besturingssysteem ontwerpt. Yosemite, een van de nieuwste versies van Apple's OS X, heeft een eenvoudigere gebruikersinterface dan zijn voorganger, Mavericks. Apple demonstreert dit subtiele maar tastbare onderscheid met echt mooie grafische vergelijkingen, en gaat vervolgens verder met het vertellen van de grondgedachte achter elk afzonderlijk aspect van het ontwerp van het besturingssysteem. Het geeft je echt een kijkje in de hoofden van de ontwerpers die Yosemite hebben gemaakt.
2) Google
Google pioniert met een nieuwe ontwerpstijl genaamd Material Design, die bestaat als een hybride tussen Skeuomorphic Design (gradiënten, texturen, lichte elementen) en Flat Design (eenvoudig, kleurrijk, geometrisch). verhoog de voordelen die aan elke ontwerpstijl zijn gekoppeld, terwijl u de nadelen vermijdt. Omdat Google Material Design nu ongeveer een jaar beoefent, heb je er waarschijnlijk al in een bepaalde hoedanigheid mee te maken gehad — Google Agenda-app, iemand? Deze stijlgids beschrijft precies wat Material Design is en hoe Google het gebruikt. Ik moet zeggen dat het verreweg een van de beste stijlgidsen is die ik ooit ben tegengekomen.
3) Starbucks
Dit is een van de meest minimalistische stijlgidsen die ik heb gezien — en toch bevat het heel veel nuttige informatie. Het legt een grote nadruk op code en je kunt zien dat het is gebouwd door ontwikkelaars, voor ontwikkelaars. Het mist merkgerelateerde elementen, dus het bewandelt de grens tussen website-stijlgids en codebibliotheek.
4) Atlassian
De productsuite waarvoor Atlassian ontwerpt, is gigantisch — dus hebben ze natuurlijk een gigantische stijlgids. Van fundamentele elementen (zoals kleurenpalet en typografie) tot componenten (zoals tabellen en tooltips), tot een volledige patroonbibliotheek, deze gids bevat zo ongeveer alles wat u van een product van deze omvang mag verwachten. Misschien wel het beste van alles: de grondgedachte achter de hele stijlgids wordt samengevat in drie bedrieglijk eenvoudige zinnen op de startpagina.
5) Mozilla
Deze stijlgids gaat vooral over branding en communicatie. Maar nu Mozilla de laatste tijd een “privacy en open web”-aanpak hanteert, is het cool om te zien hoe ze dit in hun ontwerp weerspiegelen. Ze structureren ook hun “doen en niet”-gedeelte op een interessante manier, waarbij ze groene en rode gezichten gebruiken om onderscheid te maken tussen wat ontwerpers wel en niet moeten doen.
6) Buffer
Deze stijlgids is uniek omdat Buffer Atomic Design gebruikt – wat in feite betekent dat ze hun ontwerpen in delen (atomen) bouwen en ze combineren tot grotere stukken (moleculen), die allemaal het grotere product (organisme) vormen. Hun stijlgids is klein en beknopt en gaat van raster naar modals allemaal op één plek.
7)Yelp
Als je op zoek bent naar een solide voorbeeld van een stijlgids voor een website, dan heeft Yelp dat voor je. Dit ding heeft het allemaal: typografie, lay-out, formulieren, containers, navigatie en codefragmenten voor elk stuk. Ze leggen heel goed uit wat elk element is, waar het moet worden gebruikt en hoe het moet worden geïmplementeerd. Als u hun merkrichtlijnen wilt bekijken, kunt u dat ook doen.
8) GOV.UK
De Engelse website voor overheidsdiensten wordt alom geprezen als een goed voorbeeld van hoogwaardige UX. Waarom? Omdat het beschikt over een eenvoudig en gebruiksvriendelijk ontwerp dat ruimte biedt aan grote hoeveelheden informatie. Als je geïnteresseerd bent in wat een echt schoon en effectief ontwerp vormt (hint: het begint meestal met sterk kleurgebruik, typografie en spatiëring), dan is de stijlgids van GOV.UK de moeite waard om eens goed te bekijken. Net als de site is het heel eenvoudig, maar zeer informatief.
9) DeviantArt
De nieuwe DeviantArt-stijlgids is echt uniek omdat het meer is dan alleen een gids – het is een ervaring. Het vertelt een verhaal en maakt gebruik van gedurfde beelden over de volledige breedte om de gebruiker onder te dompelen in de emotionele ervaring van het merk DeviantArt. Dat gezegd hebbende, het is strikt een stijlgids voor branding, dus alleen items zoals kleur en typografie komen aan bod.
10)Disqus
Kleur, pictogrammen, typografie en logo … dat was het voor deze gids. Maar het wordt allemaal op een heel mooie, georganiseerde manier gepresenteerd. Het lijkt erop dat ze een componentensectie hebben gebouwd, maar die is niet meer zichtbaar. (Hoewel het je naar een hilarische 404-pagina leidt.) Deze gids kan worden gebruikt als een goed voorbeeld voor “waar te beginnen” bij het maken van je eigen stijlgids. Het heeft alle basisprincipes.
Voel je je geïnspireerd?
Nu is het jouw beurt. Door gebruik te maken van een digitale stijlgids in uw bedrijf, kunt u de ontwerptaal van uw merk communiceren met interne ontwerpers, bureaus, advertentiepartners en zelfs klanten.
Begin met de basiselementen (kleur, typografie, logo, afbeeldingen), voeg enkele gebruiksrichtlijnen toe (“wel en niet”), en neem zelfs enkele webcomponenten op als dat nodig is (modules, sjablonen, codefragmenten). Gebruik voorbeelden van andere bedrijven om van de besten te leren. Uw team zal in een mum van tijd consistente ontwerpen uitwerken.