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

οπτική ιεραρχία στο σχεδιασμό ιστοσελίδων

Οι ενότητες σε έναν ιστότοπο μοιάζουν πολύ με το Legos. Σκεφτείτε τις ενότητες ως κομμάτια Lego που σας επιτρέπουν να δημιουργήσετε τον ιστότοπό σας. Όταν τα συνδέετε με τον σωστό τρόπο, σχηματίζουν ιστοσελίδες. Για να δημιουργήσετε ιστότοπους όπως το Legos, πρέπει να σκεφτείτε τους ιστότοπους ως μια συλλογή ανεξάρτητων ενοτήτων. Αυτό το άρθρο θα σας βοηθήσει να το κάνετε ακριβώς αυτό με την ανάπτυξη και το σχεδιασμό front-end σας.

Κολάζ ενότητας

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

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

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

Ίσως αναρωτιέστε πότε μπαίνουν στο παιχνίδι στατικά comps και παρουσιάζονται τέλεια σχέδια pixel στον πελάτη. Όχι - παραλείπω αυτά σχεδόν εντελώς στη διαδικασία μου. Η παράλειψη αυτού του μέρους της διαδικασίας μου επιτρέπει να μπω στον κώδικα πολύ νωρίς στο έργο και να κωδικοποιήσω πρωτότυπα (θα τα φτάσω σύντομα), ή με άλλα λόγια, το σχεδιασμό στο πρόγραμμα περιήγησης. Εδώ είναι μερικά από τα πλεονεκτήματα του σχεδιασμού στο πρόγραμμα περιήγησης:

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

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

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

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

  
  
  

• Αντί να ξοδεύω ώρες και ώρες να σχεδιάζω διάφορα στατικά κοροϊδεύω για πολλές αναλύσεις, μπορώ να εξοικονομήσω πολύ χρόνο μεταβαίνοντας στον κώδικα νωρίς. Αλλαγή του CSS μου επιτρέπει να αποδεικνύω γρήγορα τις αλλαγές και την απόκριση στον πελάτη σε διάφορες συσκευές - smartphone, tablet κ.λπ.

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

Δημιουργία των ενοτήτων για ανάπτυξη Front-end

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

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

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

.submit-button { background: orange; color: #fff; padding: 10px 20px; font-size: 16px; } A link

Αρκετά απλό, σωστά; Θα εφαρμόζατε την κλάση .submit-button στον HTML σας και θα λύσει το τρέχον πρόβλημά σας. Τώρα, τι θα συνέβαινε όταν πρέπει να δημιουργήσετε ένα νέο κουμπί, ακριβώς όπως αυτό, αλλά με μπλε χρώμα φόντου; Πιθανότατα να αντιγράψετε αυτήν την ακριβή τάξη και, στη συνέχεια, να αλλάξετε το όνομα της τάξης και το χρώμα του φόντου. Γρήγορα και βρώμικα. Τώρα, φανταστείτε ότι πρέπει να χρησιμοποιήσετε το ίδιο κουμπί, αλλά με πορτοκαλί φόντο. Μπορείτε να δείτε πού πηγαίνει αυτό - μπορεί να καταλήξετε με πολλές επαναλήψεις CSS. Σε ένα εξαιρετικά μικρό έργο, αυτό μπορεί να μην είναι πραγματικό ζήτημα, αλλά σε μεγαλύτερα μάλλον θα το κάνει. Πριν το καταλάβετε, το CSS σας φουσκώνει και είναι δύσκολο να διατηρηθεί.

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

• Κώδικας που είναι ακατάστατος, ασυνεπής, δύσκολο να σαρωθεί και να κατανοηθεί.
• Φουσκωμένος κώδικας και αρχεία CSL XXL με πολλές επαναλήψεις.
• Κωδικός που είναι δύσκολο να διατηρηθεί.
• Η έλλειψη διαχωρισμού δομής και δέρματος.

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

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

Το αρθρωτό κουμπί

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

.button { padding: 10px 20px; font-size: 16px; } .button-orange { background: orange; color: #fff; } A link

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

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

Τι γίνεται με τα πιο σύνθετα πράγματα;

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

Για περαιτέρω ανάγνωση σχετικά με την αρθρωτή ανάπτυξη front-end, θα συνιστούσα ανεπιφύλακτα SMACSS , που είναι η αρχιτεκτονική που τείνω να χρησιμοποιώ σε όλα τα έργα μου, μεγάλα ή μικρά.

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

Συμμετοχή του πελάτη

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

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

Χρησιμοποιήστε τις ενότητες που έχετε δημιουργήσει ως δομικά στοιχεία για σελίδες. Για τη σελίδα ευρετηρίου σας, μπορείτε να τοποθετήσετε την ενότητα πλοήγησης στην κορυφή, μια ενότητα ήρωας στη συνέχεια, μερικές από τις ενότητες περιεχομένου στη συνέχεια, και στη συνέχεια το υποσέλιδο σας στο κάτω μέρος. Προτού το γνωρίζετε, έχετε ήδη μια σελίδα για ένα πρωτότυπο HTML. Αλλά τι ακριβώς είναι το πρωτότυπο; Πάντα μου άρεσε ο ορισμός της Leah Buley για ένα πρωτότυπο από το υπέροχο βιβλίο της The Εμπειρία χρήστη Ομάδα ενός:

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

είναι .net ανοιχτού κώδικα

Χτίζοντας ένα πρωτότυπο, αυτό ακριβώς θα έχετε στην αρχική φάση του έργου - έναν ημι-λειτουργικό ιστότοπο. Όταν τα στατικά mockups και το InVision υπολείπονται, τα πρωτότυπα HTML υπερέχουν. Το πρωτότυπο χρησιμεύει ως τέλειο ανταποκρίνεται παραδοτέο για τους πελάτες σας. Και όταν ο πελάτης είναι εντάξει με την εμφάνιση και την αίσθηση του πρωτοτύπου σας, το μόνο που χρειάζεται να κάνετε είναι να το γυαλίσετε μέχρι να λειτουργήσει με τον τρόπο που χρειάζεται. Δημιουργία, δοκιμή, επανάληψη.

Επαναχρησιμοποιήστε τα δομικά στοιχεία

Οι ενότητες και τα πρωτότυπα θα σας επιτρέψουν να επαναχρησιμοποιήσετε τον κωδικό για το τρέχον έργο, αλλά και για μελλοντικά έργα. Η λήψη μιας ενότητας από το τελευταίο έργο σας μπορεί να σας εξοικονομήσει πολύ χρόνο - οι ενότητες που χρειάζεστε σε κάθε έργο είναι συχνά παρόμοιες. Έχω μια μεγάλη βιβλιοθήκη ενοτήτων που χρησιμοποιώ συχνά: καρτέλες, μενού πλοήγησης, κουμπιά, ψωμιά, φόρμες, πίνακες, σελιδοποιήσεις, λίστες κ.λπ. Ενώ ο κώδικας αυτών των ενοτήτων δεν είναι ακριβώς ο ίδιος σε όλα τα έργα, καλά κομμάτια αυτού μπορεί να ξαναχρησιμοποιηθεί, εξοικονομώντας πολύ χρόνο ανάπτυξης. Η συμβουλή μου για εσάς είναι να δημιουργήσετε επαναχρησιμοποιήσιμες μονάδες και για εσάς. Ολοκλήρωση αγοράς BASSCSS , ΚΑΘΑΡΟΣ και Ξαναγεμίζει για να εμπνευστείτε.

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

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