Ja, vi er endelig nået til et punkt, hvor design er et så stort stykke af et produkts oprettelse og vedligeholdelse, at et helt udstyr af software helt sikkert vil være et vigtigt aktiv for dine projekter. Hvert program vil opfylde forskellige behov og lette de bedste og mest effektive arbejdsleverancer, det være sig struktur, visuelt design, illustrationer, interaktioner eller animationer.
Der er ingen enkelt software, der opfylder alle disse behov, så det kan være lidt skræmmende at vælge, hvilken af de mange, der i øjeblikket er tilgængelige på markedet. De værktøjer, vi er ved at præsentere, vil være dedikeret til forskellige aspekter af en designproces i digitale produkter. Disse trin vil omfatte:
Vi er lige her for at hjælpe dig med disse svære valg, baseret på vores nuværende og tidligere erfaring.
Jeg placerer denne først, fordi det virkelig er det bedste program, man kan bruge til Produktdesign. Figma er et vektorbaseret designværktøj i sin kerne, men virkelig er fokus på grænseflader. Muligheden for at gøre ting som at åbne mange tegnebrætter på din arbejdsskærm, vælge mellem mange forskellige forudindstillede enhedsstørrelser, justere gitre og kolonner, nemt oprette og ændre stilarter, gør Figma til det bedste program til digital grænseflade design.
Udover at det er super nemt at hente og lære at bruge, er det fuld af værktøjer, der giver dig mulighed for at del dine designs med en kunde eller et team. Du kan forhåndsvise det på forskellige enheder gennem enhver browser, og andre mennesker kan få visningsadgang til dit projekt uden at skulle betale en licens. Oprettelse af prototyper inden for Figma er også utroligt let og ender med ikke at kræve andre prototypeværktøjer til enkle interaktioner.
Designere kan bruge Figma både på en desktop-app eller via internetbrowseren, og bortset fra genveje, der naturligvis fungerer bedre på skrivebordet, er browseren fejlfri.
Der er en ting, der også skal nævnes, og det er det faktum, at Figma betales på en abonnementstype af system, der sandsynligvis kun kompenserer for hold - som nu kan arbejde samtidigt i det samme dokument uden kaos. For solodesignere kan Sketch være en bedre mulighed i forhold til budgettet. Og .sketch-dokumenter kan også åbnes og redigeres på Figma, så du behøver ikke bekymre dig om at dele dokumenter eller ændre software.
Dette betyder, at alle UI kits, der blev frigivet specifikt til Sketch, også kan bruges på Figma, uanset om Figma også har deres egne. Apple, Facebook, Google og mange andre virksomheder har udgivet UI Kits, så det skal være hurtigt og nemt at integrere dine designs i andre designsystemer.
Udviklere kan også nemt hente et design fra begge Figma og Sketch for at implementere, enten ved hjælp af selve programmet eller en af de flere udleveringssoftware, der er kompatible med det.
Dette værktøj hjælper dig med:
Dette er en gammel en, men den er stadig en af vores favoritter. Og grunden til, at vi tændte et andet vektorbaseret værktøj som Illustrator, er fordi det virkelig er det mest præcise og kraftfulde værktøj. Sig, at du vil oprette brugerdefinerede ikoner, oprette vektorillustrationer eller svg'er til animationer: Sketch vil ikke klippe det, fordi det stadig mangler de funktioner, du har brug for for at kunne komme ud med pæne og mere komplekse illustrationer eller detaljerede grafiske elementer.
Illustrator tager stadig koppen, når det kommer til vektorgrafik fordi det ikke forsøger at reducere sine funktioner til de eneste behov for UI/UX-design. På den anden side vil det som ethvert Adobe-produkt have sin typisk stejle indlæringskurve, men den gode nyhed er, at takket være dets etablering i branchen er der masser af ressourcer til at hjælpe dig med hvad du vil opnå.
En kombination af Sketch og Illustrator lyder måske som en overflødig en, men de supplerer hinanden perfekt, især når du kan kopiere/indsætte ting mellem dem to og integrere de komplekse elementer, du har oprettet, i dine UI/UX-fokuserede tegnebrætter.
Dette værktøj hjælper dig med:
Vi vil aldrig tvinge nogen til at lære at bruge Photoshop, men sandheden er, at vi stadig er nødt til at overgive os til denne latterligt komplekse grænseflade, for det er den eneste rastergrafikeditor på markedet med disse mange muligheder, funktioner, integrationer og værktøjer.
Har du brug for at redigere fotos, røre op, forbedre eller oprette illustrationer? Photoshop er dit og alles foretrukne valg. Hvis du også gerne vil oprette korte animationer til dine produkter, kan du prototype dem i Photoshop og eksportere som gif. Derudover har du som det mest berømte billedredigeringsprogram nogensinde en overvældende mængde tutorials, support og aktiver, så du vil ikke gå for vild.
Dette værktøj hjælper dig med:
Noun Project var en game-changer for os. Da nogle designere er meget krævende med ikoner og altid endte med at skulle redigere dem, så de bedre passer til en stil eller tidligere indstillede proportioner, kom denne lille app ind som en frelser for tiden. Du har adgang til den mest varierede sammenlægning af ikoner, vi nogensinde har brugt, i alle stilarter, former og størrelser. Du betaler et abonnement, og så bruger du bare de ikoner, du ønsker.
Indtast hvad du leder efter, og en liste over ikoner, der svarer til det, vises, som du derefter kan eksportere som en svg, png eller pdf. At eksportere det som en svg betyder, at hvis du er lige så kræsen som vi er, kan du stadig ændre ikonerne, så de passer til dine behov - du kan bare trække og slippe ikonet ind i dit tegnebræt på Sketch for eksempel. Men vi kan helt sikkert sige, at vi har lavet langt mindre vektorredigering, siden vi har brugt denne service; det har sparet os så meget tid og åbnet op for nye ideer og stilarter til vores designs (nej, vi er ikke sponsoreret af Noun Project, men vi sværger bestemt til det).
Dette værktøj hjælper dig med:
Hør os ud om denne, fordi dette helt sikkert bliver overset. Det er absolut vigtigt at sætte dine ideer ned, før du organiserer dem visuelt for at oprette strukturer og navigationskort. Derefter vil definition af siderne på et rigtig højt niveau helt sikkert hjælpe dig, når det er tid til at oprette wireframes.
På det tidspunkt nyder mange mennesker at lave wireframes ved hjælp af det gode gamle millimetriske papir og lineal, men normalt gør vi det på Sketch, så vi senere kan bruge figurerne til at skabe de endelige designs eller oprette low-fidelity-prototyper ved hjælp af nogle af dens plugins.
Dette værktøj hjælper dig med:
Her er hvor det bliver vanskeligt: i de sidste par år har vi set en vanvittig mængde prototypesoftware dukker op på markedet, og sandheden er, at vi ikke rigtig kan fortælle dig, hvilken du skal bruge, fordi det virkelig afhænger af dine behov.
Har du brug for overgangsanimationer? Har du bare brug for at forstå arkitekturen? Har du brug for noget gjort på en time? Du kan tage disse fyre Ordet for det, de fandt en fantastisk måde at hjælpe dig med at vælge, hvilket program eller tjeneste du vil bruge.
Hvor kompleks vil du gå? Hvis du bare har brug for nogle grundlæggende animationer for at berige dine interaktioner og overgange, er der nogle online steder, hvor du kan prøve forskellige ideer inden for universet af standard UI/UX-animationer og derefter eksportere resultatet til css. Steder som bouncejs.com eller animista.net. De er praktiske og hurtige, plus udvikleren kan bare hente den genererede kode.
Strømning er det animationsværktøj, der fungerer bedst med Sketch, hvor hvert tegnebræt har en anden tilstand, du kan flytte lag rundt, arbejde i en tidslinjevisning, eksportere som en film eller, endnu bedre, som kode.
I den vanskelige ende af spektret ligger Eftervirkninger, som udover at være det bedste værktøj til animation generelt, nu understøttes af biblioteker som Airbnb's Lottie, der gengiver After Effects-animationer naturligt på Web, Android, iOS og React Native.
Facebook har også en til Android og iOS, og der er også Marcus Eckerts Squall - det kommer til at vise, at i denne gamle skole robuste software som After Effects, ligger et væld af nuværende og fremtidige potentiale for animationer, der let kan oversættes til kode. Alt du skal gøre er at lære at bruge det, hvilket som ethvert andet Adobe-program vil vise sig ikke at være let. Men endnu en gang vil After Effects også have masser af online ressourcer og tutorials, der hjælper dig med at nå de resultater, du foregiver.
Som tidligere nævnt i punkt 5 har blyant, papir, lineal og post-its stadig det og bruges ofte, især i Ideeringsfase. Dette traditionelle sæt værktøjer kan dog være mere kompliceret at dele med andre, når arbejder eksternt. I den forstand skiller to værktøjer sig ud som en fremragende løsning for teams, der arbejder eksternt, hvilket som vi ved i stigende grad bliver en almindelig praksis.
Dette værktøj giver mulighed for samarbejdsbaseret brainstorming og giver også virtuelle whiteboard-værktøjer. Virtuelle whiteboards gør det muligt for designeren at dele deres ideer, tegninger, rammer eller endda lister med resten af teamet på en visuel og organiseret måde. Derudover er Mural en fantastisk platform for hvert trin i produktdesignproces. Det giver mulighed for god kommunikation gennem hele projektet og bruger agile og designtænkemetoder.
Dette værktøj hjælper dig med:
Miro giver også samarbejde i realtid hvor alle kan efterlade noter, holde en videokonference og have en brainstorm-session. Desuden tilbyder det flere forudbyggede skabeloner, som kan spare meget tid. En af de mest overraskende funktioner i dette værktøj er digitalisering af håndskrevne noter. Designeren kan stadig bruge de traditionelle metoder og derefter blot tage et billede eller et snap, og det konverteres til en digital whiteboard. Det er den perfekte kombination!
Dette værktøj hjælper dig med:
Vi ved lige nu, at du måske ser på denne liste og tænker „nej, for meget“, men før du går videre, skal du vide, at alle disse programmer kun er værktøjer. Du behøver ikke at studere dem i dybden, du skal lære det grundlæggende og derefter bruge internettet til at hjælpe dig med at nå de ideer, du har. Så du behøver ikke at kende alle funktionerne i nogen af disse værktøjer, du skal bare vide, hvilket værktøj du skal bruge til hvad, og „hvordan“ vil følge trop.
Hvis du har brug for hjælp til at finde ud af, hvilke værktøjer der passer bedst til dit projekt, er vores UI/UX designteam klar til at hjælpe dig. Send os en linje her!
Fandt du denne artikel nyttig? Du kan måske også lide disse!
Jeg er UI & produktdesigner, illustrationskunstner og maler. Kendt for min kærlighed til skrallede badehåndklæder, musikproduktion, typografi og alle slags pizza.
Marketing praktikant med særlig interesse for teknologi og forskning. I min fritid spiller jeg volleyball og forkæler min hund så meget som muligt.
People who read this post, also found these interesting:
