Dizainerio vadovas, kaip dirbti su stiliaus vadovais ir stiliaus plytelėmis

Sukurti a firminis identitetas nėra lengva užduotis. Tam reikia daug pastangų, bet tai yra ir vienas iš labiausiai naudingų kūrybinių užduočių. Web projektai dažnai sumaišykite prekės ženklą su sąsajos dizainu. Tai gali būti paini, nes abiejose srityse yra daug ką padaryti. Stiliaus vadovai ir stiliaus plytelės yra puikūs žiniatinklio dizainerių ištekliai, ir nors jie skamba panašiai, jie pasiekia dvi skirtingos užduotys.

Šiame pranešime norėčiau įsiskverbti į abi puses ir padengti naudą, kurią galite gauti iš šių kūrybinių objektų. Ne visiems reikės (ar panašių) kurti stiliaus vadovus ar stiliaus plyteles. Bet kiekvienas dizaineris turėtų bent suprasti, kas tai yra, ir kaip jie dirba.

Stiliaus žiniatinklio žinynai

Aš perskaičiau įvairias nuomones apie stiliaus vadovus. Kai kurie sako, kad tai skaitmeniniai maketai, o kiti sako, kad kodo stiliaus vadovai yra naudingiausi.

Bet kokiu atveju, stiliaus vadovo tikslas yra tas pats žiniatinklyje kaip ir bet kuris kitas projektas. Jis apibrėžia nuoseklūs modeliai, UI moduliai ir kūrybinės nuostatos projektavimo procese. Tam tikriems elementams galite gauti labai konkrečius ir tikslius pikselių matavimus, arba galite likti laisvi ir pasiūlyti gaires su vaizdiniais pavyzdžiais.

Nėra vieno teisingo stiliaus vadovo. Vienintelis neteisingas būdas yra sukurti tiesioginį šaltinį negali suprasti kiti.

Tikslas yra sukurti turtą, kuris bus laikykitės laiko bandymo. Turėtų būti atidaryti redagavimui kuriant naujus išteklius. Ji taip pat turėtų būti prieinama visiems, kurie prisijungia prie komandos, kad galėtų lengvai nardyti į gidą.

Stiliaus vadovas turėtų būti taip išsamiai, kaip reikia projektui. Ji paprastai apima pakartotinai naudoti turtą, pvz., tipografija, mygtukai, spalvų swatches, tekstūros ir bendri puslapių elementai.

Neseniai aptarėme gyvenimo stiliaus gido įrankiai tai gali padėti jums sukurti gyvenimo stiliaus vadovus nuo nulio. Šie gyvenimo vadovai yra labiau susiję su „Frontend“ programuotojais, tačiau jie gali būti tokie pat naudingi projektuotojams. Daugiau apie šią temą galite skaityti šiame „Smashing“ žurnale.

Mano absoliutus mėgstamiausias šaltinis yra StyleGuides.io. Ji apima žiniatinklio stiliaus vadovų pagrindai, įskaitant gyvi pavyzdžiai ir atvejų analizė.

MailChimp modelio biblioteka yra vienas iš geriausių pavyzdžių, kuriuos galite rasti „StyleGuides.io“. Tai tiesioginis tiesioginio stiliaus vadovas apibrėžia „MailChimp“ tinklelį, tipografiją ir puslapio elementus.

Sukūrę stiliaus vadovą interneto bendrovei, įprasta įdėti viską internete, bet taip pat galite sukurti vidiniai vadovai, ir laikykite juos vietiniame intranete arba juos privačiai priegloboje už vartotojo prisijungimo puslapio. Kaip prieigą prie stiliaus vadovo, tikrai nesvarbu. Jie visi tarnauja tuo pačiu tikslu, kaip perduoti tam tikras spalvas, modelius ir vaizdinius atitinka interneto projekto temą.

Jei norite sužinoti daugiau apie šią temą, peržiūrėkite kitus stiliaus vadovų įrašus:

• Front-end stiliaus vadovai (24ways.org)
• Sukurkite svetainės stiliaus vadovą (creativebloq.com)
• Kaip sukurti „Perfect Web Design Style“ vadovą (dtelepathy.com)

Padalinimas į stiliaus plyteles

