Dizajnérsky návod na prácu so sprievodcami štýlov a štýlovými dlaždicami

Vytvorenie značkovú identitu nie je ľahká úloha. Vyžaduje značné úsilie, ale je to aj jeden z najvýnosnejších kreatívnych úloh. Webové projekty často mix branding s dizajnom rozhrania. To môže byť mätúce, pretože tam je toľko práce v oboch oblastiach. Vodítka štýlov a štýlových dlaždíc sú skvelé zdroje pre webových dizajnérov a zatiaľ čo to znie podobne, dosiahnu dve rôzne úlohy.

V tomto príspevku by som sa chcel ponoriť do oboch a pokryť výhody, ktoré môžete získať z týchto kreatívnych aktív. Nie každý bude potrebovať (alebo rád) vytváranie sprievodcov štýlov alebo štýlov. Ale každý dizajnér by mal aspoň pochopiť, čo to je a ako funguje.

Sprievodca štýlom pre web

Čítal som rôzne názory na sprievodcov štýlov. Niektorí hovoria, že ide o digitálne makety, zatiaľ čo iní hovoria, že štýly založené na kóde sú najužitočnejšie.

Či tak alebo onak, cieľ sprievodcu štýlom je rovnaký pre web ako ktorýkoľvek iný projekt. Definuje to konzistentné vzory, moduly používateľského rozhrania a predvoľby kreatív používané v procese návrhu. Môžete získať veľmi špecifické a stanoviť pixel-perfektné merania pre niektoré prvky, alebo môžete zostať voľné a ponúkať pokyny s vizuálnymi príkladmi.

Neexistuje jediný správny spôsob, ako urobiť sprievodcu štýlom. Jedinou nesprávnou cestou je jednoducho vytvoriť zdroj nemôžu byť pochopení inými.

Cieľom je vytvoriť aktívum, ktoré bude vydržte test času. To by malo byť otvoriť pre úpravy ak sa vytvoria nové zdroje. Taktiež by mal byť prístupný pre každého, kto sa pripojí k tímu, aby sa ľahko ponoril priamo do sprievodcu.

Sprievodca štýlom by mal byť tak, ako je to potrebné pre projekt. Zvyčajne to zahŕňa opätovne použiteľných aktív, ako napríklad typografia, tlačidlá, farebné vzorky, textúry a bežné prvky stránky.

Nedávno sme sa zaoberali nástroje na usmerňovanie bývania ktoré vám môžu pomôcť vytvoriť sprievodcu živého štýlu od začiatku. Títo živí sprievodcovia sú skôr pre developerov frontend, ale môžu byť rovnako užitoční pre dizajnérov. Viac o tejto téme si môžete prečítať v tomto článku Smashing Magazine.

Môj absolútny obľúbený zdroj je StyleGuides.io. Vzťahuje sa na základy príručiek štýlov pre web, počítajúc do toho živé príklady a prípadové štúdie.

Knižnica šablón služby MailChimp je jedným z najlepších príkladov, ktoré nájdete v štýle StyleGuides.io. Je to online sprievodca naživo definuje mriežku, typografiu a prvky stránky služby MailChimp.

Keď navrhujete sprievodcu štýlom pre webovú spoločnosť, je bežné, že všetko môžete dať online, ale môžete tiež vytvoriť vnútorné vodítka, a udržiavať ich na lokálnom intranete alebo ich hosťovať súkromne za užívateľskou prihlasovacou stránkou. Spôsob prístupu k príručke štýlov naozaj nezáleží. Všetky tieto služby slúžia na rovnaký účel, ktorý prináša konkrétne farby, vzory a vizuálne prvky zodpovedajú téme webového projektu.

Ak sa chcete dozvedieť viac o tejto téme, pozrite si tieto ďalšie príspevky v príručkách štýlov:

Sprievodcovia štýlom prednej strany (24ways.org)
Vytvorte sprievodcu štýlom stránok (Creativebloq.com)
Ako urobiť perfektný štýl Web Design sprievodca (Dtelepathy.com)

Rozvetvenie do štýlu dlaždíc

