Sista delen: Stora prototypguiden

Anders Thid

Denna gång lyfter jag fram och recenserar tre kodverktyg.

Det här är sista delen i min stora prototypguide. Del ett handlade om Hotspot-verktyg och del två om Animationsverktyg

I detta blogginlägg kommer jag att skriva om Kodverktyg som stödjer kod och kan ladda dynamisk data, till exempel för att skapa en lista som modifieras då användaren interagerar med den. Verktygen kan bygga något som kan se ut som och bete sig precis likadant som den slutliga produkten. De har ofta en större tröskel för att komma igång. Ett klassiskt verktyg i denna genre är exempelvis Adobe Flash.

Framer

 Framer är en open source-produkt som växt till sig de senaste åren. Den första versionen som kom var ett javascript-bibliotek med stöd för lager, states (tillstånd), och animationer. Till detta finns en ”framer generator” som är ett verktyg för att exportera lager ifrån en Sketch- eller en Photoshop-fil (lagren renderas och sparas ut som bilder som sedan laddas i javascriptet och kan få liv med states och animationer). 

Själva biblioteket och generatorn är open source och det går fint att ladda ner det och köra sin egen textredigerare och testa. För några månader sedan lanserades Framer Studio, som är samma javascript-bibliotek och framer generator som tidigare, men snyggt och enkelt paketerat i en app, med inbyggd textredigerare och omedelbar förhandsgranskning (live preview). Så fort du sparar om grafiken i Photoshop/Sketch eller ändrar i koden i Framer Studio, så ritas din prototyp om och du kan direkt se ändringarna. Nackdelen är att Framer Studio endast kör CoffeeScript (en enligt vissa, enklare och renare variant av javascript) så är man van vid javascript blir det lite omständligt. Så antingen kör du open source-biblioteket ifrån github, eller köper Framer Studio för 79 dollar (endast Mac OS). 

Det är oerhört lätt att komma igång med Framer Studio, eftersom alla saker är paketerade och klara ifrån start, och du ser snabbt vad som händer då du ändrar i koden. Dessutom finns det en uppsjö av exempel, och en aktiv Facebook-grupp där man kan få hjälp och inspiration.

Prototyperna körs via en lokal webbserver på din dator och du kan lätt dela dem genom Framer Studios tjänst.

Det Framer Studio är riktigt vasst på är att snabbt ifrån en Photoshop- eller Sketch-mockup kunna knyta lite kod, lägga till states och animera det extremt snyggt. Det finns inga objekt och klasser vilket gör att det blir lite pilligt att göra något stort och komplext, men det känns inte heller som om det är Framers syfte. Syftet är helt enkelt att visa en delmängd av en applikation eller produkt, men så verklighetstroget det går utan att bygga det på riktigt.

Qt

 Qt är ett applikationsramverk för Windows, Mac OS och de flesta större mobilplattformar. Det skapades av Trolltech, köptes sedan av Nokia och efter det av Digia. Syftet med Qt var att skapa en miljö för att kunna bygga grafiska program enklare i C++.

Digia har släppt en utvecklingsmiljö som heter Qt Creator, i vilken man kan skriva sina applikationer. Men det fina med Qt Creator är att själva UI:t inte behöver skrivas i C++, utan i QML, som är en variant av XML. Dessutom kan man till exempel loopa igenom data och lyssna på events i javascriptkod som bäddas in i QML-filerna.

Man kan således bygga ett helt UI, utan att behöva pilla med C++. QML är helt enkelt flera bibliotek med komponenter, states, events, grafiska effekter och animationsobjekt som man kan använda för att bygga en prototyp (eller riktig produkt). Tanken är att designern kan sitta i XML/javascript och bygga sitt UI, och back end-utvecklarna kan jacka in C-kod mot UI:t för att få det att lira i en färdig produkt. 

