Situationen är följande: du är utvecklare och har alla nödvändiga verktyg för att skapa en fantastisk app. Men du har fastnat lite när det gäller designen. Utan att behärska branschstandardiserade designverktyg som Adobe Photoshop, hur utformar du då en mobilapp som speglar ditt inre geni? Hur gör du en app som både är visuellt fantastisk och lätt för användarna att navigera?

Oroa dig inte, det finns goda nyheter. Du kanske inte har mycket (eller ingen) erfarenhet av UX/design, men du behöver inte nödvändigtvis ha det för att skapa ett visuellt fantastiskt slutprojekt. De här lösningarna kommer att hjälpa dig i processen med hur man utformar en mobilapp – var och en uppfyller detta löfte utan att du behöver betala ett öre.

Hur man utformar en mobilapp

Wireframing innebär att man skapar en minimiprodukt som i huvudsak representerar skelettet för designen av din app. Om du skulle jämföra din app med ett nystartat företag skulle du kunna kalla det här designstadiet för den minsta livsdugliga produkten (ett begrepp som populariserades i boken The Lean Startup).

Wireframing är ett viktigt steg när du går igenom processen för att designa en mobilapp, eftersom det gör det möjligt för dig att tänka på strukturen som en separat del av de slutgiltiga designelementen. Det gör det också möjligt för dig att effektivt få fram ditt koncept till alla relevanta parter – samarbetspartners, designers eller investerare – utan att du personligen behöver någon formgivningserfarenhet för att korrekt uttrycka dessa idéer.

De följande verktygen kan vara till hjälp under detta viktiga grundläggande steg i hur man utformar en mobilapp.

Penna och papper

För dem som verkligen inte vill spendera en slant är bra gammal pålitlig penna och papper rätt väg att gå för att skissa upp dina första app-idéer som ett grovt utkast för din design. Även om vissa föredrar att gå direkt till Photoshop eller ett prototypverktyg kan den här metoden vara idealisk för att fånga idéer snabbt när de uppstår. Som en extra bonus behöver du ingen särskild utbildning eller behärskning av verktyget för att få ut det mesta av denna metod för wireframing.

Android och/eller iOS skisspapper

För dem som funderar på hur man utformar en mobilapp finns det ett specialverktyg för wireframing som är speciellt anpassat för dig. För ett rimligt pris, gratis, kan du ladda ner prickgridpapper som har iPhones och iPads utskrivna på dem. Detta är den idealiska designlösningen för utvecklare som behöver en bättre visuell bild än vad penna och papper kan ge. Det här iOS-skisspappret är också idealiskt för storyboarding eller för att visa de olika tillstånden för hur din app kommer att se ut i användning.

Det här iOS-skisspappret innehåller rutnätslinjer för alla standardelement i användargränssnittet på de tidigare nämnda iOS-enheterna. För Android-versionen av det här skissbladet har pappret 8 telefonmodeller utskrivna på det. Men till skillnad från iOS-pappret (som har ett punktgaller) har det här pappret inga linjer alls.

MockFlow

Om du letar efter ett lite mer tekniskt verktyg för att göra din wireframing av mobilappar, kan du överväga något som MockFlow. Mockflow är en lösning för wireframing online, med flexibiliteten att hantera alla typer av designprojekt – oavsett om det handlar om en mobil- eller webbapp (eller något helt annat). Det finns en grundläggande gratisversion som låter dig arbeta med ett projekt åt gången, upp till 1 GB lagring och två teammedlemmar. Du kan låsa upp ytterligare funktionalitet (fler projekt, lagringsutrymme och lagmedlemmar) när du uppgraderar till en betalplan, som börjar på 14 dollar/månad.

WireframeApp är ett annat webbaserat wireframingalternativ som liknar MockFlow. Alla planer är betalda, men du kan ofta hitta ett prisvärt livstidserbjudande (under 49 dollar totalt) genom att anmäla dig till deras nyhetsbrev via e-post eller AppSumo.

Prototypering

Prototypering är nästa steg för hur du ska designa en mobilapp när du är klar med wireframing. Hela poängen med nästa steg är att skapa en fungerande version av designen, som liknar hur du vill att det slutliga projektet ska se ut.

