Designguider är ett ovärderligt verktyg för att maximera designlagets produktion och för att säkerställa en konsekvent varumärkesidentitet. Vi tittar på sex viktiga komponenter i framgångsrika designguider.

En designguide är mer än bara ett dokument som levereras med en ny webbplats eller varumärkesidentitet. En bra designguide är ett konstverk i sig och har praktisk tillämpning i vardagsdesign. Det visar vad ditt projekt är och strävar efter att vara. Det borde föra in element i design, röst och jämn kod på ett sätt som är hanterbart, användbart och lätt att förstå.

Det börjar med dessa sex designguidenheter som måste finnas i din dokumentation. (Om de inte är, ompröva din guide direkt!)

1. Brandidentitetsexempel

Din designguide ska visa upp din varumärkesidentitet i ett visuellt format som är representativt för hur du vill att designmaterial ska se ut. Det är ett klassexempel på show, berätta inte. (Även om det finns en del som talar i guiden för att gå med de visuella exemplen.)

De bästa exemplen är verkliga fall som exemplifierar exakt vad designstandarderna är avsedda att skildra.

Använd skärmdumpar från din hemsida, mobil hemsida, app eller någon annan plats när designen är bäst.

Vad är trevligt med Älskar att rida design guide är att varje sida i häftet ser ut som webbplatsen, vilket skapar varumärkeskonsistens. Guiden till och med bringar små element i designen i fokus, till exempel den korrekta stilen för appsikoner i en exakt visning.

Det bästa med att använda riktiga exempel i en designguiden är att du inte behöver skapa extra arbete för att visa visuella element. du har redan dem i handen. Dessutom kommer lagmedlemmar att veta att den skriftliga riktlinjen fungerar i praktiken eftersom det finns visuellt bevis.

rida

2. Riktlinjer för design

Allt från färgstickor till typografipaletter, till former och användning av designelement ska beskrivas tydligt.

Varför ser designen ut och fungerar på ett visst sätt? Vad är filosofin bakom den?

Att förklara dessa saker kan hjälpa användarna att tillämpa designstilen mer exakt och konsekvent över olika medier. När det gäller webbdesign, är det en bra idé att inkludera element som kan skilja sig från utskriftsmärkta motsvarigheter och hur de relaterar. Till exempel väljer många designers en annan typografipalett online som efterliknar tryckt varumärke för att maximera användningen av Google Fonts till Typekit för enkel användning.

Var noga med att notera vilka teckensnitt som ersätts om detta ingår i din designstrategi.

När man skisserar designriktlinjerna är specifika när det är viktigt - H1-taggar är alltid 88 poäng eller miniatyrbilder är alltid 200 med 200 pixlar men överför inte onödiga detaljer. Du vill att gruppmedlemmarna ska se informationen på ett ögonblick och använda det, inte bli vägda och försöka hitta något i ett hav av specifikationer.

netflix

3. Röst och personlighet

Riktlinjer för skrivstil är inte så roliga att tänka på som andra visuella element i en designguiden, men de är lika viktiga.

En beskrivande skrivstil för kopia kan också påverka visuella bilder. Det bidrar till den typ av bildspråk du väljer att använda och till och med element som färg och typ. Alla dessa saker går samman för att skapa en övergripande personlighet för varumärket.

Det hur omvärlden kommer att identifiera dig.

Det är dessutom att en stark röst och personlighet blir en del av den visuella identiteten också. En bra personlighet i designelement eftersom användare nästan kan identifiera designelement även utanför innehållet i resten av varumärket. (Tänk Coca-Cola Red eller Disneys signatur typsnitt.)

röst

4. SEO Nyckelord

Sökmotoroptimering kan vara en av de mest pratade och åtminstone roliga delarna av webbdesign. Tänk på sökord tidigt och ofta.

Inkludera dem i det sätt du pratar om varumärket, i beskrivande språk om designen och lägg en lista över de främsta sökorden i designguiden själv.

Urban Outfitters har en väl utformad (och rolig) sökordslista i sin varumärkesguide. Medan klädmärket använder många olika nyckelord markeras de viktigaste orden med färg så att du ser dem direkt.

En sökordslista, som den här, ger de ord du vill säga till sin topp, varje gång du ser dem. De flesta som skriver kopia kommer att berätta att när du ser eller tänker på ett ord i ett visst sammanhang blir det fast i huvudet. Det är precis vad SEO-sökordslistan ska göra.

Designelement ska alltid kopplas till dessa nyckelord, så att innehållet är relaterat till hela webbdesignen.

urban

5. Mönster- och elementstilar

Med så många olika medier online (för att inte tala om företag som även designar tryckta delar) är det viktigt att ha guider för alla möjliga användningsområden.

Detta gäller stillbilder och animerade versioner av logotyper, färgpaletter, mönster och till och med designelement som formfält och navigering.

Din designbok ska ha ett avsnitt som är dedikerat till dessa element. Och om du vill att laget verkligen älskar dig, skapa en mall- och elementstilguide i en online-plats så att användare bara kan kopiera och klistra in element för snabb användning.

Ollo

6. Kodutdrag

Varje webbplats design guide måste innehålla många vanliga koden utdrag. Från knappar till små animeringar till glidande effekter, lägger dessa små bitar av kod timmar till ditt dagliga arbetsflöde genom att eliminera behovet av att manuellt mata in specs med varje nytt element.

Detta fungerar för allt från blogginlägg - lägg till ett kodblock för bilder som bloggare kan bara kopiera och klistra in för rätt storlek och grödor - till mer utarbetade UI-effekter.

Firefox innehåller designkomponentinformation i sin designguide för den nyligen reviderade varumärkes- och logotypanvändningen. Även om du inte tillhandahåller ett fullständigt bibliotek med kodutdrag, kom ihåg att inkludera en del basinformation, t.ex. var du ska använda H1 till H4 på sidor inom webbdesignen och hur du utformar knappar och bilder.

firefox

Slutsats

Det bästa med en designguide är att det inte behöver vara ett statiskt dokument. Det kan växa och förändras eftersom ditt varumärke och visuell identitet gör samma sak.

De flesta designers-webbdesigners, i synnerhet-väljer onlineversioner av en designguide så att det går snabbt och enkelt att göra ändringar och ta tag i kod och färgutdrag. Överväg att lägga till en stilguide sida på din webbplats, och kom ihåg att referera till det (och uppdatera det) ofta.