5 Pet Peeves προγραμματιστές έχουν με σχεδιαστές (και πώς να τους αποφύγετε)
Γάτες και σκύλοι. Κάιν και Άβελ. Σχεδιαστές και προγραμματιστές. Αυτά είναι μόνο μερικά από τα μεγάλα ιστορικά γεγονότα.
Οι σχεδιαστές και οι προγραμματιστές συχνά φαίνεται να προέρχονται από διαφορετικούς πλανήτες και έχουν εντελώς διαφορετικούς εγκεφάλους.
Οι προγραμματιστές θέλουν έναν ιστότοπο να λειτουργεί σωστά, οι σχεδιαστές θέλουν να φαίνονται σωστοί.
Πριν από μερικές εβδομάδες, διερευνήσαμε το κύριο κατοικίδιο ζώο peeves ότι οι σχεδιαστές ιστοσελίδων έχουν με web developers , και πρότεινε κάποιες λύσεις γι 'αυτούς.
Σήμερα, θα συζητήσουμε την άλλη πλευρά του νομίσματος: τα πέντε πιο συνηθισμένα χτυπήματα που έχουν οι προγραμματιστές με τους σχεδιαστές .
PEEVE # 1: "Γιατί οι σχεδιαστές θέλουν να δημιουργήσουν τα πάντα στο Flash;"
Ο ιστότοπος είναι ένα απλό κουμπί και κάποιο κείμενο, αλλά ο σχεδιαστής επιμένει στη χρήση του Flash, ακόμα και αν αυτό τριπλασιάζει τον χρόνο λήψης.
Θέμα
Για ορισμένους σχεδιαστές, η χρήση τεχνολογιών βασικού ιστού (HTML, CSS και JavaScript) για τη δημιουργία μιας ιστοσελίδας μπορεί να νιώθει σαν το θόρυβο της καινοτομίας. Περιορίζουν τη δημιουργικότητά τους και τους αναγκάζουν να εξαρτώνται από τον κύριο του έργου να υλοποιήσουν το όραμά τους.
Το Flash δίνει στους σχεδιαστές πιθανές απεριόριστες δυνατότητες σχεδιασμού και μπορούν να διατηρήσουν πολύ μεγαλύτερο έλεγχο πάνω στο τελικό προϊόν, ειδικά αν γνωρίζουν το ActionScript. Με το Flash, οι σχεδιαστές μπορούν να επιλέξουν από τυχόν τυπογραφικά στοιχεία, κλίση και λοξά στοιχεία, να προσθέσουν κινούμενα σχέδια και να δημιουργήσουν ειδικά εφέ που είναι απλά αδύνατο να βαρεθούν στο HTML.
Λύση
Το πρώτο ερώτημα που πρέπει να αναρωτηθείτε ως προγραμματιστής είναι: "Ποια είναι η καλύτερη τεχνική λύση για το πρόβλημα;" Μπορεί να είναι βασικές τεχνολογίες ιστού ή θα μπορούσε να είναι Flash. Έχοντας ένα ανοιχτό μυαλό είναι σημαντικό. Για να προσδιορίσετε τι θα μπορούσε να λειτουργήσει καλύτερα, καθίστε μαζί με τον σχεδιαστή και συμφωνήστε με έναν κατάλογο τεχνικών και σχεδιαστικών απαιτήσεων για το έργο.
Για παράδειγμα, διερευνήστε εάν η σελίδα πρέπει να φορτωθεί γρήγορα, χρησιμοποιήστε μια συγκεκριμένη γραμματοσειρά για σκοπούς μάρκετινγκ, πληρούν τις οδηγίες προσβασιμότητας ή έχετε animation. Μόλις απαντήσετε σε τέτοιου είδους ερωτήσεις, θα είστε σε θέση να σταθμίσετε τα πλεονεκτήματα και τα μειονεκτήματα της χρήσης του Flash.
Η ενημέρωση του σχεδιαστή σας σχετικά με τα πλαίσια JavaScript όπως το Dojo και το jQuery είναι μια καλή ιδέα. Μπορεί να μην αντιληφθούν τη διαδραστική λειτουργικότητα και τα ειδικά εφέ που μπορούν να επιτευχθούν με τα AJAX και DHTML.
PEEVE # 2: "Έχει ο σχεδιαστής ακούσει ακόμη και HTML CSS;"
Ο σχεδιαστής δημιούργησε ένα υπέροχο σχέδιο χρησιμοποιώντας το Photoshop, αλλά ο ιστός απλά δεν λειτουργεί με αυτόν τον τρόπο.
Θέμα
Μερικοί σχεδιαστές φαίνεται να αγνοούν προληπτικά ακόμη και τις πιο θεμελιώδεις πτυχές της τεχνολογίας ιστού. Αυτό μπορεί να έχει ως αποτέλεσμα σχέδια που είναι απλά μη ρεαλιστικά ή εξαιρετικά δύσκολα να δημιουργηθούν στον ιστό, τα οποία βασίζονται πάρα πολύ σε εικόνες για απλή τυπογραφία ή που οδηγούν σε μια υποτρόπο εμπειρία χρήστη.
Λύση
Το CSS είναι η γλώσσα του σχεδιασμού ιστοσελίδων και οι σχεδιαστές που εργάζονται στο μέσο δεν έχουν καμιά δικαιολογία για να μην κατανοήσουν τα βασικά του. Μοιάζω αυτό με την προηγούμενη δουλειά μου στο σχεδιασμό της εκτύπωσης. Δεν έπρεπε να μάθω πώς να τρέχω ένα από αυτά τα μαμούθ βιομηχανικά εκτυπωτικά μηχανήματα, αλλά έπρεπε να ξέρω για την παγίδευση, τους μισούς τόνους και το CMYK.
Έπρεπε να καταλάβω τα βασικά στοιχεία της διαδικασίας εκτύπωσης αν ήθελα να επιτύχω τα καλύτερα αποτελέσματα με τα σχέδιά μου. Το ίδιο ισχύει και για το σχεδιασμό ιστοσελίδων. Οι σχεδιαστές δεν χρειάζεται να γνωρίζουν πώς λειτουργεί ένας διακομιστής, αλλά θα πρέπει να έχουν βασικές γνώσεις σχετικά με το ύψος της γραμμής, τις παραγεμισμένες εικόνες, τις εικόνες φόντου και τους άλλους παράγοντες που αποτελούν τη διαδικασία ανάπτυξης ιστού.
PEEVE # 3: "Ο σχεδιαστής μου έδωσε PSD με 50.000 ανώνυμα στρώματα και χωρίς φακέλους!"
Μπορείτε να κατεβάσετε το έγγραφο των 50 MB Photoshop, να περιμένετε πέντε λεπτά για να ανοίξετε τελικά, να αρχίσετε να κόβετε ένα απλό φόντο του κουμπιού και να αντιμετωπίζετε έναν τοίχο από άγνωστα στρώματα με φαινομενικά τυχαία σειρά και τα μισά από αυτά έχουν απενεργοποιηθεί.
Θέμα
Οι προγραμματιστές πρέπει να διατηρούν καλά τα έγγραφά τους, αλλιώς δεν θα είναι αποτελεσματικά. Ωστόσο, αν κάτι φαίνεται σωστά στη θύρα προβολής του Photoshop, τότε αυτό είναι αρκετά καλό για τον σχεδιαστή. Σε έναν προγραμματιστή που χρησιμοποιείται στον αντικειμενοστραφή προγραμματισμό (OOP) και μια λογική για τον κώδικα, αυτό μπορεί να είναι ένας εφιάλτης!
Λύση
Οι προγραμματιστές δεν είναι οι μόνοι που απογοητεύονται από τα αποδιοργανωμένα και γεμάτα αρχεία PSD. Ως δημιουργικός διευθυντής, έστειλα πίσω περισσότερα από ένα PSD με αίτημα να οργανώσει ο σχεδιαστής και να ονομάσει όλα τα επίπεδα. Αντιμετωπίστε αυτό το ζήτημα με τον σχεδιαστή το συντομότερο δυνατό. Καταστήστε σαφές ότι θα χρειαστείτε ένα καθαρό και οργανωμένο αρχείο.
Εάν αυτό δεν είναι εφικτό (ή ο σχεδιαστής είναι απλώς πεισματάρης), ένα τέχνασμα για την εύρεση του στρώματος ενός αντικειμένου είναι να το κάνετε δεξιά / Ctrl + κάντε κλικ στη θύρα προβολής με το εργαλείο Μετακίνηση (η συντόμευση πληκτρολογίου είναι "v").
Θα εμφανιστεί ένα μενού με όλα τα επίπεδα και τις ομάδες επιπέδων κάτω από το δρομέα. Επιλέξτε τη στρώση που θέλετε και, αν είναι ανοιχτή η Παλέτα στρώσεων, θα επισημανθεί το σωστό επίπεδο.
Επίσης, προτείνω ιδιαίτερα στους σχεδιαστές να μάθουν πώς να χρησιμοποιούν τα Smart Objects του Photoshop . Τα έξυπνα αντικείμενα σάς επιτρέπουν να συλλέγετε τα διάφορα στρώματα που συνθέτουν ένα αντικείμενο (για παράδειγμα, τα στρώματα που περιέχουν ένα κουμπί) σε ένα διακριτό αρχείο ενσωματωμένο στο κύριο αρχείο του Photoshop.
Τα έξυπνα αντικείμενα είναι εύχρηστα και προσφέρουν πολλά πλεονεκτήματα:
- Δημιουργούν ένα "αντικειμενοστρεφές" αρχείο Photoshop, στο οποίο τα επαναλαμβανόμενα στοιχεία έχουν ένα μόνο "σύμβολο".
- Μπορούν να εξάγονται ως ετοιμοπαράδοτα στοιχεία χωρίς να χρειάζονται τεχνικές ακατάλληλου στρώματος-τεμαχισμού.
- Κάνουν πιο εύκολη την οργάνωση του PSD μειώνοντας τον αριθμό των στρώσεων στο κύριο αρχείο.
PEEVE # 4: "Ο σχεδιαστής δεν φιλοξενήθηκε για πραγματικό κόσμο."
Χρησιμοποιούμε ένα σύστημα CMS που δίνει στον πελάτη πλήρη έλεγχο του περιεχομένου. Το μοτίβο του σχεδίου, ωστόσο, δείχνει μόνο μία γραμμή κειμένου για τίτλους και μία παράγραφο κειμένου για μαθήματα.
Ο σχεδιαστής αναμένει τα ισορροπημένα ύψη και τις στήλες, αλλά δεν μπορούμε να προβλέψουμε την ποσότητα αντιγράφου που θα χρειαστεί να χωρέσει εκεί.
Θέμα
Η δημιουργία του κειμένου Greeked (ή του "Lorem Ipsum") είναι μια διαχρονική μέθοδος προσθήκης ρεαλιστικού περιεχομένου, ελλείψει του τελικού αντιγράφου του ιστότοπου. Ωστόσο, επειδή δεν είναι πραγματικό περιεχόμενο, μπορεί να οδηγήσει τους σχεδιαστές να κάνουν εσφαλμένα συμπεράσματα σχετικά με τον τελικό σχεδιασμό της σελίδας.
Λύση
Τα comps σχεδιασμού είναι στατικά, αλλά οι πραγματικές ιστοσελίδες πρέπει να είναι ρευστές και δυναμικές. Οι σχεδιαστές πρέπει να το αναγνωρίζουν και να καλύπτουν όλα τα πιθανά σενάρια. Αυτός είναι ένας από τους κύριους περιορισμούς στη δημιουργία στατικών comps: δεν είναι το πραγματικό πράγμα.
Θεωρώ χρήσιμο να ορίσω το ύψος των περιοχών που θα χρησιμοποιηθούν για την εμφάνιση στοιχείων όπως οι τίτλοι και τα teasers, αντί να τα αφήνουν ανοικτά. Αυτό θα σας βοηθήσει να διαπιστώσετε ακριβώς πόσο χώρο θα πάρει στο τελικό σχέδιο.
PEEVE # 5: "Ο σχεδιαστής μου περιμένει να μαντέψω ποιες μορφές έχει χρησιμοποιήσει."
Ο σχεδιαστής σας δίνει ένα comp χωρίς καμία εξήγηση και σας περιμένει να υπολογίσετε την οικογένεια των γραμματοσειρών, τα ύψη γραμμών, τα χρώματα, τα πλάτη, τα περιβλήματα, τα περιγράμματα και τα περιθώρια.
Θέμα
Σε αντίθεση με τη δημιουργία ενός mockup στο Photoshop, η ανάπτυξη ιστού γενικά δεν γίνεται σε περιβάλλον WYSIWYG (αυτό που βλέπετε είναι αυτό που παίρνετε). Αντίθετα, ο προγραμματιστής αποδίδει συγκεκριμένες τιμές για μετρήσεις, χρώματα και τυπογραφία.
Λύση
Βλέπω αυτή την ανάλυση της επικοινωνίας σε πολλά έργα. υπογραμμίζει μια από τις μεγαλύτερες διαφορές μεταξύ "σχεδιασμού" και "ανάπτυξης". Ακόμη και αν ο σχεδιαστής χρησιμοποίησε ένα πρότυπο με ένα προκαθορισμένο πλέγμα, ο προγραμματιστής πρέπει συχνά να σκιαγραφεί άλλα στυλ.
Έχοντας τον σχεδιαστή να δημιουργήσει έναν οδηγό στυλ ως παραδοτέο, τότε, είναι σημαντικό. Ο οδηγός στυλ θα χρησιμεύσει ως ένα συμφωνημένο σχέδιο για το σχεδιασμό και θα μειώσει τη σύγχυση.
Ειδικό μπόνους Peeve: "Δεν χρειάζεται κανένας σχεδιαστής να μου λέει πως να προγραμματίζω!"
Ο σχεδιαστής θέλει κάτι κάτι ιδιαίτερο, ανεξάρτητα από το αν εσείς, ο δημιουργός, νομίζετε ότι αυτός ο τρόπος είναι ενδεδειγμένος.
Θέμα
Οι σχεδιαστές λέγοντας στους προγραμματιστές πώς να κωδικοποιούν είναι εξίσου απογοητευτικό, όπως οι προγραμματιστές λένε στους σχεδιαστές πώς να κάνουν τη δουλειά τους. Αλλά η γραμμή μεταξύ σχεδιαστή και προγραμματιστή είναι συχνά λεπτή, και μερικές φορές και οι δύο ρόλοι εμπίπτουν στο ίδιο πρόσωπο.
Αν έχετε σαφώς καθορισμένες ευθύνες για ένα έργο, ακούγοντας κάποιον που δεν συμμετείχε στη διαδικασία λήψης αποφάσεων, δεύτερον, μάλλον τα συμπεράσματά σας είναι ενοχλητικά.
Τεχνικές που φαίνονται ωραία σε άλλους στην επιφάνεια δεν ταιριάζουν πάντα στο περιβάλλον προγραμματισμού στο οποίο εργάζεστε. Η εξήγηση των λεπτομερειών των τεχνικών αποφάσεών σας παίρνει πολύτιμο χρόνο, όταν το μόνο που θέλετε είναι ο σχεδιαστής να πιστεύει ότι έχετε κάνει σοφές αποφάσεις .
Λύση
Ακούστε τι έχει να πει ο σχεδιαστής για τις τεχνικές εναλλακτικές λύσεις. ίσως να μην έχετε σκεφτεί όλα αυτά. Πολλές φορές, έχω συζητήσει με σχεδιαστές που έφεραν στο τραπέζι λύσεις που δεν ήξερα, όπως την πρώτη φορά που είδα την jQuery σε δράση.
Θυμηθείτε ότι εσείς και ο σχεδιαστής (ελπίζουμε) μοιράζονται τον ίδιο στόχο για τη δημιουργία του καλύτερου δυνατού προϊόντος. Εάν κρατάτε ανοιχτό μυαλό και μια προσεγγιστική προσέγγιση, δεν μπορείτε να πάτε στραβά.
Γράφτηκε αποκλειστικά για WDD από Jason Cranford Teague . Προσφέρει εξειδικευμένες συμβουλευτικές υπηρεσίες στο διαδίκτυο και εκπαιδευτικές συναντήσεις. Μπορείτε να προ-παραγγείλετε το νέο του βιβλίο, Μιλώντας στα στυλ: Οι βασικές αρχές του CSS για τους σχεδιαστές ιστοσελίδων στο Amazon.com.
Ποια κατοικίδια ζώα έχετε με τους σχεδιαστές; Θα θέλαμε να μάθουμε περισσότερα γι 'αυτό, παρακαλώ μοιραστείτε τα σχόλιά σας παρακάτω.