Μαζική συλλογή εργαλείων σχεδιαστή
Οι σχεδιαστές ιστοσελίδων έχουν στη διάθεσή τους πληθώρα εργαλείων, για να κάνουν τα πάντα από την οργάνωση των σκέψεών τους για ένα συγκεκριμένο σχέδιο για την αποσφαλμάτωση του τελικού σχεδίου.
Αλλά με τόσα πολλά εργαλεία εκεί έξω, πώς μπορείτε ποτέ να καθορίσετε ποιες είναι πραγματικά χρήσιμες και ποιες απλά πρόκειται να χάσετε το χρόνο σας;
Έχουμε καταρτίσει μια τεράστια λίστα με μερικά από τα καλύτερα και πιο χρήσιμα εργαλεία εκεί έξω για τους σχεδιαστές ιστοσελίδων .
Ορισμένοι από τους σχεδιαστές έχουν ήδη χρησιμοποιήσει ήδη (όπως το Dreamweaver ή το Coda, το Photoshop ή το GIMP του Panic, και παρόμοια κοινά προγράμματα λογισμικού που σχεδόν όλα τα σχεδιαστή έχουν ήδη στη δική τους εργαλειοθήκη).
Αυτά είναι εργαλεία που θα σας εξοικονομήσουν χρόνο, θα σας κάνουν πιο αποτελεσματικό σχεδιαστή, θα απλοποιήσετε ή θα επιταχύνετε τη διαδικασία σχεδιασμού σας, ή θα διευκολύνετε τη ζωή σας.
Σύνταξη εργαλείων εκτός σύνδεσης
Τα περισσότερα ρομπότ των χρήσιμων εργαλείων σχεδίασης ιστοσελίδων επικεντρώνονται αποκλειστικά σε ηλεκτρονικά εργαλεία.
Αλλά υπάρχουν μερικά πολύ χρήσιμα εργαλεία που μπορείτε να χρησιμοποιήσετε για να ανοίξετε τις επιλογές σας όταν πρόκειται για το σχεδιασμό. Αυτά τα πράγματα μπορούν να διευκολύνουν ορισμένα καθήκοντα, συμπεριλαμβανομένης της συνεργασίας με αναποφάσιστους πελάτες.
Ταμπλέτες γραφικών
Τα δισκία γραφικών (που μερικές φορές αναφέρονται και ως δισκία σχεδίασης, ταμπλέτες γραφικών ή ψηφιοποιημένα δισκία) είναι ένα απίστευτα χρήσιμο εργαλείο στο οπλοστάσιο του σχεδιαστή ιστού. Ενώ οι περισσότεροι σχεδιαστές μπορούν να σχεδιάσουν αρκετά επιδέξια με ένα ποντίκι, ένα δισκίο το καθιστά πολύ πιο εύκολο και γρηγορότερο.
Τα περισσότερα δισκία αποτελούνται από δύο βασικά μέρη: το ίδιο το δισκίο και το στυλό (ή τη γραφίδα). Πολλοί έρχονται επίσης με ένα puk (το οποίο λειτουργεί όμοια με ένα ποντίκι, αλλά με το ίδιο το tablet αντί με ένα ποντίκι ή το γραφείο σας). Το κύριο βάρος για το δισκίο είναι το μέγεθος, ενώ το κύριο βάρος της πένας είναι η ευαισθησία στην πίεση.
Τα ίδια τα δισκία διατίθενται σε μεγέθη που κυμαίνονται από περίπου 4 "χ 5" έως 19 "χ 13". Φυσικά, όσο μεγαλύτερη είναι η ταμπλέτα, τόσο πιο ακριβό θα είναι. Ως επί το πλείστον, οι σχεδιαστές ιστοσελίδων μπορούν να ξεφύγουν με δισκία στο μικρότερο άκρο του φάσματος, εκτός εάν προγραμματίζουν να κάνουν πολλή εργασία απεικόνισης (και ακόμη και τότε είναι τελείως δυνατό να αποκτήσετε ποιοτικά αποτελέσματα από ένα δισκίο μεσαίου μεγέθους).
Και τα μικρότερα δισκία είναι πιο φορητά, καθιστώντας τα βολικά για τους σχεδιαστές που δεν θέλουν πάντα να συνδεθούν με το γραφείο τους.
Τα στυλό είναι ευαίσθητα στην πίεση για να δώσουν μια πιο ρεαλιστική εμπειρία . Οι κοινές ευαισθησίες κυμαίνονται από 256 επίπεδα πίεσης έως και 2.048 επίπεδα. Όσο υψηλότερο είναι το επίπεδο ευαισθησίας, τόσο περισσότερο θα νιώσετε σαν να χρησιμοποιείτε πραγματικά ένα στυλό και χαρτί.
Δημοφιλή δισκία γραφικών
Wacom είναι ίσως ο πιο δημοφιλής κατασκευαστής tablet εκεί έξω. Έχουν τέσσερις διαφορετικές σειρές προϊόντων: Μπαμπού (που περιλαμβάνει τα προϊόντα τους Bamboo Craft και Bamboo Fun), που απευθύνονται σε καταναλωτές και χομπίστες. Graphire, το tablet Bluetooth τους. Intuos, η γραμμή μεσαίας εμβέλειας για δημιουργικούς επαγγελματίες. και η Cintiq, η γραμμή υψηλής τεχνολογίας που ενσωματώνει μια οθόνη στην ταμπλέτα για μια εμπειρία "στυλό σε οθόνη" (η οποία διαθέτει ακόμη 21 "οθόνη).
Aiptek κάνει μια σειρά από χαμηλού κόστους δισκία που ξεκινούν από μόλις US $ 50. Προσφέρουν ένα δισκίο USB 12,1 "για λιγότερο από US $ 130 (σε σύγκριση με US $ 469 για ένα tablet Wacom συγκρίσιμου μεγέθους). Η πιο ενδιαφέρουσα προσφορά του Aiptek είναι η My Note Premium (US $ 170) που σας επιτρέπει να σχεδιάζετε ένα κομμάτι χαρτί πάνω από το δισκίο με μια πραγματική πένα και να καταγράφει ό, τι κάνετε. Υπάρχει αρκετή μνήμη για έως 100 γραπτές σελίδες και έρχεται με υποδοχή κάρτας SD για επέκταση της χωρητικότητάς της. Και αν θέλετε να το χρησιμοποιήσετε μόνο για τη λήψη σημειώσεων σε μια συνάντηση, μπορεί να εκκενωθεί από 4 μπαταρίες ΑΑΑ, πράγμα που σημαίνει ότι δεν θα χρειαστεί να φέρετε μαζί σας το laptop σας.
UC-Λογική είναι ο άλλος μεγάλος κατασκευαστής γραφικών tablet. Τα προϊόντα τους πέφτουν στο μεσαίο εύρος τιμών των δισκίων, ενώ το δισκίο 9 "x12" (το PF1209-Pro) έρχεται σε περίπου 250 δολάρια ΗΠΑ. Έχουν διαθέσιμα δισκία που ξεκινούν από μόνο 40 δολάρια ΗΠΑ.
Πίνακες διάθεσης
Οι επιτροπές διάθεσης (που ονομάζονται επίσης πίνακες εμπνευσμάτων) είναι ένα εξαιρετικό εργαλείο για τους σχεδιαστές που δουλεύουν με πελάτες που μπορεί να μην έχουν σαφή ιδέα για το τι θέλουν.
Οι επιτροπές διάθεσης συχνά λαμβάνουν τη μορφή κολάζ που περιλαμβάνει στοιχεία σχεδιασμού για το έργο. Παραδείγματα στοιχείων που περιλαμβάνονται μπορεί να είναι τυπογραφικά δείγματα, χρωματικά σχήματα, ειδικά γραφικά παραδείγματα ή γενικά στοιχεία "διάθεσης" που αντικατοπτρίζουν το όραμα του σχεδιαστή για την εντύπωση που πρέπει να δώσει ο ιστότοπος στους επισκέπτες.
Οι πίνακες διάθεσης χρησιμοποιούνται συχνά στον τομέα της εσωτερικής διακόσμησης για να παρουσιάσουν στους πελάτες τους ιδέες για την ανακαίνιση ενός δωματίου ή ενός ολόκληρου σπιτιού. Χρησιμοποιούνται επίσης στη βιομηχανία της μόδας για να αποτελέσουν έμπνευση και κατεύθυνση για μια γραμμή ή μια εποχή. Αλλά είναι εξίσου πολύτιμες για τους σχεδιαστές γραφικών και web.
Ανάλογα με τον τύπο του πελάτη με τον οποίο εργάζεστε, μπορεί να δημιουργήσετε ένα χαλαρό κολάζ με δείγματα που αλληλεπικαλύπτονται με οργανικό τρόπο . Εάν ο πελάτης σας είναι σε δημιουργικό πεδίο ή είναι εξοικειωμένος με τη δημιουργική διαδικασία, αυτό το είδος του πίνακα διάθεσης μπορεί να λειτουργήσει αρκετά καλά.
Εάν ο πελάτης σας, από την άλλη πλευρά, χρησιμοποιείται σε ένα πιο εταιρικό ή τυπικό περιβάλλον, είναι πιθανότατα πιο κατάλληλο να δημιουργηθεί ένα πιο οργανωμένο συμβούλιο διάθεσης.
Χρησιμοποιήστε τις κεφαλίδες για να ξεχωρίσετε το χρωματικό σχέδιο, τα συγκεκριμένα στοιχεία σχεδίασης, την τυπογραφία και άλλα μέρη του πίνακα διάθεσής σας, ώστε να δοθεί ολόκληρη η δομή.
Αν έχετε πολλές ιδέες για κατευθύνσεις στις οποίες μπορεί να πάει ένα έργο, δημιουργώντας μερικές διαφορετικές επιτροπές διάθεσης μπορεί να είναι ένας πολύ καλός τρόπος για να λάβετε ανατροφοδότηση πελατών και να βελτιώσετε περαιτέρω τις δικές σας ιδέες.
Η δημιουργία δύο ή τριών διαφορετικών παραδειγμάτων για την εμφάνιση ενός πελάτη μπορεί να είναι πολύτιμη για την περαιτέρω κατεύθυνση από τον πελάτη σας χωρίς να ξοδεύετε ώρες ή μέρες σε μια πραγματική μακέτα ιστοτόπων, απλώς να σας πω ότι δεν είναι τίποτα σαν αυτό που ψάχνουν.
Και αυτό είναι πραγματικά το κύριο πλεονέκτημα της χρήσης πινακίδες διάθεσης στη διαδικασία σχεδιασμού σας. Μια πλατφόρμα διάθεσης απαιτεί γενικά πολύ λιγότερο χρόνο για να δημιουργήσει από μια μακέτα ιστοτόπου .
Χρησιμοποιώντας πίνακες διάθεσης για να λάβετε περαιτέρω ανατροφοδότηση από έναν αναποφάσιστο ή ανασφαλές πελάτη πριν από τη δέσμευση των ωρών σε ένα σχέδιο που θα απορριφθεί μόνο καθιστά τον καθένα ευτυχισμένο.
Πόροι για τη δημιουργία των δικών σας Moodboards
Δημοσιεύσαμε ένα άρθρο σχετικά με Γιατί οι πίνακες ψυχαγωγίας έχουν σημασία στο τέλος του περασμένου έτους. Το άρθρο καλύπτει τα βασικά στοιχεία της δημιουργίας πινακίδων διάθεσης και γιατί θα θέλατε να τα χρησιμοποιήσετε. Είναι ένα καλό σημείο εκκίνησης.
Από το Couch έχει ένα βίντεο φροντιστήριο που ονομάζεται Δημιουργία μιας αποτελεσματικής επιτροπής διάθεσης . Έχει περίπου επτά λεπτά και καλύπτει τα βασικά στοιχεία της δημιουργίας ενός πίνακα ψηφιακής διάθεσης για έργα.
Το Flickr έχει ένα Πίνακες Έμπνευσης πισίνα που συλλέγει διάθεση και εικόνες με έμπνευση από διαφορετικούς κλάδους. Είναι ένα καλό μέρος για να βρείτε κάποια έμπνευση ή απλά να δείτε παραδείγματα για το πώς πλησιάζουν οι άλλοι τους πίνακες διάθεσής τους.
Σύνταξη ηλεκτρονικών εργαλείων
Τα εργαλεία σχεδιασμού στο διαδίκτυο είναι μια δεκάρα δώδεκα. Η ταξινόμηση μέσω αυτών για να βρείτε εκείνες που πραγματικά ξεχωρίζουν μπορεί να φαίνεται να χρειάζεται περισσότερο χρόνο από ό, τι θα μπορούσατε ποτέ να περιμένετε να αποθηκεύσετε με τη χρήση τους.
Αλλά παρακάτω βρήκαμε τα καλύτερα εργαλεία για την τυπογραφία, το CSS, το AJAX και το Javascript, την επιλογή χρώματος και εργαλεία για να διευκολύνετε τη δημιουργία μεμονωμένων στοιχείων σελίδας.
Και πάλι, αυτά είναι μερικά από τα καλύτερα διαθέσιμα εργαλεία για αυτό που κάνουν, οπότε δεν θα χρειαστεί να χάνετε μια δέσμη χρόνου δοκιμής δεκάδες διαφορετικά εργαλεία.
Εργαλεία τυπογραφίας
Υπάρχουν πολλά ηλεκτρονικά εργαλεία για πειραματισμό με την τυπογραφία στα σχέδια του ιστότοπού σας. Ορισμένοι σας επιτρέπουν να συγκρίνετε διαφορετικές γραμματοσειρές δίπλα-δίπλα. Μερικοί μόνο σας επιτρέπουν να δοκιμάσετε ένα στυλ κάθε φορά. Και άλλοι σας δείχνουν διαφορετικές συνιστώμενες στοίβα γραμματοσειρών.
Άλλα χρήσιμα εργαλεία τυπογραφίας ιστού περιλαμβάνουν εφαρμογές για μετατροπή μεγεθών εικονοστοιχείων σε μονάδες em και μια ποικιλία Lorem Ipsum και άλλων εικονικών γεννητριών κειμένου. Σε όλα, υπάρχουν τυπογραφικά εργαλεία εκεί έξω για σχεδόν κάθε πιθανή ανάγκη που ένας σχεδιαστής Ιστού μπορεί να έχει.
Τύπος
Το Typetester σάς επιτρέπει να συγκρίνετε έως και τρεις γραμματοσειρές δίπλα-δίπλα .
Μπορείτε να επιλέξετε οποιαδήποτε γραμματοσειρά από τον υπολογιστή σας ή να χρησιμοποιήσετε τις γραμματοσειρές από το μενού τους για κοινές γραμματοσειρές συστήματος και γραμματοσειρές ασφαλείς στο web. Σας επιτρέπει επίσης να αλλάξετε το χρώμα, την κορυφή, την παρακολούθηση, το μέγεθος και άλλες επιλογές στυλ.
Είναι ένα εξαιρετικό εργαλείο όταν προσπαθείτε να αποφασίσετε ποιες γραμματοσειρές να χρησιμοποιήσετε για διαφορετικά στοιχεία ή ακόμα και για την κατάρτιση των δικών σας γραμματοσειρών (αφού σας επιτρέπει να συγκρίνετε πολλές γραμματοσειρές δίπλα-δίπλα).
CSS Type Set
Το Set Type CSS σας επιτρέπει να επικολλήσετε οποιοδήποτε κείμενο θέλετε να τροποποιήσετε σε ένα πλαίσιο, να προσαρμόσετε ρυθμιστικά και να επιλέξετε άλλες επιλογές μορφοποίησης και, στη συνέχεια, να αντιγράψετε το CSS που δημιουργείται.
Είναι ένας γρήγορος και εύκολος τρόπος να μορφοποιήσετε οποιοδήποτε κείμενο χρειάζεστε, από τις παραγράφους στις ετικέτες κεφαλής.
Οι επιλογές περιλαμβάνουν το χρώμα του κειμένου, τον οδηγό, την παρακολούθηση, την αλλαγή γραμμής βάσης, διακοσμήσεις κειμένου, ευθυγράμμιση και πολλά άλλα.
Καλύτερες στήλες γραμματοσειρών CSS
Αν και δεν είναι ένα παραδοσιακό εργαλείο, per se, αυτό το άρθρο προσφέρει μια σειρά από εναλλακτικές λύσεις στις τυπικές στοίβα γραμματοσειρών που χρησιμοποιούνται γενικά στο CSS.
Εκτός από την προσφορά οδηγιών για τη δημιουργία των δικών σας γραμματοσειρών, αυτό το άρθρο παρέχει επίσης μια μεγάλη ποικιλία δειγμάτων που μπορείτε να χρησιμοποιήσετε . Ένας εξαιρετικός πόρος όταν αισθάνεστε λίγο ασταθής πάνω από τις επιλογές τυπογραφίας σας.
HTML-Ipsum
Οι περισσότερες τυπικές γεννήτριες Lorem Ipsum σε απευθείας σύνδεση σας δίνουν ένα μπλοκ κειμένου και τίποτα περισσότερο. Και αυτό είναι υπέροχο αν προσπαθείτε απλώς να γεμίσετε λίγο χώρο.
Ωστόσο, το HTML-Ipsum σας δίνει κείμενο που έχει ήδη επισημανθεί με βασικές ετικέτες HTML (παράγραφο, κεφάλαιο, μη ταξινομημένες λίστες κλπ.), Ώστε να μπορείτε να δείτε πώς αλληλεπιδρούν όλα τα διαφορετικά στοιχεία. Είναι ένας τεράστιος χρόνος.
PXtoEm.com
Το PXtoEM.com κάνει ακριβώς αυτό που λέει: μετατρέπει τις γραμματοσειρές μεγέθους pixel σε γραμματοσειρές μεγέθους em .
Οι επιλογές που σας δίνει είναι αυτό που το καθιστά ένα πραγματικά εντυπωσιακό και ευέλικτο εργαλείο.
Μπορείτε να επιλέξετε το μέγεθος γραμματοσειράς του βασικού σώματος και να κάνετε μετατροπές με βάση το προεπιλεγμένο μέγεθος γραμματοσειράς του προγράμματος περιήγησης (εάν, για παράδειγμα, ρυθμίσετε το ποσοστό γραμματοσειράς βάσης στο 62,5%, έτσι ώστε το μέγεθος των 10 pixel να είναι ίσο με 1em, μπορείτε να το επιλέξετε ως το προεπιλεγμένο μέγεθος).
Typechart
Το Typechart σάς επιτρέπει να περιηγείστε σε μια ποικιλία γραμματοσειρών ασφαλών από το διαδίκτυο και να δείτε πώς θα φαίνονται σε συστήματα Windows και Mac .
Μπορείτε να βρείτε γραμματοσειρές με βάση το μέγεθος, είτε είναι serif είτε sans-serif, ή έμφαση. Περιλαμβάνει μόνο τις γραμματοσειρές που είναι ασφαλείς στον ιστό, επομένως οι προσφερόμενες επιλογές είναι περιορισμένες. Αλλά για βασική τυπογραφία, είναι ένα εξαιρετικό εργαλείο που μπορεί να προσφέρει πολλά έμπνευση.
Και μπορείτε να αντιγράψετε και να επικολλήσετε το CSS για κάθε στυλ χωρίς να αφήσετε τη σελίδα.
Ανατροπή Τυπική
Το Flipping Typical σάς επιτρέπει να βλέπετε τις κοινές γραμματοσειρές που έχετε στον υπολογιστή σας σε μορφή πλέγματος, για να διευκολύνετε την επιλογή της σωστής γραμματοσειράς για το τρέχον έργο σας.
Αυτό είναι ένα εξαιρετικό εργαλείο όταν δεν ενδιαφέρεστε απλώς να χρησιμοποιήσετε τις τυπικές γραμματοσειρές ασφαλείς στο web και θέλετε να δείτε περισσότερες επιλογές.
Είναι ιδιαίτερα χρήσιμο αν δεν θέλετε να περάσετε μερικές εκατοντάδες γραμματοσειρές εγκατεστημένες στον υπολογιστή σας και απλά θέλετε να δείτε τις πιο δημοφιλείς.
Εργαλεία CSS
Το CSS είναι σχεδόν εξίσου σημαντικό στο web design ως HTML. Και υπάρχουν εκατοντάδες εργαλεία εκεί έξω για να κάνουν το CSS καθαρότερο, πιο οικονομικό, πιο αποτελεσματικό και γενικότερα καλύτερο που σας εξοικονομούν χρόνο και προσπάθεια για να τελειοποιήσετε με το χέρι τα φύλλα στυλ σας.
Η συμπίεση των φύλλων στυλ σας, τα οποία μπορούν να σας βοηθήσουν να επιταχύνετε το χρόνο φόρτωσης των ιστότοπων σας, απλοποιείται χρησιμοποιώντας αυτόματο ηλεκτρονικό εργαλείο. Υπάρχουν διαθέσιμα εργαλεία για την εξάλειψη διπλών δηλώσεων.
Εξαπατήστε τα φύλλα κρατήστε τα βασικά στοιχεία του CSS στα χέρια σας όταν ο καφές δεν έχει κλωτσήσει το πρωί και έχετε έναν σκληρό χρόνο να θυμάστε σε ποια σειρά θα έπρεπε να εμφανίζεται η σημείωση στίγματος.
Ενώ τα περισσότερα από αυτά τα εργαλεία κάνουν μεγάλη δουλειά στον καθαρισμό του CSS, βεβαιωθείτε ότι διατηρείτε πάντα ένα αντίγραφο ασφαλείας του πρωτοτύπου σας και δοκιμάστε το παραγόμενο τελικό προϊόν. Μερικές φορές ένα καθαριστικό ή συμπιεστής θα αφαιρέσει κάτι που ήταν απαραίτητο μετά από όλα, σπάζοντας τον ιστότοπό σας.
CSS SuperScrub
Το CSS SuperScrub έχει ως στόχο να μειώσει σημαντικά την πολυπλοκότητα και το μέγεθος των φύλλων στυλ σας .
Εξασφαλίζει τις περιττές κλήσεις, απαλείφει το περιττό περιεχόμενο και συγκεντρώνει τα εναπομείναντα στοιχεία για να διευκολύνει αργότερα την επεξεργασία.
Υπάρχουν μερικές επιλογές, μεταξύ των οποίων και μία για να αφαιρέσετε όλο το κενό στο φύλλο στυλ ή για να εισαγάγετε μια νέα γραμμή πριν ανοίξετε τα τιράντες.
Κωδικός Βελτιωτικό
Το Code Beautifier βελτιστοποιεί και καθαρίζει τα αρχεία CSS .
Προσφέρει μεγάλο αριθμό επιλογών για τη μορφοποίηση του κειμένου σας, συμπεριλαμβανομένης της συμπίεσης χρωμάτων, της ταξινόμησης των ιδιοτήτων σας, της μετατροπής όλων των επιλογέων σε πεζά, μετατροπής των ιδιοτήτων σε κεφαλαία ή πεζά και επιλογή του επιπέδου συμπίεσης που θέλετε να χρησιμοποιήσετε.
Μπορείτε είτε να αντιγράψετε και να επικολλήσετε το CSS στην εφαρμογή είτε να προσθέσετε μια διεύθυνση URL για το αρχείο CSS.
CSS Drive
Το CSS Drive είναι βασικός συμπιεστής CSS .
Μπορείτε να ρυθμίσετε τον τρόπο συμπίεσης που θέλετε να είναι το CSS (ελαφρύ, κανονικό ή σούπερ συμπαγές) και πώς θέλετε να χειρίζεται τα σχόλια (ανεξάρτητα από το αν πρέπει να τα αφαιρέσετε).
Υπάρχει επίσης μια προηγμένη λειτουργία που σας προσφέρει πολύ περισσότερες επιλογές, συμπεριλαμβανομένης της αφαίρεσης διαστημάτων γύρω από ορισμένους χαρακτήρες, την κατάργηση καρτελών, την κατάργηση νέων γραμμών και άλλων.
Έλεγχος πλεονασμού CSS
Μερικές φορές κατά τη διαδικασία σχεδιασμού ενός ιστότοπου, μπορείτε να ρυθμίσετε τους επιλογείς CSS που δεν καταλήγουν να φτάσουν στην τελική σήμανση.
Αυτοί οι επιλογείς δεν κάνουν τίποτα περισσότερο από να κάνουν τα φύλλα στυλ πιο ογκώδη και πιο δύσκολο να τα επεξεργαστείτε αργότερα.
Το CSS Redundancy Checker περνάει από το φύλλο στυλ σας και από τις σελίδες σας HTML για να δείτε ποιοι επιλογείς δεν χρησιμοποιούνται και μετά τις καταργεί .
Είναι ένα εξαιρετικό εργαλείο για να χρησιμοποιήσετε αν νομίζετε ότι μπορεί να έχετε περιττά επιλογείς στα φύλλα στυλ σας.
Δείκτης ιδιοτήτων CSS
Ο κατάλογος ιδιοτήτων CSS παραθέτει κάθε ιδιότητα CSS αλφαβητικά .
Κάνοντας κλικ σε οποιαδήποτε από τις συμπεριλαμβανόμενες ιδιότητες, θα έχετε έναν ορισμό και πληροφορίες σχετικά με την προεπιλεγμένη τιμή, τις επιτρεπόμενες τιμές και αν κληρονομεί από μια μητρική ιδιότητα.
Οδηγός στέγασης CSS
Η χρήση ιδιότητων CSS στενογραφίας καθιστά τα αρχεία σας CSS μικρότερα απ 'ό, τι χρησιμοποιώντας ιδιότητες longhand .
Αλλά θυμηθείτε ποια σειρά διατίθενται όλα τα διαφορετικά στοιχεία για όλες τις διαφορετικές ιδιότητες μπορεί να είναι ένας πονοκέφαλος, ειδικά για εκείνους που ίσως να μην χρησιμοποιείτε σε κάθε σχεδιασμό που κάνετε.
Περιλαμβάνει επίσης πληροφορίες σχετικά με τις προεπιλεγμένες τιμές ιδιότητας, οπότε αν επιλέξετε να εξαιρέσετε μια ιδιότητα, θα ξέρετε τι θα υποθέσει ότι θα έχει την τιμή.
Εργαλεία χρώματος
Η επιλογή των σωστών χρωμάτων για τα σχέδια του ιστότοπού σας μπορεί να είναι μια από τις πιο σημαντικές αποφάσεις που λαμβάνετε σε ολόκληρη τη διαδικασία σχεδιασμού.
Μερικές φορές μπαίνουμε σε ένα σχέδιο με ένα προκαθορισμένο συνδυασμό χρωμάτων (όπως όταν ένας πελάτης έχει ήδη καθιερώσει χρώματα μάρκας) ή αμέσως γνωρίζει ποια χρώματα θέλουμε να χρησιμοποιήσουμε. Άλλες φορές μπορεί να είμαστε ελεύθεροι να δημιουργήσουμε τη δική μας παλέτα για το σχεδιασμό.
Εάν δημιουργείτε ένα σχέδιο χρώματος από την αρχή, οι γεννήτριες χρωμάτων παλέτας και οι γκαλερί μπορούν να είναι τεράστια βοήθεια.
Εάν διαθέτετε ήδη ένα χρωματικό σχήμα, υπάρχουν και άλλα στοιχεία που πρέπει να ληφθούν υπόψη, όπως η προσβασιμότητα και τα χρώματα που πρέπει να χρησιμοποιηθούν σε ποια μέρη του ιστότοπου.
Υπάρχουν όμως και εργαλεία για να βοηθήσετε με αυτές τις αποφάσεις. Παρακάτω είναι μερικά από τα καλύτερα εργαλεία που διατίθενται για τη διαχείριση χρωμάτων.
Φίλτρο σελίδας ιστοσελίδας χρώματος
Λαμβάνοντας υπόψη ότι κάπου μεταξύ 7 και 10% του ανδρικού πληθυσμού έχει κάποιο βαθμό χρωματικής τύφλωσης (σύμφωνα με το Wikipedia ), διασφαλίζοντας ότι οι ιστότοποί σας εξακολουθούν να είναι προσβάσιμοι σε αυτόν τον πληθυσμό δεν είναι κακή ιδέα.
Αυτό το εργαλείο σας δείχνει πώς τα σχέδιά σας θα εμφανιστούν σε άτομα με μια σειρά από διαφορετικές διαταραχές colorblindness. Μπορείτε να δείτε τα αποτελέσματα για ολόκληρο τον ιστότοπό σας ή να εξαιρέσετε εικόνες από το αποτέλεσμα.
Παρέχουν επίσης έναν σύνδεσμο σε ένα εργαλείο επιλογής χρώματος που είναι ασφαλές για έγχρωμα χρώματα.
Βρείτε τα κατάλληλα χρώματα για τον ιστότοπό σας
Αυτό το εργαλείο παλέτας χρωμάτων βρίσκει χρώματα που συντονίζονται με οποιοδήποτε χρώμα επιλέγετε .
Μπορείτε είτε να επιλέξετε ένα χρώμα από τις προκαθορισμένες επιλογές είτε να εισάγετε οποιαδήποτε τιμή χρώματος hex ή RGB για να πάρετε συντονισμένες παλέτες με βάση συμπληρωματικά, διαχωρισμένα συμπληρωματικά, τριάδα, tetrade, αναλογικά ή μονότονα σχέδια χρωμάτων.
Τα χρώματα που παρέχονται είναι όμοια σε ένταση, όμως, πράγμα που σημαίνει ότι αυτό είναι πραγματικά μόνο ένα σημείο εκκίνησης για τη δημιουργία παλέτες χρωμάτων για τα σχέδιά σας.
Χρωματική παλέτα γεννήτρια
Οι φωτογραφίες είναι εξαιρετικά μέρη για να αναζητήσετε έμπνευση σχεδιασμού. Αυτό το εργαλείο μπορεί να δημιουργήσει μια παλέτα χρωμάτων από οποιαδήποτε εικόνα επιλέγετε (απλά εισάγετε τη διεύθυνση URL της εικόνας).
Παρέχει τόσο θαμπό και ζωντανά σχέδια χρωμάτων με βάση την εικόνα που παρέχετε.
Η δυνατότητα χρήσης οποιασδήποτε εικόνας στο διαδίκτυο καθιστά πραγματικά αυτό το εργαλείο πολύτιμο, καθώς εξοικονομεί χρόνο για να κατεβάσετε μια εικόνα και στη συνέχεια να φορτώσετε ξανά σε έναν ιστότοπο σαν αυτόν για να δημιουργήσετε ένα συνδυασμό χρωμάτων (ή να κάνετε λήψη και στη συνέχεια να ανοίξετε σε ένα πρόγραμμα γραφικών για να δημιουργήσετε χειροκίνητα μια παλέτα χρωμάτων).
Kuler
Η συλλογή χρωμάτων παλέτας Kuler της Adobe είναι μια από τις καλύτερες γκαλερί παλετών χρωμάτων εκεί έξω.
Μπορείτε να περιηγηθείτε ή να αναζητήσετε περισσότερες από 10.000 παλέτες χρωμάτων που υποβάλλονται από τους χρήστες του Kuler και, στη συνέχεια, να κάνετε λήψη ή να αποθηκεύσετε τα αγαπημένα σας για μεταγενέστερη αναφορά.
Το Kuler περιλαμβάνει επίσης ένα πραγματικά ισχυρό εργαλείο δημιουργίας παλέτας που σας επιτρέπει να επιλέξετε χρώματα με ρυθμιστικά ή με βάση τιμές HSV, RGB, CMYK, LAB ή hex χρώμα.
Ο καθορισμός οποιουδήποτε χρώματος ως βασικού χρώματος θα αλλάξει στη συνέχεια τα χρώματα γύρω από το συμπληρωματικό.
COLORlovers
Το COLOURlovers είναι μια άλλη μεγάλη συλλογή χρωμάτων .
Μπορείτε να αναζητήσετε περισσότερα από 800.000 σχέδια χρωμάτων (με βάση 20 σχήματα ανά σελίδα και 43.200+ σελίδες σχεδίων). Εκτός από τις παλέτες, μπορείτε επίσης να αναζητήσετε μεμονωμένα χρώματα και σχέδια με βάση παλέτες.
Ένα από τα πιο χρήσιμα χαρακτηριστικά του COLOURlovers, όμως, είναι το εργαλείο δημιουργίας προτύπων, το οποίο δημιουργεί τα δικά σας σχέδια βασισμένα είτε σε ένα προκαθορισμένο συνδυασμό χρωμάτων είτε σε ένα σχέδιο που δημιουργείτε εν πτήσει.
Απλά βεβαιωθείτε ότι έχετε επικοινωνήσει με τον κάτοχο πνευματικών δικαιωμάτων του σχεδίου εάν θέλετε να χρησιμοποιήσετε ένα για εμπορικές εργασίες.
100 τυχαία χρώματα 2.0
Αν πραγματικά δεν έχετε ιδέα από πού να ξεκινήσετε με το σχέδιο χρωμάτων για ένα από τα σχέδιά σας, το 100 Random Colors 2.0 ίσως είναι το σωστό εργαλείο.
Κάνει ακριβώς ό, τι λέει το όνομα: σας παρουσιάζει με 100 τυχαία χρώματα, συμπεριλαμβανομένων των hex τιμές τους .
Και αν δεν βρείτε τίποτα στα πρώτα 100, μπορείτε απλά να χτυπήσετε την ανανέωση και να σας δοθεί ένα εντελώς νέο σετ!
Εργαλεία μεμονωμένων στοιχείων
Υπάρχουν πολλοί γεννήτριες εκεί έξω που κάνουν γρήγορο και εύκολο να δημιουργήσετε κουμπιά, υπόβαθρα, φόρμες και άλλα στοιχεία σχεδίασης για τους ιστότοπούς σας.
Ορισμένοι από αυτούς είναι απλώς εντυπωσιακοί, αλλά άλλοι είναι μια μεγάλη βοήθεια αν θέλετε απλά να δημιουργήσετε γρήγορα κάτι σαν ένα κουμπί Web 2.0-ish ή ένα βασικό ριγμένο υπόβαθρο.
Τα εργαλεία δημιουργίας φόρμας μπορούν επίσης να σας βοηθήσουν, ειδικά εάν θέλετε οι πελάτες σας να είναι σε θέση να κάνουν μερικές από τις δικές τους εργασίες διαχείρισης στις φόρμες τους.
Γνωρίζω τουλάχιστον μερικούς σχεδιαστές που χρησιμοποιούν αυτά τα εργαλεία, έτσι ώστε να μην χρειαστεί να δημιουργήσουν μια προσαρμοσμένη, απλοποιημένη διεπαφή για την πρόσβαση στη βάση δεδομένων φόρμας ή για την επεξεργασία μορφών για τους πελάτες τους. Είναι ένας εξαιρετικός εξοικονόμηση χρόνου, ειδικά για την κατασκευή πιο πολύπλοκων μορφών.
Wufoo
Το Wufoo είναι ένας οικοδόμος φόρμας HTML που προσφέρει περισσότερα από 80 πρότυπα φόρμας και σχέδια χρωμάτων, ενώ παράλληλα σας επιτρέπει τον πλήρη έλεγχο για τη δημιουργία προσαρμοσμένων εντύπων για τους πελάτες σας.
Τα πρότυπα καθιστούν πιο γρήγορη και ευκολότερη τη δημιουργία τυποποιημένων εντύπων ιστού (όπως σελίδες εγγραφής ή φόρμες επικοινωνίας).
Οι υποβαλλόμενες φόρμες συλλέγονται αυτόματα σε μια βάση δεδομένων που διευκολύνει τους πελάτες σας να εκτυπώνουν, να αποστέλλουν ηλεκτρονικά μηνύματα, να φιλτράρουν, να αναζητούν και να εκτελούν άλλες προηγμένες λειτουργίες χωρίς να απαιτούν τη δημιουργία προσαρμοσμένης διεπαφής.
Μπορείτε ακόμη να χρησιμοποιήσετε τη Wufoo για να δημιουργήσετε ηλεκτρονικές φόρμες παραγγελίας και να ενσωματώσετε το με το Authorize.net, το PayPal ή το Google Checkout.
BgPatterns
Το BgPatterns σάς επιτρέπει να δημιουργείτε μοτίβα πλακιδίων χρησιμοποιώντας μια μεγάλη ποικιλία διαφορετικών επαναλαμβανόμενων στοιχείων.
Μπορείτε να επιλέξετε το χρώμα φόντου, την υφή του καμβά και τη γωνία του σχεδίου. Μπορείτε να εφαρμόσετε τα φόντα που δημιουργείτε στον ιστότοπο BgPatterns για να κάνετε προεπισκόπηση και, στη συνέχεια, να κάνετε λήψη της εικόνας αφού τελειώσετε.
Μπορείτε επίσης να περιηγηθείτε σε πρότυπα που δημιουργήθηκαν από άλλους. Είναι ο γρηγορότερος και ευκολότερος τρόπος για να δημιουργήσετε απλά, πλακάκια φόντου.
Γεννήτρια ταινιών 2.0
Η δημιουργία επαναλαμβανόμενων λωρίδων για έναν ιστότοπο είναι χρονοβόρα.
Σίγουρα, μπορείτε να δημιουργήσετε πρότυπα για κοινές ρίγες που μπορείτε να χρησιμοποιήσετε, αλλά τι γίνεται αν θέλετε μια ταινία καρφίτσας για ένα έργο, μια ευρεία λωρίδα για μια άλλη, και μία σε περίεργη γωνία για άλλη; Σύντομα αυτά τα πρότυπα απλά δεν φαίνεται να το κόβουν πια.
Η Generator Stripe 2.0 προσφέρει ρίγες σε διάφορες γωνίες , σε οποιοδήποτε πλάτος που επιλέγετε, με ή χωρίς σκιές και κλίσεις , και χρησιμοποιώντας τα έξι χρώματα που θέλετε.
Περιλαμβάνουν επίσης μια γκαλερί λωρίδων όπου μπορείτε να δείτε τι έχουν χτίσει άλλοι.
Tartan Maker
Εάν η δημιουργία ριγέ φόντου είναι χρονοβόρα, δημιουργώντας καρό φόντο είναι ένας τεράστιος πονοκέφαλος.
Αυτό είναι όπου έρχεται Tartan Maker. Επιλέξτε το μέγεθος του νήματος, τα χρώματα για το μοτίβο σας και τη γωνία και αυτό δημιουργεί αυτόματα.
Μπορείτε να κάνετε προεπισκόπηση των σχεδίων σας σε πλήρη οθόνη και, στη συνέχεια, να κάνετε λήψη του αρχείου.
Pixelknete's Background Dotter
Αυτή η γεννήτρια φόντου δημιουργεί ένα σύγχρονο διάστικτο φόντο με προοδευτικά μικρότερες κουκίδες καθώς μετακινούνται προς τα κάτω στη σελίδα.
Μπορείτε να επιλέξετε μέχρι δύο κουκκίδες και δύο χρώματα για ένα φόντο κλίσης (ή μόνο ένα χρώμα για ένα συμπαγές φόντο).
Μπορείτε επίσης να καθορίσετε το ύψος του προτύπου (η προεπιλογή είναι 700 pixels). Το δημιουργούμενο υπόβαθρο επαναλαμβάνεται σε οριζόντιο άξονα.
Ως γεννήτρια κουμπιών
Εάν αγνοήσετε το ανεπαρκώς μεταφρασμένο κείμενο σε αυτήν τη σελίδα, θα δείτε ότι αυτό είναι ένα από τα πιο ομαλά γεννήτριες κουμπί διαθέσιμα . Προσθέστε κείμενο, διαφορετικές κλίσεις, λωρίδες, εικόνες και πολλά άλλα στα κουμπιά σας.
Μπορείτε να επιλέξετε το κουμπί και τα χρώματα των περιθωρίων, το συνολικό μέγεθος (με συρόμενα ή πεδία κειμένου) και το πάχος των περιθωρίων και το βαθμό στρογγυλοποίησης του κουμπιού.
Αν συμπεριλάβετε ρίγες, σας δίνουν πολλές επιλογές, συμπεριλαμβανομένου του χρώματος, της διαφάνειας, του πάχους, του χώρου μεταξύ των λωρίδων και της γωνίας.
Αυτή είναι σίγουρα η πιο ολοκληρωμένη γεννήτρια κουμπιών εκεί έξω.
Κουμπί Maker
Αυτή η γεννήτρια κουμπιών σάς επιτρέπει να δημιουργείτε εύκολα κουμπιά εικονοστοιχείων 80 × 15 .
Επιλέξτε τα χρώματα των κουμπιών, τα χρώματα των περιθωρίων, όπου πρέπει να είναι η διαίρεση μεταξύ των πλαισίων και εισαγάγετε το κείμενο για κάθε πλευρά και αυτό είναι!
Αυτό είναι ένα από τα εργαλεία που δεν είναι φορτωμένα με χαρακτηριστικά, αλλά κάνει αυτό που σχεδιάστηκε για να κάνει τέλεια και απρόσκοπτα.
AJAX και εργαλεία JavaScript
Όλοι γνωρίζουμε ότι ο Ajax μπορεί να προσθέσει έναν τόνο λειτουργικότητας στον ιστότοπό σας. Είτε θέλετε να προσθέσετε μια απλή γκαλερί εικόνων, μια διαδραστική φόρμα επικοινωνίας, είτε να δημιουργήσετε μια ολόκληρη εφαρμογή Ιστού , ο Ajax είναι εκεί για να σας βοηθήσει.
Αλλά ξεκινώντας από το μηδέν μπορεί να είναι τρομακτικό, ειδικά αν είστε σχετικά νέος για Ajax. Και ακόμα κι αν θεωρείτε τον εαυτό σας επαγγελματία, μπορεί να χρειαστεί πολύ χρονοβόρο να ξεκινήσετε με μια κενή πλάκα για κάθε έργο σας.
Υπάρχουν πολλά εργαλεία για να επιταχύνετε την ανάπτυξη του Ajax. Από τις συλλογές σεναρίων έως τα πλαίσια για γεννήτριες συγκεκριμένων στοιχείων, υπάρχει πιθανό ότι κάτι είναι διαθέσιμο στα παρακάτω εργαλεία που θα σας κάνουν πιο αποτελεσματικό προγραμματιστή.
Ajaxload
Το Ajaxload είναι μια γεννήτρια για να δημιουργήσετε εικονίδια φορτωτών Ajax . Υπάρχει ένας τόνος διαφορετικών εικονιδίων για να διαλέξετε.
Το μόνο που έχετε να κάνετε είναι να ορίσετε τα χρώματα του προσκηνίου και του φόντου (ή να επιλέξετε ένα διαφανές φόντο) και στη συνέχεια να κατεβάσετε μόνο το παραγόμενο σενάριο.
Γρήγορη και εύκολη αλλά σας εξοικονομεί λίγα λεπτά (ή και περισσότερο) κωδικοποίησης!
Mini AJAX
Το Mini Ajax είναι μια συλλογή από scripts Ajax και DHTML που μπορείτε να κατεβάσετε .
Περιλαμβάνει τα πάντα, από τα τρισδιάστατα παράθυρα έως τα slideshows έως πιο προηγμένα σενάρια (όπως ημερολόγια και ολόκληρα εργαλεία διαχείρισης έργου).
Είναι μια εξαιρετική αφετηρία για να βρείτε μεμονωμένα στοιχεία Ajax ή ακόμα και μόνο για να πάρετε κάποια έμπνευση.
Υπάρχουν διαθέσιμα demos για πολλά σενάρια και όλα αυτά μπορούν να μεταφορτωθούν από τις αρχικές τους πηγές.
MooTools
Το MooTools είναι ένα πλαίσιο JavaScript που βασίζεται σε αντικείμενα . Δεν είναι σίγουρα σχεδιασμένο για αρχάριους, αλλά μπορεί να σας επιτρέψει να γράψετε ευέλικτες, ισχυρές εφαρμογές Ajax που είναι συμβατές με το πρόγραμμα περιήγησης.
Είναι επίσης συμβατό με τα πρότυπα και είναι εξαιρετικά καλά τεκμηριωμένο.
Εκτός από τον κατασκευαστή πυρήνα, υπάρχουν επίσης διαθέσιμοι τόνοι plugin. Το MooTools μπορεί να χρησιμοποιηθεί για να δημιουργήσει τα πάντα, από απλές γκαλερί εικόνων μέχρι ολοκληρωμένες διεπαφές χρήστη.
jQuery
Το jQuery είναι μια βιβλιοθήκη JavaScript που απλοποιεί διάφορες λειτουργίες JavaScript .
Ένα από τα καλύτερα μέρη αυτού του συγκεκριμένου εργαλείου, ωστόσο, είναι ο αριθμός των plugins που είναι ήδη διαθέσιμα για το jQuery.
Υπάρχουν έτοιμα plugins για τα πάντα, από απλές κινούμενες εικόνες σε μορφές σε widget σε προηγμένα στοιχεία διεπαφής χρήστη.
Υπάρχει πιθανότατα ήδη ένα plugin για σχεδόν οτιδήποτε θέλετε να κάνετε με το JavaScript ή το Ajax, ή τουλάχιστον ένα που θα χρησιμοποιηθεί ως βάση για τη δημιουργία της δικής σας.
Script.aculo.us
Το Script.aculo.us είναι μια βιβλιοθήκη διεπαφής χρήστη του JavaScript που περιλαμβάνει ένα πλαίσιο animation, ελέγχους Ajax, βοηθητικά προγράμματα DOM και πολλά άλλα .
Χρησιμοποιείται από την Apple, CNN, Basecamp και Ruby on Rails. Είναι χτισμένο στο Prototype Framework.
Υπάρχει εκτεταμένη τεκμηρίωση διαθέσιμη στο wiki Script.aculo.us, καθιστώντας εύκολη την εκκίνηση.
Εργαλείο συμπίεσης JavaScript σε απευθείας σύνδεση
Η συμπίεση των αρχείων σας JavaScript τους κάνει να φορτώνονται γρηγορότερα, να καταναλώνουν λιγότερα από το εύρος ζώνης και να καταλαμβάνουν λιγότερο χώρο στο διακομιστή σας. Αυτό το εργαλείο κάνει τη συμπίεση ευκολότερη.
Απλά αντιγράψτε και επικολλήστε τα αρχεία JS (ή φορτώστε τα) σε αυτό το εργαλείο και, στη συνέχεια, επιλέξτε εάν θέλετε να κάνετε συμπίεση χρησιμοποιώντας το Minify ή τον Packer.
Αυτό καθαρίζει αυτόματα καθαρότερο, πιο αποτελεσματικό κώδικα. Απλά βεβαιωθείτε ότι έχετε ελέγξει διεξοδικά τα αποτελέσματα και ότι διατηρεί πάντα ένα αντίγραφο ασφαλείας του αρχικού σας αρχείου.
JavaScript Beautifier
Εάν το JavaScript σας είναι λίγο πιο messier από ό, τι θα θέ