Ο Πρακτικός Οδηγός για τη ροή εργασίας στο Web Design
Ως σχεδιαστής ιστοσελίδων που συμμετέχει σε μια μεγαλύτερη ομάδα ανάπτυξης ιστοσελίδων, είναι κοινό ότι πρέπει να διεκπεραιώνετε πολλές εργασίες ταυτόχρονα.
Έχοντας δημιουργήσει κάποια πρώτα σχέδια σχεδιασμού για τον πελάτη σας και τώρα περιμένοντας αυτή την πρώτη ανατροφοδότηση, πιθανότατα είστε αρκετά ενθουσιασμένοι για το πώς η δουλειά σας θα γίνει αντιληπτή από τον πελάτη. Με τόσα πράγματα που πρέπει να παρακολουθήσετε σε ένα αυστηρό χρονικό πλαίσιο, είναι εύκολο να κατακλύσετε την πολυπλοκότητα του έργου. Υπάρχουν πολλά βήματα για το σχεδιασμό ενός ιστότοπου ή μιας εφαρμογής. Αυτά τα βήματα ποικίλλουν ελαφρά από άτομο σε άτομο, αλλά η βασική ροή εργασίας παραμένει η ίδια.
Με μια καλή ροή εργασιών και με λίγα εργαλεία και λογισμικό, θα κρατήσετε εύκολα την μπάλα και θα αποφύγετε τους μακροχρόνιους κύκλους ανάδρασης.
Εδώ είναι ένας πρακτικός οδηγός για μια ροή εργασίας σχεδιασμού που μπορείτε να χρησιμοποιήσετε για να αυξήσετε την παραγωγικότητα της ομάδας σας.
Προετοιμασία: Διαχείριση των προσδοκιών
Είτε απλά διατηρείτε μια υπάρχουσα ιστοσελίδα είτε σχεδιάζετε μια νέα ιστοσελίδα από την αρχή, τόσο εσείς όσο και ο πελάτης σας πρέπει να διαχειριστείτε τις προσδοκίες του άλλου.
Ενώ η κύρια ευθύνη σας είναι να κατανοήσετε λεπτομερώς την απαίτηση του έργου, η ευθύνη του πελάτη είναι να κατανοήσετε τον τρόπο με τον οποίο κάθε επιλογή που πραγματοποιείται επηρεάζει το πεδίο και τον προϋπολογισμό του έργου, με τη βοήθειά σας.
Αναφέρετε στον πελάτη σας την απαιτούμενη τεχνολογία, τον απαιτούμενο προϋπολογισμό και το χρονικό πλαίσιο που απαιτείται για την ολοκλήρωση του έργου. Η προσέγγιση του έργου σας με οργανωμένο τρόπο θα εξοικονομήσει χρόνο, προσπάθειες και προϋπολογισμό.
Φάση 1: Καθορισμός στόχων ιστοτόπου
Αυτή είναι ίσως η πιο σημαντική φάση κάθε σχεδίου σχεδιασμού, καθώς καθορίζετε τους στόχους, ρυθμίζετε τη συνολική δομή, αποφασίζετε για το περιεχόμενο και αναθέτετε τους ρόλους και τα διάφορα παραδοτέα σε όλο το έργο. Με τον σωστό προγραμματισμό από την αρχή, εξοικονομείτε τον εαυτό σας από πολύ θλίψη αργότερα.
Εδώ εργάζεστε με τον πελάτη για να καθορίσετε το χρονοδιάγραμμα, τον προϋπολογισμό, το χρονοδιάγραμμα, τις τεχνικές ανάγκες, το οπτικό στυλ και τη δομή περιεχομένου για το κοινό-στόχο.
Όταν διαχειρίζεστε τις προσδοκίες και ξεκινάτε με το σχέδιό σας σχεδιασμού, θα ήθελα να συστήσω τη χρήση μιας άκαμπτης και εύχρηστης διαχείρισης έργων για να παρακολουθείτε τους καθορισμένους στόχους, τους προϋπολογισμούς, τα καθήκοντα και τα χρονοδιαγράμματα.
Trello
Trello είναι ένα πολύ γνωστό και εύκολο στη χρήση εργαλείο διαχείρισης έργου. Σας επιτρέπει να δημιουργήσετε διάφορα φύλλα για διάφορα έργα. Με το Trello μπορείτε να πάρετε μια γρήγορη επισκόπηση των εργασιών ρεύματος και των καθυστερημένων αναγκών σας.
Asana
Asana είναι ένα εξαιρετικό εργαλείο, και ο εντοπιστής εργασιών. Μπορείτε ακόμη να συνεργαστείτε με τους συναδέλφους και τους πελάτες σας στο Asana, που σας επιτρέπει να κρατάτε το έργο σας διαφανές και όλους ενημερωμένους.
Κατασκήνωση βάσης
Ένα άλλο πολύ γνωστό, αλλά εξαιρετικό εργαλείο διαχείρισης έργου είναι Κατασκήνωση βάσης . Παρόμοια με τα εργαλεία που αναφέρθηκαν παραπάνω, επιτρέπει σε εσάς και την ομάδα σας να παρακολουθείτε κάθε παραδοτέο έργο και σας επιτρέπει να συνεχίζετε.
Φάση 2: Αναπτύξτε τη δομή του ιστοτόπου και βγάλτε τα χέρια σας βρώμικα
Η δομή της τοποθεσίας αποτελεί τη ραχοκοκαλιά της ιστοσελίδας. Λειτουργεί ως οδηγός αναφοράς για την ομάδα καθ 'όλη τη διάρκεια του έργου. Χρησιμοποιήστε τα διαγράμματα ροής για να δείξετε τη ροή της δομής.
Χάρτης ιστότοπου: Η δημιουργία ενός χάρτη ιστότοπου είναι ζωτικής σημασίας για την κατανόηση της οργάνωσης περιεχομένου. Είναι σημαντικό να συνεχίσετε να ενημερώνετε τον χάρτη ιστότοπου μετά από κάθε αλλαγή. Εάν δεν το κάνετε, τα πράγματα θα πάρουν βρώμικο.
Συρματόπλεγμα: Το περιεχόμενο του ιστότοπου πρέπει να επιδιορθωθεί πριν τεθεί σε εφαρμογή το σχέδιο και τα γραφικά.
Τα συρματοπλέγματα είναι σκίτσα μικρής πιστότητας του ιστότοπου ή της εφαρμογής για κινητά. Τα συρματοπλέγματα χρησιμοποιούνται για τη δημιουργία παραληπτών για το περιεχόμενο, για τον καθορισμό προτεραιοτήτων για στοιχεία στη σελίδα και για την τεκμηρίωση των απαιτήσεων. Αυτό γίνεται πολύ σημαντικό στην επόμενη φάση.
Balsamiq
Balsamiq είναι ένα γραφικό εργαλείο συρραφής που βοηθά τον σχεδιαστή σας να δημιουργήσει πολλά σχέδια και στη συνέχεια να τακτοποιήσει τα προκατασκευασμένα widget σε ένα πρόγραμμα περιήγησης drag-and-drop για την ομάδα να προβάλλει και να προτείνει αλλαγές ταυτόχρονα.
Moqups
Moqups είναι εύκολο στη χρήση, διαθέτει άφθονα χαρακτηριστικά μεταφοράς και απόθεσης και δεν απαιτεί να χρησιμοποιηθεί plug-in του προγράμματος περιήγησης. Μπορείτε να οργανώσετε εύκολα μια παρουσίαση σχεδιασμού για τον πελάτη σας χρησιμοποιώντας αυτό το εργαλείο.
Invision
Invision σας επιτρέπει να ανεβάσετε σχέδια εργασίας και να δημιουργήσετε αλληλεπιδράσεις χρησιμοποιώντας τα hotspots, όπως ακριβώς και οποιαδήποτε πραγματική εφαρμογή. Ένα από τα χαρακτηριστικά του standout είναι η δυνατότητα να στέλνετε clickable σχέδια στο τηλέφωνό σας μέσω SMS, υπογραμμίζοντας τη σημασία του να είναι σε θέση να δοκιμάσει τα σχέδιά σας στο σωστό πλαίσιο.
Νοτισμός
Νοτισμός είναι ένα από τα καλύτερα εργαλεία που χρησιμοποιούν οι δημιουργικές ομάδες για να επιταχύνουν τη διαδικασία εργασίας τους. Πρόκειται για μια πλατφόρμα συνεργασίας και σχεδιασμού βίντεο. Βοηθά τους δημιουργικούς επαγγελματίες να μοιράζονται το έργο τους και να λαμβάνουν σχόλια μέσω σχεδίων και σημειώσεων. Το Notism επιτρέπει επίσης τη δημιουργία διαφορετικών εκδόσεων μιας οθόνης. Με την εύκολη εναλλαγή μεταξύ διαφορετικών οθονών, μπορείτε να έχετε καλύτερη εικόνα της εξέλιξης του έργου σας.
Φάση 3: Σχεδιασμός και παραγωγή
Σε αυτή τη φάση, βεβαιωθείτε ότι ο σχεδιαστής συνεργάζεται με τον προγραμματιστή για να εξασφαλίσει την εφαρμογή συνεκτικών σχεδίων.
Αφού ο πελάτης εγκρίνει τα σχέδια, ο σχεδιαστής και η γραφική ομάδα εργάζονται για την εμφάνιση και την αίσθηση της ιστοσελίδας. Η συμπίεση, η διαφάνεια, η αποτελεσματική χρήση του χρώματος και του σχεδιασμού συνδυάζονται για τη δημιουργία αποτελεσματικών γραφικών web.
Το στάδιο της παραγωγής είναι ένα σημείο όπου δημιουργείται ο πραγματικός ιστότοπος. Μετά την ολοκλήρωση του σχεδιασμού και της διαρρύθμισης του χώρου, ο χώρος εισέρχεται στο μηχανολογικό τμήμα του έργου. Εδώ, θα πάρετε όλα τα μεμονωμένα γραφικά στοιχεία από το πρωτότυπο και θα τα χρησιμοποιήσετε για να δημιουργήσετε την πραγματική, λειτουργική τοποθεσία.
Github
Ο κωδικός σας θα αλλάξει μία φορά, δύο φορές και ίσως πολύ περισσότερο από αυτό. Github σας επιτρέπει να εργάζεστε αποτελεσματικά με διαφορετικές εκδόσεις του ιστοτόπου σας. Το εργαλείο λάμπει πραγματικά όταν εργάζεστε μαζί με μια ομάδα προγραμματιστών. Αυτή είναι η συνεργασία κώδικα στο καλύτερο δυνατό.
CodePen
Αυτό είναι υπέροχο. Είναι ένα ηλεκτρονικό πρόγραμμα επεξεργασίας για όλες τις ανάγκες HTML, CSS και JS. Συνδυάζει εύκολα με την Github και είναι φυσικά συνεργατική. Η ιδέα είναι να μπορέσετε να δοκιμάσετε κομμάτια κώδικα και να βρούμε μια σωστή λύση χωρίς να χρεώσουμε τον υπόλοιπο κώδικα.
Φάση 4: Δοκιμές, συλλογή ανατροφοδοτήσεων και αποκατάσταση σφαλμάτων
Κανένα έργο δεν είναι πραγματικά χωρίς ελαττώματα. Και παρόλο που οι δοκιμές είναι κάτι που γίνεται σε όλη τη διαδικασία ανάπτυξης, θα παραμείνουν πάντα σφάλματα. Και δεν μιλάμε μόνο για σφάλματα λογισμικού. Ακόμα και ένα σχέδιο μπορεί να είναι buggy.
Έτσι τώρα, είναι σημαντικό να ξεκινήσετε τον έλεγχο σαν τρελό. Η έγκαιρη αντιμετώπιση προβλημάτων εξοικονομεί πολύ χρόνο και προσπάθεια. Είναι κρίσιμο για όλους τους ανθρώπους που συμμετέχουν στη δημιουργία του ιστότοπου να συμμετέχουν σε δοκιμές. Ωστόσο, οι δοκιμές πρέπει να είναι μια ευκίνητη διαδικασία. Μόλις ξεκινήσετε την τοποθεσία ή είστε στη διαδικασία εκτόξευσης, πολλοί άνθρωποι πρόκειται να αρχίσουν να τη χρησιμοποιούν και θα παρέχουν ανατροφοδότηση σχετικά με τον ιστότοπο.
Και παρόλο που βάζετε όλη την προσπάθεια που μπορείτε για να δοκιμάσετε τον ιστότοπο, θα έχετε χάσει ένα ζευγάρι σφάλματα ή νέα θα εμφανιστούν με την πάροδο του χρόνου. Είναι σημαντικό να λαμβάνετε πληροφορίες σχετικά με σφάλματα και ζητήματα το συντομότερο δυνατό. Εάν μπορείτε να ζητήσετε από τους χρήστες σας να σας αναφέρουν αυτά, είστε χρυσός.
Usernap
(Πλήρης αποκάλυψη: δουλεύω για το Usersnap.) Κατασκευάσαμε Usernap ως οπτικό εργαλείο παρακολούθησης σφαλμάτων και ανατροφοδότησης που διευκολύνει το έργο των δοκιμών λογισμικού. Δίνει τη δυνατότητα στους πελάτες, τους επισκέπτες της ιστοσελίδας και τους συναδέλφους να αναφέρουν σφάλματα, να αλλάζουν αιτήματα ή απλά να ανατροφοδοτούν τον ιστότοπό σας. Επίσης για τη χειρωνακτική δοκιμή ιστότοπου, το Usernap είναι ένα ασφαλές στοίχημα, καθώς επιταχύνει τη ροή εργασιών σας μέσω εύχρηστων εργαλείων.
Έτσι, για να ανασκοπήσετε ...
Τα σχέδια σχεδιασμού απαιτούν από πολλούς ανθρώπους να συνεργαστούν. Η συνεχής ανατροφοδότηση είναι ένα από τα πιο σημαντικά μέρη της παράδοσης ενός έργου όπως ζητήθηκε από τον πελάτη και μέσα στα καθορισμένα χρονικά όρια. Με όλη αυτή την ακαταστασία και το γεγονός ότι οι ιστοτόποι γίνονται όλο και πιο περίπλοκοι κάθε μέρα, τα ηλεκτρονικά εργαλεία καθιστούν εύκολη την ολοκλήρωση του έργου μεταξύ όλων των εμπλεκόμενων και την άμεση ανάδραση από αυτά.
Η ενσωμάτωση αυτών των εργαλείων σε μια σταθερή ροή εργασίας, πραγματικά σας βοηθά να φτάσετε εκεί που πρέπει να βρίσκεστε σε έναν ήδη ανταγωνιστικό τομέα.
Προτεινόμενη εικόνα, εικόνα ομαδικής εργασίας μέσω Shutterstock.