Designerens guide till att arbeta med stilguider och stilplattor

Skapa en märkesidentitet Det är ingen lätt uppgift. Det kräver hårt arbete, men det är också en av de mest givande kreativa uppgifterna. Webbprojekt ofta mixa varumärke med gränssnittsdesign. Det kan vara förvirrande eftersom det finns så mycket att göra i båda områdena. Stilguider och stilplattor är bra resurser för webbdesigners, och medan de låter liknar de, uppnår de två olika uppgifter.

I det här inlägget vill jag gräva i båda och täcka de fördelar du kan få från dessa kreativa tillgångar. Inte alla behöver (eller gillar) att skapa stilguider eller stilplattor. Men varje designer borde åtminstone förstå vad dessa är och hur de fungerar.

Stilguider för webben

Jag har läst varierande åsikter om stilguider. Vissa säger att det här är digitala mockups medan andra säger att kodbaserade stilguider är mest användbara.

Hur som helst är målet med en stilguide detsamma för webben som något annat projekt. Det definierar konsekventa mönster, gränssnittsmoduler och kreativa preferenser används i konstruktionsprocessen. Du kan bli väldigt specifik och ställa in pixel-perfekta mätningar för vissa delar, eller du kan vara lös och ge riktlinjer med visuella exempel.

Det finns inget enda rätt sätt att göra en stilguide. Det enda felet är att skapa en resurs som helt enkelt kan inte förstås av andra.

Målet är att skapa en tillgång som ska stå tidtestet. Det borde vara öppna för ändringar om nya resurser skapas. Det ska också vara tillgängligt för alla som går med i laget för att dyka rätt in i guiden med lätthet.

En stil guide bör vara så detaljerad som behövs för projektet. Det innehåller vanligtvis återanvändbara tillgångar, till exempel typografi, knappar, färgstämplar, texturer och vanliga sidelement.

Vi har nyligen täckt livsstil guide verktyg som kan hjälpa dig att bygga levande stilguider från början. Dessa levande guider är mer för frontendutvecklare, men de kan vara lika användbara för designers. Du kan läsa mer om detta ämne i det här Smashing Magazine-inlägget.

Min absoluta favoritresurs är StyleGuides.io. Det täcker grunderna i stilguider för webben, Inklusive levande exempel och fallstudier.

MailChimps mönsterbibliotek är ett av de bästa exemplen på StyleGuides.io. Det är en online live style guide som definierar MailChimps rutnät, typografi och sidelement.

När du utformar en stilguide för ett webbföretag är det vanligt att lägga allt på nätet, men du kan också skapa interna guider, och behåll dem på ett lokalt intranät eller värd dem privat bakom en användarloggningssida. Hur du får tillgång till en stilguide spelar ingen roll. De har alla samma syfte att förmedla specifika färger, mönster och visuella som matcha temat för ett webbprojekt.

För att lära dig mer om ämnet, kolla in dessa andra inlägg på stilguider:

• Front-end Style Guides (24ways.org)
• Skapa en hemsida stil guide (Creativebloq.com)
• Hur man gör en perfekt webbdesign stil guide (Dtelepathy.com)

Förgrena sig till stilplattor

Stilplattor är ett annat djur helt och hållet. Dessa plattor är kreativa tillgångar som används i den tidiga designfasen när man försöker spika ner en viss estetik.

Style Tiles webbplats skapades av Samantha Warren, och den har allt du kanske skulle behöva veta. Det finns ingen specifik mall för att utforma en stilplatta. Men Samanthas exempel använder rubriker och stycke typer, länkar, mönster, och möjliga färgval tillsammans med a märkeslogotyp.

När du arbetar med stilplattor är ditt mål till slut att presentera 2-3 olika stilplattor till kunden eller den kreativa direktören. Dessa plattor är mer detaljerad än en stämningsbräda, än mycket mindre detaljerad än en full mockup.

Kakel bör vara tillräckligt detaljerade nog för att ge en känsla av identitet och humör på webbplatsen. Samantha uppmuntrar använder adjektiv att beskriva varje kakel i detalj.

Klienter kan kolla igenom de olika plattorna, och välj deras favoritbitar. Detta sparar tid när man designar eftersom klienten redan har sett tillgångar som de gillar så finns det mindre chans att göra omfattande ändringar.

Här är ett bra citat från Style Tiles hemsida:

Att jämföra stilplattor till en inredningsdesigners verktygslåda är ganska apt analogi. Du vill inte hälla ansträngningar i en pixel-perfekt mockup bara för att klienten inser att de hatar de flesta färger och teckensnitt.

Använd istället stilplattor för att hitta en vanligt tema eller visuellt språk att användas över hela webbplatsen. Detta kan inkludera branding / identitet men kan också innehålla UI-funktioner, till exempel rullgardinsmenyer eller CTA-knappar.

