Opi luomaan verkkosivustojen prototyyppejä ja lankamalleja Adobe Musessa.

Huomautus:

Adobe Museen ei enää lisätä uusia ominaisuuksia ja sen tuki päättyy 26. maaliskuuta 2020. Lisätietoja ja tukea on kohdassa Adobe Musen elinkaaren päättymissivu.

Adobe Musen käyttö on hyvin intuitiivista, minkä lisäksi ohjelmistolla voi nopeasti luoda prototyyppejä sivustoprojekteista ja tarkastella niitä verkossa. Voit lähettää mahdollisille asiakkaille linkkejä luomiisi esimerkkisivustoihin, jolloin he voivat tutkia prototyyppejä verkossa samoilla selaimilla, joita käytettäisiin sivuston lopullisen version katseluun. Näin asiakkaat saavat käsityksen siitä, miltä valmis sivusto tulee näyttämään.

fig01.wireframe.b720
Lankamalleissa sivun elementtien sijainnit on määritetty paikkamerkeillä.

Lukemalla lisää näet, miten voit suunnitella lankamalleja, luoda jäsennellyn suunnitelmanäkymän ja luoda paikkamerkkielementtejä sivustoa varten. Voit korvata paikkamerkkielementit todellisilla sivuelementeillä, kun sisältö on valmis.

Lankamallien käyttö

Lankamallit esittävät sivuston asettelun ja mahdollistavat sivuston koekäytön napsauttamalla sen sisäisiä linkkejä. Kun olet tutustunut lankamalleihin, avaa julkaistu sivusto ja vertaa lankamalleja lopulliseen versioon. Huomaa, miten lankamallien paikkamerkit on sivuston lopullisessa versiossa korvattu grafiikoilla.

Jos haluat tutkia lankamallien rakennetta, voit ladata itsellesi esimerkkitiedostot (ZIP, koko 4,5 Mt). Pura ZIP-tiedosto, avaa kansio ja etsi tiedosto KevinsKoffeeKartWire.muse. Avaa lankamallit Adobe Musessa kaksoisnapsauttamalla tiedostoa. Suunnittele-näkymässä näet, miten eri sivut on järjestetty mallissa eri tasoille, jotka muodostavat sivukartan. Kun kaksoisnapsautat yksittäistä sivua, se avautuu Muoto-näkymään, jossa voit tarkastella sen rakennetta.

Adobe Musessa on useita lankamallien luomista helpottavia toimintoja.

  • Muoto-näkymässä voi ottaa käyttöön palstaruudukon, joka helpottaa elementtien kohdistamista asettelussa.
  • Monipuolisilla piirtotyökaluilla grafiikoiden paikkamerkkikuvat syntyvät vaivattomasti.
  • Kohteet-paneelin toiminnot auttavat paikkamerkkikuvien päivittämisessä.
  • Adobe Muse optimoi, viipaloi ja vie kaikki kuvatiedostot, kun julkaiset tai viet sivuston ohjelmistosta.
  • Rakenteisten sivujen luominen ja tekstin muotoilun muokkaaminen käy helposti tekstin ylätunnisteiden ja kappaletyylien avulla.
  • Sijoita-komennolla voit tallentaa asiakkaan logon suoraan selaimesta ja sijoittaa sen Adobe Muse -tiedostoon.
fig02.wireframe.b720
Lisää brändielementtejä lankamalleihin nopeasti ja helposti valitsemalla Tiedosto > Sijoita.

Lankamallien luominen asiakkaalla hyväksytettäviksi

Ensimmäisen asiakastapaamisen jälkeen voit luoda lankamalleilla sivuston raakaversion, jossa sivujen elementit ja niiden toiminnot näkyvät oikeilla paikoillaan. Mallissa ei kuitenkaan käytetä lopullisen version grafiikoita ja tekstimuotoiluja. Lankamallin tarkoitus on esittää kunkin sivun perusrakenteet niin, että tuloksena on paljas malli verkkosisällöstä ilman värejä tai muita visuaalisia sisältöjä. Kuvien paikkamerkkeinä käytetään usein suorakulmioita ja sivuston tekstisisällön esittämiseen taas käytetään käsinkirjoitettuja tai geneerisiä kirjasimia.

Nämä ovat lankamallien edut:

  • Asiakas voi keskittyä sivuston rakenteeseen ja saa käsityksen sivujen asetteluista.
  • Malli tarjoaa interaktiivisen kokemuksen sivuston toiminnoista, jolloin asiakkaiden on helpompi arvioida sivustoa hyväksymistä varten.
  • Mallien avulla sivuston rakennetta ja toimintoja on helppo esitellä.

