Skip links
5 app design værktøjer – Nodes stack design 2018

5 app design værktøjer – Nodes stack design 2018

Design er slet ikke så subjektivt, som du tror. Selvom forskellige farver og strukturer taler til os på forskellig vis, er design meget mere end blot æstetik. For at bruge et meget kendt citat fra Steve Jobs: “Design handler ikke kun om, hvordan det ser ud og føles som. Det handler om, hvordan det virker”. Og citat passer som fod i hose på appverdenen.

Photoshop var det mest populære app design program for få år siden. Men det var aldrig udviklet til det formål. Det var faktisk en håndfuld designere, der hackede programmet, så det kunne bruges til formålet. Heldigvis har vi bevæget os væk fra den primitive metode og videre til bedre værktøjer, designere kan bruge til deres arbejde. Og de nye værktøjer tilbyder en masse fordele. Men hvad gør de, og hvorfor er man gået helt væk fra Photoshop?

I brede termer kan de nye værktøjer skabe statiske markups og bygge prototyper, som så kan deles med kunder, investorer og i sidste ende udviklingsteamet. Værktøjerne har strømlinet designprocessen, og de gør det nemmere for designere at samarbejde om de samme projekter. Derudover går det langt hurtigere med værktøjerne, hvilket i sidste ende er omkostningseffektivt.

Men hvor starter man? En enkelt Googlesøgning vil give os tonsvis af muligheder. Og da der hele tiden udvikles nye programmer, er det svært at se forskel på de gode og mindre gode. Vores designteam har her håndplukket et lille udvalg af deres favoritter.

I dette blogindlæg vil vi fokusere på disse designværktøjer

  • Sketch – Komplet designværktøj til statiske modeller
  • Abstract – Version kontrol og regelmæssigt samarbejde om designfiler
  • InVision – Prototyper med fokus på flow
  • Zeplin – Overlevering fra design til udviklingsteamet
  • Principle – state based prototyping tool til komplekse interaktioner

Det er alle værktøjer, vi her hos Nodes bruger i vores designarbejde.

I denne model kan du se, hvornår de forskellige værktøjer bruges i appudviklingsprocessen

Overview 1 1 30x17 - 5 app design værktøjer - Nodes stack design 2018
Sketch 30x18 - 5 app design værktøjer - Nodes stack design 2018

Sketch – komplet design værktøj til statiske modeller

Et af de mest benyttede appværktøjer er Sketch, og da vi spurgte vores designteam, hvilke projekter det bruges til, kom svaret prompte: “Stort set alle”.

Sketch værktøjet bygger prototyper, der bruges til at designe statiske modeller af, hvordan appen kommer til at se ud. Værktøjet er spækket med intuitive features, hvilket overflødiggør nogle af de mere kedelige arbejdsopgaver. Det gælder f.eks. Symbol feature. Forestil dig, at du har designet en knap, som du gerne vil have til at gå igen uforandret i hele appen. Med Symbols kan du udvikle elementer, der gør netop det – helt uden problemer. Sketch er også et af de værktøjer, vi anbefaler, når man vil udvikle sin egen app.  

Selvom Sketch primært er udviklet til at forbedre brugeroplevelsen ud fra et design-perspektiv, er et af værktøjets helt store fordele fleksibilitet. Det er solidt værktøj, der kan bruges sammen med alle de andre værktøjer her på listen.

På trods af sin unge alder har Sketch allerede opbygget en stort community af dedikerede designere og udviklere, der hele tiden udvikler plugins og deler designskabeloner, der forbedrer designprocessen og minimerer gentagne arbejdsopgaver for designere.


Denne skabelon er et eksempel på, hvordan man udvikler app ikoner. (Lavet af vores egen Søren Clausen)

shareimage copy 2 - 5 app design værktøjer - Nodes stack design 2018

Abstract 30x18 - 5 app design værktøjer - Nodes stack design 2018

Abstract – Version kontrol og regelmæssig samarbejde om designfiler

Abstract er i bund og grund og samarbejdsværktøj. I gamle dage skulle designere først arbejde alene på en opgave, dernæst uploade deres arbejde og til sidst dele det med kollegaer. Hele processen var selvsagt tidskrævende og bøvlet, og det var besværligt for designere at samarbejde.

Men så så Abstract dagens lys. Abstract tilbød en ny form for samarbejde mellem designere, som mindede om den, udviklere kender fra værktøjer som f.eks. Github. Nu kan Sketch filer tilføjes til et projekt, og andre kollegaer kan redigere og gemme deres fremgang i en “master fil”, som samler det hele i ét.

En af vores favoritter med dette værktøj er trackingsystemet. Abstract sporer alle ændringer og illustrerer det på en tidslinje, hvor man tydeligt kan se alle medlemmernes bidrag. På den måde kan designere kommunikere direkte med hinanden, uden at bruge unødvendig tid på at finde hoved og hale i projekter.

Invision 30x18 - 5 app design værktøjer - Nodes stack design 2018

InVision – Protyper med fokus på flows

