• Dombi Soma

Pacek App Store képek villámgyorsan

Az Android és iOS áruházakban (másnéven Play Store és App Store) kötelező megadni pár screenshotot az alkalmazásodról, hogy az oldaladra tévedő embereknek legalább fogalmuk legyen arról, mire számíthatnak, ha letöltik az appodat. Most azt mutatom meg, hogy hogyan készíts gyorsan, vállalható kinézetű képeket appod oldalára, Canva-val és MokupFrames-el.


Másik posztban már bemutattam a MokupFrames nevű programot, amivel gyorsan, igényes köntösbe tudod helyezni a mobilon készített screenshotot. A kérdés, hogy mi a következő lépés, hogyan jutunk el egy szép mobil keretben (device frame!) lévő képtől ehhez:

Sokkal jobb átkattintást tudunk ha pár szóval le is írjuk a képekhez, hogy mit tud az app. Erre leginkább azért van szükség, hogy a böngésző felhasználó racionalizálni tudja saját magának, hogy miért is van szüksége az appodra. Arra ne számíts, majd úgyis elolvassa az appod leírását, nem fogja. De a screenshotokra írt egy-két-három mondat annyira szem előtt van, hogy akár el is találhatja.

Ezen az oldalon az a célod, hogy a felhasználó megnyomja kék hátterű LETÖLTÉS gombot.

Ha megnézed, az első képen lévő szöveget még telibe látja, de a második képnek már csak a felét. Viszont ha ilyen rendbe szedett oldalra érkezik, talán lesz kedve a felhasználónak végignézni a maradék képeket is.


Térjünk rá, hogy hogyan készülnek. Hát rém egyszerűen. Canva-ban létre kell annyi tervet, ahány méretben szükséged van screenshotokra. iOS-hez három terv kell összesen, kell kettő a 6,5"-os és 5,5"-os iPhone-okhoz, illetve kell egy az iPad-ekhez, mert azoknak ugyanakkora a felbontása.

A létrehozott tervekben állítsd be a háttered, egy-egy mondatban pedig fogalmazd meg, mit kap a felhasználó az appodtól, mit fog tudni csinálni vele. A háttér és a szöveg színét úgy választd meg, hogy jó nagy legyen a kontraszt, és könnyen olvasható legyen! Ez egy könnyen betartható szabály, akár itt, akár UI elemekről beszélük egy szoftveren belül. Azt látom, hogy általában nem figyelnek erre a frontend fejlesztők, ha úgy adja a sors hogy dizájnolniuk is kell, nem csak kódolni.


Na de vissza a Canva-hoz. Dobd rá a MokupFrames-ből exportolt mobilképet, a szöveget, állítsd be a hátterszínt, és kész is vagy. Az egész nem több 20 percnél per platform, és akkor sokat mondtam. És semmit nem kell photoshoppolni, csak képeket pakolgatni ide-oda.


Ennél persze lehet még tovább menni, és komplexebb művészi alkotásokat véghez vinni, de szerintem ezzel az elvárható szintet már megugortuk.


Ha mégse lennél elégedett, Dribbble-en keress rá hogy screenshot, és meríts ihletet! Vagy keress rá ismertebb, nagyobb, sok tőkével rendelkező vállalkozások alkalmazásaira, és nézd meg, ők hogyan csinálták. Nyilván náluk dolgozik egy pár profi grafikus, szóval jó dolgokat leshetsz el tőlük. Például a Revolut oldala nekem nagyon tetszik:

Ennyit szerettem volna megosztani veled, remélem hasznosnak találod az olvasottakat. Üdv.


185 views
Logo

DOMBI SOMA

BLOG

  • Instagram
  • LinkedIn
  • Facebook

© 2020 by Dombi Soma