Kuinka rakentaa ja markkinoida onnistunutta käyttöliittymäpakettia

Tarina paperisarjan takana

Paper UI Kit

Tärkein haaste, jonka minä ja Creative Tim -tiimini ovat kohdanneet ensimmäisestä päivästä lähtien, oli kuinka tehdä harrastuksestamme taloudellinen tapa ylläpitää itseämme. Tätä varten meidän oli opittava rakentamaan kauniita käyttöliittymäpaketteja, joita ihmiset todella haluavat käyttää, ja kuinka saada ne käyttäjien eteen. Muutaman yrittämisen ja panostamisen jälkeen olemme ymmärtäneet muutamia asioita, joiden mielestämme jokainen voi auttaa ketään pääsemään tähän tilaan.
 
 Parin ensimmäisen kuukauden aikana kumppanini Alex vastasi tuotteiden kehittämisestä. Kun aloimme saada pitoa joihinkin sarjoihin, saimme palautetta asiakkailtamme sanomalla, että he toivovat meidän vapauttavan enemmän. Joten se oli kohta, jonka vuoksi olen itse osallistunut suoraan tuotteen koodaukseen. Muista, että tämä oli ensimmäinen yritys.
 
 Tämän artikkelin aikana yritän selittää parhaan mahdollisen ponnisteluni luodaan ja sitten löytää yleisö yhdelle suosituimmista sarjoistamme: Paper Kit. Yritän antaa mahdollisimman paljon yksityiskohtia, joten tulos on kuin tämä kuva, joka kuvaa hevosen piirtämistä:

Pari vuotta sitten näin Twitterissä tarjouksen. Se näyttää tältä: “Anna minulle kuusi tuntia hakea puu ja vietän ensimmäiset neljä kirvesten teroittamiseen.” Se on omistettu Abraham Lincolnille. Tämä teki minulle paljon järkeä ja muutti todella näkemystäni tapaan lähestyä työtä.
 
 Minulla oli aika todella paskaa-tehty henkilö, voimallinen tehtävien läpi. Vuosien työni aikana olen oppinut olemaan kärsivällisempi, teroittamaan kirveäni. Kuinka tämä kääntyy kehittämiseen ja UI-pakettiin? Periaatteessa tutkimus. Ennen minkään koodirivin kirjoittamista olen tarkastanut kaikki Internetistä löytämät käyttöliittymäpaketit.
 
 Markkinoilla, kuten ThemeForest ja BootstrapBay, on laaja valikoima teemoja. Suurin osa niistä on rakennettu tiettyyn tarkoitukseen. He tekevät yleensä hienoa työtä, jos yrität rakentaa tietyn esityssivuston. Mutta halusimme rakentaa jotain, jota taustakehittäjä voi käyttää monimutkaisessa projektissa. Joten siirrimme huomioni todellisiin monimutkaisiin sivustoihin, kuten Airbnb, Uber, Twitter, Paper53 jne. Mitä elementtejä he käyttävät? Mitä suunnittelua he pitävät parempana?

Elementit

Tutkittuaan paljon sivustoja, joilla on erilaiset tarkoitukset: esittely, portfolio, sosiaalinen, keksimme luettelon keskeisistä elementeistä:

  • painikkeet
  • tulot
  • valintaruutu / radio
  • suunnistus
  • pudota alas
  • etenemispalkit / liukusäätimet
  • valikot
  • typografia
  • kuvien
  • ilmoitukset
  • tarrat
  • karuselli

Ne kattavat yli 90% toiminnoista, joita tarvitset sivun rakentamiseksi.

Suunnittelu ja kehitys

Yksi muotoilun suurimmista suuntauksista tällä hetkellä oli materiaali ja iOS-tasainen ulkoasu. Pidin niistä todella, mutta ne eivät olleet minun tyylisi. Halusin rakentaa jotain leikkisää, hauskaa, helppoa seurata. Kävin paljon medioita suunnittelijoille, kuten Dribbble ja Behance. Mutta lopulta päädyin suunnittelemaan joitain todella hienoja sivustoja, joita käytin itse: Paper 53 ja Headspace. Luulin, että ne näyttivät hyvältä ja heillä oli todella rauhoittava vaikutus, kun navigoit heissä.
 
 Joten loin väripaletin, jossa oli 6 väriä, Bootstrapin perusluokkien kattamiseksi. Kaikki taustat yrittävät muistuttaa paperiarkkeja, ja animaatioiden on tarkoitus jäljitellä paperin liikkeitä. Käytin fontteja Google Fontsin tarjoamalla ilmaisella fontilla. Sitä kutsutaan Montserrat.
 
 Pakkaus voi olla erittäin hyödyllinen, mutta usein ihmiset eivät ymmärrä kuinka sitä käytetään. Joten luin 3 esimerkkisivua: kirjautuminen, profiili ja aloitussivu osoittamaan, mitä voit rakentaa sen kanssa. Ihmiset voivat käyttää niitä myös suoraan projektiensa rakentamisessa.

