Macalylle ei tarvitse kuvailla kaikkea pelkillä sanoilla. Voit käyttää projektin lähtökohtana myös kuvia, kuvakaappauksia, logoja, luonnoksia, PDF-tiedostoja tai olemassa olevia verkkosivustoja.

Visuaalinen materiaali on hyödyllistä erityisesti silloin, kun haluat näyttää Macalylle, millaista ulkoasua, rakennetta tai käyttöliittymää tavoittelet. Voit käyttää sitä yhtä hyvin verkkosivuston kuin web-sovelluksen rakentamisen tukena.

1. Lisää kuva keskusteluun

Voit lisätä Macalylle kuvan projektin keskusteluun ja kertoa samalla, miten haluat sitä käytettävän.

Käytä tätä kuvaa etusivun yläosan taustakuvana.

Käytä tämän kuvan värimaailmaa projektin visuaalisena lähtökohtana.

Tämä on luonnos sovelluksen hallintapaneelista. Rakenna sen perusteella näkymä, jossa vasemmalla on navigaatio ja oikealla käyttäjän sisältö.

2. Käytä kuvakaappausta esimerkkinä

Kuvakaappaus on helppo tapa näyttää Macalylle haluamaasi rakennetta, käyttöliittymää tai ulkoasua.

Voit käyttää referenssinä esimerkiksi navigaatiota, etusivua, hinnastoa, lomaketta, hallintapaneelia, kirjautumisnäkymää, mobiilinäkymää tai taulukkoa.

Pidän tämän käyttöliittymän rakenteesta. Tee projektiin samantyyppinen sivupalkki ja sisältöalue, mutta käytä meidän omaa värimaailmaamme.

3. Anna Macalylle oma luonnos

Luonnoksen ei tarvitse olla viimeistelty. Voit piirtää paperille tai muulla työkalulla karkean hahmotelman verkkosivusta tai sovelluksen käyttöliittymästä.

Web-sovelluksen luonnoksessa voi olla esimerkiksi navigaatio, käyttäjäprofiili, hakukenttä, taulukko, lomake, toimintopainikkeet tai tilastokortit.

Tämä luonnos näyttää, miten sovelluksen hallintapaneelin pitäisi rakentua. Vasemmalla on navigaatio, ylhäällä yhteenveto ja alhaalla lista asiakkaan projekteista. Toteuta tämän pohjalta selkeä responsiivinen käyttöliittymä.

4. Käytä kuvia visuaalisena esimerkkinä

Voit antaa Macalylle kuvia, joiden avulla näytät haluamaasi tyyliä, värimaailmaa tai tunnelmaa.

Haluan sovelluksen käyttöliittymästä tämän kuvan kaltaisen: selkeä, vaalea ja pelkistetty. Älä kuitenkaan kopioi kuvan sisältöä sellaisenaan. Kuva toimii visuaalisena referenssinä.

5. Lisää logo ja muu oma materiaali

Yrityksen verkkosivustoa tai web-sovellusta rakennettaessa kannattaa antaa Macalylle oikea materiaali mahdollisimman aikaisin.

  • logo
  • yrityksen värit ja brändiohje
  • tuote- ja henkilöstökuvat
  • muu projektissa käytettävä materiaali

Tässä on yrityksemme logo. Käytä sitä projektin ylätunnisteessa ja sovita käyttöliittymän värimaailma logoon.

6. Anna PDF-tiedosto taustamateriaaliksi

Macalylle voidaan antaa myös PDF-tiedostoja projektin lähtömateriaaliksi. PDF voi sisältää esimerkiksi yritysesittelyn, hinnaston, palvelukuvaukset, tuote-esitteen, brändiohjeen tai sovelluksen määrittelyn.

Tässä dokumentissa on kuvattu sovelluksen tärkeimmät ominaisuudet. Käytä sitä projektin toiminnallisuuksien lähtökohtana.

Kerro Macalylle, käytetäänkö tiedostoa sisällön, rakenteen, toiminnallisuuden vai visuaalisen ilmeen lähtökohtana.

7. Käytä olemassa olevaa verkkosivustoa lähtökohtana

Voit antaa Macalylle olemassa olevan verkkosivuston osoitteen ja pyytää sitä käyttämään sivustoa projektin lähtökohtana tai referenssinä.

Tässä on nykyinen verkkosivustomme: yritys.fi. Luo siitä modernimpi versio. Säilytä tärkeimmät sivut ja sisältö, mutta uudista ulkoasu.

Käytä tätä verkkopalvelua visuaalisena referenssinä. Pidän erityisesti sen navigaatiosta ja korttipohjaisesta käyttöliittymästä. Älä kopioi sen sisältöä tai brändiä.

8. Yhdistä visuaalinen materiaali ja kirjallinen ohje

Parhaan lopputuloksen saat yleensä silloin, kun kerrot materiaalin lisäksi myös sanallisesti, mitä Macalyn pitäisi siitä huomioida.

Käytä tämän kuvan käyttöliittymärakennetta lähtökohtana. Pidän vasemmalla olevasta navigaatiosta ja yläreunan tilastokorteista. Älä kuitenkaan käytä kuvan värimaailmaa, vaan säilytä nykyiset brändivärimme.

9. Valitse muokattava kohta Edit design -toiminnolla

Kun projektissa on jo sisältöä, voit käyttää Muokkaa ulkoasua -toimintoa tietyn elementin valitsemiseen. Valitse esimerkiksi teksti, kuva, painike tai muu käyttöliittymän elementti ja muokkaa sitä suoraan tai anna siihen kohdistuva AI-ohje.

Hyvä muistaa

Kerro aina, miksi annat materiaalin Macalylle. Määrittele esimerkiksi käytetäänkö sitä ulkoasun esimerkkinä, sisältönä, käyttöliittymän rakenteena vai toiminnallisuuden määrittelynä.

Seuraava ohje: Julkaise Macaly-projekti omassa domainissa