Βασικά εργαλεία για κάθε σχεδιαστή Ιστού
Κάθε σχεδιαστής ιστού απαιτεί τα κατάλληλα εργαλεία για να κάνει τη δουλειά του. Για να δημιουργήσετε καλά κατασκευασμένα πρωτότυπα σχέδια, σίγουρα πρέπει να εμπνευστείτε για να το κάνετε αυτό.
Η επίτευξη αυτού του σημείου είναι μερικές φορές η πιο δύσκολη πρόκληση στον τομέα του web design. Ευτυχώς, για εμάς και την ομάδα συναδέλφων σχεδιασμού υπάρχουν διαθέσιμα εργαλεία για να βοηθήσουμε στην ολοκλήρωση της εργασίας πιο γρήγορα και αποτελεσματικότερα.
Παρακάτω, έχω περιγράψει μια λίστα με τα εργαλεία που συστήνω για οποιονδήποτε σχεδιαστή ιστοσελίδων. Βεβαιωθείτε ότι έχετε σελιδοδείξει αυτές τις σελίδες ώστε να μπορείτε να τις χρησιμοποιήσετε προς όφελός σας όπως έχω!
Χρώμα
Adobe Kuler (δωρεάν)
Ένα εξαιρετικό εργαλείο που προσφέρει η Adobe το οποίο επιτρέπει στα μέλη να φορτώνουν, να δημιουργούν και να επεξεργάζονται σχέδια χρωμάτων της επιλογής τους.
Pictaculous (δωρεάν)
Από τους δημιουργούς του Mailchimp έρχεται μια γεννήτρια παλέτας χρωμάτων διαφορετική από οποιαδήποτε άλλη. Απλά μεταφορτώστε μια εικόνα και τα χρώματα μέσα στην εικόνα δειγματίζονται για τη δημιουργία ενός προσαρμοσμένου συνδυασμού χρωμάτων.
Colorzilla (δωρεάν)
Το ColorZilla για το Google Chrome είναι μια επέκταση που βοηθά τους προγραμματιστές Ιστού και τους σχεδιαστές γραφικών με εργασίες σχετικές με το χρώμα - τόσο βασικές όσο και προηγμένες. Το ColorZilla περιλαμβάνει έναν επιλογέα χρωμάτων, έναν οφθαλμικό πτώση, έναν γεννήτορα κλίσης και πολλά επιπλέον προηγμένα έγχρωμα εργαλεία.
Dribbble.com (δωρεάν)
Πολλοί σχεδιαστές απευθύνονται στο dribbble.com για μεγάλη έμπνευση. Μπορείτε να αναζητήσετε κοινούς όρους αλλά ακόμα καλύτερα να ψάξετε ανά χρώμα. Επισκεφθείτε το δικτυακό τόπο dribbble.com και κάντε κλικ στον σύνδεσμο εξερεύνησης στην επάνω πλοήγηση και έπειτα επιλέξτε χρώματα για να εξερευνήσετε την έμπνευση για τα σχέδιά σας με βάση το χρώμα.
Χρώματα (2,99 δολάρια)
Ενδιαφέρεστε για τις εγγενείς εφαρμογές και όχι για τις εφαρμογές ιστού; Τα χρώματα από τον γιγάντιο κομήτη είναι ένα εργαλείο προγραμματισμού χρώματος για εσάς. Σε μόλις 2,99 δολάρια από το κατάστημα εφαρμογών μπορείτε να δοκιμάσετε χρώματα για κάθε έργο στο οποίο εργάζεστε.
Τυπογραφία
Google Webfonts (δωρεάν)
Το Google διαθέτει πολλές γραμματοσειρές Ιστού για οποιονδήποτε σχεδιαστή ιστοσελίδων για να κάνει μεγάλη χρήση. Είναι δωρεάν και απίστευτα εύκολο να εφαρμοστούν στα έργα σας.
Σκίουρος γραμματοσειράς (δωρεάν)
Το Squirrel γραμματοσειράς είναι ο καλύτερος πόρος σας για δωρεάν, χειρόγραφες, υψηλής ποιότητας γραμματοσειρές εμπορικής χρήσης. Ακόμα κι αν αυτό σημαίνει ότι σας στέλνουν αλλού για να τα πάρετε.
Χαμένος τύπος (από $ 1)
Το Lost Type Co-Op είναι ένα χυτήριο τύπου Pay-What-You-Want, το πρώτο του είδους του. Με μια μεγάλη ποικιλία γραμματοσειρών οποιοσδήποτε σχεδιαστής ιστοσελίδων θα μπορούσε να ωθήσει τα σχέδιά του στο επόμενο επίπεδο.
Typecast (από $ 29 ανά μήνα)
Το Typecast είναι ένα πολύτιμο εργαλείο που σας επιτρέπει να στυλ γρήγορα, να ελέγχετε την αναγνωσιμότητα και να κάνετε απόδοση καθώς δουλεύετε. Αντί να κατεβάζετε τις γραμματοσειρές Ιστού και να αλλάζετε συνεχώς τον τρόπο που διαβάζουν μέσα σε ένα έγγραφο του Photoshop, αυτή η νέα τεχνολογία θα βοηθήσει στη ροή εργασίας κάθε σχεδιαστή.
Συρματοποίηση
Balsamiq (από 79 €)
Το Balasmiq είναι ένα εργαλείο ταχείας κατασκευής wireframing που χρησιμοποιείται για την παραγωγή εμπειριών χρήστη. Ο σχεδιασμός του σχεδίου UI σκιαγραφεί το γεγονός ότι είναι ένα εργαλείο για brainstorming και κριτικής σκέψης, όταν πρόκειται για το σχεδιασμό με τους χρήστες στο μυαλό. Οι επιλογές σχεδίασης για ιστό, κινητά και δισκία υπάρχουν όλα και είναι εύκολο να εφαρμοστούν.
moqups (δωρεάν)
Το moqups είναι μια εφαρμογή HTML5 που χρησιμοποιείται για τη δημιουργία wiredframes, mockups ή UI concepts. Το στυλ και τα διαθέσιμα χαρακτηριστικά είναι πολύ παρόμοια με το balsamiq. Όλα βράζουν σε ποιο εργαλείο χρησιμοποιείτε πιο άνετα.
Mockflow (από δωρεάν)
Το Mockflow είναι ένα online εργαλείο πλαισίωσης καλωδίων όπως το ζευγάρι που ανέφερα παραπάνω. Το χαρακτηριστικό που βρίσκω καθαρό είναι τα εργαλεία συνεργασίας. Μπορείτε να κάνετε σημειώσεις για να επιτρέψετε σε κάποιον άλλο χρήστη να δει τις αλλαγές ή τις ανησυχίες σας, καθώς και να συνομιλεί ο ένας με τον άλλον σε πραγματικό χρόνο σχετικά με σημαντικές αποφάσεις ή λειτουργίες UI.
Σχέδιο Google (δωρεάν)
Ένα πολύτιμο εργαλείο που πολλοί σχεδιαστές ιστοσελίδων περνούν είναι το Google Drawing. Παρόλο που δεν περιλαμβάνει προεπιλογές όπως αυτές για balsalmiq ή moqups, είναι μια εντελώς δωρεάν υπηρεσία που μπορείτε να αποθηκεύσετε στο online google drive σας. Απλά χρειάζεστε μια διεύθυνση gmail για να ξεκινήσετε.
Photoshop / Indesign / Πυροτεχνήματα (από $ 49,99 ανά μήνα)
Οι πιο απλές λύσεις κατά τη γνώμη μου είναι να δημιουργήσω ένα wireframe από το μηδέν. Η μετάβαση σε αυτή τη διαδρομή περιορίζεται μόνο από τη δημιουργικότητα και τη φαντασία σας, αντί των προκαθορισμένων λύσεων UI όπως πολλά εργαλεία πλαισιώσεως καλωδίων. Μπορεί να χρειαστεί περισσότερος χρόνος, αλλά το τελικό αποτέλεσμα είναι πιο προσωπικό και προσαρμοσμένο ώστε να ταιριάζει με κάθε εμπειρία χρήστη, είτε πρόκειται για ιστότοπο, εφαρμογή, ιστότοπο για κινητά ή για εφαρμογή tablet.
Διάταξη και πλάκες βραστήρα
960 Πλέγμα (δωρεάν)
Το πλέγμα 960 είναι το σημείο αναφοράς του ιστού. Κάθε καλός σχεδιαστής ιστοσελίδων θα πρέπει ήδη να κατανοήσει τη σημασία χρησιμοποιώντας ένα θεμελιώδες πλέγμα για τη διάταξή του, καθώς διατηρεί το web design πολύ πιο χρησιμοποιήσιμο για τον τελικό χρήστη. Οι συνοδευτικές ενέργειες του photoshop στη λήψη έσωσαν αρκετές ώρες για να ελεγχθούν τα ζητήματα ευθυγράμμισης.
1140 CSS Grid (δωρεά $ 5)
Εάν ενδιαφέρεστε για ένα ευρύτερο πλάτος πλέγματος τότε συνιστούμε το πλέγμα 1140 CSS ως ένα καλό σημείο εκκίνησης. Το πλήρες πλέγμα ταιριάζει απόλυτα σε μια οθόνη 1280 και ακόμα καλύτερα για μικρότερες οθόνες ή συσκευές, το δίκτυο γίνεται ρευστό και προσαρμόζεται σε οποιοδήποτε πλάτος του προγράμματος περιήγησης.
Bootstrap (δωρεάν)
Αν ψάχνετε για μια προκαθορισμένη εμπειρία χρήστη έξω από το κιβώτιο, τότε bootstrap θα γίνει ο καλύτερος φίλος σας. Υπάρχουν πολλά χαρακτηριστικά που συνδυάζονται με το πλαίσιο που είναι εντελώς προσαρμοστικό και σέξι που θέλει να ξεκινήσει.
LessFramework 4 (δωρεάν)
Λιγότερο είναι ένα πλαίσιο αφιερωμένο στην προσαρμογή των ιστοτόπων. Είναι κατασκευασμένο για να ταιριάζει σχεδόν σε οποιαδήποτε συσκευή στην αγορά. Περιέχει 4 διατάξεις και 3 σύνολα τυπογραφικών προεπιλογών, όλα βασισμένα σε ένα ενιαίο πλέγμα.
Σκελετός (δωρεάν)
Το Skeleton είναι απλά ένα εξαιρετικό σημείο εκκίνησης για κάθε ιστοσελίδα. Η απλή και ελαφριά δομή του ωφελεί εκείνους που θέλουν να ξεκινήσουν χωρίς να μελετήσουν πώς λειτουργεί πραγματικά το πλαίσιο.
Ίδρυμα Zurb (δωρεάν)
Το Ίδρυμα μόλις κυκλοφόρησε το Ίδρυμα 4 το οποίο, σύμφωνα με αυτούς, είναι το πιο εξελιγμένο πλαίσιο front-end στον κόσμο. Με πολλά νέα προστιθέμενα χαρακτηριστικά και εκπληκτικά πρότυπα για να ξεκινήσω με μπορώ να πω ότι είμαι ένας πραγματικός ανεμιστήρας. Δοκιμάστε το σήμερα.
Επαναφορά CSS (δωρεάν)
Χωρίς αμφιβολία αυτή η παγκοσμίως αναγνωρισμένη επαναφορά CSS του προγράμματος περιήγησης είναι απόλυτη ανάγκη για οποιονδήποτε σχεδιαστή ιστοσελίδων να προσφέρει τα σχέδιά του σε οποιαδήποτε πλατφόρμα ή πρόγραμμα περιήγησης.
Διαχείριση περιεχομένου
WordPress (δωρεάν)
Το WordPress παίρνει το κέικ όταν πρόκειται για Συστήματα Διαχείρισης Περιεχομένου. Αρχικά η πιο δημοφιλής πλατφόρμα αποστολής blogs έχει μετατραπεί σε αυτό και περισσότερο στον κόσμο του CMS.
Joomla (δωρεάν)
Το Joomla είναι ένα άλλο δημοφιλές CMS που χρησιμοποιείται από εκατομμύρια παγκοσμίως. Όπως το WordPress, η προεπιλεγμένη διάταξη που είναι εγκατεστημένη με το CMS είναι φιλική προς το χρήστη και είναι έτοιμη για κινητά.
Μηχανή έκφρασης (από $ 299)
Αναπτύχθηκε από την EllisLab, το Expression Engine είναι ένα CMS που χτίστηκε με τη βοήθεια ενός πλαισίου ανοιχτού κώδικα PHP που ονομάζεται Codeigniter. Πολλές μεγαλύτερες εταιρείες όπως η Apple, η Ford, η Nike και η Sony επιλέγουν το Expression Engine για να ταιριάζουν στις δικές τους απαιτήσεις. Ως εκ τούτου, η μηχανή έκφρασης δεν είναι ένα δωρεάν CMS, αλλά είναι σίγουρα αξίζει να διαβάσετε και / ή να κατεβάσετε ένα αντίγραφο για να εξοικειωθείτε, για μελλοντικές εργασίες που μπορεί να αντιμετωπίσετε.
Drupal (δωρεάν)
Το Drupal είναι μια πλατφόρμα διαχείρισης περιεχομένου ανοιχτού κώδικα για την τροφοδοσία εκατομμυρίων ιστοτόπων και εφαρμογών. Είναι χτισμένο, χρησιμοποιείται και υποστηρίζεται από μια ενεργή και ποικίλη κοινότητα ανθρώπων σε όλο τον κόσμο. Το Drupal μπορεί να χρησιμοποιηθεί για όλα, από τα blogs έως τις εκτεταμένες εφαρμογές ιστού.
Ακτινοβόλο CMS (δωρεάν)
Το Radiant είναι ένα σύστημα διαχείρισης περιεχομένου ανοιχτού κώδικα σχεδιασμένο με μικρές ομάδες στο μυαλό. Το σλόγκαν τους λέει όλα: απλοποιημένη διαχείριση περιεχομένου.
Χρήσιμες εφαρμογές, ενέργειες και πόροι
GuideGuide (δωρεάν)
Το GuideGuide είναι μια εκπληκτική επέκταση του Photoshop που σας επιτρέπει να δημιουργείτε τέλεια πλέγματα εν πτήσει. Χρησιμοποιώντας το GuideGuide μπορείτε να δημιουργήσετε πιο ακριβείς στήλες, σειρές, μεσαία σημεία και γραμμές βάσης με ένα κλικ.
iOS Photoshop Ενέργειες & ροές εργασιών (δωρεάν)
Ένας από τους αγαπημένους μου πόρους είναι σε μια ιστοσελίδα που ονομάζεται bjango.com. Το συγκεκριμένο άρθρο παρουσιάζει μια αναλυτική λίστα των ενεργειών και των ροών εργασίας που δημιουργεί η Bjango. Οι ενέργειες για τη δημιουργία νέων προτύπων για το iPhone ή το iPad γίνονται με ένα απλό κλικ ή αν σχεδιάζετε ένα εικονίδιο εφαρμογής για μια εφαρμογή iPhone, υπάρχει μια μεγάλη ενέργεια που αλλάζει το μέγεθος της εφαρμογής σε κάθε pixel πλάτος και ύψος που είναι απαραίτητο. Αυτό το εύρημα ήταν το ισοδύναμο για την εξεύρεση χρυσού για μένα.
Από τους ανθρώπους (δωρεάν)
Από τους ανθρώπους είναι μια μεγάλη και απλή λειτουργία ιστοτόπου γεμάτη με πόρους που είναι όλοι δωρεάν και εύκολο στη χρήση.
Temboo (από δωρεάν)
Το Temboo επιτρέπει στους προγραμματιστές να επικεντρωθούν σε αυτό που κάνει το λογισμικό τους μοναδικό. Το Temboo ομαλοποιεί την πρόσβαση σε API, βάσεις δεδομένων και πολλά άλλα για να σας εξοικονομήσει χρόνο και να σας δώσει το δημιουργικό χώρο που χρειάζεστε.
LittleIpsum (δωρεάν)
Κατεβάστε αυτό! Εάν είστε web designer σε mac, θα το χρησιμοποιείτε κάθε μέρα. Υπόσχομαι!!
awesome-fontstacks.com (δωρεάν)
Το Awesome Fontstacks είναι ένα εξαιρετικό online εργαλείο που σας βοηθά να ανακατεύετε και να ταιριάζει με τις γραμματοσειρές του web εν πτήσει. Όταν είστε ικανοποιημένοι με τη γραμματοσειρά σας, μπορείτε να υποδεχτείτε τον έτοιμο κώδικα CSS.
Κωδικοποιητές επεξεργασίας
Coda 2 (από $ 99)
Από τότε που μου παρουσιάστηκε το coda, ήμουν fan. Συνήθως συγκρίνω άλλους συντάκτες κώδικα με το coda και για μένα η Coda κερδίζει πάντα τον αγώνα. Αυτό μπορεί να είναι διαφορετικό για σας, αλλά προτείνω να δοκιμάσετε το coda αν δεν έχετε ακόμα. Το Coda2 είναι γεμάτο με χαρακτηριστικά και εύχρηστο UI που καθιστά την κωδικοποίηση για τον ιστό ένα αεράκι.
SublimeText 2 ($ 70)
Το SublimeText 2 είναι ακριβώς εκεί πάνω με το Coda για μένα. Υπάρχει ένας τόνος χαρακτηριστικών και το κομψό UI της ίδιας της εφαρμογής σας δίνει τη δυνατότητα να επικεντρωθείτε στη διαδικασία κωδικοποίησης αντί να ανακατεύετε με την εφαρμογή για να την χρησιμοποιήσετε σε κατάσταση χρήσης για τα δικά σας έργα.
TextMate (από $ 59)
Το TextMate φέρνει την προσέγγιση της Apple στα λειτουργικά συστήματα στον κόσμο των επεξεργαστών κειμένων. Είναι απλό και εύκολο στη χρήση και καταλαμβάνει λιγότερο οθόνη ακίνητη περιουσία από πολλούς άλλους Editors κώδικα.
Aptana Studio (δωρεάν)
Το Aptana Studio είναι η κορυφαία εφαρμογή IDE στον τομέα του διαδικτύου. Διαθέσιμο τόσο για Mac όσο και για PC Το λογισμικό αυτό αξιοποιεί εκπληκτική δυνατότητα κωδικοποίησης σχεδόν οποιουδήποτε τύπου εφαρμογής που μπορείτε να σκεφτείτε.
BBEdit (49,99 δολάρια)
Το BBEdit είναι ένα επαγγελματικό πρόγραμμα επεξεργασίας HTML και κειμένου για Mac.
Πελάτες FTP
CyberDuck ($ 23.99)
Ο αγαπημένος μου FTP πελάτης είναι CyberDuck. Υπάρχουν ατελείωτοι τρόποι σύνδεσης με διακομιστές ιστού, τοπικούς διακομιστές, συσκευές πρόσβασης μέσω ssh και πολλά άλλα. Ένα εξαιρετικό εργαλείο που διατίθεται και για τις πλατφόρμες Mac και PC.
FileZilla (δωρεάν)
Το FileZilla είναι μια δωρεάν λύση FTP. Είναι επίσης λογισμικό ανοιχτού κώδικα.
Μετάδοση ($ 34)
Από τους κατασκευαστές της Coda έρχεται η μετάδοση. Μια πολύ γρήγορη και αποτελεσματική λύση για FTP.
FireFTP (δωρεάν)
Το Fire FTP είναι διαθέσιμος για χρήστες του Firefox. Η εφαρμογή ενσωματώνεται στο πρόγραμμα περιήγησης του mozilla και προσφέρει έναν γρήγορο και εύκολο τρόπο για τη μεταφορά των αρχείων σας.
Έχετε δοκιμάσει αυτούς τους πόρους; Έχουμε χάσει κάποιο από τα αγαπημένα σας; Ενημερώστε μας στα σχόλια.