Vodnik oblikovalca za delo s slogi in slogi

Ustvarjanje blagovno znamko ni lahka naloga. Zahteva težke napore, vendar je tudi ena izmed najbolj nagrajenih ustvarjalnih nalog. Spletni projekti pogosto mešanje blagovne znamke z oblikovanjem vmesnika. To je lahko zavajajoče, saj je na obeh področjih toliko dela. Stilski vodniki in slog ploščice so odlični viri za spletne oblikovalce in čeprav so podobni, dosežejo dve različni nalogi.

V tej objavi bi se rad poglobil v oboje in pokril koristi, ki jih lahko dobite od teh ustvarjalnih sredstev. Ni vsakomur potrebno (ali podobno) ustvarjanje slogov ali slogov. Toda vsak oblikovalec bi moral vsaj razumeti, kaj so to in kako delujejo.

Stilski vodniki za splet

Prebral sem različna mnenja o slogih. Nekateri pravijo, da so to digitalni modeli, medtem ko drugi pravijo, da so kodeksi, ki temeljijo na slogu, najbolj koristni.

Kakorkoli, cilj vodnika po slogu je enak za splet kot vsak drug projekt. Opredeljuje dosledne vzorce, module uporabniškega vmesnika in nastavitve ustvarjanja v procesu načrtovanja. Za določene elemente lahko dobite zelo natančne in natančne meritve, ali pa ostanete ohlapni in ponudite smernice z vizualnimi primeri.

Ni enotnega pravega načina za vodenje po slogu. Edini napačen način je, da ustvarite vir, ki preprosto ne morejo razumeti drugi.

Cilj je ustvariti sredstvo, ki bo preizkusite čas. Mora biti odprto za urejanje če se ustvarijo novi viri. Prav tako mora biti dostopen vsakomur, ki se pridruži ekipi, da se z lahkoto potaplja naravnost v vodnika.

Slog vodnik bi moral biti kot je potrebno za projekt. Ponavadi vključuje sredstva za ponovno uporabo, kot so tipografija, gumbi, barvne skice, teksture in običajni elementi strani.

Pred kratkim smo pokrili orodja za vodenje živih stilov ki vam lahko pomagajo pri gradnji življenjskih vodnikov iz nič. Ti živi vodniki so bolj za razvijalce frontend, vendar so lahko prav tako koristni za oblikovalce. Več o tej temi si lahko preberete v tem sporočilu Smashing Magazine.

Moj najljubši vir je StyleGuides.io. Zajema osnove slogov vodnikov za splet, vključno z primeri v živo in Študije primerov.

MailChimpova knjižnica vzorcev je eden najboljših primerov, ki jih lahko najdete na StyleGuides.io. To je vodnik po spletu v živo določa mrežo, tipografijo in elemente strani MailChimp.

Ko oblikujete vodnik po stilu za spletno podjetje, je običajno, da postavite vse na spletu, lahko pa tudi ustvarite notranjih vodnikov, in jih hranite v lokalnem intranetu ali jih zasebno gostite za stran za prijavo uporabnika. Način dostopa do vodnika po stilu resnično ni pomemben. Vsi služijo istemu namenu, da posredujejo posebne barve, vzorce in vizualije ujemajo s temo spletnega projekta.

Če želite izvedeti več o tej temi, si oglejte te druge objave v navodilih za uporabo slogov:

• Priročniki za slog spredaj (24ways.org)
• Ustvarite vodnik po slogu spletnega mesta (creativebloq.com)
• Kako narediti Perfect Web Design Style Guide (dtelepathy.com)

Razvejitev v slog ploščice

Ploščice slogov popolnoma drugačen zver. Te ploščice so ustvarjalnih sredstev, uporabljenih v zgodnji fazi načrtovanja ko poskušate določiti določeno estetiko.

Spletna stran Style Tiles je ustvarila Samantha Warren in ima vse, kar bi morda morali vedeti. Tukaj je ni posebne predloge za oblikovanje slog. Ampak Samantini primeri uporabljajo naslovi in ​​vrste odstavkov, povezave, vzorci, in možne izbire barv skupaj z logotip.

Ko delate s slogi, je vaš cilj končno predstavi 2-3 različne sloge ploščic naročniku ali ustvarjalnemu direktorju. Te ploščice so podrobnejši od odbora za razpoloženje, še precej manj podroben od popolnega modela.

Ploščice bi morale biti dovolj natančne, da bi imele smisel identitete in razpoloženja spletne strani. Samantha spodbuja z uporabo pridevnikov podrobno opisati vsako ploščico.

Stranke lahko poglejte različne ploščice, in izberite svoje najljubše kose. To vam prihrani čas pri načrtovanju, ker je stranka že videla sredstva, ki jih imajo radi, tako da je manj možnosti za obsežne popravke.

Tukaj je odlična ponudba s spletnega mesta Style Tiles:

Primerjava stilskih ploščic z orodjem notranjega oblikovalca je precej primerna analogija. Ne želite vstaviti napora v model, ki je popoln za slikovne pike, samo da bi stranka razumela, da sovražijo večino barv in pisav.

Namesto tega uporabite slogne ploščice, da najdete a skupna tema ali vizualni jezik za celotno spletno mesto. To lahko vključuje blagovna znamka / identiteta lahko pa tudi vključuje Funkcije uporabniškega vmesnika, kot so spustni meniji ali gumbi CTA.

