Η ζήτηση στη σκηνή του σχεδιασμού ιστοσελίδων έχει αλλάξει τα τελευταία χρόνια: σχεδιαστές με δεξιότητες front-end, και προγραμματιστές front-end με δεξιότητες σχεδιασμού, είναι όλο και περισσότερο σε ζήτηση . Ναι, θα μπορούσατε να υποστηρίξετε ότι οι θέσεις εργασίας είναι εντελώς διαφορετικές - και ίσως δεν σας αρέσει μια από αυτές - αλλά ειλικρινά, τα έξι χρόνια μου ως ανεξάρτητος προγραμματιστής Ιστού και δώδεκα χρόνια ως σχεδιαστής, έχω έμαθε ότι είναι πολύ πιο δύσκολο να το βρεις απλώς ως σχεδιαστής ιστοσελίδων ή απλά ως προγραμματιστής front-end παρά ως μηχανικός front-end που γνωρίζει και τους δύο ρόλους.
Το να φοράτε και τα δύο καπέλα έχει πολλά πλεονεκτήματα: μόνο από επαγγελματική άποψη, μπορείτε να βρείτε την εργασία πιο εύκολα και να χρεώσετε υψηλότερη τιμή, επειδή είστε φέρνοντας περισσότερα στο τραπέζι .
Αλλά εργάζεται ως υβριδικός μηχανικός front-end έχει επίσης μερικά μειονεκτήματα για τα οποία πρέπει να γνωρίζετε - και πώς να τα αντιμετωπίζετε. Ως δημιουργικός σχεδιαστής, θα χρησιμοποιήσετε το δικό σας 'Δεξί εγκέφαλο' , ο μισός υπεύθυνος για οπτικές, χωρικές και αντιληπτικές πληροφορίες - με άλλα λόγια, όλα τα πράγματα όμορφα στο σχεδιασμό ιστοσελίδων. Ως τεχνικός προγραμματιστής front-end θα χρησιμοποιήσετε τον «αριστερό εγκέφαλό σας», τον λογικό και αναλυτικό συνεργάτη του τρελού σας καλλιτέχνη στα δεξιά.
Και, επειδή είστε μόνο ένα άτομο, αυτό σημαίνει ότι εργάζεστε δύο εντελώς διαφορετικές εργασίες ταυτόχρονα, με τον ίδιο εγκέφαλο - και αυτό μπορεί να προκαλέσει σύγχυση στον εγκέφαλό σας. Εάν δεν μπορείτε να το χειριστείτε, δεν θα παράγετε ποιοτική εργασία ή δεν θα αξιοποιήσετε πλήρως τις δυνατότητές σας. Και, εάν είστε ελεύθερος επαγγελματίας που προσπαθείτε να ανταποκριθείτε σε μια υβριδική περιγραφή εργασίας για μηχανικούς front-end, πιθανώς ανταγωνίζεστε μια ομάδα δύο (προγραμματιστής και σχεδιαστής), οπότε θα πρέπει να εργαστείτε με το ίδιο χρονικό πλαίσιο ενώ διατηρώντας την ποιότητα. (Φυσικά, μπορείτε επίσης να πληρώσετε σαν να ήσασταν ομάδα δύο!)
Το να γνωρίζετε ποιο μέρος του εγκεφάλου σας να χρησιμοποιήσετε και πότε να το χρησιμοποιήσετε είναι το κλειδί για τον εξορθολογισμό των διαδικασιών σας και την παραγωγή των καλύτερων αποτελεσμάτων με μηδενική απογοήτευση και άφθονο χρόνο για να απομείνετε στην προθεσμία σας. Ανεξάρτητα από το πού σας λείπει, στα αριστερά ή στα δεξιά, αυτή η ανάρτηση θα σας βοηθήσει να κατανοήσετε τις δεξιότητες που χρειάζεστε και τους τρόπους με τους οποίους μπορείτε να τις αποκτήσετε.
Εντάξει έτοιμος? Εξαιρετική! Ας υποθέσουμε ότι σας ζητήθηκε να σχεδιάσετε τον ιστότοπο για το miniCloud, μια εκκολαπτόμενη εκκίνηση που προσφέρει προσαρμοσμένες λύσεις VPS. Από πού ξεκινάς;
Πριν ξεκινήσω οποιαδήποτε «πραγματική» δουλειά σε ένα έργο, μου αρέσει να κοιμάμαι μαζί του. Αυτό σημαίνει να κάνετε διεξοδική έρευνα σχετικά με το προϊόν, τις υπηρεσίες, τον ανταγωνισμό κ.λπ. του πελάτη σας. Εν ολίγοις, το Google είναι το καλύτερο. Μετά από αυτό, σκεφτείτε το έργο όλη την ημέρα: Πώς θα μοιάζει όταν τελειώσετε με αυτό; Πάρτε το για δείπνο και κοιμηθείτε λαμβάνοντας υπόψη τη νέα, σέξι σχεδίαση σας. Κατά τη διάρκεια αυτού του σταδίου, έχετε πάντα ένα μολύβι (ή κινητό τηλέφωνο) έτοιμο να γράψει ιδέες καθώς έρχονται σε εσάς. Αυτό το είδος νοητικής εργασίας συνήθως βοηθά στον καθορισμό βασικών πτυχών της διαδικασίας σας.
αυτός ο τύπος ισορροπίας διαθέτει στοιχεία που προέρχονται από ένα κεντρικό σημείο ή δημιουργούν μια κεντρική εστίαση.Προσωπική συμβουλή : Βρήκα ότι πολλές φορές οι «συμβουλές» που λαμβάνω από άτομα που δεν σχετίζονται με τον πελάτη, το έργο ή το σχεδιασμό ιστοσελίδων για αυτό το θέμα θα μου δώσουν τις καλύτερες χειρότερες συμβουλές. Έτσι, όταν ακούω τις προτάσεις τους, ξέρω τι ακριβώς δεν πρέπει να κάνω. Μου κάνει!
Τώρα που έχετε κάποιες ιδέες για ανάπτυξη, ήρθε η ώρα να ξεκινήσετε την πραγματική διαδικασία σχεδιασμού. Αυτό αποτελείται από τρία βήματα: 1) σκίτσο, 2) wireframe και 3) γραφικά. Αυτό είναι το μέρος όπου αφήνετε το καλλιτεχνικό ήμισυ του εγκεφάλου να κάνει τα πράγματα και να τρελαίνει με μολύβι, χαρτί και Photoshop.
Κατά τη διάρκεια αυτής της φάσης σχεδίασης, είναι σημαντικό να αφήσετε την πλευρά του προγραμματιστή σας να σας ελέγχει, ώστε να μην τρελαίνετε με ορισμένες πτυχές του ιστότοπου που θα είναι αδύνατον να αναδημιουργήσετε γρήγορα χρησιμοποιώντας HTML, CSS και jQuery. Εάν προσπαθήσετε να ανακαλύψετε εκ νέου το πρόγραμμα περιήγησης, ο προγραμματιστής front-end θα σας μισήσει για αυτό. Και ο προγραμματιστής front-end σας είναι εσείς -θυμάμαι?
Επομένως, καθοδηγήστε τις βέλτιστες πρακτικές του σχεδιασμός ιστοσελίδων (και κάποια κοινή λογική), επειδή είναι πολύ απίθανο να ξεπεράσετε οποιοδήποτε νέο έδαφος με τον επανασχεδιασμό του ιστότοπου του νυφικού του φίλου σας. Αυτό δεν σημαίνει ότι δεν πρέπει να στοχεύετε να δημιουργήσετε έναν φανταστικό και εντυπωσιακό σχεδιασμό. Αλλά μάλλον, βρείτε κάτι που γνωρίζετε είναι εφικτό. Τα έργα που ανακαλύπτουν εκ νέου τον Ιστό πραγματοποιούνται συνήθως στον ελεύθερο χρόνο σας χωρίς να υπάρχει προθεσμία στο κεφάλι σας.
Ποιο από τα παρακάτω δεν αποτελεί αρχή Gestalt της αντιληπτικής οργάνωσης;Προσωπική συμβουλή : Όταν σχεδιάζω, μου αρέσει να συντονίζω όλες τις εξωτερικές διακοπές και να αφιερώνω την αδιαίρετη προσοχή μου στο έργο που βρίσκεται στο χέρι. Αυτό σημαίνει ότι δεν υπάρχει τηλέφωνο, χωρίς Facebook, χωρίς Twitter, χωρίς σάντουιτς κ.λπ. Απλά δουλέψτε! Με βοηθά να ακούω κάτι που δεν γνωρίζω, κάτι με στίχους που δεν ξέρω (όπως Φωνητική έκσταση ), αλλιώς το ADHD μου ξεκινά και τραγουδάω και χορεύω σε χρόνο μηδέν. Δεν το θέλουμε αυτό.
Λάβετε υπόψη ότι πρόσθετες λεπτομέρειες στο σκίτσο, όπως χιόνι, πουλιά και σύννεφα, είναι το προϊόν της αναβλητικότητας μου και δεν είναι υποχρεωτικές σε κανένα μέρος της διαδικασίας σχεδιασμού σας, αλλά φαίνονται ωραίες.
Personal tip : There are some great resources online where you can download and print sketch sheets. One of my favorites is sneakPeekit . They also have sheets for mobile and tablet design.
Κάνω όλο το σχεδιασμό μου στο Photoshop. Στην ιδανική περίπτωση, ο πελάτης σας θα σας παρέχει πρώτες ύλες για εργασία, όπως φωτογραφίες και αντίγραφο κειμένου που μπορείτε να χρησιμοποιήσετε αντί για σύμβολα κράτησης θέσης. Φαίνεται πολύ καλύτερα όταν το στέλνετε σε αναθεωρήσεις.
So, for step three, we take our wireframe and bring it to life:
Παρεμπιπτόντως: εάν καταλήξετε να χρησιμοποιείτε Photoshop , υπάρχουν πολλοί δροσεροί πόροι εκεί έξω που θα κάνουν τη διαδικασία σας πολύ πιο γρήγορη, όπως προσθήκες και στυλ. Θα μπορούσα να γράψω μια ολόκληρη ανάρτηση μόνο γι 'αυτούς, οπότε θα επισημάνω μερικές που χρησιμοποιώ συχνά.
Αφού τελειώσω με το στάδιο του σχεδιασμού και έλαβα ένα OK από τον ευχαριστημένο πελάτη, είμαι έτοιμος να μετατρέψω τις στατικές μου εικόνες σε ζωντανές ιστοσελίδες. Θυμηθείτε, σε αυτό το σημείο, το σχέδιό μας είναι ακριβώς αυτό: ένα σχέδιο. Έχουμε τρόπους να προχωρήσουμε προτού είναι έτοιμος για τον ιστό.
Σε αυτό το στάδιο, ήρθε η ώρα να χρησιμοποιήσετε το αριστερό, πιο αναλυτικό μισό του εγκεφάλου σας.
Στον κόσμο του σχεδιασμού ιστοσελίδων, αναφερόμαστε σε αυτήν τη διαδικασία ως «Τεμαχισμός» . Αν και ο όρος ήταν πιο ακριβής πριν από λίγο καιρό CSS έγινε το κύριο οπτικό δομικό στοιχείο του ιστού και έπρεπε να κόψετε κάθε μικρό κομμάτι του PSD ή του PNG σας και να το βάλετε σε τρομερά μικρά τραπέζια, κολλήθηκε γύρω.
Εάν είστε σχεδιαστής ιστοσελίδων και δεν ξέρετε πώς να το 'front-end' ακόμα, είστε τυχεροί - επειδή η κωδικοποίηση μπορεί να μάθει (σε αντίθεση με το να έχετε μια φυσική ικανότητα για σχεδιασμό). Θα σας συνιστούσα να επενδύσετε σε κάποια διαδικτυακά σεμινάρια βίντεο όπως Lynda.com και ανατρέξτε στα βασικά στοιχεία ανάπτυξης. (Μπορείτε να βρείτε μια πιο οριστική λίστα πόρων εδώ .) Σε λίγες ώρες, θα μεταβείτε από το μηδέν στην ανάγνωση του κωδικού. Και σε λίγες μέρες, θα το γράψετε μόνοι σας. Και σε λίγους μήνες, θα είστε πλοίαρχος των HTML και CSS - τότε δεν θα σας σταματήσει όταν πρόκειται για εργασίες μηχανικής front-end.
Προσωπική συμβουλή : Κατά την κωδικοποίηση, μου αρέσει να χρησιμοποιώ το «Τεχνική ντομάτας» για καλύτερη διαχείριση του χρόνου μου και κατανομή εργασιών. Σε αντίθεση με το στάδιο του σχεδιασμού, επιτρέπω στον εαυτό μου να διακόπτεται - επίτηδες. Το Pomodoro είναι μια εξαιρετική τεχνική που σας βοηθά να βελτιώσετε την εστίασή σας και σας προτείνω να ρίξετε μια ματιά. Αξίζει τον κόποΤώρα, εάν δημιουργήσατε μερικά υπέροχα wireframes (στο προηγούμενο στάδιο) σύμφωνα με κάποιο πλέγμα με το οποίο είστε άνετοι, θα γνωρίζετε ακριβώς πώς θέλετε να κωδικοποιείται ο ιστότοπός σας. Ο γρηγορότερος τρόπος θα ήταν να χρησιμοποιήσετε κάποιο είδος πλαισίου front-end, όπως Μπότα .
τι είναι ένας δέκτης sdr
Μόλις αποκτήσετε το σχέδιο σχεδίασης με βάση το πλέγμα, θα αρχίσετε να βλέπετε κάθε μέρος του ιστότοπού σας ως ένα σύνολο σειρών και στηλών. Το πρώτο πράγμα που κάνω όταν ρυθμίζω τη δομή HTML μου, προτού προσθέσω οποιοδήποτε πραγματικό περιεχόμενο ή CSS, είναι να γράψω στις σειρές, στη συνέχεια στις στήλες, στη συνέχεια βασικά πράγματα όπως την πλοήγηση, ακολουθούμενο από κείμενο και εικόνες κράτησης θέσης. Αυτό σας επιτρέπει να κατεβάσετε πρώτα τη βασική δομή και να δημιουργήσετε από εκεί. Κοιτάζοντας αυτό το wireframe, μπορούμε να δούμε έξι σειρές:
Αφού τα εντάξουμε στη δομή HTML του Bootstrap, θα έχουμε κάτι σαν αυτό:
Πολλοί βασικοί ιστότοποι χρησιμοποιούν τον ίδιο (ή παρόμοιο) κώδικα και καθώς εργάζεστε σε όλο και περισσότερα έργα, θα δείτε ότι η ανάπτυξη ιστότοπων είναι σε μεγάλο βαθμό μια επαναληπτική διαδικασία και δεν έχει νόημα να γράφετε τον ίδιο κώδικα σε κάθε επανάληψη . Γι 'αυτό τα πλαίσια είναι χρήσιμα! Είτε δημιουργήσατε το δικό σας είτε αποφασίσατε να χρησιμοποιήσετε το Bootstrap ή θεμέλιο - δεν έχει σημασία. Αυτό που έχει σημασία είναι ότι μπορείτε να το διατηρήσετε αργότερα και να το επεκτείνετε εάν χρειαστεί.
Προσωπική συμβουλή: Εάν εργάζομαι σε ένα μεσαίο έργο με αυστηρή προθεσμία, η επιλογή μου θα ήταν το Bootstrap. Είναι εύκολο στη χρήση, ανταποκρίνεται και προσαρμόζεται. Επίσης, παίζει καλά με το WordPress.Σχεδόν οτιδήποτε χρειάζεστε για ένα έργο έχει γίνει στο παρελθόν και στη συνέχεια ξαναδημιουργήθηκε μερικές φορές. Επομένως, για οποιαδήποτε σημαντική εργασία, αναζητήστε και ρωτήστε τους άλλους εάν έχουν προτάσεις προτού προχωρήσετε πρώτα σε έναν τοίχο. Τα περισσότερα από τα μεγάλα πλαίσια έχουν πολύ ενεργές κοινότητες που δημιουργούν πρόσθετο κώδικα και προσθήκες για να διευκολύνουν τη δουλειά σας. Γι 'αυτό εργαστείτε έξυπνα, όχι σκληρά και μάθετε κάθε μέρα Και, αν χρειάζεστε κάτι που κανείς δεν έχει χτίσει στο παρελθόν, λοιπόν, σπάτε κάποιο νέο έδαφος! Γράψτε για αυτό και μοιραστείτε με την κοινότητα - θα σας βοηθήσει να εξελιχθείτε ως σχεδιαστής και προγραμματιστής.
Για ορισμένα μηχανολογικά έργα, θα τελειώσετε μόλις το σχέδιό σας υπάρχει σε μια ζωντανή ιστοσελίδα. Πρόκειται συνήθως για μικρότερους ιστότοπους (π.χ. για μικρές επιχειρήσεις, δικηγόρους, οδοντίατροι κ.λπ.). Αλλά συχνά, εσείς ή ο πελάτης σας θα θέλετε να έχετε τον έλεγχο του περιεχομένου του ιστότοπου. Σε αυτήν την περίπτωση, χρειάζεστε ένα Σύστημα Διαχείρισης Περιεχομένου ( CMS ). Ο στόχος ενός CMS είναι να σας επιτρέψει να επεξεργαστείτε και να δημοσιεύσετε περιεχόμενο σε μια ιστοσελίδα χωρίς να χρειάζεται να κωδικοποιήσετε κάθε νέα λεπτομέρεια με το χέρι, ή ακόμη και κώδικα.
πώς να κάνετε το ρομπότ
Από όλα τα μεγάλα CMS, θα έλεγα τον εαυτό μου ως Ευαγγελιστή WordPress: Έχω πεισθεί για άλλους προγραμματιστές, ειδικά για αρχάριους, λόγω της ευελιξίας του, της ευκολίας χρήσης του, της ολοκληρωμένης τεκμηρίωσης για ανάπτυξη, μεγάλης κοινότητας, μεγάλου αριθμού δωρεάν προσθηκών, Και ούτω καθεξής και ούτω καθεξής…
Αν κάποιος σας πει ότι Joomla! είναι καλύτερο, ειδικά για μικρότερα έργα - τότε δεν ξέρουν για τι μιλούν. Τέλος πάντων, μην πάρετε απλώς τη λέξη μου: κατεβάστε το WordPress και το Joomla! θέματα εκκίνησης, ρίξτε μια ματιά σε κάθε φάκελο και, στη συνέχεια, αναρωτηθείτε - ποιο θέλετε να εξερευνήσετε στον νέο σας ρόλο front-end;
Θα χρειαζόμουν ένα ολόκληρο άρθρο για να γράψω για αυτό το θέμα, αλλά εμπιστευτείτε με αυτό όπως θα εμπιστευόσασταν Baz Luhrmann σε αντηλιακό .
Προσωπική συμβουλή : Το WordPress έχει αυτή τη μεγάλη ικανότητα να είναι ό, τι θέλετε. Για παράδειγμα, το WordPress θα μπορούσε να είναι μια λύση καλαθιού αγορών για οποιοδήποτε έργο ηλεκτρονικού εμπορίου μικρού έως μεσαίου μεγέθους χρησιμοποιώντας μια προσθήκη που ονομάζεται woocommerce . Είναι ασφαλές, εύκολο στη χρήση, εύκολο στην ανάπτυξη και εύκολο να ενσωματωθεί σε οποιοδήποτε υπάρχον θέμα WordPress.Εάν το έργο σας είναι ιδιαίτερα μικρό και χρειάζεστε απλώς ένα CMS που μπορεί να υλοποιηθεί χωρίς δεξιότητες κωδικοποίησης, θα σας συνιστούσα να χρησιμοποιήσετε CouchCMS . Με μόνο δύο ετικέτες XHTML, μπορείτε να την ενεργοποιήσετε και να λειτουργήσει μέσα σε λίγα λεπτά, ακόμη και η γιαγιά σας θα ξέρει πώς να τη χρησιμοποιήσει.
καλύτερη γραμματοσειρά serif για εκτύπωση
Αφού παραδώσετε τον ιστότοπό σας και έχετε έναν άλλο ικανοποιημένο πελάτη, το μόνο που μένει να κάνετε είναι να διατηρήσετε τον ιστότοπο. Εάν έχετε δημιουργήσει έναν απλό ιστότοπο HTML που δεν θα έχει νέο περιεχόμενο, μάλλον έχετε τελειώσει.
Εάν έχετε χρησιμοποιήσει ένα CMS, θα πρέπει να βεβαιωθείτε ότι το η τεχνολογία είναι πάντα ενημερωμένη ώστε να αποφύγετε κανένα παραβιάσεις ασφάλειας . Αυτό περιλαμβάνει το ίδιο το CMS και τυχόν προσθήκες που χρησιμοποιήσατε. Εάν πήρατε τις συμβουλές μου και χρησιμοποιήσατε το WordPress, θα ειδοποιηθείτε μέσω email για κάθε διαθέσιμη ενημέρωση.
Αυτό είναι το θεμέλιο της διαδικασίας μου. Βεβαίως, αυτό δεν θα λειτουργήσει για όλους και σίγουρα δεν θα ισχύει για κάθε έργο. Αλλά ελπίζω ότι αυτό θα σας βοηθήσει τους σχεδιαστές εκεί έξω να αποκτήσουν τις δεξιότητες που χρειάζεστε για να γίνετε σπουδαίοι μηχανικοί front-end και το αντίστροφο, έτσι ώστε να μπορούμε να συνεχίσουμε να αναπτύσσουμε τα ταλέντα μας ως προγραμματιστές front-end.
Μπορώ να σου δείξω μόνο την πόρτα. Είστε αυτός που πρέπει να το διασχίσετε. - Morpheus, το Matrix
P.S .: Μπορείτε να βρείτε ένα PSD του παραπάνω προτύπου και άλλα δροσερά σχέδια στο my χαρτοφυλάκιο dribbble .