Du ska använda dessa som leveransbara tillgångar tidigt i processen. När du har slutfört en full mockup, behöver du inte längre hänvisa till stilplattan. Ändå i början kan stilplattor vara avgörande för den kreativa processen av sparar designtiden och förfogar kunden många alternativ att välja mellan.

Om du vill gräva mer i stilplattor kolla in dessa relaterade inlägg.

• Stilplattor och hur de fungerar
• Stilplattor: Ett alternativ till fullständiga designkompis
• Skapa stilplattor: En enkel tillvägagångssätt till en designriktning

Style Guides vs Style Tiles

Skillnaden mellan stilguider och stilplattor är vag men bestämd. en stil guide är mycket mer detaljerad och ska användas som en kontinuerlig referensguide för det kreativa laget. en stil kakel kan användas som en humör bräda till planera idéer visuellt för dig själv eller kunden. De brukar vara vana vid utforska idéer, och när projektet är klart tjänar de inte mycket av ett syfte.

Stilplattor är ofta mycket grova runt kanterna, och de används enbart i den tidiga kreativa processen. En stil guide är tänkt att användas genom hela designprocessen och även efteråt för framtida referens för andra designers som kan arbeta på webbplatsen.

Båda har sina fördelar och nackdelar. Stilplattor är snabbt och roligt, men kortlivad i naturen. Stilguider är grundlig och beter sig som visuell dokumentation, men de också kräver mycket arbete.

Så vilken ska du använda? Det i slutändan beror på projektet.

Mindre projekt som för småföretag webbplatser fungerar bättre med stil kakel. Att bygga en hel stil guide för en liten företags webbplats skulle kräva alltför mycket arbete och fakturerbara timmar. Detta är förmodligen inte värt kostnaden för de flesta kunder.

Men a stort projekt Att omforma NY Times skulle gynna både stilplattor och stilguider.

Hitta ett språk och humör för ett nytt projekt är alltid en värdefull process. Det här är det som gör stilplattor perfekt för nästan alla scenarier.

Du kan också komma åt utan att skapa någon av dessa tillgångar. Vissa designers går direkt från wireframes till detaljerade mockups. Och vissa kunder vill inte ens ha en stilguide eftersom det inte blir vant.

Arbeta per projekt och bestämma vad som är bäst för var och en.

Live-exempel

Låt oss pakka upp det här genom att täcka exempel av både stilguider och stilplattor. Jag hittade dessa mönster medan du surfar Dribbble och jag tror att de exemplifierar den kvalitet du vill ha i dina egna stilguider eller stilplattor.

Style Guides

Den här fantastiska Airbnb-stilguiden skapades av Derek Bradley. Det är väldigt enkelt men det illustrerar tydligt huvudmönster, färger och sidelement som finns i designen.

Här är en mycket större digital stilguide skapad av designern Naoshad Alam. Detta exempel är mycket mer organiserad med sektioner för färger, typografi, former, gränssnittselement och andra användargränssnitt.

Mer detaljerade stilguider skulle lägga alla dessa designelement på webben och Inkludera kodutdrag för var och en.

Designer Cupi Wong gjorde denna guide för AfterShip. Typografi, knappar, färgval och vanliga sidelement är noggrant utformade och organiserade tillsammans i sektioner.

Det här kan också skickas till webben och byggas ut mycket större som referensdokumentation online.

UI-designer Greg Dlubacz delade sin egen UI-stilguide för ett webbprojekt. Det här är allvarligt stort. Fullscreen-förhandsgranskningen sträcker sig 21 000 pixlar hög!

Absolut en av de bästa digitala stilguiderna jag någonsin har sett. Detta kan också skickas till en online dokumentationssida för gruppmedlemmar som referens.

Stilplattor

UI / UX-designer Abdus Salam skapade denna stilplatta för en ekologisk mataffärswebbplats. Det är väldigt grundläggande med platta designelement, några mindre användargränssnitt, och a färgpalett.

Designer Adrian Cantelmi gick verkligen i detalj med sin försäljningsstil. Den har färger och typografi men innehåller också vektor illustrationer.

Dessa vektorer hjälper till definiera varumärket, humöret och det övergripande färgschemat av webbplatsen.

World Cup Advisors redesign har sin egen stilplatta med mycket grundläggande funktioner. Några ikoner, några färgval, tillsammans med ett par knappdesigner. Enkelhet är namnet på spelet.

Om du kan få en känsla för vad webbplatsen kan se ut vid en blick då gör du det rätt.

Här är ett roligt exempel på en avvisad stilplatta som används för ett reseprojekt. Designern Brennan Gleason ger bara ett litet urval av kakel, men du kan fortfarande få en känsla för atmosfären på webbplatsen.

Slutord

Om du söker runt på webben hittar du många fler exempel, tips och resurser för byggstilguider och stilplattor. Men jag hoppas att den här artikeln kan vara en primer på båda och få dig flytande att förstå och skapa dessa designtillgångar.