Share
Att skapa stilguider blir snabbt vanligt för webbdesigners, speciellt när man arbetar med innehåll på tunga platser. Med en webbplatsstylguide kan konstruktörer ställa in och behålla en utseende genom att skapa en uppsättning regler som designen följer. Processen blir flexibel, lätt uppdaterbar och konsekvent.
Under denna handledning kommer jag att visa hur du kan implementera en stilguide på din egen webbplats eller på ditt projekt.
Style guides har funnits ganska länge nu. Även före webens dagar behövde företagen ofta skapa konsekventa och enhetliga visuella för deras varumärke. Detta uppnåddes och uppnås fortfarande genom användningen av varumärkes- eller identitetsriktlinjer. Sådana riktlinjer anges vanligtvis i ett dokument och kan innehålla information som:
Exakt vad som ingår i en varumärkes- / identitetsguide är beroende av företaget. Det kan vara allt från ett enda siddokument till en massivt omfattande dokument som den engelska TV-kanalen, Channel 4s stilguide.
Webstylguider fungerar på samma sätt som varumärkes- / identitetsriktlinjer, den enda skillnaden är att du inte skapar en identitet för ett varumärke utan snarare en identitet för en webbplats. Den här gången är varumärket webbsidan och därför är en stilguide utarbetad för att skapa konsistens och enhet inom en webbdesign.
Jag säger inte att en stil guide ska skrivas för varje webbplats som du är inblandad i, men ibland gör det mycket mening att skapa en.
Det kan till exempel vara en bra idé ...
Det sätt på vilket vi designar webbplatser går för närvarande genom ett skifte. Vi börjar att inse att utformning av webbplatser på en sida vid sidan kan inte vara den lämpliga lösningen under vissa omständigheter. Genom att skapa ett system och en struktur som en stilguide kan vi se den större bilden av hur en webbplats kan passa ihop, vilket gör hela processen med att uppdatera webbplatsen mycket hanterbar.
Nu när du förstår lite mer om en hemsida stilguide, låt oss ta en titt på några exempel.
Förmodligen kan de mest kända stilreglerna för en webbplats hittas i Twitters Bootstrap. Även om det inte är en stilguide för twitter.com, kan en del av dess komponenter hittas på twitter.com och används mycket för Twitters interna applikationer.
Github är ett bra exempel på en webbplats som behöver använda en stilguide. Github har ett team av designers och utvecklare som arbetar med sin produkt och det är därför viktigt att upprätthålla konsistens oavsett vem som arbetar med nya funktioner och avsnitt för webbplatsen.
Om du tittar på den här bilden av MailChimps stilguide får du se olika komponenter från hela MailChimp-webbplatsen. En sak du kanske har märkt är MailChimps användarvänliga mänskliga inställning till den dialog som den använder hela sin webbplats. Detta är konsekvent eftersom Mailchimp har skapat en uppsättning regler som denna tonfall måste följa.
Vad du väljer att inkludera i din stilguide varierar beroende på vilken webbplats du designar för. Till exempel kommer en social nätverkssida att ha olika komponenter än den för en filmgransknings webbplats.
Du kan vara så detaljerad eller så kortfattad som du vill, men ju mer detaljerad du är desto mer enhetlig kommer din design att vara.
När du skapar en stilguide är det viktigt att inkludera alla situationer som ett element eller en komponent kan hitta sig i. Du bör till exempel överväga olika tillstånd för knappar och ingångar, samt aktuella menyalternativ etc. Dessa ska visas i din. PSD-fil.
Tips: Du kan växla olika visuella tillstånd i Photoshop genom att använda Layer Comps. Ta en titt på vår senaste handledning om ämnet.I det här exemplet ska jag skapa en stilguide för en blogg. Bloggstylguiden kommer att bestå av komponenter - det här är:
Jag ska också använda följande sex färger:
Alla ingångar och knappar kommer att använda en gränserad radie på 5px, medan alla komponent widgets kommer att ha en radie av 0px som gör dem rektangulära i form.
Först och främst, skapa ett nytt dokument arbetsytan. Jag har bestämt mig för att ställa upp mina 580px breda. Detta är en bekväm storlek att arbeta på och representerar en bra storlek för en modulbaserad design.
Jag använder ett rutnät (Visa> Visa> Grid) för att hjälpa mig i min design och hålla allt väl inriktat. Jag har valt att använda ett 20px x 20px rutnät med en indelning varje 10px. Detta kan ändras genom att gå till Inställningar> Guider, galler och skivor.
Du kommer då att se skärmen nedan. Här kan du ändra galleravståndet till vad som helst du väljer, men jag finner att en 20px rutnät med indelningar som är inställda på 2 fungerar bra. Jag har också satt upp några guider på 460px bred på vardera sidan av mitt dokument för att ge mig en hjälpande hand. Utöver detta kan det vara bra att slå på "snap" genom att gå till Visa> Snap. Detta kommer att säkerställa att dina element hamnar vid exakta pixelmätningar och inte vandrar av med stränga subpixelmätningar.
Det första vi ska skapa är författarkomponentmodulen. Sociala nätverk som Twitter har gjort de här författarkorten ganska populära nyligen och jag tyckte att det skulle vara trevligt att använda den som en del av vår hemsidestilguide. På så sätt kan varje författare av vår blogg ha sitt eget författarkort.
Börja med att välja formverktyget och välj en förgrundsfärg av vit. Med detta markerade skapar du en rektangel på 380x250px. När det här har skapats högerklickar du på lagret för den formen och väljer "blandningsalternativ". Blandningsalternativpanelen ska nu dyka upp. Från vänster sida av popupen välj "Stroke" och ge den en slagstorlek på 1px. Färgen vi ska använda är den ljusgråta # e7e2de som tas från vår färgsats.
Välj nu "Yttre glöd" och sätt färgen på den yttre glöden till samma färg men sänka opaciteten på den till 80. Ställ in spridningen av glöden till 100% och storleken på den till 4. Detta ger vår komponent en gränsar till en tjock glöd som är förtäckt som en gräns.
Skiktstilarna som vi just skapat kommer att användas mycket i andra delar vi skapar senare, men här är ett snabbt tips om hur man använder samma lagerformat på något annat element. Om du högerklickar på lagret på det element som vi just har skapat och klickar på "Kopiera lagstilar". Detta kommer att göra exakt vad det står och låter dig klistra in det på något annat lager som du har. För att göra detta klickar du helt enkelt på det lager som du vill lägga till stilen till och välj "klistra in lagstil". Notera detta eftersom vi använder det ganska lite i hela denna tut. Vi hänvisar till denna speciella lagerformat för detta element som "huvudlagerstil".
För författarens avatar, ta ett exempel på ett foto och ändra det till 75px x 75px. Välj sedan verktyget "Elliptical markör" och dra din markör över bilden, från början till vänster till höger ner till höger. Håll skiftet medan du gör detta för att begränsa proportioner och skapa en perfekt cirkel. När du sedan har skapat ett urval över bilden kopierar du det här och klistrar sedan in det i ditt stildokument. Kopiera och klistra in vårt "huvudlagerstil" -element och redigera sedan lagstilarna och ta bort stroke.
För att skapa de tre statistikrutorna, skapa först tre vita rektangelformer som kan delas lika mellan 380px. När du har gjort det här, ta en av dem och öppna panelen för lagerformat igen genom att högerklicka på lagret. Välj sedan "Inre skugga". Se till att "blandningsläget" är inställt på normalt och opacitet till 100%. Ställ vinkeln på '-90' och ändra avståndet till 5px. För färgen, använd vår primära blå färg # a4d4e8. Upprepa sedan den här processen på de andra 2 statlådorna men denna gång ändrar de sina inre skuggfärger till var och en av våra sekundära färger. grön # aee1a3 och röd # f67f77. Lägg sedan till texten för varje statistik. I min har jag valt att visa antalet anhängare, efterföljande och inlägg.
För att lägga till texten och bioen till författaren jag har valt att använda "Droid Sans", tillgänglig som en Google-webbfont.
För den lilla hörnstriangeln till höger på författarkortet skapar du en 50px x 50px kvadrat med vår primära färgblå och väljer sedan polygonal lasso-verktyget. Rita en rak linje längst upp till vänster på torget längst ned till höger och dra sedan runt den vänstra delen av torget. När detta är klart väljer du Layer> Layer Mask> Hide Selection och detta skapar triangeln.
För stjärnan välj "Polygon" formverktyg. Se till att sidorna är inställda på "5" i toppmenyn. Välj sedan den lilla pilen som ligger bredvid ordet "Sidor". Välj stjärna och "Inlämna sidor av" till 50%. Dra sedan en vit stjärna ovanpå triangeln och placera den i högra hörnet av författarkortet.
Blogpostkomponenten skapas på samma sätt som vi skapade huvuddelen av författarkortet ovan.
Jag har sedan lagt till "huvudlagerstil" till detta. 70px x 70px miniatyrbilden är placerad till vänster om detta. Jag har skapat tre olika textstilar; huvudrubriken, datumet och stycketexten. Till höger har jag lagt till en "läs mer" -knapp. Se steg 6 för att skapa knapparna.
För att skapa den faktiska kommentarbubblan skapar du en 316px x 90px rundad rektangel och lägger till "huvudlagerstilen" till detta.
Skapa en 15px x 15px kvadratisk form och rotera den här Redigera> Transformera sökvägen> Rotera, vrid sedan den på 45 grader från alternativmenyn. Välj det faktiska formlagret och gå till Redigera> Kopiera och gå sedan till den stora rundade rektangeln som vi just skapat. Se till att torget är lined upp till vart du vill att spetsen ska gå. Gå sedan till Redigera> Klistra in och detta kommer att sammanfoga de två formerna. Lägg till huvudskiktstilen till detta och det finns talbubblan!
Jag har bestämt mig för att lägga till två postkommentarkomponenter; en är en standardkommentarkomponent och den andra är en författarkommentar. För författarens exempel har jag ändrat stroke som den primära blåfärgen.
Knapparna är relativt lätta att skapa eftersom vi har fastställt några riktlinjer innan vi går in i vår stilguide.
För att skapa en stor knapp välj verktyget "avrundad rektangel". Kontrollera att radien är inställd på '5px' och dra en 125px x 40px primärblå rektangel från alternativfältet. Lägg sedan till den text du vill ha. Duplicera skiktet genom att högerklicka på skiktet och välja "Duplikera skikt". När du har gjort detta byter färg till en av våra sekundära färger. Upprepa denna process för knappen med den andra sekundära färgen. Upprepa också den här processen för de små knapparna, men den här gången gör rektanglarna 30px x 105px och för "call to action button" gör det 374px x 40px.
För svävartillstånden har jag lagt till en subtil gradient genom att lägga till en "övergångsöverlagringslagrets" stil. Ställ in färgläge till "Normal" och opacitet till 10% med gradienten som går från svart till vitt. Detta kommer bara att vara tillräckligt med en ledtråd som en användare har rullat över knappen.
För den grupperade knappsatsen, skapa en rundad rektangel 380px x 30px bred och dela den sedan i fyra lika stora knappar. Du kan göra det antingen genom att dra en 1px penna linje eller genom att klippa ut sektioner med ett 1px rektangulärt markeringsverktyg.
Paginationen skapas på samma sätt som den grupperade knappsats som vi just skapat ovan. Men den här gången, istället för att skapa den i fyra lika stora knappar, skapar tio lika stora kvadratknappar med pilknapparna i båda ändarna lite större. Bilden nedan visar detta. För pilarna har jag använt vissa färdiga former som är specifikt för webbdesignpilar.
Nu borde du ha insett hur lätt vi gör livet för oss själva genom att upprepa många element och stilar. Det stora med detta är att det skapar konsekvens i vår design.
Inmatningarna och textområdena för den här uppsättningen skapas med de metoder som vi använde tidigare. För ingångarna rita en 380px x 40px rundad rektangel och använd strokefärgen. Utöka textområdets höjd lite till ca 90 px. För inriktningen på elementen har jag använt vår "huvudlagerstil" och lagt till ett extra element för fel- och succémeddelanden.
Det är upp till dig hur många element du vill skapa för din stilguide. Du kommer att känna till kraven på webbplatsen du jobbar med och kommer att vara medveten om vad du vill och behöver inte för det. Det fantastiska med att skapa en stilguide är att alla element du presenterar i framtiden kommer att ha regler och praxis som måste sitta fast och möjliggöra konsistens inom detta.
Det kommer att skapa förtrogenhet med användarna och möjliggöra en övergripande bättre upplevelse både estetiskt och funktionellt.
Accentsconagua