Vilka är de bästa verktygen för UI-utvecklare?

Bästa svaret

UI-designers:

Skiss

Kom igång

System: Mac

Fördelar: Helt för ”gränssnittsdesign”

Sketch är ett lätt, lättanvänt vektordesignverktyg som gör UI-design enklare och effektivare . Plattformen förenklar funktionerna som används i Photoshop och Illustrator, utformade speciellt för UX / UI-design. Innan Sketch var designers tvungna att växla mellan Photoshop och Illustrator för att få specifika funktioner som vektor- och andra fotoeffekter. Nu tillåter Sketch användare att bli av med den uppsvällda funktionaliteten och fokusera på användarupplevelse / användargränssnittsdesign för att få ut det mesta av sin UI-design. En av de bästa funktionerna i Sketch är möjligheten att installera plugins för att kompensera för funktioner som inte ingår i programvaran.

Men även om det är ett av de mest praktiska verktygen för utformning av Android App-användargränssnitt, Sketchs stöd för realtidsförhandsgranskning av Android-sidan är inte särskilt effektivt. Användare behöver ladda ner SkalaPreview, och först efter en serie besvärliga operationer kan de visa den faktiska utformningen av Android-gränssnittet på telefonsidan.

iDoc

System: Mac och Windows

Fördel: Online samarbetsdesign och hand-off design för UI-designers och utvecklare

Som ett helt nytt samarbets- och hand-off-verktyg har iDoc kraftfulla plugins som stöder import av filer från Photoshop, Adobe XD och Sketch . Med hjälp av plugins är iDoc möjligt att generera specifikationer och tillgångar automatiskt för användargränssnittsdesigners användning. För att göra de statiska designfilerna till interaktiva och animerade hi-fi-prototyper laddar du bara upp dina filer till iDocs prototypmodul.

Invision – ett webbaserat prototypverktyg som gör att din design lever snabbt

Kostnad: Gratis för 1 projekt (15 $ / månad för 3 projekt | 25 $ / månad för obegränsat projekt | 99 $ / månad för team)

Kompatibilitet: Mac och Windows

Funktioner :

  • Med InVision kan designers ladda upp sina designfiler och lägga till animationer, gester och övergångar för att förvandla sina statiska skärmar till klickbara, interaktiva prototyper. Få hög kvalitet på mindre än fem minuter.
  • Det stöder filer i PNG-, JPG-, GIF-, AI- och PSD-format. InVision App är perfekt för att samarbeta om designutkast och samla in feedback från kollegor och kunder.
  • En magisk ny design för arbetsflödet för utveckling. Skapa formatmallar, få pixel-perfekta kompisar, diskutera designutmaningar, exportera adaptivt och skapa riktig kod för alla designelement.

Figma

Pris – Gratis för personliga använd

– $ 12 per person per grupp / månad

Inledning: Figma är det första gränssnittsdesignverktyget på riktigt -tidssamarbete. Den har tre prisvärda funktioner: samarbete i realtid, vektornätverk och versionskontroll. Enkelt är Figma som en webbläsarbaserad skiss med samarbete i realtid .

Personlig erfarenhet: Jag var initialt skeptisk till Figmas användarupplevelse eftersom det är ett webbläsarbaserat gränssnittsdesignverktyg. Men senare tyckte jag att det fortfarande var mycket känsligt att använda. Dessutom har webbläsarverktyg fördelen att mottagaren inte behöver installera någonting, bara behöver öppna webbläsaren på datorn för att delta i projektet. Figma-filer är tillgängliga på Mac, Windows, Linux och mobila enheter (endast visning).

Svar

Om en utvecklare sa till mig ”nej” skulle jag först fråga varför och försöka förstår deras anledning att säga nej. Om det visar sig att det finns ett bättre sätt att närma sig designutmaningen, skulle jag vara mer än villig att ändra designen.

Men utvecklare kan i allmänhet koda någon av funktionerna och designa UI-designers komma på. Som William Hurley påpekade i det här svaret är nästan allt möjligt när det gäller programvara.

Jag har frågat programvaruutvecklare om ”x-funktion” är möjlig eller om designen kan kodas för att fungera en viss sätt, och jag har aldrig fått höra ”nej.”

Med detta sagt, målet som UI-designer ska inte vara att göra en komplex design. Målet bör vara att göra gränssnittet så enkelt och intuitivt för användaren som möjligt.

Av den anledningen har jag använt Googles materialdesignprinciper i mina senaste projekt (se 5 Kraftfulla och praktiska skäl att använda materialdesign ).

Det finns flera fördelar med detta:

  • Kännedom för användare – Gmail, YouTube, Evernote, Buzzfeed och många andra appar använder materialdesign, så det finns större chans att användare av din app känner till hur gränssnittet ser ut och fungerar.
  • Befintliga ramar – Många ramar har skapats som innehåller färdiga komponenter för utvecklare att använda, som Materialisera CSS , AngularJS Material och Material-UI . Detta hjälper designers att se vad som är lätt tillgängligt för utvecklare och använda dessa komponenter i sin design.
  • Snabbare beslutsfattande – När utvecklare och designers kan arbeta från samma palett av komponenter, det gör design- och utvecklingsprocessen snabbare.

Här är en fantastisk video om hur Google fick sina överflöd av appar att se ut och känna sig konsekventa, redan innan de släppte Materialdesign. Genom att tillämpa de principer som de använde då och nu kan designers skapa bättre gränssnitt och praktiskt taget eliminera ”nej” från utvecklarnas ordförråd.

Lämna ett svar

Din e-postadress kommer inte publiceras. Obligatoriska fält är märkta *