Jak vytvořit a uvést na trh úspěšnou sadu UI

Příběh papírové sady

Sada papírového uživatelského rozhraní

Hlavní výzvou, které jsme od prvního dne čelili já a můj tým v Creative Tim, bylo, jak z našeho koníčka učinit ekonomický způsob, jak se udržet. Abychom to mohli udělat, museli jsme se naučit, jak vytvořit krásné sady uživatelských rozhraní, které lidé skutečně chtějí používat, a jak je dostat před uživatele. Po několika pokusech a velkém úsilí, které jsme do něj vložili, jsme pochopili několik věcí, o kterých si myslíme, že mohou pomoci každému, kdo se snaží dostat do tohoto prostoru.
 
 Během prvních několika měsíců měl vývoj produktů na starosti můj partner Alex. Poté, co jsme začali s trakcí na některých sadách, dostali jsme zpětnou vazbu od našich zákazníků, že si přejí, abychom vydali více. To byl bod, který jsem se zapojil přímo do kódování produktu. Mějte na paměti, že to byl můj první pokus.
 
 Během tohoto článku se pokusím co nejlépe vysvětlit své snahy o vytvoření a následné nalezení publika pro jednu z našich nejpopulárnějších souprav: Paper Kit. Pokusím se poskytnout co nejvíce podrobností, takže výsledek je jako tento obrázek popisující, jak nakreslit koně:

Před pár lety jsem viděl nabídku na twitteru. Vypadá to takto: „Dej mi šest hodin na sekání stromu a strávím první čtyři ostření sekerou.“ Je to připisováno Abrahamovi Lincolnovi. To pro mě mělo velký smysl a opravdu změnilo můj pohled na způsob, jakým přistupuji k práci.
 
 Býval jsem typem člověka, který se dostával do sraček a plnil úkoly. Během let mé práce jsem se naučil být trpělivější a naostřit sekeru. Jak se to promítá do vývoje a sady UI? V podstatě výzkum. Před zapsáním jakéhokoli řádku kódu jsem zkontroloval všechny sady UI, které jsem našel na internetu.
 
 Trhy jako ThemeForest a BootstrapBay mají celou řadu témat. Většina z nich je postavena pro konkrétní účel. Obvykle odvádějí skvělou práci, pokud se pokoušíte vytvořit konkrétní prezentační web. Chtěli jsme ale postavit něco, co může back-end vývojář použít u složitého projektu. Soustředili jsme se tedy na skutečná složitá místa jako Airbnb, Uber, Twitter, Paper53 atd. Jaké prvky používají? Jakému designu dávají přednost?

Elementy

Poté, co jsme prošli mnoha weby s různými účely: prezentace, portfolio, sociální, jsme přišli se seznamem prvků, které jsou jádrem:

  • tlačítka
  • vstupy
  • zaškrtávací políčko / rádio
  • navigace
  • rozbalovací nabídka
  • ukazatele průběhu / posuvníky
  • menu
  • typografie
  • snímky
  • oznámení
  • štítky
  • kolotoč

Tyto pokrývají více než 90% funkcí, které potřebujete k vytvoření stránky.

Návrh a vývoj

Jedním z největších trendů v designu v současné době byl materiál a plochý vzhled iOS. Mně se to opravdu líbilo, ale oni nebyli mým stylem. Chtěl jsem postavit něco hravého, zábavného, ​​snadno sledovatelného. Šel jsem na hodně médií pro designéry, jako Dribbble a Behance. Nakonec jsem se ale rozhodl navrhnout několik opravdu skvělých webů, které jsem sám používal: Paper 53 a Headspace. Myslela jsem, že vypadají skvěle a mají opravdu uklidňující účinek, když je navigujete.
 
 Takže jsem vytvořil paletu barev se 6 barvami, abych zakryl základní třídy pro Bootstrap. Všechna pozadí se snaží podobat listům papíru a animace mají napodobovat pohyby kusu papíru. Pro písma jsem šel s volným písmem nabízeným Google Fonts. Říká se tomu Montserrat.
 
 Sada může být velmi užitečná, ale lidé často nechápou, jak ji používat. Takže jsem vytvořil 3 vzorové stránky: Přihlášení, Profil a Vstupní stránku, abych ukázal, co s tím můžete stavět. Lidé je mohli také přímo použít při vytváření svých projektů.

