Web Concept Έννοιες όλοι οι σχεδιαστές ιστοσελίδων πρέπει να καταλάβουν

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

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

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

Συμπεριφορά Κώδικα Frontend

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

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

Πιστεύω ότι κάθε σχεδιαστής πρέπει τουλάχιστον να καταλάβει τρεις θεμελιώδεις γλώσσες ανάπτυξης συνόρων (HTML, CSS και JS) μαζί με τον τρόπο χρήσης τους. Για παράδειγμα, τα περισσότερα μενού για αναπτυσσόμενα προγράμματα βασίζονται στο JavaScript, αλλά υπάρχουν και εναλλακτικές λύσεις μόνο για το CSS.

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

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

CSS γίνεται στυλ της ιστοσελίδας. Είναι ως επί το πλείστον στατικό εκτός από το animation CSS και το CSS δημιουργεί την πλειοψηφία των γραφικών σε μια σελίδα. Τα περισσότερα δυναμικά χαρακτηριστικά δημιουργούνται με JavaScript.

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

Ανταποκρινόμενες Τεχνικές

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

Τα σημεία διακοπής καθορίζονται από το a ορισμένο πλάτος εικονοστοιχείων (και / ή μερικές φορές το ύψος), είτε το ελάχιστο είτε το μέγιστο, στο οποίο η διάταξη προσαρμόζεται για να χωρέσει το μέγεθος της οθόνης. Έτσι, μια διάταξη απόκρισης θα εμφανίζεται διαφορετικά σε μια οθόνη 1080px απ 'ότι σε ένα smartphone 320px.

Για να δείτε πώς λειτουργούν τα σημεία διακοπής σε πραγματικούς ιστότοπους, ανατρέξτε στην τοποθεσία Web Queries Media.

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

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

Σκεφτείτε Modular Με Σχέδια

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

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

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

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

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

Κατανοήστε τις εικόνες Retina και το SVG

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

Θα ήθελα να συστήσω ανεπιφύλακτα αυτήν την ανάρτηση Smashing Magazine αν θέλετε να μάθετε περισσότερα σχετικά με τις ροές εργασίας του σχεδίου του αμφιβληστροειδούς. Retinize Είναι μια δωρεάν συλλογή από δράσεις του Photoshop που μπορούν δημιουργούν αυτόματα εκδόσεις αμφιβληστροειδούς των περιουσιακών στοιχείων σας.

Οι περισσότεροι σχεδιαστές γνωρίζουν ήδη ότι υποστηρίζουν @ 2x εικόνες, αλλά οι νεότερες συσκευές iPhone 6+ έχουν @ 3x ψηφίσματα. Ωστόσο, μερικά έργα δεν ενοχλούν με μεγέθη εικόνας @ 3x, οπότε μιλήστε με τον επικεφαλής του έργου σας προτού οριστικοποιήσετε οποιαδήποτε περιουσιακά στοιχεία.

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

Δεν είναι όλες οι δημιουργικές ομάδες πρόθυμες να πάνε με τα SVG για web design. Υποστηρίζονται ασφαλώς από τους browsers, αλλά σε ορισμένες περιπτώσεις μπορούν επίσης να είναι δύσκολο να εφαρμοστούν. Αυτός είναι ο λόγος για τον οποίο η επικοινωνία είναι ζωτικής σημασίας για μια επιτυχημένη σχέση σχεδιαστή / προγραμματιστή.

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

Κατανοήστε την Προσβασιμότητα

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

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

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

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

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

Κλείνοντας

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

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

Αν αναζητάτε περισσότερο σχετικό περιεχόμενο, ρίξτε μια ματιά σε αυτές τις αναρτήσεις:

• Πώς να επικοινωνήσετε αποτελεσματικά με τους προγραμματιστές (smashingmagazine.com)
• Βοηθήστε τους σχεδιαστές και τους προγραμματιστές να μάθουν να κατανοούν ο ένας τον άλλον (uie.com)
• Η εκμάθηση του κώδικα σας δίνει πλεονεκτήματα ως σχεδιαστής UX (jessicaivins.net)