Alat s alatima dizajnera proizvoda

Kad na svako pitanje ima bezbroj različitih odgovora, stvari postaju zbunjujuće. Brzo.

Predgovor

Stolari koriste svoje omiljene čekiće. Programeri koriste svoje omiljene IDE. Liječnici koriste svoje omiljene… stetoskope?

Što dizajnerski proizvodi koriste?

Kao relativno nov dizajner, i ja sam prezadovoljan u potrazi za pravim alatom za određeni zadatak. Kada za svako pitanje postoji više odgovora, stvari postaju zbunjujuće. Brzo. Dok se nisam upustio u prekrasan svijet dizajna proizvoda, slijedili su mi glavni alati:

  • Olovka i papir
  • Rezač za kutije
  • InDesign
  • Ilustrator

Oduševljeno, koristio sam se ovim alatima prije svega za moje tečajeve na faksu, koji su bili usmjereni na fizički zanat. Privukao sam pravičan udio svih nijansi mjere, rezanja i ponovnog rezanja. Ljepljenje, ljuštenje i ponovno lijepljenje. Bio je to bolan, ponavljajući proces, ali vrijedan. Nemojte me krivo shvatiti, volim dizajn printa i obožavam izradu dizajna od stvarnih, fizičkih predmeta. Ne pokušavam kucati dizajnere koji rade na taj način, ali zaljubio sam se u proizvod i * ~ digital ~ * dizajn. Nažalost, moja škola nije imala jedan nastavni plan i program usmjeren na web / mobilni dizajn osim jednog predmeta (Dizajn korisničkog sučelja ... s Photoshopom ).

Dakle, da bih stigao do naslova dizajnera proizvoda, morao sam se potpuno uroniti i naučiti se osnovama. Kao što sam već spomenuo, to je zastrašujući zadatak, posebno novom dizajneru - ali i zabavan. Nadamo se da ovaj članak odgovara na neka pitanja koja novi dizajneri mogu imati u vezi s dizajnom proizvoda i alatima koji uz njega dolaze.

Izjava o odricanju odgovornosti: U ovom članku neće biti konačnih odluka. Svaki dizajner radi drugačije, a alati koje preporučujem možda nisu najbolji za vas. Ovaj je članak namijenjen samo tome da vam pomogne u pronalaženju odgovarajućeg alata za pravi posao u svom radnom procesu.

Foto: Štefan Štefančík

Brainstorming i ideja

Olovka i papir

Kada je engleski autor Edward Bulwer-Lytton 1839. godine skovao frazu, "Olovka je moćnija od mača", 1839. godine, on nije isticao prednosti olovke i papira nad softverom za žično uokvirivanje. Ali argument i dalje vrijedi.

Olovka i papir i dalje vladaju digitalnom alternativom na važne načine:

  • Brzo izrađivanje prototipa: Često će se od vas tražiti da u kratkom roku dostavite dokaz o konceptu. To možda zvuči jednostavno ako dizajnirate za jedan ili dva ekrana, ali što se događa ako dizajnirate za cijeli sitemap ili poslovni softver? Olovka i papir vaši su najbolji prijatelji za brze skice i popratne napomene. Bonus: Provjerite što je, dovraga, "Brzo prototipiranje"? autor: Keaton Herzer.
  • Jednostavno rukovanje: skice sa prijenosnih računala mogu se proslijediti oko konferencijskog stola ili skenirati i poslati e-poštom vašem timu u nekoliko sekundi. Suradnici mogu komentirati, skicirati vlastite ideje ili ih samo smetati i reći da započnete ispočetka. Zar vam nije drago što niste proveli tri sata na Sketchu?
  • Nadahnjuje kreativnost: Nema ništa lošijeg osjećaja kao dizajnera nego buljiti u prazno platno na ekranu vašeg računala satima na kraju, ne uspijevajući smisliti sljedeću veliku ideju. Kad zurite u piksele, oni se također zagledaju u vas. Ako vas taj osjećaj pogodi, otvorite bilježnicu. Kada se ruka može slobodno kretati po stranici, a izravne rezultate vaše kreativnosti možete vidjeti tintom na papiru, motivirat ćete se. Inspirirate se. Shvaćate da ste kreativna osoba i da pikseli nisu samo buljenje - oni vas vesele, čekaju da svoju strašnu ideju sa stranice prebacite na ekran.

