Εκπαιδευτικά Σκετς

Πραγματοποίηση κερδών από ένα σύστημα σχεδιασμού

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

Γεια σου, θα ήθελα να μοιραστώ την εμπειρία μου σχετικά με τη διαδικασία δημιουργίας ενός ψηφιακού προϊόντος για τις αγορές του UI, να περιγράψω εν συντομία τα αρχικά στάδια ανάπτυξης και να παρουσιάσω τα σκίτσα που θα μπορούσαν να σας παράσχουν σημαντική εξοικονόμηση χρόνου, παράλληλα με την παραγωγή ενός αξιοπρεπούς πόρου προς πώληση.

Intro

Τα τελευταία χρόνια, η πολυπλοκότητα και το χρονοβόρο κόστος δημιουργίας ενός κιτ UI ή ενός κιτ έμπνευσης έχουν μειωθεί σημαντικά. Η αγορά των εργαλείων σχεδιασμού αναπτύσσεται ραγδαία και φέρνει πολλά νέα χαρακτηριστικά στο παιχνίδι, όπως Σύμβολα, Σχεδιαστικά Συστήματα, Plugins και πολλά άλλα εύχρηστα εργαλεία που μπορούν να χρησιμοποιηθούν σε διάφορους συνδυασμούς για να ξεπεραστούν οι περιορισμοί σχεδιασμού και να σας βοηθήσουν να αυτοματοποιήσετε τη ρουτίνα.

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

Δημιουργώντας πάντα χρήσιμο σε έναν κόσμο UX / UI πρέπει πάντα να κατανοείτε ξεκάθαρα το πρόβλημα που προσπαθείτε να επιλύσετε με τα έργα ή το προϊόν σας. Αυτό σημαίνει ότι πρέπει να κάνετε πρώτα παλιές έρευνες για να συγκρίνετε τις υπάρχουσες τάσεις με τις ικανότητές σας, να ζυγίζετε τα πάντα και να επιλέξετε μια θέση που βλέπετε το δυναμικό ή την εμπειρία πριν κάνετε την πρώτη κίνηση.

Το Web, το Mobile, το Dashboard, ένα θεματικά ταξινομημένο πακέτο UI εξαρτάται αποκλειστικά από εσάς και τον δημιουργικό σας εγκέφαλο, βεβαιωθείτε ότι έχετε μια μοναδική αλλά απλή αντίληψη ότι ο χρήστης μπορεί γρήγορα να καταλάβει, να εκτιμήσει και να μετρήσει.

Πάρτε το χρόνο σας, υπάρχουν πολλά εργαλεία εκτός από το Sketch που αξίζει να δοκιμάσετε και να έχετε ένα καλό δυναμικό αγοράς, όπως το Figma, Studio ή Framer, επιλέξτε αυτό που σας ταιριάζει ή θέλετε να κυριαρχήσετε.

Αυτή τη στιγμή μόνο το Sketch παρέχει ενσωματωμένα συστήματα σχεδιασμού που θα μπορούσαν να χρησιμοποιηθούν για την παραγωγή μικρότερων κιτ UI, το Plaster Design System είναι αυτό που μπορείτε να χρησιμοποιήσετε για αυτόν τον ακριβή σκοπό, φροντίστε να το ελέγξετε και να δοκιμάσετε.

Οδηγός περιεχομένων:

  1. Οπτικό στυλ - Δημιουργήστε και χρησιμοποιήστε έναν οδηγό στυλ.
  2. Στοιχεία - Ενεργοποίηση ροής εργασίας με σύμβολα.
  3. Σχεδιασμός - Μην σταματήσετε να σκάβετε ...
  4. Συσκευασία - Γυάλισμα του προϊόντος.
  5. Εκκίνηση - Προωθητικό υλικό και υποβολή.

Οπτικό στυλ

Ξεκινήστε δημιουργώντας ένα νέο αρχείο και επιλέξτε τα κύρια χρώματα και τη γραμματοσειρά που θέλετε να δοκιμάσετε στο πεδίο της μάχης, προσπαθήστε να απεικονίσετε την εικόνα του τελικού προϊόντος ενώ παίζετε με διαφορετικές επιλογές στυλ. Για να αντιμετωπίσετε με επιτυχία, θα χρειαστεί να σχεδιάσετε ένα σημείο ελέγχου, έναν τόπο αλήθειας όπου μπορείτε να διατηρήσετε όλα τα στυλ του κιτ UI για να τα διαχειριστείτε και να συντονιστείτε γρήγορα.

Η παροχή ενός οδηγού στυλ μαζί με το τελικό προϊόν όχι μόνο θα βελτιώσει σημαντικά την εμπειρία του χρήστη, αλλά και θα σας βοηθήσει να δοκιμάσετε γρήγορα διαφορετικές ιδέες κατά την κατασκευή του. ️

Η σελίδα "Γύψος" αρχίζει να χρησιμοποιείται για τον έλεγχο τόσο των επιμερισμένων στυλ όσο και των συμβόλων.

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

Πρότυπο + πρότυπα συμβόλων

Για να δημιουργήσετε γρήγορα έναν συνεπή οδηγό στυλ, χρησιμοποιήστε το ακόλουθο combo:

  • Καταρχήν, δημιουργήστε ένα απλό πλέγμα από στρώματα με στυλ που θέλετε να συμπεριλάβετε και ορίστε κατάλληλα ονόματα για αυτά, π.χ. "Χρώμα / Πρωτεύον / Μπλε".
  • Επιλέξτε όλα τα επίπεδα που θέλετε να δημιουργήσετε πολλά κοινά στυλ και χρησιμοποιήστε τη Γεννήτρια στυλ σχεδίων σκίτσου.
  • Στη συνέχεια, χρησιμοποιήστε την Παρτίδα Δημιουργία συμβόλων για να σας επιτρέψει να δημιουργήσετε πολλά σύμβολα από τα ίδια ονόματα στρώσεων, δείτε πώς λειτουργεί:
Συμβουλή: Οι κανόνες ονοματοδοσίας είναι μόνο η προτίμησή σας, φροντίστε να το κάνετε αυτό που σας ταιριάζει άνετα.

Αυτό το τέχνασμα σας επιτρέπει να δημιουργήσετε ένα πρότυπο συστήματος σχεδιασμού μέσα σε λίγα δευτερόλεπτα, με τα σύμβολα και τα στυλ να έχουν μια συνεπή δομή μενού ενσωματωμένη στο χώρο εργασίας σας.

Τυπογραφία

Για να δημιουργήσετε τυπογραφία, χρησιμοποιήστε δωρεάν γραμματοσειρές Google. Επιλέξτε ένα περιορισμένο σύνολο μεγεθών ή χρησιμοποιήστε ένα ζευγάρι διαφορετικών γραμματοσειρών για να δημιουργήσετε στυλ κειμένου με φρέσκους χαρακτήρες. Για να ρυθμίσετε γρήγορα την τυπογραφία, κάντε λήψη και χρησιμοποιήστε αυτό το αρχείο Temp πρότυπο στυλ κειμένου.

  • Ανοίξτε το, επιλέξτε όλα τα επίπεδα και επιλέξτε μια νέα γραμματοσειρά για να ενημερώσετε όλα τα στυλ.
  • Χρησιμοποιήστε το Master Sketch Style Master για να αλλάξετε το "Arial" στο όνομα γραμματοσειράς της επιλογής σας. (Μπορείτε επίσης να τροποποιήσετε ή να μετονομάσετε ετικέτες με την ένδειξη H1, H2, κλπ.).
  • Εξάγετε στυλ με την προσθήκη στυλ κοινόχρηστου κειμένου και εισαγάγετε τα σε ένα νέο έγγραφο για να τα χρησιμοποιήσετε αμέσως.
Συμβουλή: Συγχώνευση των παραθύρων Sketch σε καρτέλες για γρήγορη πλοήγηση σε διαφορετικά έγγραφα.
Βεβαιωθείτε ότι έχετε πάντα δωρεάν πρόσβαση στις γραμματοσειρές που χρειάζονται για να χρησιμοποιήσετε το προϊόν σας.

Ορίστε το πλέγμα

Για να σχεδιάσετε ένα συνεπές προϊόν εκτός από ενοποιημένα στυλ, θα χρειαστείτε ένα πλέγμα, για να τοποθετήσετε τα στοιχεία και τις μορφές σας, έχω προετοιμάσει αυτό το αρχείο .sketch που περιέχει ένα πρότυπο πλέγμα ανταποκρίσεων για να σας καθοδηγήσει τους περιορισμούς της οθόνης του προϊόντος, κάντε λήψη αυτού εδώ Response Grid Πρότυπο.

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

  • Αντιγράψτε το plugin προσθήκης οδηγών, για να ορίσετε γρήγορα μια νέα διάταξη, αντιγράφοντας και επικολλώντας τους υπάρχοντες οδηγούς σε ένα νέο έγγραφο.
