Ontwerphandleiding voor het werken met stijlgidsen en stijltegels
Een maken merkidentiteit is geen gemakkelijke taak. Het vergt zware inspanningen, maar het is ook een van de meest lonende creatieve taken. Web-projecten vaak mix branding met interfaceontwerp. Dit kan verwarrend zijn omdat er in beide gebieden zoveel te doen is. Stijlgidsen en stijltegels zijn geweldige bronnen voor webontwerpers, en hoewel ze hetzelfde klinken, volbrengen ze twee verschillende taken.
In dit bericht wil ik me in beide verdiepen en de voordelen bespreken die u kunt halen uit deze creatieve items. Niet iedereen zal stijlgidsen of stijltegels nodig hebben (of liever). Maar elke ontwerper zou op zijn minst moeten begrijpen wat deze zijn en hoe ze werken.
Stijlgidsen voor het web
Ik heb verschillende meningen gelezen over stijlgidsen. Sommigen zeggen dat dit digitale mockups zijn, terwijl anderen zeggen dat op codes gebaseerde stijlgidsen het handigst zijn.
Hoe dan ook, het doel van een stijlgids is hetzelfde voor het web als voor elk ander project. Het definieert consistente patronen, UI-modules en creatieve voorkeuren gebruikt in het ontwerpproces. Je kunt heel specifiek worden en pixel-perfecte metingen voor bepaalde elementen bepalen, of je kunt los blijven en richtlijnen bieden met visuele voorbeelden.
Er is geen enkele juiste manier om een stijlgids te maken. De enige verkeerde manier is om eenvoudig een resource te maken kan niet door anderen worden begrepen.
Het doel is om een actief te maken dat dat wel zal doen de tand des tijds doorstaan. Het zou moeten zijn open voor bewerkingen als nieuwe bronnen worden gemaakt. Het moet ook toegankelijk zijn voor iedereen die zich bij het team voegt om met gemak in de gids te duiken.
Een stijlgids zou moeten zijn zo gedetailleerd als nodig voor het project. Het omvat meestal herbruikbare activa, zoals typografie, knoppen, kleurstalen, texturen en veelgebruikte pagina-elementen.
We hebben het onlangs behandeld levende stijl gidshulpmiddelen dat kan je helpen om vanuit het niets nieuwe huisstijlgidsen te maken. Deze levende gidsen zijn meer voor ontwikkelaars van frontends, maar ze kunnen net zo nuttig zijn voor ontwerpers. Je kunt meer over dit onderwerp lezen in deze Smashing Magazine-post.
Mijn absolute favoriete bron is StyleGuides.io. Het dekt de basisinformatie over stijlgidsen voor internet, inclusief live voorbeelden en case studies.
De patroonbibliotheek van MailChimp is een van de beste voorbeelden die u kunt vinden op StyleGuides.io. Het is een online gids voor live-stijl die definieert MailChimp's raster-, typografie- en pagina-elementen.
Wanneer u een stijlgids ontwerpt voor een webbedrijf, is het gebruikelijk om alles online te zetten, maar u kunt ook maken interne gidsen, en bewaar ze op een lokaal intranet of host ze privé achter een inlogpagina van een gebruiker. De manier waarop je toegang hebt tot een stijlgids doet er echt niet toe. Ze hebben allemaal hetzelfde doel om specifieke kleuren, patronen en beelden over te brengen overeenkomen met het thema van een webproject.
Bekijk deze andere berichten over stijlgidsen voor meer informatie over dit onderwerp:
- Front-end stijlgidsen (24ways.org)
- Maak een handleiding voor een website-stijl (Creativebloq.com)
- Hoe de perfecte stijlgids voor webdesign te maken (Dtelepathy.com)
Vertakken naar stijltegels
Stijltegels zijn helemaal een ander beest. Deze tegels zijn creatieve middelen gebruikt in de vroege ontwerpfase bij het proberen een specifieke esthetiek vast te spijkeren.
De website van Style Tiles is gemaakt door Samantha Warren en heeft alles wat u mogelijk zou willen weten. Er bestaat geen specifieke sjabloon voor het ontwerpen van een stijltegel. Maar de voorbeelden van Samantha gebruiken koppen en paragraaf types, links, patronen, en mogelijke kleurkeuzes samen met een merklogo.
Wanneer u met stijltegels werkt, is uw doel uiteindelijk om presenteer 2-3 verschillende stijltegels naar de klant of creative director. Deze tegels zijn meer gedetailleerd dan een moodboard, nog veel minder gedetailleerd dan een volledige mockup.
Tegels moeten net gedetailleerd genoeg zijn om een idee te geven van de identiteit en gemoedstoestand van de website. Samantha moedigt aan bijvoeglijke naamwoorden gebruiken om elke tegel in detail te beschrijven.
Klanten kunnen kijk door de verschillende tegels, en selecteer hun favoriete stukken. Deze bespaart u tijd bij het ontwerpen omdat de klant al voorwerpen heeft gezien die ze leuk vinden, dus er is minder kans op fikse herzieningen.
Hier is een geweldige quote van de website van Style Tiles:
Het vergelijken van stijltegels met de toolkit van een interieurontwerper is een goede analogie. Je wilt de moeite niet in een pixel-perfecte mockup gieten om de klant te laten beseffen dat ze de meeste kleuren en lettertypen haten.
Gebruik in plaats daarvan stijltegels om een te vinden algemeen thema of visuele taal voor gebruik op de hele site. Dit kan omvatten branding / identiteit maar kan ook omvatten UI-functies, zoals vervolgkeuzemenu's of CTA-knoppen.
U moet deze gebruiken als leverbare activa vroeg in het proces. Zodra je een volledige mockup hebt voltooid, hoef je echt niet meer naar de stijltegel te verwijzen. Toch kunnen stijltegels in het begin cruciaal zijn voor het creatieve proces van het opslaan van de ontwerperstijd en waardoor de klant veel opties heeft om uit te kiezen.
Als je wilt verdiepen in stijltegels bekijk deze gerelateerde berichten.
- Stijltegels en hoe ze werken
- Stijltegels: een alternatief voor volledige ontwerpcomponenten
- Stijltegels creëren: een gemakkelijke benadering van een ontwerprichting
Stijlgidsen versus stijltegels
Het verschil tussen stijlgidsen en stijltegels is vaag maar wel duidelijk. EEN stijlgids is veel meer gedetailleerd en moet worden gebruikt als een doorlopende naslaggids voor het creatieve team. EEN stijl tegel kan worden gebruikt als een moodboard naar ideeën visueel plotten voor uzelf of de klant. Ze zijn er vaak aan gewend ideeën verkennen, en als het project eenmaal is afgelopen, dienen ze niet veel als doel.
Stijltegels zijn vaak veel ruwer aan de randen en worden gebruikt alleen in het vroege creatieve proces. Een stijlgids is bedoeld om te gebruiken gedurende het gehele ontwerpproces en zelfs daarna voor toekomstige referentie voor andere ontwerpers die mogelijk op de site werken.
Beide hebben hun voor- en nadelen. Stijltegels zijn snel en leuk, maar kortstondig in de natuur. Stijlgidsen zijn grondig en gedragen zich als visuele documentatie, maar zij ook veel werk vergen.
Dus welke moet je gebruiken? Het uiteindelijk hangt af van het project.
Kleinere projecten zoals voor websites voor kleine bedrijven, werken ze beter met stijltegels. Het bouwen van een hele stijlgids voor een kleine bedrijfssite zou veel te veel werk en factureerbare uren vergen. Dit is waarschijnlijk de kosten voor de meeste klanten niet waard.
Hoe dan ook groot project zoals het opnieuw ontwerpen van de NY Times zou profiteren van zowel stijltegels als stijlgidsen.
Een taal en stemming vinden voor een nieuw project is altijd een waardevol proces. Dit is wat stijltegels maakt perfect voor bijna elk scenario.
Je kunt ook langskomen zonder een van deze activa te creëren. Sommige ontwerpers gaan recht van wireframes naar gedetailleerde mockups. En sommige klanten willen niet eens een stijlgids omdat deze niet zal wennen.
Werk op projectbasis en beslis wat het beste is voor een ieder.
Live voorbeelden
Laten we dit inpakken door te bedekken voorbeelden van zowel stijlgidsen als stijltegels. Ik vond deze ontwerpen terwijl ik Dribbble doorbladerde en ik denk dat ze de kwaliteit illustreren die je zou willen in je eigen stijlgidsen of stijltegels.
Stijlgidsen
Deze ongelooflijke Airbnb-stijlgids is gemaakt door Derek Bradley. Het is heel eenvoudig, maar het illustreert duidelijk de hoofdpatronen, kleuren en pagina-elementen te vinden in het ontwerp.
Hier is een veel grotere digitale stijlgids gemaakt door ontwerper Naoshad Alam. Dit voorbeeld is veel meer georganiseerd met secties voor kleuren, typografie, formulieren, interface-elementen en andere gebruikersinterface-functies.
Meer gedetailleerde stijlgidsen zouden al deze ontwerpelementen op het web plaatsen, en bevatten codefragmenten voor elke.
Ontwerper Cupi Wong heeft deze handleiding voor AfterShip gemaakt. Typografie, knoppen, kleurkeuzes en veelgebruikte pagina-elementen zijn zorgvuldig samengesteld en samen georganiseerd in secties.
Dit kan ook worden geport naar het web en veel groter worden opgebouwd als online naslagdocumentatie.
UI-ontwerper Greg Dlubacz heeft zijn eigen UI-stijlgids voor een webproject gedeeld. Dit ding is serieus enorm. De fullscreen-preview overspant 21.000 pixels hoog!
Absoluut een van de beste digitale stijlgidsen die ik ooit heb gezien. Dit kan ook worden geporteerd naar een online documentatiepagina waar teamleden naar kunnen verwijzen.
Stijltegels
UI / UX-ontwerper Abdus Salam heeft deze stijltegel gemaakt voor een website voor biologische voedselwinkels. Het is heel basic met platte ontwerpelementen, enkele kleine UI-functies, en een kleurenpalet.
Ontwerper Adrian Cantelmi ging heel gedetailleerd met zijn tegel met de desinvesteringsstijl. Het heeft kleuren en typografie maar bevat ook vectorillustraties.
Deze vectoren helpen om bepaal het merk, de stemming en het algehele kleurenschema van de website.
Het herontwerp van de World Cup Advisors kreeg een eigen stijltegel met zeer eenvoudige functies. Een paar pictogrammen, enkele kleurkeuzes, samen met een paar knopontwerpen. Eenvoud is de naam van het spel.
Als u een idee kunt krijgen van hoe de site er uit zou kunnen zien in een oogopslag dan doe je het goed.
Hier is een leuk voorbeeld van een tegel met afgekeurde stijl die wordt gebruikt voor een reisproject. De ontwerper Brennan Gleason biedt slechts een klein voorbeeld van de tegel, maar je kunt het wel voel de sfeer van de website.
Laatste woorden
Als u op internet zoekt, vindt u nog veel meer voorbeelden, tips en bronnen voor stijlgidsen en stijltegels bouwen. Maar ik hoop dat dit artikel een inleiding kan zijn op beide en u vloeiend inzicht en het maken van deze ontwerpactiva biedt.