Za više prednosti prototipa olovke i papira, pročitajte članak Andrewa Couldwella.

Fotografije: Andrew Couldwell

Milanote

Milanote je relativno novo sredstvo, ali za mene je brzo postao napredni alat. To je aplikacija i proširenje za preglednik za kreativno planiranje projekata - u osnovi digitalna tabla sa raspoloženjem. Milanote se može koristiti za izradu karte putovanja kupaca i biblioteke inspiracije ili čak plana sadržaja web stranica. Što dublje zaronite u Milanote, to postaje korisniji. Ploče Milanote neograničene su veličine, dostupne s bilo kojeg mjesta i ostanite tamo gdje ste ih ostavili, čak i nakon završetka projekta.

Fotografije: Milanote

Pinterest

Pinterest ima puno nedostatka, ponekad opravdano, ali i dalje ostaje moćan alat za dizajnersku inspiraciju. Pretraživanje "dizajna sučelja" vraća tisuće povezanih rezultata koji sadrže fontove, setove korisničkog sučelja, paletu boja, ikone i još mnogo toga. To je beskrajan resurs za otkrivanje gotovo svega.

Počasni spomenici: Dribbble, Designspiration, Medium, pttrns.com, Muzli

Korisnički tokovi i žičani okvir

Kapriciozan

Whimsical je web aplikacija za dijagrame tijeka i žičane okvire. Whimsical omogućuje vam da brzo izgradite tokove i surađujete na idejama. Ako vaš projekt zahtijeva suradnju u stvarnom vremenu za brze dijagrame tijeka i žičane okvire, Whimsical bi mogao biti vaš najbolji kladionica.

Dijagram dijagnoze

Prelijevanje

Overflow je pogodio scenu dizajna u ožujku 2018. godine i od tada je postao omiljeni alat mnogih dizajnera proizvoda. Overflow, sličan Whimsical-u, alat je više platformi koji se integrira i sinkronizira s najpopularnijim alatima za dizajn kako bi dizajnerima omogućio stvaranje lijepih korisničkih tokova. Prema tvorcima, Overflow se fokusira na tri glavne prednosti: sinkroniziranje dizajna, dizajniranje lijepih korisničkih tokova i predstavljanje najefikasnijeg i najuzbudljivijeg načina.

Balsamiq

Balsamiq je brzi alat za žičane okvire koji reproducira iskustvo rada na dasci, ali na računalu. Takva estetika poput skice može biti isključenje nekih dizajnera, ali mislim da potiče brainstorming i kreativnost (sjećate li se onoga što sam ranije rekao o olovci i papiru?). Jedna od prednosti Balsamiqa je ta što dolazi s unaprijed ugrađenim elementima sučelja poput gumba, kutija za upozorenja, izbornika i još mnogo toga za brzo presvlačenje, dobro i brzo. Balsamiq također nudi kontrolu verzija za jednostavnu iteraciju - njihova web aplikacija ima čak i grananje!

Izjava o odricanju odgovornosti: Možda želite pročitati članak Jamesa Hatfielda ovdje prije nego što se obvežete kupiti Balsamiq.

Foto: Balsamiq

Wireframe.cc

Wireframe.cc nudi jednostavno, nesmetano sučelje za brzo dizajniranje korisničkih protoka. Postoje značajke za timsku suradnju, poput uređivanja i komentiranja, ali su ove značajke uključene u premium nadogradnju. Wireframe.cc nudi i jednostavnu kontrolu verzija - vaš će rad biti spremljen u trenutnom stanju i moći ćete ga preuzeti ili podijeliti slanjem veze do njega.

