Näin suunnittelet hyvännäköisen sovelluksen tekoälyllä

Hyvännäköisen sovelluksen saat tekoälyltä, kun lopetat sen pyytämisen ”tekemään siitä kivan näköisen” ja annat sille sen, mitä suunnittelija tarvitsisi: kaksi tai kolme viitettä, joista pidät, nimetyn suunnittelusuunnan sekä konkreettiset säännöt tyylille, väreille ja väleille. Rakenna sen jälkeen yksi näkymä, hio se kuntoon ja pyydä tekoälyä soveltamaan sama järjestelmä muualle. Suurin osa ”tekoälyn ulkonäöstä” syntyy epämääräisistä kehotteista, jotka tuottavat keskinkertaisia vastauksia. Tarkka syöte tuottaa tarkan suunnittelun.

Miksi tekoälyn suunnittelu näyttää geneeriseltä

Pyydä tekoälyä ”modernia, selkeää SaaS-kojelautaa” ja se antaa sinulle kaikkien kojelautojen tilastollisen keskiarvon: saman sans-serif-fontin, violetti-sinisen liukuvärin, pyöristetyt kortit pehmeillä varjoilla, kuvakkeet ympyröissä ja keskitetyn pääotsikon, jossa lukee ”Työnkulkusi, yksinkertaistettuna”. Mikään yksittäinen valinta ei ole väärin. Ongelma on se, että mitään niistä ei valittu sinun tuotteellesi.

Hyvä suunnittelu koostuu enimmäkseen päätöksistä. Sinun tehtäväsi on tehdä ne muutamat päätökset, jotka antavat sovellukselle luonteen, ja antaa tekoälyn tehdä tuhannet pienet päätökset johdonmukaisesti.

Vaihe 1: Kokoa viitteet ennen kehotteen kirjoittamista

Käytä parikymmentä minuuttia kahden–neljän viitteen keräämiseen: sovelluksiin tai verkkosivuihin, joiden ulkoasu sopii tuotteellesi. Hyviä lähteitä ovat tuotteet, joita kohdeyleisösi jo käyttää, suunnittelugalleriat ja lähialojen yritysten sivut.

Kirjoita jokaisesta ylös mistä pidät sanoin, jotka ymmärtää:

• ”Paljon tyhjää tilaa, sisältö kapeassa sarakkeessa, pienet harmaat otsikot isojen lukujen yläpuolella.”
• ”Tiheät taulukot ohuilla jakoviivoilla, ei korttivarjoja, yksi korostusväri toimintoihin.”
• ”Isot serif-otsikot, lämmin valkoinen tausta, valokuvat piirrosten sijaan.”

Välitä nämä kuvaukset tekoälylle ja liitä kuvakaappaukset, jos työkalusi hyväksyy kuvia. Ota inspiraatio laaduista, älä tuotteesta: toisen yrityksen asettelun, brändin tai tekstien kopioiminen sellaisenaan on sekä oikeudellinen että uskottavuusriski.

Vaihe 2: Valitse suunnittelusuunta ja nimeä se

Suunta on lyhyt kuvaus tunnelmasta. Se antaa tekoälylle suodattimen jokaiselle päätökselle. Muutamia toimivia:

Kirjoita suunta ensimmäiseen kehotteeseen sekä se, kenelle sovellus on tehty:

Rakenna varausten hallintasovellus itsenäiselle jooga-studiolle. Suunnittelusuunta: rauhallinen ja minimalistinen, kuin painettu studion tuntijärjestys. Lämmin valkoinen tausta, lähes musta teksti ja yksi vaimea salviavihreä korostus painikkeisiin ja valittuihin tiloihin. Serif-fontti otsikoihin, selkeä sans-serif leipätekstiin. Runsas väli, ei liukuvärejä, ei varjoja, ei emojeita. Mobiili edellä.

Vaihe 3: Aseta säännöt: tyyli, väri ja väli

Nämä kolme kantavat suurimman osan visuaalisesta laadusta. Niiden tarkka määrittely on yksittäinen suurin parannus, jonka voit tehdä.

Tyypografia

