Ο κορυφαίος Αμερικανός τζαζίστας Charles Mingus, είχε πει ότι να μετατρέπεις το απλό σε περίπλοκο είναι κάτι κοινό και αναμενόμενο. Το να απλοποιείς το περίπλοκο λέγεται δημιουργικότητα. Μάθετε σε αυτό το άρθρο τι σχέση έχουν όλα το παραπάνω με το σχεδιασμό ιστοσελίδων.
Στη μουσική, οι πολύπλοκες συνθέσεις που φτάνουν στα αυτιά μας ως απλές μελωδίες κρύβουν περισσότερη περιπλοκότητα απ' ότι θα μπορούσε κανείς να φανταστεί. Εκεί διακρίνεται και το μεγαλείο της τέχνης τους.
Στο σχεδιασμό ιστοσελίδων, αν και εκ των πραγμάτων απουσιάζει η έννοια της διαχρονικότητας και της σπουδαιότητας των έργων που υλοποιούνται, δε παύει να συνυπάρχει το αντίστοιχο ζεύγος της περιπλοκότητας και της φαινομενικής απλότητας.
Υπάρχουν όμως 3 βασικά εργαλεία/μέθοδοι στη φαρέτρα του Designer που τον βοηθούν να κάνει τα δύσκολα απλά και αυτά δεν είναι άλλα από τα wireframes, τα mockups και τα prototypes. Όποιος γνωρίζει τι ακριβώς είναι το καθένα από αυτά και τι διαφορές έχει από τα υπόλοιπα, να χτυπήσει χαρωπά τα δυο του χέρια.
Για όσους τα συναντούν πρώτη φορά... ας πάρουμε τα πράγματα με τη σωστή σειρά.
1. Wireframes
Τα wireframes είναι μια πρώτη αποτύπωση, ένα σχέδιο δράσης. Ο χρόνος που θα αναλωθεί σε αυτά πρέπει να καλύψει τις βασικές ανάγκες και να λύσει τις απορίες που αφορούν το γενικό layout, τη δομή, τα στοιχεία του website (header, footer, main menu κλπ.) και πού θα εμφανίζονται αυτά. Όλα αυτά πρέπει να έχουν επιλυθεί πριν περάσουμε στις αισθητικές λεπτομέρειες.
Για αυτό το λόγο, τα wireframes σχεδιάζονται ή συνήθως σκιτσάρονται γρήγορα χωρίς λεπτομερή σχεδιασμό. Σε αυτή τη φάση έχει περισσότερη σημασία να ξέρουμε αν θα υπάρχει ένα slideshow στην αρχική σελίδα ενός site, αλλά δεν μας ενδιαφέρει προς το παρόν να γνωρίζουμε πώς θα μοιάζει αυτό.
Το βασικό πλεονέκτημα των wireframes είναι ότι δίνουν στην ομάδα που εμπλέκεται σε ένα έργο, τη γενική εικόνα του, πριν η ομάδα αρχίσει να εστιάζει στις λεπτομέρειες. Γίνεται ένας πρώτος, σωστός προγραμματισμός που μειώνει το ρίσκο μελλοντικών λαθών ή αλλαγών, επειδή κάτι απλά ξεχάστηκε.
Τα wireframes μπορεί να υλοποιηθούν είτε με τον πιο απλό και παραδοσιακό τρόπο, σκιτσάροντας δηλαδή στο χαρτί, είτε χρησιμοποιώντας κάποιο σχεδιαστικό πρόγραμμα όπως είναι το Illustrator και το Photoshop. Υπάρχουν επίσης προγράμματα που έχουν φτιαχτεί ειδικά για το σκοπό του wireframing όπως είναι το UXPin, το Balsamiq και το Moqups.
2. Mockups
Τα mockups με τη σειρά τους, έρχονται να συμπληρώσουν το αισθητικό κενό που αφήνουν τα wireframes. Παρέχουν δηλαδή όλη την πληροφορία για το πώς θα μοιάζει το τελικό προϊόν. Σημαντικές πληροφορίες, όπως είναι η χρωματική παλέτα, οι γραμματοσειρές και η γενικότερη αισθητική, δίνονται μέσα από τη δημιουργία του mockup.
Το πιο πρακτικό πλεονέκτημα των mockups είναι ότι είναι ευκολότερα αντιληπτά και κατανοητά από τους ανθρώπους που δεν έχουν σχέση με τη διαδικασία του web design. Ενώ τα wireframes απαιτούν τη φαντασία του θεατή, τα mockups απεικονίζουν πολύ πιο ρεαλιστικά το τελικό αποτέλεσμα.
Το πιο συνηθισμένο και διαδεδομένο πρόγραμμα για το σχεδιασμό των mockups είναι το Photoshop. Πέρα από αυτό όμως, προγράμματα σαν αυτά που αναφέραμε παραπάνω (UXPin, Invision, Marvel) μπορούν επίσης να χρησιμοποιηθούν. Φυσικά, υπάρχει και η επιλογή της αποτύπωσης απευθείας σε κώδικα που κάνει πιο γρήγορη και άμεση τη διαδικασία των αλλαγών και των διορθώσεων.
3. Prototypes
Αφού λύσαμε το δομικό κομμάτι με τα wireframes και το αισθητικό με τα mockups, μας έμεινε το λειτουργικό κομμάτι. Εδώ τη λύση δίνουν τα prototypes.
Στη διαδικασία του prototyping (prototype = πρωτότυπο), μπορούμε για πρώτη φορά να «συνομιλήσουμε» με το προϊόν που έχουμε δημιουργήσει. Εξερευνούμε δηλαδή σαν σε εξομοιωτή, το περιβάλλον που έχουμε σχεδιάσει.
Με το prototyping μας δίνεται η ευκαιρία να αντιληφθούμε αν όλα τα στοιχεία έχουν τοποθετηθεί σωστά, με σκοπό το καλύτερο δυνατό user experience (UX), κοινώς την εμπειρία που θα έχει ο χρήστης χρησιμοποιώντας το προϊόν μας.
Ένα από τα πιο εμφανή πλεονεκτήματα του prototyping, είναι ότι δίνει την ευκαιρία για user testing (δοκιμαστική χρήση του προϊόντος από μια επιλεγμένη ομάδα ανθρώπων) πριν γίνει επίσημα διαθέσιμο το προϊόν. Συνεπώς, δίνεται η δυνατότητα για βελτιώσεις, προσθήκες ή αλλαγές.
Αν και απαιτεί αρκετή φαντασία, το prototyping με χαρτιά και σκίτσα αποτελεί μια από τις μεθόδους υλοποίησης. Πιο συνηθισμένες πρακτικές είναι αυτές που περιλαμβάνουν τη χρήση κάποιου προγράμματος παρουσίασης όπως είναι το Keynote, κώδικα ή σχεδιαστικά προγράμματα και εφαρμογές σαν αυτά που αναφέραμε και στον σχεδιασμό των mockups.
Τα συμπεράσματα
Γνωρίζοντας και κατανοώντας πλήρως τα πλεονεκτήματα και τις δυνατότητες της κάθε μεθόδου, μπορεί κανείς εύκολα να αποφασίσει και να προσαρμόσει τη διαδικασία που ταιριάζει ανά έργο.
Σε ένα έργο με πολλές γραφιστικές λεπτομέρειες, όπως ας πούμε σε ένα site μαγειρικής, θα χρειαστεί σίγουρα ο σχεδιασμός ενός mockup. Αντίστοιχα, σε ένα έργο με τεχνικές πολυπλοκότητες και στοιχεία αλληλεπίδρασης, όπως ας πούμε σε μια εφαρμογή για κινητό για μια αεροπορική εταιρεία, είναι απαραίτητη η έγκαιρη κατασκευή ενός prototype.
Ο στόχος σε κάθε περίπτωση είναι το τελικό design να «κυλάει» στα χέρια των χρηστών, έτσι όπως «κυλάει» και η εκτέλεση του "Take the A Train" των Charles Mingus Sextet στα αυτιά των ακροατών.