Rekisteröi paperisarjalla tehty sivuPaperisarjalla tehty profiilisivu.

Kehitys tarkoitti SASS-tiedostojen luomista jokaiselle komponentille. Nämä Sass-tiedostot käännettiin CSS: ään ja lisättiin Bootstrapin jälkeen. Joten joku, jolla on jo Bootstrap-projekti, voi vain lisätä mukautetut tiedostot ja saada uuden mallin. Javascript-modifikaatiot olivat minimaaliset, koska pelasimme vain joidenkin Bootstrapin oletuselementtien oletusanimaatioilla.
 
 Elementtien kehittämisen jälkeen testasimme niitä kaikilla selaimen ja laitteen näytöillä. Hyvä työkalu tähän on tämä. Ja viimeinen osa kuvien lisäämistä. Sain yhteyden eräisiin suosikki taiteilijoihini Paper 53: lla ja kysyin heiltä, ​​onko heidän piirustustensa käyttäminen oikein. Ja he tekivät niin mielellään :)
 
 Hyvä uutinen on, että kaikkien aikaisempien valmistelujen tekeminen johti 3 viikon kokonaiskehitysaikaan. Iuhuu!

Edistäminen

Kun kaikki oli valmis, olemme lähettäneet pakkauksen paperisarjaan. Olemme myös jakaneet sarjan muutaman ystävän kanssa, jotta he voisivat ilmoittaa meille, jos löysivät virheitä, jotka olemme jättäneet. Kun kaikki sai vihreän valon, teimme joitain saapuvan sähköpostin markkinointikampanjoita, jotka ilmoittivat pakkauksesta (jo käyttäjille, jotka jo tilaavat Creative Tim: ssä). Palaute oli positiivista, joten otimme yhteyttä joihinkin yhteisöihin. Saimme hyviä vastauksia Hacker News, Product Hunt, Reddit. Vielä enemmän, jotkut nousivat sen ja käyttivät sitä omaan työhönsä. Ota esimerkki Chris Pena, joka teki video-opetusohjelman sen kanssa.

Paper Kit tarjotaan ilmaiseksi ladattavaksi Creative Tim -sovelluksesta.

Koska suurin osa pakkauksen luomiseen käytetyistä esineistä oli avoimen lähdekoodin kanssa, piti sitä vain reiluna, vapautamme sen myös kaikille ilmaiseksi. Joten loimme repon GitHubiin ja kaikki voivat osallistua siihen.

ylläpito

Lakattuaan sen löysimme uusia asioita, joista meidän oli huolehdittava.

Paras tapa ylläpitää toimintaamme eteenpäin oli tehdä PRO-versio, josta käyttäjät voivat maksaa. Joten katselimme taaksepäin ominaisuuksiin, jotka jäimme huomiotta, kun teimme ensimmäisen pakkaussuunnitelman. Otimme nuo elementit ja rakensimme isomman pakkauksen. Tuote oli hitti, ja monet ilmaista pakkausta käyttäneistä ihmisistä päivittivät ja kehittivät mielellään tuotteitaan entistä helpommin.
 
 Tämä antoi meille aikaa kehittää myös saman mallin mukainen kojelauta. Tämä integroituu hienosti taustaan. Joten, jos olet rakentamassa esitystäsi ja sitä osaa, jonka käyttäjän kanssa käytetään vuorovaikutuksessa Paperikoodin kanssa; Paperin hallintapaneeli tarjoaa erinomaisen järjestelmänvalvojan. Olemme myös avoimen lähteen ja saaneet positiivisia arvosteluja.

Paperin hallintapaneeli

Jatkossa aiomme luoda lisää versioita tuotteelle. Sketch on jo saatavana, ja rakennamme myös PSD-versiota. Olemme alkaneet luoda kulmaversion, tämä on yksi käyttäjien suurimmista pyynnöistä. Ja tutkimme ReactJS: ää, VueJS: ää jne.

Jos olet kiinnostunut yhteistyöstä kanssamme, lähetä minulle sähköpostia osoitteeseen cristina@creative-tim.com