Stilių plytelės yra skirtingas žvėris. Šios plytelės yra kūrybinis turtas, naudojamas ankstyvame kūrimo etape bandydami suspausti konkrečią estetiką.

Stiliaus plytelių svetainę sukūrė Samantha Warren, ir ji turi viską, ką turėtumėte žinoti. Yra jokių konkrečių šablonų stiliaus plytelių projektavimui. Tačiau Samantha pavyzdžiai naudojami antraštės ir pastraipų tipai, nuorodos, modeliai, ir galimas spalvų pasirinkimas kartu su firminis logotipas.

Dirbdami su stiliaus plytelėmis, jūsų tikslas yra pateikti 2-3 skirtingų stilių plyteles klientui arba kūrybiniam direktoriui. Šios plytelės yra išsamesnė nei nuotaikų lenta, dar daug mažiau išsamus nei pilnas maketas.

Plytelės turėtų būti pakankamai detalios, kad būtų suteikta svetainės tapatybė ir nuotaika. Samantha skatina naudojant būdvardžius išsamiai apibūdinti kiekvieną plytelę.

Klientai gali pažiūrėkite įvairias plyteles, ir pasirinkite savo mėgstamus gabalus. Tai taupo jūsų laiką projektuojant, nes klientas jau matė turtą, kuris jiems patinka, todėl yra mažiau galimybių atlikti didelius pakeitimus.

Štai puiki citata iš stiliaus plytelių svetainės:

Lyginant stiliaus plyteles su interjero dizainerio įrankių rinkiniu, yra gana analogiškas. Jūs nenorite įpilti pastangų į pikselių tobulą maketą tik tam, kad klientas suprastų, kad jie nekenčia daugumos spalvų ir šriftų.

Vietoj to naudokite stiliaus plyteles, kad surastumėte bendra tema arba vizuali kalba naudoti visoje svetainėje. Tai gali apimti prekės ženklas / tapatybė bet taip pat gali būti UI funkcijos, pvz., išskleidžiamieji meniu arba CTA mygtukai.

Jūs turėtumėte juos naudoti kaip turtas pradžioje. Kai baigsite visą maketą, tikrai nebėra reikalo nurodyti stiliaus plytelių. Nepaisant to, pradžioje stiliaus plytelės gali būti labai svarbios kūrybiniam procesui taupo dizainerio laiką ir leisti klientui pasirinkti daugybę galimybių.

Jeigu nori įsiskverbti į stiliaus plyteles patikrinkite šiuos susijusius įrašus.

• Stilių plytelės ir kaip jie veikia
• Stilių plytelės: alternatyva pilnam dizainui
• Stilių kūrimas: lengvas požiūris į dizaino kryptį

Stiliaus vadovai ir stiliaus plytelės

Stiliaus vadovų ir stiliaus plytelių skirtumas yra neaiškus, bet aiškus. A stiliaus vadovas yra daug daugiau detalus ir turėtų būti naudojami kaip a nuolatinis informacinis vadovas kūrybinei komandai. A stiliaus plytelės gali būti naudojamas kaip a moodboard į idėjų vizualizavimas sau ar klientui. Jie dažnai naudojami ištirti idėjas, ir kai projektas bus baigtas, jie neturi daug tikslo.

Stilių plytelės dažnai yra apvalesnės aplink kraštus ir naudojamos tik pradiniame kūrybiniame procese. Naudojamas stiliaus vadovas visą projektavimo procesą ir netgi vėliau, kad būtų galima ateityje juos naudoti kitiems dizaineriams, kurie gali dirbti šioje svetainėje.

Abu jų privalumai ir trūkumai. Stilių plytelės yra greitai ir smagu, bet efemeriška gamtoje. Stiliaus vadovai yra kruopščiai ir elgtis kaip vizualinė dokumentacija, bet jie taip pat reikalauja daug darbo.

Taigi, kuris iš jų turėtų būti naudojamas? Tai galiausiai priklauso nuo projekto.

Mažesni projektai pvz., smulkiojo verslo svetainėms geriau dirbti su stiliaus plytelėmis. Viso mažo verslo svetainės stiliaus vadovo kūrimui reikės per daug darbo ir apmokestinamų valandų. Tai tikriausiai nėra verta daugumai klientų.

