Share
Å lage stilguider er raskt blitt vanlig praksis for webdesignere, spesielt når de arbeider med innholdsrike nettsteder. Med en nettside stil guide, designere er i stand til å sette og vedlikeholde et utseende og følelse ved å lage et sett av regler som designet følger. Prosessen blir fleksibel, lett oppdaterbar og konsistent.
Under denne opplæringen skal jeg demonstrere hvordan du kan implementere en stilguide i ditt eget nettsted eller prosjekt.
Stil guider har eksistert for en stund nå. Selv før dagene på nettet måtte selskapene ofte lage konsekvente og enhetlige visualer for deres merkevare. Dette ble og fremdeles oppnås ved bruk av merk- eller identitetsretningslinjer. Slike retningslinjer er vanligvis angitt i et dokument og kan inneholde informasjon som:
Nøyaktig hva som finnes i en merkevare / identitetsguide er avhengig av selskapet. Det kan være alt fra et enkelt sidedokument, helt til et massivt omfattende dokument som den engelske TV-kanalen, Channel 4s stilguide.
Webstylistikker fungerer på samme måte som merket / identitetsretningslinjer, den eneste forskjellen er at du ikke lager en identitet for et merke, men heller en identitet for et nettsted. Denne gangen er merket nettstedet, og som sådan er en stilguide utarbeidet for å skape konsistens og enhet innenfor et nettsteds design.
Jeg sier ikke at en stilguide skal skrives for hver Nettsted som du er involvert i, men noen ganger gjør det mye fornuftig å skape en.
For eksempel kan det være en god ide ...
Måten vi designer nettsteder på, går for tiden gjennom et skifte. Vi begynner å innse at utforming av nettsteder på en side ved side ikke lenger kan være den rette løsningen under noen omstendigheter. Ved å lage et system og en struktur som en stilguide, kan vi se det større bildet av hvordan et nettsted kan passe sammen, noe som gjør hele prosessen med å oppdatere nettstedet mye mer overkommelig.
Nå som du forstår litt mer om en nettside stilguide, la oss ta en titt på noen eksempler.
Sannsynligvis er de mest kjente stilregler for et nettsted funnet i Twitters Bootstrap. Selv om det ikke er spesifikt en stilguide for twitter.com, kan en rekke komponenter finnes på twitter.com og brukes mye til Twitters interne applikasjoner.
Github er et godt eksempel på et nettsted som trenger å bruke en stilguide. Github har et team av designere og utviklere som jobber med sitt produkt, og det er derfor viktig å opprettholde konsistens uansett hvem som jobber med nye funksjoner og seksjoner for nettstedet.
Hvis du ser på dette bildet av MailChimps stilguide, ser du forskjellige komponenter fra MailChimp-nettstedet. En ting du kanskje har lagt merke til, er MailChimps brukervennlige menneskelige tilnærming til dialogen den bruker på hele nettstedet. Dette er konsekvent fordi Mailchimp har opprettet et sett med regler som denne tonen må overholde.
Det du bestemmer deg for å inkludere i din stilguide, varierer avhengig av hvilket nettsted du designer for. For eksempel vil et nettsamfunn for sosiale nettverk ha forskjellige komponenter enn det for et filmvurderingssted.
Du kan være så detaljert eller så kort som du vil, men jo mer detaljert du er, desto mer enhetlig vil ditt design være.
Når du lager en stilguide, er det viktig å inkludere alle situasjoner som et element eller en komponent kan finne seg i. For eksempel bør du vurdere ulike tilstander for knapper og innganger, samt aktuelle menyelementer etc. Disse skal demonstreres i din. PSD-fil.
Tips: Du kan bytte ulike visuelle tilstander i Photoshop ved å bruke Layer Comps. Ta en titt på vår siste opplæring om emnet.I dette eksemplet skal jeg lage en stilguide for en blogg. Bloggsstilen vil bestå av komponenter - disse er:
Jeg skal også bruke følgende seks farger:
Alle innganger og knapper vil bruke en grense-radius på 5px, mens alle komponent widgets vil ha en grense radius på 0px slik at de blir rektangulære i form.
For det første, sett opp et nytt dokument arbeidsområde. Jeg har bestemt meg for å sette min opp på 580px bred. Dette er en behagelig størrelse å jobbe med og representerer en god størrelse plass til en modulbasert design.
Jeg bruker et rutenett (Vis> Vis> Rutenett) for å hjelpe meg i mitt design og holde alt godt justert. Jeg har valgt å bruke et 20px x 20px rutenett med en underavdeling hver 10px. Dette kan endres ved å gå til Innstillinger> Guides, Grid og Slices.
Du vil da se skjermen nedenfor. Her kan du endre gridavstanden til det du velger, men jeg finner ut at en 20 px gridline med underavdelinger satt til 2 fungerer bra. Jeg har også satt opp noen guider på 460px bred på hver side av dokumentet for å gi meg en hjelpende hånd. I tillegg til dette kan det være bra å slå på "snap" ved å gå til Vis> Snap. Dette vil sikre at elementene dine ende opp med nøyaktige pixelmålinger og ikke vandre av med svarte underpikselmålinger.
Det første vi skal lage er forfatterkomponentmodulen. Sosiale nettverk som Twitter har gjort disse forfatterkortene ganske populære nylig, og jeg trodde det kunne være fint å bruke det som en del av vår webstedsguide. På denne måten kan hver forfatter av bloggen ha sitt eget forfatterkort.
Start med å velge formverktøyet og velg en forgrunnsfarge av hvit. Med dette valgte, lag et 380x250px rektangel. Når dette er opprettet, høyreklikk på på laget for den formen og velg "blandingsalternativer". Blandingsalternativerpanelet skal nå dukke opp. Fra sidelinjen i popup-vinduet, velg 'Stroke' og gi den en slagstørrelse på 1px. Fargen vi skal bruke er lysgrå # e7e2de hentet fra fargesettet.
Velg nå "Ytre glød" og sett fargen på ytre gløden til samme farge, men senk opaktheten til 80. Still spredningen av gløden til 100% og størrelsen på den til 4. Dette vil gi vår komponent en grenser med en tykk glød som er skjult som en grense.
Lagstilene som vi nettopp har laget, vil bli brukt mye i andre elementer vi lager senere, men her er et raskt tips om hvordan du bruker de samme lagsstilene på et annet element. Hvis du høyreklikker på laget av elementet som vi nettopp har opprettet og klikker på "Kopier lagestiler". Dette vil gjøre akkurat hva det står og lar deg lime det inn på hvilket som helst annet lag du har. For å gjøre dette, høyreklikk bare på laget du vil legge til stilen til, og velg "lim lag stil". Legg merke til dette da vi skal bruke det ganske mye gjennom denne tut. Vi henviser til denne spesielle lagestilen for dette elementet som "hovedlagsstil".
For forfatterens avatar, ta et eksempel på et bilde og endre størrelsen til 75px x 75px. Velg deretter "Elliptical markør" -verktøyet og dra markøren over bildet, fra øverste venstre hjørne ned til nederst til høyre. Hold skift mens du gjør dette for å begrense proporsjoner og skape en perfekt sirkel. Når du har opprettet et valg over bildet, kopierer du dette og limer det inn i stilveiledningsdokumentet. Kopier og lim inn elementet "hovedlagsstil" og rediger deretter lagstilene og fjern slagtaket.
For å opprette de tre statistikk boksene, opprett først tre hvite rektangelformer som kan deles likt mellom 380px. Når du har gjort dette, tar du en av dem og åpner lagspanelet på nytt ved å høyreklikke på laget. Velg deretter 'Innerskygge'. Pass på at blandingsmodus er satt til normal og opasiteten til 100%. Still vinkelen til '-90' og endre avstanden til 5px. For fargen, bruk vår primære blå farge # a4d4e8. Gjenta deretter denne prosessen på de andre 2 stat-boksene, men denne gangen endrer de sine indre skyggefarger til hver av våre sekundære farger; grønn # aee1a3 og rød # f67f77. Legg deretter til teksten for hver statistikk. I meg har jeg valgt å vise antall tilhengere, følgende og innlegg.
For å legge til tekst og biografi av forfatteren, har jeg valgt å bruke "Droid Sans", tilgjengelig som en Google-web skrift.
For den lille hjørnetrekanten øverst til høyre på forfatterkortet oppretter du en 50px x 50px firkant med vår primære farge blå og velg deretter 'polygonal lasso-verktøyet'. Tegn en rett linje fra øverst til venstre på torget nederst til høyre og trekk deretter rundt på venstre side av torget. Når dette er gjort, velg Lag> Lagermask> Skjul utvalg, og dette vil opprette trekanten.
For stjernen velg "Polygon" formverktøyet. Pass på at sidene er satt til '5' i toppmenyen. Deretter velger du den lille pilen som ligger ved siden av ordet 'Sides'. Velg stjerne og 'Indre sider med' til 50%. Deretter tegner du en hvit stjerne på toppen av trekanten og legger den i øverste høyre hjørne av forfatterkortet.
Blogpostkomponenten er opprettet på samme måte som vi opprettet hovedelementet til forfatterkortet ovenfor.
Jeg har da lagt til hovedlagsstilen til dette. 70px x 70px bildet miniatyrbildet er plassert til venstre på dette. Jeg har laget tre forskjellige tekststiler; hovedoverskriften, datoen og avsnittet tekst. Nederst til høyre har jeg lagt til en 'les mer' -knapp. Se trinn 6 for å lage knappene.
For å lage den faktiske kommentarboblen, opprett et 316px x 90px avrundet rektangel og legg til hovedlagsstilen til dette.
Lag en 15px x 15px firkantet form og roter denne Rediger> Transform path> Roter, deretter fra alternativmenyen, roter den med 45 grader. Velg det faktiske formlaget og gå til Rediger> Kopier, og gå til det store avrundede rektangelet som vi nettopp har opprettet. Pass på at torget er lined opp til hvor du vil at spissen skal gå. Deretter går du til Rediger> Lim inn og dette vil slå sammen de to figurene. Legg til hovedlagsstilen til dette, og det er taleboblen!
Jeg har bestemt meg for å legge til to innleggskomponenter; den ene er en standardkommentarkomponent og den andre er en forfatterkommentator. For forfattereksemplet har jeg endret streken for å være den primære blå farge.
Knappene er relativt enkle å lage fordi vi har etablert noen retningslinjer før du går i vår stilguide.
For å opprette en stor knapp velg verktøyet 'avrundet rektangel'. Fra baren 'Options' må du kontrollere at radius er satt til '5px' og tegne et primært blått rektangel på 125px x 40px. Legg deretter til teksten du ønsker. Dupliser laget ved å høyreklikke på laget og velg "Dupliser lag". Når du har gjort dette, endrer fargene til en av våre sekundære farger. Gjenta denne prosessen for knappen med den andre sekundære fargen. Gjenta også denne prosessen for de små knappene, men denne gangen gjør rektanglene 30px x 105px og for 'call to action button' gjør det 374px x 40px.
For hover-statene har jeg lagt til en subtil gradient ved å legge til en "stilientoverlegg" -lagsstil. Still fargemodus til 'Normal' og opaciteten til 10% med gradienten som går fra svart til hvitt. Dette vil bare være nok av et hint som en bruker har rullet over knappen.
For det grupperte knappsettet, opprett et avrundet rektangel 380px x 30px bredt og del det deretter inn i fire like store knapper. Du kan gjøre dette enten ved å tegne en 1px blyant eller ved å kutte ut seksjoner med et 1px 'rektangulært markeringsverktøy'.
Paginasjonen er opprettet på samme måte som det grupperte knappsettet som vi nettopp har opprettet over. Men denne gangen, i stedet for å lage den i fire like store knapper, lager ti like store firkantede knapper med pilknappene på hver ende litt større. Bildet nedenfor viser dette. For pilene har jeg brukt noen ferdiglagte former som er spesielt for webdesignpiler.
Nå skal du ha innsett hvor lett vi gjør livet for oss selv ved å gjenta mange elementer og stiler. Det store med dette er at det skaper konsistens i vårt design.
Inngangene og tekstområdene for dette settet er opprettet ved hjelp av metodene vi brukte tidligere. For inngangene tegne et 380px x 40px avrundet rektangel og bruk slagfargen. Forleng tekstenes høyde litt til rundt 90 px. For fokus på elementene har jeg brukt vår "hovedlagsstil" og lagt til et ekstra element for feil og suksessmeldinger.
Det er opp til deg hvor mange elementer du vil opprette for din stilguide. Du vil kjenne kravene til nettstedet du jobber med, og vil være klar over hva du vil og ikke trenger for det. Den gode tingen om å lage en stilguide er at noen elementer du introduserer i fremtiden vil ha regler og praksiser som trenger å bli sittende fast og vil tillate konsistens i dette.
Det vil skape kjennskap til brukerne og gi en samlet bedre opplevelse både estetisk og funksjonelt.
Accentsconagua