Suunnittelijalta koodarille

Kun suunnittelija on saanut visuaalisen suunnittelun päätökseen, tulee hänen toimittaa koodareille tarvittavat materiaalit.

Ulkoasut

Visuaalisen suunnittelijan on varmistettava, että uusin hyväksytty versio löytyy aina Zeplinistä tai XD:stä (työkalusta lisää kohdassa Työkalut & Workflow).

Jos Adobe XD käytössä, XD prototyyppi on jaettava Specs -tilassa, jotta koodari voi tarkastella yksityiskohtaisesti ulkoasussa olevia elementtejä.

Valokuvat

Kuvat toimitetaan Adobe XD:n Specs -näkymän tai Zeplinin kautta ladattavina assetteina. Suunnittelijan on huolehdittava, että kaikki kuvat ovat ladattavissa. Kuvat ovat valmiiksi leikattuja ja syvättyjä. CSS-koodeja yms. ei tarvitse, assetit riittää. Tarvittaessa suunnittelija voi toimittaa devaajalle valokuvat zip-paketissa.

Fontit

Emme käytä Adobe/Typekit/Google -upotuksia, vaan fontit olisi hyvä olla tiedostoina paremman toimivuuden, hallinnan ja latausnopeuksien vuoksi, näin säästymme ylimääräiseltä ulkoiselta HTTP-kutsulta.

Paikallisilla fonteilla varaudumme myös, että sivusto toimii ilman JS:ää eikä Adblockerit tai muut tietoturvatyökalut blokkaa fonttien latautumista. Jos muita webfonttimuotoja ei ole saatavilla, .ttf riittää.

Logo sekä kuvakkeet

Logoista ja kuvakkeista tarvitaan taittoa varten SVG-versiot, jotta sivustolle saadaan retinaa tukeva moderni versio, joka näkyy joka laitteella terävästi. Logot ja kuvakkeet toimitetaan Adobe XD:n Specs -näkymässä.

Joissain tapauksissa logot tai kuvakkeet voidaan toimittaa suoraan koodarille. Tällöin ne tulee tallentaa Illustratorissa käyttäen Presentation attributes -asetusta, jolloin SVG-tiedostoon ei tule ylimääräisiä inline style-määritteitä. Filleinä tai strokeina tulee olla currentColor-arvo hexan sijaan, näin väri saadaan määriteltyä koodeitse helpommin.

Tarvittaessa, monimutkaisempien SVG-kuvakkeiden kohdalla voidaan käyttää style-attributes-määrityksiä, mutta nämä varmistellaan aina erikseen.