Hvilke er de beste verktøyene for UI-utvikler?

Beste svaret

UI-designere:

Skisse

Kom i gang

System: Mac

Fordeler: Helt for «grensesnitt» -design

Sketch er et lett, brukervennlig vektordesignverktøy som gjør UI-design enklere og mer effektivt . Plattformen forenkler funksjonene som brukes i Photoshop og Illustrator, designet spesielt for UX / UI-design. Før Sketch måtte designere bytte mellom Photoshop og Illustrator for å få spesifikke funksjoner som vektor og andre fotoeffekter. Nå lar Sketch brukere kvitte seg med den oppblåste funksjonaliteten og fokusere på brukeropplevelse / brukergrensesnittdesign for å få mest mulig ut av deres UI-design. En av de beste funksjonene i Sketch er muligheten til å installere plugins for å kompensere for funksjoner som ikke er inkludert i programvaren.

Imidlertid, selv om det er et av de mest praktiske verktøyene for utforming av Android App-brukergrensesnitt, Sketchs støtte for forhåndsvisning i sanntid av Android-siden er ikke veldig effektiv. Brukere trenger å laste ned SkalaPreview, og bare etter en serie med tungvint operasjoner kan de se den faktiske utformingen av Android-grensesnittet på telefonsiden.

iDoc

System: Mac og Windows

Fordel: Online samarbeidsdesign og hånd-off design for UI-designere og utviklere

Som et helt nytt samarbeids- og overleveringsverktøy har iDoc kraftige plugins som støtter import av filer fra Photoshop, Adobe XD , og Sketch . Ved hjelp av plugins er iDoc mulig å generere spesifikasjoner og eiendeler automatisk for bruk av UI-designere. For å gjøre de statiske designfilene til interaktive og animerte hi-fi-prototyper, er det bare å laste opp filene dine til iDocs prototypemodul.

Invision – et nettbasert prototypeverktøy som gjør at designet ditt lever raskt

Kostnad: Gratis for 1 prosjekt (15 $ / mo for 3 prosjekter | 25 $ / mo for ubegrensede prosjekter | 99 $ / mo for team)

Kompatibilitet: Mac og Windows

Funksjoner :

  • Med InVision kan designere laste opp designfiler og legge til animasjoner, bevegelser og overganger for å transformere de statiske skjermene til klikkbare, interaktive prototyper. Få høy kvalitet på under 5 minutter.
  • Den støtter filer i PNG, JPG, GIF, AI og PSD-format. InVision App er flott for å samarbeide om designutkast og samle inn tilbakemeldinger fra kolleger og kunder.
  • Et magisk nytt design til arbeidsflyten. Lag stilark, få piksel-perfekte kompiser, diskuter designutfordringer, eksporter adaptivt, og generer ekte kode for ethvert designelement.

Figma

Pris – Gratis for personlig bruk

– $ 12 per person per gruppe / måned

Innledning: Figma er det første grensesnittdesignverktøyet for ekte -tidssamarbeid. Den har tre prisverdige funksjoner: sanntidssamarbeid, vektornettverk og versjonskontroll. Rett og slett er Figma som en nettleserbasert skisse med samarbeid i sanntid .

Personlig erfaring: Jeg var opprinnelig skeptisk til Figmas brukeropplevelse fordi det er et nettleserbasert grensesnittdesignverktøy. Men senere syntes jeg det fortsatt var veldig følsomt å bruke. Dessuten har nettleserverktøy den fordelen at mottakeren ikke trenger å installere noe, bare trenger å åpne nettleseren. på datamaskinen for å delta i prosjektet. Figma-filer er tilgjengelige på Mac, Windows, Linux og mobile enheter (kun visning).

Svar

Hvis en utvikler sa til meg «nei», vil jeg først spørre hvorfor og prøve å forstå deres grunn til å si nei. Hvis det viser seg at det er en bedre måte å nærme seg designutfordringen på, vil jeg være mer enn villig til å endre designet.

Imidlertid er utviklere generelt i stand til å kode noen av funksjonene og designene UI-designere. Komme opp med. Som William Hurley påpekte i dette svaret, er nesten alt mulig når det gjelder programvare.

Jeg har spurt programvareutviklere om «x-funksjonen» er mulig, eller om designet kan kodes for å fungere en viss måte, og jeg har aldri blitt fortalt «nei.»

Når det er sagt, skal målet som UI-designer ikke være å lage et komplekst design. Målet bør være å gjøre grensesnittet så enkelt og intuitivt for brukeren som mulig.

Av den grunn har jeg brukt prinsippene til Google Material Design i mine siste prosjekter (se 5 Kraftige og praktiske grunner til å bruke Material Design ).

Det er flere fordeler som følger med dette:

  • Kjennighet for brukere – Gmail, YouTube, Evernote, Buzzfeed og mange andre apper bruker Material Design, så det er større sjanse for at brukere av appen din blir kjent med hvordan grensesnittet ser ut og fungerer.
  • Eksisterende rammer – Mange rammer er opprettet som inkluderer ferdige komponenter for utviklere å bruke, som Materialiser CSS , AngularJS Material , og Material-UI . Dette hjelper designere å se hva som er lett tilgjengelig for utviklere og bruke komponentene i designene.
  • Raskere beslutningstaking – Når utviklere og designere kan fungere fra samme palett av komponenter, det gjør design- og utviklingsprosessen raskere.

Her er en flott video om hvordan Google fikk de mange appene sine til å se ut og føles konsistente, selv før de ga ut Materiell design. Ved å anvende prinsippene de brukte den gang og nå, kan designere skape bedre grensesnitt og praktisk talt eliminere “nei” fra utviklerens vokabular.

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert. Obligatoriske felt er merket med *