6 ting å sette i designguiden din akkurat nå
Designguider er et uvurderlig verktøy for å maksimere designteamutgang, og for å sikre en konsistent merkeidentitet. Vi ser på seks viktige komponenter i vellykkede designguider.
En designguide er mer enn bare et dokument som følger med et nytt nettsted eller merkeidentitet. En god designguide er et kunstverk i seg selv og har praktisk anvendelse i daglig designarbeid. Det viser hva prosjektet ditt er og ønsker å være. Det bør bringe elementer av design, stemme og jevn kode sammen på en måte som er håndterlig, brukbar og lett å forstå.
Det starter med disse seks designveiledningselementene som må være i dokumentasjonen. (Hvis de ikke er det, må du revidere din guide med en gang!)
1. Brandidentitetseksempler
Din designguide skal vise frem merkevaren din i et visuelt format som er representativt for hvordan du vil ha designmaterialer til å se. Det er et klasseeksempel på show, ikke fortell. (Selv om det er noen som forteller i veiledningen for å gå med de visuelle eksemplene.)
De beste eksemplene er real-case bruk som eksemplifiserer nøyaktig hva designstandardene er ment å skildre.
Bruk skjermbilder fra hjemmesiden din, mobil hjemmeside, app eller et annet sted når designen er best.
Hva er fint med Elsker å ri design guide er at hver side i heftet ser ut som nettstedet, og skaper merkevarekonsekvens. Guiden til og med bringer små elementer av designet i fokus, for eksempel riktig stil for apps-ikoner i en nøyaktig visning.
Det beste ved å bruke ekte eksempler i en designguide er at du ikke trenger å skape ekstra arbeid for å vise frem visuelle elementer. du har allerede dem i hånden. I tillegg vil lagmedlemmer vite at den skrevne retningslinjen fungerer i praksis fordi det er visuelt bevis.
2. Retningslinjer for design
Alt fra fargestifter til typografipaletter, til former og bruk av designelementer, bør skisseres tydelig.
Hvorfor ser designet ut og fungerer på en bestemt måte? Hva er filosofien bak den?
Å forklare disse tingene kan hjelpe brukere å bruke designstilen mer nøyaktig og konsekvent på tvers av medier. Når det gjelder webdesign, er det en god idé å inkludere elementer som kan være forskjellig fra utskriftsmerkede kolleger og hvordan de relaterer seg. For eksempel velger mange designere en annen typografipalett på nettet som etterligner trykt merkevarebygging for å maksimere bruken av Google Fonts til Typekit for enkel bruk.
Pass på å merke hvilke skrifttyper som er substitusjon dersom dette er en del av designstrategien din.
Når skisserer designretningslinjer være spesifikke når det gjelder - H1-koder er alltid 88 poeng, eller miniatyrbilder er alltid 200 med 200 piksler, men overstyrer ikke unødvendige detaljer. Du vil at teammedlemmer skal se informasjon på et øyeblikk og bruke det, ikke bli veid ned og prøve å finne noe i et sjø av spesifikasjoner.
3. Stemme og personlighet
Retningslinjer for skrivestil er ikke så morsomme å tenke på som andre visuelle elementer i en designguide, men de er like viktige.
En beskrivende skrivestil for kopiering kan også påvirke bildene. Det bidrar til typen bilder du velger å bruke og til og med elementer som farge og type. Alle disse elementene går sammen for å skape en total personlighet for merkevaren.
Det hvordan omverdenen vil identifisere deg.
Dessuten er en sterk stemme og personlighet også en del av den visuelle identiteten. En god personlighet viser i designelementer fordi brukere nesten kan identifisere designelementer selv utenfor innholdet i resten av merkevaren. (Tenk Coca-Cola rød eller Disneys signatur skrifttype.)
4. SEO søkeord
Søkemotoroptimalisering kan være en av de mest snakket om og minst morsomme deler av webdesign. Tenk på søkeord tidlig og ofte.
Ta med dem på samme måte som du snakker om merkevaren, i beskrivende språk om designet og sett en liste over de øverste søkeordene i selve designguiden.
Urban Outfitters har en godt designet (og morsom) søkeordliste i sin merkevareguide. Mens klærmerket bruker mange forskjellige søkeord, er de viktigste ordene uthevet av farge, slik at du ser dem med en gang.
En søkeordliste som dette bringer ordene du vil si til topphodet, hver gang du ser dem. De fleste som skriver kopi, forteller deg at når du ser eller tenker på et ord i en bestemt sammenheng, blir det fast i hodet ditt. Det er akkurat det SEO-søkeordlisten skal gjøre.
Designelementer skal til enhver tid korrelere til disse søkeordene, slik at innholdet er relatert gjennom webdesign.
5. Mønster og element stiler
Med så mange forskjellige medier online (for ikke å nevne selskaper som også designer trykte elementer), er det viktig å ha guider for alle mulige bruksområder.
Dette gjelder stillbilder og animerte versjoner av logoer, fargepaletter, mønstre og til og med designelementer som skjemafelt og navigasjon.
Din design bok skal ha en seksjon dedikert til disse elementene. Og hvis du vil at laget virkelig skal elske deg, kan du lage et mønster- og elementstilguide i en online-plassering, slik at brukerne bare kan kopiere og lime inn elementer for rask bruk.
6. Kodeutdrag
Hver nettside design guide må inkludere mange vanlige brukte kodestykker. Fra knapper til små animasjoner til skyveffekter, legger disse små kodene til timer i den daglige arbeidsflyten din ved å eliminere behovet for å taste inn spesifikasjoner manuelt med hvert nytt element.
Dette fungerer for alt fra blogginnlegg-legg til en kodeblokk for bilder som bloggere kan bare kopiere og lime inn for riktig størrelse og beskjære til mer utdybte brukergrensesnitt.
Firefox inneholder designkomponentinformasjon i sin designguide for den nylig reviderte merkevaren og logoen. Selv om du ikke gir et fullt bibliotek med kodestykker, må du huske å inkludere noen grunnleggende informasjon, for eksempel hvor du skal bruke H1 til H4 på sider i webdesignet og hvordan du stiler knapper og bilder.
Konklusjon
Den beste delen om en designguide er at den ikke trenger å være et statisk dokument. Det kan vokse og endres ettersom merkevaren din og visuell identitet gjør det samme.
De fleste designere, spesielt designere, velger for onlineversjoner av en designguide, slik at det gjøres raskt og enkelt å gjøre endringer og ta tak i koden og fargebuttene. Vurder å legge til en stilveiledningsside på nettstedet ditt, og husk å referere til det (og oppdatere det) ofte.