Θάνατος για την επεξεργασία μηχανημάτων!

Βρείτε την ιδανική διαδικασία σχεδιασμού σας, εμμένοντας σε μερικές απλές αρχές αντί για ένα άκαμπτο σενάριο.

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

"Θα πρέπει να χρησιμοποιείτε το Σκίτσο".
"Συστήματα σχεδιασμού ή GTFO."
"Οι πραγματικοί σχεδιαστές σχεδιάζουν 100% σε κώδικα."
"Τα συρματοπλέγματα είναι χάσιμο χρόνου."
"Αν δεν κάνετε πρωτότυπα, δεν το κάνετε σωστά".
"Πρέπει να ξεκινήσετε σε χαρτί."

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

Η κλασική γραμμική προσέγγιση μοιάζει με κάτι τέτοιο:
έρευνα → σκίτσο → συρματοπλέγματα → στατικά comps → πρωτότυπο → κώδικας

Είναι κάτι σαν τις μηχανές παραγωγής Rube Goldberg που χρησιμοποιούν για να κάνουν Doritos και Ding-Dongs. Πετάξτε μια ιδέα στο μηχάνημα επεξεργασίας, και αφού πέσει και χυτευθεί σε σχήμα καθώς στροβιλίζεται μέσα από τα σκαλοπάτια, ένα τελικό προϊόν ξεδιπλώνει την άλλη πλευρά! Αναμενόμενος! Αποτελεσματικός!

Περίπου.

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

Hank, a.k.a. "η Sabot"

Παρακολουθούσα την εύρεση του Dory με το παιδί μου τελευταία, και μέρος του "κάνοντας" του υλικού κρατά το άλμα σε μένα.

Στην ταινία, υπάρχει αυτό το χταπόδι που ονομάζεται Hank:

Disney / Pixar

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

Σε αυτό το σημείο της διαδικασίας, είναι καλά παρελθόν σκίτσα και αποτυπώσεις και animatics - αυτά τα χαμηλότερα στάδια πιστότητας που σας βοηθούν να vet μια δέσμη των ιδεών γρήγορα και φθηνά. Έχουν ήδη πάρα πολύ Real. Η εξέδρα χαρακτήρων κατασκευάστηκε, εκπονήθηκαν τεχνικές λεπτομέρειες, απαντήθηκαν θεμελιώδη ερωτήματα.

Βρίσκονται στο τελικό στάδιο κινούμενων σχεδίων - μοντέλα 3D σε περιβάλλοντα 3D. Θα μπορούσαν να έχουν πωληθεί σε βάρος του χρονοδιαγράμματος παραγωγής και του προϋπολογισμού. Αντ 'αυτού, έκαναν κάτι πραγματικά ενδιαφέρον - επέστρεψαν στο σκίτσο.

Disney / Pixar

Σχεδιάζοντας την περίπλοκη κίνηση των πλοκαριστών του Χανκ σε χαρτί, θα μπορούσαν να καρφώσουν το τέλειο κινούμενο ρευστό που έψαχναν σε ένα κλάσμα της εποχής. Μόλις ήταν ευχαριστημένοι με την ακολουθία, θα ζωντανέψουν σε 3D για να ταιριάζουν. Έλαβαν ένα καλύτερο προϊόν σε λιγότερο χρόνο, επειδή επέλεξαν να εκτιμήσουν τις αρχές της διαδικασίας αντί για μια συνταγή διαδικασίας.

Η θεραπεία για μια συντακτική διαδικασία

Η ομάδα Finding Dory έκανε ταχύτερα ένα καλύτερο προϊόν, λαμβάνοντας αποφάσεις που είχαν ως προτεραιότητα την ταχύτητα και την ποιότητα, αντί να κολλήσουν σε μια διαδικασία.

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

Ο καθορισμός των αρχών που οδηγούν τη διαδικασία σας είναι μόνο η αρχή. Εδώ μπορείτε να τα εφαρμόσετε στην πράξη.

Ξεκινήστε με τις μεγάλες ερωτήσεις

Αν εκτιμάτε την ταχύτητα, ξεκινήστε ένα έργο, υπολογίζοντας ποια είναι τα μεγαλύτερα, πιο θεμελιώδη ερωτήματα. Στο Getting Real, αυτό ονομάζεται "design epicenter":

