Disaineri juhend stiilijuhikute ja stiiliplaatide töötamiseks
A. Loomine kaubamärgiga identiteet pole kerge ülesanne. See nõuab raskeid jõupingutusi, kuid see on ka üks kõige rahuldust loovamaid ülesandeid. Veebiprojektid sageli segage brändi ja liidese disain. See võib olla segane, sest mõlemas valdkonnas on nii palju teha. Stiilijuhised ja stiilis plaadid on suured ressursid veebidisainerite jaoks ja kuigi nad kõlavad sarnaselt, täidavad nad kaks erinevat ülesannet.
Selles postituses tahaksin ma mõlemasse külge sattuda ja katta nendest loomingulistest vahenditest saadavat kasu. Mitte igaühel ei ole vaja (või nagu) luua stiilijuhiseid või stiilis plaate. Kuid iga disainer peaks vähemalt mõistma, mis need on ja kuidas nad töötavad.
Veebi stiili juhendid
Olen lugenud erinevaid arvamusi stiilijuhiste kohta. Mõned ütlevad, et need on digitaalsed makettid, samas kui teised ütlevad, et koodipõhised stiilijuhised on kõige kasulikumad.
Mõlemal juhul on stiilijuhi eesmärk veebis sama mis tahes muu projekti eesmärk. See määratleb järjepidevad mustrid, kasutajaliidese moodulid ja loomingulised eelistused kasutatakse projekteerimisprotsessis. Teatud elementide jaoks on võimalik saada väga spetsiifilisi ja piksel-täiuslikke mõõtmisi või jääda lahti ja pakkuda visuaalsete näidetega juhiseid.
Stiilijuhi tegemiseks ei ole ühtegi õiget viisi. Ainus vale viis on luua lihtsalt ressurss ei saa teised aru saada.
Eesmärgiks on luua vara, mis tahab seista aja katse. See peaks olema redigeerimiseks avatud uute ressursside loomisel. Samuti peaks see olema kättesaadav kõigile, kes liituvad meeskonnaga, et sukelduda otse juhendisse.
Stiilijuhend peaks olema nii üksikasjalik kui vaja projekti jaoks. See hõlmab tavaliselt korduvkasutatavad varad, nagu tüpograafia, nupud, värvitoonid, tekstuurid ja ühised leheküljeelemendid.
Oleme hiljuti kaetud elustiili juhendid mis aitavad teil luua elustiilijuhiseid nullist. Need elamisjuhised on rohkem frontendiarendajatele, kuid need võivad olla nii disainerite jaoks kasulikud. Selle teema kohta saate rohkem lugeda selles Smashing Magazine'i postituses.
Minu absoluutne lemmikressurss on StyleGuides.io. See hõlmab veebi stiilijuhiste alused, kaasa arvatud elavad näited ja juhtumiuuringud.
MailChimp'i mustri raamatukogu on üks parimaid näiteid, mida leiate aadressilt StyleGuides.io. See on online-live stiili juhend määratleb MailChimp'i võrgu, tüpograafia ja leheküljeelemendid.
Kui kujundate veebiettevõtte stiilijuhi, on tavaline, et kõik on veebis, kuid saate ka luua sisemised juhised, ja hoidke neid kohalikus intranetis või võõrustage neid kasutaja sisselogimislehe taga. Stiilijuhile juurdepääsu viis ei ole tegelikult oluline. Neil kõigil on sama eesmärk, et teatavaid värve, mustreid ja visuaale edasi anda sobitada veebiprojekti teema.
Selle teema kohta lisateabe saamiseks vaadake neid teisi stiilijuhiste postitusi:
- Esikülje stiili juhendid (24ways.org)
- Looge veebilehe stiilis juhend (creativebloq.com)
- Kuidas teha Perfect Web Design Style Guide (dtelepathy.com)
Hargnemine stiilis plaatidesse
Stiili plaadid on täiesti erinev metsaline. Need plaadid on loomingulist vara, mida kasutati varases projekteerimisfaasis püüdes konkreetset esteetikat lüüa.
Stiili plaatide veebisait on loodud Samantha Warreni poolt ja sellel on kõik, mida sa peaksid teadma. Seal on mingit konkreetset malli pole stiili plaadi kujundamiseks. Kuid Samantha näiteid kasutatakse pealkirjad ja lõiketüübid, lingid, mustrid, ja võimalikud värvivalikud koos a kaubamärgiga logo.
Stiilplaatidega töötades on teie eesmärk lõpuks esitada 2-3 erinevat stiili plaati kliendile või loovjuhtile. Need plaadid on üksikasjalikum kui meeleolu pardal, veel palju vähem üksikasjalik kui täielik makett.
Plaadid peaksid olema just piisavalt üksikasjalikud, et anda mõnele mõttele veebisaidi identiteet ja meeleolu. Samantha julgustab omadussõnade kasutamine kirjeldada iga plaati üksikasjalikult.
Kliendid saavad vaata läbi erinevate plaatide, ja valige oma lemmikdetailid. See säästab aega projekteerimisel, sest klient on juba näinud vara, mida nad soovivad, nii et on vähem võimalusi kopsakaid parandusi teha.
Siin on suurepärane tsiteerimine stiilis plaatide veebilehelt:
Stiilplaatide võrdlemine sisekujundaja tööriistakomplektiga on täiesti analoogia. Sa ei taha, et pingutataks piksel-täiuslikesse makettidesse ainult selleks, et klient mõistaks, et nad enamikku värve ja fonte vihkavad.
Selle asemel kasutage stiiliplaate a leidmiseks üldine teema või visuaalne keel kasutada kogu saidil. See võib hõlmata branding / identiteet kuid võib hõlmata ka Kasutajaliidese funktsioonid, näiteks rippmenüüd või CTA nupud.
Sa peaksid neid kasutama tarnitavad varad protsessi alguses. Kui olete täieliku maketi lõpule viinud, ei ole stiili plaat enam vaja viidata. Sellegipoolest võivad stiili plaadid alguses olla loomingulise protsessi jaoks otsustava tähtsusega disaineri aja säästmine ja kliendi valimine paljude valikuvõimaluste hulgast.
Kui sa tahad süvenege rohkem stiilis plaatidesse vaadake neid seotud postitusi.
- Stiili plaadid ja kuidas need toimivad
- Stiili plaadid: alternatiiv disainilahendustele
- Stiili plaatide loomine: lihtne lähenemine disaini suunale
Stiilijuhendid stiilis plaatide vastu
Stiilijuhikute ja stiiliplaatide vahe on ebamäärane, kuid kindel. A stiili juhend on palju rohkem üksikasjalik ja seda tuleks kasutada a pidev juhend loomingulise meeskonna jaoks. A stiili plaat saab kasutada kui a moodboard kuni joonistage ideid visuaalselt endale või kliendile. Neid kasutatakse sageli uurida ideid, ja kui projekt on lõpule viidud, ei ole nad enamasti eesmärk.
Stiilplaadid on tihti servade ümber palju karedamad ja neid kasutatakse ainult varases loomingulises protsessis. Kasutada tuleb stiili juhendit kogu projekteerimisprotsessi vältel ja hiljem ka tulevikus teistele disaineritele, kes võivad kohapeal töötada.
Mõlemal on oma eelised ja puudused. Stiili plaadid on kiire ja lõbus, aga efemer looduses. Stiilijuhid on põhjalik ja käituma nagu visuaalne dokumentatsioon, aga nad ka vajavad palju tööd.
Mis siis peaksite kasutama? See lõppkokkuvõttes sõltub projektist.
Väiksemad projektid näiteks väikeettevõtete veebisaitidel töötavad stiilplaadid paremini. Kogu väike stiilijuhi loomine väikeettevõttele vajab liiga palju tööd ja tasulisi tööaegu. See ei ole tõenäoliselt enamiku klientide jaoks väärt.
Kuid a suur projekt nagu NY Timesi ümberkujundamine, oleks kasulik nii stiiliplaadid kui ka stiilijuhid.
Keele ja meeleolu leidmine uue projekti jaoks on alati väärtuslik protsess. See teeb stiili plaadid sobib peaaegu iga stsenaariumi jaoks.
Võite ka saada ei tekita ühtegi neist varadest. Mõned disainerid lähevad otse traatvõrgust kuni üksikasjalikud makettid. Ja mõned kliendid ei taha isegi stiilijuhendit, sest seda ei kasutata.
Töötage projekti alusel ja otsustage, milline neist on parim.
Elavad näited
Pane see üles katmisega näiteid nii stiilijuhid kui ka stiilplaadid. Leidsin need disainilahendused Dribbble'i sirvimise ajal ja ma arvan, et nad näitavad kvaliteeti, mida soovite oma stiilijuhistes või stiilis plaatides..
Stiili juhendid
See uskumatu Airbnb-stiilis juhend on loodud Derek Bradley poolt. See on väga lihtne, kuid see näitab selgelt peamised mustrid, värvid ja lehekülje elemendid disainilahenduses.
Siin on palju suurem digitaalse stiili juhendaja, mille on loonud disainer Naoshad Alam. See näide on palju rohkem organiseeritud koos värvid, tüpograafia, vormid, liidese elemendid ja muud kasutajaliidese funktsioonid.
Üksikasjalikumad stiilijuhised paneksid kõik need kujunduselemendid veebis ja lisada koodilõigud igaühele.
Designer Cupi Wong tegi selle juhendi AfterShipile. Tüpograafia, nupud, värvivalikud ja ühised leheküljeelemendid on hoolikalt koostatud ja jagatud osadeks.
See võib olla ka veebi teisaldatav ja võrgupõhise viitedokumendina palju suurem.
UI disainer Greg Dlubacz jagas oma veebi projekti jaoks oma kasutajaliidese stiili. See asi on väga suur. Täisekraani eelvaade hõlmab 21 000 pikslit!
Absoluutselt üks parimaid digitaalse stiili juhendeid, mida ma kunagi näinud olen. See võib olla teisaldatav ka veebipõhise dokumentatsiooni lehele, millele meeskonna liikmed saavad viidata.
Stiili plaadid
UI / UX disainer Abdus Salam lõi selle stiili plaadi mahepõllumajandusliku toidu poe veebilehele. See on väga lihtne lamedad disainielemendid, mõned väiksemad kasutajaliidese funktsioonid, ja a värvipalett.
Disainer Adrian Cantelmi läks tõesti oma müügi stiiliga plaatide juurde. See sisaldab värve ja tüpograafiat, kuid sisaldab ka vektori illustratsioonid.
Need vektorid aitavad määratleda brändi, meeleolu ja üldise värviskeemi veebisaidi kohta.
Maailma karika nõunike ümberkujundamine sai oma stiiliplaadi väga põhiliste omadustega. Mõned ikoonid, mõned värvivalikud koos paari nupuga kujundusega. Lihtsus on mängu nimi.
Kui võite tunda, mida sait võiks tunduda lühidalt siis teete seda õigesti.
Siin on lõbus näide tagasilükatud stiilis plaatidest, mida kasutatakse reisiprojektis. Brennan Gleasoni disainer pakub ainult väikest plaati, kuid seda saab veel teha tunda veebilehe õhkkonda.
Lõplikud sõnad
Kui otsite veebist ümber, leiate palju rohkem näiteid, nõuandeid ja ressursse hoone stiilijuhised ja stiiliplaadid. Aga ma loodan, et see artikkel võib olla mõlema krundi aluspõhi ja saan sujuvalt mõista ja kujundada neid disainivarasid.