Varsinaisen web-suunnittelun lisäksi Adobe Muse sopii erinomaisesti myös projektien prototyyppien luomiseen. Voit helposti luoda julkaistun URL-osoitteen testausta varten ja lähettää sen asiakkaalle sähköpostitse, mikä yksinkertaistaa suunnitelmien hyväksyttämistä. Se ei kuitenkaan ole Adobe Musessa luotavien lankamallien ainoa etu.

Adobe Musen lankamallitoimintojen tuottavuusaspekti on askelen muita suunnittelutyökaluja edellä, sillä kahteen suuntaan toimivat kuvanmuokkausominaisuudet ja muokattavat kappaletyylit mahdollistavat .muse-tiedoston helpon päivittämisen ja hyväksyttyjen lankamallien nopean muuntamisen lopulliseksi julkaistavaksi versioksi. Sen sijaan, että hävittäisit lankamallit saatuasi asiakkaan hyväksynnän ja aloittaisit projektin rakentamisen alusta, voit saman tien ryhtyä päivittämään varsinaista sisältöä hyväksyttyihin lankamalleihin ja rakentamaan lopullista versiota sitä kautta. Voit myös julkaista useita testaussivustoja matkan varrella ja esitellä siten eri työvaiheita asiakkaalle linkkien avulla työn edetessä.

Seuraa tätä työnkulkua, kun käytät lankamalleja sivustojen rakentamiseen.

  • Rakenna lankamallit ja julkaise maksuton testiversio.
  • Asiakas arvioi julkaistun testisivuston tutustumalla sivuihin.
  • Asiakas pyytää muutoksia tai selvennystä johonkin rakenteelliseen seikkaan.
  • Kun olet tehnyt pyydetyt korjaukset, asiakas hyväksyy lankamallit.
  • Päivitä lankamallisivusto lisäämällä siihen grafiikkaelementit ja värit.
  • Muotoile olemassa oleva tekstisisältö päivittämällä kappaletyylit.
  • Asiakas arvioi sivuston päivitetyn version ja pyytää lisää muutoksia.
  • Tee pyydetyt muutokset.
  • Asiakas hyväksyy lopullisen version.
  • Päivitä sivusto, määritä toimialue ja julkaise lopullinen sivusto.

Sivun rakenteen tarkastelu Adobe Musen Suunnittele-näkymässä

Pääset näkemään, miten sivuston sivujen hierarkia määrittää navigointilinkkien ylemmät ja alemmat tasot, kun avaat lankamallisivuston .muse-tiedoston Adobe Musessa ja analysoit sen. Kun avaat projektin, näkyviin tulee Suunnittele-näkymä, joka sisältää kaikki sivuston sivut.

fig03.wireframe.b720
Lankamallien sivut näkyvät Suunnittele-näkymässä.

Huomaa, että sivukartan hierarkia on toteutettu kahtena tasona, ylempänä ja alempana. Voit milloin tahansa sivuston kehityksen tai ylläpidon aikana vaihtaa sivujen paikkaa sivuston rakenteessa napsauttamalla ja vetämällä.

Uusien sivustojen luonti:

  1. Napsauta ensin olemassa olevien sivujen oikealla puolella tai alla olevaa plusmerkkiä (+), sitten sivun nimikenttää ja kirjoita sivulle nimi. 

    Anna jokaiselle sivulle mahdollisimman kuvaava nimi.

  2. Napsauta sivun miniatyyria hiiren kakkospainikkeella ja käytä pikavalikosta monistus-, poisto- tai uudelleennimeämistoimintoja.

    Voit poistaa sivun myös pitämällä hiirtä sivun kohdalla ja napsauttamalla sen oikeaan yläkulmaan ilmestyvää X-kuvaketta.

  3. Harjoittele nyt sivukartan muokkaamista lisäämällä, siirtämällä ja poistamalla sivuja. Jos haluat palauttaa lankamallisivuston aiempaan tilaansa, valitse Muokkaa > Kumoa.

    Suunnittele-näkymän käyttö on helppo oppia, ja Adobe Muse pitää kirjaa kaikkien sivujen nimistä ja ylläpitää valikkowidgeteissä näkyviä linkkejä. Kaikki tekemäsi muutokset päivittyvät automaattisesti, jotta linkit eivät rikkoudu.

Samoja määritteitä käyttävien paikkamerkkielementtien luominen grafiikkatyylien avulla

Adobe Illustrator- ja Adobe Photoshop -ohjelmistojen tavoin Adobe Muse auttaa sinua luomaan grafiikkatyylejä, joiden avulla saat elementtiryhmiin yhtenäisen ulkonäön ja käyttötuntuman. Tämä ominaisuus on hyödyllinen lankamallien luomisessa (sekä sivujen suunnittelussa), koska muokkaamalla olemassa olevaa grafiikkatyyliä voit nopeasti päivittää kaikki kyseistä tyyliä käyttävät elementit. Voit myös kopioida tyylejä luodaksesi niistä muunnelmia.