Συμβουλή: CNTRL + SHIFT + C / CTRL + SHIFT + V
  • Χρησιμοποιήστε τα κουμπιά CTRL + R για γρήγορους οδηγούς ενεργοποίησης / απενεργοποίησης, κρατήστε πατημένο το πλήκτρο SHIFT ενώ είναι ενεργοποιημένο για να μετρήσετε την απόσταση των pixel και τα κουμπωτά στοιχεία στους οδηγούς.
  • Για να κάνετε προεπισκόπηση πολλών πλεγμάτων διάταξης ταυτόχρονα, χρησιμοποιήστε την πρόσθετη πηγή κύριου δικτύου.
Θυμηθείτε να κρατήσετε την δουλειά σας ελκυστική, αλλά είναι δυνατόν για τους προγραμματιστές να κωδικοποιήσουν σε πραγματικά έργα, αυτό σημαίνει ότι τα σχέδια και τα στοιχεία σας πρέπει να παραμένουν όσο το δυνατόν περισσότερο στην πραγματική υλοποίηση προδιαγραφών και να ταιριάζουν σε κοινά μεγέθη οθόνης.

Συστατικά

Αφού γίνει με στυλ, χρησιμοποιήστε τα για να ζωγραφίσετε 2-3 πίνακες τέχνης για να είστε σίγουροι για την επιλογή σας. Στη συνέχεια, μεταβείτε στον ορισμό των βασικών στοιχείων, όπως τα κουμπιά, τις εισόδους και τα πλαίσια ελέγχου κ.λπ. Δημιουργήστε ένα ελάχιστο σύνολο συμβόλων για να δημιουργήσετε μια τυπική οθόνη εφαρμογής ή μια σελίδα ιστότοπου που σας αρέσει.

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

Χρησιμοποιήστε τα πρωτότυπα σύμβολα για να δημιουργήσετε τα στοιχεία σας και δώστε τους τις απαραίτητες επιλογές στυλ, τοποθετώντας ένα σύμβολο σε άλλο. Όταν το κάνετε, προσπαθήστε να βρείτε μια υγιή ισορροπία μεταξύ προσαρμογής και παρακάμψεως της χρηστικότητας, να διανείμετε πάντα απλά αλλά λειτουργικά σύμβολα που είναι εύκολο να επαναχρησιμοποιηθούν.

Συμβουλή: Διατηρήστε εύκολα τις αναγνωρίσεις. Κανείς δεν έχει το χρόνο να μπει σε αναλογίες emoji σας.

Κάντε κάθε επαναλαμβανόμενο στοιχείο στο σύμβολο για να μπορείτε να επικεντρωθείτε περισσότερο στις εργασίες που σχετίζονται με το προϊόν και λιγότερο να προσπαθήσετε να διατηρήσετε τη συνοχή με το χέρι σε όλο το κιτ, εδώ είναι μερικές εύχρηστες συμβουλές που θα σας βοηθήσουν να διανείμετε καλύτερα σύμβολα:

  • Καθορίστε τον κανόνα παραγγελίας, για παράδειγμα, το Plaster ακολουθεί μια απλή ονομασία - τα ένθετα σύμβολα εμφανίζονται με τη σειρά από αριστερά προς τα δεξιά στο μενού overdrive, η πρώτη θέση στο στοιχείο δίνει πάντα προτεραιότητα στο πεδίο κειμένου ή το πιο συνηθισμένο χρησιμοποιείται ένα, π.χ.
  • Ομαδοποιήστε όλες τις συνιστώσες σε κατηγορίες, για να τοποθετήσετε όλα τα πρωτόγονα σύμβολα στυλ σε ξεχωριστή κατηγορία "στυλ" για να μην κατακλύσετε το μενού συμβόλων με σύμβολα χρώματος, επικάλυψης ή κειμένου.
Συμβουλή: Χρησιμοποιήστε την αριθμητική σειρά για να δώσετε στο μενού συμβόλων σας μια προβλέψιμη δομή.
  • Χρησιμοποιήστε πολλαπλές εμφανίσεις ενός μόνο συμβόλου για να αποδείξετε τη διαφορετική χρήση του προϊόντος σας. Κρατήστε τα οργανωμένα δημιουργώντας μια ξεχωριστή κατηγορία "State" για πολυλειτουργικά εξαρτήματα.
Συμβουλή: Χρησιμοποιήστε το σύμβολο
  • Αποθηκεύστε τα αχρησιμοποίητα σύμβολα στο μενού override για να εξοικονομήσετε χρόνο κατά την πλοήγηση στο δεξί πλαίσιο.
  • Χρησιμοποιήστε το Σύμβολο Organizer για να ομαδοποιήσετε τη σελίδα των συμβόλων σας με έναν άνετο τρόπο εργασίας.

Σχέδιο

Αυτό το στάδιο είναι το πιο χρονοβόρο, κυρίως επειδή απαιτεί από εσάς να κάνετε διάφορες προσεγγίσεις για να σχεδιάσετε πολυάριθμες συνθέσεις. Ο αριθμός των δομών ή των οθονών που πρέπει να δημιουργήσετε εξαρτάται από την αξία που θέλετε να παραδώσει το κιτ ή να χρησιμοποιήσετε περιπτώσεις για κάλυψη.

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

Το πιο σημαντικό πράγμα εδώ είναι να διατηρήσετε την εστίαση στο προϊόν σας και να σχεδιάσετε ήρεμα. Συνιστάται να διαιρέσετε αυτή τη διαδικασία σε σπριντ για να έχετε καλύτερα αποτελέσματα. Αποφασίστε τι αριθμός εξαρτημάτων ή προτύπων μπορείτε να δημιουργήσετε μετά από κάθε σπριντ και βελτιώστε συνεχώς τα αποτελέσματά σας.

Δεν υπάρχει ιδιαίτερο κόλπο εδώ, μόνο υπομονή. Ακόμα, μπορείτε να βρείτε αυτά τα εργαλεία για να είναι χρήσιμα για την αυτοματοποίηση της επαναλαμβανόμενης ρουτίνας:

  • Nudge.it - ​​Χρησιμοποιήστε το για επαναλαμβανόμενη ώθηση και σμίκρυνση αντικειμένων σύμφωνα με την επιλεγμένη αύξηση δικτύου.
  • Αναπαραγωγέας - Για επαναλαμβανόμενη αναπαραγωγή αντικειμένων σε μια συγκεκριμένη κατεύθυνση, χρησιμοποιήστε το για να δημιουργήσετε γκαλερί και διατάξεις πλέγματος στοιχείων.
  • Πτώση λογοτύπου - Για να αποκτήσετε γρήγορα τα περισσότερα λογότυπα μέσα στο χώρο εργασίας Sketch και να εξαλείψετε την ανάγκη να μεταβείτε σε μια νέα καρτέλα προγράμματος περιήγησης.
  • Γρήγορη μεταφορά κειμένου - Βοηθά στην γρήγορη γρήγορη αντιγραφή και επικόλληση κειμένου από ένα υπάρχον στρώμα σε άλλο, καθιστώντας το πολύ χρήσιμο όταν χρειάζεται να συμπληρώσετε πολλαπλές διατάξεις με κάποιο ψεύτικο κείμενο.
  • Generator περιεχομένου - για τη δημιουργία ψεύτικου κειμένου, φωτογραφιών και πολλά άλλα, χωρίς να αφήνετε το παράθυρο Sketch.

Χρησιμοποιώντας όλα αυτά τα πρόσθετα, πιστεύω ότι θα χρειαστείτε κάποια έμπνευση στην πορεία. Για να είστε ενημερωμένοι με τις τελευταίες τάσεις σχεδίασης, μπορείτε να βρείτε τη χρήση των ακόλουθων ιστότοπων, όπως το land-book.com, οι σελίδες.xyz ή το mobbin.design. (ή μοτίβα διεπαφής χρήστη του Google).

Συσκευασία

Θα μπορούσε να αισθανθεί μεγάλη φτάνοντας τόσο μακριά, κάποτε με όλο το περιεχόμενο, να κάνετε ένα διάλειμμα και να επιστρέψετε για να γυαλίσετε και να διορθώσετε τα πράγματα πριν φτάσετε στην αγορά.

  • Ορίστε σωστά όλες τις ομάδες, τα σύμβολα και τα στρώματα. Προσπαθήστε να τις καταστήσετε σαφείς ώστε να κατανοούν και να είναι συνεπείς με άλλους ανθρώπους για να συνεργαστείτε.
  • Μην χρησιμοποιείτε ούτε το lorem ούτε το ipsum, να κάνετε όλο το ψεύτικο κείμενο σας όσο το δυνατόν πιο κοντά στο πλαίσιο του σχεδίου που σχεδιάζετε, π.χ.
  • Χρησιμοποιήστε το αχρησιμοποίητο εργαλείο αφαίρεσης στυλ για να καθαρίσετε το έγγραφό σας από στρώματα κηλίδων και στυλ κειμένου.
  • Καθαρίστε τα σύμβολα από διπλότυπα στιγμιότυπα με αλληλεπικαλυπτόμενα σύμβολα
  • Δοκιμάστε το Sketch Cleaner (2 $ αξίας), όχι ένα κακό plugin λόγω της ποικιλίας των λειτουργιών που μπορεί να κάνει για να κρατήσει το κιτ σας καθαρότερο.

