Måten vi utforme nettsteder er nå inne i et skifte. Vi begynner å innse at å designe websider på en side-by-side basis kan ikke lenger være den riktige løsningen i enkelte tilfeller. Ved å skape et system og struktur slik som en stilguide det tillater oss å se det store bildet av hvordan et nettsted kan passe sammen, noe som gjør hele prosessen med å oppdatere nettstedet mye mer håndterlig.

Nå som du forstår litt mer om et nettsted stil guide, la oss ta en titt på noen eksempler.

Eksempler på Nettstedet stil guider

Twitter Bootstrap

Sannsynligvis den mest kjente stil regler for et nettsted kan bli funnet innen Twitters 'Bootstrap. Selv om det ikke er spesielt en stil guide for twitter.com, kan en rekke av komponentene finnes på twitter.com og brukes mye etter Twitter interne applikasjoner.

Github er Github
en god eksempel på et nettsted som trenger å bruke en stil guide. Github har et team av designere og utviklere som arbeider med sitt produkt, og det er derfor viktig å opprettholde konsistens uansett hvem som jobber med nye funksjoner og seksjoner for området.

MailChimp

Hvis du ser på dette bildet av MailChimp stil guide du vil se ulike komponenter fra hele MailChimp nettside. En ting du kanskje har lagt merke til er MailChimp brukervennlige menneskelig tilnærming til dialog den bruker hele sitt nettsted. Dette er konsistent fordi MailChimp har laget et sett med regler som denne tonen i stemmen må forholde seg til.

Opprette et nettsted Style Guide i Photoshop

Hva du velger å inkludere i din stil guiden vil variere avhengig av området som du utformer for. For eksempel vil et nettsamfunn har ulike komponenter som i en film vurdere området.

Du kan være så detaljert eller så kort som du liker, men desto mer detaljert du er mer enhetlig design vil være .

Når du oppretter en stilguide er det viktig å inkludere alle de situasjoner som et element eller komponent kan finne seg i. For eksempel, bør du vurdere ulike tilstander for knapper og innganger, samt poster dagens meny etc. Disse bør bli demonstrert innenfor PSD fil
. Tips: Du kan veksle ulike visuelle tilstander i Photoshop ved hjelp av lagsammensetninger. . Ta en titt på vår siste tutorial om emnet
Trinn 1: Forberedelse

I dette eksempelet jeg kommer til å skape en stil guide for en blogg. Bloggen stil guide vil bestå av komponenter - disse er:

Forfatter kortet

Blog post

Kommentar

Knapper

paginering

Form elementer

Bord

Jeg er også kommer til å bruke følgende seks farger:

blå # a4d4e8 - Dette vil bli brukt som den primære fargen

green # aee1a3 - Dette vil bli brukt som en sekundær farge

rød # f67f77 - Dette vil bli brukt som en sekundær farge og for feilmeldinger

svart # 474747 - Dette vil bli brukt som en primær tekstfarge

mørk grå # 919191 - Dette vil bli brukt som en sekundær tekstfarge

lys grå # e7e2de - Dette vil bli brukt til skisserer

Alle innganger og knapper vil bruke en border-radius på 5px, mens alle komponent widgets vil ha en ramme radius på 0px gjør dem rektangulær form.

Trinn 2: Sette opp vår Document

For det første oppsettet et nytt dokument arbeidsområde. Jeg har bestemt meg for å sette meg opp på 580px bred. Dette er en behagelig størrelse å jobbe på, og representerer en god størrelse plass til et modulbasert design on

Jeg bruker et rutenett. (View > Show > Grid) for å hjelpe meg i mitt design og holde alt godt justert. Jeg har valgt å bruke en 20px x 20px rutenett med en underavdeling hver 10px. Dette kan endres ved å gå til Innstillinger > Guider, Grid og skiver.

Du vil da se skjermbildet nedenfor. Her kan du endre rutenettet avstanden til uansett hva du velger, men jeg synes at en 20px linjenettet med underavdelinger satt til 2 fungerer godt. Jeg har også satt opp noen guider på 460px bredt på hver side av dokumentet for å gi meg en hjelpende hånd. I tillegg til dette kan det være godt å slå på 'snap' ved å gå til Vis > Snap. Dette vil sikre at elementene ende opp på nøyaktig pixel målinger og ikke vandre av med spredt sub-pixel målinger