Näin annat määritteitä muodoille ja luot paikkamerkkejä lankamallisivuston kuvatiedostoille käyttämällä grafiikkatyylejä:

  1. Piirrä Muoto-näkymässä sivulle kolme suorakulmiota suorakulmiotyökalulla.

  2. Valitse yksi suorakulmio ja määritä sen viivan väri, täyttöväri ja peittävyys sekä lisää graafiset tehosteet, kuten varjot.

  3. Kun suorakulmio on yhä valittuna, valitse Grafiikkatyylit-paneelin alaosasta Luo uusi grafiikkatyyli. Uusi tyyli luodaan valitun suorakulmion muotoilun perusteella. Kaksoisnapsauta uutta grafiikkatyyliä ja anna sille kuvaava nimi.

  4. Valitse yksi muista suorakulmioista ja ota sille käyttöön sama grafiikkatyyli napsauttamalla tyylin nimeä. Ota tyyli käyttöön kolmannelle suorakulmiolle samalla tavoin, jolloin kaikkien kolmen suorakulmion tyyli on sama.

  5. Valitse yksi suorakulmio ja muokkaa sitä niin, että sen tyyli muuttuu hieman. Huomaa, että silloin Grafiikkatyylit-paneeliin ilmestyy muokatun tyylin nimen kohdalle plusmerkki (+).

  6. Napsauta tyylin nimeä Grafiikkatyylit-paneelissa hiiren kakkospainikkeella ja valitse Määritä tyyli uudelleen. Nyt myös toiset suorakulmiot päivittyvät uuden tyylin mukaisiksi ja plusmerkki (+) katoaa.

  7. Grafiikkatyylien avulla voit luoda nopeasti yhtenäisiä lankamalleja muokkaamalla muotoja sekä päivittää useita sivuston kohteita vaivattomasti, jos asiakas vaatii niihin muutoksia.

Rakenteisten sivustojen rakentaminen ja tekstin muotoilu kappaletyylien avulla

Rakentaessasi lankamallisivustoa voit luoda tekstityökalulla tekstikehyksiä ja lisätä niihin paikkamerkkitekstiä (eli lorem ipsumia), jonka korvaat myöhemmin. Tai jos asiakkaallasi on jo sivusto, voit kopioida tekstin suoraan selaimesta ja liittää sen tekstikehyksiin. Kun olet luonut tekstielementit, voit muotoilla tekstiä Teksti-paneelissa.

Kappaletyylien avulla voit jäsentää sivun tekstisisällön määrittämällä ylätunnisteen tekstin ja kappaleiden nimiöt.

  1. Vedä Muoto-näkymässä tekstikehys sivulle Teksti-työkalulla. Kirjoita teksti tekstikehykseen tai kopioi ja liitä se.

  2. Määritä muotoiluasetukset, kuten kirjasin, kirjasinkoko, kirjasimen väri ja muut ominaisuudet joko Teksti-paneelissa tai Muoto-näkymän työtilan yläosan ohjauspaneelissa.

  3. Luo uusi kappaletyyli valitsemalla Kappaletyylit-paneelin alaosasta Luo uusi kappaletyyli. Kaksoisnapsauta uuden tyylin nimeä ja anna sille uusi kuvaava nimi.

  4. Napsauta tyyliä hiiren kakkospainikkeella ja valitse Tyyliasetukset. Avaa Kappaleen nimiö -valikko ja määritä kappaletyyli tietylle HTML-nimiölle, kuten P, H1, H2 tai H3.

    fig04.wireframe.b720
    Napsauta tyylin nimeä Kappaletyylit-paneelissa hiiren kakkospainikkeella ja määritä tyyli tietylle ylätunnisteen tai kappaleen nimiölle Tyyliasetukset-valintaikkunassa.

  5. Luo vielä muutama tekstikehys ja kirjoita niihin tekstiä. Huomaa, että jos napsautat kappaletyylin nimeä, kun tekstikehys on valittuna, kyseisen kappaletyylin muotoilu otetaan käyttöön valitussa tekstikehyksessä. Jos valitset myöhemmin jonkin tiettyä kappaletyyliä käyttävistä tekstikehyksistä ja muokkaat sitä, tyylin nimen viereen Kappaletyylit-paneelissa tulee plusmerkki (+). Merkintä tarkoittaa, että tyyliä on muokattu ja se käyttäytyy samalla tavoin kuin grafiikkatyylien yhteydessä.

  6. Voit päivittää automaattisesti kaikki samaa tyyliä käyttävät tekstikehykset napsauttamalla tyylin nimiä Kappaletyylit-paneelissa hiiren kakkospainikkeella ja valitsemalla Määritä tyyli uudelleen.

    Kuten esimerkistä käy ilmi, voit siis luoda erilaisia tekstikehyksiä ja luoda sivustolle yhtenäisen ilmeen määrittämällä kehykset käyttämään tiettyjä tyylejä. Kun sitten pääset päivittämään lankamalleja luodessasi sivuston lopullista versiota, tyylit on helppo muokata asiakkaan toiveiden mukaisiksi. Tekstikehyksiä sisältävien rakenteisten sivujen luominen kannattaa, koska se helpottaa hakukoneoptimointia.

