Muvaffaqiyatli UI to'plamini qanday qurish va sotish mumkin

Qog'oz to'plamidagi voqea

Qog'oz UI to'plami

1-kundan boshlab men va mening Creative Tim jamoam duch kelgan asosiy muammo bu bizning sevimli mashg'ulotimizni o'zimizni boqishning iqtisodiy usuli qilish edi. Buning uchun biz odamlar aslida ishlatmoqchi bo'lgan go'zal UI to'plamlarini qanday yaratishni va ularni foydalanuvchilar oldida qanday topishni o'rganishimiz kerak edi. Bir necha urinish va ko'p kuch sarflanganidan so'ng, biz bu kosmosga kirishga harakat qilayotgan har kimga yordam berishi mumkin bo'lgan ikkita narsani tushundik.
 
 Dastlabki bir necha oy ichida mahsulotimni ishlab chiqish bo'yicha sherikim Aleks mas'ul edi. Ba'zi to'plamlarni tortib olishni boshlaganimizdan so'ng, mijozlarimiz bizdan ko'proq bo'shashimizni xohlashlari haqida javob oldilar. Shunday qilib, men mahsulotni kodlash bilan bevosita shug'ullanishim kerak bo'lgan nuqta edi. Shuni yodda tutingki, bu mening birinchi urinishim edi.
 
 Ushbu maqola davomida men eng ommabop to'plamlarimizdan biri - "Qog'oz to'plami" ni yaratish va undan keyin o'z auditoriyasini topish borasidagi harakatlarimni imkon qadar tushuntirishga harakat qilaman. Men imkon qadar ko'proq ma'lumot berishga harakat qilaman, shuning uchun natija otni qanday chizishni tasvirlaydigan rasmga o'xshaydi:

Bir necha yil oldin men twitterda narxni ko'rdim. Bu shunday bo'ladi: "Menga daraxtni kesish uchun olti soat vaqt bering, shunda men to'rtta boltani o'tkirlash uchun sarflayman". Bu Avraam Linkolnga tegishli. Bu men uchun juda yaxshi ma'noga ega bo'lib, ishlashga bo'lgan munosabatimni haqiqatan ham o'zgartirdi.
 
 Men haqiqatan ham ishlarni bajarishga tayyor bo'lgan odam edim. Ko'p yillar davomida men ko'proq sabrli bo'lishni va boltani o'tkirlashni o'rgandim. Bu rivojlanayotgan va UI to'plamiga qanday tarjima qilinadi? Asosan, tadqiqotlar. Istalgan kod satrini yozishdan oldin men Internetda topilgan barcha UI to'plamlarini tekshirib chiqdim.
 
 ThemeForest va BootstrapBay kabi bozorlarda turli xil mavzular mavjud. Ularning aksariyati ma'lum bir maqsad uchun qurilgan. Agar siz aniq taqdimot saytini yaratmoqchi bo'lsangiz, ular odatda juda yaxshi ish qilishadi. Ammo biz orqa loyihani ishlab chiqaruvchisi murakkab loyiha bilan foydalanishi mumkin bo'lgan narsani yaratmoqchi edik. Shunday qilib, biz diqqatimni Airbnb, Uber, Twitter, Paper53 kabi murakkab saytlarga qaratdik. Ular qanday elementlardan foydalanadilar? Ular qaysi dizaynni afzal ko'rishadi?

Elementlar

Turli xil maqsadlarga ega bo'lgan ko'plab saytlarni o'rganganimizdan so'ng: taqdimot, portfel, ijtimoiy, biz asosiy bo'lgan elementlarning ro'yxatini topdik:

  • tugmalarini bosing
  • kirishlar
  • tasdiq belgisi / radio
  • navigatsiya
  • ochiladigan ro'yxat
  • taraqqiyot satrlari / slayderlar
  • menyular
  • tipografiya
  • rasmlar
  • bildirishnomalar
  • yorliqlar
  • karusel

Ular sahifani yaratish uchun kerak bo'lgan funktsiyalarning 90% dan ortig'ini qamrab oladi.

Dizayn va ishlab chiqish

Hozirgi vaqtda dizayndagi eng katta tendentsiyalardan biri bu Material va iOS tekis ko'rinishi edi. Menga ular juda yoqdi, lekin ular mening uslubim emas edi. Men o'ynoqi, kulgili va oson bajariladigan narsalarni qurmoqchi edim. Men Dribbl va Behans singari dizaynerlar uchun juda ko'p vositalardan foydalandim. Ammo men oxir-oqibat o'zim ishlatadigan juda ajoyib saytlarni loyihalashga qaror qildim: 53-rasm va Headspace. Men ular ajoyib ko'rinadi deb o'yladim va ularni boshqarganingizda ular chindan ham tinchlantiruvchi ta'sirga ega.
 
 Shunday qilib, men Bootstrap uchun asosiy sinflarni qamrab olish uchun 6 rangdan iborat ranglar palitrasini yaratdim. Barcha fon qog'oz varaqlariga o'xshatishga harakat qilmoqda va animatsiyalar qog'oz varag'ining harakatlariga taqlid qilish uchun mo'ljallangan. Shriftlar uchun Google Fonts tomonidan taqdim etilgan bepul shrift bilan yurdim. U Montserrat deb nomlangan.
 
 Kit juda foydali bo'lishi mumkin, lekin ko'pincha odamlar uni qanday ishlatishni tushunmaydilar. Shunday qilib, men 3 ta misol sahifalarini yaratdim: kirish, profil va ochilish sahifasi, unda nima qurishingiz mumkinligini ko'rsatish uchun. Odamlar o'z loyihalarini qurishda ulardan to'g'ridan-to'g'ri foydalanishlari mumkin edi.