Trinn 3:. Forfatteren Component

Det første vi skal å skape er forfatter komponent modulen. Sosiale nettverk som Twitter har gjort disse forfatter kortene ganske populært nylig, og jeg tenkte at det kunne være fint å bruke det som en del av vår nettside stil guide. Denne måten hver forfatteren av bloggen vår kan ha sin egen forfatter kort.

Start med å velge formen verktøyet og velge en forgrunnsfarge hvit. Med denne er valgt, skape et 380x250px rektangel. Når dette har blitt opprettet, høyreklikk på på lag for at formen og velg "Blending Options". Den blending alternativpanelet skal nå dukke opp. Fra venstre sidebar av popup velge 'Stroke "og gi den et strøk størrelsen 1px. Fargen vi skal bruke er den lys grå # e7e2de hentet fra vårt fargesett.

Nå velger 'Outer glow "og sette farge på den ytre glød til samme farge, men senke opacity av det å 80. Sett spredning av gløden til 100% og størrelsen på den til 4. Dette vil gi vår komponent en kant med en tykk glød som er forkledd som en grense.

De lagstiler at vi nettopp har laget kommer til å bli brukt mye i andre elementer vi skaper senere, men her er en rask spiss på hvordan du bruker de samme lagstiler på noe annet element. Hvis du høyreklikker på lag av elementet som vi nettopp har opprettet, og klikk "Kopiere lagstiler '. Dette vil gjøre akkurat det som står og tillater deg å lime den på noen andre laget som du har. For å gjøre dette ganske enkelt høyreklikke på det laget du ønsker å legge stilen til og velg "lime lag stil". Noterer dette som vi skal bruke det ganske mye gjennom hele denne tut. Vi vil referere til denne spesielle lag stil for dette elementet som "hovedlaget stil".

For forfatteren avatar, ta et eksempel på et bilde og endre størrelsen til 75px x 75px. Deretter velger du "Elliptical Marquee" verktøy og dra musepekeren over bildet, fra øverst i venstre hjørne ned til høyre. Hold shift mens du gjør dette for å begrense proporsjoner og skape en perfekt sirkel. Så når du har opprettet et utvalg over bildet, kopier denne og lim den inn i stilen din guide dokumentet. Kopier og lim vår "hovedlaget stil" element og deretter redigere lagstiler og fjerne strøk.

For å lage de tre statistikk bokser, først opprette tre hvite rektangel figurer som kan deles likt mellom 380px. Når du har gjort dette, ta en av dem og åpne opp lagstiler panelet igjen ved å høyreklikke på laget. Velg deretter "Indre skygge". Sørg for at den "Blend Mode" er satt til normal og tettheten til 100%. Still inn vinkelen til "-90" og forandre avstanden til 5PX. For fargen, kan du bruke vår primære blå farge # a4d4e8. Deretter gjentar du prosessen på de andre 2 statistiske bokser, men denne gangen endre sine indre skygge farger til hver av våre sekundære farger; green # aee1a3 og rødt # f67f77. Deretter legger teksten for hver statistikk. I min har jeg valgt å vise antall tilhengere, etter og innlegg.

Hvis du vil legge til tekst og bio av forfatteren jeg har valgt å bruke "Droid Sans", tilgjengelig som en Google web font.

For lite hjørne trekant i øvre høyre hjørne av forfatteren kortet opprette en 50 piksler x 50 piksler torget med vår primære fargen blå, og deretter velge "polygonal lasso verktøyet". Tegn en rett linje fra øverst til venstre på firkanten til høyre og deretter tegne rundt den venstre delen av plassen. Når dette er gjort velger du Layer > Lagmaske > Skjule Utvalg og dette vil skape trekanten.

For stjernen velge 'Polygon' form verktøyet. Kontroller at sidene er satt til '5' i toppmenyen. Deretter velger du den lille pilen som ligger ved siden av ordet "sider". Velg stjerne og 'Innrykk sider av' til 50%. Deretter trekke en hvit stjerne på toppen av trekanten og legg den i øvre høyre hjørne av forfatteren kortet

Trinn 4:. Bloggen Post Component

blogginnlegg komponenten er opprettet samme måte som vi opprettet den viktigste element av forfatteren kortet ovenfor.

