Disainisüsteem veebilehele: millal ja kuidas
Disainisüsteem on kokkulepe selle kohta, kuidas asjad välja näevad ja käituvad, koos komponentidega, mis selle kokkuleppe teostavad. Väikese lehe puhul on see üleliigne. Kasvava lehe puhul on selle puudumine kallis.
See juhend selgitab, millal see end ära tasub, mida see sisaldab ja kuidas alustada ilma kuudepikkuse projektita.
Millal seda vaja on#
Disainisüsteem lahendab järjepidevuse ja korduvuse probleemi. Kui neid ei ole, ei ole ka probleemi.
| Olukord | Kas vajad süsteemi? |
|---|---|
| Viie lehega ettevõtte leht | Ei — stiilijuhend piisab |
| Kasvav leht, uued lehed igal kuul | Jah, kergel kujul |
| Mitu inimest kujundab või arendab | Jah |
| Mitu toodet või veebilehte sama brändiga | Jah, kindlasti |
| Leht, mida uuendatakse kord aastas | Ei |
| Rakendus paljude vormide ja seisunditega | Jah |
Kõige levinum viga on ehitada täielik disainisüsteem viie lehega lehele. See on kuu tööd, mida keegi ei kasuta.
Mida see sisaldab#
Kihiti, kõige püsivamast kõige muutuvamani.
- Märgised: värvid, vahed, tüpograafia, raadiused, varjud — nimedena, mitte väärtustena koodis.
- Tüpograafia skaala: piiratud hulk suurusi ja kaale.
- Vahede skaala: üks süsteem, näiteks nelja kordsed.
- Baaskomponendid: nupp, link, vormiväli, silt, teade.
- Liitkomponendid: kaart, tabel, navigatsioon, modaal.
- Mustrid: kuidas komponente koos kasutatakse tüüpolukordades.
- Sisureeglid: toon, nuppude sõnastus, veateadete stiil.
- Dokumentatsioon: millal mida kasutada, mitte ainult kuidas see välja näeb.
Kõige väärtuslikum osa on «millal mida kasutada». Komponentide galerii ilma reegliteta ei hoia järjepidevust.
Kuidas alustada väikselt#
Kerge süsteem, mille saab nädalaga püsti panna ja mis katab enamiku kasust.
- Kirjuta olemasolevad värvid ühte faili CSS-muutujatena ja kustuta duplikaadid.
- Määra vahede skaala ja asenda juhuslikud väärtused sellega.
- Piira tüpograafia viie kuni kuue suuruseni.
- Ühtlusta nupud üheks komponendiks kõigi seisunditega.
- Ühtlusta vormiväljad koos siltide ja veateadetega.
- Dokumenteeri need ühel lehel koos näidetega — päris lehel, mitte eraldi tööriistas.
- Lisa uusi komponente ainult siis, kui sama muster kordub kolmandat korda.
Kuidas seda elus hoida#
Enamik disainisüsteeme ei sure ehitamise vaid hooldamise puudumise tõttu.
| Risk | Mis juhtub | Vastumeede |
|---|---|---|
| Keegi ei vastuta | Süsteem lahkneb päris lehest | Nimeline omanik |
| Erandid lisanduvad | Iga leht saab oma variandi | Erand nõuab põhjendust |
| Dokumentatsioon vananeb | Keegi ei usalda seda | Dokumentatsioon päris koodist |
| Liiga palju komponente | Keegi ei leia õiget | Reegel: kolmas kordus |
| Kujundus ja kood lahknevad | Kaks tõde | Ühised märgised mõlemal pool |
| Süsteem on liiga range | Inimesed lähevad mööda | Luba põhjendatud erandid |
Korduma kippuvad küsimused
Kas väike ettevõte vajab disainisüsteemi?
Täismahus ei. Kuid isegi väikesel lehel tasub kokku leppida värvid, vahed ja tüpograafia ühes failis — see on tunni töö ja hoiab ära aastate jooksul tekkiva segaduse. Nimeta seda stiilijuhendiks ja ära ehita komponentide galeriid, mida keegi ei ava.
Kaua disainisüsteemi ehitamine võtab?
Kerge versioon — märgised, tüpograafia, vahed, nupud, vormid — võtab nädala. Täielik süsteem dokumentatsiooni ja kõigi komponentidega võtab kuid ja vajab pidevat hooldust. Alusta kergest ja kasvata seda ainult siis, kui päris vajadus tekib.
Kas peaks kasutama valmis komponentiteeki?
Sageli jah, eriti rakenduste puhul. Valmis teek lahendab ligipääsetavuse ja seisundid, mida on ise tüütu õigesti teha. Kohanda selle märgiseid oma brändiga, selle asemel et kõike nullist ehitada. Nullist tasub ehitada siis, kui bränd on eristumise osa või kui vajadused on ebatavalised.
Kes peaks disainisüsteemi omama?
Üks nimeline inimene, mitte meeskond. Ilma omanikuta lahkneb süsteem päris lehest umbes poole aastaga ja muutub dokumendiks, mida keegi ei usalda. Omanik ei pea kõike ise tegema, kuid ta peab otsustama, mis süsteemi lisatakse ja mis on erand.
disainisüsteemkomponentide teekstiilijuhend veebilehtcss muutujaddisaini märgisedkujunduse järjepidevus
