Designjärjestelmä verkkosivuille: milloin se kannattaa
Designjärjestelmä on jaettu joukko visuaalisia päätöksiä ja uudelleenkäytettäviä komponentteja. Hyvin tehtynä se nopeuttaa kaikkea myöhempää työtä. Väärin mitoitettuna siitä tulee rinnakkaisprojekti, joka syö aikaa ja vanhentuu.
Tämä opas näyttää mitä sisällyttää, milloin se kannattaa, ja miten aloittaa rakentamatta kirjastoa jota kukaan ei käytä.
Mitä se sisältää, olennaisesta lisukkeisiin#
Aloita listan yläpäästä. Ensimmäiset kohdat ratkaisevat suurimman osan ongelmasta.
| Kerros | Sisältö | Prioriteetti |
|---|---|---|
| Perustat | Värit, typografia, välistysasteikko | Olennainen |
| Elementit | Painikkeet, kentät, linkit, merkit | Olennainen |
| Mallit | Lomakkeet, kortit, navigaatio, taulukot | Korkea |
| Sivupohjat | Kokonaiset sivuasettelut | Keskitaso |
| Kirjoitusohjeet | Sävy, nimikkeet, virheilmoitukset | Korkea ja usein unohdettu |
| Käyttösäännöt | Milloin käyttää mitäkin komponenttia | Keskitaso |
| Elävä dokumentaatio | Esimerkit jotka ajavat oikeaa koodia | Riippuu laajuudesta |
Kirjoitusohjeet ovat aliarvioiduin kerros. Epäjohdonmukaiset nimikkeet ja viestit haittaavat kokemusta yhtä paljon kuin epäjohdonmukaiset komponentit.
Milloin se kannattaa#
Designjärjestelmällä on luomis- ja ylläpitokustannus. Se kannattaa, kun toistoa on tarpeeksi sen kuolettamiseen.
- Useita tuotteita tai sivustoja, joiden pitää näyttää samalta brändiltä.
- Tiimi, jossa useampi kuin yksi suunnittelee tai rakentaa käyttöliittymiä.
- Iso sivusto, jossa on monta mallipohjaa ja odotettavissa kasvua.
- Toimittajien vaihtuminen, jossa johdonmukaisuus riippuu dokumentaatiosta.
- Ei kannata: kymmenen sivun yrityssivusto yhdellä vastuuhenkilöllä.
- Ei kannata: kun sivusto rakennetaan joka tapauksessa uusiksi vuoden sisällä.
- Näissä tapauksissa tyylitiedosto väreineen, kirjasimineen ja painikkeineen riittää täysin.
Aloittaminen pienestä#
Luotettavin tapa saada designjärjestelmä on poimia se siitä mitä jo on, sen sijaan että suunnittelisi abstraktiossa.
- Tee inventaario: kaappaa kaikki painikkeet, kentät ja kortit nykyiseltä sivustolta.
- Löydät liikaa variantteja. Valitse kustakin yksi ja poista loput.
- Määrittele tokenit: värit, kirjasimet, välistykset, pyöristykset, varjot — nimettyinä muuttujina.
- Rakenna ne viidestä kymmeneen komponenttia, jotka esiintyvät kaikkialla.
- Dokumentoi kukin tiloineen ja merkinnällä siitä milloin sitä käytetään.
- Sovella oikeaan mallipohjaan ennen kuin jatkat; soveltaminen paljastaa mitä puuttuu.
- Vasta sitten laajenna, ja vain kun komponenttia tarvitaan useammin kuin kahdesti.
Oikeasta sivustosta poimittua järjestelmää käytetään; abstraktiossa suunniteltu näyttää nätiltä dokumentaatiossa ja jää käytännössä huomiotta.
Miten designjärjestelmät kuolevat#
Vikatilat ovat ennustettavia ja lähes kaikki organisatorisia.
| Vikatila | Merkki | Ehkäisy |
|---|---|---|
| Kukaan ei ole vastuussa | Lakkaa päivittymästä | Omistaja, jolla on varattua aikaa |
| Eri tahtiin koodin kanssa | Dokumentaatio valehtelee | Generoi oikeasta koodista |
| Liian jäykkä | Tiimit kiertävät sen | Salli dokumentoidut poikkeukset |
| Liian iso | Kukaan ei löydä mitään | Aloita kymmenellä komponentilla |
| Sitoutuminen puuttuu | Kaksoiskomponentteja järjestelmän ulkopuolella | Ota käyttäjät mukaan alusta |
| Vain suunnitelma, ei koodia | Kehittäjät toteuttavat käsin | Oikeat komponentit, ei pelkkiä näkymiä |
Usein kysytyt kysymykset
Tarvitsenko designjärjestelmän pienelle sivustolle?
Et. Yrityssivustolle yhdellä vastuuhenkilöllä riittää tyylitiedosto väreineen, typografioineen, välistyksineen ja muutamine komponentteineen, ja se täyttää saman tehtävän. Muodollinen järjestelmä kannattaa vasta kun useampi henkilö tai useampi tuote pitää pysyä yhtenäisenä.
Kauanko sen luominen kestää?
Käyttökelpoinen ensimmäinen versio — tokenit plus kymmenen komponenttia — kestää kahdesta neljään viikkoa. Täydellinen järjestelmä dokumentaatioineen, koodeineen ja ohjeineen kestää kuukausia eikä tule koskaan oikeasti valmiiksi, koska se seuraa tuotetta. Aloita pienestä ja sovella aikaisin sen sijaan että tähtäisit täydellisyyteen ennen käyttöä.
Pitäisikö käyttää valmista kirjastoa?
Usein kyllä, erityisesti sisäisissä sovelluksissa, joissa visuaalinen identiteetti merkitsee vähemmän kuin vauhti. Kypsä kirjasto antaa saavutettavat ja testatut komponentit heti. Mukauta se omilla tokeneillasi sen sijaan että rakentaisit kaiken alusta — saavutettavien komponenttien rakentaminen nollasta on enemmän työtä kuin miltä näyttää.
Kenen pitäisi vastata designjärjestelmästä?
Nimetyn henkilön, jolla on todella varattua aikaa. Ilman omistajaa järjestelmä vanhentuu kuukausissa ja muuttuu esteeksi avun sijaan, koska dokumentaatio lakkaa vastaamasta tuotetta. Tämä on yleisin vikatila, ja se on organisatorinen eikä tekninen.
designjärjestelmäkomponenttikirjastodesigntokenittyyliopasvisuaalinen johdonmukaisuusuudelleenkäytettävät komponentit
