Σχεδιαστές Hey, οδηγείς τους συνεργάτες του προγραμματιστή τρελοί;

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

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

1. Φέρτε τους προγραμματιστές σε νωρίς

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

Στεναγμός.

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

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

2. Πρακτική διαχείριση συνεπούς αρχείου

Ένα από τα μεγαλύτερα πράγματα που μπορεί να κάνει ο σχεδιαστής είναι να προετοιμάζει και να συσκευάζει τα αρχεία με τον ίδιο τρόπο κάθε φορά.

Πόσες φορές έχετε ανοίξει ένα έγγραφο του Photoshop με εκατοντάδες ανώνυμα στρώματα; Μην δίνετε αυτόν τον τύπο αρχείου σε έναν προγραμματιστή. Κάθε στρώμα και στυλ - ανεξάρτητα από το λογισμικό που χρησιμοποιείτε - θα πρέπει να ονομάζεται κατάλληλα.

Πόσες φορές έχετε ανοίξει ένα έγγραφο του Photoshop με εκατοντάδες ανώνυμα στρώματα;

Οι μορφές, τα δείγματα χρωμάτων και η τυπογραφία θα πρέπει να είναι συνεπείς σε όλο το σχέδιο. (Ένα κουμπί δεν πρέπει να φαίνεται διαφορετικό από σελίδα σε σελίδα.)

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

3. Χρησιμοποιήστε τις γραμματοσειρές Google

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

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

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

Ο λόγος πίσω από αυτό είναι απλός: Η ενσωμάτωση γραμματοσειρών μπορεί να γίνει λίγο πιο δύσκολη. Επιπλέον, οι Γραμματοσειρές Google είναι δωρεάν και θα διασφαλίσουν ότι δεν θα υποστείτε πρόσθετο κόστος έργου. (Ενώ είστε σε αυτό, σκεφτείτε να κάνετε το ίδιο πράγμα με τα εικονίδια και να χρησιμοποιήσετε ένα πακέτο όπως το Font Awesome, το οποίο επιτρέπει στον προγραμματιστή να στυλει εικόνες χρησιμοποιώντας CSS, μην εισάγει μια δέσμη αρχείων εικόνας!)

4. Πακέτα στοιχείων εικόνας

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

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

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

5. Σκεφτείτε το περιβάλλον

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

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

Πρέπει να γνωρίζετε εκ των προτέρων αυτά τα πράγματα:

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

6. Ζητήστε ερωτήσεις

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

Η επικοινωνία μπορεί να κάνει ή να σπάσει τα έργα

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

7. Μάθετε μερικά βασικά στοιχεία του Dev

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

Οι σχεδιαστές που εργάζονται σε ψηφιακά έργα πρέπει να στίζονται οι ίδιοι σε:

  • HTML και CSS (θα πρέπει να μπορείτε να αλλάξετε ένα μέγεθος γραμματοσειράς ή ένα χρώμα και να κατανοήσετε τον τρόπο με τον οποίο τα δύο είναι διαφορετικά)
  • Κοινά πρότυπα χρηστών (σχεδιασμός για τον τρόπο με τον οποίο οι χρήστες αλληλεπιδρούν με το περιεχόμενο)
  • Προδιαγραφές προσβασιμότητας (ώστε το σχέδιό σας να λειτουργεί για περισσότερους χρήστες)
  • Τι είδους στοιχεία πρέπει να εξυπηρετηθούν ως εικόνες και τι μπορούν να δημιουργηθούν χρησιμοποιώντας καθαρό CSS
  • Πώς λειτουργούν τα σημεία διακοπής σε ανταποκρινόμενες διατάξεις
  • Τάσεις στο σχεδιασμό ιστοσελίδων

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

8. Χρησιμοποιήστε έναν Οδηγό στυλ "Living"

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

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

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

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

  • Στυλ λογότυπου
  • Παλέτα χρωμάτων
  • Παλέτα γραμματοσειράς
  • Εικονίδιο παλέτα
  • Στοιχεία του μενού πλοήγησης (και εκεί που συνδέουν)
  • Επιλογές διάταξης για διαφορετικές σελίδες
  • Τα αποσπάσματα κώδικα που επαναχρησιμοποιούνται σε ολόκληρο τον ιστότοπο (όπως κουμπιά)

9. Χρησιμοποιήστε το Πλέγμα

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

Το πλέγμα μπορεί να σας βοηθήσει να σχεδιάσετε και να διατηρήσετε ροή. (Η πρόκληση είναι ότι δεν μπορείτε να σπάσετε αυθαίρετα τους κανόνες σχεδιασμού.)

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

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

10. Μην είστε τραγουδιστής

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

Ο χρυσός κανόνας όταν πρόκειται να συνεργαστείτε με τους προγραμματιστές είναι ... μην είστε τρελός.

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

Να είστε ευέλικτοι, να ανοίγετε και να μιλάτε τα πράγματα με τον προγραμματιστή σας. Θα σας αγαπούν γι 'αυτό.