Ξεκινήστε από τον πυρήνα της σελίδας και δημιουργήστε εξωτερικά
Το σχέδιο Epicenter επικεντρώνεται στην αληθινή ουσία της σελίδας - το επίκεντρο - και στη συνέχεια χτίζει προς τα έξω. Αυτό σημαίνει ότι, στην αρχή, αγνοείτε τα άκρα: την πλοήγηση / καρτέλες, το υποσέλιδο, τα χρώματα, την πλαϊνή μπάρα, το λογότυπο κλπ. Αντ 'αυτού, αρχίζετε στο επίκεντρο και σχεδιάζετε πρώτα το πιο σημαντικό κομμάτι περιεχομένου.
Όποια και αν είναι η σελίδα που δεν μπορεί να ζήσει χωρίς να είναι το επίκεντρο. Για παράδειγμα, αν σχεδιάζετε μια σελίδα που εμφανίζει μια ανάρτηση ιστολογίου, η ίδια η θέση του ιστολογίου είναι το επίκεντρο. Δεν είναι οι κατηγορίες στην πλαϊνή γραμμή, όχι η κεφαλίδα στην κορυφή, όχι η φόρμα σχολίων στο κάτω μέρος, αλλά η πραγματική μονάδα ταχυδρομείου στο blog. Χωρίς τη μονάδα ταχυδρομείου ιστολογίου, η σελίδα δεν είναι μια ανάρτηση ιστολογίου.
Μόνο όταν ολοκληρωθεί αυτή η μονάδα θα αρχίσετε να σκέφτεστε το δεύτερο πιο κρίσιμο στοιχείο στη σελίδα. Στη συνέχεια, μετά το δεύτερο πιο κρίσιμο στοιχείο, θα προχωρήσετε στο τρίτο και ούτω καθεξής. Αυτό είναι σχεδιασμός επίκεντρο.
Το σχέδιο Epicenter αγνοεί το παραδοσιακό μοντέλο "ας δημιουργήσουμε το πλαίσιο και στη συνέχεια αφήσουμε το περιεχόμενο στο". Σε αυτή τη διαδικασία, το σχήμα της σελίδας είναι χτισμένο, τότε το πλοίο συμπεριλαμβάνεται, τότε το μάρκετινγκ "stuff"
 και στη συνέχεια, η βασική λειτουργικότητα, ο πραγματικός σκοπός της σελίδας, χύνεται σε οποιοδήποτε χώρο παραμένει. Είναι μια διαδικασία προς τα πίσω που παίρνει αυτό που πρέπει να είναι η κορυφαία προτεραιότητα και την αποθηκεύει για το τέλος.

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

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

Απλά ρωτήστε, WMGMTCATMQITLAOT;

Αφού γνωρίσετε πρώτα τις ερωτήσεις που χρειάζονται απαντήσεις πρώτα, αναρωτηθείτε:
"Ποιο μέσο μου δίνει τη σαφέστερη απάντηση στις ερωτήσεις μου στο μικρότερο χρονικό διάστημα;"

Στην περίπτωση του δικού μου έργου, η απάντηση ήταν κώδικας. Για μια σελίδα στο Basecamp.com, η απάντηση είναι συχνά κείμενο ή σκίτσο. Για εσάς, μπορεί να είναι κάτι άλλο εξ ολοκλήρου.

Γνωρίζοντας πότε πρέπει να αλλάξετε ταχύτητα

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

Σκεφτείτε για την οδήγηση ενός αυτοκινήτου. Περνάτε στον αυτοκινητόδρομο - ο κινητήρας απομακρύνεται σαν ένα ευχάριστο γατάκι. Αλλά τότε ξεκινάτε να οδηγείτε σε ένα λόφο. Τα εργαλεία που βρίσκεστε ήταν εξαιρετικά για την κρουαζιέρα, αλλά όχι για αναρρίχηση σε λόφους. Για να διατηρήσετε την ταχύτητά σας, μεταφέρετε σε μια νέα ταχύτητα.

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

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

Η δεύτερη περίπτωση - αλλάζοντας πίσω σε μια χαμηλότερη πιστότητα - είναι πιο σκληρή. Και επειδή οι άνθρωποι ασκούνται λιγότερο σε αυτό, και επίσης επειδή είναι δύσκολο. Λάβετε εργασίες σε κώδικα. Εργάζεστε με πίστη 100%, οπότε δεν υπάρχει όριο στην ικανότητα του μέσου να απαντά σε ερωτήσεις. Αλλά υπάρχει ένα όριο στην ικανότητά του να απαντά γρήγορα σε ερωτήσεις.

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

