Hogyan lehet felépíteni és forgalmazni egy sikeres felhasználói felületet

A történet a papírkészlet mögött

Papír felhasználói felület készlet

A fő kihívás, amellyel én és a Creative Tim csapata előtt az első nap óta szembesültem, az volt, hogyan tehetjük hobbijunk gazdaságos módon a fenntartását. Ehhez meg kellett tanulnunk, hogyan kell elkészíteni olyan gyönyörű felhasználói felületkészleteket, amelyeket az emberek valóban használni akarnak, és hogyan kell eljuttatni őket a felhasználók elé. Néhány próbálkozás és sok erőfeszítés után megértettünk néhány olyan dolgot, amelyek véleményünk szerint bárki számára segíthetnek, aki megpróbál bejutni ebbe a térbe.
 
 Az első néhány hónapban partnerem, Alex volt a felelős a termékek fejlesztéséért. Miután elkezdtünk vonzereket venni néhány készletre, visszajelzést kaptunk ügyfeleinktől, mondván, hogy szeretnék, hogy még többet bocsássunk ki. Tehát ebben az a pontban vettem magam magam közvetlenül a termék kódolásához. Ne feledje, ez volt az első próbálkozásom.
 
 A cikk során megpróbálom a lehető legjobban elmagyarázni erőfeszítéseimet az egyik legnépszerűbb készletünk: a Papírkészlet létrehozásakor, majd azután a közönség megtalálása során. Megpróbálok minél több részletet megadni, tehát az eredmény olyan, mint ez a kép, amely leírja, hogyan kell felhívni a lovat:

Néhány évvel ezelőtt láttam egy árajánlatot a Twitteren. A következőképpen jár: „Adj nekem hat órát egy fa levágására, és az első négyet a fejszék élezésével töltöm.” Abraham Lincolnnak tulajdonítják. Ez nagyon sokat értett számomra, és valóban megváltoztatta a látásomat a munkámhoz való hozzáállásban.
 
 Régebben nagyon szar ember volt, aki hatalommal bírt a feladatokon. Több éves munkám során megtanultam türelmesebbnek lenni, élesíteni a fejem. Hogyan fordul ez a fejlesztő és az UI Kithez? Alapvetően kutatás. Mielőtt bármilyen kódot megírtam, megvizsgáltam az összes UI-készletet, amelyet az interneten találtam.
 
 Az olyan piacokon, mint a ThemeForest és a BootstrapBay, nagyon sok a téma. Legtöbbjük speciális célra épül. Általában nagy munkát végeznek, ha egy konkrét prezentációs webhelyet próbálnak felépíteni. De valami olyat akartunk építeni, amelyet egy háttér-fejlesztő felhasználhat egy összetett projekthez. Tehát a figyelmemet olyan valódi összetett webhelyek felé irányítottuk, mint az Airbnb, Uber, Twitter, Paper53 stb. Milyen elemeket használnak? Milyen kialakítást részesítenek előnyben?

Az elemek

Miután sok, különböző célokra szolgáló weboldalt áttekintettünk: prezentáció, portfólió, szociális, elkészítettük az alapvető elemek listáját:

  • gombok
  • bemenetek
  • négyzetet / rádió
  • navigáció
  • ledob
  • folyamatjelző sávok / csúszkák
  • menük
  • tipográfia
  • képek
  • értesítések
  • címkék
  • körhinta

Ezek az oldal létrehozásához szükséges funkciók több mint 90% -át lefedik.

Tervezés és fejlesztés

A formatervezés egyik legnagyobb trendje jelenleg az Anyag és az iOS lapos megjelenése volt. Nagyon kedveltem ezeket, de nem voltak az én stílusom. Szerettem volna valami játékos, szórakoztató, könnyen követhető építeni. Sok médiumon mentem a tervezők számára, mint például a Dribbble és a Behance. De végül elrendeztem néhány igazán hűvös weboldal tervezését, amelyeket magam is használtam: 53-as papír és Headspace. Azt hittem, hogy jól néznek ki, és igazán megnyugtató hatásuk van, amikor navigálsz velük.
 
 Tehát elkészítettem egy 6 színű palettát, hogy lefedje a Bootstrap alapvető osztályait. Minden háttér megpróbálja hasonlítani a papírlapokat, és az animációk célja egy papírdarab mozgásának utánozása. A betűtípusokhoz a Google Fonts által kínált ingyenes betűtípusokat használtam. Montserratnek hívják.
 
 A készlet nagyon hasznos lehet, de gyakran az emberek nem értik, hogyan kell használni. Tehát 3 példalapot készítettem: egy bejelentkezési, egy profil és egy céloldalt, hogy megmutassam, mit tudsz vele építeni. Az emberek közvetlenül is felhasználhatták őket projekteik építése során.