• Yksi tai kaksi fonttia. Otsikkofontti ja leipätekstifontti tai yksi fonttiperhe useammalla paksuudella.
• Tyyppiasteikko. Muutama kokokoko, jota käytetään johdonmukaisesti, esimerkiksi 14, 16, 20, 28 ja 40 px, sen sijaan että jokainen komponentti valitsisi omansa.
• Luettava leipäteksti. Verkossa noin 16 px, riviväli noin 1,5 ja pitkissä teksteissä noin 60–75 merkkiä riviltä.
• Hierarkia paksuudella ja koolla, ei värillä. Otsikot lihavampia ja isompia, toissijainen teksti pienempää ja pehmeämpää harmaata.

Väri

• Enimmäkseen neutraaleja. Taustat, pinnat, reunat ja tekstin harmaat hoitavat suurimman osan työstä.
• Yksi korostusväri toimintoihin ja valittuihin tiloihin. Toinen vain, jos sillä on selkeä tehtävä.
• Semanttiset värit onnistumiselle, varoitukselle ja virheelle, ja niitä käytetään vain niihin.
• Kontrasti. WCAG 2 vaatii kontrastisuhteen vähintään 4,5:1 normaalille leipätekstille ja 3:1 suurelle tekstille. Vaalean harmaa teksti valkoisella usein epäonnistuu; pyydä tekoälyä tarkistamaan.
• Tumma teema, jos haluat sellaisen, suunniteltuna tarkoituksella eikä vain kääntämällä värejä.

Väli ja asettelu

• Välien asteikko, esimerkiksi 4, 8, 12, 16, 24, 32, 48 ja 64 px. Kaikki noudattaa sitä.
• Tasaus. Reunat linjautuvat; sisältö istuu ruudukossa tai johdonmukaisessa enimmäisleveyden sarakkeessa.
• Läheisyys. Toisiinsa liittyvät asiat lähellä, toisiinsa liittymättömät kauempana. Tämä yksi sääntö korjaa useimmat sekavat näkymät.
• Vähemmän kontteja. Kaikki ei tarvitse korttia. Reunat, jakoviivat ja tyhjä tila ryhmittelevät sisältöä usein hiljaisemmin.

Kehote, joka rakentaa järjestelmän kerran:

