Demo 2, Adobe XD

XD demo

  1. Tallenna työ itsellesi paikallisesti (File / Save As Local Document), valitse sijainniksi GitHub-reposi. Nimeä esim. demo2.xd.
  2. Lisää arboard desktop-näkymälle ja mobiiliversiolle. Desktop-näkymä voi olla 1920 x 1080 ja Mobiili-näkymä 375 x 1800.
  3. Näytä layout grid (View / Show Layout Grid)
  4. Lisää käytettävät värit
  5. Lisää ensimmäiset tarvitsemasi objektit. Yleensä pääset pitkälle suorakulmioilla ja teksteillä.
  6. Oikeassa yläkulmasta löytyvät tasaustoiminnot ovat usein avuksi. Voit liikuttaa näkymää painamalla hiiren rulla-painikkeen pohjaan ja liikuttamalla hiirtä.
  7. Kun tietyt objektit kuuluvat yhteen käytä Group (ja Ungrup) toimintoja yhdistääksesi ne kokonaisuudeksi.
  8. Tallenna itsellesi sopiva placeholder-kuva, voit raahata sen objektille resurssinhallinnasta.

Rautalankamallista seuraava askel on laatia yksinkertainen html/css-prototyyppi sivustosta. Tässä vaiheessa saadaan jo mm css-määrittelyt tehtyä melko pitkälle.