Miksi sinun pitäisi käyttää mallikirjastoja
Oletko kuullut mallikirjastoista, tyylioppaista, komponenttikirjastoista, suunnittelumalleista tai käyttöliittymän työkaluista? Älä huoli, jos olet sekava tai et tiedä eroja. Tässä on salaisuus useimmilla suunnittelualojen ihmisillä, jotka ovat myös hieman hämmentyneitä.
Kun kaikki nämä termit purjehtivat, se voi nopeasti tulla ylivoimainen. Mutta ole varma, että se on itse asiassa paljon vähemmän monimutkainen kuin luulisi ensin.
Kaikki nämä eri termit voidaan ryhmitellä kahteen eri luokkaan:
1) tyylioppaat
Nämä ovat tuotemerkin ohjeita verkkosivustolle. Ne sisältävät logon, värit ja typografian. Tyyliopas vie kaikki merkit merkityksellisiksi osiksi ja asettaa ne yhteen.
2) Mallikirjastot / komponenttikirjastot / käyttöliittymän työkalut
Kaikki nämä termit viittaavat samaan asiaan.
Ne ovat kokoelma uudelleenkäytettäviä komponentteja, jotka muodostavat verkkosivuston. Mallikirjastot (kuten viittaan heihin nyt) ovat tapa edustaa kaikkea, mikä muodostaa sivuston. Tämä sisältää asettelun, rakenteen ja kaiken sisällön.
Verkkokauppasivustossa tämä sisältää tuotteen kohteen, arvostelu, tähtiluokitus, määrä, navigointi, taulukot ja painikkeet, muutamia. Jokainen näistä kutsutaan komponentiksi.
Joten kuvakirjasto on kokoelma verkkosivuston muodostavia osia.
Mallikirjastot vs. tyylioppaat
Verkkosivustot vaativat sekä tyyliohjeita että kuvakirjastoja. He usein asuvat yhdessä, mikä saattaa olla jossa paljon sekaannusta tulee.
Style-oppaat käyttävät brändejä, kun taas kuvakirjastot käyttävät ulkoasua ja rakennetta. Esimerkiksi Levis-tyylisuunnitelma sanelee, että verkkosivuston pitäisi käyttää punaista fonttia, mutta kuvakirjasto määrittäisi tuotetietokannasta kuvan, nimikkeen ja hinnan.
Molemmat pyrkivät kohti yhteistä päämäärää - tehdä sivustosta johdonmukainen, tuotemerkki ja käyttäjäystävällinen.
Miksi ne ovat hyödyllisiä?
Tyylikäs oppaiden ja mallikirjastojen yleinen hyöty on johdonmukaisuus. Suunnittelijat rakastavat johdonmukaisuutta, kehittäjät rakastavat johdonmukaisuutta, sivuston omistajat rakastavat johdonmukaisuutta ja mikä tärkeintä, asiakkaasi rakastavat johdonmukaisuutta.
Siksi miksi:
Hyödyt asiakkaille
- Parannettu suorituskyky ja nopeammat verkkosivustot, koska johdonmukaisten komponenttien ja muotoilun ansiosta on vähemmän ja puhtaampia koodeja.
- Johdonmukainen käyttöliittymä koko sivuston kautta helpottaa navigointi-jos tuote näytetään samalla tavalla kaikkialla, sitä on helpompi ymmärtää.
- Parempi selaintuki, koska kuvakirjastojen avulla voimme eristää ja testata komponentteja tarkasti.
Edut sivuston omistajille
- Yksi paikka, joka sisältää kaiken verkkosivuillaan.
- Rakenna uusia sivuja ja osioita nopeasti nykyisten komponenttien avulla.
- Sivusto pysyy nopeana ja vähäisenä, koska uudet osat voivat periä aikaisemmin rakennetut osat.
- Jokainen brändin sivu. Ei poikkeuksia. Style-oppaat tekevät tuotemerkin johdonmukaisuuden, eikä siinä ole haitallisia kirjasimia tai värejä.
- Korkeampi tulosprosentti, koska verkkosivusto on johdonmukainen, mikä tekee sivustosta nopeamman ja tarjoaa jatkuvan käyttäjäkokemuksen koko.
- Parannettu hakukoneoptimointi johdonmukaisista ja hyvin jäsennellyistä osista.
- Huono ja puhdas koodi merkitsee sitä, että tulevaisuuden työ vaatii vähemmän aikaa.
- Parantaa verkkosivujen käyttöiän, koska jatkuvia parannuksia on helpompi tehdä.
Edut kehittäjille
- Kirjoita vähemmän ja parempaa koodia. Tämä tekee koodibaskin huomattavasti helpommaksi työskennellä ja hallita.
- Ei luotettavuutta yhdelle henkilölle. Kaikkien komponenttien on oltava kaikkien käytettävissä, joten uusia osioita ja sivuja ei tarvita.
- Parannettu selaintestaus, joten kun uudet osat kootaan, tiedät, että se toimii kaikissa tuetuissa selaimissa.
- Hyvä dokumentaatio on yleensä rakennettu kuvakirjastoon.
Edut suunnittelijoille
- Kaikki merkki. Jos se on kuvakirjastossa, se on verkkosivustolla. Jokainen osa voidaan tarkistaa varmistaaksesi, että se näyttää hyvältä.
- Kohtuulliset mallit ja ulkoasut. Uudelleenkäytettävät komponentit merkitsevät parempaa suunnittelujärjestelmää.
- Tiedä aina, mitä sivustolla on. Jos tulevaa suunnittelutyötä tarvitaan, kuvakirjastoa voidaan käyttää viitteenä jo olemassa olevalle.
esimerkit
Koska tyylioppaat ja kuvakirjastot ovat suosittuja, niillä on julkisesti saatavilla olevat esimerkit. On jopa koko verkkosivusto, joka on omistettu esitellä niitä.
Seuraavassa on joitain suosikkimme esimerkkejä.
Myyntivoima
Tämä on yksi kiiltävimmistä versioista, joita löydät verkosta. Niiden tyyliopas ja kuvakirjasto sisältää kaiken, mikä on heidän verkkosivuillaan. Huomaat myös, että se sisältää paljon asiakirjoja ja ohjeita siitä, miten komponentit on esitettävä.
uSwitch
Tyyliohjeiden ja mallikirjaston lisäksi, uSwitch ovat päättäneet lisätä kielen ja äänen. Tämä on loistava idea, koska se toimii kaikkien verkkosivujen kattavaksi asiakirjaksi. varmistaen suunnittelun, ulkoasun ja jopa sävyn säilymisen.
Walmart
Kuka olisi ajatellut Walmart olisi yksi parhaista tyylioppaista ja mallikirjastoista noin? Tämä on erinomainen esimerkki sähköisen kaupankäynnin verkkosivustosta, joka käyttää komponentteja sivujen rakentamiseen verkkosivuillaan. Se on luultavasti yksi kattavimmista versioista siellä.
Viraston sisällä
Useimmat esimerkit hyvistä tyylioppaista ja kuvakirjastoista ovat suurille verkkosivustoille. Saattaa olla helppo hypätä siihen johtopäätökseen, että ne ovat hyödyllisiä vain sellaisille sivustoille, joilla on paljon ihmisiä, jotka jatkuvasti työskentelevät.
Luultavasti vain näemme esimerkkejä suurista verkkosivustoista, koska tyylisuunnittelun ja mallikirjaston rakentaminen voi olla merkittävä. Useimmat pienemmät verkkosivustot eivät kykene perustelemaan alun perin tulevaa säästöä verrattuna tuleviin säästöihin.
IWebissä yritämme muuttaa sitä. Tavoitteenamme on tehdä jokaisesta verkkosivustosta mahdollisimman nopea ja vähäinen. Noin 18 kuukautta sitten aloimme rakentaa omaa tyyliopastusta ja kuvakirjastoa. Olemme keksineet sen Hopi hopi .
Koska toimisto pystyy hyödyntämään etuja työskentelemällä kymmeniä hankkeita viikoittain. Tämä ainutlaatuinen verkkosivustokysely antaa meille mahdollisuuden rakentaa tyyliohje ja kuvakirjasto, jota voidaan käyttää kaikilla verkkosivuilla - koosta riippumatta.
Käyttämällä samaa kirjastokoodia jokaisessa hankkeessa voimme ottaa käyttöön paljon enemmän johdonmukaisuutta. Tämä on valtava etu kaikille asiakkaillemme. Projektien johdonmukaisuuden vuoksi useammat kehittäjät voivat työskennellä heille ilman minkäänlaista ennakko-osaamista. Tämä tarkoittaa, ettei kukaan kehittäjä ole sidoksissa projektiin, jolloin työ alkaa nopeammin ja vie vähemmän aikaa.
Ei mitään, mutta hyötyä
Näemme, ettei ole mitään hyötyä siitä, että jokaiselle sivustolle on tyyliopas ja kuvakirjasto. Omien järjestelmien rakentaminen on antanut meille mahdollisuuden alentaa normaalisti tarvittavia alkuoperaatioita. Ajan myötä tämä jatkuu paranee.
Tyylioppaat ja kuvakirjastot tuovat hyötyjä asiakkaille, sivuston omistajille, kehittäjille ja suunnittelijoille. Joten seuraavalla projektilla tai jopa olemassaolevalla, on ehdottomasti syytä kysyä mahdollisuudesta käyttää niitä.