Demo 2, Adobe XD

XD demo

  1. Tallenna työ itsellesi paikallisesti, valitse sijainniksi GitHub-reposi. Nimeä esim. demo2.xd.
  2. Lisää arboard desktop-näkymälle ja mobiiliversiolle (Samsung Galaxy)
  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.