Foto: Fatbit Technologies

Počasni spomenici: moqups

Prototipizacija niske vjernosti

Prototipiranje niske vjernosti (lo-fi) brz je i jednostavan način prevođenja dizajnerskih koncepata visoke razine u opipljive i testirane artefakte. Prva i najvažnija uloga prototipova lo-fi jest provjera i testiranje funkcionalnosti, a ne vizualni izgled proizvoda. "

Skica

Ah, skica. Vladajući šampion alata za oblikovanje korisničkog sučelja za mnoge dizajnere. Pogledajte bilo koji "popis najboljih alata za dizajn korisničkog sučelja", a Sketch će obično biti na vrhu, i to s dobrim razlogom.

Sketch je alat za dizajn dizajniran kako bi vam pomogao u stvaranju vašeg posla - od vaših najranijih ideja do završnog rada. Kada prvi put pokrenete Sketch, on će se pokazati šokantno minimalan. Kad sam otvorio Sketch, pomislio sam: "Nema načina da u ovome dizajniram cijelu aplikaciju." Koliko sam naivan.

Skica je evoluirala u pomalo alat za oblikovanje elektrane. Danas su nam na raspolaganju resursi za brzo prototipiranje, stotine dodataka za povećanje funkcionalnosti, i što je najbolje od svega, Sketch je kompatibilan s nekim od [drugih] najboljih alata za izradu prototipa, poput InVision, Figma, Framer i još mnogo toga.

Foto: Newbird Design

Figma

Figma je, poput Sketch-a, alat za dizajn, ali je temeljen na pregledniku (korisnici računala se raduju!). Podržava suradnju u stvarnom vremenu, detaljnu povijest verzija, timske prostore, integraciju sa Slackom i Framerom i još mnogo toga. Ako se vi ili vaš tim temelji na PC-u, Figma je možda bolja alternativa Sketch-u.

Foto: Matt Healy

Visoko vjerni prototipiziranje

Pojavljuju se visoko-vjerni prototipovi (hi-fi) koji djeluju što je više moguće sa stvarnim proizvodom koji se isporučuje. Timovi obično stvaraju prototipove visoke vjernosti kada dobro razumiju što će graditi i trebaju ih testirati s stvarnim korisnicima ili dobiti odobrenje konačnog dizajna od dionika.

Framer (X)

Framer je snaga alata za dizajn, koji tvrdi da je "jedini alat koji morate izgraditi za iOS, Android i web." Framer je sličan Sketch-u, Figmi i InVision Studio-u, jer vam omogućuje stvaranje visokih -povjerljivost sučelja sa svojim moćnim vektorski uređivač. Koristeći njihov prilagodljivi graditelj sučelja, elemente spremne za CSS i biblioteke aplikacija, u Frameru možete izgraditi bilo koje sučelje o kojem možete sanjati.

Framer ga stavlja na prvo mjesto implementiranom prototipiranju koda. Framer radi na CoffeeScript, laganom programskom jeziku koji se sastavlja u JavaScript. S CoffeeScriptom možete prototirati gotovo sve: animacije, geste, pa čak i zahtjeve za prijenos podataka uživo.

Nedavno je najavljen Framer X i trenutno se nalazi u zatvorenoj beta verziji. To je potpuno novi proizvod i napredniji od Framera, omogućavajući upotrebu komponenti za izradu čitavih sustava interaktivnog dizajna, a sve se temelje na React i ES6.

Foto: MacUpdate

Načelo

Principle je alat fokusiran na stvaranje jednostavne animiranja vaših dizajna. Vremenska traka Principa pojednostavljuje prikaz savršene lakoće, poskakivanja ili odbijanja. Također vam daje slobodu za stvaranje novih prilagođenih interakcija, čak i ako dizajnirate za više zaslona.