Ju mer man lägger till i sin prototyp desto mer närmar man sig till slut en riktig produkt och Qt Creator har tagit sikte på den aspekten. Det vill säga, koden du skriver och pillar med i en prototyp skulle kunna ingå i en riktig produkt, så designerns jobb slängs inte eller skrivs inte om helt, utan kan faktiskt återanvändas till en viss del i den slutliga produkten (om man väljer att bygga den med Qt Creators ramverk).

Eftersom Qt Creator inte är ett rent prototypverktyg är det sämre med dokumentation än för till exempel Framer. Det är dessutom jobbigare att installera och komma igång, du måste läsa lite guider och installera xcode för Mac OS för att kunna bygga och köra. Men när du har miljön uppe och börjar pilla runt med QML och javascript så kan du ganska snabbt bygga riktigt stora och komplexa prototyper. Du kan dessutom kompilera dem till en färdig app och ladda ner på en Android, iOS eller Windows Phone och köra det helt offline. Det är riktigt smidigt på mässor eller utomlands där du sällan har ett stabilt WLAN att förlita dig på för att köra på en laptop via någon webbserver. Det är dessutom inte lika ”live” som Framer, utan du måste ändra i koden och bygga på nytt för att se ändringarna.

Men eftersom du kan bygga komponenter och återanvända kod blir det hela mycket mer skalbart än i Framer. Det känns även rappare att jobba i än Flash som många körde för ett par år sedan.

Qt Creator är open source och gratis. Så om man har lite kunskaper i XML, HTML och javascript så är det helt klart värt att fundera på. Det är en tröskel på en vecka eller två, men sedan kommer du att kunna rassla fram animationer och UI:n på löpande band, som kan växa och byggas vidare på under ditt projekts gång, till skillnad ifrån Framer-prototyperna som ofta stannar vid en enkel interaktion.

Noodl

 Innan jag började med Qt Creator så använde jag även TAT Motionlab, vilket var ett liknande verktyg med egen XML-dialekt och javascript. Tyvärr finns det inte längre – företaget köptes av Blackberry. De som byggde TAT har däremot hoppat vidare och börjat bygga på ett nytt verktyg, nämligen Noodl

Det liknar Quartz/Origami som är Facebook-tillägg till Apples Quartz Composer. Man skriver inte så mycket kod i denna typ av verktyg, utan man lägger ut noder (listor, vyer, bilder) och kopplar samman signaler (events) genom att dra sladdar. Exempelvis: Drar jag i en bild kan en signal gå via sladd till en animationsnod, som (via en sladd) flyttar en annan nod (vy). För mig som är såpass van vid att skriva kod känns det långsammare att arbeta med. Jag har provat både Noodl och Origami, men inte riktigt fastnat för någondera. De har nästan alla egenskaper som Framer har, det vill säga ”live reload” så fort som du ändrar men du får exportera bilder och kopiera till projektet själv.

Jag tycker däremot dessa verktyg är tilltalande, just eftersom Qt Creator och Framer kan avskräcka de flesta som inte har någon koderfarenhet.

Jag tror att denna typ av verktyg kan vara lättare att ta till sig för den målgruppen. Noodle är fortfarande i beta, men verkar lovande. De har ett par tutorials på sin hemsida och ett par exempel som man kan utgå ifrån. Eftersom du kan gruppera och återanvända objekt så skalar det snäppet bättre än Framer. Det är helt klart värt att prova lite, framförallt om du inte vågar ta steget till ren kod.

Hoppas ni gillat serien. Passa på att ta en titt på del 1 om Hotspot-verktyg och del 2 om Animationsverktyg.

Lämna en kommentar

1 kommentar

  • Mattias Arvola

    Tack för genomgången! Jag lånar lite av dina tankar till min föreläsning om datorprotypning för Grafisk design och kommunikation på Linköpings universitet.

    Ett tips som du inte tar upp och som också kan användas för produktion av enklare appar (i arvet efter HyperCard): https://livecode.com