Χρησιμοποιώντας συρματοπλέγματα για να εξομαλύνετε τη διαδικασία ανάπτυξης
Η δημιουργία ενός wireframe είναι ένα από τα πρώτα βήματα που πρέπει να κάνετε πριν σχεδιάσετε έναν ιστότοπο.
Ένα wireframe σας βοηθά να οργανώσετε και να απλοποιήσετε τα στοιχεία και το περιεχόμενο ενός δικτυακού τόπου και είναι ένα ουσιαστικό εργαλείο στη διαδικασία ανάπτυξης.
Ένα wireframe είναι βασικά μια οπτική αναπαράσταση της διάταξης περιεχομένου σε ένα σχέδιο ιστοσελίδας .
Το wireframe λειτουργεί ως πρωτότυπο που δείχνει την τοποθέτηση των χαρακτηριστικών της σελίδας, όπως την κεφαλίδα, το υποσέλιδο, το περιεχόμενο, τις πλευρικές γραμμές και την πλοήγηση.
Καθορίζει επίσης την τοποθέτηση των στοιχείων σε αυτές τις περιοχές περιεχομένου. Αν θέλετε να αναπτύξετε έναν ιστότοπο που να ταιριάζει με ακρίβεια τις απαιτήσεις του πελάτη και να ελαχιστοποιήσετε τις αναθεωρήσεις των έργων, η φωτογράφηση θα σας κρατήσει σε τροχιά.
Οφέλη από τη συρραφή
Η δημιουργία ενός wireframe δίνει στον πελάτη, τον προγραμματιστή και τον σχεδιαστή την ευκαιρία να εξετάσει με κριτικό πνεύμα τη δομή της ιστοσελίδας και τους επιτρέπει να κάνουν τις αναθεωρήσεις εύκολα νωρίς στη διαδικασία.
Η τεχνολογία Wireframing προσφέρει τα ακόλουθα βασικά πλεονεκτήματα:
- Δίνει στον πελάτη μια έγκαιρη, κοντινή όψη του σχεδιασμού της τοποθεσίας (ή του νέου σχεδιασμού).
- Μπορεί να εμπνεύσει τον σχεδιαστή, με αποτέλεσμα μια πιο ρευστική δημιουργική διαδικασία.
- Δίνει στον προγραμματιστή μια σαφή εικόνα των στοιχείων που θα χρειαστεί να κωδικοποιήσει.
- Κάνει την κλήση για δράση σε κάθε σελίδα καθαρή.
- Είναι εύκολο να προσαρμοστεί και μπορεί να δείξει τη διάταξη πολλών τμημάτων του ιστότοπου.
Εργαλεία για την ανάπτυξη συρμάτων
Έχετε πολλά εργαλεία για να επιλέξετε κατά τη δημιουργία ενός wireframe:
- Το χέρι σκίτσο σε χαρτί είναι πάντα ένα καλό σημείο εκκίνησης για κάθε σχεδιαστή. Παρέχει έναν γρήγορο και εύκολο τρόπο εστίασης και οργάνωσης. Εάν είστε πολύ ακριβείς με το σκίτσο, θα μπορούσατε να το χρησιμοποιήσετε ως τελικό σύρμα. (Βλέπε Σχήμα 1.)
- Διάγραμμα ροής ή λογισμικό χαρτογράφησης μυαλού , όπως Visio . Αυτές οι επιλογές λογισμικού προσφέρονται με προσυσκευασμένα στοιχεία που σας επιτρέπουν να δημιουργείτε εύκολα απεικονίσεις ροής για το σύρμα σας.
- Λογισμικό δημιουργίας πρωτοτύπων στο Web , όπως Γκλίφι ή Balsamiq . Τα εργαλεία όπως αυτά δημιουργήθηκαν ειδικά για το σκοπό της δημιουργίας πλαισίων και έχουν εύχρηστες δυνατότητες δημιουργίας πρωτοτύπων.
- Λογισμικό γραφικών , όπως το Photoshop ή το Illustrator. Το πλεονέκτημα της χρήσης αυτών των εργαλείων είναι ότι το wireframe μπορεί στη συνέχεια να μετατραπεί απευθείας σε ένα γραφικό mockup του σχεδιασμού της ιστοσελίδας. Ωστόσο, το μειονέκτημα είναι ότι θα πρέπει να δημιουργήσετε όλα τα στοιχεία με το χέρι.
- (X) Τα καλώδια κειμένου HTML είναι σχεδόν ίδια με τους ίδιους τους δικτυακούς τόπους. Μπορείτε να τοποθετήσετε το wireframe με κώδικα πριν εφαρμόσετε τα στυλ, ή μπορείτε να δημιουργήσετε μια πλήρως στυλ, υψηλής πιστότητας διάταξη που μοιάζει πολύ με ένα τελικό σχέδιο. (Βλέπε Σχήμα 2)
Τελικά, ο προγραμματιστής ή ο σχεδιαστής πρέπει να επιλέξει το εργαλείο που προτιμά. Προσωπικά, χρησιμοποιώ το Photoshop επειδή μου αρέσει ο τρόπος που οργανώνει τη διαδικασία και πόσο εύκολα μπορώ να μετατρέψω το αρχείο σε ένα mockup.
Παράδειγμα συρμάτινου πλαισίου
Το επίπεδο λεπτομέρειας σε ένα wireframe εξαρτάται από διάφορους παράγοντες, όπως: πόση κατεύθυνση και περιεχόμενο έχει ο πελάτης που έχει παράσχει, πόσο περίπλοκο είναι το περιεχόμενο, πόσο μακριά βρίσκεται στη διαδικασία και ποια λεπτομέρεια θα θέλατε να περιλαμβάνει .
Ακολουθούν παραδείγματα κορνιζών που δημιουργήθηκαν με διαφορετικά εργαλεία και παρουσίαζαν διαφορετικά επίπεδα λεπτομέρειας και χρώματος:
Σχήμα 1: Αυτό το απλό σκίτσο για το παράθυρο Coastal Capital Partners (που τώρα μετονομάστηκε σε Broad Reach Retail Partners) χρησιμοποιήθηκε για τη δημιουργία γραφικών mockups και τελικά για τον τελικό σχεδιασμό. Με Μάικ Ρόιντ .
Εικόνα 2: Σύστημα καλωδίων HTML πολύ χαμηλής πιστότητας. Χρήσιμο για να δείξει τι θα μοιάζει με έναν ιστότοπο πριν προστεθεί το στυλ. Πολύ χρήσιμη για τους χρήστες με προβλήματα όρασης.
Εικόνα 3: Σκελετός καλωδίου χαμηλής πιστότητας για την αγκαλιάζουσα κοινότητα κατοικίδιων ζώων , από τον Jesse Bennett-Chamberlain της 31ης τάξης .
Σχήμα 4: Ένα προκαταρκτικό mockup ενός εργαλείου κοινωνικής διάσκεψης που βασίζεται Τιντλλυβίκι για χρήση στο Le Web 3. Οι σημειώσεις που το συνοδεύουν είναι στο tiddleleweb.tiddlyspot.com . Συρματόπλεγμα από Phil Hawksworth.
Εικόνα 5: Αυτό βασίζεται στην προηγμένη χρήση ενός συστήματος δημοσίευσης ιστολογίων (WordPress). Με Mattheiu Mingassson ή στρατηγικές internet και συμβουλευτικές υπηρεσίες του Activeside .
Εικόνα 6: Ένα καλώδιο για το την αγκαλιάζουσα κοινότητα κατοικίδιων ζώων , από τον Jesse Bennett-Chamberlain της 31ης τάξης .
Εικόνα 7: Σκελετό με χρώμα και εικόνες. Συγγραφέας σελίδα wireframe από Bokhandel .
Εικόνα 8: Ένα άλλο καλώδιο με χρώμα. Με τον Mattheiu Mingassson του Activeside Διαδικτυακές στρατηγικές και συμβουλευτικές υπηρεσίες .
Βέλτιστες πρακτικές
Για να επιτύχετε τα βέλτιστα αποτελέσματα, πρέπει να λάβετε υπόψη ορισμένα σημαντικά πράγματα κατά την ανάπτυξη ενός wireframe:
- Απλότητα. Το κλειδί είναι να το κρατήσει αρκετά απλό ώστε να είναι σαφές στον πελάτη και να είναι ευέλικτο για τον σχεδιαστή, αλλά αρκετά λεπτομερές για να καθοδηγήσει τον προγραμματιστή. Όπως αναφέρθηκε, θα μπορούσατε να δημιουργήσετε ένα καλώδιο υψηλής πιστότητας, αλλά κάνοντας αυτό νωρίς στη διαδικασία ανάπτυξης θα μπορούσε να προκαλέσει σύγχυση για τον πελάτη, ο οποίος μπορεί να το σφάλει για ένα τελικό σχέδιο.
- Εργαστείτε σε κλίμακα του γκρι. Κατά τη δημιουργία στοιχείων για ένα wireframe, είναι καλύτερο να εργάζεστε σε κλίμακα του γκρι έτσι ώστε να μπορείτε να εστιάσετε στη διάταξη χωρίς να αποσπούνται από τη σχεδίαση. Αν σας έχει δοθεί έγχρωμο λογότυπο, μετατρέψτε το σε κλίμακα του γκρι επίσης. Για να διακρίνετε και να ταξινομήσετε διάφορα στοιχεία, παρουσιάστε σχήματα και περιγράμματα σε διαφορετικές αποχρώσεις του γκρι.
- Χρησιμοποιήστε συρματοπλέγματα σε συνδυασμό με έναν χάρτη ιστότοπου. Ένα wireframe είναι μια οπτική αναπαράσταση ενός καλού sitemap, όχι αντικατάστασης. Ένας χάρτης ιστοτόπου είναι ένα χρήσιμο εργαλείο για κάθε ιστοσελίδα και θα ήταν σίγουρα χρήσιμο να αναφερθεί κατά τη διάρκεια της διαδικασίας ανάπτυξης.
- Επικεντρωθείτε στο επιθυμητό αποτέλεσμα. Έχετε μια σαφή κατανόηση του τρόπου με τον οποίο ο πελάτης σας θέλει τους χρήστες να ανταποκριθούν στη σελίδα πριν δημιουργήσουν το wireframe σας. Οι προσκλήσεις για δράση πρέπει να είναι πολύ σαφείς απλώς από την εξέταση του συρμάτινου πλαισίου.
- Δημιουργήστε ένα καλώδιο πλήρους μεγέθους, αν πρόκειται για έναν ιστότοπο. Αυτό θα δώσει την πιο ακριβή αναπαράσταση της πραγματικής σελίδας.
- Σχεδιάστε τα στοιχεία εξασφαλίζοντας το περιεχόμενο εκ των προτέρων. Σε ένα βέλτιστο σενάριο, ο πελάτης σας θα σας έχει ήδη παράσχει τα στοιχεία που θα εμφανίζονται σε κάθε σελίδα, όπως το λογότυπο, οι διαφημίσεις, τα Flash ή τα προγράμματα αναπαραγωγής βίντεο, τα χαρακτηριστικά, τα τμήματα πλοήγησης και τα στοιχεία πλευρικής, κεφαλίδας και υποσέλιδου. Εάν δεν έχετε αυτές τις πληροφορίες ακόμα, επικοινωνήστε με τον πελάτη σας και λάβετε (ή δημιουργήσετε) ένα χάρτη ιστότοπου. Εάν επανασχεδιάζετε υπάρχοντα στοιχεία, μπορείτε να τα συγκεντρώσετε από μια προσεκτική ανασκόπηση του ιστοτόπου. Σε αυτό το σενάριο, βεβαιωθείτε ότι πρώτα επιβεβαιώσατε με τον πελάτη σας ότι δεν θα χρειαστεί να προσθέσετε ή να αφαιρέσετε στοιχεία, επειδή η μη σαφής κατανόηση των προσδοκιών τους θα επιβραδύνει τη διαδικασία.
Κλίμακα του γκρι σε σχέση με το χρώμα
Κατά τη δημιουργία ενός πλαισίου σύρματος, η εργασία σε κλίμακα του γκρι συμβάλλει στη διατήρηση της εστίασης στην πρωταρχική λειτουργία της διαδικασίας , η οποία είναι να οριστικοποιήσει τη διάταξη και όχι το σχέδιο (βλ. Εικόνα 3). Ένας άλλος κίνδυνος εργασίας στο χρώμα είναι ότι ο πελάτης μπορεί να σφάλει το wireframe για το τελικό mockup.
Ωστόσο, το χρώμα μπορεί να αποδειχθεί χρήσιμο όταν εμφανίζεται η θέση κάθε κλήσης. Επειδή μια σελίδα μπορεί να περιέχει πολλές κλήσεις προς δράση, η ιεράρχηση τους είναι σημαντική. Τα συρματοπλέγματα μπορούν να σας βοηθήσουν να καθορίσετε ποια πρόσκληση για δράση θα τραβήξετε πρώτα το μάτι του χρήστη.
Πρόσφατα εργαζόμουν σε ένα έργο που είχε ένα πολύ ζωντανό λογότυπο, το οποίο, στην περίπτωση αυτή, αποτελούσε την πρώτη πρόσκληση για δράση, επειδή αντιπροσώπευε ένα περιοδικό που κυκλοφόρησε πρόσφατα.
Όταν χρησιμοποιείτε χρώμα, μπορείτε να μάθετε πιο εύκολα αν κάποια στοιχεία υπερτερούν της αρχικής πρόσκλησης για δράση. Αυτή η διαδικασία εξακολουθεί να εμπίπτει στη σφαίρα της συρραφής, αντί του σχεδιασμού του mockup, επειδή οι θέσεις των στοιχείων εξακολουθούν να καθορίζονται.
Το χρώμα μπορεί να προστεθεί σταδιακά στο σκελετό κατά την πρόοδο του έργου , το οποίο είναι πιο αποτελεσματικό από τη μετακίνηση μπροστά με τα mockups πριν την θέση των στοιχείων κλειδωμένη. Με αυτόν τον τρόπο, το γραφικό λογισμικό μπορεί να σας βοηθήσει να μεταβείτε απευθείας σε ένα mockup όταν είστε έτοιμοι.
Τι πρέπει να αποφύγετε
Όπως και άλλες πτυχές της αναπτυξιακής σας διαδικασίας, η wireframing μπορεί να έχει τις παγίδες της αν δεν πραγματοποιηθεί σωστά. Ακολουθούν μερικές συμβουλές για το τι πρέπει να αποφύγετε για να επιτύχετε τα πιο αποτελεσματικά αποτελέσματα:
- Πάρα πολύ συμβαίνει στη σελίδα. Αφήστε άφθονο λευκό χώρο, ώστε ο σχεδιασμός να μην φαίνεται πολύ απασχολημένος ή γεμάτος.
- Έμφαση στο χρώμα και το σχεδιασμό. Η συρματοποίηση είναι για να αποφασιστεί η διάταξη και η θέση των στοιχείων. Παρόλο που ένα wireframe μπορεί να επηρεάσει το σχεδιασμό, η προσθήκη γραφικών και χρώματος θα αποσπάσει πιθανώς μόνο από το σκοπό του.
- Πάρα πολλές λεπτομέρειες. Μπορείτε πάντα να προσθέσετε περισσότερες λεπτομέρειες αργότερα, αλλά αν συμπεριλάβετε πάρα πολλά στην αρχή, ο πελάτης μπορεί να συγχέει το wireframe για το τελικό mockup.
Εάν ενδιαφέρεστε να μάθετε περισσότερα σχετικά με τα wireframes, Wireframe Magazine είναι ένας μεγάλος πόρος που μοιράζεται δείγματα, συζητά τεχνικές και επιλύει προβλήματα που σχετίζονται με την αρχιτεκτονική των πληροφοριών.
Η δημιουργία ενός καλωδιακού πλαισίου για τον ιστότοπο του πελάτη σας παρέχει ένα αποτελεσματικό εργαλείο επικοινωνίας για όλα τα εμπλεκόμενα μέρη.
Ακόμη και η οικοδόμηση ενός απλού συρματοπλέγματος θα εξοικονομήσει χρόνο μακροπρόθεσμα και θα διευκολύνει τη διαδικασία ανάπτυξης για τον σχεδιαστή, τον προγραμματιστή και τον πελάτη.
Γράφτηκε αποκλειστικά για το WDD από τον Eric Shafer.
Χρησιμοποιείτε καλώδια για το σχεδιασμό σας; Ποιοι είναι μερικοί από τους καλύτερους τρόπους για να δημιουργήσετε αποτελεσματικά wireframes;