Ο τελευταίος κατάλογος των καλύτερων δωρεάν εργαλείων και πόρων για τους προγραμματιστές Web στο Front-end

από τον Bradley Nice, Content Manager στο ClickHelp.com - εργαλείο τεκμηρίωσης λογισμικού

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

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

Έτσι, έχω συγκεντρώσει μια λίστα με εργαλεία και πόρους για προγραμματιστές front-end που εμπίπτουν σε διάφορες κατηγορίες: Χρώματα, Generators CSS, Αριθμομηχανές & Μετατροπείς, Τυπογραφία και Γραμματοσειρές, Εικόνες, Ανάλυση Website Style, Συντάκτες, Εργαλεία για Προγραμματιστές, Βελτιστοποίηση, Ανατροφοδότηση, Έμπνευση, MOOC, Wireframes, Mockups & Πρωτότυπα, Σχεδιασμός Ειδήσεις & Κοινότητα, Χαρτοφυλάκιο, Πόροι.

Χρωματιστά

Color Hex: Ένα δωρεάν έγχρωμο εργαλείο που παρέχει πληροφορίες για οποιοδήποτε χρώμα

Υλικό επιλογής χρωμάτων

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

ColorDrop: Ένα εργαλείο αντιστοίχισης χρωμάτων που σας επιτρέπει να αποθηκεύετε τους αγαπημένους συνδυασμούς χρωμάτων.

Παλέτα: Δημιουργήστε πανέμορφες παλέτες χρωμάτων χωρίς προηγούμενη γνώση σχεδιασμού.

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

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

ΧΡΩΜΑΤΑ: Μια απλή παλέτα χρωμάτων για τον ιστό.

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

uiGradients: Όμορφες έγχρωμες κλίσεις.

Web Colour Data: Αυτό το έργο στοχεύει να απαντήσει σε ερωτήσεις όπως: Ποιο είναι το πιο συνηθισμένο χρώμα ή s απόχρωση στον ιστό; Μήπως ορισμένες βιομηχανίες προτιμούν ορισμένα χρώματα σε σχέση με άλλα; Ποια χρώματα γενικά βρίσκονται μαζί;

Χρώματα Σχεδιασμού Υλικού: Αυτή η μικρή εφαρμογή Ιστού σας βοηθά να απεικονίσετε τα χρώματα του σχεδιασμού υλικού και επίσης να αντιγράψετε εύκολα τα χρώματα σε διαφορετικές μορφές.

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

BADA55.io: Το BADA55.io αφορά την εύρεση των πιο δύσκολων λέξεων για τα CSS hex χρώματα.

Έγχρωμο χρώμα: Είναι ένα δωρεάν έγχρωμο εργαλείο που παρέχει πληροφορίες για οποιοδήποτε χρώμα. Απλά πληκτρολογήστε τυχόν τιμές χρώματος στο πεδίο αναζήτησης και θα προσφέρει μια λεπτομερή περιγραφή και θα μετατρέψει αυτόματα την ισοδύναμη τιμή σε δεκαεξαδική, δυαδική, RGB, CMYK, HSL, HSV, CIE-Lab, Hunter-Lab, CIE-Luv, CIE -LCH, XYZ και xyY.

Λόγος αντίθεσης: Μπορείτε εύκολα να υπολογίσετε τους συντελεστές αντίθεσης χρωμάτων

Πενήντα αποχρώσεις του γκρι για τους σχεδιαστές ιστοσελίδων:

COLORlovers: Δημιουργία και κοινή χρήση έμπνευσης παλέτας χρωμάτων

Colllor: Γεννήτρια παλέτας χρωμάτων

Paletton: Εργαλείο για τη δημιουργία συνδυασμών χρωμάτων

Chrome Daltonize !: Η Daltonization είναι μια τεχνική εκθέτοντας λεπτομέρειες στους χρήστες με τυφλά χρώματα, επιτρέποντάς τους να δουν τι διαφορετικά θα είχαν χάσει

Γεννήτριες CSS

CSS3.me: Αυτό είναι πολύ ελαφρύ και κομψό, αλλά και πολύ λειτουργικό. Σας δίνει τη δυνατότητα να αλλάξετε και να ρυθμίσετε την ακτίνα του πλαισίου, τη σκιά σταγόνας, την κλίση και την αδιαφάνεια.

CSS3 Generator: Είναι λειτουργική και ωραία σχεδιασμένη γεννήτρια. Νομίζω ότι αυτό είναι ένα από τα αγαπημένα μου, διότι ο σχεδιασμός και το UI είναι τόσο καθαρό.

CSS3-Κόλπα Button Maker: Αυτό είναι σχεδόν εξ ολοκλήρου ελέγξιμο από ένα slider drag and drop.

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

Τελευταία γεννήτρια κλίσης CSS: Γεννήτρια κλίσης CSS

CSS3 Generator Button: Αυτό σας δίνει ένα μεγάλο κουμπί για να χειριστείτε τη σκιά, τα σύνορα, το χρώμα, και πάνω από αυτό σας δίνει τη δυνατότητα να επεξεργαστείτε το hover-over.

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

Πολύχρωμο γεννήτρια φόντου CSS με κλίση: Δημιουργία φόντου CSS

EnjoyCSS: Όλα σε μια γεννήτρια CSS

CSS MenuMaker: Δημιουργήστε έξυπνη πλοήγηση στον ιστότοπο

Διακόπτης ενεργοποίησης / απενεργοποίησης: Δημιουργήστε εναλλασσόμενους διακόπτες CSS3 On / Off

CSSmatic: Κλίση, ακτίνα ακρών, κουτί σκιάς και γεννήτρια υφής θορύβου

Ui Parade Live Tool: Κουμπί, φόρμα, εικονίδιο, κορδέλα

CSS Arrow Παρακαλώ: Γεννήτρια βέλους CSS

CSS3 Gallery Patterns: Γκαλερί μοτίβων CSS3

Γεννήτρια διάταξης: Δημιουργία διάταξης CSS

Tridiv: Διαδικτυακός επεξεργαστής για τη δημιουργία 3D σχημάτων σε CSS

Αριθμομηχανές & Μετατροπείς

DPI Love: Βρείτε DPI / PPI οποιασδήποτε οθόνης

CSS Inliner: Εισαγάγετε αυτόματα το CSS του ηλεκτρονικού σας ταχυδρομείου

Κωδικός ομορφιάς: Καλλιεργήστε, επικυρώστε, ελαχιστοποιήστε, αναλύστε και μετατρέψτε τα JSON, XML, JavaScript, CSS, HTML, Excel

PXtoEM: Μετατροπή εικονοστοιχείων σε EM

Πάγκοι πυκνότητας: Μετατροπέας πυκνότητας οθόνης για Android και iOS

Μετατροπέας Πυκνότητας: Μετατροπέας Πυκνότητας Pixel

Είναι αυτή η αμφιβληστροειδή ;: DPI / PPI Αριθμομηχανή οθόνης

Δοκιμή NTH: δοκιμαστής n-child και n-type

Τυπογραφία & Γραμματοσειρές

Γραμματοσειρές Google: γραμματοσειρές web πηγαίου κώδικα

Fontspiration: Ένα εργαλείο οικοδόμησης για τη δημιουργία διασκεδαστικών, κινούμενων τυπογραφικών αριστουργημάτων.

Gridlover: Το εργαλείο για τη δημιουργία ενός τυπογραφικού συστήματος με αρθρωτή κλίμακα και κατακόρυφο ρυθμό.

Τύπος Genius: Βρείτε το τέλειο σύνθετο γραμματοσειράς για το επόμενο έργο σας.

Πληκτρολογήστε Nugget: Πληκτρολογήστε Nugget είναι ένα εργαλείο online στοιχειοθεσίας που σας δίνει εξαιρετικό έλεγχο σε μια στιβαρή βάση για τον καλό τύπο web hella - όλα μέσω ενός ευχάριστου περιβάλλοντος χρήστη.

TypeWonder: Δοκιμάστε τις γραμματοσειρές web σε οποιονδήποτε ζωντανό ιστότοπο

Fit Text: Ένα plugin jQuery για φουσκώματος τύπου web

TypographyEditor: Η τυπογραφία είναι ένα δωρεάν και ηλεκτρονικό εργαλείο για την παραγωγή τυπογραφικών αφισών και εικόνων.

Απλά Τύπος μου:

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

Σκίουρος γραμματοσειράς: Χέρι πήρε δωρεάν γραμματοσειρές web

Dafont: Αρχείο ελεύθερα γραμματοσειρών που μπορείτε να κατεβάσετε

Μέγεθος γραμματοσειράς: Κατεβάστε τις γραμματοσειρές

Τύπος Genius: Βρείτε το τέλειο σύνθετο γραμματοσειράς

Τι είναι η γραμματοσειρά: Προσδιορίστε τη γραμματοσειρά από μια εικόνα

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

Flipping Typical: Ένα εργαλείο τυπογραφίας, πληκτρολογήστε τη λέξη που θέλετε να δείτε και αμέσως να την δείτε που έχει οριστεί στα γράμματα του υπολογιστή σας.

Swapper γραμματοσειράς: Προεπισκόπηση πώς οι ιστότοποι θα εμφανίζονται με γραμματοσειρές από Webtype.

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

Typetester: Συγκρίνετε τις γραμματοσειρές Web από το Adobe Edge, το Google και το Typekit

Tiff: Μάθετε τη διαφορά μεταξύ των γραμματοσειρών Google

Καλύτερες Γραμματοσειρές 2016: Η συλλογή μου από φέτος δωρεάν γραμματοσειρές

Εικόνες

Εικονίδια σχεδίασης υλικών: 750 πακέτα ετικετών πακέτων σχεδίων υλικών από το Google Design

Iconogen: Δημιουργία favicons, Windows 8 Tiles, εικονίδια Apple Touch, εικονίδια Android και iOS

Marka: Όμορφες μεταμορφώσιμες εικόνες

Γραμματοσειρά Awesome: Τα διανυσματικά εικονίδια διανυσμάτων που μπορούν να προσαρμοστούν άμεσα

Maki: Σετ εικονιδίων για χαρτογραφία ιστού

Παρτίδα: 300+ εικονίδια για σχεδιασμό διαδικτύου και χρήστη

Fontello: Γεννήτρια γραμματοσειρών εικονιδίων

Fontastic: Δημιουργήστε τη δική σας γραμματοσειρά εικονιδίων

Iconmonstr: Μια μεγάλη συλλογή εικόνων glyph από γερμανό καλλιτέχνη

Octicons: Γραμματοσειρά εικονιδίου που ξεκίνησε από το GitHub

GlyphSearch: Αναζήτηση για εικονίδια από τη γραμματοσειρά Awesome, Glyphicons, IcoMoon, Ιωνόνες και όκτιον

Εικονίδιο Πεπόνι: Βιβλιοθήκη εικόνων SVG για ιστό

Entypo: Μια σουίτα από προσεκτικά επεξεργασμένα εικονογράμματα από τον Daniel Bruce

Gemicon: Δωρεάν εικονίδιο 600+, έρχεται σε 3 διαφορετικά μεγέθη (16px, 32px, 64px)

Typicons: Δωρεάν εικονίδια διανυσμάτων ενσωματωμένα σε webfont για εύκολη χρήση στις διεπαφές χρήστη

Αναλύστε το στυλ ιστότοπου

Στυλ μου: Επισκόπηση του οδηγού στυλ ενός ιστότοπου, συμπεριλαμβανομένων των χρωμάτων, των γραμματοσειρών, του μεγέθους και της απόστασης

StyleStats: Απλό εργαλείο για τη συλλογή στατιστικών στοιχείων CSS ενός ιστότοπου

Χρώματα: Ανακαλύψτε το πιο κοινό χρώμα ή απόχρωση μιας ιστοσελίδας

Type-o-matic: Μια επέκταση προγράμματος περιήγησης που βρίσκει όλες τις γραμματοσειρές μιας σελίδας

SnappySnippet: Εύκολα εξαγάγετε CSS και HTML από επιλεγμένο στοιχείο

Συντάκτες

CodePen: Μια βιτρίνα προηγμένων τεχνικών με επεξεργάσιμο πηγαίο κώδικα

JS Bin: Ένα live pastebin για HTML, CSS & JavaScript και μια σειρά επεξεργαστών

CSSDeck: Συλλογή Awesome CSS και JS Creations για να βοηθήσει τους προγραμματιστές και τους σχεδιαστές frontend

Dabblet: Μια διαδραστική CSS παιδική χαρά και το εργαλείο κοινής χρήσης κώδικα

Liveweave: Το Liveweave είναι μια παιδική χαρά HTML5, CSS3 & JavaScript για σχεδιαστές ιστοσελίδων και προγραμματιστές

Adobe Edge Reflow: Εργαλείο σχεδίασης που συμπληρώνει τη ροή εργασίας του σχεδιασμού σας για να σας βοηθήσει να δημιουργήσετε όμορφα σχέδια που ανταποκρίνονται σε όλα τα μεγέθη οθόνης

webflow: Σχεδιάστε τη δημιουργία ιστοτόπων Drag-and-drop για τη δημιουργία επαγγελματικών ιστοτόπων που ανταποκρίνονται στις ανάγκες σας

Macaw: Παρέχει την ίδια ευελιξία με τον αγαπημένο σας επεξεργαστή εικόνας, αλλά γράφει επίσης σημασιολογική HTML και εξαιρετικά σύντομη CSS

Εργαλεία προγραμματιστή

Chrome DevTools: Σύνολο εργαλείων δημιουργίας ιστού και εντοπισμού σφαλμάτων ενσωματωμένων στο Google Chrome

Grunt: Ο δρομέας εργασιών JavaScript για αυτοματοποίηση εργασιών

LiveReload: Οι τροποποιήσεις CSS και οι αλλαγές εικόνας ισχύουν χωρίς να χρειαστεί να χτυπήσετε το κουμπί ανανέωσης

Bower: Λύση στο πρόβλημα της διαχείρισης πακέτων στο μπροστινό μέρος

Yeoman: Ένα οικοσύστημα γεννήτριας, βασικά ένα plugin που μπορεί να τρέξει με την εντολή `yo` για να γεφυρώσει πλήρη έργα ή χρήσιμα τμήματα

Μπορώ να χρησιμοποιήσω: Πιο πρόσφατους πίνακες υποστήριξης του προγράμματος περιήγησης για υποστήριξη τεχνολογιών ιστού front-end

HTML5 Παρακαλούμε: Αναζητήστε HTML5, CSS3 και μάθετε αν είναι έτοιμα για χρήση

Τιμές CSS: Αναφορά CSS, Ιδιότητες και Τιμές

CSS Triggers: Μια ανεκτίμητη αναφορά για το πώς το CSS επηρεάζει την απόδοση

Δοκιμές

Επικύρωση σήμανσης W3C: Ελέγχει την εγκυρότητα της σήμανσης των εγγράφων Web σε HTML, XHTML, SMIL, MathML

HTML_CodeSniffer: Ελέγχει τον πηγαίο κώδικα HTML και ανιχνεύει παραβιάσεις ενός καθορισμένου προτύπου κωδικοποίησης

Επικύρωση του W3C CSS: Έλεγχος (CSS) και (X) HTML έγγραφα με φύλλα στυλ

CSS Lint: Σημειώνει προβλήματα με τον κωδικό σας CSS

JS Lint: Πρόγραμμα JavaScript που αναζητά προβλήματα στα προγράμματα JavaScript

Ψεκασμός φυτοφαρμάκων: Διόρθωση διάταξης CSS

PhantomCSS: Δοκιμή παλινδρόμησης οπτικής / CSS με το PhantomJS

Qunit: Ένα πλαίσιο δοκιμής μονάδας JavaScript

Browsershots: Δοκιμή προγράμματος περιήγησης πολλαπλών πλατφορμών

Responsinator: Ελέγξτε πώς θα εμφανίζεται ο ιστότοπός σας στις πιο δημοφιλείς συσκευές

Opera Mobile Classic Emulator: Χρησιμοποιήστε τον επιλογέα προφίλ για να δημιουργήσετε πολλαπλές στιγμές Opera Mobile Classic με καθορισμένη ανάλυση, πυκνότητα εικονοστοιχείων, περιβάλλον χρήστη

Εκτέλεση

Δοκιμή ταχύτητας ιστοσελίδας Pingdom: Δοκιμάστε & αναλύστε το χρόνο φόρτωσης μιας ζωντανής σελίδας

WebPagetest: Δοκιμή ταχύτητας ιστότοπου από πολλές τοποθεσίες σε όλο τον κόσμο

PageSpeed ​​Insights: Αναλύει τον ιστότοπο και προτείνει τρόπους για να το φορτώσετε γρηγορότερα

GTmetrix: Αξιολόγηση της απόδοσης του ιστότοπου και παρέχει συστάσεις για την επίλυση αυτών των ζητημάτων

YSlow: Αναλύει και προσφέρει προτάσεις για τη βελτίωση της απόδοσης της σελίδας

Perfmap: Ένας χάρτης θεμάτων απόδοσης των πόρων που έχουν φορτωθεί στο πρόγραμμα περιήγησης

Βελτιστοποίηση

CSSCSS: Να γνωρίζετε ποια δίκτυα κανόνων έχουν διπλές δηλώσεις

Helium: εργαλείο javascript για τη σάρωση του ιστότοπού σας και εμφάνιση αχρησιμοποίητου CSS

CSS Tidy: Αναλυτής CSS και βελτιστοποιητής CSS

Συμπιεστής CSS: Συμπιέστε το CSS για να αυξήσετε την ταχύτητα φόρτωσης

CSS Dig: Ρίξτε μια ματιά σε όλες τις ιδιότητες CSS, τη συχνότητα και τις παραλλαγές τους

JavaScript Minifier: Μειώστε το JavaScript σας

FF Subsetter: Μειώστε το μέγεθος του αρχείου γραμματοσειράς για να βελτιστοποιήσετε τη χρήση εύρους ζώνης

Compressor.io: Μειώστε το μέγεθος των εικόνων σας ενώ διατηρείτε υψηλή ποιότητα

Δωρεάν πρόθεμα: προσθέστε το πρόθεμα του τρέχοντος προγράμματος περιήγησης σε οποιονδήποτε κώδικα CSS μόνο όταν χρειάζεται

Sprite Cow: Δημιουργία CSS για φύλλα sprite

TinyPNG: Προηγμένη συμπίεση απώλειας για εικόνες PNG

Προσαρμοσμένες εικόνες: Ανιχνεύει το μέγεθος της οθόνης του επισκέπτη σας και δημιουργεί αυτόματα, αποθηκεύει προσωρινά αποθηκευμένες εκδόσεις εικόνων

Ανατροφοδότηση

Αναπήδηση: Προσθέστε σχόλια σχετικά με ένα σχέδιο και μοιραστείτε το με άλλα άτομα

Σχεδίαση πτώσης: Ένα εργαλείο για τη συλλογή ανατροφοδότησης σχεδιασμού

Peek: Δείτε και ακούστε ένα βίντεο 5 λεπτών από ένα πραγματικό άτομο που χρησιμοποιεί τον ιστότοπό σας

Εμπνευση

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

Designrfix - Έμπνευση Γραφιστικής Σχεδίασης - Tutorials & Web Design Resources: Ένα άλλο σημαντικό γραφικό και web design blog.

OneXtraPixel - Σχεδιασμός και ανάπτυξη ιστοσελίδων στο διαδίκτυο

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

MonsterPost: TemplateMonster είναι ως επί το πλείστον μια εταιρεία templates, αλλά έχουν επίσης ένα σπουδαίο blog που συμβαίνει. Δεν είναι μόνο για τα δικά τους πράγματα πάρα πολύ - φροντίζουν να παρέχουν πολλά άριστα πράγματα σχεδιασμού ιστοσελίδων.

ΑπόUpNorth - Έμπνευση υψηλής σχεδίασης

DesignShack: Για μια ακόμη φορά μοιράζονται πολλούς πόρους με την κοινότητα σχεδιασμού.

Vandelay Design: Πολλοί και άριστοι πόροι, freebies, άρθρα, προσφορές, πράγματα WordPress και πολλά άλλα.

DesignM.ag: DesignM.ag είναι μια κοινότητα για σχεδιαστές, σχεδιαστές ιστοσελίδων και προγραμματιστές.

Reddit Web_design

Δεν είναι πραγματικά ένα blog, είναι ένα subreddit.

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

Abduzeedo - Σχεδιασμός Έμπνευση και Tutorials: Abduzeedo είναι ένα άλλο από αυτά, όπου θα βρείτε σχεδιαστικά έμπνευση roundups που πρέπει να δείτε για το σχεδιαστή που θέλει να μείνει πάνω από τις τάσεις και να μάθετε ποια είναι η τελευταία και μεγαλύτερη πράγματα γύρω.

tutorialZine - Το ένα μέρος για υψηλής ποιότητας tutorials ανάπτυξης ιστοσελίδων: Είναι ένα περιοδικό tutorial ως επί το πλείστον για τα μαθήματα ανάπτυξης ιστοσελίδων. Τα μαθήματα είναι καλά γραμμένα και εύκολα να τα ακολουθήσουν.

eWebDesign: Το eWebDesign είναι μια άλλη πηγή των τελευταίων και μεγαλύτερων άρθρων από τους ειδικούς του web design. Περιέχει ιστορίες σχετικά με το σχεδιασμό ιστοσελίδων, την ανάπτυξη ιστού και τα σεμινάρια. Είναι πραγματικά ένα ενημερωτικό δελτίο, έτσι μπορείτε να πάρετε τα πράγματα απευθείας στα εισερχόμενά σας!

WebAppers: Πολλοί πόροι ανοιχτού κώδικα και δωρεάν ιστού.

WebNeel - Σχεδιασμός Έμπνευση, Τέχνη, Φωτογραφία και Κινούμενα Σχέδια

CSS Mania - CSS Galleries: Αυτό είναι το πιο δημοφιλές site παρουσίασης CSS. Και πάλι, ένας πολύ καλός χώρος για να προσέξετε για καινοτόμα σχέδια ιστοσελίδων.

Τα 9 πιο βασικά Blog Design Blog που πρέπει να ακολουθήσετε

MOOC

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

Πρωτότυπο Αλληλεπίδραση: Μάθετε τις διάφορες μεθόδους πρωτοτύπων με σκίτσο, κατασκευή και δοκιμή

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

Εισαγωγή σε HTML και CSS: Μάθετε πώς μπορείτε να μετατρέψετε τα mockups ψηφιακού σχεδιασμού σε στατικές ιστοσελίδες

Ανάπτυξη ιστού: Μάθετε βασικές έννοιες ανάπτυξης ιστού από τον συνιδρυτή Reddit & Hipmunk Steve Huffman.

Βασικές θεμελιώδεις αρχές σχεδίασης ιστοτόπων: Μάθετε τα βασικά στοιχεία του σχεδιαζόμενου σχεδιασμού ιστού με το Pete LePage της Google

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

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

Ανάπτυξη εφαρμογών Android: Μάθετε πώς να δημιουργείτε μια εφαρμογή Android

Βασικά στοιχεία JavaScript: Μάθετε τα βασικά στοιχεία του προγραμματισμού JavaScript

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

Σχέδια σχεδίασης JavaScript: Μάθετε τη σημασία του διαχωρισμού των ανησυχιών κατά τη σύνταξη του JavaScript, κερδίζοντας πρακτική εμπειρία στην πορεία

Δοκιμή JavaScript: Μάθετε πώς μπορείτε να γράφετε εφαρμογές JavaScript με εμπιστοσύνη, χρησιμοποιώντας τη ροή εργασίας του κόκκινου-πράσινου-ανακαινιστή

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

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

Βασικές αρχές UIKit: Δημιουργήστε μια σειρά από απλές εφαρμογές για να γίνετε πιο άνετοι με το πλαίσιο UIKit και να ελέγξετε τα πιο ευρέως χρησιμοποιούμενα συστατικά του

Εισαγωγή στο jQuery: Μάθετε πώς μπορείτε να διαβάσετε και να κατανοήσετε την τεκμηρίωση της jQuery.

Εισαγωγή στο AJAX: Μάθετε πώς να κάνετε ασύγχρονα αιτήματα με JavaScript (χρησιμοποιώντας τη λειτουργικότητα του jQuery AJAX) και να αποκτήσετε καλύτερη κατανόηση του τι συμβαίνει στην πραγματικότητα όταν το κάνετε

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

Σχεδιασμός Gamification: Μάθετε τα βασικά του Gamification με μια πολύ πρακτική προσέγγιση

Συρματοπλέγματα, Mockups & Πρωτότυπα

Origami: Ελεύθερο εργαλείο για το σχεδιασμό σύγχρονων διεπαφών χρήστη που δημιουργούνται από το Facebook

Cacoo: Δημιουργήστε διαγράμματα, χάρτη ιστότοπου, διάγραμμα ροής, χάρτη μυαλού, πλαίσιο καλωδίων, διάγραμμα UML και διάγραμμα δικτύου

Marvel: Μετατρέψτε τις εικόνες σας Dropbox ή επιφάνειας εργασίας σε πρωτότυπα εφαρμογών ιστού και κινητής συσκευής για κάθε συσκευή και λάβετε σχόλια

Θέση: Δημιουργήστε μακέτες iPhone και μακέτες iPad

MockFlow: Υπηρεσίες online για το σχεδιασμό, τη δημιουργία και την κοινή χρήση έργων για τους σχεδιαστές

Justinmind: Διαδραστικά καλωδιακά πλαίσια για web και κινητά

Wireframe.cc: Ελεύθερο ελάχιστο εργαλείο σύλληψης

Σχεδιασμός Νέα & Κοινότητα

/ r / web_design: Υποδομή σχεδιασμού ιστοσελίδων

/ r / σχεδιασμός: Σχεδιασμός δευτερεύουσας έκδοσης

/ r / χρηστικότητα: εμπειρία χρήστη, σχεδιασμός διασύνδεσης ή υποπρογράμματα ανθρώπινων παραγόντων

/ r / userexperience: Υποδομή σχεδιασμού εμπειρίας χρήστη

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

Ανταλλαγή στοίβας: Εμπειρία χρήστη: Ε & Α για ερευνητές και εμπειρογνώμονες

Front-Front Front: Ένας χώρος όπου οι προγραμματιστές του front-end μπορούν να κάνουν ερωτήσεις, να μοιραστούν ενδιαφέρουσες συνδέσεις και να δείξουν το έργο τους στην υπόλοιπη κοινότητα

Ανανάς: Hub των Tutorials, Εργαλεία και Περιουσιακά στοιχεία για προγραμματιστές και σχεδιαστές

Lockerdome: Κοινωνικό δίκτυο με βάση το ενδιαφέρον

Designer News: Μια κοινότητα ανθρώπων στον σχεδιασμό και την τεχνολογία

DesignFloat: Ειδήσεις και συμβουλές για το σχεδιασμό ιστοσελίδων

Το Web Blend: Μια κοινότητα για σχεδιαστές, προγραμματιστές και tech junkies

Design News: Ένα site που περιλαμβάνει άρθρα ειδήσεων, πόρους και σεμινάρια γραμμένα από σχεδιαστές και προγραμματιστές

Χαρτοφυλάκιο

Behance: Η κορυφαία ηλεκτρονική πλατφόρμα για προβολή και ανακαλύψτε δημιουργική δουλειά

Dribbble: Ένα μέρος για να δείτε και να πείτε, να προωθήσετε, να ανακαλύψετε και να εξερευνήσετε το σχέδιο

Φορτίο: Πλατφόρμα προσωπικών εκδόσεων με στόχο τη δημιουργία προσβάσιμων εργαλείων και ενός δικτυωμένου πλαισίου για την ενίσχυση της έκθεσης των ταλαντούχων ατόμων στο Διαδίκτυο

DeviantArt: Μια online κοινότητα, παρουσιάζοντας διάφορες μορφές έργων τέχνης που δημιουργούν οι χρήστες

Πόροι

Vector Open Stock: Δωρεάν φορέα γραφικών

Κουμπιά: Μια βιβλιοθήκη κουμπιών CSS που είναι κατασκευασμένη με Sass & Compass

Bootflat: Flat UI KIT ανοικτού κώδικα βασισμένο στο Bootstrap 3.3.0 πλαίσιο CSS

Animate.css: Μια βιβλιοθήκη cross-browser CSS animations

CSS Shake: CSS τινάξτε γραφικά και εικονίδια για τη σελίδα ή την εφαρμογή σας

Λεπτές μοτίβα: Δωρεάν μοτίβα με υφή

Placehold.it: εικονίδια κράτησης θέσης

Holder.js: Στοιχεία κράτησης θέσης πελάτη

Hammer.js: Προσθέστε χειρονομίες πολλαπλής αφής στην ιστοσελίδα σας

Textillate: Μια απλή προσθήκη για animations κειμένου CSS3

Χρονοδιάγραμμα JS: Χρονοδιαγράμματα όμορφα σχεδιασμένα, τα οποία είναι εύκολα και διαισθητικά χρήσιμα

Modernizr: Βιβλιοθήκη JavaScript που εντοπίζει τις λειτουργίες HTML5 και CSS3 στο πρόγραμμα περιήγησης του χρήστη

Ισοτόπιο: Δημιουργήστε ένα φιλτράρισμα χαρτοφυλακίου για την ιστοσελίδα σας

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

CodyHouse: Μια δωρεάν βιβλιοθήκη HTML, CSS, Juggle JS

Cheetyr: Συλλογή φύλλων εξαπάτησης και συντομεύσεις για σχεδιαστές και προγραμματιστές

Φυλλάδιο: Μια βιβλιοθήκη JavaScript ανοιχτού κώδικα για διαδραστικούς χάρτες φιλικούς προς το περιβάλλον

Modest Maps: Δωρεάν βιβλιοθήκη για διαδραστικούς χάρτες

Template: Μια συλλογή από 846 δωρεάν πρότυπα ιστότοπων CSS και HTML5, σχεδιασμένα και κατασκευασμένα από το Cherry + AJ

GraphicBurger: Σχεδιάστε πόρους που προσφέρονται δωρεάν στην κοινότητα

Να εχεις μια ωραια μερα!

Bradley Νίκαια,
Διαχείριση περιεχομένου στο ClickHelp.com - το καλύτερο ηλεκτρονικό εργαλείο τεκμηρίωσης για τους πωλητές του SaaS