Huomautus:

Jos käytät sivustossa yhtenäisiä taustavärejä, valitse samat värit myös tekstikehysten taustan täyttöväreiksi. Näin Adobe Muse voi julkaista tekstisisältöä helpommin. Jos taustan täyttöväriä ei ole määritetty, tekstin pehmennys ei näytä julkaistaessa yhtä tasaiselta kuin Adobe Musessa, koska Muse määrittää tällöin tekstikehyksen taustavärin läpinäkyväksi. Jos kuitenkin käytät sivun taustassa liukuväriä tai kuvia, jätä tekstikehysten täyttövärin asetukseksi Ei mitään.

Sivun lopullisten grafiikoiden päivittäminen paikkamerkkikuvien tilalle

Kun asiakas on hyväksynyt lankamallisivuston, voit nopeasti päivittää siihen lopulliset kuvatiedostot.

  1. Valitse sivulta jokin kuvan paikkamerkki.

  2. Avaa Kohteet-paneeli ja etsi valitsemasi sivun elementti.

  3. Napsauta elementtiä hiiren kakkospainikkeella. Avautuva valikko sisältää kaksi vaihtoehtoa kuvatiedoston päivittämiseen. Valitse sopivampi sen mukaan, miten olet koonnut lankamallisivuston.

    Jos olet luonut tiedoston Adobe Photoshop- tai Adobe Fireworks -ohjelmistossa ja sijoittanut sen sivulle, valitse Muokkaa alkuperäistä, jolloin pääset muokkaamaan alkuperäistiedostoa siinä ohjelmistossa, jossa loit sen. Tallenna sitten alkuperäistiedosto ja palaa Adobe Museen, jolloin kaikki kyseisen tiedoston kopiot sivustossa päivittyvät automaattisesti.

    Jos taas olet luonut paikkamerkit kuvatiedostoille Adobe Musessa suorakulmiotyökalulla, valitse Linkitä kaikki esiintymät uudelleen ja vaihda paikkamerkin tilalle lopullinen grafiikkatiedosto etsimällä tiedosto tietokoneeltasi.

    fig05.wireframe.b720
    Napsauta kohteen nimeä hiiren kakkospainikkeella ja valitse Muokkaa alkuperäistä, jolloin paikkamerkin alkuperäistiedosto avautuu siinä kuvankäsittelyohjelmassa, jossa se on luotu.

  4. Vaihda kaikki sivun paikkamerkkikuvat lopullisiin kuvatiedostoihin samalla tavoin.

    Huomautus:

    Napsauttaessasi kohteen nimeä Kohteet-paneelissa voit myös valita vaihtoehdon Siirry kohteeseen. Silloin Adobe Muse avaa sivun, joka sisältää valitun kohteen ja voit päivittää sen nopeasti.

Adobe Musen luomien optimoitujen kuvatiedostojen käyttö

Sen lisäksi, että julkaiset luomasi Adobe Muse -sivustot isäntäpalvelimessa, voit myös viedä koko sivuston ulos ohjelmistosta, jolloin saat käyttöösi viipaloidut ja viedyt kuvatiedostot sisältävän kansion.

  1. Valitse Tiedosto > Vie HTML-tiedostona.

    Vie HTML-tiedostona -valintaikkuna avautuu.

  2. Valitse tietokoneestasi sijainti, johon haluat viedä tiedostot, ja valitse OK.

Tämän jälkeen Adobe Muse vie tiedostot ja tallentaa ne määrittämääsi paikalliseen kansioon. Kun avaat kuvakansion, optimoidut kuvatiedostot ovat käytettävissäsi. Voit vaihtaa kuvatiedostojen käyttötarkoitusta ja käyttää niitä esimerkiksi uutiskirjeissä, mobiilisovelluksissa, yhteisöpalveluissa ja muissa projekteissa.

Lisensoitu Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License -lisenssin mukaan.  Creative Commons -lisenssien ehdot eivät koske Twitter™- ja Facebook-viestejä.

Lakisääteiset ilmoitukset   |   Online-tietosuojakäytäntö