Written by:
Last Published:
februari 21, 2024
•
Ja, vi har äntligen nått en punkt där design är en så stor del av en produkts skapande och underhåll, att en hel utrustning av programvara definitivt kommer att vara en viktig tillgång för dina projekt. Varje program kommer att fylla olika behov och underlätta de bästa och mest effektiva arbetsleveranserna, vare sig det är struktur, visuell design, illustrationer, interaktioner eller animationer.
Det finns ingen enda programvara som kommer att tillgodose alla dessa behov, så det kan vara lite skrämmande att välja vilken av de många som för närvarande finns på marknaden. Verktygen vi ska presentera kommer att ägnas åt olika aspekter av en designprocess i digitala produkter. Dessa steg kommer att omfatta:
Vi är här för att hjälpa dig med dessa tuffa val, baserat på vår nuvarande och tidigare erfarenhet.
Jag placerar den här först eftersom det verkligen är det bästa programmet man kan använda för Produktdesign. Figma är ett vektorbaserat designverktyg i sin kärna, men fokus ligger verkligen på gränssnitt. Möjligheten att göra saker som att öppna upp många ritytor på din arbetsskärm, välja mellan många olika förinställda enhetsstorlekar, justera rutnät och kolumner, enkelt skapa och ändra stilar, gör Figma till det bästa programmet för digital gränssnittsdesign.
Förutom att det är superlätt att plocka upp och lära sig att använda, är det fullt av verktyg som gör att du kan dela dina mönster med en kund eller ett team. Du kan förhandsgranska det på olika enheter via vilken webbläsare som helst och andra personer kan få tillgång till ditt projekt utan att behöva betala en licens. Att skapa prototyper inom Figma är också otroligt enkelt och slutar med att det inte krävs andra prototypverktyg för enkla interaktioner.
Designers kan använda Figma både på en skrivbordsapp eller via webbläsaren, och bortsett från genvägar som uppenbarligen fungerar bättre på skrivbordet är webbläsaren felfri.
Det finns en sak som också bör nämnas, vilket är det faktum att Figma betalas på en prenumerationstyp av system som förmodligen bara kompenserar för lag - som nu kan arbeta samtidigt i samma dokument utan kaos. För solodesigners kan Sketch vara ett bättre alternativ när det gäller budget. Och .sketch-dokument kan också öppnas och redigeras på Figma, så du behöver inte oroa dig för att dela dokument eller ändra programvara.
Detta innebär att alla UI-kit som släpptes specifikt för Sketch också kan användas på Figma, oavsett om Figma också har sina egna. Apple, Facebook, Google och många andra företag har släppt UI Kits, så att integrera dina mönster i andra designsystem bör vara snabbt och enkelt.
Utvecklare kan också enkelt plocka upp en design från båda Figma och Sketch för att implementera, antingen med hjälp av själva programmet eller en av de flera avlämningsprogramvaror som är kompatibla med det.
Detta verktyg hjälper dig med:
Det här är en gammal, men den är fortfarande en av våra favoriter. Och anledningen till att vi tände ett annat vektorbaserat verktyg som Illustrator är att det verkligen är det mest exakta och kraftfulla. Säg att du vill skapa anpassade ikoner, skapa vektorillustrationer eller svg för animationer: Sketch kommer inte att klippa det, eftersom det fortfarande saknar de funktioner du behöver för att kunna komma ut med snygga och mer komplexa illustrationer eller detaljerade grafiska element.
Illustrator tar fortfarande koppen när det gäller vektorgrafik eftersom det inte försöker reducera sina funktioner till de enda behoven hos UI/UX-design. Å andra sidan, som alla Adobe-produkter, kommer den att ha sin typiskt branta inlärningskurva, men den goda nyheten är att tack vare dess etablering i branschen finns det gott om resurser för att hjälpa dig med vad du vill uppnå.
En kombination av Sketch och Illustrator kan låta som en överflödig kombination, men de kompletterar varandra perfekt, särskilt när du kan kopiera/klistra in saker mellan dem två och integrera de komplexa element du skapade i dina UI/UX-fokuserade ritytor.
Detta verktyg hjälper dig med:
Vi skulle aldrig vilja tvinga någon att lära sig att använda Photoshop men sanningen är att vi fortfarande måste överlämna oss till detta löjligt komplexa gränssnitt, för det är den enda rastergrafikredigeraren på marknaden med dessa många möjligheter, funktioner, integrationer och verktyg.
Behöver du redigera foton, röra upp, förbättra eller skapa illustrationer? Photoshop är ditt och allas favorit. Om du också vill skapa korta animationer för dina produkter kan du prototypa dem i Photoshop och exportera dem som gif. Utöver allt detta, som det mest kända bildredigeringsprogrammet någonsin, har du en överväldigande mängd tutorials, support och tillgångar, så du kommer inte att gå vilse.
Detta verktyg hjälper dig med:
Noun Project var en spelväxlare för oss. Eftersom vissa designers är mycket krävande med ikoner och alltid slutade med att behöva redigera dem för att bättre passa en stil eller tidigare inställda proportioner, kom den här lilla appen in som en räddare av tiden. Du har tillgång till den mest varierade samlingen av ikoner vi någonsin har använt, i alla stilar, former och storlekar. Du betalar en prenumeration och sedan använder du bara vilka ikoner du vill ha.
Skriv in vad du letar efter och en lista med ikoner som motsvarar det kommer att visas, som du sedan kan exportera som en svg, png eller pdf. Att exportera den som en svg innebär att om du är lika kräsen som vi, får du fortfarande ändra ikonerna för att passa dina behov - du kan bara dra och släppa ikonen i din rityta på Sketch till exempel. Men vi kan definitivt säga att vi har gjort mycket mindre vektorredigering sedan vi har använt den här tjänsten; det har sparat oss så mycket tid och öppnat nya idéer och stilar för våra mönster (nej, vi sponsras inte av Noun Project, men vi svär definitivt vid det).
Detta verktyg hjälper dig med:
Hör oss om den här, för detta förbises definitivt. Att sätta ner dina idéer innan du organiserar dem visuellt för att ställa in strukturer och navigeringskartor är absolut nödvändigt. Efter det kommer att definiera sidorna på en riktigt hög nivå definitivt hjälpa dig när det är dags att skapa wireframes.
Vid den tidpunkten tycker många om att göra trådramar med det gamla gamla millimetriska papperet och linjalen, men vanligtvis gör vi det på Sketch, så att vi senare kan använda formerna för att skapa de slutliga designerna eller skapa prototyper med låg fidelitet med några av dess plugins.
Detta verktyg hjälper dig med:
Här är där det blir knepigt: under de senaste åren har vi sett en galen mängd programvara för prototypning dyker upp på marknaden och sanningen är att vi inte riktigt kan berätta vilken du ska använda eftersom det verkligen beror på dina behov.
Behöver du övergångsanimationer? Behöver du bara förstå arkitekturen? Behöver du något gjort på en timme? Du kan ta De här killarna ord för det, de hittade ett bra sätt att hjälpa dig att välja vilket program eller tjänst du vill använda.
Hur avancerat vill du att det ska vara? Om du bara behöver enkla animationer för att förhöja dina interaktioner och övergångar finns det webbplatser där du kan testa olika idéer inom ramen för standardiserade UI/UX-animationer och sedan exportera resultatet till CSS. Sidor som bouncejs.com eller animista.net. De är praktiska och snabba, och utvecklaren kan enkelt kopiera den genererade koden.
Flow är det animationsverktyg som fungerar bäst med Sketch. Varje artboard motsvarar ett tillstånd, du kan flytta lager, arbeta i en tidslinjevy och exportera som film eller, ännu hellre, som kod.
I den mer avancerade änden av spektrumet hittar vi After Effects, som förutom att vara det bästa verktyget för animation i allmänhet, nu stöds av bibliotek som Airbnbs Lottie, vilket renderar After Effects-animationer nativt på webben, Android, iOS och React Native.
Facebook har ett eget för Android och iOS, och det finns även Marcus Eckerts Squall – vilket visar att det i robust, klassisk programvara som After Effects finns en enorm potential för animationer som enkelt kan översättas till kod. Allt du behöver göra är att lära dig använda det, vilket, precis som med alla andra Adobe-program, inte är helt enkelt. Men å andra sidan finns det mängder av resurser och handledningar online för After Effects som hjälper dig att nå de resultat du eftersträvar.
Som tidigare nämnts i punkt 5 har penna, papper, linjal och post-its fortfarande det och används ofta, särskilt i Idéfas. Denna traditionella uppsättning verktyg kan dock vara mer komplicerad att dela med andra när arbeta på distans. I den meningen sticker två verktyg ut som en utmärkt lösning för team som arbetar på distans, vilket, som vi vet, alltmer blir en vanlig praxis.
Detta verktyg möjliggör samarbetsbaserad brainstorming och ger också virtuella whiteboardverktyg. Virtuella whiteboards gör det möjligt för designern att dela sina idéer, ritningar, ramverk eller till och med listor med resten av teamet på ett visuellt och organiserat sätt. Dessutom är Mural en bra plattform för varje steg i produktdesignprocess. Det möjliggör bra kommunikation genom hela projektet och använder agila och designtänkande metoder.
Detta verktyg hjälper dig med:
Miro tillhandahåller också samarbete i realtid där alla kan lämna anteckningar, ha en videokonferens och ha en brainstorm-session. Dessutom erbjuder den flera förbyggda mallar, vilket kan spara mycket tid. En av de mest överraskande funktionerna i detta verktyg är digitalisera handskrivna anteckningar. Designern kan fortfarande använda de traditionella metoderna och sedan helt enkelt ta en bild eller en snap, och den kommer att konverteras till en digital whiteboard. Det är den perfekta kombinationen!
Detta verktyg hjälper dig med:
Vi vet just nu att du kanske tittar på den här listan och tänker ”nej, för mycket”, men innan du går vidare bör du veta att alla dessa program bara är verktyg. Du behöver inte studera dem på djupet, du måste lära dig grunderna och sedan använda internet för att hjälpa dig att nå de idéer du har. Så du behöver inte känna till alla funktioner i något av dessa verktyg, du behöver bara veta vilket verktyg du ska använda för vad och ”hur” kommer att följa efter.
Om du behöver hjälp med att ta reda på vilka verktyg som passar bäst för ditt projekt, är vårt UI/UX-designteam redo att hjälpa dig. Skicka oss en rad här!
Hittade den här artikeln användbar? Du kanske gillar dessa också!
Jag är UI & produktdesigner, illustrationskonstnär och målare. Känd för min kärlek till skräpiga strandhanddukar, musikproduktion, typografi och alla typer av pizza.
Marknadsföringspraktikant med ett särskilt intresse för teknik och research. På fritiden spelar jag volleyboll och skämmer bort min hund så mycket jag bara kan.
People who read this post, also found these interesting:
