Πώς να δημιουργήσετε και να διαθέσετε ένα επιτυχημένο κιτ UI

Η ιστορία πίσω από το χαρτοκιβώτιο

Χαρτί UI Kit

Η κύρια πρόκληση που αντιμετωπίσαμε εμείς και η ομάδα μου στο Creative Tim από την πρώτη μέρα ήταν να κάνουμε το χόμπι μας έναν οικονομικό τρόπο για να διατηρήσουμε τον εαυτό μας. Για να γίνει αυτό, έπρεπε να μάθουμε πώς να χτίζουμε τα όμορφα πακέτα UI που πραγματικά θέλουν να χρησιμοποιήσουν οι άνθρωποι και πώς να τα φέρετε μπροστά στους χρήστες. Μετά από μερικές προσπάθειες και πολλή προσπάθεια που τέθηκε σε αυτό, έχουμε καταλάβει μερικά πράγματα που νομίζουμε ότι μπορεί να βοηθήσει οποιονδήποτε προσπαθεί να μπει σε αυτό το διάστημα.
 
 Κατά τη διάρκεια των πρώτων δύο μηνών, ο συνεργάτης μου Alex ήταν υπεύθυνος για την ανάπτυξη των προϊόντων. Αφού αρχίσαμε να έλκουμε μερικά από τα κιτ, πήραμε σχόλια από τους πελάτες μας λέγοντας ότι ήθελαν να απελευθερώσουμε περισσότερα. Έτσι, αυτό ήταν το σημείο που έχω εμπλακεί άμεσα στην κωδικοποίηση για το προϊόν. Λάβετε υπόψη ότι αυτή ήταν η πρώτη μου προσπάθεια.
 
 Κατά τη διάρκεια αυτού του άρθρου θα προσπαθήσω να εξηγήσω όσο καλύτερα μπορώ οι προσπάθειές μου για τη δημιουργία και στη συνέχεια να βρω ένα ακροατήριο για ένα από τα πιο δημοφιλή κιτ μας: το Βιβλίο Κιτ. Θα προσπαθήσω να δώσω όσο το δυνατόν περισσότερες λεπτομέρειες, οπότε το αποτέλεσμα είναι σαν αυτή που περιγράφει πώς να σχεδιάσεις ένα άλογο:

Πριν από μερικά χρόνια, είδα ένα quote στο twitter. Πηγαίνει έτσι: "Δώστε μου έξι ώρες για να κόψω ένα δέντρο και θα περάσω τα τέσσερα πρώτα ακόνισμα του τσεκούρι." Αποδίδεται στον Αβραάμ Λίνκολν. Αυτό έκανε πολύ νόημα για μένα και πραγματικά άλλαξε την προοπτική μου στον τρόπο προσέγγισης της εργασίας.
 
 Ήμουν ένα πραγματικά γκρουπ που έκανε το άτομο, τροφοδοτώντας τα καθήκοντα. Κατά τη διάρκεια των ετών εργασίας μου έμαθα να είμαι πιο υπομονετικός, να ακονίζω το τσεκούρι μου. Πώς αυτό μεταφράζεται στην ανάπτυξη κι UI Kit; Βασικά, έρευνα. Πριν γράψω οποιαδήποτε γραμμή κώδικα έχω επιθεωρήσει όλα τα κιτ UI που βρήκα στο διαδίκτυο.
 
 Οι αγορές όπως το ThemeForest και το BootstrapBay έχουν μια μεγάλη ποικιλία θεμάτων. Τα περισσότερα από αυτά είναι κατασκευασμένα για συγκεκριμένο σκοπό. Κάνουν συνήθως μια καλή δουλειά αν προσπαθείτε να δημιουργήσετε ένα συγκεκριμένο site παρουσίασης. Αλλά θέλαμε να οικοδομήσουμε κάτι που ένας προγραμματιστής back-end μπορεί να χρησιμοποιήσει με ένα πολύπλοκο έργο. Γι 'αυτό και στρέψαμε την προσοχή μου σε πραγματικά πολύπλοκα sites όπως το Airbnb, το Uber, το Twitter, το Paper53 κλπ. Ποια στοιχεία χρησιμοποιούν; Ποιο σχέδιο προτιμούν;

Τα στοιχεία

Μετά από να περάσει από πολλές τοποθεσίες με διαφορετικούς σκοπούς: παρουσίαση, χαρτοφυλάκιο, κοινωνική, καταλήξαμε με τον κατάλογο των στοιχείων που είναι ο πυρήνας:

  • κουμπιά
  • εισροές
  • πλαίσιο ελέγχου / ραδιόφωνο
  • πλοήγηση
  • dropdown
  • γραμμές προόδου / ρυθμιστικά
  • μενού
  • τυπογραφία
  • εικόνες
  • κοινοποιήσεις
  • ετικέτες
  • στροβιλοδρόμιο

Αυτά καλύπτουν πάνω από το 90% της λειτουργικότητας που χρειάζεστε για τη δημιουργία μιας σελίδας.

Σχεδιασμός και ανάπτυξη

Μία από τις μεγαλύτερες τάσεις στο σχεδιασμό αυτή τη στιγμή ήταν η Material και η επίπεδη εμφάνιση του iOS. Μου άρεσαν πολύ, αλλά δεν ήταν το ύφος μου. Ήθελα να οικοδομήσω κάτι παιχνιδιάρικο, διασκεδαστικό, εύκολο να το ακολουθήσω. Πήγα σε πολλά μέσα για τους σχεδιαστές, όπως το Dribbble και το Behance. Αλλά έφτασα τελικά στο σχεδιασμό κάποιων πολύ δροσερών τοποθεσιών που χρησιμοποίησα εγώ: το χαρτί 53 και το headspace. Νόμιζα ότι φαίνονταν υπέροχα και είχαν ένα πραγματικά κατευναστικό αποτέλεσμα όταν τους πλοηγούσατε.
 
 Έτσι, δημιούργησα μια παλέτα χρωμάτων με 6 χρώματα, για να καλύψω τις βασικές κατηγορίες για το Bootstrap. Όλα τα φόντα προσπαθούν να μοιάζουν με φύλλα χαρτιού και τα κινούμενα σχέδια προορίζονται να μιμηθούν τις κινήσεις ενός χαρτιού. Για τις γραμματοσειρές πήγα με μια δωρεάν γραμματοσειρά που προσφέρει η Γραμματοσειρά Google. Ονομάζεται Montserrat.
 
 Ένα κιτ μπορεί να είναι πολύ χρήσιμο, αλλά συχνά οι άνθρωποι δεν καταλαβαίνουν πώς να το χρησιμοποιήσουν. Δημιούργησα λοιπόν 3 παραδείγματα σελίδων: μια σύνδεση, ένα προφίλ και μια σελίδα προορισμού για να δείξει τι μπορείτε να δημιουργήσετε μαζί της. Οι άνθρωποι θα μπορούσαν επίσης να τα χρησιμοποιήσουν άμεσα κατά την κατασκευή των έργων τους.

Εγγραφή σελίδας με το κιτ χαρτιούΣελίδα προφίλ που δημιουργήθηκε με το κιτ χαρτιού.

Η ανάπτυξη σήμαινε τη δημιουργία αρχείων SASS για κάθε στοιχείο. Αυτά τα αρχεία Sass μεταγλωττίστηκαν στο CSS και προστέθηκαν μετά το Bootstrap. Έτσι, κάποιος που έχει ήδη ένα έργο Bootstrap μπορεί να προσθέσει μόνο τα προσαρμοσμένα αρχεία και να πάρει το νέο σχέδιο. Οι τροποποιήσεις του Javascript ήταν ελάχιστες, αφού παίζαμε μόνο με τα προεπιλεγμένα κινούμενα σχέδια για ορισμένα από τα προεπιλεγμένα στοιχεία του Bootstrap.
 
 Μετά την ανάπτυξη των στοιχείων, τα δοκιμάσαμε σε όλες τις οθόνες των προγραμμάτων περιήγησης και των συσκευών. Ένα εξαιρετικό εργαλείο για να γίνει αυτό είναι αυτό. Και το τελευταίο μέρος της προσθήκης των εικόνων. Έχω έρθει σε επαφή με μερικούς από τους αγαπημένους μου καλλιτέχνες στο χαρτί 53 και τους ρώτησα αν είναι εντάξει να χρησιμοποιήσουν τα σχέδιά τους. Και ήταν ευτυχείς να το κάνουν :)
 
 Τα καλά νέα είναι ότι κάνοντας όλες τις προηγούμενες προετοιμασίες οδήγησε σε συνολικό χρόνο ανάπτυξης 3 εβδομάδων. Iuhuu!

Προβολή

Όταν όλα ήταν έτοιμα, έχουμε δημοσιεύσει το κιτ στο κιτ χαρτιού. Έχουμε επίσης μοιραστεί το κιτ με μερικούς φίλους, ώστε να μπορούν να μας ενημερώσουν αν βρήκαν τυχόν σφάλματα που χάσαμε. Όταν όλα πήραν το πράσινο φως, κάναμε κάποιες εισερχόμενες εκστρατείες μάρκετινγκ ηλεκτρονικού ταχυδρομείου που αναγγέλλουν το κιτ (στους χρήστες που έχουν ήδη εγγραφεί στο Creative Tim). Η ανατροφοδότηση ήταν θετική, έτσι προσεγγίσαμε κάποιες κοινότητες. Πήραμε μεγάλες απαντήσεις στο Hacker News, Product Hunt, Reddit. Ακόμη περισσότερο, κάποιοι το πήραν και το χρησιμοποίησαν για δική τους δουλειά. Ας πάρουμε το παράδειγμα του Chris Pena, ο οποίος έκανε μαζί του ένα video tutorial.

Βιβλίο Kit που προσφέρεται ως δωρεάν download στο Creative Tim.

Δεδομένου ότι τα περισσότερα από τα στοιχεία που χρησιμοποιήσαμε για να δημιουργήσουμε το κιτ ήταν ανοικτού κώδικα θεωρήσαμε ότι ήταν δίκαιο να το απελευθερώσουμε για όλους δωρεάν. Έτσι δημιουργήσαμε ένα repo στο GitHub και όλοι μπορούν να συμβάλουν σε αυτό.

Συντήρηση

Αφού το έβαλα, ανακαλύψαμε νέα πράγματα που έπρεπε να φροντίσουμε.

Ο καλύτερος τρόπος για να διατηρήσουμε τη δραστηριότητά μας προς τα εμπρός έκανε μια έκδοση PRO που οι χρήστες θα μπορούν να πληρώσουν. Επομένως, εξετάσαμε τα χαρακτηριστικά που παραβλέψαμε όταν καταρτίσαμε για πρώτη φορά το σχέδιο για το κιτ. Πήραμε αυτά τα στοιχεία και χτίσαμε ένα μεγαλύτερο πακέτο. Το προϊόν ήταν ένα χτύπημα και πολλοί από τους ανθρώπους που χρησιμοποίησαν το δωρεάν κιτ ήταν στην ευχάριστη θέση να αναβαθμίσουν και να αναπτύξουν τα προϊόντα τους ακόμα πιο εύκολα.
 
 Αυτό μας έδωσε το χρόνο να αναπτύξουμε επίσης ένα ταμπλό με το ίδιο σχέδιο. Αυτό ενσωματώνει ωραία για το back-end. Αν λοιπόν δημιουργείτε την παρουσίασή σας και το τμήμα με το οποίο συνεργάζεται ο χρήστης χρησιμοποιώντας το κιτ χαρτιού. ο πίνακας εργαλείων χαρτιού κάνει για μια μεγάλη admin. Έχουμε επίσης ανοιχτή προέλευση και έλαβε θετικές κριτικές.

Χάρτινο ταμπλό

Στο μέλλον, σχεδιάζουμε τη δημιουργία περισσότερων εκδόσεων για το προϊόν. Το Σκίτσο είναι ήδη διαθέσιμο και χτίζουμε επίσης την έκδοση PSD. Ξεκινήσαμε τη δημιουργία της γωνιακής έκδοσης, αυτό είναι ένα από τα μεγαλύτερα αιτήματα των χρηστών μας. Και ψάχνουμε σε ReactJS, VueJS, κλπ.

Εάν ενδιαφέρεστε να συνεργαστείτε μαζί μας, στείλτε μου ένα e-mail στο cristina@creative-tim.com