Regisztrálja a Papírkészlettel készített oldaltPapírkészlettel készült profiloldal.

A fejlesztés SASS fájlok létrehozását jelentette minden összetevő számára. Ezeket a Sass-fájlokat a CSS-hez fordították, és a Bootstrap után adták hozzá. Tehát valaki, aki már rendelkezik Bootstrap projekttel, csak hozzáadhatja az egyéni fájlokat, és megkaphatja az új kialakítást. A Javascript módosításai minimálisak voltak, mivel csak az alapértelmezett animációkkal játszottunk a Bootstrap egyes alapértelmezett elemeivel.
 
 Az elemek fejlesztése után az összes böngésző és eszköz képernyőn teszteltük őket. Ennek nagyszerű eszköze ez. És a képek hozzáadásának utolsó része. Felvettem a kapcsolatot néhány kedves művészemmel az 53-as papíron, és megkérdeztem tőlem, hogy helyes-e rajzaikat használni. És örültek, hogy ezt tették :)
 
 A jó hír az, hogy az összes korábbi előkészítés eredményeként a teljes fejlesztési idő 3 hét volt. Iuhuu!

promóció

Amikor minden készen állt, feltettük a kit a Papírkészletre. Azt is megosztottuk a készlettel néhány baráttal, hogy értesítsenek minket, ha találtak hibákat, amelyek hiányoztak. Amikor minden megkapta a zöld fényt, néhány bejövő e-mail marketing kampányt készítettünk, amelyben bejelentettük a készletet (a Creative Tim előfizetőinek már). A visszajelzés pozitív volt, ezért felkeresettünk néhány közösséget. Nagyszerű válaszokat kaptunk a Hacker News, a Product Hunt, a Reddit oldalán. Sőt, néhányan felvette és felhasználták saját munkájukhoz. Vegyük például Chris Pena-t, aki vele készített egy video bemutatót.

A Paper Kit ingyenesen letölthető a Creative Tim oldalon.

Mivel a készlet létrehozásához használt elemek többsége nyílt forráskódú, úgy gondoltuk, hogy ez csak méltányos, ezért mindenki számára ingyenesen kiadjuk. Tehát létrehozott egy repót a GitHubon, és mindenki hozzájárulhat ehhez.

Karbantartás

Miután letapogattunk, új dolgokat fedeztünk fel, amelyekben gondoskodnunk kellett.

A legjobb módja annak, hogy fenntartjuk tevékenységünket az előrehaladás során, egy olyan PRO verzió készítése volt, amelyért a felhasználók fizetni fognak. Tehát visszatekintöttünk a funkciókra, amelyeket figyelmen kívül hagytunk, amikor először készítettük a készlet tervét. Fogtuk ezeket az elemeket és építettünk egy nagyobb csomagot. A termék sláger volt, és sokan, akik az ingyenes készletet használták, örömmel frissítették és fejlesztették termékeiket még könnyebben.
 
 Ez időt adott nekünk az azonos kialakítású műszerfal fejlesztésére. Ez szépen integrálódik a háttér szempontjából. Tehát, ha elkészíti a prezentációt, és azt a részt, amellyel a felhasználó együttműködik a Papír készlet használatával; a Paper Dashboard nagyszerű adminisztrátort tesz lehetővé. Nyílt forrásból is megkaptuk, és pozitív értékeléseket kaptunk.

Papír műszerfal

A jövőben a termék további verzióinak tervezését tervezzük. A vázlat már elérhető, és a PSD verziót is építjük. Megkezdtük a szögletes verzió létrehozását, ez a felhasználók egyik legnagyobb igénye. És megvizsgáljuk a ReactJS, a VueJS stb.

Ha érdekli velünk együttműködni, küldjön nekem egy e-mailt a cristina@creative-tim.com címen