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

Ο στόχος μου είναι να σας δώσω μερικούς εύκολους κανόνες και έννοιες, από έναν front-end dev σε άλλο, αυτό θα σας βοηθήσει να ξεκινήσετε από την αρχή έως το τέλος ενός έργου χωρίς να χάσετε αυτό που εργάστηκαν τόσο πολύ οι σχεδιαστές σας (ή ίσως ακόμη και να σας επιτρέψουν να σχεδιάσετε τα δικά σας έργα με αξιοπρεπή αποτελέσματα).

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

Κάντε Stuff σε ένα πρόγραμμα γραφικών

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

Επομένως, υπάρχει πάντα ένα σημείο σε οποιαδήποτε δουλειά front-end όπου καταλήγετε να κάνετε κάποιες αλλαγές που σχετίζονται με την αισθητική. Είτε κάνει το σημάδι επιλογής που εμφανίζεται όταν επιλέγετε το πλαίσιο ελέγχου, είτε δημιουργείτε μια διάταξη σελίδας που έχασε το PSD, οι front-end συχνά καταλήγουν να χειρίζονται αυτές τις φαινομενικά μικρές εργασίες. Φυσικά, σε έναν τέλειο κόσμο αυτό δεν θα συνέβαινε, αλλά έχω ακόμη βρει έναν τέλειο κόσμο, επομένως πρέπει να είμαστε ευέλικτοι.

Ένας καλός front-end προγραμματιστής πρέπει να χρησιμοποιεί επαγγελματικά εργαλεία γραφικών. Μην αποδεχτείτε κανένα υποκατάστατο. Τιτίβισμα

Για αυτές τις καταστάσεις, θα πρέπει πάντα να χρησιμοποιείτε ένα πρόγραμμα γραφικών για mockups. Δεν με νοιάζει ποιο εργαλείο επιλέγετε: Photoshop, Illustrator, Fireworks, ΣΕΙΡΗΤΙ , οτιδήποτε. Απλώς μην επιχειρήσετε να σχεδιάσετε από τον κωδικό σας. Αφιερώστε ένα λεπτό για να ξεκινήσετε ένα πραγματικό πρόγραμμα γραφικών και να καταλάβετε πώς θα πρέπει να φαίνεται, μετά πηγαίνετε στον κώδικα και κάντε το να συμβεί. Μπορεί να μην είστε ειδικός σχεδιαστής , αλλά θα καταλήξετε ακόμα καλύτερα αποτελέσματα.

Ταιριάξτε το σχέδιο, μην προσπαθήσετε να το κερδίσετε

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

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

Οι προγραμματιστές πρέπει να ταιριάζουν με την αρχική σχεδίαση front-end όσο το δυνατόν πιο κοντά. Τιτίβισμα

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

Η εστίασή σας πρέπει πάντα να είναι η εργασία με το σχέδιο και όχι η προσπάθειά σας να το ξεπεράσετε.

Η τυπογραφία κάνει όλη τη διαφορά

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

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

Είναι σωστή αυτή η γραμματοσειρά για το έργο σας; Σε περίπτωση αμφιβολίας, συμβουλευτείτε έναν σχεδιαστή. Τιτίβισμα

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

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

Η σχεδίαση front-end δεν ανέχεται το όραμα της σήραγγας

Πιθανότατα θα φτιάξετε μικρά μέρη του συνολικού σχεδιασμού.

Το Tunnel Vision είναι ένα κοινό μειονέκτημα για προγραμματιστές front-end. Μην εστιάζετε σε μια λεπτομέρεια, κοιτάξτε πάντα τη μεγάλη εικόνα. Τιτίβισμα

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

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

Σχέσεις και ιεραρχία

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

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

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

χρησιμοποιώντας angularjs με κόμβο js

Να είστε επιλεκτικοί σχετικά με το κενό διάστημα και την ευθυγράμμιση

Αυτή είναι μια εξαιρετική συμβουλή για τη βελτίωση των σχεδίων σας ή / και την καλύτερη εφαρμογή των σχεδίων άλλων: Εάν ο σχεδιασμός φαίνεται να χρησιμοποιεί αποστάσεις 20 μονάδων, 40 μονάδων κ.λπ., βεβαιωθείτε ότι κάθε απόσταση είναι πολλαπλάσιο των 20 μονάδων.

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

Καταβάλλετε κάθε δυνατή προσπάθεια για να καταλάβετε πώς ο σχεδιαστής χρησιμοποίησε κενό διάστημα και ακολουθήστε αυτές τις ιδέες στην κατασκευή του front-end. Τιτίβισμα

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

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