Jeg har da lagt 'hovedlaget stil "til dette. Den 70px x 70px miniatyrbildet er plassert til indre venstre for dette. Jeg har laget tre ulike tekststiler; hoved overskrift, dato og avsnittsteksten. Til høyre har jeg lagt til en "les mer" -knappen. Se trinn 6 for å lage knappene

Trinn 5:. Kommentar Component

For å lage selve kommentaren boble skape et 316px x 90px avrundet rektangel og legge til 'hovedlaget stil "til dette.

Lag en 15px x 15px firkantet form og rotere denne Rediger > Transform Sti > Roter, deretter fra alternativmenyen, rotere det ved 45 grader. Velg den faktiske formlag og gå til Edit > Kopier deretter gå til den store avrundet rektangel som vi nettopp har laget. Sørg for at plassen er foret opp dit du vil spissen å gå. Deretter går du til Edit > Lim og dette vil slå sammen de to formene. Legg hovedlaget stil til dette, og det er den snakkeboblen

Jeg har bestemt meg for å legge to post kommentar komponenter!; en å være en standard kommentar komponent og den andre er en forfatter kommentar. For forfatteren eksempel har jeg forandret slaget å være den primære blå farge

Trinn 6:. Knapper

Knappene er relativt enkelt å lage fordi vi etablert noen retningslinjer før du får gå innenfor vår style guide.

For å lage en stor knapp velge 'avrundet rektangel "verktøy. Fra 'alternativer' bar sørge for at radius er satt til '5px "og tegne en 125px x 40px primære blå firkant. Deretter legger teksten du ønsker. Duplisere lag ved å høyreklikke på laget og velge "Duplicate layer". Når du har gjort dette endre farge til en av våre sekundære farger. Gjenta denne prosessen for knappen med den andre sekundærfarge. Også, gjenta denne prosessen for de små knappene, men denne gangen gjør rektanglene 30px x 105px og for "oppfordring til handling knappen 'gjøre det 374px x 40px.

For de hover statene jeg har lagt til en subtil gradient av legge en "gradient overlay" lag stil. Sett fargemodus til "Normal" og opacity til 10% med gradient som går fra svart til hvitt. Dette vil bare være nok et hint om at en bruker har rullet over knappen.

For gruppert knapp sett, lage en avrundet rektangel 380px x 30px bred og deretter dele den inn i fire like store knapper. Du kan gjøre dette enten ved å tegne en 1px blyant linje eller ved å kutte ut deler med en 1px 'rektangulær marquee "verktøy

Trinn 7:. Paginering

paginering er opprettet på en lignende måte å den gruppert knapp sett at vi nettopp opprettet ovenfor. Men denne gangen, i stedet for å lage den i fire like store knapper, lage ti like store firkantede knapper med piltastene på enten avslutte en litt større. Bildet nedenfor viser dette. For de piler jeg har brukt noen pre-laget figurer som er spesielt for webdesign piler

Trinn 8:. Forms

Nå bør du ha innsett hvor enkelt vi gjør livet for oss selv ved å gjenta en rekke elementer og stiler. Det flotte med dette er at det skaper konsistens i våre design.

Inngangene og textareas for dette settet er laget ved hjelp av metodene som vi brukte tidligere. For inngangene tegne et 380px x 40px avrundet rektangel og bruke strøkfargen. Utvide høyden av textarea litt til rundt 90px. For fokus på de elementene jeg har brukt vår "hovedlaget stil" og lagt til en ekstra element for feil- og suksessmeldinger.

Konklusjon

Det er opp til deg hvor mange elementer du vil skape for stilen din guide. Du vil kjenne kravene til nettstedet du jobber med og vil være klar over hva du vil og ikke vil trenge for det. Det flotte med å skape en stil guide er at eventuelle elementer du introdusere i fremtiden vil ha regler og praksis som må være fast til, og vil tillate konsistens innenfor dette.

Det vil skape kjennskap til brukerne og gi for en samlet bedre opplevelse både estetisk og funksjonelt.

Ytterligere Links, Reading og ressurser

Mozillas Style Guide

Vanlige Patterns Bibliotek

Starbucks Style Guide

En samling av Front End stil Guides

Front End stil Guides