Tačiau a didelis projektas kaip „NY Times“ pertvarkymas būtų naudingas tiek stiliaus plytelėms, tiek stiliaus vadovams.

Kalbos ir nuotaikos paieška naujas projektas visada yra vertingas procesas. Tai daro stiliaus plyteles puikiai tinka beveik kiekvienam scenarijui.

Taip pat galite gauti nesukuriant nė vieno iš šių turto. Kai kurie dizaineriai eina tiesiai nuo wireframes į išsami maketai. Ir kai kurie klientai net nenori stiliaus vadovo, nes jis nebus naudojamas.

Dirbkite pagal projektą ir nuspręskite, kas geriausiai tinka kiekvienam.

Tiesioginiai pavyzdžiai

Apvyniokime tai padengdami pavyzdžių abiejų stilių vadovų ir stiliaus plytelių. Radau šiuos dizainus naršydamas „Dribbble“ ir manau, kad jie parodo kokybę, kurią norite savo stiliaus vadovuose ar stiliaus plytelėse.

Stiliaus vadovai

Šis neįtikėtinas „Airbnb“ stiliaus vadovas buvo sukurtas Derek Bradley. Tai labai paprasta, bet ji aiškiai iliustruoja pagrindiniai modeliai, spalvos ir puslapio elementai galima rasti projekte.

Čia yra daug didesnis skaitmeninio stiliaus vadovas, sukurtas dizainerio Naoshado Alamo. Šis pavyzdys yra daug labiau organizuotas su spalvų, tipografijos, formų, sąsajos elementų ir kitų UI funkcijų skyriai.

Išsamesnės stiliaus instrukcijos padėtų visus šiuos dizaino elementus internete ir įtraukti kodo fragmentus už kiekvieną.

Dizaineris Cupi Wong sukūrė šį „AfterShip“ vadovą. Tipografija, mygtukai, spalvų pasirinkimas ir bendri puslapių elementai yra kruopščiai parengti ir suskirstyti į skyrius.

Tai taip pat gali būti perkelta į žiniatinklį ir sukurta daug didesnė kaip internetinė nuorodinė dokumentacija.

UI dizaineris Greg Dlubacz dalinosi savo UI stiliaus vadovu interneto projektui. Šis dalykas yra labai didelis. Pilno ekrano peržiūra apima 21 000 pikselių!

Absoliučiai vienas iš geriausių skaitmeninio stiliaus vadovų, kuriuos aš kada nors mačiau. Tai taip pat gali būti perkelta į interneto dokumentacijos puslapį, skirtą komandos nariams.

Stilių plytelės

UI / UX dizaineris Abdus Salam sukūrė šį stiliaus plytelę ekologiško maisto parduotuvės tinklalapiui. Tai labai paprasta plokščio dizaino elementai, kai kurios mažos UI funkcijos, ir a spalvų paletė.

Dizaineris Adrian Cantelmi tikrai išsiskyrė su savo pardavimo būdu. Ji turi spalvų ir tipografiją, bet taip pat apima vektoriaus iliustracijos.

Šie vektoriai padeda apibrėžti prekės ženklą, nuotaiką ir bendrą spalvų schemą svetainėje.

Pasaulio taurės patarėjai pertvarkė savo stiliaus plytelę su labai pagrindinėmis savybėmis. Keletas piktogramų, kai kurių spalvų pasirinkimas, kartu su keliais mygtukais. Paprastumas yra žaidimo pavadinimas.

Jei galite pajusti, ką gali atrodyti svetainėje žvilgsniu tada jūs tai darote teisingai.

Štai įdomus atsisakytų stiliaus plytelių, naudojamų kelionės projektui, pavyzdys. Brennan Gleason dizaineris pateikia tik nedidelį plytelių pavyzdį, tačiau vis tiek galite jaustis dėl svetainės atmosferos.

Galutiniai žodžiai

Jei ieškote internete, rasite daug daugiau pavyzdžių, patarimų ir išteklių pastato stiliaus vadovai ir stiliaus plytelės. Bet tikiuosi, kad šis straipsnis gali būti abiejų dalių gruntas ir sklandžiai suprasti bei kurti šiuos dizaino išteklius.