De följande verktygen passar bra för hur man designar en mobilapp utan att betala ett öre eftersom de alla är 100 % gratis att använda!

Marvel

Marvel är en webbapplikation som också är tillgänglig för iOS och Android. Förutom möjligheten att designa på den enhet du känner dig mest bekväm med gör det här verktyget det enkelt att förvandla dina skisser till fungerande prototyper. Förutom möjligheten att lägga till grundläggande designelement kan du också koppla ihop konstruktioner för att skapa ett flöde. Med Marvel kan du skapa interaktiva hotspots och realistiska övergångar, och du kan välja åtgärder som till exempel om man ska hovera, klicka, svepa, nypa med mera. Med massor av integrationer från tredje part spelar Marvel bra ihop med många av de andra verktyg som du redan använder, och med samarbetspartnerna i ditt team.

InVision

InVision liknar Marvel i det avseendet att det är ett gratis verktyg för prototyper för webb och mobiler. Det är ett perfekt prototypverktyg för team, tack vare funktionalitet som gör det möjligt att enkelt kommentera och samarbeta. Det som skiljer det från många liknande typer av verktyg är deras versionskontrollfunktion, som gör att du kan återställa dina ändringar till en tidigare version om det behövs.

InVision används av innovativa företag som Adobe, Zappos, AT&T, Dell och Sony, samt snabbväxande nystartade företag som Prezi, Soundcloud och Evernote. Att använda InVision garanterar inte deras framgång, men du kan inte förneka fördelarna med föreningen!

Axure

För att avrunda dina alternativ för hur du designar en mobilapp utan att betala ett öre, är här ett alternativ som är betalt om det används på lång sikt, men helt gratis att använda under en 30-dagars testperiod. Axure gör det möjligt att enkelt skapa app-prototyper tack vare mycket funktionell design (liknande övergångarna på Marvel). Liksom de andra alternativen i den här artikeln erbjuder det här verktyget funktionalitet för enkelt teamsamarbete.

Proto.io

Proto.io presenterar sig själv som ett verktyg som kan hjälpa dig att skapa ”Prototyper som känns verkliga”. För en mobilapputvecklare som vill skapa en realistisk och funktionell prototyp kan detta vara musik i dina öron. De förser användarna med flera UI-bibliotek, integrationer från tredje part (med partners som Dropbox) och till och med användartester för att säkerställa att användarupplevelsen är sömlös vid lanseringen. En gratis provperiod ger dig 15 dagars tillgång med livslång tillgång till begränsade funktioner, eller möjlighet att uppgradera till ett fullt fungerande konto med flera projekt och funktioner, från 24 dollar/månad.

Om du ännu inte har hittat det perfekta verktyget för wireframing eller prototyper delar Developer Drive med sig av ytterligare några generiska alternativ att överväga.

Självklart, om detta är omfattningen av ditt intresse och din förmåga när det gäller appdesign, måste du betala någon för att ta din nakna wireframe eller prototyp till nästa nivå. Men att komma in med en grundläggande plan kan vara ett bra sätt att spara tid och pengar i förväg. Ju bättre du kan kommunicera din vision till en designer, desto lättare blir det att förverkliga den och desto mindre pengar kommer du att slösa på designversioner som inte stämmer överens med din vision.

Visuell design

Oavsett om du letar efter vägledning om hur du ska designa en app för iPhone eller hur du ska designa en Android-app, kan de här kostnadsfria verktygen hjälpa dig att få fram den perfekta designen för något av de mobila operativsystemen.

Ibland kan lite inspiration hjälpa till att ta bort en kreativ blockering, och att gå vilse i en designhandledning kan hjälpa dig att komma på hur du ska slutföra projektet helt på egen hand.

Laudable Apps

Laudable Apps är en webbplats/ett appgalleri med en abare-boness som fokuserar specifikt på att visa upp vacker iOS 7-design. Det finns ingen text eller andra distraktioner, bara design som presenteras utan kommentarer.

När du funderar specifikt på iOS kanske du också vill ta dig tid att läsa igenom Apple App Stores strikta riktlinjer för inlämning av appar. Eftersom de har en attityd som innebär ”inga undantag”, kan det hjälpa dig att ha dessa riktlinjer i åtanke när du bestämmer hur du ska utforma en mobilapp, så att du gör rätt från början och sparar tid och pengar i det långa loppet.