Štýlové dlaždice sú úplne iná bestie. Tieto dlaždice sú kreatívne prostriedky používané v počiatočnej fáze návrhu keď sa pokúšate podľahnúť špecifickej estetike.

Webová stránka Štýl dlaždice bola vytvorená spoločnosťou Samantha Warren a má všetko, čo by ste mohli potrebovať vedieť. Tam je žiadna špecifická šablóna pre navrhovanie štýlu dlaždice. Ale príklady Samanthy používajú nadpisy a typy odsekov, odkazy, vzory, a možných farebných možností spolu s a značkové logo.

Pri práci so štýlovými dlaždicami je naším cieľom v konečnom dôsledku prezentujte 2-3 rôzne štýly dlaždíc klientovi alebo kreatívnemu riaditeľovi. Tieto dlaždice sú podrobnejšie ako nástěnka, ešte oveľa menej detailné ako plná maketa.

Dlaždice by mali byť dostatočne podrobné, aby poskytli zmysel pre identity a náladu webovej stránky. Samantha povzbudzuje použitím prídavných mien aby ste detailne opísali jednotlivé dlaždice.

Klienti môžu pozrite sa cez rôzne dlaždice, a vyberte svoje obľúbené kúsky. toto šetrí vám čas pri navrhovaní, pretože klient už zaznamenal aktíva, ktoré sa im páčia, takže je menšia šanca na pevné revízie.

Tu je skvelý citát z webovej stránky Štýl dlaždíc:

Porovnanie štýlov dlaždíc s nástrojmi interiérového dizajnéra je celkom vhodná analógia. Nechcete vylievať úsilie do pixel-dokonalý mockup len aby si klient uvedomil, že nenávidia väčšinu farieb a písma.

Namiesto toho použite štýlové dlaždice na nájdenie spoločnú tému alebo vizuálny jazyk ktoré sa majú používať na celom webe. To môže zahŕňať branding / identity ale môže tiež zahŕňať Funkcie používateľského rozhrania, ako sú rozbaľovacie ponuky alebo tlačidlá CTA.

Mali by ste ich použiť ako dodávateľných aktív začiatku procesu. Akonáhle dokončíte úplný mockup, už nie je potrebné odkazovať na dlaždice štýlu. Napriek tomu na začiatku môžu byť štýlové dlaždice rozhodujúce pre tvorivý proces ukladanie času pre návrhárov a poskytnúť klientovi veľa možností na výber.

Ak chceš ponorte sa viac do štýlu dlaždíc pozrite sa na tieto súvisiace príspevky.

Štýl dlaždice a ako fungujú
Štýl dlaždice: Alternatíva k úplnému návrhu Comps
Vytváranie štýlov štýlov: Jednoduchý prístup k smeru návrhu

Sprievodca štýlom a dlaždice štýlu

Rozdiel medzi sprievodcami štýlov a štýlovými dlaždicami je vágny, ale definitívny. sprievodca štýlom je oveľa viac detailné a mala by byť použitá ako kontinuálna referenčná príručka pre kreatívny tím. štýl dlaždice môže byť použitý ako moodboard na vykresliť nápady vizuálne pre seba alebo pre klienta. Oni sú často zvyknutí na preskúmajte nápady, a akonáhle je projekt dokončený, neslúžia veľkému účelu.

Štýlové dlaždice sú často oveľa hrubšie okolo okrajov a používajú sa výlučne v ranom kreatívnom procese. Sprievodca štýlom je určený na použitie počas celého procesu návrhu a dokonca aj neskôr pre iných návrhárov, ktorí môžu pracovať na webe.

Obaja majú svoje výhody a nevýhody. Štýlové dlaždice sú rýchle a zábavné, ale prchavý v prírode. Vodítka štýlov sú dôkladný a správať sa ako vizuálna dokumentácia, ale aj oni vyžadujú veľa práce.

Takže ktorý z nich by ste mali používať? To nakoniec závisí od projektu.

Menšie projekty ako napríklad pre webové stránky pre malé firmy, fungujú lepšie so štýlovými dlaždicami. Vytvorenie celého štýlu sprievodcu pre malý podnik by vyžadovalo príliš veľa práce a fakturovaných hodín. To pravdepodobne nestojí za náklady pre väčšinu klientov.

