6 dingen om in je ontwerpgids te plaatsen
Ontwerphandleidingen zijn een waardevol hulpmiddel voor het maximaliseren van de output van ontwerpteams en voor het waarborgen van een consistente merkidentiteit. We kijken naar zes essentiële componenten van succesvolle ontwerphandleidingen.
Een ontwerpgids is meer dan alleen een document dat wordt geleverd met een nieuwe website of merkidentiteit. Een goede ontwerpgids is een kunstwerk op zich en heeft praktische toepassing in alledaags ontwerpwerk. Het laat zien wat je project is en wil zijn. Het moet elementen van ontwerp, stem en zelfs code samenbrengen op een manier die beheersbaar, bruikbaar en gemakkelijk te begrijpen is.
Het begint met deze zes ontwerpgidselementen die in uw documentatie moeten staan. (Als dat niet het geval is, moet u uw gids meteen herzien!)
1. Merkidentiteitsvoorbeelden
Uw ontwerpgids moet uw merkidentiteit weergeven in een visueel formaat dat representatief is voor de manier waarop u wilt dat ontwerpmaterialen er uitzien. Dat is een klassenvoorbeeld van show, vertel het niet. (Hoewel er wat te vertellen is in de gids om te gaan met de visuele voorbeelden.)
De beste voorbeelden zijn real-case toepassingen die precies illustreren wat de ontwerpstandaarden zijn bedoeld om te portretteren.
Gebruik schermafbeeldingen van de startpagina van uw website, mobiele startpagina, app of een andere plaats wanneer het ontwerp op zijn best is.
Wat is er leuk aan de Graag rijden ontwerpgids is dat elke pagina in het boekje eruit ziet als de website, waardoor merkconsistentie ontstaat. De gids brengt zelfs kleine elementen van het ontwerp in beeld, zoals de juiste stijl voor apps-pictogrammen in een nauwkeurige weergave.
Het beste van het gebruik van echte voorbeelden in een ontwerpgids is dat u geen extra werk hoeft te maken om visuele elementen te laten zien; je hebt ze al in de hand. Bovendien zullen teamleden weten dat de geschreven richtlijn in de praktijk werkt omdat er visueel bewijs is.
2. Ontwerprichtlijnen
Alles, van kleurstalen tot typografiepaletten, tot vormen en gebruik van ontwerpelementen moet duidelijk worden geschetst.
Waarom ziet en functioneert het ontwerp op een bepaalde manier? Wat is de filosofie erachter?
Door deze dingen uit te leggen, kunnen gebruikers de ontwerpstijl op alle media op een meer nauwkeurige en consistente manier toepassen. Als het gaat om het ontwerpen van websites, is het een goed idee om elementen op te nemen die mogelijk verschillen van de tegenhangers van gedrukte branding en hoe deze zich verhouden. Veel ontwerpers kiezen bijvoorbeeld online voor een ander typografiepalet dat uitgeschreven branding nabootst om het gebruik van Google Fonts tot Typekit te maximaliseren voor gebruiksgemak.
Zorg ervoor dat u opmerkt welke lettertypen worden vervangen als dit deel uitmaakt van uw ontwerpstrategie.
Wanneer het opstellen van ontwerprichtlijnen specifiek is als het er op aan komt - H1-tags zijn altijd 88 punten of miniatuurafbeeldingen zijn altijd 200 bij 200 pixels - maar overbieden niet onnodige details. U wilt dat teamleden informatie in één oogopslag zien en gebruiken, niet in de problemen raken als ze iets proberen te vinden in een zee van specificaties.
3. Stem en persoonlijkheid
Schrijfstijlrichtlijnen zijn niet zo leuk om aan te denken als andere visuele elementen van een ontwerpgids, maar ze zijn net zo belangrijk.
Een beschrijvende schrijfstijl voor kopiëren kan ook van invloed zijn op de beelden. Het draagt bij aan het type afbeeldingen dat u wilt gebruiken en zelfs aan elementen als kleur en type. Al deze items gaan samen om een algemene persoonlijkheid voor het merk te creëren.
Het is hoe de buitenwereld je zal identificeren.
Wat meer is, is dat een sterke stem en persoonlijkheid ook deel wordt van de visuele identiteit. Een goede persoonlijkheid wordt weergegeven in ontwerpelementen, omdat gebruikers bijna ontwerpelementen kunnen identificeren, zelfs buiten de inhoud van de rest van het merk. (Denk Coca-Cola rood aan of het kenmerkende lettertype van Disney.)
4. SEO-trefwoorden
Zoekmachineoptimalisatie is misschien wel een van de meest besproken en minst leuke onderdelen van website-ontwerp. Denk aan vroege en vaak over zoekwoorden.
Neem ze op in de manier waarop u over het merk spreekt, in beschrijvende taal over het ontwerp en plaats een lijst met de topzoekwoorden in de ontwerphandleiding zelf.
Urban Outfitters heeft een goed ontworpen (en leuke) zoekwoordenlijst in de merkgids. Hoewel het kledingmerk veel verschillende zoekwoorden gebruikt, zijn de belangrijkste woorden gemarkeerd per kleur, zodat u ze meteen kunt zien.
Een lijst met trefwoorden zoals deze brengt de woorden die u wilt zeggen tot de kern van uw verstand, elke keer dat u ze ziet. De meeste mensen die een kopie schrijven, zullen je vertellen dat wanneer je een woord in een bepaalde context ziet of erover nadenkt, het in je hoofd blijft steken. Dat is precies wat de SEO-trefwoordenlijst moet doen.
Ontwerpelementen moeten te allen tijde in verband worden gebracht met deze zoekwoorden om die inhoud te relateren aan het hele ontwerp van de website.
5. Patroon- en elementstijlen
Met zoveel verschillende mediums online (en niet te vergeten bedrijven die ook gedrukte elementen ontwerpen), is het belangrijk om handleidingen voor alle mogelijke toepassingen te hebben.
Dit geldt voor stilstaande en geanimeerde versies van logo's, kleurenpaletten, patronen en zelfs ontwerpelementen zoals formuliervelden en navigatie.
Uw ontwerpboek moet een sectie bevatten die aan deze elementen is gewijd. En als u wilt dat het team echt van u houdt, maak dan een gids met patroon- en elementenstijl op een online locatie, zodat gebruikers eenvoudig elementen kunnen kopiëren en plakken voor snel gebruik.
6. Codefragmenten
Elke website-ontwerpgids moet veel veelgebruikte codefragmenten bevatten. Van knoppen tot kleine animaties tot schuifeffecten, deze kleine stukjes code voegen uren toe aan uw dagelijkse workflow door de noodzaak om met elk nieuw element handmatig specificaties in te voeren, te elimineren.
Dit werkt voor alles van blogposts: voeg een codeblok toe voor afbeeldingen die bloggers gewoon kunnen kopiëren en plakken voor de juiste grootte en bijsnijden naar uitgebreidere gebruikersinterface-effecten.
Firefox bevat informatie over de ontwerpcomponenten in de ontwerpgids voor het recentelijk herziene merk- en logogebruik. Zelfs als u geen volledige bibliotheek met codefragmenten aanbiedt, vergeet dan niet om enkele basisinformatie op te nemen, zoals waar H1 tot en met H4 moet worden gebruikt op pagina's binnen het websiteontwerp en hoe u knoppen en afbeeldingen moet stylen.
Conclusie
Het beste deel van een ontwerpgids is dat het geen statisch document hoeft te zijn. Het kan groeien en veranderen terwijl uw merk en visuele identiteit hetzelfde doen.
De meeste ontwerpers - met name ontwerpers van websites - kiezen voor online versies van een ontwerphandleiding, zodat het snel en eenvoudig is om wijzigingen en code en kleurfragmenten aan te brengen. Overweeg een stijlgidspagina toe te voegen aan uw website en vergeet niet om ernaar te verwijzen (en deze regelmatig bij te werken).