Ο σχεδιασμός στο πρόγραμμα περιήγησης χρησιμοποίησε για να με τρομάξει. Όχι επειδή φαινόταν δύσκολο, αλλά επειδή σκέφτηκα ότι θα καταλήξω με ένα σχέδιο που αποτελείται από πολλά κιβώτια, κάτι που ήταν τόσο γενικό και μελαγχολικό θα καταλήξω να το ξανακάνω στο Photoshop.
Αυτός ο φόβος αποδείχθηκε εντελώς αδικαιολόγητος. Όχι μόνο τα σχέδια μου έγιναν πιο εστιασμένα, τα ολοκλήρωσα και ταχύτερα και έκανα τους πελάτες να συμμετάσχουν νωρίτερα στη διαδικασία μέσω της αλληλεπίδρασης και της συζήτησης.
Ο σχεδιασμός είναι σχεδιασμός. Δεν έχει σημασία αν γίνεται σε ένα πρόγραμμα λογισμικού ή είναι γραμμένο σε κώδικα. Ο σχεδιασμός στο πρόγραμμα περιήγησης δεν είναι καθόλου σκληρότερος από το σχεδιασμό στο Photoshop. Όπως κάθε εργαλείο, πρέπει να το χρησιμοποιήσετε για να το μάθετε και τελικά να το καταφέρετε.
Ο σχεδιασμός είναι μια επαναληπτική διαδικασία, η οποία γίνεται πιο δύσκολη από την εργασία για τους πελάτες. Είναι δύσκολο μερικές φορές για τους πελάτες να καταλάβουν ακριβώς τι περιγράφετε. ο σχεδιασμός στο πρόγραμμα περιήγησης μπορεί να τους εμπλέξει σε όλη τη διαδικασία και όχι μόνο στη φάση του σχεδιασμού.
Ουσιαστικά οι φάσεις σχεδιασμού και ανάπτυξης συγχωνεύονται και εάν είστε φυσικά καλοί στο σχεδιασμό και στην ανάπτυξη του μπροστινού μέρους, θα πάρετε το σχεδιασμό στο πρόγραμμα περιήγησης όπως μια πάπια παίρνει στο νερό.
Ένα σημαντικό πλεονέκτημα του σχεδιασμού στο πρόγραμμα περιήγησης είναι ότι μπορούμε να σχεδιάσουμε με βάση ρεαλιστικές προσδοκίες. Μερικές φορές το σχεδιασμό στο λογισμικό μπορεί να δημιουργήσει απρόβλεπτα προβλήματα για την ανάπτυξη του front-end. Τα στοιχεία του UI θα μπορούσαν να σχεδιαστούν νευρικά ή ίσως απλά δεν έχουν νόημα, είναι δύσκολο να εξηγήσεις σε έναν πελάτη γιατί αλλάξατε κάτι, όχι γιατί δεν θα καταλάβουν αλλά επειδή το έχετε ήδη τοποθετήσει στο σχεδιασμό και το είχατε εγκριθεί. Ο σχεδιασμός στο πρόγραμμα περιήγησης προσφέρεται στην ιδέα της απλότητας.
Πριν σκέφτομαι ακόμη και για το σχεδιασμό πρέπει να έχω ένα σχέδιο. Ακριβώς επειδή χρησιμοποιώ ένα διαφορετικό εργαλείο δεν σημαίνει ότι η διαδικασία μου αλλάζει. Μου αρέσει να έχω ένα αρκετά συμπαγές σχέδιο πριν αρχίσω να σχεδιάζω και πρέπει να ξέρω τι σχεδιάζω, γιατί σχεδιάζω, ποιον σχεδιάζω, φόντο του πελάτη και κάθε πληροφορία σχετικά με την υπηρεσία ή το προϊόν που θα πρέπει να επικεντρωθώ επί.
Αφού προσδιορίσω αυτά τα πράγματα θα έχω μια καλύτερη ιδέα για το τι είναι το προϊόν ή τι κάνει ο πελάτης, πόσο καιρό το κάνουν, τι τους χωρίζει από τον ανταγωνισμό τους, ποια είναι η βάση των χρηστών τους και ποιες είναι οι πρωταρχικές και δευτερεύουσες οι στόχοι του ιστοτόπου πρόκειται να είναι.
Προσωπικά θέλω να έχω τεκμηρίωση για τα πάντα. Συνήθως έχω τεκμηρίωση για τον χάρτη ιστότοπου, το περιεχόμενο, τις προσκλήσεις για δράση και την αρχιτεκτονική του ιστότοπου. Μέχρι να αρχίσω να σχεδιάζω θα έπρεπε να έχουμε μια σαφή στρατηγική για το σχεδιασμό και όλο το περιεχόμενο θα έπρεπε να έχει συλλεχθεί.
Το σκίτσο είναι το κλειδί αν πρόκειται να σχεδιάσω οτιδήποτε στο πρόγραμμα περιήγησης. Μπορώ να τραβήξω τις περιοχές περιεχομένου με μολύβι και χαρτί, να λάβω ανάδραση και γρήγορα να επαναλάβω τα θεμέλια του σχεδιασμού μου.
Σχεδιάζω με βάση το σχέδιο που περιγράψαμε παραπάνω και βεβαιώνω ότι διαθέτω όλους τους τομείς περιεχομένου και τις προσκλήσεις για δράση. Το σκίτσο πρέπει να είναι γρήγορο, μην ξοδεύετε πολύ χρόνο τελειοποιώντας οτιδήποτε. Θα πρέπει να είναι αρκετά στερεό για να δείξει σε έναν πελάτη, αλλά αρκετά επιπόλαια ώστε να μπορείτε να τα ολοκληρώσετε σε λιγότερο από μία ώρα.
Στη συνέχεια, μου αρέσει να προτυποποιώ τον ιστότοπο από τα σκίτσα μου σε HTML και CSS. Το πρωτότυπο είναι πολλά γκρίζα κουτιά με κείμενο και εικόνες για τοποθετημένα αντικείμενα. Τα γκρίζα πλαίσια λειτουργούν ως δοχεία για περιεχόμενο όταν αρχίζω πραγματικά το σχεδιασμό. Το μεγαλύτερο πλεονέκτημα στο πρωτότυπο με τον κώδικα είναι ότι ο πελάτης μπορεί να αλληλεπιδράσει με το πρωτότυπο και να δούμε πώς λειτουργεί η αρχιτεκτονική του χώρου, με αυτόν τον τρόπο αν κάτι είναι εκτός λειτουργίας ή χρειάζεται εκλεπτυσμένο μπορούμε να το χειριστούμε τώρα και όχι την ημέρα εκτόξευσης.
Πριν μπορέσουμε να αρχίσουμε να σχεδιάζουμε, χρειαζόμαστε κάποιο είδος στυλ για να στηρίξουμε το σχέδιο μας. Πρέπει να καθορίσουμε τα χρώματα και τις γραμματοσειρές που θα χρησιμοποιήσουμε με πιθανές υφές και σχέδια. Αυτό είναι όπου τα πλακάκια στυλ μπαίνουν στο παιχνίδι.
Πλακάκια στυλ δημιουργήθηκαν από τη Samantha Warren και τα χρησιμοποιώ για λίγο. Βοηθούν τους πελάτες να δουν έναν πρώιμο και πολύ απλό οδηγό στυλ που μπορούμε να χρησιμοποιήσουμε για να αρχίσουμε να σχεδιάζουμε. Μου αρέσει να δημιουργώ πολλά από αυτά για να δω ποιος πελάτης προτιμά με αυτόν τον τρόπο μπορώ να το περιορίσω σε ένα. Θεωρώ ότι αυτά είναι επίσης πολύ σημαντικά στη διαδικασία έγκρισης και συμβάλλουν στην αποτροπή της απόλυτης απόρριψης.
Τώρα είμαστε έτοιμοι να αρχίσουμε να σχεδιάζουμε. Αν έχετε συνηθίσει να σχεδιάζετε σε ένα πρόγραμμα λογισμικού όπως το Photoshop ή το Sketch, αυτό δεν είναι πολύ διαφορετικό. Χρησιμοποιώντας το πρωτότυπο αρχείο μας αρχίζουμε να προσθέτουμε mock περιεχόμενο στο markup μας. Σε αυτό το σημείο γνωρίζουμε ακριβώς τι συμβαίνει σε κάθε τμήμα περιεχομένου της σήμανσης και το δίκτυο έχει ήδη οριστεί, ώστε να μην χρειάζεται τόσο πολύ.
Τώρα πρόκειται να ξεκινήσω τα στυλ στρωματοποίησης στο περιεχόμενό μου. Θα προσθέσω βασικά στυλ για το χρώμα, την τυπογραφία και τη διάταξη. Μόλις τελειώσουν τα στυλ βάσης, θα πάω μακριά και θα τα δούμε. Μου αρέσει η οθόνη να πυροβολήσει ορισμένα τμήματα του σχεδίου για αναφορά αργότερα.
Μόλις είμαι ικανοποιημένος με το στρώμα βάσης μου αρέσει να σημειώνω τι να τελειοποιήσω. Με βάση αυτές τις σημειώσεις θα χρησιμοποιήσω κατά πάσα πιθανότητα Photoshop ή Σκίτσο για να προσθέσετε υφή ή κάτι με μια απτή αίσθηση. Το Photoshop και το Σκίτσο είναι εξαιρετικά εργαλεία για να βελτιώσετε γρήγορα τα σύνθετα στοιχεία UI, γι 'αυτό σώζω οτιδήποτε μπορεί να είναι πόνος για να κωδικοποιήσετε περισσότερες από μία φορές
Ο λόγος που το κάνω είναι επειδή θέλω το codebase μου να είναι άπαχο και καθαρό και όσο περισσότερο κωδικοποιείτε, σχολιάζετε και διαγράφετε, τόσο πιο παραπλανητικό και φουσκωμένο το codebase σας γίνεται.
Αν έπρεπε να σχεδιάζετε στο πρόγραμμα περιήγησης από την αρχή κάθε φορά, τα πράγματα μπορεί να φαίνεται σαν να παίρνουν για πάντα, αλλά αν ξεκινήσετε από μια προσαρμοσμένη βάση, ένα πλαίσιο, μπορείτε να εξαλείψετε τυχόν επαναλαμβανόμενα βήματα. Αρχικά, έχω μια προσαρμοσμένη έκδοση του Initializer που χρησιμοποιώ με ένα προσαρμοσμένο δίκτυο ανταποκριτών που είναι ενσωματωμένο στο Sass (http://sass-lang.com/). Η χρήση ενός προσαρμοσμένου πλαισίου μου δίνει ένα ξεκίνημα για πρωτότυπα και σχεδιασμό.
Έχοντας μια βιβλιοθήκη κοινών μοτίβων UI είναι επίσης ένας πολύ καλός τρόπος για να οικοδομήσουμε ένα γρήγορο πρωτότυπο και κάνει το σχεδιασμό στο πρόγραμμα περιήγησης πιο αποδοτικό. χρησιμοποιώ Υπέροχο κείμενο να κωδικοποιήσετε και ένα πράγμα που έμαθα να εκμεταλλευτείτε είναι τα προσαρμοσμένα αποσπάσματα που μπορείτε να δημιουργήσετε. Έχω προσθέσει αρκετές παραλλαγές πλοήγησης, λιστών, πλευρικών λυχνιών και άλλων κοινών στοιχείων στη λίστα των αποσπασμάτων μου, ώστε να μπορώ γρήγορα να τα τοποθετήσω στη σήμανσή μου με μια απλή ενέργεια. Επίσης, χρησιμοποιώ λογαριασμούς Codepen και JSFiddle για να αποθηκεύσετε μοτίβα. Ο Dan Cederholm δημιούργησε ένα σπουδαίο θέμα WordPress για την αποθήκευση κοινών μοτίβων που ονομάζονται Αχλάδια . Χρησιμοποιεί θέσεις για την αποθήκευση κώδικα που μπορείτε να επεξεργαστείτε ζωντανά στο front-end για δοκιμή και προεπισκόπηση αλλαγών.
Η πρακτική και η πρακτική εφαρμογή θα σας κάνουν να σχεδιάζετε καλύτερα στο πρόγραμμα περιήγησης. Οι πιθανότητες είναι εάν κάνετε κάποιο είδος πρωτοποριακής ανάπτυξης που έχετε ήδη ένα βασικό πλαίσιο για να ξεκινήσετε από και έχετε ήδη κάποια κοινά πρότυπα για χρήση.
Τώρα το μόνο που χρειάζεται να κάνετε είναι να αρχίσετε να σχεδιάζετε στο πρόγραμμα περιήγησης και τελικά θα βγείτε με μια ροή εργασιών που είναι αποτελεσματική και λειτουργεί μέσα στη διαδικασία σας. Με την πρακτική θα γίνεις πιο γρήγορος.