Systeemityö ja projektityöskentely

Sorakuilu

Adobe XD

Adobe XD soveltuu erinomaisesti nopeaan suunnitteluun. Sen avulla voi luoda yhden sivun suunnitelmia, prototyypin, jossa voi liikkua sivulta toiseen. Sillä tehdyn luonnoksen voi tallentaa ja tulostaa kuvana tai jakaa pilvipalvelun kautta asiakkaille.

Hyvät ohjeita sekä yhden sivun suunnitteluun (design) että prototyypin suunnitteluun:

Tuntidemo

Käyttöliittymästä

XD:llä on kaksi erilaista näkymää Design ja Prototype. Design-näkymässä laaditaan yhden tai useamman sivun ulkoasuja ja prototyyppi-näkymässä suunnitelaan sitä, miten sivut liittyvät toisiinsa.

  1. Aloita uusi projekti (voit aloittaa jollain etukäteen määritetyllä koolla) - valitse etusivulle avautuvista vaihtoehdoista sopiva tai luo oma

    xdalku

  2. Kun dokumentti on luotu ja saat suunnittelunäkymän eteesi, tallenna se heti. Dokumentti tallentuu .xd-muodossa. Jos haluat myöhemmin siirtää sen johonkin muuhun tiedostomuotoon, anna komento File - Export..
  3. Lisää ja muokkaa sivuja
    • Valitse luomasi pohja (artboard)
    • Nimeä se (yläosan nimikenttä)
    • Pohjan kokoa voi muuttaa joko reunasta vetämällä tai oikean reunan ominaisuusvalikoista
    • Pohjan väriä voi myös vaihtaa ominaisuusvalikosta
    • Voit lisätä erilaisia pohjia valitsemalla artboard-työkalun vasemmasta reunasta, jolloin oikeaan reunaan tulee valintalista valmiista pohjista

      lisää pohjia

    • Käytä suurennuslasia nähdäksesi kaikki pohjat
    • Pohjien järjestystä työtilassa voi muuttaa raahaamalla
  4. Layout-gridin ja verkkogridin (ruudukon hyväksikäyttö)
    • valitse pohja - valitse Layout, valitse gridin asetukset: voit vaihtaa gridin kokoa, värejä, sarakkeiden väliä, marginaaleja, tehdä gridistä oletuksen

      xdalku

    • jos haluat käyttää Bootstrapia, laita 12 saraketta
    • grid toimii suunnittelun apuvälineenä, elementit "nappaavat" kiinni siihen
    • mobiiliversioissa käytetään verkkogridiä
  5. Ulkoisten kirjastojen käyttö:
    • Hae sopiva kirjasto File - Get UI Kits, lataa ja avaa se
    • Hae valmiit elementit, kopioi ja liitä suunnitelmaasi, (sulje kirjasto)

Aloita XD projekti - sivun suunnittelu Pinskyä mukaillen

Tallenna aluksi itsellesi tarvittavat kuvat ja tekstit.

  1. vuori.jpg
  2. torni.jpg
  3. lampaat.jpg
  4. piano.jpg
  5. putous.jpg
  6. joki.jpg
  7. kuvatekstit.txt

1. Design - yhden ruudun suunnittelu

Sivuun tulee seuraavia elementtejä: header, teksti, kuva, kuvagalleria, lopputulos on suurin piirtein seuraava:

malli

2.Prototyypin suunnittelu