Ro'yxatdan o'tish sahifasi Qog'oz to'plami yordamidaProfil sahifasi Paper Kit bilan ishlangan.

Dastur har bir komponent uchun SASS fayllarini yaratishni anglatardi. Ushbu Sass fayllari CSS-ga tuzilgan va Bootstrap-dan keyin qo'shilgan. Shunday qilib, allaqachon Bootstrap loyihasiga ega bo'lgan kishi maxsus fayllarni qo'shishi va yangi dizaynni olishi mumkin. Javascript modifikatsiyalari minimal edi, chunki biz faqat Bootstrap-da ba'zi bir standart elementlar uchun standart ko'rsatuvlar bilan o'ynaganmiz.
 
 Elementlarni ishlab chiqqandan so'ng, biz ularni barcha brauzer va qurilma ekranlarida sinab ko'rdik. Buning ajoyib vositasi bu. Va rasmlarni qo'shishning oxirgi qismi. Men 53-rasmdagi ba'zi favqulodda san'atkorlarim bilan bog'lanib, ulardan rasmlaridan foydalanish yaxshi yoki yo'qligini so'radim. Va ular buni qilishdan xursand bo'lishdi :)
 
 Yaxshi xabar shundaki, barcha oldingi tayyorgarliklar 3 hafta davomida to'liq rivojlanish vaqtiga olib keldi. Iuhuu!

Rag'batlantirish

Hammasi tayyor bo'lgach, to'plamni Paper Kit-ga joylashtirdik. Biz, shuningdek, to'plamni bir nechta do'stlar bilan baham ko'rdik, shunda ular bizda sog'ingan xatolarni aniqladilar. Hammasi yorishib ketgach, biz to'plamni e'lon qilgan elektron pochta orqali marketing kampaniyalarini o'tkazdik (Creative Tim-ga obuna bo'lgan foydalanuvchilarga). Fikr-mulohazalar ijobiy bo'lib, biz ba'zi jamoalarga murojaat qildik. Biz Hacker News, Product Hunt, Reddit-da ajoyib javoblarni oldik. Qolaversa, kimdir uni olib, o'z ishlarida ishlatgan. Undan video dars tayyorlagan Kris Penani misol qilib oling.

Qog'oz to'plami Creative Tim-da bepul yuklab olish uchun taqdim etiladi.

Biz to'plamni yaratishda foydalangan narsalarning aksariyati ochiq manbali bo'lganligi sababli, biz uni adolatli deb o'ylardik, shuning uchun uni hamma uchun bepul tarqatamiz. Shunday qilib, biz GitHub-da repo yaratdik va har kim o'z hissasini qo'shishi mumkin.

Ta'minot

Qabul qilgandan so'ng, biz g'amxo'rlik qilishimiz kerak bo'lgan yangi narsalarni topdik.

Faoliyatimizni olg'a siljitish uchun eng yaxshi usul bu foydalanuvchilar uchun to'lashlari mumkin bo'lgan versiyasini ishlab chiqishdir. Shunday qilib, to'plamni birinchi marta tuzishda biz e'tibor bermagan xususiyatlarga qaytdik. Biz o'sha elementlarni oldik va kattaroq paketni qurdik. Mahsulot xit bo'ldi va bepul to'plamdan foydalanayotgan ko'plab odamlar o'z mahsulotlarini yanada oson yangilash va ishlab chiqishdan xursand bo'lishdi.
 
 Bu bizga xuddi shu dizayndagi boshqaruv panelini ishlab chiqish uchun vaqt berdi. Bu orqa tomon uchun juda yaxshi birlashadi. Shunday qilib, agar siz o'zingizning taqdimotingizni va foydalanuvchi Qog'oz to'plamidan foydalanadigan qismni yaratmoqchi bo'lsangiz; Qog'oz asboblar paneli ajoyib ma'murga aylanadi. Biz ham buni aniqladik va ijobiy sharhlarni oldik.

Qog'oz asboblar paneli

Kelgusida mahsulot uchun ko'proq versiyalar yaratishni rejalashtirmoqdamiz. Sketch allaqachon mavjud va biz ham PSD versiyasini qurmoqdamiz. Biz burchak versiyasini yaratishni boshladik, bu bizning foydalanuvchilarimizning eng katta talablaridan biridir. Va biz ReactJS, VueJS va boshqalarni ko'rib chiqmoqdamiz.

Agar siz biz bilan hamkorlik qilishni xohlasangiz, menga cristina@creative-tim.com elektron pochta manziliga xabar yuboring