Ίσως έχετε ακούσει για τα Wireframes στο Web Design, ίσως και όχι. Το σίγουρο είναι πάντως πως όσο εξελίσσονται οι απαιτήσεις στο επάγγελμα του σχεδιαστή ιστοσελίδων, τόσο πολύ αυξάνονται και οι ανάγκες για τη χρήση των Wireframes. Στη συνέχεια του σημερινού άρθρου θα δούμε ακριβώς τι είναι αυτά τα Wireframes, τι μπορούν να προσφέρουν στην παραγωγική διαδικασία και πώς μπορείτε να φτιάχνετε εύκολα τα δικά σας.

Τι είναι τα Wireframes στο Web Design;

Wireframe στο Web Design είναι ο πρόχειρος σχεδιασμός μια ιστοσελίδας ο οποίος γίνεται πριν τον κανονικό της σχεδιασμό. Συνήθως γίνεται με πολύ απλά εργαλεία γιατί στόχος είναι η προβολή της λειτουργικότητας της σελίδας και όχι του εικαστικού της. Λόγω της απλότητάς τους και της έλλειψης εικαστικού, είναι συνήθως ασπρόμαυρα και έχουν μοναδικό στόχο να απεικονίσουν την τοποθέτηση των στοιχείων μιας σελίδας και τη λειτουργικότητα της. Στοιχεία όπως scrollers, κουμπιά, θέσεις εικόνων, θέσεις τίτλων, κ.α.

Τι κερδίζετε από την χρήση των Wireframes;

Βλέποντας πώς θα λειτουργήσει ένας διαδικτυακός τόπος, πριν αυτός σχεδιαστεί, σας βοηθάει πάρα πολύ στην κατανόηση του UID (User Interface Design) και δίνει την ευκαιρία στη δημιουργική ομάδα να προβλέψει τυχόν προβλήματα που ίσως προκύψουν στο μέλλον. Εκτός από την ίδια τη δημιουργική ομάδα, οι πελάτες σας μπορούν να φανταστούν τον διαδικτυακό τους τόπο σε ένα αρχικό στάδιο. Αυτό τους βοηθάει στο να καταλάβουν τι ακριβώς θα παραλάβουν και τους δίνει την ευκαιρία να κάνουν τις επεμβάσεις που θέλουν σε ένα σημείο που δεν επηρρεάζει την παραγωγική διαδικασία. Τα εμπόδια αντιμετωπίζονται σε αρχικό στάδιο και ο πελάτης νιώθει ότι έχει μεγαλύτερη συμμετοχή στην όλη διαδικασία.

Πως μπορείτε να φτιάξετε δικά σας Wireframes;

Ο πιο συνηθισμένος τρόπος κατασκευής Wireframes είναι με το χαρτί και το μολύβι. Πάρτε μια λευκή κόλλα χαρτί και το μολύβι σας και αρχίστε να σχεδιάζετε τις ιδέες σας. Η επαφή αυτή με το project σάς δίνει τη δυνατότητα να διευρύνετε τους ορίζοντές σας. Το χαρτί και το μολύβι σας δίνουν την δυνατότητα να δείτε σε εικόνα αυτό που φαντάζεστε πολύ γρήγορα! Αφού ολοκληρώσετε τις ιδέες σας, μπορείτε να τις σκανάρετε και να τις αποστείλετε στον πελάτη σας σαν εικόνες, ώστε να αρχίσει να αποκτάει και εκείνος μια καλύτερη ιδέα του τι σκοπεύετε να του ετοιμάσετε και να του δώσετε την ευκαιρία να επέμβει σε αυτό το αρχικό στάδιο.

Επίλογος

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

Σχετικά άρθρα

• 21 εργαλεία για σωστό Web Design Wireframing (4)
• Τι είναι UID (User Interface Design) και γιατί είναι απαραίτητο; (3)
• Μέχρι πού πρέπει να φτάνουμε πριν την υπογραφή ιδιωτικού συμφωνητικού; Μέρος 2ο (3)
• Χρήσιμες συμβουλές για την σημαντική μετάβαση από tables σε divs. (0)
• Χρήσιμα Web 2.0 online εργαλεία (generators) για να σχεδιάσετε εντυπωσιακά websites. (0)