Avšak a veľký projekt ako prepracovanie NY Times by mali prospech z oboch štýlov dlaždíc a sprievodcov štýlom.

Hľadanie jazyka a nálady pre nový projekt je vždy cenným procesom. To je to, čo robí štýly dlaždíc ideálne pre takmer každý scenár.

Môžete sa tiež dostať bez vytvorenia jedného z týchto aktív. Niektorí dizajnéri idú priamo z drôtu na podrobné makety. Niektorí klienti nechcú dokonca ani sprievodcu štýlom, lebo nebudú zvyknutí.

Práca na základe projektu a rozhodnúť o tom, čo je najlepšie pre každú z nich.

Živé príklady

Poďme to zabaliť tým, že pokryjeme príklady obidvoch sprievodcov štýlov a štýlových dlaždíc. Našiel som tieto návrhy pri prehliadaní Dribbble a myslím, že oni príkladom kvality, ktorú by ste chceli vo vašom vlastnom štýle sprievodcov alebo štýlu dlaždice.

Príručky štýlov

Tento neuveriteľný sprievodca Airbnb štýlom vytvoril Derek Bradley. Je to veľmi jednoduché, ale jasne to dokazuje hlavné vzory, farby a prvky stránky ktoré sa nachádzajú v dizajne.

Tu je oveľa väčšia príručka pre digitálny štýl, ktorú vytvoril dizajnér Naoshad Alam. Tento príklad je oveľa organizovanejšie s časti pre farby, typografiu, formuláre, prvky rozhrania a ďalšie funkcie používateľského rozhrania.

Podrobnejšie sprievodca štýlov by dal všetky tieto dizajnové prvky na webe a zahrnúť útržky kódu pre každý z nich.

Designer Cupi Wong urobil túto príručku pre AfterShip. Typografia, tlačidlá, voľby farieb a bežné prvky stránky sú starostlivo vytvorené a organizované spoločne do sekcií.

Tiež by sa mohli preniesť na web a vytvoriť oveľa väčšiu ako online referenčnú dokumentáciu.

Návrhár UI Greg Dlubacz zdieľa svoj vlastný sprievodca štýlom UI pre webový projekt. Táto vec je vážne obrovská. Náhľad na celej obrazovke je vysoký o 21 000 pixelov!

Jednoznačne jeden z najlepších sprievodcov digitálneho štýlu, aké som kedy videl. Tiež by sa to mohlo preniesť na stránku online dokumentácie, na ktorú môžu členovia tímu odkazovať.

Štýl dlaždice

UI / UX dizajnér Abdus Salam vytvoril tento štýl dlaždice pre webové stránky obchod s biopotravinami. Je to veľmi jednoduché ploché prvky návrhu, niektoré menšie prvky rozhrania, a a farebná paleta.

Dizajnér Adrian Cantelmi naozaj šiel podrobne s jeho predaja štýlu dlaždice. Má farby a typografiu, ale zahŕňa aj vektorové ilustrácie.

Tieto vektory pomáhajú definujte značku, náladu a celkovú farebnú schému webovej stránky.

Svetový pohár poradcov redesign získal svoju vlastnú štýlovú dlažbu so základnými vlastnosťami. Niekoľko ikon, niektoré farebné voľby spolu s návrhmi pár tlačidiel. jednoduchosť je názov hry.

Ak môžete získať pocit, ako môže stránka vyzerať na prvý pohľad potom to robíte správne.

Tu je zábavný príklad odmietnutého štýlu dlaždíc používaného pre cestovný projekt. Návrhár Brennan Gleason poskytuje len malú vzorku dlaždice, ale stále môžete získajte pocit z atmosféry webových stránok.

Konečné slová

Ak hľadáte po celom webe, nájdete viac príkladov, tipov a zdrojov štýlový sprievodca a štýlové dlaždice. Dúfam však, že tento článok môže byť základným prvkom na obidvoch stranách a prinesie vám plynulé pochopenie a vytváranie týchto dizajnových aktív.