Zaregistrujte stránku vyrobenou pomocí sady Paper PaperStránka profilu vyrobená pomocí sady papírů.

Vývoj znamenal vytvoření souborů SASS pro všechny komponenty. Tyto soubory Sass byly kompilovány do CSS a přidány po Bootstrapu. Takže někdo, kdo již má projekt Bootstrap, může pouze přidat vlastní soubory a získat nový design. Úpravy jazyka Javascript byly minimální, protože jsme hráli pouze s výchozími animacemi pro některé výchozí prvky v Bootstrapu.
 
 Po vývoji prvků jsme je testovali na všech obrazovkách prohlížeče a zařízení. Skvělý nástroj k tomu je toto. A poslední část přidání obrázků. Spojil jsem se s některými mými oblíbenými umělci na papíře 53 a zeptal jsem se jich, jestli je v pořádku používat jejich kresby. A byli rádi, že to udělali :)
 
 Dobrou zprávou je, že provedení všech předchozích příprav vedlo k celkové době vývoje 3 týdny. Iuhuu!

povýšení

Když bylo vše připraveno, zveřejnili jsme soupravu na papírové soupravě. Soupravu jsme také sdíleli s několika přáteli, aby nás mohli informovat, pokud naleznou nějaké chyby, které nám chyběly. Když všechno získalo zelenou, provedli jsme několik příchozích e-mailových marketingových kampaní, které tuto soupravu oznamovaly (uživatelům, kteří se již přihlásili k odběru na Creative Tim). Zpětná vazba byla pozitivní, a tak jsme oslovili některé komunity. Na Hacker News, Product Hunt, Reddit jsme dostali skvělé odpovědi. Ještě více to někteří vyzvedli a použili pro svou vlastní práci. Vezměme si například Chris Pena, který s tím udělal video tutoriál.

Paper Kit nabízí ke stažení zdarma na Creative Tim.

Protože většina položek, které jsme použili k vytvoření sady, byla open-source, mysleli jsme si, že je spravedlivé, že ji také uvolňujeme pro všechny zdarma. Takže jsme vytvořili repo na GitHubu a každý k tomu může přispět.

Údržba

Poté, co jsme to ukořistili, objevili jsme nové věci, o které jsme se měli starat.

Nejlepší způsob, jak udržet naši aktivitu vpřed, bylo vytvoření verze PRO, za kterou budou uživatelé moci platit. Když jsme poprvé sestavili plán sady, podívali jsme se zpět na funkce, které jsme přehlédli. Vzali jsme tyto prvky a postavili větší balíček. Produkt byl hitem a mnoho lidí, kteří používali bezplatnou sadu, byli rádi, že upgradovali a vyvíjeli své výrobky ještě snadněji.
 
 To nám poskytlo čas také na vývoj palubní desky se stejným designem. To se skvěle integruje pro back-end. Pokud tedy vytváříte svou prezentaci a část, se kterou uživatel interaguje s použitím sady Papír; papírový panel je skvělým správcem. Také jsme ji otevřeli a získali kladné recenze.

Papírový panel

V budoucnu plánujeme vytvoření dalších verzí produktu. Skica je již k dispozici a také vytváříme verzi PSD. Začali jsme vytvářet verzi Angular, což je jedna z největších požadavků našich uživatelů. A díváme se na ReactJS, VueJS atd.

Pokud máte zájem o spolupráci s námi, pošlete mi e-mail na cristina@creative-tim.com