1,8K
Razumevanje dizajna korisničkog interfejsa (UI) će podići vaš web dizajn na drugi nivo. Dizajni koji uzimaju u obzir principe korisničkog interfejsa su uspešniji jer pomažu da se postigne cilј web sajta. Da bismo bili sigurni da ste najbolјi web dizajner koji možete da budete, podelićemo 100 UI i UX resursa tako da imate sve što vam treba.
UI i UX u web dizajnu
UI se odnosi na korisnički interfejs, a UX se odnosi na korisničko iskustvo. Oba su važna u web dizajnu.
Na primer, fontovi i boje su deo korisničkog interfejsa gde se UX ne odnosi na vizuelne elemente, već više na osećaj korisnika za celokupno iskustvo na web sajtu.
Iako su različiti, UI i UX blisko sarađuju. Ako web sajt izgleda stvarno dobro, ali je težak za korišćenje, nije uspešan. Isto tako, ako je jednostavan za upotrebu, ali izgleda jako loše, ni on nije uspešan.
UI Kits & Kit Marketplaces
- Pronađite mnogo UI Kit Marketplace-a na Design Modo-u
2. iOS 11 iPhone na Facebook-u koji sadrži Origami, Sketch, Framer i Photoshop templejte GUI elemenata
3. Otkrijte UI Kit Marketplaces za preuzimanje i korišćenje za različite uređaje na UpLabs-u
4. Creative Tim ima neke od najbolјih Bootstrap UI kompleta
5. 55+ elemenata besplatnog korisničkog interfejsa
6. Oh ne, ne još jedan UI komplet
7. PSD Boosterov UI komplet, teme i druge besplatne - UI8 ima više od 4.900+ odabranih dizajna resursi za podsticanje vašeg kreativnog toka rada
9. Kreativno tržište više od 2.200 UI kompleta i biblioteka sa grafičkim sredstvima i alatima za razvoj web sajtova
10. Prelepi UI kompleti za aplikacije spremne za upotrebu za UI/UX dizajnere, programere i početnike dostupni su na Interface Market-u
UI i UX Web sajtovi i resursi
- Dribbble je online zajednica UI UX dizajnera da prikažu njihov rad i da se angažuju
12. UX Magazin je izvor na jednom mestu za sve što je u vezi sa korisničkim iskustvom
13. UX Matters je web časopis o pitanjima korisničkog iskustva
14. UX Planet je odličan resurs za relevantne teme za korisničko iskustvo.
15. Nielsen Norman Group je lider u istraživačkom iskustvu korisnika
16. Usability.gov je dobar za najbolјe prakse i strategije za korisničko iskustvo. Naučite kako da napravite upotreblјivije, korisnije i pristupačnije web sajtove.
17. Pronađite dobre UI ideje i A/B testirane obrasce za veću konverziju u Good UI
18. Usability Geek je blog koji pruža korisne savete o upotreblјivosti, korisničkom iskustvu i još mnogo toga.
19. UX checklist je profesionalna kontrolna lista na jednoj stranici kreirana u svrhu korisničkog iskustva.
20. Obrasci dizajna mobilnih uređaja i resursi korisničkog interfejsa kao što su UIKit i elementi korisničkog interfejsa dostupni su na Pttrns za dizajnere.
21. UX blog na Intechnic-u uranja duboko u najbolјe prakse, strategije i resurse za UX koje trgovci treba da znaju
UI Inspiracija
- Design Snips je veliki resurs za browzovanje kroz za inspiraciju koju možete da ugradite u vaš UI dizajn rad
23. Budite inspirisani najbolјim web i interaktivnim dizajnom na Site Inspire
24. Niice je generator inspirativne ploče koji vuče u dizajnu i UX projekatima iz raznih sajtova koji će vam pomoći da vas inspirišu
25. Behance je jedna od najpopularnijih i inspirativnih web sajtova za UI profesionalce
26. Najbolјi web sajtovi za dizajn korisničkog interfejsa za vašu inspiraciju na Awwwards
27. Tajni izvor inspiracije dizajnera u Muzli
28. Brutalistički web sajtovi za jedinstvenu i zanimlјivu inspiraciju
29. Dobijajte vesti i inspiraciju sve u Panda-i
Dizajn obrasci
- UI Patterns je biblioteka uzoraka dizajna korisničkog interfejsa. Ovi obrasci služe kao standardne referentne tačke.
31. Pronađite mnogo najbolјih praksi u dizajnu interakcija na Welie
32. Astrum je lagana biblioteka obrazaca za vaše web projekte
33. UI Scraps je kolekcija dobrih, loših i vrednih pažnje dizajna korisničkog interfejsa
34. User Interface Engineering nudi više od obrazaca, to je težak resurs koji može da zadovolјi mnoge potrebe vašeg korisničkog interfejsa.
35. Elements of Designje kolekcija komponenti korisničkog interfejsa koje ističu najbolјe prakse za određene obrasce dizajna
Kontrolne liste i uputstva
- Koristite online UX Project Checklist za sve vaše web projekte. Prijavite se na Google da biste sačuvali vašu kontrolnu listu.
37. Checklist Design je kolekcija najbolјih praksi UX-a i korisničkog interfejsa
38. Zvanični vodič za Google.ove Material Design standarde
39. Testirajte vaše web sajtove za najbolјe prakse, pristupačnost, testiranje, performanse i još mnogo toga uz The Front-End Checklist
40. Checklist: Dizajn korisničkog interfejsa od strane IBM-a
41. Lite Checklist za testiranje korisničkog interfejsa (korisničkog interfejsa) – Lvivity
42. Upotreba UI/UX dizajna isporučuje kontrolnu listu rezultata za sve UI/UXa faze dizajna UI/UX-a iz MobiDev-a
43. Kontrolna lista za pristupačnost korisničkog interfejsa
Fontovi i ikone
- Koristite popularni skup ikona i alatki sa ikonama i društvenim logotipima za vaše web sajtove sa Font Awesome
45. Icon8 nudi besplatne piksel savršene ikone za različite stilove dizajna u png i vektoru
46. Flat Icon ima najveću bazu besplatnih vektorskih ikona sa više od 145.000 ikona u različitim formatima
47. Pronađite besplatne izvore za čuvanje mesta avatara za vaš mocksup dizajn na UI Faces-u. Uklјučuje opcije za Sketch, Adobe XD i Figma.
48. Pregledajte paket UX fontova na Adobe fontovima.
49. The Noun Project ima sjajnu kolekciju ikona UX dizajna.
50. Dobijte besplatne, kao i premium UX ikone na Iconfinder
51. FontSpace je odlično mesto za pronalaženje sjajnih fontova
Alati za vektorske i bitmap slike
- Sketch je komplet alata za dizajn napravlјen da vam pomogne da kreirate vaš najbolјi rad – od vaših najranijih ideja, do finalnog umetničkog dela (za Mac)
53. Adobe XD je vaše UI/UX rešenje za dizajn za kreiranje web sajta (za Windows)
54. Figma omogućava na više dizajnera da kreiraju kreativne responsive dizajne dok istovremeno rade na istoj datoteci
55. Dizajnirajte mikro interakcije i prelaze ekrana pomoću Flinto
56. Uz Zeplin, možete da objavlјujete finalizovane dizajne sa Figma, Sketch, Adobe XD i Photoshop
Mapiranje uma
Mapiranje uma pomaže web dizajnerima da predstave interne procese i efikasno organizuju informacije.
- XMind je popularan softver za mapiranje uma (za Mac i Windows)
58. Kreirajte šarene mape uma za štampanje ili delјenje sa drugima pomoću Bubbl
59. Lako razvijajte mape uma pomoću Coggle
60. MindMapple je unapred učitan sa temama i templejtima za vaše mape uma
61. MindMeister je lak način da podelite svoje ideje sa timom koristeći mapu uma
62. LucidChart ima fleksibilnost Coggle-a, ali sa bolјim karakteristikama za timove
63. Alat prelepog izgleda po veoma pristupačnoj ceni – Whimsical
67 Gliffy je takođe namenjen dizajnerima, a može da se koristi i za wireframing.
Wireframing i Prototipovanje
- UX Pin je alatka za dizajn korisničkog interfejsa i prototipovanje sa pravim osećajem koja koristi komponente koda, logiku, stanja i sisteme dizajna
69. OmniGraffle se koristi za kreiranje vizuala sa mnogim karakteristikama uklјučujući alate za dizajn, prevuci i ispusti WYSIWYG interfejs i funkcija za beleške
70. Balsamiq je brz i efikasan softver za wireframing - InVision je platforma za dizajn digitalnih proizvoda koja se koristi za pružanje najbolјeg korisničkog iskustva u svetu
72. Framer je alatka za izradu prototipa zasnovana na browzeru koja je odlična za timove
73. Wireframe, prototip, korisničko testirajte, dizajniranje i pregledanje dizajna na jednom mestu sa Marvelom - Sarađujte u realnom vremenu na wireframe-ovima, mockup-ima, dijagramima i prototipovima sa Moqups
75. Napravite maketu aplikacije i pokažite šta je važno sa Mockingbird
76. Wireframe CC – alatka za dizajn fino podešean za wireframing
Testiranje
- User Testing je alat za testiranje upotreblјivosti i istraživanje za pobolјšanje korisničkog online iskustva
78. Eyequant koristi veštačku inteligenciju i neuronauku da vam pomogne da dizajnirate besprekoran UX koji povećava konverziju
79. Pogledajte kako posetioci zaista koriste vaš web sajt, prikupite povratne informacije korisnika i pretvorite više posetilaca u kupce uz HotJar
80. Pogledajte gde ide pažnja posetilaca sajta i gde se zaglavljuju koristeći Inspectlet i njihovo snimanje sesije, toplotne mape web sajta, A/B testiranje i druge alate
81. Dobijte stvarne povratne informacije od korisnika za bilo koji web sajt na bilo kom jeziku sa Userfeel
82. The Five Second Test je jednostavan test upotreblјivosti za optimizaciju jasnoće vašeg dizajna i pobolјšanje stope konverzije merenjem prvih utisaka lјudi.
83. GTmetrix je besplatna alatka koja analizira performanse brzine vaše stranice i nudi preporuke za pobolјšanje
84. TestRail je kompletno rešenje za upravlјanje test slučajevima zasnovano na webu
85. Usabilla ima za cilј da pomogne dizajnerima i trgovcima da nastave da pobolјšavaju proizvod
Web pristupačnost
- The Wave alatka za procenu pristupačnosti weba je proširenje browzera za Chrome i Firefox koje vam omogućava da proverite da li postoje problemi sa pristupačnošću.
87. Max Access je napravlјen za WCAG i odelјak 508. Radi sa svim web sajtovima i omogućiće vašem web sajtu automatski pristup za nekoliko minuta koristeći AI.
88. The Web Accessibility Evaluation Tools List deli listu alata za procenu koje možete da filtrirate da biste pronašli onaj koji odgovara vašim specifičnim potrebama
89. Image Analyser ispituje sve slike koje se nalaze na web stranici da bi proverio da li postoje problemi sa pristupačnošću
90. Učinite vaš sadržaj dostupnim za sve sa Make Sense
Ankete
- Kreirajte vaše sopstvene ankete ili koristite unapred napravlјenu temu sa Google Forms
92. Sa Free Survey Creator, napravite anketu, ugradite je na vaš web sajt pomoću JavaScript linije i primajte odgovore u vaše prijemno sanduče
93. Survey Monkey je popularna, besplatna alatka za anketiranje da biste videli rezultate u realnom vremenu
94. SurveyGizmo nudi napredniji alat za anketiranje
95. Sa Typeform-om možete da kreirate ankete, kvizove, obrasce i još mnogo toga
96. Survey Planet je jednostavan i moćan alat za online anketiranje
Drugi resursi
- 10 Rules of Good UI Design koja treba slediti na svakom web dizajn projektu
98. Važnost funkcionalne animacije u UX-u
99. 32 User Interface Elements For UI Designers: Vaš krajnji rečnik
100. Elementi korisničkog interfejsa i interakcija: Google Documentation