Endnu et uundværlig værktøj. InVision fortsætter, hvor Sketch slap – Og med et stort fokus på funktionalitet. Når først det statiske design er færdigt i Sketch, bevæger designerne sig over i InVision og udvikler simple prototyper med animationer, der er mere avancerede end de almindelige, visuelle elementer, der bruges til at definere brugeroplevelsen ud fra et designperspektiv.

Med InVision får du en solid forståelse for, hvordan din app kommer til at fungere, og hvordan det føles at bruge den. Det er især brugbart til kunder, der ønsker at se en klikbar prototype og opleve appen helt tæt på. Det er også integreret med Sketch, hvilket betyder at projekter nemt kan overføres fra det ene værktøj til det andet.

Vores designere havde før i tiden svært ved at forklare kunder, hvordan deres app ville fungere, og de var begrænsede til kun at præsentere løsninger på én skærm ad gangen. Med Sketch og InVision løser vi det problem, og de er derfor blevet en vital del af vores design stack.

Zeplin 1 30x18 - 5 app design værktøjer - Nodes stack design 2018

Zeplin – Overlevering fra design til udviklingsteamet

Når først prototypen fungerer og alle er glade for resultatet, bliver projektet kastet videre over til udviklingsteamet. Og her bruger vi Zeplin.

Vi faldt først over programmet efter mange frustrerende år. Når designerne skulle leverer screens til udviklingsteamet, var det ofte en tidskrævende og problematisk proces. Vi gik på jagt efter en løsning og fandt til sidst Zeplin. Der var kun en beta-version tilgængelig dengang, men vi kunne tydeligt se potentialet i programmet, og vi har brugt det lige siden.

Programmet har en interface, som gør, at vores udviklere er opmærksomme på størrelser, farver og fonte, mens det samtidigt er nemt at kopiere billeder i den rigtige størrelse og format. Det betyder, at vores udviklere kan dykke direkte ned i de tekniske udfordringer og bygge det, der skal til, uden at de skal gætte sig frem til, hvordan designerne forestiller sig appen.

Principle 30x18 - 5 app design værktøjer - Nodes stack design 2018

Principle – state based prototyping tool til komplekse interaktioner

Principle er det værktøj på listen, der har sit hovedfokus på animation. Det kombinerer nogle af de bedste appfeatures fra Sketch, After Effect og Flash.

Når du først har designet din interface, kan Principle bruges til at bygge videre med animationer og interaktive elementer. Det er især et godt værktøj til at tilpasse mikro-interakationer, hvilket spiller en stor rolle i den generelle app oplevelse. Designere, der er vant til at bruge programmer som Flash, vil elske Principles simple og intuitive workflow, og små problemer og justeringer, der før var lidt af en hovedpine at korrigere, er lige til at fikse.

Det er værd at nævne, at Principle kun er et Apple værktøj. Det er på nuværende tidspunkt ikke muligt at teste Android apps med Principle.

Hvad med andre værktøjer?

Denne liste er selvfølgelig ikke en komplet liste over alle de værktøjer, der findes på markedet. Der bliver hele tiden udviklet nye programmer, og de hjælper designere med at navigere i en konstant foranderlig verden, hvor der hele tiden stilles nye krav til evner og kompetencer. Det kan være, at der på et tidspunkt kommer ét værktøj, der er bedre end alle de andre, men her og nu har vi udvalgt de mest anvendte og brugbare værktøjer, vi, som Europas førende appudviklingsbureau, benytter i vores hverdag. De har hjulpet os til at samarbejde bedre om projekter, og vi har nået deadlines, der ellers havde været umulige at nå.

Vi har designet apps i 10

Hurtighed er essentielt for vores kunder. Derfor tester og implementerer vi løbende nye typer af software i vores design stack, så vi kan leve op til forventningerne. Som vi har set, er disse værktøjer smarte, brugbare og intuitive. Men design er blot en lille del af at udvikle en app, og din design stack afhænger i lige så høj grad af software muligheder, som hvordan designdelen skal integreres i andre dele af appudviklingen. I sidste ende handler det om at kombinere de forskellige værktøjer for at skabe en god arbejdstilgang, der sikrer, at opgaven bliver løst.

Designers at Nodes

fie - 5 app design værktøjer - Nodes stack design 2018

Ann-Sophie Green Rasmussen

Copenhagen

bo - 5 app design værktøjer - Nodes stack design 2018

Bo Mouridsen

Copenhagen

See Dribbble profile

64eba6a146808695d8e01672550b57ae - 5 app design værktøjer - Nodes stack design 2018

Joel Freeborn

London

See Dribbble profile

f0784764b363d9f493d9cc983018cad6 - 5 app design værktøjer - Nodes stack design 2018

Nyle Levi

London

See Dribbble profile

sarah - 5 app design værktøjer - Nodes stack design 2018

Sarah Bui

London

DanskeBank 31 - 5 app design værktøjer - Nodes stack design 2018

Søren Clausen

Copenhagen

See Dribbble profile

[Total:0    Gennemsnit:0/5]
Call Now Button