Princip nudi Princip ogledalo, što dijeljenje vašeg prototipa s drugima čini bez napora. Možete i izvesti samostalnu Mac aplikaciju da bi je drugi mogli vidjeti za jednostavne povratne informacije i suradnju.

Skica

Već smo spomenuli prednosti Sketcha za lo-fi prototipiranje, ali što je s hi-fi prototipiranjem? Pa, i Sketch to može učiniti!

Skica nedavno implementirane izrade prototipa omogućava vam izradu interaktivnih tijekova rada i pregled dizajna dok će ih korisnici vidjeti. Prototipiranje skice omogućuje vam kreiranje gesta i interakcija bez napuštanja aplikacije, ali je pomalo ograničeno u usporedbi s drugim alatima za prototipiranje hi-fi - bez prilagođenih animacija i samo nekoliko gesta.

Foto: Skica

InVision Studio

InVision Studio pomalo je novost u svijetu dizajna proizvoda, ali sam InVision postoji prilično dugo, a milijuni dizajnera i timova širom svijeta koristili su za stvaranje jednostavnih, brzih prototipova na webu.

Studio vam omogućuje dizajn, prototip i animiranje - sve na jednom mjestu. InVision ima svoje korijene u prototipiranju, a Studio to podiže na novu razinu, s moćnim vektorskim uređivanjem, fleksibilnim slojem slojeva i savršenim izgledima piksela. Brzo izrađivanje prototipa dolazi jednostavno uz sveobuhvatne geste i trenutnu reprodukciju.

Studio je napravio korak dalje ugradnjom animacija. Možete koristiti ugrađene unaprijed postavljene animacije ili ih prilagoditi vremenskim rokovima i olakšati uređivače.

Još jedna prednost Studija je InVisionov dizajnerski sustav za upravljanje, koji jamči trenutni pristup knjižnicama komponenata globalnog dijeljenja vašeg tima, čineći lakšim dosljednim i upravljanjem svojim dizajnom na skali.

Foto: UX kolektiv

Od prototipa do proizvoda

Zeplin

Zeplin je još jedna od onih must-have aplikacija za timove ili dizajnere koji kodiraju.

Zeplin je aplikacija za UI dizajnere i razvojne programere koja im omogućuje učinkovitu suradnju i štede vrijeme. Dizajneri mogu brzo pretvoriti svoj dizajn u snažne specifikacije i smjernice, dok programeri mogu pristupiti svim resursima koji su im potrebni na jednoj lokaciji i generirati isječke koda koji su prilagođeni platformi na kojoj rade.

Zeplin se bez problema integrira sa Sketch, Figma, Adobe XD i Photoshop za jednostavnu suradnju s vašim omiljenim alatom za dizajn. Zeplin također nudi podršku za Slack i Trello kako bi nadopunili vaš tijek rada.

Fotografije: Zeplin

Avocode

Poput Zeplina, Avocode je alat neovisan o platformi koji vam pomaže da dijelite, pristupate i pregledavate izvorne datoteke dizajna. Avocode vam omogućuje da dobijete naočale, sredstva i kôd od Sketch, Figma, Adobe XD i Photoshop i omogućuje vašem timu da raspravlja o promjenama i dobiva povratne informacije odmah.

Avocode također nudi sjajan sustav kontrole verzija. Čuva neograničenu povijest verzija dizajna za svaku datoteku kako bi se izbjegao sukob. Zajedno s sustavom za upravljanje datotekama Avocode-a lako je pratiti promjene i položaj datoteka.

Foto: Avocode

Hotjar

Kakve su dobre koristi od ovih alata za dizajn ako nam ne pomažu u stvaranju boljih iskustava za krajnjeg korisnika? Hotjar je sveobuhvatna aplikacija za analizu i povratne informacije koja olakšava istinsko razumijevanje posjetitelja vaše web i mobilne web lokacije.