Uporabite jih kot dobavljiva sredstva v začetku postopka. Ko dokončate celoten model, res ni več potrebe po sklicevanju na slog. Kljub temu so lahko slogovne ploščice na začetku ključnega pomena za ustvarjalni proces shranite čas oblikovalca in strankam je na voljo veliko možnosti za izbiro.

Če želiš poglobite več v slog ploščice Oglejte si te povezane objave.

• Ploščice slogov in kako delujejo
• Ploščice slogov: alternativa polnemu oblikovanju Comps
• Ustvarjanje slogovnih ploščic: enostaven pristop k oblikovanju smeri

Slogi in slogi

Razlika med slogi in slogom je nejasna, vendar dokončna. A vodnik je veliko več podrobno in ga je treba uporabiti kot stalno referenčno vodilo za ustvarjalno skupino. A slog lahko uporabimo kot moodboard do zamisli vizualno zase ali za stranko. Pogosto jih uporabljajo raziščite ideje, in ko je projekt končan, ne služijo veliko namenu.

Ploščice slogov so pogosto veliko bolj grobe okoli robov in se uporabljajo zgolj v zgodnjem ustvarjalnem procesu. Uporabljen je stilski vodnik skozi celoten proces oblikovanja in celo pozneje za poznejšo uporabo za druge oblikovalce, ki bi lahko delali na spletnem mestu.

Oba imata svoje prednosti in pomanjkljivosti. Ploščice slog so hitro in zabavno, ampak kratkotrajna v naravi. Slogi vodnikov so temeljito in se obnašajo kot vizualna dokumentacija, ampak tudi oni zahtevajo veliko dela.

Torej, katero naj uporabite? Končno odvisen od projekta.

Manjši projekti kot za mala podjetja spletne strani bolje delujejo s slogi ploščice. Gradnja celotnega vodnika po stilu za majhno poslovno spletno stran bi zahtevala preveč dela in plačljivih ur. To verjetno ni vredno stroškov za večino strank.

Vendar a velik projekt kot preoblikovanje NY Times bi koristila tako slog ploščice in slog vodnikov.

Iskanje jezika in razpoloženja za nov projekt je vedno dragocen proces. To je tisto, kar naredi slog ploščice popoln za skoraj vsak scenarij.

Lahko tudi pridete brez ustvarjanja teh sredstev. Nekateri oblikovalci gredo desno od okvirjev do podrobne makete. In nekateri odjemalci ne želijo niti vodnika po stilu, ker ga ne boste uporabili.

Delajte na podlagi posameznega projekta in določite, kaj je najbolje za vsakega posebej.

Primeri v živo

Oglejmo si to s pokrivanjem primeri tako slogov kot slogov. Te modele sem našel med brskanjem po Dribbbleju in mislim, da ponazarjajo kakovost, ki jo želite v lastnih slogih ali slogih.

Stilski vodniki

Ta neverjetni vodič po slogu Airbnb je ustvaril Derek Bradley. To je zelo preprosto, vendar jasno ponazarja glavne vzorce, barve in elemente strani najti v načrtu.

Tukaj je veliko večji digitalni slog vodnik oblikovalec Naoshad Alam. Ta primer je veliko bolj organizirano z odseki za barve, tipografijo, obrazce, elemente vmesnika in druge funkcije uporabniškega vmesnika.

Podrobnejši slogi vodnikov bi postavili vse te oblikovne elemente na splet in vključujejo odrezke kode za vsako.

Designer Cupi Wong je izdelal ta vodnik za AfterShip. Tipografija, gumbi, barvne izbire in skupni elementi strani so skrbno izdelani in organizirani skupaj v oddelke.

To bi lahko prenesli tudi v splet in ga naredili veliko več kot spletno referenčno dokumentacijo.

Dizajner uporabniškega vmesnika Greg Dlubacz je delil svoj priročnik za spletni projekt. Ta stvar je zelo velika. Celozaslonski predogled je visok 21.000 slikovnih pik!

Popolnoma eden najboljših digitalnih vodnikov, ki sem jih kdaj videl. To lahko prenesete tudi na spletno stran za dokumentacijo, na katero se sklicujejo člani skupine.

Ploščice slogov

UI / UX oblikovalec Abdus Salam je ustvaril to stilsko ploščico za spletno stran ekološke trgovine z živili. Zelo je osnovno ravne elemente oblikovanja, nekatere manjše funkcije uporabniškega vmesnika, in a barvna paleta.

Oblikovalec Adrian Cantelmi se je resnično poglobil s svojimi ploščicami. Ima barve in tipografijo, vključuje pa tudi vektorske ilustracije.

Ti vektorji pomagajo določite blagovno znamko, razpoloženje in celotno barvno shemo spletne strani.

Redesign svetovalcev svetovnega pokala je dobil svoj lasten slog z zelo osnovnimi lastnostmi. Nekaj ​​ikon, nekaj barvnih izbir, skupaj z nekaj modelov gumbov. Preprostost je ime igre.

Če lahko dobite občutek, kako bo izgledalo spletno mesto na pogled potem delaš prav.

Tukaj je zabaven primer zavrnjenega sloga, ki se uporablja za potovalni projekt. Oblikovalec Brennan Gleason ponuja le majhen vzorec ploščice, vendar še vedno lahko dobite občutek za ambient spletne strani.

Končne besede

Če iščete po spletu, boste našli veliko več primerov, nasvetov in virov slog vodnikov in stilske ploščice. Ampak upam, da je ta članek lahko temeljni premik na obeh straneh in da boste tekoče razumeli in ustvarili ta oblikovna sredstva.