Η σημασία του Wireframing πρίν το design

• 1/23/2015

Το Wireframing είναι ένα πολύ σημαντικό βήμα στον σχεδιασμό και την ανάπτυξη μιας ιστοσελίδας ή μιας εφαρμογής. Στο σημερινό άρθρο θα δούμε γιατί είναι σημαντικό να σχεδιάζουμε wireframes πρίν ξεκινήσουμε την διαδικασία του σχεδιασμού της σελίδας ή της εφαρμογής μας και θα προτείνουμε 10 δωρεάν εργαλεία για wireframing.

Τι είναι ένα Wireframe

Το Wireframe είναι ένα χαμηλού επιπέδου σχεδιάγραμμα (προσχέδιο, σκελετός, blueprint) του design μας, το οποίο μας βοηθάει τόσο εμάς όσο και τους πελάτες μας, να δούμε την δομή και την αίσθηση που αφήνει ο σχεδιασμός μας. Στα wireframes αναπαράγουμε τα στοιχεία όλης της σελίδας στις πραγματικές τους διαστάσεις και μεγέθη, αλλά παρόλα αυτά δεν περιέχει γραφιστικά στοιχεία. Απλά την θέση που θα πάρουν στον τελικό σχεδιασμό.
Μέσα από το wireframe μπορούμε να κάνουμε δομικές αλλαγές, αλλαγές σε κείμενα, τίτλους και στοιχεία, σε πολύ μικρό χρόνο, και να επικοινωνήσουμε το design μας ακόμα πιο εύκολα και ξεκάθαρα.

Η βέλτιστη διαδικασία design

Από designer σε designer υπάρχουν διαφορετικές τακτικές που ακολουθούνται κατά την διαδικασία του σχεδιασμού. Παρόλα αυτά, ο βέλτιστος και πιο παραγωγικός τρόπος σχεδιασμού ακολουθεί στο παρακάτω γράφημα.
proccess

Μετά την επικοινωνία της ιδέας, σχεδιάζεται ένα πρόχειρο σκίτσο σε χαρτί και αφού επικοινωνηθεί το σκίτσο, περνάμε σε wireframe. Εδώ υπάρχει όλο το περιθώριο για αλλαγές, διορθώσεις και προσθήκες. Αφού κλείσουμε και συμφωνίσουμε στο wireframe, τότε έρχεται η σειρά του mockup, που ουσιαστικά είναι το “ντύσιμο” του wireframe με γραφικά, χρώματα, εικονίδια και οτιδήποτε άλλο συνοδεύει το design. Τέλος το mockup περνάει σε επίπεδο development.
Πολύ συνιθισμένο πάντως είναι για κάποιους να παραλείπουν τελείως κάποιο ή κάποια από τα ενδιάμεσα παραπάνω βήματα.

Ανάλυση των βημάτων

Στο παραπάνω διάγραμμα, μετά την ιδέα ακολουθούν τα βήματα σχεδιασμού μέχρι το development. Ας δούμε λίγο πιο αναλυτικά τι είναι κάθε βήμα και πως μας βοηθάει στην βέλτιστη δημιουργία των designs μας
SKETCH (ΣΚΙΤΣΟ)
Το σκίτσο (συνήθως με χαρτί και μολύβι ή με κάποιο tabler) μας βοηθάει να βρούμε γρήγορα και εύκολα την βάση του σχεδίου μας. Μας βοηθάει να επικοινωνήσουμε τον αρχικό σχεδιασμό της σελίδας και την δομή της. Επίσης στο σκίτσο μπορούμε να επεξεργαστούμε το σχέδιο μας πάρα πολύ εύκολα με γόμα.
WIREFRAME (ΣΚΕΛΕΤΟΣ)
Το wireframe, που ακολουθεί, είναι ουσιαστικά το “ντύσιμο” των σκίτσων με πιο καθαρά στοιχεία, γραμμές ακόμα και χρώματα. Το wireframe περιέχει την αληθινή διάσταση των πραγμάτων, με σωστές αποστάσεις, και σωστά μεγέθη στα διάφορα στοιχεία. Μέσα από το wireframe μπορούμε να δούμε ξεκάθαρα την δομή της σελίδας, και πλέον οι όποιες αλλαγές χρειαστούν να μπορούν να γίνουν πολύ γρήγορα.
MOCKUP (ΤΟ ΠΡΑΓΜΑΤΙΚΟ ΣΧΕΔΙΟ)
Τέλος το mockup είναι το πραγματικό look and feel της ιστοσελίδας. Χρώματα, fonts, στοιχεία, icons και ότι άλλο συνοδεύει το design έρχονται και δένουν με τον σκελετό της σελίδας.

10 Δωρεάν Εργαλεία Wireframe

Παρακάτω θα δούμε μια λίστα από 10 δωρεάν εργαλεία wireframing που θα σας βοηθήσουν να φτιάξετε γρήγορα και έυκολα τα δικά σας wireframes. Η λίστα αυτή είναι μια πρόταση του mashable.com