Designerhåndbok for å jobbe med stilveiledninger og stilfliser
Opprette en merket identitet Det er ingen lett oppgave. Det krever hard innsats, men det er også en av de mest givende kreative oppgaver. Webprosjekter ofte bland merkevarebygging med grensesnittdesign. Dette kan være forvirrende fordi det er så mye å gjøre i begge områder. Stilguider og stil fliser er gode ressurser for webdesignere, og mens de lyder likt, oppnår de to forskjellige oppgaver.
I dette innlegget vil jeg gjerne dykke i begge deler, og dekke fordelene du kan få fra disse kreative eiendelene. Ikke alle trenger (eller liker) å lage stilguider eller stilfliser. Men hver designer burde i det minste forstå hva disse er, og hvordan de jobber.
Stilguider for Internett
Jeg har lest varierende meninger om stilguider. Noen sier at dette er digitale mockups, mens andre sier at kodebaserte stilguider er de mest nyttige.
Uansett er målet med en stilguide det samme for nettet som et annet prosjekt. Det definerer konsistente mønstre, brukergrensesnittmoduler og kreative preferanser brukt i designprosessen. Du kan bli veldig spesifikk og angi pixel-perfekte målinger for visse elementer, eller du kan være løs og gi retningslinjer med visuelle eksempler.
Det er ingen enkel måte å lage en stilguide på. Den eneste feil måten er å skape en ressurs som bare kan ikke forstås av andre.
Målet er å skape en ressurs som vil stå testen av tiden. Det bør være Åpne for redigering hvis nye ressurser er opprettet. Det bør også være tilgjengelig for alle som går med i laget for å dykke rett inn i guiden med letthet.
En stil guide bør være så detaljert som nødvendig for prosjektet. Det inkluderer vanligvis gjenbrukbare eiendeler, for eksempel typografi, knapper, fargestifter, teksturer og vanlige sideelementer.
Vi har nylig dekket levende stil guide verktøy som kan hjelpe deg med å bygge levende stil guider fra bunnen av. Disse levende guider er mer for frontend-utviklere, men de kan være like nyttige for designere. Du kan lese mer om dette emnet i dette Smashing Magazine innlegget.
Min absolutte favorittressurs er StyleGuides.io. Den dekker grunnleggende om stilguider for nettet, gjelder også levende eksempler og casestudier.
MailChimps mønsterbibliotek er et av de beste eksemplene du finner på StyleGuides.io. Det er en online live stil guide som definerer MailChimps rutenett, typografi og sideelementer.
Når du designer en stilguide for et webbedrift, er det vanlig å sette alt på nettet, men du kan også opprette interne guider, og hold dem på et lokalt intranett eller vert dem privat bak en brukerloggingsside. Måten du får tilgang til en stilguide, spiller ingen rolle. De tjener alle samme formål med å formidle spesifikke farger, mønstre og visuelle som match temaet for et webprosjekt.
For å lære mer om emnet, sjekk ut disse andre innleggene på stilguider:
- Front-end Style Guides (24ways.org)
- Lag en nettside stil guide (Creativebloq.com)
- Hvordan lage den perfekte webdesign stil guide (Dtelepathy.com)
Forgrening til stilfliser
Stil fliser er et annet dyr helt og holdent. Disse fliser er kreative eiendeler brukt i den tidlige designfasen når du prøver å spikre ned en bestemt estetikk.
Style Tiles nettsiden ble opprettet av Samantha Warren, og den har alt du kanskje trenger å vite. Det er ingen bestemt mal for å designe en stil flis. Men Samanthas eksempler bruker overskrifter og avsnittstyper, linker, mønstre, og mulige fargevalg sammen med a merket logo.
Når du arbeider med stilfliser, er målet ditt til slutt presentere 2-3 forskjellige stil fliser til klienten eller kreativ direktør. Disse fliser er mer detaljert enn et humørbrett, ennå mye mindre detaljert enn en full mockup.
Fliser skal bare være detaljert nok til å gi en følelse av identitet og stemning på nettstedet. Samantha oppfordrer bruker adjektiver å beskrive hver flis i detalj.
Klienter kan se gjennom de forskjellige fliser, og velg favorittstykkene sine. Dette sparer deg tid når du designer fordi klienten allerede har sett eiendeler de liker, så det er mindre sjanse for kraftige revisjoner.
Her er et godt tilbud fra Style Tiles nettside:
Sammenligning av stilfliser til en interiørdesigners verktøykasse er ganske apt analogi. Du vil ikke helle innsatsen i en piksel-perfekt mockup bare for å få klienten til å innse at de hater de fleste farger og skrifter.
I stedet bruker du stilfliser for å finne en vanlig tema eller visuelt språk å bli brukt over hele nettstedet. Dette kan inkludere branding / identitet men kan også inkludere UI-funksjoner, for eksempel rullegardinmenyer eller CTA-knapper.
Du bør bruke disse som leverbare eiendeler tidlig i prosessen. Når du fullfører en full mockup, er det egentlig ikke nødvendig å referere stilflisen lenger. Likevel i begynnelsen kan stilfliser være avgjørende for den kreative prosessen med sparer designtiden og Iving klienten mange alternativer å velge mellom.
Hvis du vil dykke mer inn i stil fliser sjekk ut disse relaterte innleggene.
- Stil fliser og hvordan de fungerer
- Stil fliser: et alternativ til full design kompos
- Opprette stilfliser: En enkel tilnærming til en designretning
Style Guides vs. Style Tiles
Forskjellen mellom stil guider og stil fliser er vag, men bestemt. EN stilguide er mye mer detaljert og skal brukes som en kontinuerlig referansehåndbok for det kreative laget. EN stil fliser kan brukes som en Humørbrett til plott ideer visuelt for deg selv eller kunden. De er ofte vant til utforske ideer, og når prosjektet er ferdig tjener de ikke mye av et formål.
Stilfliser er ofte mye grovere rundt kantene, og de brukes bare i den tidlige kreative prosessen. En stilguide er ment å bli brukt gjennom hele designprosessen og selv etterpå for fremtidig referanse for andre designere som kan jobbe på nettstedet.
Begge har sine fordeler og ulemper. Stilfliser er rask og morsom, men flyktig i naturen. Stil guider er grundig og oppfører seg som visuell dokumentasjon, men de også krever mye arbeid.
Så hvilken skal du bruke? Det til slutt Avhenger av prosjektet.
Mindre prosjekter som for småbedrifter nettsteder fungerer bedre med stil fliser. Å bygge en hel stil guide for en liten bedrift nettsted ville kreve alt for mye arbeid og fakturerbare timer. Dette er sannsynligvis ikke verdt prisen for de fleste kunder.
Men a stort prosjekt som å omforme NY Times vil ha nytte av både stilfliser og stilguider.
Finne et språk og humør for et nytt prosjekt er alltid en verdifull prosess. Dette er det som gjør stilfliser perfekt for nesten alle scenarier.
Du kan også komme forbi uten å skape en av disse eiendelene. Noen designere går rett fra wireframes til detaljerte mockups. Og noen klienter vil ikke engang ha en stilguide fordi det ikke blir brukt.
Arbeid på per prosjekts basis og avgjøre hva som er best for hver enkelt.
Live eksempler
La oss pakke opp dette ved å dekke eksempler av begge stil guider og stil fliser. Jeg fant disse designene mens du surfer på Dribbble, og jeg tror de eksemplificerer kvaliteten du vil ha i din egen stil guider eller stil fliser.
Stil guider
Denne utrolige Airbnb-stilguiden ble opprettet av Derek Bradley. Det er veldig enkelt, men det illustrerer tydelig hovedmønstre, farger og sideelementer som finnes i designet.
Her er en mye større digital stilguide laget av designer Naoshad Alam. Dette eksemplet er mye mer organisert med seksjoner for farger, typografi, skjemaer, grensesnittelementer og andre brukergrensesnitt.
Mer detaljerte stilguider vil sette alle disse designelementene på nettet, og inkludere kodestykker for hver eneste.
Designer Cupi Wong laget denne veiledningen for AfterShip. Typografi, knapper, fargevalg og vanlige sideelementer er nøye utformet, og organisert sammen i seksjoner.
Dette kan også bli sendt til nettet, og bygget ut mye større som referansedokumentasjon på nettet.
UI-designer Greg Dlubacz delte sin egen brukerveiledning for et webprosjekt. Denne tingen er alvorlig stor. Forhåndsvisning av fullskjerm spenner over 21 000 piksler høyt!
Helt en av de beste digitale stil guider jeg noensinne har sett. Dette kan også sendes til en online dokumentasjonsside for lagmedlemmer som referanse.
Stil fliser
UI / UX designer Abdus Salam laget denne stilflisen til en økologisk matbutikk nettsted. Det er veldig grunnleggende med flate designelementer, noen mindre brukergrensesnitt, og a farge palett.
Designer Adrian Cantelmi gikk virkelig detaljert med sin salgsstilflis. Den har farger og typografi, men inkluderer også vektor illustrasjoner.
Disse vektorene hjelper til definer merkevaren, humøret og det overordnede fargeskjemaet av nettsiden.
World Cup Advisors redesign har sin egen stil flis med svært grunnleggende funksjoner. Noen få ikoner, noen fargevalg, sammen med et par knappedesigner. enkelhet er navnet på spillet.
Hvis du kan få en følelse for hvordan nettstedet kan se ut et øyeblikk så gjør du det riktig.
Her er et morsomt eksempel på en avvist stilflise som brukes til et reiseprosjekt. Designer Brennan Gleason gir bare en liten prøve av flisen, men du kan fortsatt få en følelse for atmosfæren på nettstedet.
Endelige ord
Hvis du søker rundt på nettet, finner du mange flere eksempler, tips og ressurser for byggestil guider og stil fliser. Men jeg håper denne artikkelen kan være en primer på begge sider, og du får flytende forståelse og skape disse designegenskapene.