Ennen kuin rakennat lisää näkymiä, luo pieni suunnittelujärjestelmä ja käytä sitä kaikkialla: tyyppiasteikko 14/16/20/28/40 px, leipätekstin riviväli 1,5, väliasteikko 4/8/12/16/24/32/48 px, neutraalit lähes valkoisesta lähes mustaan, yksi korostusväri (#3F6B5A) vain pääpainikkeisiin ja punainen vain virheisiin. Painikkeilla, kentillä ja korteilla on sama pyöristyssäde. Tarkista, että kaikki teksti täyttää WCAG AA -kontrastin.

Jos työskentelet koodia ymmärtävässä rakentajassa, tästä tulee yleensä designtokeneita: CSS-muuttujia tai Tailwind-teema, jolloin myöhemmät muutokset tehdään yhteen paikkaan.

Vaihe 4: Rakenna ensin yksi näkymä kunnolla

Älä generoi kaksitoista näkymää ja yritä korjata niitä kaikkia yhdellä kertaa. Valitse näkymä, jonka käyttäjät näkevät useimmin, usein kojelauta tai pääluettelo, ja hio sitä, kunnes se on kunnossa. Sen jälkeen:

Käytä kojelautaa viitteenä kaikille muille sivuille: sama yläpalkki, väli, tekstikoot, painikkeiden tyylit ja taulukkotyyli. Päivitä Asetukset- ja Varaukset-sivut vastaamaan sitä.

Valmis viitenäkymä viestii makuasi paljon paremmin kuin mikään adjektiivi.

Vaihe 5: Iteroi pienillä ja tarkoilla pyynnöillä

Palaute tekoälylle toimii kuten palaute nuorelle suunnittelijalle: tarkka, yksi alue kerrallaan ja selkeä siitä, mitä pitää säilyttää.

Lisää aina, mitä säilytetään, esimerkiksi ”pidä kaikki reitit, teksti ja ominaisuudet ennallaan”. Silloin visuaalinen kierros ei hiljaa poista toiminnallisuutta. Tarkista jokainen muutos puhelimen kokoisella näytöllä ennen seuraavaa pyyntöä. Katso ohje mobiiliystävällisen verkkosovelluksen rakentamiseen, mitä hyvä on pienillä näytöillä.

Vaihe 6: Yksityiskohdat, jotka erottavat hyvän geneerisestä

Kun rakenne on kunnossa, nämä pienet asiat tekevät sovelluksesta valmiin oloisen:

• Tyhjät tilat. Mitä uusi käyttäjä näkee ilman dataa: lyhyt selitys ja yksi selkeä toiminto, ei tyhjää taulukkoa.
• Latausnäkymät. Sisältöä muistuttavat luurankot, ei pyörivää latauskehää kaikkialla.
• Virhenäkymät. Selkokielisiä viestejä sen kentän vieressä, joka sen aiheutti.
• Hover-, focus- ja painallustilat jokaiselle interaktiiviselle elementille. Fokusrenkaat ovat tärkeitä näppäimistön käyttäjille.
• Oikea sisältö. Korvaa ”Lorem ipsum” ja ”Matti Meikäläinen” todenmukaisella tekstillä ja datalla. Paikkamerkkisisältö peittää asettelun ongelmat.
• Kuvakkeet samasta sarjasta, yhdessä tai kahdessa koossa, yhtenäisellä viivanpaksuudella.
• Kuvat tarkoituksella. Oikeat kuvat tuotteestasi, paikasta tai ihmisistä voittavat geneerisen kuvapankin. Jos käytät kuvapankki- tai generoituja kuvia, pidä tyyli yhtenäisenä.
• Teksti. Lyhyet ja tarkat nimet (”Varaa tunti”, ei ”Lähetä”) vaikuttavat koettuun laatuun yhtä paljon kuin mikään väri.

Yleisimmät virheet

• Koko sovelluksen uudistaminen yhdellä kehotteella. Isot uudelleenkirjoitukset tuovat regressioita. Käy sivut läpi yksi kerrallaan.
• Liian monta korostusväriä. Jos kaikki on korostettu, mikään ei ole.
• Kaiken keskittäminen. Keskitettyä tekstiä on vaikea lukea muuta kuin otsikossa; tasaa suurin osa sisällöstä vasemmalle.
• Pieni, matalakontrastinen teksti, joka näyttää tyylikkäältä isolla näytöllä mutta on lukukelvoton puhelimessa auringonvalossa.
• Koriste ennen hierarkiaa. Liukuvärit ja varjot eivät korjaa näkymää, jossa tärkein toiminto ei ole ilmeinen.
• Laskeutumissivun unohtaminen. Monille tuotteille se on ensivaikutelma. Katso ohje konvertoivan laskeutumissivun rakentamiseen.

Lisää kehotemalleja suunnittelun ulkopuolelta löydät ohjeesta tekoälyrakentajien kehotteiden kirjoittamiseen. Jos työsi on itse tuote, kuten suunnittelu- tai valokuvaportfolio, ohje portfoliosivuston rakentamiseen menee esittelyyn syvemmin.

Suunnittelu Mythexissä

Mythexissa kuvailet suunnittelun chatissa, näet sen live-esikatselussa ja tarkistat puhelinkoon kehyksen ennen seuraavaa muutosta. Dokumentaatiossa on lyhyet mallit tähän: suunnittelu- ja käyttöliittymäkehotteet muutettavan ja säilytettävän nimeämiseen sekä käyttöliittymän uudistaminen yhden sivun kerrallaan päivittämiseen ilman ominaisuuksien menetystä. Mythex voi myös hakea kuvapankkikuvia tai generoida kuvan chatissa, esimerkiksi pääkuvan, taustan tai jakokuvan, ja sijoittaa sen sovellukseen pyynnöstäsi. Jos muutos menee pieleen, palaa checkpointiin ennen sitä. Voit myös selata malleja, jos haluat aloittaa olemassa olevasta suunnittelusta ja muokata sitä.

Kysymykset