Dizainera rokasgrāmata darbam ar stila vadiem un stila flīzēm
Radīt a firmas identitāte nav viegls uzdevums. Tas prasa lielas pūles, bet tas ir arī viens no visatbilstošākajiem radošajiem uzdevumiem. Web projekti bieži vien samaisa zīmolu ar interfeisa dizainu. Tas var būt mulsinoši, jo abās jomās ir daudz darāmā. Stila ceļveži un stila flīzes ir lieliski resursi web dizaineriem, un, lai gan tie izklausās līdzīgi, tie tiek izpildīti divi dažādi uzdevumi.
Šajā ziņojumā es gribētu ienirt abās un aptvert priekšrocības, ko jūs varat saņemt no šiem radošajiem aktīviem. Ne visiem būs nepieciešami (vai līdzīgi) stila ceļveži vai stila flīzes. Bet katram dizainerim vismaz jāsaprot, kas tas ir un kā viņi strādā.
Stila rokasgrāmatas tīmeklī
Esmu izlasījis dažādus viedokļus par stila rokasgrāmatām. Daži saka, ka tie ir digitālie maketi, bet citi saka, ka koda stila ceļveži ir visnoderīgākie.
Katrā ziņā stila rokasgrāmatas mērķis tīmeklī ir tāds pats kā jebkuram citam projektam. Tā definē konsekventi modeļi, UI moduļi un radošās preferences izmanto projektēšanas procesā. Jūs varat iegūt ļoti specifiskus un noteiktus pikseļu perfektus mērījumus noteiktiem elementiem, vai arī jūs varat palikt brīvi un piedāvāt vadlīnijas ar vizuāliem piemēriem.
Nav vienota pareizā ceļa, kā izdarīt stila rokasgrāmatu. Vienīgais nepareizs veids ir izveidot resursus, kas vienkārši nevar saprast citi.
Mērķis ir radīt aktīvu, kas būs izturēt laika pārbaudi. Tam vajadzētu būt atvērts rediģēšanai ja tiek radīti jauni resursi. Tai jābūt pieejamai arī ikvienam, kas pievienojas komandai, lai viegli ienirtu ceļvedī.
Būtu jābūt stila ceļvedim tik detalizēti, cik nepieciešams projektam. Tas parasti ietver atkārtoti izmantojamiem aktīviem, piemēram, tipogrāfija, pogas, krāsu swatches, faktūras un kopīgi lapu elementi.
Mēs nesen attiecījāmies dzīves stila ceļveži kas var palīdzēt jums veidot dzīves stila ceļveži no nulles. Šie dzīves ceļveži ir vairāk par frontendu izstrādātājiem, taču tie var būt tikpat noderīgi dizaineriem. Vairāk par šo tēmu varat izlasīt šajā Smashing Magazine ziņojumā.
Mans absolūtais mīļākais resurss ir StyleGuides.io. Tas attiecas uz web stila rokasgrāmatu pamati, tostarp dzīvi piemēri un gadījumu izpēte.
MailChimp rakstu bibliotēka ir viens no labākajiem piemēriem, kas atrodami vietnē StyleGuides.io. Tas ir tiešsaistes tiešraides ceļvedis definē MailChimp režģi, tipogrāfiju un lapu elementus.
Izstrādājot tīmekļa vietnes stila rokasgrāmatu, ir vispārējs, lai visu tiešsaistē ievietotu, bet jūs varat arī izveidot iekšējās rokasgrāmatas, un turiet tos vietējā iekštīklā vai aizņemiet tos privāti aiz lietotāja pieteikšanās lapas. Veids, kā piekļūt stila rokasgrāmatai, tiešām nav svarīgi. Tie visi kalpo tādam pašam mērķim, kā nodot konkrētas krāsas, rakstus un vizuālos attēlus atbilst tīmekļa projekta tēmai.
Lai uzzinātu vairāk par šo tēmu, skatiet šīs citas ziņas par stila rokasgrāmatām:
- Priekšējā stila ceļveži (24ways.org)
- Izveidojiet vietnes stila rokasgrāmatu (creativebloq.com)
- Kā izveidot Perfect Web Design Style Guide (dtelepathy.com)
Filiāles stila flīzēs
Stila flīzes ir pavisam cits zvērs. Šīs flīzes ir radošie aktīvi, kas izmantoti agrīnā projektēšanas posmā mēģinot nostiprināt konkrētu estētiku.
Stila flīzes mājas lapu izveidoja Samantha Warren, un tai ir viss, kas jums būtu jāzina. Tur ir nav konkrētas veidnes stila flīžu projektēšanai. Bet Samantha piemēri izmanto virsraksti un punktu veidi, saites, raksti, un iespējamo krāsu izvēli kopā ar a firmas logo.
Strādājot ar stila flīzēm, jūsu mērķis ir piedāvā 2-3 dažādu stilu flīzes klientam vai radošajam direktoram. Šīs flīzes ir detalizētāk nekā garastāvokļa dēlis, vēl daudz mazāk detalizēts nekā pilns makets.
Flīzēm jābūt pietiekami detalizētām, lai dotu priekšstatu par tīmekļa vietnes identitāte un noskaņojums. Samantha mudina izmantojot īpašības vārdus aprakstīt katru flīzi detalizēti.
Klienti var skatīties caur dažādām flīzēm, un atlasiet savus iecienītākos gabalus. Tas ietaupa laiku projektējot, jo klients jau ir redzējis sev patīkamos aktīvus, tāpēc ir mazākas dūšas pārskatīšanas iespējas.
Šeit ir lieliska citāts no stila flīžu vietnes:
Salīdzinot stila flīzes ar interjera dizainera rīkkopa, tas ir diezgan līdzīgs. Jūs nevēlaties, lai piepildītu pikseli-perfektu maketi, lai klients saprastu, ka viņi neapmierina lielāko daļu krāsu un fontu.
Tā vietā izmantojiet stila flīzes, lai atrastu a kopējā tēma vai vizuālā valoda jāizmanto visā vietnē. Tas var ietvert zīmols / identitāte bet arī varētu ietvert UI funkcijas, piemēram, nolaižamās izvēlnes vai CTA pogas.
Jums vajadzētu tos izmantot kā piegādājamie aktīvi procesa sākumā. Kad esat pabeidzis pilnu maketu, vairs nav vajadzības atsaukties uz stila flīzēm. Tomēr sākumā stila flīzes var būt būtiskas radošajam procesam saglabājot dizainera laiku un ļaujot klientam izvēlēties vairākas iespējas.
Ja Tu gribi ienirt vairāk stila flīzēs pārbaudiet šīs saistītās ziņas.
- Stila flīzes un kā tās darbojas
- Stila flīzes: alternatīva pilna dizaina kompānijām
- Stila flīžu izveide: viegla pieeja dizaina virzienam
Stila rokasgrāmatas pret stila flīzēm
Stila rokasgrāmatu un stila flīžu atšķirība ir neskaidra, bet noteikta. A stila ceļvedis ir daudz vairāk detalizēti un ir jāizmanto kā a nepārtraukta atsauces rokasgrāmata radošajai komandai. A stila flīzes var izmantot kā a moodboard uz vizualizējiet idejas sev vai klientam. Tos bieži izmanto izpētīt idejas, un, kad projekts ir pabeigts, tie nesniedz lielu mērķi.
Stila flīzes bieži vien ir daudz raupjākas ap malām, un tās tiek izmantotas tikai agrīnā radošajā procesā. Ir jāizmanto stila ceļvedis visā projektēšanas procesā un pat pēc tam turpmākai izmantošanai citiem dizaineriem, kas varētu strādāt šajā vietnē.
Abiem ir savas priekšrocības un trūkumi. Stila flīzes ir ātri un jautri, bet īslaicīga dabā. Stila ceļveži ir rūpīgi un rīkoties kā vizuāla dokumentācija, bet arī viņi prasa daudz darba.
Tātad, kuru no jums vajadzētu izmantot? Tas galu galā atkarīgs no projekta.
Mazāki projekti piemēram, mazo uzņēmumu tīmekļa vietnēm labāk strādāt ar stila flīzēm. Veidojot visu stila rokasgrāmatu mazam uzņēmumam, būtu nepieciešams pārāk daudz darba un norēķinu stundu. Tas, visticamāk, vairumam klientu nav izdevīgi.
Tomēr a liels projekts tāpat kā NY Times pārprojektēšana varētu gūt labumu gan no stila flīzes, gan stila ceļveži.
Valodas un noskaņojuma meklēšana jaunam projektam vienmēr ir vērtīgs process. Tas padara stila flīzes ideāls gandrīz katram scenārijam.
Jūs varat arī saņemt neradot nevienu no šiem aktīviem. Daži dizaineri iet tieši no vadiem uz detalizēti maketi. Un daži klienti pat nevēlas stila rokasgrāmatu, jo tas netiks izmantots.
Strādājiet pie projekta un izlemiet, kas katram ir labākais.
Dzīvi piemēri
Iesakām to aptvert piemēri gan stilu, gan stila flīzes. Es atklāju šos dizainus, pārlūkojot Dribbble, un es domāju, ka tie ir piemērs kvalitātei, kuru vēlaties izmantot savos stila ceļos vai stila flīzēs..
Stila rokasgrāmatas
Šo neticamo Airbnb stila rokasgrāmatu izveidoja Derek Bradley. Tas ir ļoti vienkārši, bet tas skaidri parāda galvenie modeļi, krāsas un lapas elementi atrodams dizainā.
Šeit ir daudz lielāks digitālā stila ceļvedis, ko izstrādājis dizainers Naoshad Alam. Šis piemērs ir daudz vairāk organizēta ar sadaļas krāsām, tipogrāfijai, veidlapām, saskarnes elementiem un citām UI funkcijām.
Detalizētāki stila ceļveži visus šos dizaina elementus ievietotu tīmeklī, un ietver koda fragmentus katram.
Dizaineris Cupi Wong šo rokasgrāmatu izstrādāja AfterShip. Tipogrāfija, pogas, krāsu izvēle un kopīgi lapu elementi ir rūpīgi izstrādāti, un organizēti sadaļās.
To var arī pārnest uz tīmekli un izveidot daudz plašāk kā tiešsaistes atsauces dokumentāciju.
UI dizainers Greg Dlubacz kopīgoja savu UI stila rokasgrāmatu tīmekļa projektam. Šī lieta ir ļoti milzīga. Pilnekrāna priekšskatījums aptver 21 000 pikseļu augstu!
Absolūti viens no labākajiem digitālā stila ceļvežiem, ko esmu redzējis. To var arī pārnest uz tiešsaistes dokumentācijas lapu, lai komandas locekļi varētu atsaukties.
Stila flīzes
UI / UX dizainers Abdus Salam izveidoja šo stilu flīzes bioloģiskās pārtikas veikala tīmekļa vietnei. Tas ir ļoti vienkāršs plakani dizaina elementi, dažas nelielas UI funkcijas, un a krāsu palete.
Dizaineris Adrian Cantelmi patiešām sīki ar savu pārdošanas stilu. Tajā ir krāsas un tipogrāfija, bet ietver arī vektora ilustrācijas.
Šie vektori palīdz definējiet zīmolu, garastāvokli un kopējo krāsu shēmu tīmekļa vietnes.
Pasaules kausa padomnieku pārprojektēšana ieguva savu stila flīžu ar ļoti vienkāršām iezīmēm. Dažas ikonas, dažas krāsu izvēles, kā arī pāris pogu dizaini. Vienkāršība ir spēles nosaukums.
Ja jūs varat justies par to, ko varētu izskatīties vietne Īsumā tad jūs darāt to pareizi.
Šeit ir jautri piemērs noraidītajam stila flīzim, ko izmanto ceļojuma projektā. Dizaineris Brennan Gleason piedāvā tikai nelielu flīžu paraugu, bet jūs joprojām varat justies par tīmekļa vietnes gaisotni.
Galīgie vārdi
Ja meklējat tīmeklī, atradīsiet daudz vairāk piemēru, padomu un resursu ēkas stila ceļveži un stila flīzes. Bet es ceru, ka šis raksts var būt gan primeris, gan abām pusēm, un jūs brīvi sapratīsiet un veidojat šos dizaina aktīvus.