Εάν δεν ξέρετε τι κάνετε, κάντε λιγότερα

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

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

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

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

Ο χρόνος κάνει τους ανόητους όλους μας

Θα σας πω ένα μυστικό για τους σχεδιαστές: το 90 τοις εκατό (ή περισσότερο) αυτού που πραγματικά έβαλαν σε χαρτί ή σε καμβά του Photoshop, δεν είναι τόσο υπέροχο.

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

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

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

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

Δεν περιμένω να το πάρετε ότι Πολύ μακριά, αλλά επισημαίνει πόσο χρήσιμος χρόνος μπορεί να είναι χωρίς «τα μάτια στο σχεδιασμό». Είναι αναπόσπαστο μέρος της διαδικασίας σχεδιασμού και μπορεί να κάνει βελτιώσεις σε άλματα.

Ύλη Pixels

Θα πρέπει να κάνετε ό, τι είναι δυνατόν για να ταιριάζει με τον αρχικό σχεδιασμό στο τελικό σας πρόγραμμα, έως το τελευταίο pixel.

Οι προγραμματιστές front-end θα πρέπει να προσπαθήσουν να ταιριάξουν την αρχική σχεδίαση με το τελευταίο pixel. Τιτίβισμα

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

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

Λάβετε σχόλια

Είναι δύσκολο να κερδίσεις ένα «μάτι για σχεδιασμό». Είναι ακόμη πιο δύσκολο να το κάνετε μόνοι σας. Πρέπει να αναζητήσετε το εισροή άλλων για να δείτε πώς μπορείτε να κάνετε βελτιώσεις.

καλύτερα εργαλεία για οπτικοποίηση δεδομένων

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

Αφήστε τους σχεδιαστές να επικρίνουν το έργο σας. Βάλτε την κριτική τους σε καλή χρήση και μην τις ανταγωνίζετε. Τιτίβισμα

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

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

Δημιουργήστε μια μακροχρόνια, παραγωγική σχέση με τους σχεδιαστές σας. Είναι ζωτικής σημασίας για χρήσιμα σχόλια, ποιότητα και εκτέλεση. Τιτίβισμα

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

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

συμπέρασμα

Συνοψίζοντας, ακολουθεί μια σύντομη λίστα συμβουλών σχεδιασμού για προγραμματιστές front-end:

• Σχεδιασμός σε πρόγραμμα γραφικών. Μην σχεδιάζετε από κώδικα, ούτε καν τα μικρά πράγματα.
• Ταιριάζει με το σχέδιο. Γνωρίστε το αρχικό σχέδιο και μην προσπαθήσετε να το βελτιώσετε, απλώς ταιριάξτε το.
• Η τυπογραφία είναι τεράστια. Ο χρόνος που αφιερώνετε για να βεβαιωθείτε ότι είναι σωστός πρέπει να αντικατοπτρίζει τη σημασία του.
• Αποφύγετε την όραση της σήραγγας. Βεβαιωθείτε ότι οι προσθήκες σας ξεχωρίζουν όσο θα έπρεπε. Δεν είναι πιο σημαντικά μόνο επειδή τα σχεδιάσατε.
• Σχέσεις και ιεραρχία: Κατανοήστε πως λειτουργούν στο σχεδιασμό έτσι ώστε να μπορείτε να τα εφαρμόσετε σωστά.
• Ο κενός χώρος και η ευθυγράμμιση είναι σημαντικές. Κάντε τα ακριβή στο pixel και κάντε τα ομοιόμορφα σε οτιδήποτε προσθέτετε.
• Εάν δεν είστε σίγουροι για τις δεξιότητές σας, κάντε τις προσθήκες σας όσο το δυνατόν λιγότερο στιλ.
• Αφιερώστε χρόνο μεταξύ των αναθεωρήσεων. Επιστρέψτε αργότερα για να δείτε το σχέδιό σας να λειτουργεί με φρέσκα μάτια.
• Η τέλεια εφαρμογή Pixel είναι σημαντική, όπου είναι δυνατόν.
• Να είσαι γενναίος. Αναζητήστε έμπειρους σχεδιαστές για να ασκήσετε κριτική στην εργασία σας.

Όχι κάθε προγραμματιστής front-end θα είναι φανταστικός σχεδιαστής, αλλά τουλάχιστον κάθε dev front-end θα πρέπει να είναι ικανός όσον αφορά το σχεδιασμό.

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

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

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

Σχετίζεται με: Αρχές σχεδιασμού: Εισαγωγή στην Ιεραρχία