Ήταν εδώ και λίγο καιρό Πλακάκια στυλ ήρθαν σε αυτόν τον κόσμο από τη μεγαλοφυία ενός Σαμάνθα Γουόρεν . Για όσους από εσάς θα μπορούσατε να τις εξετάσατε μία φορά και στη συνέχεια να ξεχάσετε τι είναι, εδώ είναι μια γρήγορη εξήγηση:
Τα πλακάκια στυλ είναι ένα είδος προτύπου που σας επιτρέπει να δοκιμάσετε γρήγορα και να κάνετε προεπισκόπηση διάφορα χρώματα, γραμματοσειρές, υφές και άλλες σχετικές με το αισθητικό στυλ επιλογές για τα σχέδια σας προτού δημιουργήσετε ένα mockup υψηλής πιστότητας, αλλά μετά την κατασκευή των πλαισίων. Σκοπός τους είναι να παρουσιάζονται σε πελάτες, ενδιαφερόμενους φορείς ή άλλα ενδιαφερόμενα μέρη αρκετά νωρίς στη διαδικασία σχεδιασμού. Με αυτό τον τρόπο, μπορείτε να πάρετε παρελθόν ανησυχίες σχετικά με την επιλογή γραμματοσειράς, και ερωτήσεις όπως "Μπορούμε να έχουμε ένα" flashier "κόκκινο;"
Με απλά λόγια, πρέπει να τα χρησιμοποιείτε, έστω και μόνο για τον εαυτό σας. Μπορεί να φαίνεται πολύ δύσκολο να προσθέσετε ένα ακόμη βήμα στη διαδικασία σχεδιασμού. αλλά μπορώ να σας πω από προσωπική εμπειρία ότι αξίζει τον κόπο. Σχεδιάζω στο πρόγραμμα περιήγησης: κοιτάζοντας ένα κενό καμβά του Photoshop μπορεί να είναι τρομακτικό. κοιτάζοντας ένα κενό παράθυρο του προγράμματος περιήγησης φαίνεται να χτύπησε αυτό πολύ πιο δύσκολο.
Η αίσθηση της κατεύθυνσης που παρέχεται με τη δημιουργία ενός Πλακάκια Στυλ κάνει πολύ πιο εύκολη τη σχεδίαση του υπόλοιπου χώρου. Δεν είναι τίποτα τόσο περίπλοκο ή συσφιγκτικό ως οδηγός στυλ. Έτσι, δίνει τόσο ένα σημείο για να ξεκινήσει, όσο και την ελευθερία να προσαρμόζετε τα πράγματα καθώς προχωράτε.
Αυτό όμως δημιουργεί ένα μικρό πρόβλημα με τα αρχικά πλακάκια στυλ, ωστόσο. Είναι PSD. Οι σχεδιαστές με βάση το πρόγραμμα περιήγησης όπως εγώ θα θέλουν τα πλακάκια στυλ με βάση το πρόγραμμα περιήγησης. Θέλουμε να δούμε πώς αυτά τα πράγματα πρόκειται να κοιτάξουν στον Ιστό, μετά από όλα, και σε όσο το δυνατόν περισσότερες συσκευές.
Πολλοί άνθρωποι έχουν ήδη προχωρήσει πολύ μπροστά μας σε αυτό το μέτωπο. Υπάρχουν προ-κατασκευασμένα πρότυπα για τους ανθρώπους που θέλουν να ξεκινήσουν να κάνουν στυλ πλακάκια στο πρόγραμμα περιήγησης τους. Ελέγξτε τα έξω:
Οι υπέροχοι άνθρωποι στο Sparkbox δημιούργησαν ένα ευαίσθητο πρότυπο πλακιδίων στυλ βασισμένο σε HTML και Sass. Είναι μία από τις απλούστερες επιλογές, όπως φαίνεται στο demo, αλλά ο κώδικας είναι καλά σχολιασμένος. Πήγαν ακόμη και περιλαμβάνονται προαιρετικά σενάρια για να είναι συμβατά με τον IE 7 και παρακάτω, σε περίπτωση που ο πελάτης σας δεν έχει ενημερώσει το πρόγραμμα περιήγησής του ... για πάντα.
Δημιουργήθηκε από Namanyay Goel , Webstiles έχουν πολλά κοινά με τις άλλες λύσεις αυτής της λίστας. Αυτό που τα κάνει διαφορετικά είναι ότι χτίστηκαν με τον λιγότερο γνωστό (μερικοί θα λένε υποτιμημένος) Pre-επεξεργαστής Stylus CSS.
Εάν εργάζεστε με το πλαίσιο Compass, μαζί με τα πράγματα όπως ο Ruby και ο Sass, δοκιμάστε αυτό on για μέγεθος. Μπορεί να εγκατασταθεί όπως κάθε άλλο Ruby gem, οπότε θα πρέπει να πέσει πολύ τακτοποιημένα στη δουλειά σας. Είναι ενδιαφέρον ότι το αντίγραφο σώματος μπορεί να "παραχθεί" μέσω μιας μεταβλητής Sass και της ιδιότητας content:. Το όλο θέμα σχεδιάστηκε έτσι ώστε να μην χρειαστεί ποτέ να αγγίξετε το HTML.
ο Απάντηση Boilerplate για στυλ πλακάκια φέρνει κάποιες μάλλον σκληρές σκιές, αλλά ανταποκρίνεται και δεν χρησιμοποιεί τίποτα πιο περίπλοκο από το κλασσικό HTML και το CSS. Κανένα πλαίσιο, κανένα προ-επεξεργαστή, τίποτα. Είναι ένα καλό σημείο εκκίνησης αν θέλετε απλώς να το ανοίξετε σε ένα πρόγραμμα επεξεργασίας κειμένου και να πάτε.
Με πολλές προκαθορισμένες επιλογές εκεί έξω, γιατί θα θέλατε να φτιάξετε τα δικά σας HTML / CSS Style Plates από την αρχή; Φαίνεται σαν χάσιμο χρόνου; Λοιπόν, ναι και όχι.
Αν κάνετε έναν απλό ιστότοπο και δεν έχετε ακόμα προγραμματιστεί όλο το περιεχόμενο ή εάν ο πελάτης δεν το έχει στείλει, μία από τις προ-πραγματοποιημένες επιλογές θα κάνει καλά. Ωστόσο, εάν χτίζετε μια σύνθετη εφαρμογή ιστού ή έναν πολύ μεγάλο ιστό με πολλούς διαφορετικούς τύπους περιεχομένου ή στοιχεία UI, ίσως θελήσετε να δημιουργήσετε ένα πρότυπο πλακιδίων στυλ από το μηδέν.
Οι υπάρχοντες απλώς δεν λαμβάνουν υπόψη το τεράστιο εύρος πιθανών περιεχομένων και τύπων στοιχείων εκεί έξω. Έτσι, ίσως θέλετε ένα πλακάκι στυλ που περιλαμβάνει ενσωματωμένο βίντεο, συσκευή αναπαραγωγής ήχου ή χάρτη. Ίσως να θέλετε ένα που παρουσιάζει μια καρτέλα διασύνδεση, ή ένα μενού ακορντεόν.
Εάν χτίζετε έναν ιστότοπο που εξαρτάται από ορισμένα ασυνήθιστα στοιχεία διεπαφής χρήστη, ίσως θέλετε να δημιουργήσετε ένα πρότυπο πλακιδίων στυλ που περιλαμβάνει αυτές τις λειτουργίες.
Δεν χρειάζεται να είναι τόσο δύσκολο. Απλά ορίστε μια απλή διάταξη με δύο-τρεις στήλες και ξεκινήστε να συμπεριλαμβάνετε τα οπτικά στοιχεία που θα είναι πιο σημαντικά για το σχεδιασμό σας, με βάση το περιεχόμενο / λειτουργικότητα. Αυτά θα περιλαμβάνουν:
Γενικά δεν υπάρχει λόγος να καταστεί κωδικός παραγωγής για όλα τα προγράμματα περιήγησης. Διατηρήστε το απλό και κρατήστε το σε HTML5. Εκτός αν χρησιμοποιείτε ένα μη τυποποιημένο στοιχείο UI που πρέπει να κωδικοποιηθεί από την αρχή σε HTML και CSS, μην ασχοληθείτε με το JavaScript.
Το καλύτερο κομμάτι? Μπορείτε να βελτιώσετε και να επαναχρησιμοποιήσετε όλο το σχετικό CSS καθώς αρχίζετε να κωδικοποιείτε το mockup με βάση το πρόγραμμα περιήγησής σας!
Τα πλακάκια στυλ είναι περισσότερο από αξίζει να εξετάσουμε εάν δεν τα χρησιμοποιείτε ήδη.
Δείξτε τους στους πελάτες, κρατήστε τους για τον εαυτό σας, χρησιμοποιήστε τις προκατασκευασμένες επιλογές ή κάντε το δικό σας ... δεν έχει σημασία. Απλά έχοντας αυτή την αίσθηση της στυλιστικής κατεύθυνσης θα κάνει την πλήρωση σε αυτό το κενό παράθυρο του browser πολύ ευκολότερη.
Προτεινόμενη εικόνα, Στούντιο σχεδίασης μέσω Η Άννα Σοφία Λεέν