Το χάκερ χαρτοφυλακίου που θα κάνει όλους να θέλουν να σας προσλάβουν

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

Ένα όμορφο σχέδιο σκίτσων που θα μπορούσατε να χτίσετε για να ξεχωρίσετε το χαρτοφυλάκιό σας

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

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

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

Για να το θέσετε με απλά λόγια, αν το χαρτοφυλάκιό σας δεν φαίνεται καλό, δεν θα φανεί καλό στα μάτια του εργοδότη.

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

Αυτό είναι ιδιαίτερα σημαντικό αν θέλετε να αποκτήσετε εργασία ως προγραμματιστής ιστού front-end ή full-stack. Οι δεξιότητές σας στο HTML & CSS είναι σημαντικές, αλλά τελικά υποτίθεται ότι πρέπει να δημιουργήσετε ένα μεγάλο UI / UX.

Σε μια πραγματική δουλειά, πιθανότατα θα είναι ένας σχεδιαστής στην ομάδα σας που θα φροντίσει για το σχεδιασμό του UI / UX. Ωστόσο, πρέπει να δείξετε ότι μπορείτε να φτιάξετε όμορφα προϊόντα με βάση τις προδιαγραφές του σχεδιαστή.

Πώς το κάνετε αυτό εάν δεν έχετε σχεδιαστή για να σας βοηθήσει με το χαρτοφυλάκιό σας;

Εδώ είναι το μη-τόσο-μυστικό-πια χάκετ που ζητάμε από τους μαθητές μας να χρησιμοποιούν.

Το Hack: Κατασκευάστε μερικά πλήρως εξειδικευμένα έργα χρησιμοποιώντας σχέδια κάποιου άλλου

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

Θα μπορούσατε να αντιγράψετε οποιαδήποτε ιστοσελίδα θέλετε (όπως Pinterest). Ωστόσο, θα προκαλέσει μια πολύ καλύτερη εντύπωση εάν δημιουργήσετε κάτι όμορφο που δεν γνωρίζουν πολλοί άνθρωποι.

Μια προσέγγιση είναι να επισκεφθείτε το δικτυακό τόπο dribbble.com και να βρείτε μερικές ιδέες που μπορείτε να χτίσετε. Πολλοί σχεδιαστές έχουν το χρόνο να ξανασχεδιάσουν τον τρόπο με τον οποίο ορισμένες ιστοσελίδες θα μοιάζουν αν είχαν κατασκευαστεί από το μηδέν. Ωστόσο, τα σχέδια αυτά συχνά δεν υλοποιούνται. Εδώ έρχεστε: επιλέξτε ένα και χτίστε το από το μηδέν. Ακολουθούν μερικά παραδείγματα - και θυμηθείτε να συνδεθείτε με τον αρχικό σχεδιαστή εάν ακολουθήσετε αυτή την ιδέα.

Μερικές ιστοσελίδες έννοιων που βρέθηκαν στο Dribbble

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

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

Ας αναλύσουμε αυτή την προσέγγιση βήμα προς βήμα:

Βήμα # 1: Κατεβάστε ένα δωρεάν πρότυπο σκίτσο

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

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

Τώρα κατεβάστε και εγκαταστήστε το Sketch (υπάρχει δωρεάν δοκιμή 30 ημερών) και ανοίξτε με αυτό το πρότυπο Σκίτσο που κατεβάσατε στο προηγούμενο βήμα. Δυστυχώς, το Sketch είναι διαθέσιμο μόνο για Mac. Αν είστε χρήστης των Windows, μπορείτε να δοκιμάσετε το Lunacy αντί.

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

Βήμα # 2: Εξαγωγή του σχεδίου σε Zeplin

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

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

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

Αφού εγκατασταθεί το πρόσθετο Zeplin στο Sketch, μεταβείτε στο Plugins> Zeplin και κάντε κλικ στην επιλογή Export Selected Artboards. Το σχέδιο σκίτσου που έχετε κατεβάσει μπορεί να έχει πολλαπλούς πίνακες τέχνης, που αντιστοιχούν σε διαφορετική προβολή της εφαρμογής / ιστότοπου.

Πώς να χρησιμοποιήσετε το Sketch εξαγωγή του σχεδίου σε Zeplin

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

Βήμα # 3: Κατασκευάστε το σχέδιο με βάση τις λεπτομερείς προδιαγραφές του

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

Ένα σχέδιο σκίτσου που εξάγεται στο Zeplin, όπου μπορείτε να δείτε όλες τις προδιαγραφές και ακόμη και τον παραγόμενο κώδικα CSS

Εάν θέλετε να εξάγετε μια εικόνα, κάντε κλικ στην εικόνα στο Zeplin και αναζητήστε την επιλογή για να κατεβάσετε την εικόνα PNG στο δεξιό μενού.

Πώς να κατεβάσετε οπτικά στοιχεία από Zeplin

Εάν δεν δείτε αυτή την επιλογή, επιστρέψτε στο Sketch, κάντε κλικ στην εικόνα που θέλετε να εξαγάγετε και κάντε κλικ στην επιλογή που λέει Make Exportable. Στη συνέχεια, απλά μεταφορτώστε τους πίνακες τέχνης στη Zeplin και δοκιμάστε ξανά.

Επιλογή στο Sketch για να είναι δυνατή η εξαγωγή εικόνων στο Zeplin

Τέλος, απλώς χρησιμοποιήστε όλες αυτές τις λεπτομερείς προδιαγραφές και υψηλής ποιότητας περιουσιακά στοιχεία για να δημιουργήσετε τον ιστότοπο. Και θυμηθείτε ότι τα μεγάλα UIs είναι κατασκευασμένα από εκατοντάδες μικροσκοπικές λεπτομέρειες. Παρόλο που ίσως να μην εκτιμήσετε αυτές τις λεπτομέρειες μεμονωμένα, εφαρμόστε προσεκτικά κάθε μία από αυτές χρησιμοποιώντας τις προδιαγραφές της Zeplin και θα δείτε πως το τελικό αποτέλεσμα φαίνεται πιο όμορφο από ό, τι έχετε κατασκευάσει ποτέ πριν.

Προσθέτοντας τις τελευταίες πινελιές

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

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

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

Κάθε έργο θα πρέπει να απαριθμεί τις χρησιμοποιούμενες τεχνολογίες και ακόμη και μια μικρή περιγραφή. Το πιο σημαντικό είναι να συνδέσετε την ζωντανή έκδοση αυτών των έργων (όπου θα λάμψουν τα νέα έργα σας) και στα repos GitHub που περιέχουν τον κώδικα των έργων σας.

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

Τυλίγοντας

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

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

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