Androidmönster

Oavsett om du utformar uteslutande för en Android-enhet, eller om du skapar två versioner av din mobilapp (med en för Apple App Store), vill du bekanta dig med hur du ska utforma en Android-enhet. Det kanske förvånar dig att veta att detta är helt annorlunda (och betydligt mindre rigid) än designstandarderna för iOS-appar. Det kan vara bra att läsa igenom Google Play-butikens inlämningsmaterial, till exempel den här checklistan för lansering.

Du kan också använda Android Patterns som din snabbkurs i Android-design. Den här webbplatsen är ett bibliotek med interaktionsmönster för Android som du kan använda när du skapar din design. Interaktionsmönstren är ordnade efter apptyp och omfattar åtgärder som navigering, meddelanden och skärminteraktioner. Även om dessa mönster kan vara till hjälp för en ny mobilappdesigner bör de ses som en vägledning, men inte som absoluta regler.

Ikoner

Att lägga till en viss dimension till dina visuella element kan hjälpa din prototyp att se så nära det slutliga resultatet som möjligt. Icons8 tillhandahåller ett bibliotek med över 53 800 ikoner som är helt gratis att använda. Förutom den här gigantiska gratisresursen bör du också kolla in de här verktygen för utformning av användargränssnitt för olika sätt att söka och använda ikoner när du bestämmer hur du ska utforma en mobilapp.

Adobe Kuler

Adobe har många resurser för dem som vill utforma en mobilapp, från nybörjarnivå till avancerad nivå av utformning, men ett av de enklaste och mest användbara är deras verktyg för färgschema. Kuler hjälper både designers och icke-designers att välja ut färgscheman baserat på färghjulet och olika färgregler: monokromatisk, komplementär, triad osv. Du kan skapa ett färgschema från en bild eller bläddra bland andras färgscheman för att få inspiration.

Mobile Design Inspiration

Enligt CSSWinner är Mobile Design Inspiration det tätaste inspirationsgalleriet för mobil appdesign, med appdesigninspirationer som är tillgängliga för och organiserade specifikt efter iPhone, Android, Apple Watch och iPad. Nya designer läggs till varje vecka, och deras avsnitt ”Creative Fields” kan ge ytterligare inspiration om du också arbetar med att designa en applogotyp.

Tuts+

Om du verkligen vill veta hur man designar en mobilapp utan att betala en krona bör du överväga att investera din tid i att skaffa dig nya färdigheter. Att lära dig att designa din egen app i stället för att anlita någon för att göra det kan spara pengar OCH dessutom ge dig värdefulla färdigheter som du kan tjäna pengar på senare.

Det finns flera webbplatser som erbjuder utmärkta onlinekurser i design (Treehouse är en fantastisk betalresurs), men Tuts+ erbjuder en hel del fördjupade kunskaper, helt gratis, utan att ge avkall på kvaliteten. Förutom användbara artiklar har de också ytterligare långa resurser om design, som e-böcker.

Hur man designar en mobilapp utan att betala ett öre

Du behöver verkligen inte anlita en designer för att designa din mobilapp, särskilt inte i de tidiga skedena med wireframing och prototyping. Ta lite tid på dig för att få din app dit du vill att den ska vara på en grundläggande nivå, så även om du slutar med att anlita en designer blir projektet inte lika djupt (och dyrt).

Med de här verktygen för utformning av mobilappar kan du ta reda på hur du utformar en mobilapp på egen hand, och skaffa dig några nya färdigheter på vägen. Föreställ dig anställningsmöjligheterna för en person som kan bevisa sin förmåga att både designa och utveckla en app!

Vilka tips eller verktyg skulle du vilja lägga till i den här listan över hur man kan designa en mobilapp utan att betala en krona? Vi vill gärna höra dina tankar! Tweet dina insikter till @icons8, så delar vi med oss av våra favoriter.

Om författaren
Maddy Osman älskar WordPress och att skriva. När hon inte är upptagen med att hjälpa till att organisera WordCamp Denver delar hon med sig av sina bästa tips om innehållsmarknadsföring/SEO på sin blogg, www.the-blogsmith.com. Håll dig uppdaterad om hennes senaste artiklar på webben på Twitter: MaddyOsman.