Hotjar sadrži toplotne karte, snimke, tokove pretvorbe, analizu obrasca i još mnogo toga. Bez obzira radite li solo ili u timu, Hotjar pruža potrebne informacije o svojim korisnicima kako biste mogli nastaviti iteratirati i poboljšavati svoj proizvod.

Fotografije: Hotjar

Kontrola verzija i upravljanje datotekama

Dropbox / Google pogon

Nikad ne podcjenjujte klasike. Usluge pohrane u oblaku izvrsno su polazište za sustav kontrole verzija za vaš proizvod. Gnijezde mape, dijelite s suradnicima, dobivajte povratne informacije i držite iteratig.

  • Dropbox: Oporavak starijih verzija datoteka
  • Google pogon: pregledajte aktivnosti i verzije datoteka

Sažetak

Sažetak je lani stigao na scenu i stvarao valove diljem dizajnerske scene. Sažetak je platforma za suvremene dizajnerske timove da rade zajedno, nudeći sigurno, čvorište nadzirano verzijama za vaše dizajnerske datoteke. Sažetak nudi pristupačnost putem preglednika, a također nudi i aplikaciju za macOS.

Sažetak nadograđuje i proširuje stabilnu tehnologiju Gita za ugošćavanje i upravljanje vašim radom. Komični vodič za sažetak sadrži sažetak o tome kako je lako stvarati, održavati, surađivati ​​i ažurirati projekte.

Sažetak trenutno podržava samo datoteke Sketch, ali očekuje se još novih formata datoteka.

Biljka

Biljka je još jedna alternativa za verziju dizajna. Plant čuva detaljnu povijest verzija i nudi selektivnu verziju artboard-a. Za razliku od Sažetak, Plant nudi izravan dodatak za Sketch i samostalnu aplikaciju. Plant je dostupan na internetu, što omogućuje jednostavno pozivanje dizajnera na projekt, sinkronizaciju promjena među sobom i gledanje projekta u porastu.

Deblo

Najnoviji pridošlica na sceni! Čini se da aplikacije za upravljanje verzijama dizajna postaju sveprisutne kao i aplikacije za upravljanje projektima - ali konkurencija je dobra stvar.

Prtljažnik je još jedna alternativa sigurnoj platformi za upravljanje verzijama, napravljenoj posebno s dizajnerima na umu. Trunk prihvaća automatizirani pristup kontroli verzije, govoreći vam da zaboravite žargon "grane, zahtjeve za spajanje i spajanje". Ovo bi moglo biti dobro polazište za one koji su novi u kontroli verzija.

Trunk nudi podršku za datoteke Sketch i Photoshop.

Počasni spomen: Kaktus

Zaključak

Odabir pravog alata za određeni posao nije uvijek lak, posebno za nove dizajnere. Nadamo se da ovaj članak odgovara na neka od pitanja koja imate o mnoštvu alata za dizajn pri ruci. Moj savjet: svaki se intenzivno koristite za različite projekte i smislite koji od njih odgovara vašem tijeku rada. Pregledajte ploče s radnim mjestima i pogledajte što vas tvrtke traže prije nego što počnete primjenjivati ​​kako biste mogli ući u vaš intervju samouvjereno i spremni za dizajn. Posljednje, ali ne najmanje bitno, zabavite se!

Volim povratne informacije! Ako imate komentara, pitanja ili nedoumica, slobodno ispišite odgovor u nastavku i javite mi što biste promijenili ili dodali. Javite mi koje alate koristite u svom dizajnu!

Posebna zahvala Brandonu Gettyju za lektiranje i uređivanje ovog članka.

Ažuriranje: Hansel Wong stvorio je super koristan resurs u kojem su navedene neke od aplikacija ovdje, kao i mnoge druge. Pogledajte na https://neede.co/