Mindent a prototípusról II.

A szoftverek

Peter Santha
Works.
Published in
5 min readJan 11, 2018

--

Az előző részben megtudhattuk miért fontos prototípust készíteni, hogyan érdemes nekikezdeni, és hogy is néz ki maga a folyamat. Most azt fogjuk taglalni, milyen programok lehetnek segítségünkre, és mikor melyiket érdemes használni.

Skiccelés

Sketches

Gyártó: Tayasui | Platform: iOS, Andriod, MacOS | www.tayasui.com/sketches

Említettük első lépésként, hogy érdemes papírt és ceruzát ragadni, majd szabadkézzel felskiccelni az ötleteinket. Aki viszont képtelen elszakadni a digitális eszközöktől, annak jó alternatívát nyújthat egy tablet és a Sketches nevű rajzolóprogram.

Különböző karakterisztikájú és színű rajzeszközök közül válogathatunk, különböző típusú lapokra rajzolhatunk, és csak a háttértár mérete szabhat határt az elkészült művek számának. Előnye, hogy alkotásunkat könnyen el tudjuk küldeni emailben, vagy egy projektor segítségével akár ki is vetíthetjük a rajztáblánkat. Hátránya, hogy mindig nálunk kell legyen egy működőképes tablet, és igényel némi gyakorlást, mire megtanuljuk rutinosan használni. Nem váltja ki a papírt és ceruzát, de mint alternatíva érdemes említést tenni róla.

Drótváz készítés

Amíg nincs szükségünk interakciók vagy felületi logikák szemléltetésére, szinte bármelyik grafikus program alkalmas lehet drótváz készítésre.

Nem gyakori, de láttam már Paintben készült, sőt még Excelben összerakott drótvázat is. Elsőre komikusan hangzik, de ha eltekintünk attól, hogy kevésbé professzionális megoldás, a célt végül is mind a két módszer teljesítette.

Segítségükkel sikerült kialakítani a jövőbeli felületünk struktúráját, ám utána természetesen mindent át kellett vezetni egy a célt jobban szolgáló programba.

Ezért, ha nem szeretnénk sok plusz munkát, és különböző programok között váltogatva harcolni az idővel, érdemes egy olyat választani fegyverként, amiben könnyedén végig tudjuk vinni az egész, vagy legalábbis a projekt nagy részét.

Photoshop

Gyártó: Adobe | Platform: MacOS, Windows | www.adobe.com

Ha azt mondom, hogy grafikus program, az emberek 90%-nak a Photoshop ugrik be először. Azt hiszem kijelenthetjük, hogy a PS ipari sztenderdnek számít. Évtizedek óta uralja a piacot, és bár sok trónkövetelő akad, még mindig viszi a prímet. Népszerűségben legalábbis.

Alapvetően egy fotómanipuláló alkalmazásról beszélünk, mégis az utóbbi évek (évtizedek) alatt számtalan olyan funkció került bele, ami kifejezetten a webdesignerek igényeit szolgálja ki.

Egy komplex és remekül használható veterán, amivel drótvázat és UI-t is tökéletesen lehet tervezni. Bónuszként ott van a kép manipuláló opció is, viszont prototípus készítésre önmagában nem alkalmas.

Léteznek olyan, kisegítő alkalmazások, melyek segítségével az elkészült képernyőterveket össze lehet fűzni, így ezek segítségével a főbb interakciókat tudjuk szemléltetni. Ilyen például a Marvel, a Zepplin vagy az InVision.

Ezek a programok plug-in ként be tudnak épülni a Photoshopba is, így akár pár kattintással prezentálható állapotba tudjuk hozni segítségükkel a terveinket.

Illustrator

Gyártó: Adobe | Platform: MacOS, Windows | www.adobe.com

Az Illustrator ugyancsak az Adobe cég terméke. A Photoshophoz hasonlóan nagy múltú termék és igen nagy népszerűségnek örvend, elsősorban a nyomdaiparban dolgozók körében. Vektorgrafikus program, ami — nagyon leegyszerűsítve — abban tér el a pixel alapú programoktól, hogy a vele készült alkotások minőség romlás nélkül nagyíthatók, kicsinyíthetők.

Minden olyan funkcióval rendelkezik, ami alkalmassá tudja tenni drótváz készítésre, emellett ikonok, logók, illusztrációk tervezéséhez is kiváló. Rutinosabb designer akár UI tervezésre is használhatja, viszont „kattintható” prototípus készítésre önmagában ez sem alkalmas.

Sketch (nem összekeverendő a már említett Sketches-el)

Gyártó: Bohemian B.V. | Platform: MacOS | www.sketchapp.com

Az elmúlt évek egyik legsikeresebb szoftvere a Sketch. Amilyen „ifjú” annyira erős a jelenléte a grafikus programok piacán. Egy olyan hibrid, ami ötvözte a Photoshop és Illustrator előnyeit, majd azokat kifejezetten webes felületek tervezésére optimalizálta. Alacsony ára, kis mérete és könnyű kezelhetősége miatt számtalan designer használja, és bár komplex prototípus készítésre ez sem alkalmas, natívan együtt tud működni a fentebb említett kisegítő alkalmazásokkal (Marvel, Zepplin, InVision). Így a vele készült képernyőterveket könnyedén össze lehet fűzni az egyszerűbb prezentálás érdekében. Előnyeit viszont csak Mac tulajdonosok élvezhetik, ugyanis PC-n sajnos nem elérhető.

Prototípus építés

Axure RP

Gyártó: Axure Software Solution Inc. | Platform: MacOS, Windows | www.axure.com

Aki már tövig rágta a körmeit, hogy mikor jönnek végre a prototípus készítő programok, azok most megnyugodhatnak.

Az Axure-t kifejezetten erre a célra alkották. Drótváztól kezdve, egyszerű és bonyolult interakciókon át, szinte mindent lehet vele demozni. Kezelése viszonylag egyszerű, hasonlóan lehet grafikai elemeket létrehozni, mint a fönt bemutatott programokkal, amiben mégis eltér tőlük, hogy olyan logikákat is tudunk benne szemléltetni, amik nagyon hasonlóak lesznek a lefejlesztett oldal végső működéséhez. Természetesen vannak korlátai, de aki mélységeiben ismeri és van elég ideje, az valósághűen tudja prezentálni vele a végső működést.

Framer

Gyártó: Framer | Platform: MacOS, Windows | www.framer.com

A Framer azok számára lehet vonzó, akiknek van jártassága a programozásban, ugyanis a programban a grafikus tervező felület mellett lehetőségünk van kódolni is. A képernyő ilyenkor két részre oszlik, egyik felén írhatjuk a kódot a másik felén azonnal láthatjuk a változást. Aki csak ez utóbbi funkciót akarja használni, az Sketch-ben vagy PS-ben összerakott designokat is be tud importálni, hogy aztán megfelelő scriptek segítségével életre kelthesse a felületet. Előnye, hogy szinte bármit lehet vele szemléltetni, hátránya hogy ehhez kell tudni programozni.

És a többiek…

Az itt felsorolt programokon kívül számtalan applikáció és kevésbé ismert program ígér nekünk gyors és hatékony prototípus készítési lehetőséget. Vannak köztük ígéretesek, de nagyrészüket érdemes fenntartással kezelni mivel — sokak bánatára — olyan megoldást nem létezik, ami helyettünk elvégzi a munkát.

Lényeg, hogy olyan program mellett tegye le az ember a voksát, amit könnyedén átlát és magabiztosan kezel. Épp elég energia egy folyamat kialakítására figyelni, ha még a program kezelése is nehézkes, az könnyen a kreativitás rovására mehet.

Élményszerű digitális felületek és kiszolgálási folyamatok létrehozásában segítjük ügyfeleinket. Ez a Works.

--

--