Dit bericht is eerder verschenen op de Marketing afdeling. Om meer inhoud zoals deze te lezen, abonneer u op Marketing.
als je je ooit hebt afgevraagd hoe ontwerpers bij Apple elk klein element in iOS hebben gedefinieerd terwijl ze het bouwden, Dan ben je op de juiste plek. Klaar om te nerd en geïnspireerd te raken op hetzelfde moment? Dat ben ik zeker.
u bent misschien bekend met het concept van content style guides, die leden van een bedrijf afstemmen op alle grammatica en&Nbsp;interpunctieregels die ze moeten volgen.in deze post Zal ik je voorbeelden laten 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 bepaalt voor de merkidentificatoren van een bedrijf, zoals documenten en bewegwijzering. Het belangrijkste doel is om een universele ontwerpstijl voor het merk te creëren en consistentie te garanderen in alle kanalen en media. Dit is waar u uw logo, kleurenpalet, typografie, beeldrichtlijnen, enzovoort vaststelt.
stijlgidsen zijn altijd een hoofdbestanddeel van het ontwerp geweest, met sommige gedrukte versies die teruggaan tot meer dan 100 jaar geleden. Maar naarmate het ontwerp voor het web steeds meer geformaliseerd wordt, zijn stijlgidsen ook begonnen hun rechtmatige plaats te vinden in het digitale medium. Ze zijn vooral handig voor websites en producten die eersteklas gebruikerservaringen moeten produceren.
maar als UX designer ben ik altijd nieuwsgierig geweest … wat vind je in de digitale stijlgidsen van invloedrijke bedrijven als Apple, Google en Starbucks?
geloof het of niet, veel bedrijven maken deze informatie eigenlijk Openbaar-ze maken het gewoon niet erg gemakkelijk te vinden. Dus elke keer als ik er een tegenkom, bookmark ik het. Hier zijn enkele van de beste die ik tot nu toe heb gevonden.
Contents
10 voorbeelden van Awesome Digital Style Guides
1) Apple
Apple ‘ s style guide is vooral interessant omdat het beschrijft hoe je een heel besturingssysteem moet ontwerpen. Yosemite, een van de nieuwste versies van Apple ‘ s OS X, heeft een meer vereenvoudigde gebruikersinterface dan zijn voorganger, Mavericks. Apple demonstreert dit subtiele maar tastbare onderscheid met echt mooie grafische vergelijkingen, en gaat dan verder met het praten over de redenering achter elk aspect van het ontwerp van het besturingssysteem. Het geeft je echt een venster in de geest van de ontwerpers die Yosemite hebben gemaakt.
2)&Nbsp;Google
Google is pionier in een nieuwe ontwerpstijl genaamd Material Design, die bestaat als een hybride tussen Skeuomorf ontwerp (gradiënten, texturen, lichte elementen) en plat ontwerp (eenvoudig, kleurrijk, geometrisch).daarbij hopen ze de voordelen die verbonden zijn aan elke ontwerpstijl te vergroten, terwijl ze de nadelen vermijden. Omdat Google al ongeveer een jaar Materiaalontwerp beoefent, heb je er waarschijnlijk al op een of andere manier mee samengewerkt-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 een hoop nuttige informatie. Het legt veel nadruk op code en je kunt zien dat het is gebouwd door ontwikkelaars, voor ontwikkelaars. Het ontbreekt aan merkgerelateerde elementen, dus het loopt de lijn tussen website style guide en code library.
4)&Nbsp;Atlassian
De productsuite waar Atlassian voor ontwerpt is gigantisch — dus natuurlijk hebben ze een gigantische stijlgids. Van fundamentele elementen (zoals kleurenpalet en typografie), tot componenten (zoals tabellen en tooltips), tot een complete patroonbibliotheek, deze gids heeft zo ongeveer alles wat je zou verwachten van een product van dit formaat. Misschien wel het beste van alles, de redenering achter de hele stijlgids is samengevat in drie, bedrieglijk eenvoudige zinnen op de startpagina.
5) Mozilla
Deze stijlgids houdt zich voornamelijk bezig met branding en communicatie. Maar met Mozilla die de laatste tijd een “privacy en open web” – benadering hanteert, is het cool om te zien hoe ze dit in hun ontwerp weerspiegelen. Ze structureren ook hun” doen en niet ” sectie op een interessante manier, met behulp van groene en rode gezichten om onderscheid te maken tussen wat ontwerpers wel en niet zouden moeten doen.
6) Buffer
deze stijlgids is uniek omdat Buffer Atoomontwerp 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, van raster door modals allemaal op één plaats.
7) Yelp
Als u op zoek bent naar een solide voorbeeld van een website stijlgids, Yelp heeft dat gedekt. Dit ding heeft het allemaal: typografie, lay-out, formulieren, containers, navigatie en codefragmenten voor elk stuk. Ze doen echt geweldig werk om uit te leggen wat elk element is, waar het moet worden gebruikt en hoe het moet worden geïmplementeerd. Als je ook hun Merkrichtlijnen wilt bekijken, kun je dat ook doen.
8) GOV.UK
de website van de Engelse overheid is alom geprezen als een goed voorbeeld van UX van hoge kwaliteit. Waarom? Omdat het een eenvoudig en gebruiksvriendelijk ontwerp heeft dat buitensporige hoeveelheden informatie bevat. Als u geïnteresseerd bent in wat een echt schoon en effectief ontwerp vormt (hint: Het begint meestal met sterk kleurgebruik, typografie en afstand), dan GOV.UK de stijlgids is de moeite waard om goed te bekijken. Net als de site, het is heel eenvoudig, maar zeer informatief.
9) DeviantArt
De nieuwe DeviantArt style guide is echt uniek omdat het meer is dan alleen een gids-het is een ervaring. Het vertelt een verhaal en maakt gebruik van gedurfde, full-width visuals om de gebruiker onder te dompelen in de emotionele ervaring van het DeviantArt-merk. Dat gezegd hebbende, het is strikt een stijlgids voor branding, dus alleen items zoals kleur en typografie worden behandeld.
10) Disqus
kleur, pictogrammen, typografie en logo … dat is het voor deze gids. Maar het is allemaal gepresenteerd op een zeer mooie, georganiseerde manier. Het lijkt erop dat ze een onderdeel hebben gebouwd, maar het 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 een eigen stijlgids. Het heeft alle fundamenten.
inspiratie?
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, reclamepartners en zelfs klanten.
begin met de basiselementen (kleur, typografie, logo, afbeeldingen), voeg enkele gebruiksrichtlijnen toe (“doen en niet doen”) en neem zelfs enkele webcomponenten op als dat nodig is (modules, sjablonen, codefragmenten). Gebruik voorbeelden van andere bedrijven om te leren van de beste. Uw team zal in een mum van tijd consistente ontwerpen ontwikkelen.