Jak zbudować i sprzedać skuteczny zestaw interfejsu użytkownika

Historia stojąca za zestawem papierowym

Zestaw papierowego interfejsu użytkownika

Głównym wyzwaniem, przed którym stanęliśmy wraz z zespołem w Creative Tim od pierwszego dnia, było uczynienie naszego hobby ekonomicznym sposobem na utrzymanie się. Aby to zrobić, musieliśmy nauczyć się, jak tworzyć piękne zestawy interfejsu użytkownika, z których ludzie naprawdę chcą korzystać, i jak uzyskać je przed użytkownikami. Po kilku próbach i wysiłku włożonym w to zrozumieliśmy kilka rzeczy, które naszym zdaniem mogą pomóc każdemu, kto spróbuje dostać się w tę przestrzeń.
 
 Przez pierwsze kilka miesięcy mój partner Alex był odpowiedzialny za rozwój produktów. Po tym, jak zaczęliśmy uzyskiwać przyczepność do niektórych zestawów, otrzymaliśmy opinie od naszych klientów, którzy twierdzili, że chcieliby wydać więcej. Właśnie dlatego zaangażowałem się bezpośrednio w kodowanie produktu. Pamiętaj, że to była moja pierwsza próba.
 
 W tym artykule postaram się jak najlepiej wyjaśnić moje wysiłki w tworzeniu, a następnie znajdowaniu odbiorców dla jednego z naszych najpopularniejszych zestawów: zestawu papierowego. Postaram się podać jak najwięcej szczegółów, więc wynik jest podobny do tego, jak narysować konia:

Kilka lat temu widziałem cytat na Twitterze. Wygląda to tak: „Daj mi sześć godzin na wycięcie drzewa, a cztery pierwsze spędzę na ostrzeniu siekiery”. Jest to przypisywane Abrahamowi Lincolnowi. To miało dla mnie duży sens i naprawdę zmieniło moje spojrzenie na sposób, w jaki podchodzę do pracy.
 
 Kiedyś byłem naprawdę gównianą postacią, wykonując zadania. Przez lata pracy nauczyłem się być bardziej cierpliwym, wyostrzać siekierę. Jak to się przekłada na programowanie i interfejs użytkownika? Zasadniczo badania. Przed napisaniem dowolnego wiersza kodu sprawdziłem wszystkie zestawy interfejsu użytkownika, które znalazłem w Internecie.
 
 Rynki takie jak ThemeForest i BootstrapBay mają wiele różnych motywów. Większość z nich jest zbudowana do określonego celu. Zwykle wykonują świetną robotę, jeśli próbujesz zbudować konkretną witrynę prezentacji. Chcieliśmy jednak stworzyć coś, co programista back-end mógłby wykorzystać przy złożonym projekcie. Dlatego skupiliśmy moją uwagę na prawdziwych złożonych witrynach, takich jak Airbnb, Uber, Twitter, Paper53 itp. Z jakich elementów korzystają? Jaki projekt wolą?

Elementy

Po przejrzeniu wielu stron o różnych celach: prezentacji, portfolio, społecznościach, wymyśliliśmy listę elementów, które są rdzeniem:

  • guziki
  • wejścia
  • pole wyboru / radio
  • nawigacja
  • upuścić
  • paski postępu / suwaki
  • menu
  • typografia
  • obrazy
  • powiadomienia
  • etykiety
  • karuzela

Obejmują one ponad 90% funkcjonalności potrzebnej do zbudowania strony.

Projektowanie i rozwój

Jednym z największych obecnie trendów w projektowaniu był materiał i płaski wygląd iOS. Naprawdę mi się podobały, ale nie były w moim stylu. Chciałem zbudować coś zabawnego, zabawnego, łatwego do naśladowania. Korzystałem z wielu mediów dla projektantów, takich jak Dribbble i Behance. Ale ostatecznie zdecydowałem się zaprojektować kilka naprawdę fajnych stron, z których sam korzystałem: Paper 53 i Headspace. Myślałem, że wyglądają wspaniale i miały naprawdę uspokajający efekt, gdy się nimi poruszałeś.
 
 Stworzyłem więc paletę kolorów z 6 kolorami, aby pokryć podstawowe klasy dla Bootstrap. Wszystkie tła próbują przypominać kartki papieru, a animacje mają imitować ruchy kawałka papieru. W przypadku czcionek skorzystałem z bezpłatnej czcionki oferowanej przez Google Fonts. Nazywa się Montserrat.
 
 Zestaw może być bardzo przydatny, ale często ludzie nie rozumieją, jak z niego korzystać. Stworzyłem więc 3 przykładowe strony: login, profil i stronę docelową, aby pokazać, co możesz z nim zbudować. Ludzie mogliby również korzystać z nich bezpośrednio podczas tworzenia swoich projektów.