Χρησιμοποιώντας ένα μέσο προς όφελός σας

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

Όσο περισσότερο καταλαβαίνετε πώς ένα μέσο επηρεάζει τη δουλειά σας - το είδος των εργαλείων που αφήνει αφήνει - τόσο περισσότερο μπορείτε να το χρησιμοποιήσετε προς όφελός σας. Θέλετε το σχέδιό σας να είναι εκφραστικό; Πιθανότατα καλύτερα να δουλέψετε με ένα οπτικό εργαλείο όπως το Sketch, το Illustrator, ή ακόμα και το * gasp * Photoshop. Θέλετε ένα ελαφρύ, ελαφρύ σχέδιο; Προσέξτε στο σχεδιασμό σε κώδικα.

Ένα πρακτικό παράδειγμα

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

Ξεκινάμε έναν νέο τρόπο να συνεργαστούμε με τους πελάτες μας στο Basecamp και η δουλειά μου ήταν να δημιουργήσω μια νέα σελίδα στο Basecamp.com για να το διαθέσω στην αγορά. Δείτε πώς ξεκίνησε:

Καθορισμός μεγάλων ερωτημάτων, επιλογή ενός μέσου

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

"Ποιο μέσο μου δίνει τη σαφέστερη απάντηση στις ερωτήσεις μου στο μικρότερο χρονικό διάστημα;"

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

Μια δέσμη μισό-ψημένο αντίγραφο

Αύξηση πιστότητας

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

Γιατί;

Ένα έγγραφο κειμένου δεν μπορούσε να μου πει τίποτα για το αν μια γραμμή θα αφήσει μια χήρα, αν μια παράγραφο "αισθάνθηκε" μακρά, πώς οι εικόνες θα ρέουν, κλπ. Χρειαζόμουν περισσότερη πιστότητα. Ορισμένες από τις νέες ερωτήσεις θα μπορούσαν να απαντηθούν από ένα static comp, αλλά αυτό δεν θα είχε απαντήσει σε ερωτήσεις σχετικά με την προσαρμογή του αντιγράφου, εκτός αν χάσει χρόνο που ταιριάζει με το comp ακριβώς στον κώδικα. Οχι ευχαριστώ.

Εργασία μέσω αντιγράφων αντιγραφής σε κώδικα

Επιλεκτικά μειώνεται η πιστότητα

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

Θα μπορούσα να είχα παραμείνει στον κώδικα για το μεγαλύτερο μέρος, αλλά με το Sketch θα μπορούσα να πυροβολήσω μια δέσμη ιδεών πολύ πιο γρήγορα από όσο θα μπορούσα να τα κωδικοποιήσω. Επιτρέψτε μου επίσης να συγκρίνω απευθείας αυτές τις ιδέες ο ένας με τον άλλο και δεν θα αφήσει μια φωλιά CSS των αρουραίων από όλα τα ψεύδη. Win-win-win.

Μια δέσμη μισοψημένων σκίτσων

Παρατηρήστε πως κανένα από αυτά δεν είναι πλήρως ψημένο; Είναι επειδή δεν έχουν σημασία! Αυτά δεν είναι για παρουσίαση πελάτη ή για μεταβίβαση προγραμματιστών. Είναι εκεί για να με βοηθήσουν να καταλάβω κάτι, τότε είναι σκουπίδια. Η επένδυση του χρόνου για τη στίλβωση τους θα αποτελούσε απόλυτη σπατάλη προσπαθειών.

Τελειώνω

Μόλις είχα μια αίσθηση της κατεύθυνσης, ήταν κώδικας το υπόλοιπο της διαδρομής. Αντιγράψτε το αντίγραφο, καρφώστε τα στιγμιότυπα οθόνης και πάντα αξιολογείτε την τελική ερώτηση κλειδί: "Είναι έτοιμο για αποστολή;". Μπορείτε να ρίξετε μια ματιά στους live Clients στη σελίδα Basecamp εδώ.

Αυτός δεν είναι ο τρόπος λειτουργίας κάθε έργου. Μερικές φορές θα σχεδιάσω κάτι στο Procreate, μερικές φορές θα ξεκινήσω με ένα γρήγορο και βρώμικο οπτικό comp, μερικές φορές θα γράφω αντίγραφο στο Sketch, μερικές φορές θα δουλέψω 100% στον κώδικα. Όλα εξαρτώνται από το έργο στο χέρι.

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

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