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 XD:stä (työkalusta lisää kohdassa Työkalut & Workflow). 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ää.

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.

Viimeksi muokattu käyttäjän Roni Laukkarinen toimesta viestillä "Replace http links with https", katso muutos 1688cb9 GitHubissa. Näytä versiohistoria.

14.8.2020 15:00:14 Muokattu käyttäjän Roni Laukkarinen toimesta viestillä "Replace http links with https", katso muutos 1688cb9 GitHubissa.

20.4.2020 08:00:18 Muokattu käyttäjän Roni Laukkarinen toimesta viestillä "Lisäys fonttien muodosta", katso muutos 0c9e209 GitHubissa.

5.11.2019 07:16:47 Muokattu käyttäjän Timi Wahalahti toimesta viestillä "save", katso muutos 1ceb0af GitHubissa.

5.11.2019 07:06:49 Muokattu käyttäjän Timi Wahalahti toimesta viestillä "fix typo", katso muutos b2832ec GitHubissa.

5.11.2019 07:02:59 Muokattu käyttäjän Timi Wahalahti toimesta viestillä "update and rename graafikolta koodarille", katso muutos 67d39aa GitHubissa.

5.12.2017 09:42:07 Muokattu käyttäjän Roni Laukkarinen toimesta viestillä "Lisää puuttuva sulku", katso muutos c2be70b GitHubissa.

10.10.2017 11:43:38 Muokattu käyttäjän Roni toimesta viestillä "Syncing _pages/graafikolta-koodarille.md from WordPress at https://handbook.dude.fi/wp (Dude Handbook) - wpghs", katso muutos 1bef279 GitHubissa.