Zarejestruj stronę wykonaną za pomocą zestawu papierowegoStrona profilu wykonana za pomocą zestawu papierowego.

Rozwój oznaczał utworzenie plików SASS dla każdego komponentu. Te pliki Sass zostały skompilowane do CSS i dodane po Bootstrap. Tak więc ktoś, kto ma już projekt Bootstrap, może po prostu dodać niestandardowe pliki i uzyskać nowy projekt. Modyfikacje Javascript były minimalne, ponieważ graliśmy tylko z domyślnymi animacjami dla niektórych domyślnych elementów w Bootstrap.
 
 Po opracowaniu elementów przetestowaliśmy je na wszystkich ekranach przeglądarki i urządzenia. Świetnym narzędziem do tego jest to. I ostatnia część dodawania zdjęć. Skontaktowałem się z kilkoma moimi ulubionymi artystami na Paper 53 i zapytałem ich, czy można użyć ich rysunków. I chętnie to zrobili :)
 
 Dobrą wiadomością jest to, że wszystkie wcześniejsze przygotowania doprowadziły do ​​całkowitego rozwoju 3 tygodni. Iuhuu!

Awans

Kiedy wszystko było gotowe, opublikowaliśmy zestaw na Paper Kit. Udostępniliśmy również zestaw kilku znajomym, którzy mogliby nas powiadomić, gdyby znaleźli błędy, które przeoczyliśmy. Gdy wszystko zaczęło świecić na zielono, przeprowadziliśmy kilka przychodzących kampanii e-mail marketingowych ogłaszających zestaw (użytkownikom, którzy subskrybowali już program Creative Tim). Opinie były pozytywne, więc skontaktowaliśmy się z niektórymi społecznościami. Otrzymaliśmy świetne odpowiedzi na Hacker News, Product Hunt, Reddit. Co więcej, niektórzy go podnieśli i wykorzystali do własnej pracy. Weźmy na przykład Chrisa Pena, który przeprowadził z nim samouczek wideo.

Zestaw papierowy oferowany do pobrania za darmo na Creative Tim.

Ponieważ większość elementów, których użyliśmy do stworzenia zestawu, były typu open source, pomyśleliśmy, że to sprawiedliwe, dlatego udostępniamy go również wszystkim za darmo. Więc stworzyliśmy repozytorium na GitHub i każdy może się do niego przyczynić.

Konserwacja

Po wysłuchaniu go odkryliśmy nowe rzeczy, którymi musieliśmy się zająć.

Najlepszym sposobem na kontynuowanie naszej działalności było stworzenie wersji PRO, za którą użytkownicy będą mogli zapłacić. Wróciliśmy więc do funkcji, które przeoczyliśmy, kiedy pierwszy raz opracowaliśmy plan zestawu. Wzięliśmy te elementy i zbudowaliśmy większą paczkę. Produkt był hitem, a wiele osób, które korzystały z darmowego zestawu, chętnie ulepszyło i opracowało swoje produkty jeszcze łatwiej.
 
 Dało nam to czas na opracowanie deski rozdzielczej o tym samym projekcie. Ładnie integruje się z zapleczem. Tak więc, jeśli budujesz swoją prezentację i część, z którą użytkownik wchodzi w interakcje przy użyciu zestawu papierowego; Paper Dashboard to świetny administrator. Udostępniliśmy go również i otrzymaliśmy pozytywne recenzje.

Deska rozdzielcza papieru

W przyszłości planujemy stworzyć więcej wersji produktu. Szkic jest już dostępny i tworzymy również wersję PSD. Rozpoczęliśmy tworzenie wersji Angular, jest to jedna z największych próśb naszych użytkowników. Patrzymy na ReactJS, VueJS itp.

Jeśli jesteś zainteresowany współpracą z nami, wyślij mi e-mail na adres cristina@creative-tim.com