Μάθετε να χρησιμοποιείτε απλά Wireframes για να ξεκινήσετε τα σχέδιά σας
Ένα wireframe Web είναι ένας απλός οπτικός οδηγός για να σας δείξει τι θα μοιάζει με μια ιστοσελίδα . Προτείνει τη δομή μιας σελίδας , χωρίς να χρησιμοποιεί γραφικά ή κείμενο. Ένα wireframe ιστότοπου θα δείχνει ολόκληρη τη δομή του ιστότοπου - συμπεριλαμβανομένων των σελίδων στις οποίες συνδέεται η τοποθεσία.
Τα καλώδια Web είναι ένας πολύ καλός τρόπος για να ξεκινήσετε το σχεδιαστικό έργο σας. Και ενώ είναι δυνατό να δημιουργήσετε πολύπλοκα σύρματα με τεράστια ποσά λεπτομέρειας, ο προγραμματισμός σας μπορεί να ξεκινήσει με χαρτοπετσέτα και στυλό. Το κλειδί για την κατασκευή καλών καλωδίων είναι να αποκλείσετε όλα τα οπτικά στοιχεία. Χρησιμοποιήστε πλαίσια και γραμμές για να αναπαριστούν εικόνες και κείμενο.
Πράγματα που πρέπει να συμπεριλάβετε σε ένα wireframe ιστοσελίδας:
- πλαίσια για πρωταρχικά γραφικά στοιχεία
- τοποθέτηση των τίτλων και των υποκεφαλαίων
- μια απλή δομή διάταξης
- προσκλήσεις για δράση
- μπλοκ κειμένου
Πώς να χτίσετε ένα απλό Web Wireframe
Δημιουργήστε ένα wireframe ιστοσελίδας χρησιμοποιώντας οποιοδήποτε θραύσμα χαρτιού που έχετε βολικό. Ακολουθεί το πώς το κάνω:
- Σχεδιάστε ένα μεγάλο ορθογώνιο - αυτό μπορεί να αντιπροσωπεύει ολόκληρη τη σελίδα ή μόνο το ορατό τμήμα. Αρχίζω συνήθως με το ορατό τμήμα και έπειτα το επεκτείνω ώστε να περιλαμβάνει στοιχεία που θα ήταν κάτω από την πτυχή.
- Σχεδιάστε τη διάταξη - είναι 2-στήλες, 3-στήλες;
- Προσθέστε ένα πλαίσιο για μια γραφική παράσταση κεφαλίδας - Σχεδιάστε τις στήλες σας αν θέλετε να είναι μία κεφαλίδα πάνω από τις στήλες ή απλώς να την προσθέσετε εκεί που θέλετε.
- Γράψτε "Headline" όπου θέλετε να είναι ο τίτλος σας H1.
- Γράψτε "Sub-Head" όπου θέλετε H2 και χαμηλότερα πρωτοσέλιδα να είναι. Βοηθάει αν τα κάνεις αναλογικά - h2 μικρότερα από h1, h3 μικρότερα από h2, κλπ.
- Προσθέστε κουτιά για άλλες εικόνες
- Προσθήκη πλοήγησης. Εάν σχεδιάζετε καρτέλες, απλά σχεδιάστε κιβώτια και γράψτε "πλοήγηση" στην κορυφή. Ή τοποθετήστε λίστες με κουκκίδες στις στήλες όπου θέλετε να πλοηγηθείτε. Μην γράφετε το περιεχόμενο. Απλά γράψτε "πλοήγηση" ή χρησιμοποιήστε μια γραμμή για να αναπαράγετε κείμενο.
- Προσθέστε επιπλέον στοιχεία στη σελίδα - προσδιορίστε τι είναι με το κείμενο, αλλά μην χρησιμοποιήσετε το πραγματικό κείμενο περιεχομένου. Για παράδειγμα, αν θέλετε ένα κουμπί κλήσης για δράση στο κάτω δεξί μέρος, τοποθετήστε ένα κουτί εκεί και επισημάνετε το "call to action". Μη γράφετε "Αγοράστε τώρα!" σε αυτό το πλαίσιο.
Αφού έχετε γράψει το απλό σύρμα και δεν πρέπει να σας μεταφέρει περισσότερο από 15 λεπτά για να σκιαγραφήσετε ένα, θα το δείξετε σε κάποιον άλλο. Ρωτήστε τους αν υπάρχει κάτι που λείπει και για άλλα σχόλια. Με βάση αυτά που λένε ότι μπορείτε να γράψετε ένα άλλο wireframe ή να κρατήσετε αυτό που έχετε.
Γιατί τα κορδόνια χαρτιού είναι τα καλύτερα για τα πρώτα σχέδια
Παρόλο που είναι δυνατό να δημιουργήσετε κορνίζες χρησιμοποιώντας προγράμματα όπως το Visio, για τις αρχικές συνεδρίες προβληματισμού, θα πρέπει να επιμείνετε σε χαρτί. Το χαρτί δεν φαίνεται να είναι μόνιμο, και πολλοί άνθρωποι θα υποθέσουν ότι το ρίξατε μαζί σε 5 λεπτά και γι 'αυτό μην διστάσετε να δώσετε καλή ανταπόκριση. Αλλά όταν χρησιμοποιείτε ένα πρόγραμμα για να δημιουργήσετε φανταχτερά καλώδια με τέλεια τετράγωνα και χρώματα, διατρέχετε τον κίνδυνο να παγιδευτείτε στο ίδιο το πρόγραμμα και να περάσετε ώρες τελειοποιώντας κάτι που δεν πρόκειται ποτέ να ζήσει.
Τα χαρτοκιβώτια χαρτιού είναι εύκολο να γίνουν. Και αν δεν σας αρέσει, απλώς γεμίστε το χαρτί, πετάξτε το σε ανακύκλωση και πιάστε ένα νέο φύλλο.