Prekių ženklų dizaino sistemos: nuoseklus dizaino mastelio keitimas
Atskleiskite visą savo prekės ženklo potencialą naudodami keičiamo dydžio dizaino sistemas prekės ženklams. Supaprastinkite savo vizualinį identitetą svetainėje Brandtune.com.
Norite, kad jūsų prekės ženklas išliktų toks pats, net ir sparčiai vystantis. Šiuolaikinė prekės ženklo dizaino sistema tai užtikrina. Ji suteikia vieną vietą visoms jūsų prekės ženklo vizualinėms detalėms, žinutėms ir pojūčiams, kaip juos naudoti visur.
Tai veikia nustatant pagrindinius principus, kas yra atsakingas už ką, stebint sėkmę ir nuolat tobulėjant.
Jūsų dizaino sistema remiasi keturiais pagrindiniais dalykais: pagrindais, žetonais, komponentais ir taisyklėmis. Pagrindai apima spalvas, šriftus, erdvę, išdėstymą ir tai, kaip daiktai juda. Žetonai paverčia šiuos pasirinkimus formatu, kuris veikia visur. Komponentai yra vartotojo sąsajos ir rinkodaros elementai, kuriuos galite naudoti vėl ir vėl.
Griežtos taisyklės ir gairės padeda visiems išlikti tame pačiame kelyje, kai auga jūsų prekės ženklas.
Tokios didelės įmonės kaip „Shopify Polaris“ ir „IBM Carbon“ įrodo, kad šis metodas veikia. Jos pagreitina ir pagerina procesą bei padeda žmonėms prisiminti jūsų prekės ženklą. Naudokite „Figma“ programinei įrangai kurti, o „Storybook“ – dizainui susieti su kodu.
Tai taip pat tinka jūsų CI/CD procesui. Tai leidžia automatizuoti dizaino ir kodo valdymą. Stebėkite svarbius rodiklius, tokius kaip pateikimo į rinką greitis, nuoseklumas ir ar jūsų UX yra patrauklus.
Norite, kad viskas, ką siunčiate, atitiktų jūsų prekės ženklą, be per daug pakartotinių veiksmų. Visa tai duoda realių rezultatų jūsų verslui.
Norite prekės ženklo tapatybės, kuri galėtų augti ir išlikti? Pradėkite nuo tinkamo pavadinimo pasirinkimo. Geriausius domenų vardus Brandtune
Ką apima moderni dizaino sistema, skirta darniam prekės ženklo identitetui
Įmonės auga greičiau, kai sprendimus priimti lengva. Suderinkite savo prekės ženklo branduolį, kad jis padėtų dizaineriams ir inžinieriams. Taip sukuriama bendra kalba. Tai sumažina veltui švaistomas pastangas ir užtikrina, kad viskas atrodytų taip, kaip turėtų.
Pagrindai: spalva, tipografija, tarpai ir tinklelis
Pradėkite nuo spalvų sistemos , kurią lengva skaityti visose platformose. Įtraukite įvairias spalvas. Nepamirškite apsvarstyti skirtingų režimų, tokių kaip šviesus ir tamsus.
Antraščių ir kito teksto šrifto dydžius pasirinkite naudodami skalę. Tai padės užtikrinti, kad jūsų tekstą būtų lengva skaityti bet kuriame įrenginyje. Nepamirškite pasirinkti atsarginio šrifto!
Tarpus darykite reguliarius, naudodami 4 arba 8 pikselių žingsnius. Naudokite tinklelį, kuris keičiasi priklausomai nuo ekrano dydžio. Tai padeda viskam atrodyti tinkamai, kad ir kur tai būtų rodoma.
Daugkartinio naudojimo vartotojo sąsajos komponentai ir šablonai
Kurkite daugkartinio naudojimo elementus, tokius kaip mygtukai ir diagramos. Juose turėtų būti paaiškinta, kaip jie veikia. Žinojimas apie jų ribas yra labai svarbus norint užtikrinti gerą naudotojo patirtį.
Stebėkite, kaip vartotojo sąsajos elementai turėtų veikti kartu. Aiškūs pavyzdžiai padeda visiems. Tai taip pat sumažina atnaujinimo riziką.
Žetonai, skirti mastelio sprendimams koduoti
Sprendimus paverskite dizaino elementais, tokiais kaip spalva ar tarpai. Išsaugokite juos visur tinkančiu formatu. Tokiu būdu atnaujinimai bus paprasti ir niekas nesuges.
Viską sujunkite žetonais, kad išvengtumėte painiavos. Taip dizainas ir kodas sutampa. Tai apsaugo nuo painiavos augant projektui.
Dokumentacija ir valdymas siekiant nuoseklumo
Nuolat atnaujinkite savo projektavimo sistemą internete. Naudokite įrankius, kurie padeda dalytis gairėmis ir pavyzdžiais. Tai apima patarimus dėl prieinamumo ir kaip naudoti kodą.
Sukurkite taisykles, kaip papildyti prekės ženklą. Atsakinga komanda užtikrina aukštą kokybę. Tai padeda sklandžiai plėtoti dizaino sistemą.
Dizaino sistemos prekių ženklams
Jūsų prekės ženklas yra visur: svetainėse, programėlėse, socialinėje žiniasklaidoje, el. laiškuose, vaizdo įrašuose, dėžutėse ir parduotuvėse. „Design Systems For Brands“ suderina šias sritis. Jos sukuria vieningą prekės ženklo tapatybę su bendromis taisyklėmis. Tokiu būdu kiekviena dalis atrodo taip, lyg būtų viena visuma. Komandos dirba greičiau, aiškiau perduodamos užduotis ir atlieka mažiau pakeitimų.
Įsivaizduokite savo prekės ženklą ir produktą kaip vieną visumą. Bendrinkite žetonus ir komponentus, kad vizualinė kalba būtų nuosekli. Ši rinkodaros ir produktų dizaino sistemų vienybė skatina nuoseklumą. Tai padeda jūsų prekės ženklui augti neprarandant savo tapatybės.
Pažvelkite į sėkmingus pavyzdžius, tokius kaip „Spotify Encore“ ir „Airbnb“ dizaino kalbos sistema. Jos naudoja bendras bibliotekas, kad sklandžiai suderintų rinkodaros ir produktų patirtis. Disciplinuota prekės ženklo tapatybės sistema su moduliniu požiūriu leidžia komandoms dirbti tiksliai.
Sukurkite puslapį, kuriame būtų aprašyta jūsų prekės ženklo DNR: jo paskirtis, vertybės, tonas ir išvaizda. Paverskite tai aiškiomis taisyklėmis ir pateikite pavyzdžių. Įtraukite judėjimo taisykles, tinklelio naudojimą ir balsą šalia vartotojo sąsajos komponentų, kad galėtumėte priimti sprendimus. Tai padės jūsų prekės ženklui išlikti nuosekliam, bet lanksčiam skirtingose platformose.
Naudokite „Figma“ logotipams, iliustracijoms, nuotraukoms ir vartotojo sąsajai valdyti vienoje valdymo sistemoje. Siūlykite savo partneriams atsisiunčiamą medžiagą, kad užtikrintumėte nuoseklumą. Su „Design Systems For Brands“ pamatysite, kaip jūsų strategijos tampa realybe ir kasdien atitinka prekės ženklą.
Keičiamo mastelio projektavimo sistemų privalumai rinkodaros ir produktų komandoms
Jūsų verslas juda greičiau ir aiškiau, kai komandos naudoja bendrus standartus. Gerai išvystyta sistema sujungia dizainą ir kodą. Tai padidina rinkodaros greitį ir užtikrina aukštą kokybę. Galite dirbti greitai neaukodami meistriškumo.
Greitas pateikimas į rinką naudojant daugkartinio naudojimo išteklius
Pakartotinis komponentų naudojimas pagreitina procesus. Komandos kuria puslapius ir funkcijas naudodamos nusistovėjusias dalis, o ne pradėdamos iš naujo. „GOV.UK Design System“ ir „IBM Carbon“ rodo, kad naujų dizainų kūrimas sumažėja 30–60 %.
Rinkodaros skyrius per vieną savaitę gali atlikti daugiau testų ir variantų, palyginti su mėnesiu anksčiau. Produktų komandos labiau pasitiki atnaujinimais. Taip yra todėl, kad pakartotinai naudojami ištekliai išsklaido painiavą ir sutrumpina mokymosi kreives.
Nuosekli patirtis visuose kanaluose
Nuoseklumas daro didesnį poveikį. Klientai mėgaujasi sklandžia patirtimi – nuo skelbimų iki programėlių, pasižyminčių pažįstama išvaizda ir veiksmais. Ši sklandi kelionė padidina konversijas ir skatina vartotojus sugrįžti.
Bendri elementai užtikrina, kad tekstas, judesys ir sąsaja išliktų nuoseklūs. Kiekviena sąveika sklandžiau veda prie kitos, todėl patirtis skirtinguose kanaluose tampa aiškesnė.
Sumažinta projektavimo ir inžinerinė skola
Standartizavimas sumažina tiek projektavimo, tiek inžinerines pastangas. Mažiau individualių detalių reiškia mažiau unikalaus stiliaus, tvarkingesnes API ir lengvesnius kokybės patikrinimus.
Iš anksto sukurtos prieinamumo ir pritaikomumo funkcijos sumažina klaidų ir papildomo darbo skaičių. Komandos labiau susitelkia į vertės kūrimą, o ne į problemų sprendimą.
Didesnis prekės ženklo atpažinimas ir prisiminimas
Nuoseklus vaizdas ir judesys padeda atpažinti prekės ženklą . Reguliarūs susidūrimai su suderintomis spalvomis, tipais ir raštais pagerina įsiminimą. Tai buvo pastebėta naudojant „Atlassian“ ir „Salesforce“, įdiegus šias sistemas.
Aiškios taisyklės padeda kiekvienam leidiniui papasakoti jūsų prekės ženklo istoriją. Atpažįstamos detalės didina pasitikėjimą ir padeda jūsų rinkodarai judėti teisinga linkme.
Pamatiniai elementai: prekės ženklo žetonai, kurie suteikia galią masteliui
Jūsų projektavimo sistema auga kartu su duomenimis pagrįstais sprendimais. Pradėkite nuo tokių duomenų kaip JSON schema arba „Tokens Studio for Figma“. Tokiu būdu viskas iš „Figma“ gali būti iš karto perkelta į kodavimą. Visa tai supakuokite žiniatinkliui, „iOS“ ir „Android“, kad pagreitintumėte ir suvienodintumėte teikimą.
Spalvos, tipo ir judesio apibrėžimas kaip žetonai
Pradėkite nuo spalvų: pagrindinių, antrinių, paviršiaus ir teksto. Pridėkite tarpus ir formas, kad viskas derėtų tarpusavyje, kad ir kur būtų. Šriftus įsivaizduokite kaip pagrindines dalis. Atidžiai rinkitės šrifto detales, kad jūsų žodžiai visada atrodytų gerai.
Judesys suteikia gyvybės ir padeda žmonėms prisiminti jūsų prekės ženklą. Nustatykite taisykles, kaip daiktai juda, stebėkite greitį ir įsitikinkite, kad viskas veikia telefonuose. Laikykitės „Apple“ ir „Google“ patarimų, kad tai padarytumėte teisingai.
Semantiniai ir kietojo kodo žetonai
Naudokite lanksčius žetonus tokiems dalykams kaip mygtukų spalvos ar nuorodų tekstai. Tokiu būdu spalvą pakeisti lengva, nežaidžiant su kodu. Fiksuotus žetonus išsaugokite konkretiems poreikiams ir naudokite sparčiuosius klavišus ryšiams rodyti.
Laikykitės geriausios praktikos su dizaino žetonais visur. Tikrinkite spalvas, dažnai testuokite ir stebėkite pakeitimus, kad išvengtumėte netikėtumų. Taip viskas veikia sklandžiai, jūsų dizainui augant.
Pavadinimo konvencijos, padedančios komandoms įsisavinti
Naudokite aiškius žetonų pavadinimus, pvz., color.brand.primary.default. Pridėkite informacijos, pvz., šviesų arba tamsų režimą, kad padėtumėte komandoms visame pasaulyje. Tai palengvins visų darbą kartu nuo pat pradžių.
Pasirinkite pavadinimus, kurie yra prasmingi ir atitinka jūsų projekto stilių. Naudojant nuoseklią dizaino ir kodo kalbą, dirbti kartu tampa lengviau ir klaidų pasitaiko mažiau.
Komponentų bibliotekos, jungiančios dizainą ir kodą
Jūsų komponentų biblioteka sujungia jūsų prekės ženklo viziją su galutiniu produktu. Įsivaizduokite ją kaip patį produktą. Jai reikia aiškaus tikslo, griežtų taisyklių ir įrankių, kurie padėtų jūsų komandai kiekvieną dieną. Priimkite sprendimus, kurie padėtų jūsų darbui sklandžiai augti.
Technologijų rinkinio pasirinkimas vartotojo sąsajos komponentams
Pasirinkite technologiją, kuri tinka jūsų komandai ir platformai. „React“ komponentai su „TypeScript“ siūlo griežtą tipizavimą ir platų įrankių pasirinkimą. Žiniatinklio komponentai veikia su daugeliu sistemų, puikiai tinkančių įvairiems produktams. „Vue“ arba „Svelte“ yra geras pasirinkimas, jei jas jau naudojate.
Naudokite „Storybook“ , jei norite kurti savarankiškai. Tai leidžia dokumentuoti veiksmus, naudoti vaizdinius testus ir suprasti ypatybes. Siekite mažų, aiškių kūrimo rezultatų. Rinkitės paprastą HTML ir CSS, kad vėliau būtų lengva atnaujinti.
„Figma“ komponentų susiejimas su kodu
Užtikrinkite „Figma“ dizaino ir kodo atitikimą. Naudokite tuos pačius pavadinimus ir parinktis. Užsirašykite informaciją apie lizdus, žetonus ir kaip viskas veikia. Aiškiai aprašykite skirtingas būsenas, pvz., kada kažkas spustelėjama ar įkeliama.
Jei įmanoma, perkėlimą padarykite automatizuotą. Naudokite dizaino žetonus , kad būtų lengviau keisti. Prieš užbaigdami, patikrinkite viską „Storybook“ kad įsitikintumėte, jog ji idealiai atitinka dizainą.
Prieinamumas ir reagavimas į komponentus
Nuo pat pradžių pagalvokite apie įtrauktį. Naudokite paprastą HTML, prireikus pridėkite ARIA ir pasiekite pritaikymo neįgaliesiems tikslus. Įsitikinkite, kad klaviatūros naudojimas ir fokusavimas visur veikia gerai. Išbandykite naudodami tokius įrankius kaip „axe-core“ ir „VoiceOver“.
Kurkite atsižvelgdami į responsyvumą. Naudokite kintančius šrifto dydžius, medijos užklausas ir CSS išdėstymus. Nustatykite išmaniuosius lūžio taškus ir dydžius lietimui. Kurkite pritaikomus išdėstymus be papildomų pastangų.
Versijų strategijos saugiam iteravimui
Naudokite centrinę saugyklą, pvz., „Nx“ ar „Turborepo“, ir registrą, pvz., „npm“. Turėkite aiškią versijų, atnaujinimų ir palaikymo nutraukimo sistemą. Pateikite įrankius, kurie padėtų atlikti didelius atnaujinimus.
Palaikykite aukštą kokybę atlikdami CI patikras: kodo standartus, testavimą ir prieinamumą „Storybook“ programoje. Stebėkite, kaip žmonės naudoja jūsų komponentus, kad žinotumėte, ką daryti toliau. Reguliarūs, nedideli atnaujinimai sumažina problemų skaičių.
Dizaino operacijos: valdymo modeliai, kurie palaiko sistemų sveikatą
Jūsų dizaino sistema tampa geresnė, kai vaidmenys yra aiškūs. Valdymas turėtų būti lengvai suprantamas. Turėkite dizaino operacijas, kurios augtų kartu su jūsų verslu. Turite žinoti, kas už ką atsakingas, turėti aiškų darbo eigą ir įsteigti dizaino tarybą . Tai užtikrina, kad visi dirbtų kartu. Tai padeda priimti greitus ir kokybiškus sprendimus.
Komandų vaidmenys ir atsakomybė
Suburkite pagrindinę dizaino, inžinerijos, turinio ir prieinamumo ekspertų komandą. Įtraukite produkto vadovą, kuris prižiūrėtų planą. Turėkite domeno valdytojus tokioms sritims kaip rinkodara ir duomenys. Jie anksti pastebi problemas ir patenkina poreikius.
Įsitikinkite, kad kiekvienas vaidmuo žino savo darbą: tvarkyti užklausas, jas rūšiuoti, pristatyti ir teikti pagalbą. Naudokite ataskaitų suvestines, kad stebėtumėte, kaip gerai viskas pritaikoma. Tai padeda komandai pastebėti problemas ir jas išspręsti.
Įnašo modeliai: centralizuoti, federuoti arba hibridiniai
Pasirinkite valdymo modelį , atitinkantį jūsų dydį. Centralizuotame valdymo modelyje pagrindinė komanda atlieka viską. Federaciniame modelyje skirtingos komandos gali pridėti funkcijų. Dauguma renkasi hibridinį modelį: pagrindinė komanda tvarko pagrindinius dalykus ir kokybę, o kiti ją papildo. Tai atliekama per nustatytą darbo eigą.
Padarykite prisidėjimą lengvą, bet saugų. Naudokite šablonus ir patikras. Prieš pridėdami įsitikinkite, kad viskas atitinka standartus. Teikite mokymus ir palaikymą, kad išvengtumėte klaidų ir sustiprintumėte pasitikėjimą savimi.
Peržiūrėkite ritualus, paslaugų lygio susitarimus ir pokyčių valdymą
Rengkite savaitinius ir mėnesinius susitikimus dizainui ir kodui aptarti. Suburkite suinteresuotąsias šalis, kad susitartumėte dėl prioritetų. Nustatykite aiškų klaidų taisymo ir naujų funkcijų pridėjimo laiką, atsižvelgdami į užduoties dydį.
Naudokite įrankius, kurie padeda valdyti pokyčius augant. Turėkite procesą, kaip pridėti naujų dalių, priimti svarbius sprendimus ir atnaujinti dokumentus. Susiekite apžvalgas su patikrinimais ir bendrinkite atnaujinimus, kad komandos galėtų dirbti greitai ir užtikrintai.
Darbo eigos integravimas: nuo užduoties iki projekto įgyvendinimo
Jūsų verslas gali judėti sparčiau, kai viskas veikia kartu. Sudarykite aiškų planą nuo pradžios iki pabaigos. Tokiu būdu komandos gali dirbti užtikrintai ir išlaikyti aukštą kokybę. Naudodami paprastus veiksmus ir greitus patikrinimus, galite sumažinti poreikį viską kartoti. Tai taip pat padeda užtikrinti, kad viskas judėtų į priekį.
Dizaino žetonai CI/CD vamzdynuose
Įtraukite dizainą į savo kasdienį CI/CD procesą. Laikykite savo dizaino žetonus „Git“ sistemoje. Atlikę pakeitimus, paverskite juos paruoštais naudoti paketais. Tai gali būti skirta CSS, „JavaScript“, „iOS“ ir „Android“. Tada be rūpesčių atnaujinkite savo programas, publikuodami šiuos paketus.
Teikdami užklausą, patikrinkite komponentus ir tai, kaip atrodo dizainas. Naudokite „Storybook“ šiems patikrinimams atlikti, kad anksti pastebėtumėte problemas. Šis metodas užtikrina, kad jūsų dizainas būtų atnaujintas ir sumažintų riziką visuose produktuose.
Turto generavimo ir perdavimo automatizavimas
Naudokite automatizuotą sistemą failams tvarkyti. Piktogramas ir vaizdus paverskite optimizuotais SVG formatais. Tada parenkite vaizdus visiems ekrano dydžiams. Taip pat suglaudindami užtikrinkite, kad jie greitai įkeliami.
Lengvai perkelkite dizainus į kodą ir dokumentus. Prijunkite „Figma“ prie savo kodo. Naudokite „Storybook“, kad įkeltumėte komponentus. Tokios priemonės kaip „Zeplin“ ir „Specify“ užtikrina, kad inžinieriai turėtų viską, ko jiems reikia. Tai padeda pradėti kampanijas nelaukiant.
Įrankiai ir papildiniai, kurie pagerina pritaikymą
Suteikite savo komandai geriausius įrankius idėjoms įgyvendinti. Tam naudokite „Figma“ papildinius. Jie gali padėti su dizaino žetonais, nuosekliu turiniu, spalvų patikrinimais ir komponentų taisymu prieš juos perduodant.
Naudokite „Slack“, pakeitimų žurnalo robotą ir „Jira“, kad visi būtų informuoti. Kai kas nors pasikeičia, visi iš karto sužino. Tai užtikrina jūsų projekto sveikatą, nes visi laikosi aiškių žingsnių ir įpročių.
Matavimas: KPI, įrodantys jūsų projektavimo sistemos vertę
Dizaino sistema turėtų atsipirkti pati. Turėtumėte sekti patikimus KPI , kad įrodytumėte, jog ji verta pastangų. Jie padeda nukreipti, kur investuoti pinigus, ir išlaikyti komandų dėmesį. Pradėkite nuo to, kokia buvo jūsų dabartinė padėtis prieš ją naudojant. Tada kiekvieną ketvirtį patikrinkite, ar pasikeitė jūsų pristatymo greitis, darbo kokybė ir tai, kaip gerai jis atitinka jūsų prekės ženklą.
Sutaupytas laikas ir greičio metrika
Stebėkite, kiek laiko užtrunka pereiti nuo idėjos iki galutinio produkto. Stebėkite, kiek ekranų ar puslapių užbaigiate per kiekvieną sprintą. Taip pat atkreipkite dėmesį, kaip dažnai savo „Figma“ dizainuose ir kode naudojate jau pagamintas dalis. Greitesnis darbas reiškia, kad viskas veikia sklandžiau ir mažiau darbo perduodama vienas kitam.
Sužinokite, kiek laiko sutaupote dizainui ir kodavimui, jei nekursite visko nuo nulio. Susiekite šias santaupas su konkrečiomis dizaino ypatybėmis. Tai parodo, kaip pakartotinis daiktų naudojimas pagreitina darbą.
Defektų mažinimo ir kokybės rodikliai
Stebėkite, kiek klaidų randate kiekvieną kartą ką nors išleisdami. Taip pat patikrinkite, kaip dažnai jūsų kūriniuose nutinka klaidų. Ieškokite problemų, susijusių su svetainės pritaikymu visiems naudojant tokius įrankius kaip „Axe“ ir „Lighthouse“. Atkreipkite dėmesį, ar atnaujinus kai kurias dizaino dalis, viskas išlieka vizualiai tokia pati.
Mažiau klaidų ir rečiau reikalo jas taisyti reiškia, kad atliekate geresnį darbą. Tai rodo, kad tų pačių dalių naudojimas padeda išlaikyti aukštą kokybę.
Prekės ženklo nuoseklumo balai ir UX rezultatai
Patikrinkite, kaip gerai jūsų skirtingi projektai atitinka jūsų dizaino taisykles. Naudokite specialius CSS ir DOM nuskaitymo įrankius, tada palyginkite juos su tuo, ko tikitės. Įvertinkite, kiek nuosekliai jūsų prekės ženklas atrodo žiniatinklyje, programėlėse, el. laiškuose ir skelbimuose. Ieškokite vietų, kur jis nėra tinkamai naudojamas.
Susiekite savo dizaino sistemos naudojimo efektyvumą su tuo, kaip paprasta ja naudotis vartotojams. Pažiūrėkite, kaip sėkmingai vartotojai atlieka užduotis, kiek laiko jos užtrunka ir kiek klaidų jie daro. Taip pat peržiūrėkite, ką vartotojai mano apie tai, naudodamiesi NPS ir kitais standartiniais testais. Tai parodo, ar nuoseklumas pagerina patirtį.
Lyderystės srityje kas tris mėnesius apibendrinkite privalumus: geresni pardavimai, kai dizainas yra nuoseklus, greitesnis produktų pristatymas į rinką ir mažiau perdarymo. Remdamiesi šiais rezultatais, pasirinkite, ties kuo dirbti toliau, ir nuolat parodykite, kaip dizaino sistema atsiperka.
Mastelio keitimas tarp prekių ženklų, antrinių prekių ženklų ir kampanijų
Planuokite augimą naudodami projektavimo sistemą, kuri orientuota į pagrindinius elementus. Sukurkite tvirtą pagrindą su tarpų, spindulio ir tinklelių taisyklėmis. Pridėkite temos sluoksnius spalvoms, tekstui ir judesiui, kad atnaujinimus būtų lengva atlikti.
Kurkite unikalią išvaizdą antriniams prekių ženklams naudodami iš anksto nustatytas temas. Jos padeda nustatyti paveikslėlių ir judesių nuotaiką bei stilių. Tokiu būdu stilių keisti lengva, tačiau pagrindiniai elementai išlieka tie patys. Prekių ženklai gali greitai pritaikyti specifinius elementus, pavyzdžiui, spalvas, skirtingoms sritims.
Norėdami lengvai peržiūrėti skirtingas temas, naudokite tokius įrankius kaip „Figma“. Keiskite kodo nustatymus, kad be vargo perjungtumėte stilius. Tai padeda greitai paleisti naujas kampanijas ar atnaujinimus, išlaikant aktualumą.
Kurdami dizainą, atsižvelgdami į prekės ženklo lankstumą, apribokite pritaikymo galimybes, kad išvengtumėte chaoso. Naudokite dizaino taisykles, kad išlaikytumėte išdėstymą ir naudojimo paprastumą. Tačiau leiskite prekės ženklams parodyti savo individualumą per spalvas, šriftus ir piktogramas. Pateikite aiškias gaires, ką galima koreguoti, o kas paliekama.
Suburkite komandą, kuri užtikrintų, kad visos temos derėtų tarpusavyje. Jei prekių ženklai sujungiami arba keičiasi, sklandžiai juos veskite per visą procesą. Tai užtikrins nuoseklų ir stiprų dizainą visuose jūsų prekių ženkluose, jiems augant.
Pradžia: veiksmų planas, išteklių skyrimas ir diegimas
Pradėkite nuo nedidelės bandomosios programos . Pasirinkite svarbias sritis, tokias kaip pagrindinis puslapis, registracija arba atsiskaitymas. Sukurkite paprastą MVP su pagrindiniais elementais ir aiškiais, trumpais vadovais. Sukurkite 90 dienų projektavimo sistemos planą su tikslais: patikrinti, ką turite, nustatyti taisykles, sukurti komponentus, įtraukti juos į savo darbo eigą, parengti vadovus ir apmokyti komandas. Išlaikykite projektą nedidelį, kad greitai parodytumėte jo naudą ir padėtumėte suplanuoti didesnį diegimą.
Sudarykite reikiamų žmonių ir įrankių planą. Suburkite komandą su skirtingais įgūdžiais: produkto vadovu, dizaino vadovu, vartotojo sąsajos inžinieriumi, pritaikymo neįgaliesiems ekspertu ir rašytoju. Suplanuokite įrankių biudžetą ir savo gidų svetainę, pvz., „Zeroheight“ arba vidinę. Šis planavimas turėtų atitikti jūsų diegimo planą, užtikrinant, kad viskas būtų paruošta, kai jums reikės augti.
Sistemą pristatykite palaipsniui: pradėkite nuo bandomojo projekto, tada pereikite prie daugiau komandų ir galiausiai išskleiskite ją visoje įmonėje. Padėkite komandoms prisitaikyti rengdami mokymus, vadovus ir demonstruodami realius projektus. Stebėkite svarbius rodiklius, tokius kaip sutaupytas laikas, mažiau klaidų ir geresnė prekės ženklo vienybė. Dalinkitės sėkmėmis, kad gautumėte nuolatinį palaikymą. Koreguokite savo planą, kai sistema naudojasi daugiau komandų, pakeiskite senus elementus ir pridėkite naujų dizainų.
Užbaikite tvirtu veiksmų planu: parodykite, kas esate, paspartinkite darbą ir sustiprinkite savo pozicijas rinkoje. Paremkite savo pradžią ar atnaujinimą patraukliu pavadinimu, kuris padės jums augti. Puikių domenų vardų galite rasti svetainėje Brandtune .com.
Norite, kad jūsų prekės ženklas išliktų toks pats, net ir sparčiai vystantis. Šiuolaikinė prekės ženklo dizaino sistema tai užtikrina. Ji suteikia vieną vietą visoms jūsų prekės ženklo vizualinėms detalėms, žinutėms ir pojūčiams, kaip juos naudoti visur.
Tai veikia nustatant pagrindinius principus, kas yra atsakingas už ką, stebint sėkmę ir nuolat tobulėjant.
Jūsų dizaino sistema remiasi keturiais pagrindiniais dalykais: pagrindais, žetonais, komponentais ir taisyklėmis. Pagrindai apima spalvas, šriftus, erdvę, išdėstymą ir tai, kaip daiktai juda. Žetonai paverčia šiuos pasirinkimus formatu, kuris veikia visur. Komponentai yra vartotojo sąsajos ir rinkodaros elementai, kuriuos galite naudoti vėl ir vėl.
Griežtos taisyklės ir gairės padeda visiems išlikti tame pačiame kelyje, kai auga jūsų prekės ženklas.
Tokios didelės įmonės kaip „Shopify Polaris“ ir „IBM Carbon“ įrodo, kad šis metodas veikia. Jos pagreitina ir pagerina procesą bei padeda žmonėms prisiminti jūsų prekės ženklą. Naudokite „Figma“ programinei įrangai kurti, o „Storybook“ – dizainui susieti su kodu.
Tai taip pat tinka jūsų CI/CD procesui. Tai leidžia automatizuoti dizaino ir kodo valdymą. Stebėkite svarbius rodiklius, tokius kaip pateikimo į rinką greitis, nuoseklumas ir ar jūsų UX yra patrauklus.
Norite, kad viskas, ką siunčiate, atitiktų jūsų prekės ženklą, be per daug pakartotinių veiksmų. Visa tai duoda realių rezultatų jūsų verslui.
Norite prekės ženklo tapatybės, kuri galėtų augti ir išlikti? Pradėkite nuo tinkamo pavadinimo pasirinkimo. Geriausius domenų vardus Brandtune
Ką apima moderni dizaino sistema, skirta darniam prekės ženklo identitetui
Įmonės auga greičiau, kai sprendimus priimti lengva. Suderinkite savo prekės ženklo branduolį, kad jis padėtų dizaineriams ir inžinieriams. Taip sukuriama bendra kalba. Tai sumažina veltui švaistomas pastangas ir užtikrina, kad viskas atrodytų taip, kaip turėtų.
Pagrindai: spalva, tipografija, tarpai ir tinklelis
Pradėkite nuo spalvų sistemos , kurią lengva skaityti visose platformose. Įtraukite įvairias spalvas. Nepamirškite apsvarstyti skirtingų režimų, tokių kaip šviesus ir tamsus.
Antraščių ir kito teksto šrifto dydžius pasirinkite naudodami skalę. Tai padės užtikrinti, kad jūsų tekstą būtų lengva skaityti bet kuriame įrenginyje. Nepamirškite pasirinkti atsarginio šrifto!
Tarpus darykite reguliarius, naudodami 4 arba 8 pikselių žingsnius. Naudokite tinklelį, kuris keičiasi priklausomai nuo ekrano dydžio. Tai padeda viskam atrodyti tinkamai, kad ir kur tai būtų rodoma.
Daugkartinio naudojimo vartotojo sąsajos komponentai ir šablonai
Kurkite daugkartinio naudojimo elementus, tokius kaip mygtukai ir diagramos. Juose turėtų būti paaiškinta, kaip jie veikia. Žinojimas apie jų ribas yra labai svarbus norint užtikrinti gerą naudotojo patirtį.
Stebėkite, kaip vartotojo sąsajos elementai turėtų veikti kartu. Aiškūs pavyzdžiai padeda visiems. Tai taip pat sumažina atnaujinimo riziką.
Žetonai, skirti mastelio sprendimams koduoti
Sprendimus paverskite dizaino elementais, tokiais kaip spalva ar tarpai. Išsaugokite juos visur tinkančiu formatu. Tokiu būdu atnaujinimai bus paprasti ir niekas nesuges.
Viską sujunkite žetonais, kad išvengtumėte painiavos. Taip dizainas ir kodas sutampa. Tai apsaugo nuo painiavos augant projektui.
Dokumentacija ir valdymas siekiant nuoseklumo
Nuolat atnaujinkite savo projektavimo sistemą internete. Naudokite įrankius, kurie padeda dalytis gairėmis ir pavyzdžiais. Tai apima patarimus dėl prieinamumo ir kaip naudoti kodą.
Sukurkite taisykles, kaip papildyti prekės ženklą. Atsakinga komanda užtikrina aukštą kokybę. Tai padeda sklandžiai plėtoti dizaino sistemą.
Dizaino sistemos prekių ženklams
Jūsų prekės ženklas yra visur: svetainėse, programėlėse, socialinėje žiniasklaidoje, el. laiškuose, vaizdo įrašuose, dėžutėse ir parduotuvėse. „Design Systems For Brands“ suderina šias sritis. Jos sukuria vieningą prekės ženklo tapatybę su bendromis taisyklėmis. Tokiu būdu kiekviena dalis atrodo taip, lyg būtų viena visuma. Komandos dirba greičiau, aiškiau perduodamos užduotis ir atlieka mažiau pakeitimų.
Įsivaizduokite savo prekės ženklą ir produktą kaip vieną visumą. Bendrinkite žetonus ir komponentus, kad vizualinė kalba būtų nuosekli. Ši rinkodaros ir produktų dizaino sistemų vienybė skatina nuoseklumą. Tai padeda jūsų prekės ženklui augti neprarandant savo tapatybės.
Pažvelkite į sėkmingus pavyzdžius, tokius kaip „Spotify Encore“ ir „Airbnb“ dizaino kalbos sistema. Jos naudoja bendras bibliotekas, kad sklandžiai suderintų rinkodaros ir produktų patirtis. Disciplinuota prekės ženklo tapatybės sistema su moduliniu požiūriu leidžia komandoms dirbti tiksliai.
Sukurkite puslapį, kuriame būtų aprašyta jūsų prekės ženklo DNR: jo paskirtis, vertybės, tonas ir išvaizda. Paverskite tai aiškiomis taisyklėmis ir pateikite pavyzdžių. Įtraukite judėjimo taisykles, tinklelio naudojimą ir balsą šalia vartotojo sąsajos komponentų, kad galėtumėte priimti sprendimus. Tai padės jūsų prekės ženklui išlikti nuosekliam, bet lanksčiam skirtingose platformose.
Naudokite „Figma“ logotipams, iliustracijoms, nuotraukoms ir vartotojo sąsajai valdyti vienoje valdymo sistemoje. Siūlykite savo partneriams atsisiunčiamą medžiagą, kad užtikrintumėte nuoseklumą. Su „Design Systems For Brands“ pamatysite, kaip jūsų strategijos tampa realybe ir kasdien atitinka prekės ženklą.
Keičiamo mastelio projektavimo sistemų privalumai rinkodaros ir produktų komandoms
Jūsų verslas juda greičiau ir aiškiau, kai komandos naudoja bendrus standartus. Gerai išvystyta sistema sujungia dizainą ir kodą. Tai padidina rinkodaros greitį ir užtikrina aukštą kokybę. Galite dirbti greitai neaukodami meistriškumo.
Greitas pateikimas į rinką naudojant daugkartinio naudojimo išteklius
Pakartotinis komponentų naudojimas pagreitina procesus. Komandos kuria puslapius ir funkcijas naudodamos nusistovėjusias dalis, o ne pradėdamos iš naujo. „GOV.UK Design System“ ir „IBM Carbon“ rodo, kad naujų dizainų kūrimas sumažėja 30–60 %.
Rinkodaros skyrius per vieną savaitę gali atlikti daugiau testų ir variantų, palyginti su mėnesiu anksčiau. Produktų komandos labiau pasitiki atnaujinimais. Taip yra todėl, kad pakartotinai naudojami ištekliai išsklaido painiavą ir sutrumpina mokymosi kreives.
Nuosekli patirtis visuose kanaluose
Nuoseklumas daro didesnį poveikį. Klientai mėgaujasi sklandžia patirtimi – nuo skelbimų iki programėlių, pasižyminčių pažįstama išvaizda ir veiksmais. Ši sklandi kelionė padidina konversijas ir skatina vartotojus sugrįžti.
Bendri elementai užtikrina, kad tekstas, judesys ir sąsaja išliktų nuoseklūs. Kiekviena sąveika sklandžiau veda prie kitos, todėl patirtis skirtinguose kanaluose tampa aiškesnė.
Sumažinta projektavimo ir inžinerinė skola
Standartizavimas sumažina tiek projektavimo, tiek inžinerines pastangas. Mažiau individualių detalių reiškia mažiau unikalaus stiliaus, tvarkingesnes API ir lengvesnius kokybės patikrinimus.
Iš anksto sukurtos prieinamumo ir pritaikomumo funkcijos sumažina klaidų ir papildomo darbo skaičių. Komandos labiau susitelkia į vertės kūrimą, o ne į problemų sprendimą.
Didesnis prekės ženklo atpažinimas ir prisiminimas
Nuoseklus vaizdas ir judesys padeda atpažinti prekės ženklą . Reguliarūs susidūrimai su suderintomis spalvomis, tipais ir raštais pagerina įsiminimą. Tai buvo pastebėta naudojant „Atlassian“ ir „Salesforce“, įdiegus šias sistemas.
Aiškios taisyklės padeda kiekvienam leidiniui papasakoti jūsų prekės ženklo istoriją. Atpažįstamos detalės didina pasitikėjimą ir padeda jūsų rinkodarai judėti teisinga linkme.
Pamatiniai elementai: prekės ženklo žetonai, kurie suteikia galią masteliui
Jūsų projektavimo sistema auga kartu su duomenimis pagrįstais sprendimais. Pradėkite nuo tokių duomenų kaip JSON schema arba „Tokens Studio for Figma“. Tokiu būdu viskas iš „Figma“ gali būti iš karto perkelta į kodavimą. Visa tai supakuokite žiniatinkliui, „iOS“ ir „Android“, kad pagreitintumėte ir suvienodintumėte teikimą.
Spalvos, tipo ir judesio apibrėžimas kaip žetonai
Pradėkite nuo spalvų: pagrindinių, antrinių, paviršiaus ir teksto. Pridėkite tarpus ir formas, kad viskas derėtų tarpusavyje, kad ir kur būtų. Šriftus įsivaizduokite kaip pagrindines dalis. Atidžiai rinkitės šrifto detales, kad jūsų žodžiai visada atrodytų gerai.
Judesys suteikia gyvybės ir padeda žmonėms prisiminti jūsų prekės ženklą. Nustatykite taisykles, kaip daiktai juda, stebėkite greitį ir įsitikinkite, kad viskas veikia telefonuose. Laikykitės „Apple“ ir „Google“ patarimų, kad tai padarytumėte teisingai.
Semantiniai ir kietojo kodo žetonai
Naudokite lanksčius žetonus tokiems dalykams kaip mygtukų spalvos ar nuorodų tekstai. Tokiu būdu spalvą pakeisti lengva, nežaidžiant su kodu. Fiksuotus žetonus išsaugokite konkretiems poreikiams ir naudokite sparčiuosius klavišus ryšiams rodyti.
Laikykitės geriausios praktikos su dizaino žetonais visur. Tikrinkite spalvas, dažnai testuokite ir stebėkite pakeitimus, kad išvengtumėte netikėtumų. Taip viskas veikia sklandžiai, jūsų dizainui augant.
Pavadinimo konvencijos, padedančios komandoms įsisavinti
Naudokite aiškius žetonų pavadinimus, pvz., color.brand.primary.default. Pridėkite informacijos, pvz., šviesų arba tamsų režimą, kad padėtumėte komandoms visame pasaulyje. Tai palengvins visų darbą kartu nuo pat pradžių.
Pasirinkite pavadinimus, kurie yra prasmingi ir atitinka jūsų projekto stilių. Naudojant nuoseklią dizaino ir kodo kalbą, dirbti kartu tampa lengviau ir klaidų pasitaiko mažiau.
Komponentų bibliotekos, jungiančios dizainą ir kodą
Jūsų komponentų biblioteka sujungia jūsų prekės ženklo viziją su galutiniu produktu. Įsivaizduokite ją kaip patį produktą. Jai reikia aiškaus tikslo, griežtų taisyklių ir įrankių, kurie padėtų jūsų komandai kiekvieną dieną. Priimkite sprendimus, kurie padėtų jūsų darbui sklandžiai augti.
Technologijų rinkinio pasirinkimas vartotojo sąsajos komponentams
Pasirinkite technologiją, kuri tinka jūsų komandai ir platformai. „React“ komponentai su „TypeScript“ siūlo griežtą tipizavimą ir platų įrankių pasirinkimą. Žiniatinklio komponentai veikia su daugeliu sistemų, puikiai tinkančių įvairiems produktams. „Vue“ arba „Svelte“ yra geras pasirinkimas, jei jas jau naudojate.
Naudokite „Storybook“ , jei norite kurti savarankiškai. Tai leidžia dokumentuoti veiksmus, naudoti vaizdinius testus ir suprasti ypatybes. Siekite mažų, aiškių kūrimo rezultatų. Rinkitės paprastą HTML ir CSS, kad vėliau būtų lengva atnaujinti.
„Figma“ komponentų susiejimas su kodu
Užtikrinkite „Figma“ dizaino ir kodo atitikimą. Naudokite tuos pačius pavadinimus ir parinktis. Užsirašykite informaciją apie lizdus, žetonus ir kaip viskas veikia. Aiškiai aprašykite skirtingas būsenas, pvz., kada kažkas spustelėjama ar įkeliama.
Jei įmanoma, perkėlimą padarykite automatizuotą. Naudokite dizaino žetonus , kad būtų lengviau keisti. Prieš užbaigdami, patikrinkite viską „Storybook“ kad įsitikintumėte, jog ji idealiai atitinka dizainą.
Prieinamumas ir reagavimas į komponentus
Nuo pat pradžių pagalvokite apie įtrauktį. Naudokite paprastą HTML, prireikus pridėkite ARIA ir pasiekite pritaikymo neįgaliesiems tikslus. Įsitikinkite, kad klaviatūros naudojimas ir fokusavimas visur veikia gerai. Išbandykite naudodami tokius įrankius kaip „axe-core“ ir „VoiceOver“.
Kurkite atsižvelgdami į responsyvumą. Naudokite kintančius šrifto dydžius, medijos užklausas ir CSS išdėstymus. Nustatykite išmaniuosius lūžio taškus ir dydžius lietimui. Kurkite pritaikomus išdėstymus be papildomų pastangų.
Versijų strategijos saugiam iteravimui
Naudokite centrinę saugyklą, pvz., „Nx“ ar „Turborepo“, ir registrą, pvz., „npm“. Turėkite aiškią versijų, atnaujinimų ir palaikymo nutraukimo sistemą. Pateikite įrankius, kurie padėtų atlikti didelius atnaujinimus.
Palaikykite aukštą kokybę atlikdami CI patikras: kodo standartus, testavimą ir prieinamumą „Storybook“ programoje. Stebėkite, kaip žmonės naudoja jūsų komponentus, kad žinotumėte, ką daryti toliau. Reguliarūs, nedideli atnaujinimai sumažina problemų skaičių.
Dizaino operacijos: valdymo modeliai, kurie palaiko sistemų sveikatą
Jūsų dizaino sistema tampa geresnė, kai vaidmenys yra aiškūs. Valdymas turėtų būti lengvai suprantamas. Turėkite dizaino operacijas, kurios augtų kartu su jūsų verslu. Turite žinoti, kas už ką atsakingas, turėti aiškų darbo eigą ir įsteigti dizaino tarybą . Tai užtikrina, kad visi dirbtų kartu. Tai padeda priimti greitus ir kokybiškus sprendimus.
Komandų vaidmenys ir atsakomybė
Suburkite pagrindinę dizaino, inžinerijos, turinio ir prieinamumo ekspertų komandą. Įtraukite produkto vadovą, kuris prižiūrėtų planą. Turėkite domeno valdytojus tokioms sritims kaip rinkodara ir duomenys. Jie anksti pastebi problemas ir patenkina poreikius.
Įsitikinkite, kad kiekvienas vaidmuo žino savo darbą: tvarkyti užklausas, jas rūšiuoti, pristatyti ir teikti pagalbą. Naudokite ataskaitų suvestines, kad stebėtumėte, kaip gerai viskas pritaikoma. Tai padeda komandai pastebėti problemas ir jas išspręsti.
Įnašo modeliai: centralizuoti, federuoti arba hibridiniai
Pasirinkite valdymo modelį , atitinkantį jūsų dydį. Centralizuotame valdymo modelyje pagrindinė komanda atlieka viską. Federaciniame modelyje skirtingos komandos gali pridėti funkcijų. Dauguma renkasi hibridinį modelį: pagrindinė komanda tvarko pagrindinius dalykus ir kokybę, o kiti ją papildo. Tai atliekama per nustatytą darbo eigą.
Padarykite prisidėjimą lengvą, bet saugų. Naudokite šablonus ir patikras. Prieš pridėdami įsitikinkite, kad viskas atitinka standartus. Teikite mokymus ir palaikymą, kad išvengtumėte klaidų ir sustiprintumėte pasitikėjimą savimi.
Peržiūrėkite ritualus, paslaugų lygio susitarimus ir pokyčių valdymą
Rengkite savaitinius ir mėnesinius susitikimus dizainui ir kodui aptarti. Suburkite suinteresuotąsias šalis, kad susitartumėte dėl prioritetų. Nustatykite aiškų klaidų taisymo ir naujų funkcijų pridėjimo laiką, atsižvelgdami į užduoties dydį.
Naudokite įrankius, kurie padeda valdyti pokyčius augant. Turėkite procesą, kaip pridėti naujų dalių, priimti svarbius sprendimus ir atnaujinti dokumentus. Susiekite apžvalgas su patikrinimais ir bendrinkite atnaujinimus, kad komandos galėtų dirbti greitai ir užtikrintai.
Darbo eigos integravimas: nuo užduoties iki projekto įgyvendinimo
Jūsų verslas gali judėti sparčiau, kai viskas veikia kartu. Sudarykite aiškų planą nuo pradžios iki pabaigos. Tokiu būdu komandos gali dirbti užtikrintai ir išlaikyti aukštą kokybę. Naudodami paprastus veiksmus ir greitus patikrinimus, galite sumažinti poreikį viską kartoti. Tai taip pat padeda užtikrinti, kad viskas judėtų į priekį.
Dizaino žetonai CI/CD vamzdynuose
Įtraukite dizainą į savo kasdienį CI/CD procesą. Laikykite savo dizaino žetonus „Git“ sistemoje. Atlikę pakeitimus, paverskite juos paruoštais naudoti paketais. Tai gali būti skirta CSS, „JavaScript“, „iOS“ ir „Android“. Tada be rūpesčių atnaujinkite savo programas, publikuodami šiuos paketus.
Teikdami užklausą, patikrinkite komponentus ir tai, kaip atrodo dizainas. Naudokite „Storybook“ šiems patikrinimams atlikti, kad anksti pastebėtumėte problemas. Šis metodas užtikrina, kad jūsų dizainas būtų atnaujintas ir sumažintų riziką visuose produktuose.
Turto generavimo ir perdavimo automatizavimas
Naudokite automatizuotą sistemą failams tvarkyti. Piktogramas ir vaizdus paverskite optimizuotais SVG formatais. Tada parenkite vaizdus visiems ekrano dydžiams. Taip pat suglaudindami užtikrinkite, kad jie greitai įkeliami.
Lengvai perkelkite dizainus į kodą ir dokumentus. Prijunkite „Figma“ prie savo kodo. Naudokite „Storybook“, kad įkeltumėte komponentus. Tokios priemonės kaip „Zeplin“ ir „Specify“ užtikrina, kad inžinieriai turėtų viską, ko jiems reikia. Tai padeda pradėti kampanijas nelaukiant.
Įrankiai ir papildiniai, kurie pagerina pritaikymą
Suteikite savo komandai geriausius įrankius idėjoms įgyvendinti. Tam naudokite „Figma“ papildinius. Jie gali padėti su dizaino žetonais, nuosekliu turiniu, spalvų patikrinimais ir komponentų taisymu prieš juos perduodant.
Naudokite „Slack“, pakeitimų žurnalo robotą ir „Jira“, kad visi būtų informuoti. Kai kas nors pasikeičia, visi iš karto sužino. Tai užtikrina jūsų projekto sveikatą, nes visi laikosi aiškių žingsnių ir įpročių.
Matavimas: KPI, įrodantys jūsų projektavimo sistemos vertę
Dizaino sistema turėtų atsipirkti pati. Turėtumėte sekti patikimus KPI , kad įrodytumėte, jog ji verta pastangų. Jie padeda nukreipti, kur investuoti pinigus, ir išlaikyti komandų dėmesį. Pradėkite nuo to, kokia buvo jūsų dabartinė padėtis prieš ją naudojant. Tada kiekvieną ketvirtį patikrinkite, ar pasikeitė jūsų pristatymo greitis, darbo kokybė ir tai, kaip gerai jis atitinka jūsų prekės ženklą.
Sutaupytas laikas ir greičio metrika
Stebėkite, kiek laiko užtrunka pereiti nuo idėjos iki galutinio produkto. Stebėkite, kiek ekranų ar puslapių užbaigiate per kiekvieną sprintą. Taip pat atkreipkite dėmesį, kaip dažnai savo „Figma“ dizainuose ir kode naudojate jau pagamintas dalis. Greitesnis darbas reiškia, kad viskas veikia sklandžiau ir mažiau darbo perduodama vienas kitam.
Sužinokite, kiek laiko sutaupote dizainui ir kodavimui, jei nekursite visko nuo nulio. Susiekite šias santaupas su konkrečiomis dizaino ypatybėmis. Tai parodo, kaip pakartotinis daiktų naudojimas pagreitina darbą.
Defektų mažinimo ir kokybės rodikliai
Stebėkite, kiek klaidų randate kiekvieną kartą ką nors išleisdami. Taip pat patikrinkite, kaip dažnai jūsų kūriniuose nutinka klaidų. Ieškokite problemų, susijusių su svetainės pritaikymu visiems naudojant tokius įrankius kaip „Axe“ ir „Lighthouse“. Atkreipkite dėmesį, ar atnaujinus kai kurias dizaino dalis, viskas išlieka vizualiai tokia pati.
Mažiau klaidų ir rečiau reikalo jas taisyti reiškia, kad atliekate geresnį darbą. Tai rodo, kad tų pačių dalių naudojimas padeda išlaikyti aukštą kokybę.
Prekės ženklo nuoseklumo balai ir UX rezultatai
Patikrinkite, kaip gerai jūsų skirtingi projektai atitinka jūsų dizaino taisykles. Naudokite specialius CSS ir DOM nuskaitymo įrankius, tada palyginkite juos su tuo, ko tikitės. Įvertinkite, kiek nuosekliai jūsų prekės ženklas atrodo žiniatinklyje, programėlėse, el. laiškuose ir skelbimuose. Ieškokite vietų, kur jis nėra tinkamai naudojamas.
Susiekite savo dizaino sistemos naudojimo efektyvumą su tuo, kaip paprasta ja naudotis vartotojams. Pažiūrėkite, kaip sėkmingai vartotojai atlieka užduotis, kiek laiko jos užtrunka ir kiek klaidų jie daro. Taip pat peržiūrėkite, ką vartotojai mano apie tai, naudodamiesi NPS ir kitais standartiniais testais. Tai parodo, ar nuoseklumas pagerina patirtį.
Lyderystės srityje kas tris mėnesius apibendrinkite privalumus: geresni pardavimai, kai dizainas yra nuoseklus, greitesnis produktų pristatymas į rinką ir mažiau perdarymo. Remdamiesi šiais rezultatais, pasirinkite, ties kuo dirbti toliau, ir nuolat parodykite, kaip dizaino sistema atsiperka.
Mastelio keitimas tarp prekių ženklų, antrinių prekių ženklų ir kampanijų
Planuokite augimą naudodami projektavimo sistemą, kuri orientuota į pagrindinius elementus. Sukurkite tvirtą pagrindą su tarpų, spindulio ir tinklelių taisyklėmis. Pridėkite temos sluoksnius spalvoms, tekstui ir judesiui, kad atnaujinimus būtų lengva atlikti.
Kurkite unikalią išvaizdą antriniams prekių ženklams naudodami iš anksto nustatytas temas. Jos padeda nustatyti paveikslėlių ir judesių nuotaiką bei stilių. Tokiu būdu stilių keisti lengva, tačiau pagrindiniai elementai išlieka tie patys. Prekių ženklai gali greitai pritaikyti specifinius elementus, pavyzdžiui, spalvas, skirtingoms sritims.
Norėdami lengvai peržiūrėti skirtingas temas, naudokite tokius įrankius kaip „Figma“. Keiskite kodo nustatymus, kad be vargo perjungtumėte stilius. Tai padeda greitai paleisti naujas kampanijas ar atnaujinimus, išlaikant aktualumą.
Kurdami dizainą, atsižvelgdami į prekės ženklo lankstumą, apribokite pritaikymo galimybes, kad išvengtumėte chaoso. Naudokite dizaino taisykles, kad išlaikytumėte išdėstymą ir naudojimo paprastumą. Tačiau leiskite prekės ženklams parodyti savo individualumą per spalvas, šriftus ir piktogramas. Pateikite aiškias gaires, ką galima koreguoti, o kas paliekama.
Suburkite komandą, kuri užtikrintų, kad visos temos derėtų tarpusavyje. Jei prekių ženklai sujungiami arba keičiasi, sklandžiai juos veskite per visą procesą. Tai užtikrins nuoseklų ir stiprų dizainą visuose jūsų prekių ženkluose, jiems augant.
Pradžia: veiksmų planas, išteklių skyrimas ir diegimas
Pradėkite nuo nedidelės bandomosios programos . Pasirinkite svarbias sritis, tokias kaip pagrindinis puslapis, registracija arba atsiskaitymas. Sukurkite paprastą MVP su pagrindiniais elementais ir aiškiais, trumpais vadovais. Sukurkite 90 dienų projektavimo sistemos planą su tikslais: patikrinti, ką turite, nustatyti taisykles, sukurti komponentus, įtraukti juos į savo darbo eigą, parengti vadovus ir apmokyti komandas. Išlaikykite projektą nedidelį, kad greitai parodytumėte jo naudą ir padėtumėte suplanuoti didesnį diegimą.
Sudarykite reikiamų žmonių ir įrankių planą. Suburkite komandą su skirtingais įgūdžiais: produkto vadovu, dizaino vadovu, vartotojo sąsajos inžinieriumi, pritaikymo neįgaliesiems ekspertu ir rašytoju. Suplanuokite įrankių biudžetą ir savo gidų svetainę, pvz., „Zeroheight“ arba vidinę. Šis planavimas turėtų atitikti jūsų diegimo planą, užtikrinant, kad viskas būtų paruošta, kai jums reikės augti.
Sistemą pristatykite palaipsniui: pradėkite nuo bandomojo projekto, tada pereikite prie daugiau komandų ir galiausiai išskleiskite ją visoje įmonėje. Padėkite komandoms prisitaikyti rengdami mokymus, vadovus ir demonstruodami realius projektus. Stebėkite svarbius rodiklius, tokius kaip sutaupytas laikas, mažiau klaidų ir geresnė prekės ženklo vienybė. Dalinkitės sėkmėmis, kad gautumėte nuolatinį palaikymą. Koreguokite savo planą, kai sistema naudojasi daugiau komandų, pakeiskite senus elementus ir pridėkite naujų dizainų.
Užbaikite tvirtu veiksmų planu: parodykite, kas esate, paspartinkite darbą ir sustiprinkite savo pozicijas rinkoje. Paremkite savo pradžią ar atnaujinimą patraukliu pavadinimu, kuris padės jums augti. Puikių domenų vardų galite rasti svetainėje Brandtune .com.
Žymos
Pradėkite kurti savo prekės ženklą su „Brandtune“
Naršyti visus domenus
