Sisu
- Süsteemi lugu
- Järjepidevus
- Kõik suhtlemisest
- Kaskaadsed stiilijuhised
- 01. Ülevaade
- 02. Paigutus
- 03. Bränding
- 04. Tüpograafia
- 05. Navigeerimine
- 06. HTML-elemendid
- 07. Meedia
- 08. Varad
- 09. Liidese harmoonia lõuend
- 10. UX-dokumendid
- Stiilijuhendi kasutamine
See artikkel ilmus esmakordselt ajakirja .net - maailma enimmüüdud ajakirja veebidisaineritele ja arendajatele - 219. numbris.
Mis on stiilijuht? Lihtsamalt öeldes on see dokument, mis ütleb teile, kuidas oma lugu rääkida. Sellega kehtestatakse kirjutamisreeglid, hääl, tüpograafiline käsitlus, visuaalsed elemendid ja suhtlemisotsused. Stiilijuhised pärinevad trükimaailmast - näiteks igal ajalehel on selline (vaadake The Guardiani lehte). Ja kontseptsioon on osutunud silmapaistvalt veebiprojektidesse ülekantavaks.
- Tutvuge Photoshop CS6 uusimate funktsioonidega
Nii trükise kui ka võrgu võti on sisu. Stiilijuhendi eesmärk on muuta see sisu selgeks ja järjepidevaks ning tagada, et see laulaks ühel häälel. Fantastiline veebisaidi stiilijuhendi näide on BBC Global Experience Language (GEL).
Süsteemi lugu
Hästi tehtud, stiilijuhend peaks lugema nagu teie veebisaidi projekti autobiograafia, võimaldades teistel saiti mõista, sellega suhelda ja seda laiendada. See võtab kõik projekti kohta salvestatud teadmised ja kogemused ühes inimeses (või meeskonnas) ning paneb need mustvalgelt paika. Stiilijuhend räägib loo disainisüsteemist, selgitab disainimõtlemist ja võimaldab teistel teie meeskonna või tulevase meeskonna inimestel midagi ette võtta.
Miks see kõik ametlikku dokumenti kirja panna: kas te ei peaks seda lihtsalt instinktiivselt teadma? Eeldades, et te ei tee kõike ise (äristrateegia, uuringud, sisustrateegia, UX, disain, ülesehitus, inseneritöö, kvaliteedikontroll ja käivitamine), on punkt, kus peate teistele üle andma.
Interaktsioonidisainerina teeme seda sageli siis, kui kasutajaliides on valmis ja sait on rakendamiseks valmis. Ja see võib olla hirmutav hetk.
Kas see stsenaarium kõlab tuttavalt? Teil on Photoshopis või ilutulestikus ehitatud ideaalselt kujundatud disain. Iga piksel on seal, kuhu ta kuulub, joone kõrgus on täiuslik ja värvid on täis tähendust. Suurepärane - aga kui te veebisaiti ei loo, kuidas saate oma disaini iga elemendi edastada teisele ettevõttele, kes seda rakendab, või isegi teisele eessüsteemi arendajate sisemisele osakonnale?
Mõelge kõikidele olulistele disainiotsustele, mille olete oma teel teinud. See peen ühepiksliline hall pliiatsijoon, mis raamistab täiuslikult 60-protsendise läbipaistmatuse sisukasti. 20-piksline polsterdus, 40-piksline varu,… hästi, kõik.
Järjepidevus
Panime oma kujundusse tuhandeid erinevaid otsuseid. Igal ilmselgel elemendil ja igal välja jäetud elemendil on tähendus ja see mõjutab kasutajakogemust. Kõigi nende dokumenteerimine võtab nii kaua aega kui tegeliku kujunduse loomine. See pole see, mille eest meie kliendid tahavad maksta, ega see, mida me tegelikult tahame projekti lõpuleviimiseks veeta.
Stiilijuhend võimaldab meil selle ringi ruutu panna. Selle asemel, et dikteerida iga piksli asukohta, esitatakse selles üldised disainiprintsiibid, mida kõik projektis osalejad järgivad. See aitab tagada, et teie disainivisioon säiliks, isegi kui te ei tööta enam projektiga.
Kõigil liidese elementidel peaks olema vähemalt üks ühine omadus: järjepidevus. Nad peaksid elama ja hingama loodud disaini olemust ning saama osaks suuremast kujundussüsteemist. Keegi, kes kasutab teie saiti, isegi või eriti erinevates seadmetes, peaks tundma, nagu see kõik sobiks kokku.
Nagu Nathan Borror, kes kirjutas 2009. aastal suurepärase postituse liidese harmoonia kohta, ütleb: "Liidese järjepidevus, kui seda õigesti teha, peaks märkamatuks jääma." Tahaksin öelda, et liidese harmoonia peaks tekitama rõõmu nii, et kasutaja ei tea isegi, miks see nii meeldiv on.
Olen oma projektides võtnud Borrori kontseptsiooni ühe sammu edasi, lisades oma stiilijuhendisse liidese harmoonia lõuendi, mis võimaldab kõigil projektis osalevatel inimestel näha saidi kõiki elemente üksikasjalikult. Kiireks juurutamiseks paljastatakse iga elemendi kõik olekud koos koodijuppidega.
Sellise lähenemisega kaasnev kõrvaltoime on lõdva mustrikogu loomine. Muidugi peab iga elemendi visuaalne kujundus projektiti muutuma, kuid muster ei peaks seda tegema. Hurra tõhususe nimel!
Stiilijuhendi käivitamiseks ärge oodake, kuni olete projekti lõpus. See peaks olema midagi, millega tegelete kogu disainiprotsessi vältel, lisades seda oma edenemise ajal hoolikalt. Elementide loomisele mõtlemine nende loomisel ja paigutamine stiilijuhiste kausta on suurepärane harjumus luua - sellised elemendid nagu:
- Stiilplaadid
- Universaalsed võrgud
- Traadiraamid
- Liidese harmoonia lõuend, kui see areneb
(Pildi viisakalt saidilt Palantir.net. Lisateavet DrupalCon Chicago projekti kohta leiate aadressilt http://www.palantir.net/experience/drupalcon-chicago)
Kõik suhtlemisest
Ehkki disaini üksikasjadesse on lihtne jääda, pidage meeles, et disain ise on mõeldud sõnumi edastamiseks. See on vastus küsimusele, äriprobleemile, organisatsiooni probleemile ... millelegi makrole. Peame oma disainiotsustest teatama umbes samamoodi, nagu peaksime lähenema kujundustele endile - kõigepealt sisule.
Mark Boulton ütleb seda oma blogipostituses pealkirjaga “Rikkam lõuend” hästi: “Olen veendunud, et selleks, et omaks võtta veebi natiivsete paigutuste kujundamine - ükskõik mis seadmest, peame loobuma arusaamast, et loome lõuendist paigutused . Me peame selle pea peale keerama ja sisust välja paigutused looma. "
Teisisõnu peame alustama oma stiilijuhendit suuremate elementidega. Kui sunnite end mõtlema disainielementidele globaalsel tasandil nii enne kui ka granuleeritult, leiate, et teie kujundused muutuvad harmoonilisemaks.
Siiani oleme kindlaks teinud, et kujunduse rakendamise vahendamisel peaks stiilijuhend algama kõrgema taseme üksustest ja liikuma edasi üksikasjalikumate varade või spritide juurde. Tundub üldse tuttav? Jah, täpselt nagu CSS (kaskaadiga stiililehed), on ka kõige selle võti kaskaad - kaskaadstiilis juhendid, kui soovite.
Kaskaadsed stiilijuhised
Tuletame endale meelde, kuidas CSS-i loogika töötab. Üldiselt, kui rakendate stiilile stiililehe ülaosas asuvat asja, siis see stiil liigub alla ja rakendub kõigele, mis on selle all, kuni lisatakse midagi täpsemat.
Põhimõtteliselt alustate kõigepealt üldistest, suurtest piltidest ja lisate seejärel liikumisel üha rohkem üksikasju. Suuri pildiüksusi pole vaja korrata, kuna need on määratletud. See töötab CSS-i jaoks ja see on tohutult kasulik ka disainistiili juhendite loomisel.
Sellist loogikat järgides luuakse süsteem kohe alguses ja see võimaldab neil algsetel elementidel suuna määratleda. Näiteks kui ruudustik on määratletud, peate rääkima ainult ruudustikku 'purustavatest' elementidest.
Siinkohal annan teile põhilise ülevaate selle kohta, kuidas veebidisaini juurutamise stiilijuht võiks liikuda:
01. Ülevaade
Kiire selgitus projekti, teie lähenemise ja lahenduse kohta. Siin on teie võimalus suhelda mõne üldise "miksiga" ja sellega, mille nimel inimesed peaksid üldiselt oma silmi lahti hoidma. See on parim aeg saidi tooni ja hääle määramiseks. Siit saate natuke rääkida projekti sisustrateegiast.
02. Paigutus
Teie ruudustik, üldine paigutuse positsioneerimine ja paigutuste blokeerimine. Kuhu on paigutatud teatud globaalsed elemendid, milline on horisontaalne vahe ja kuidas veerge (kui neid on) käsitletakse, on kõik siin vastatavad küsimused. Siia tuleks lisada ka teie abiraamid.
03. Bränding
Selles jaotises käsitletakse värvipaletti, ülemaailmselt kaubamärgiga graafikat ja kaubamärgipiiranguid.
04. Tüpograafia
Siit ma ei peaks katma tüübi konkreetseid suurusi. Ma lihtsalt selgitaksin, milliseid fonte kasutatakse ja miks need valiti, ning pakun mõned näited rakendusest, et pakkuda konteksti suurema spetsiifilisuse saavutamiseks.
05. Navigeerimine
Tekstilinke, esmast navigeerimist, rippmenüüsid, alamnurka, navigeerimisnuppe, otsingukasti ... siin tuleks käsitleda kõike, mis võimaldab kasutajal saidil orienteeruda. Hakkame jõudma palju kõrgemale üksikasjadele. Lingi värvid, töötlused, teksti kaunistamine ja muu tuleks siin täpsustada. Pidage meeles, et see võib teile tunduda selge, kuid tegutsen eeldusel, et see pole ilmne. Soovin disainerite otsuseid ja kodeerijate kodeerimisotsuseid. See on loogiline.
06. HTML-elemendid
Pealkirjad (h1, h2, h3), loendid, tekikoopia, nuputekst, vormid, väljad, tabelid ja nii edasi. Tore, kui teil on põhjalik loend, millele viitate iga projekti kohta, et tagada oma aluste kajastamine. Jällegi säästab järjepidev süsteem teie aega ja peavalu, kui peate projektis midagi kaks korda tegema.
07. Meedia
Välja arvatud juhul, kui olete 1994. aasta eelse kodeerimise ajastul (mida mõtlete, et te ei tea Netscape'i kohta?), Olete tõenäoliselt oma kujundusse kaasanud mitmesuguseid meediumitüüpe. Millised on pildi ja video proportsioonid kogu saidil? Kas kasutasite standardsuhet? Kas on olemas vahemäluseadeid, mida peate arvestama CMS-i põhjal, mida teie klient kasutab? OK, see viimane on natuke nipsakas, kuid see juhtub enamikus projektides, millega töötan, nii et ma pean seda alati silmas.
08. Varad
See on koht, kus see tõesti jõuab detailidesse ja peate selle viimistlemiseks sügavalt kaevama. Kurat on detailides. Siit tuleb välja tuua kõik kohandamise killud, mida eelmise seitsme jaotisega ei olnud võimalik piisavalt katta. Kuidas käsitletakse erinevaid plokielemente unikaalsetes olukordades? Kuidas on nende külgriba reklaamidega või otsingutulemuste lehega pärast ebaõnnestunud otsingut? Kuidas näevad kommentaarid välja keermestatud või lineaarsed? Kuidas fotogaleriid kogu saidil välja näevad ja toimivad? Isegi selles etapis on oluline otsida võimalikke korduvaid mustreid või elemente. Me ei taha eelarvet täielikult puhuda.
09. Liidese harmoonia lõuend
Kui see kõik kokku viia, on see üks hiiglaslik lõuend või HTML-leht, millel on kõik elemendid ja kõik olekud kuvatud. Kui teil on võimalik projekti edenedes koodilõike lisada või lasta neid lisada, on see tohutu boonus. Juhendi selle osa eesmärk on kahekordne: arendajatele mõeldud kiire juhend elementide rakendamiseks haaramiseks ja koht, kus kontrollida, kas kõik elemendid sobivad omavahel ideaalses harmoonias.
10. UX-dokumendid
Ma tean, et see on natuke lai pealkiri, kuid see on lai ala, mida tuleb katta. Oluline on lisada projekti raames varem loodud põhiteateid - sellised elemendid nagu saidikaart, traadiraamid, prototüüpide ekraanipildid koos linkidega, kui need on aktiivsed, ja isikud. Sageli on need varasemad väljundid aidanud ja aitavad ka edaspidi saidi funktsionaalsust, eesmärki ja koostoimet määratleda.
Stiilijuhendi kasutamine
Kui olete neid soovitusi järginud ja oma stiilijuhendi koostanud, veenduge, et see ei jääks sahtlisse istumata, eirates! Postitage see projektijuhtimistarkvara abil õigetele inimestele või lisage kõik, kes peavad seda dokumentatsiooni nägema asjakohases e-posti lõimes. Kui te pole kindel, kelle kaasata, küsige tehniliselt juhtivtöötajalt, projektijuhilt ja projekti sponsorilt (omanikult), kellel peaks nende arvates olema juurdepääs stiilijuhendile. See on alusdokument kõigile, kes töötavad saidi juurutamise, kujundussüsteemi laiendamise või sisu loomise kallal. Eesmärk on, et kõik toimiks hästi koos, vastaks või ületaks ootusi. See hõlmab meeskonnatööd.
Pidage meeles, et levitamine pole veel tee lõpp - ärge lõpetage rääkimist stiilijuhtide olulisusest. Mida rohkem neist saab teie kultuuri ja töövoo osa, seda rohkem inimesi neile viitab. Lisaks hoiab see neid projektide kallal töötamise ajal teie eesotsas, aidates teil meeles pidada vajadust oma otsustest teistele teada anda.
Lisage dokumentatsioon oma PSD-desse kihtide kaudu ja eeldage, et see pole ilmne. Keegi pole mõttelugeja - see on lihtsalt hea UX-mantra, mis peaks kehtima kogu meie erialal.
Standardid ja konventsioonid pole selleks, et takistada uute lahenduste väljapakkumist. Nad aitavad teil otsustada, mis on hea idee ja mis mitte. Oma raamatus Ära pane mind mõtlema, Steve Krug ütleb, et kõik kokkulepped alustavad elu kellegi helge ideena. Seega saavad konventsioonid reeglina vaid siis, kui need toimivad. Kasuta neid. Nad on su sõbrad.
Lõpuks aus tunnistus: minu arvates on veebikujundusstiilide loomine mõnikord pisut tüütu - ja see on täiesti okei. Ärge kasutage seda ettekäändena, et te seda siiski ei loo, vastasel juhul teete meelt vabaks tehes. Uskuge mind, need on eduka projekti võtmed: need on kuldaväärt ja siis mõned.
Steve Fisher yellowpencil.com/ on Kanada kollase pliiatsi loomerühma nohik-karjane. Ta juhib uurimistöö koordineerimist, ärianalüüsi, visuaalse ja suhtluse kujundamist ning sisustrateegiat. Globaalsel areenil on ta nõutud esineja sellistel teemadel nagu tundlik veebidisain, UX, avatud lähtekoodiga kujundusmõtlemine ja veebiprotsess. Ta armastab ka Twitterit (võib-olla natuke liiga palju).