Εκκίνηση

Πριν προσεγγίσετε την αγορά, βεβαιωθείτε ότι ελέγχετε πάντα την εργασία σας σε μια οθόνη εικονικής ή φυσικής συσκευής. Κάντε διπλό έλεγχο της συμβατότητας και μόλις τελειώσετε όλα τα γυαλιά και αισθάνεστε υπερήφανοι για το έργο σας, μεταβείτε σε ένα πρόγραμμα επεξεργασίας κειμένου και γράψτε γιατί βρίσκετε τόσο μεγάλη. Ελάτε με καλές επιστολές και λέξεις για να περιγράψετε την έννοια και να την φέρετε σε μια παρουσίαση ή μια σελίδα προώθησης του προϊόντος σας. ️

Μάθετε πώς να επηρεάζετε αποτελεσματικά τον πελάτη χρησιμοποιώντας το οπτικό σας στυλ, τα λόγια και το προϊόν που έχετε κάνει. Ακολουθούν μερικά χρήσιμα εργαλεία που σας βοηθούν να δημιουργήσετε ένα δροσερό υλικό παρουσίασης ή προώθησης:

  • Artboard Framer - Μεγάλη νίκη, σας επιτρέπει να βάλετε ένα σύμβολο εικόνας συσκευής πίσω από τον πίνακα γραφικών σας, καθιστώντας τον απλώς τον καλύτερο τρόπο για να δημιουργήσετε πορτραίτα ή τοπικά mockups.
  • Isometric Sketch - Εξαιρετικά χρήσιμο για τη δημιουργία προοπτικών από πίνακες τέχνης και σχήματα.
  • GGradient - Κάνει εξαιρετικά εύκολο να δημιουργήσει βασικά στυλ κλίσεων από το επιλεγμένο χρώμα στρώματος.
  • Εικόνα λουλούδι - Χρήσιμο για τη δημιουργία όμορφων υπόβαθρα από εικόνες και βασικά σχήματα με τη χρήση φυλλοτοξείδωσης.
  • Looper - Μεταμορφώστε τα βασικά σχήματα σε δροσερές γεωμετρικές απεικονίσεις με περιστροφή, κλιμάκωση και αναπαραγωγή στρώσεων.

Τα προκύπτοντα υλικά είναι δυνατό να χρησιμοποιηθούν σε οποιαδήποτε αγορά της επιλογής σας, πηγαίνετε για εκείνη που ταιριάζει καλύτερα στο προϊόν σας και υποβάλλετε. Για τα συγκεκριμένα στοιχεία του UI, μπορώ να συστήσω το UI8, το Creative Market ή το Envato για την πρώτη σας εμφάνιση λόγω των φιλικών και αναπτυσσόμενων κοινοτήτων του.

Κατά τη διάρκεια της πρώτης εκτόξευσής σας προσπαθήστε να κάνετε μια καλή πρώτη εντύπωση του προϊόντος σας, να είστε πάντα ειλικρινείς με τους πελάτες σας και να παρέχετε πρόσθετη υποστήριξη για μια γρήγορη εκκίνηση, να κάνετε έναν οδηγό ή ένα αρχείο freebie για να εξηγήσετε το προϊόν.

Περίληψη

Χρησιμοποιώντας τις τεράστιες δυνατότητες της αναπτυσσόμενης βιομηχανίας σχεδιασμού, μπορείτε να δημιουργήσετε εκπληκτικά πράγματα σε σχετικά σύντομο χρονικό διάστημα, χρησιμοποιώντας απλώς άλλους κώδικες και κατορθώνοντας μερικά εργαλεία, χρησιμοποιώντας όλα τα κόλπα που ανακαλύψατε στην πρόοδό σας και κερδίζετε αυτή την πρόκληση.

Αν ψάχνετε για έναν σίγουρο σύντροφο σχεδίασης που θα σας βοηθήσει να δημιουργήσετε το κιτ UI σας, δοκιμάστε το Plaster για ένα κιτ εργαλείων σχεδιασμού για κινητά

και, Πλαίσια για τη δημιουργία σχεδίων Web / Desktop UI.

Πριν φύγεις:

  • Ακολουθήστε το Twitter και το Dribbble για περισσότερες ειδήσεις και ενημερώσεις.
  • Ελέγξτε περισσότερα για την πιο πρόσφατη έκδοση του συστήματος σχεδίασης γύψου. Μάθετε πώς να σχεδιάσετε πιο έξυπνα και πιο γρήγορα:
  • Κατεβάστε freebies: