Hvilke er de bedste værktøjer til UI-udvikler?

Bedste svar

UI-designere:

Skitse

Kom godt i gang

System: Mac

Fordele: Helt til “interface” -design

Sketch er et let, brugervenligt vektordesignværktøj, der gør UI-design enklere og mere effektivt . Platformen forenkler de funktioner, der bruges i Photoshop og Illustrator, designet specielt til UX / UI-design. Før Sketch måtte designere skifte mellem Photoshop og Illustrator for at få specifikke funktioner såsom vektor og andre fotoeffekter. Nu giver Sketch brugere mulighed for at slippe af med den oppustede funktionalitet og fokusere på brugeroplevelse / brugergrænsefladesign for at få mest muligt ud af deres UI-design. En af de bedste funktioner i Sketch er muligheden for at installere plugins for at kompensere for funktioner, der ikke er inkluderet i softwaren.

Dog selvom det er et af de mest praktiske værktøjer til design af Android App-brugergrænseflader, Sketchs support til realtidsvisning af Android-siden er ikke særlig effektiv. Brugere skal downloade SkalaPreview, og først efter en række besværlige operationer kan de se det faktiske design af Android-grænsefladen på telefonsiden.

iDoc

System: Mac og Windows

Fordel: Online samarbejdsdesign og hånd-off design til UI-designere og -udviklere

Som et helt nyt samarbejds- og afleveringsværktøj har iDoc kraftfulde plugins, der understøtter import af filer fra Photoshop, Adobe XD , og Sketch . Ved hjælp af plugins er iDoc muligt at generere specifikationer og aktiver automatisk til UI-designerens brug. For at gøre de statiske designfiler til interaktive og animerede hi-fi-prototyper, skal du bare uploade dine filer til iDocs prototype-modul.

Invision – et webbaseret prototypeværktøj, der får dit design til at leve hurtigt

Omkostninger: Gratis for 1 projekt (15 $ / mo for 3 projekter | 25 $ / mo for ubegrænsede projekter | 99 $ / mo for teams)

Kompatibilitet: Mac og Windows

Funktioner :

  • Med InVision kan designere uploade deres designfiler og tilføje animationer, bevægelser og overgange for at omdanne deres statiske skærme til klikbare, interaktive prototyper. Få høj kvalitet på under 5 minutter.
  • Det understøtter filer i PNG-, JPG-, GIF-, AI- og PSD-format. InVision App er fantastisk til at samarbejde om designkladder og indsamle feedback fra kolleger og kunder.
  • Et magisk nyt design til udviklingsworkflow. Opret stilark, få pixel-perfekte comps, diskuter designudfordringer, eksporter adaptivt, og generer ægte kode til ethvert designelement.

Figma

Pris – Gratis til personlig brug brug

– $ 12 pr. person pr. gruppe / måned

Introduktion: Figma er det første interface designværktøj i virkeligheden -tids samarbejde. Det har tre prisværdige funktioner: realtids samarbejde, vektornetværk og versionskontrol. Simpelthen er Figma som en browserbaseret skitse med realtids samarbejde .

Personlig oplevelse: Jeg var oprindeligt skeptisk over for Figmas brugeroplevelse, fordi det er et browserbaseret interface-designværktøj. Men senere fandt jeg det stadig meget følsomt at bruge. Hvad mere er, browserværktøjer har den fordel, at modtageren ikke behøver at installere noget, bare skal åbne browseren på computeren for at deltage i projektet. Figma-filer er tilgængelige på Mac, Windows, Linux og mobile enheder (kun visning).

Svar

Hvis en udvikler fortalte mig “nej”, ville jeg først spørge hvorfor og prøve at forstå deres grund til at sige nej. Hvis det viser sig, at der er en bedre måde at nærme sig designudfordringen på, ville jeg være mere end villig til at ændre designet.

Imidlertid er udviklere generelt i stand til at kode nogen af ​​funktionerne og designene UI-designere Finde på. Som William Hurley påpegede i dette svar, er næsten alt muligt, når det kommer til software.

Jeg har spurgt softwareudviklere, om “x-funktion” er mulig, eller om designet kan kodes til at fungere en bestemt måde, og jeg har aldrig fået at vide “nej.”

Når det er sagt, skal målet som UI-designer ikke være at lav et komplekst design. Målet skal være at gøre grænsefladen så enkel og intuitiv for brugeren som muligt.

Af den grund har jeg brugt principperne for Google Material Design i mine seneste projekter (se 5 Kraftige og praktiske grunde til at bruge Material Design ).

Der er flere fordele, der følger med dette:

  • Kendskab til brugere – Gmail, YouTube, Evernote, Buzzfeed og mange andre apps bruger Material Design, så der er større chance for, at brugere af din app vil være fortrolige med, hvordan grænsefladen ser ud og fungerer.
  • Eksisterende rammer – Mange rammer er oprettet, der inkluderer færdige komponenter, som udviklere kan bruge, som Materialiser CSS , AngularJS Material og Material-UI . Dette hjælper designere med at se, hvad der er let tilgængeligt for udviklere og bruge disse komponenter i deres design.
  • Hurtigere beslutningstagning – Når udviklere og designere kan arbejde fra den samme palet af komponenter, det gør design- og udviklingsprocessen hurtigere.

Her er en fantastisk video om, hvordan Google fik deres overflod af apps til at se og føle sig konsistente, selv før de frigav Materielt design. Ved at anvende de principper, de brugte dengang og nu, kan designere skabe bedre grænseflader og næsten eliminere “nej” fra udviklerens ordforråd.

Skriv et svar

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *