Πολύ συχνά ακούμε τον όρο wireframes όταν σχεδιάζουμε μια ιστοσελίδα. Είναι από τα αρχικά στάδια της διαδικασίας δημιουργίας ενός site και πραγματικά είναι πολύ σημαντικό βήμα το οποίο αν ακολουθούμε μας βοηθάει σε όλη την πορεία του project μας. Ας δούμε λοιπόν τι είναι τα wireframes.
Τι είναι τα wireframes;
Σκεφτείτε τα προσχέδια ενός κατασκευαστικού project. Φανταστείτε ότι φτιάχνετε ένα σπίτι και θέλετε να κάνετε εικόνα πώς θα στηθεί πριν ξεκινήσετε να χτίζετε. Κάτι αντίστοιχο είναι τα wireframes μιας ιστοσελίδας. Μια εικόνα του πώς θα φαίνονται τα διάφορα στοιχεία της σελίδας σε γενικές γραμμές. Τα website wireframes αποτελούν στην ουσία ένα εικαστικό πρωτότυπο της ιστοσελίδας που εστιάζει στο περιεχόμενο, τη διάταξη (layout) και το τι θέλουμε να κάνει ο χρήστης αφού επισκεφτεί την σελίδα μας. Συνήθως δεν περιλαμβάνει καθόλου χρώματα, γραφικά, κάποιο σχεδιαστικό στυλ. Είναι ένα σκαρίφημα με το οποίο πλανάρουμε τι θα κάνουμε για να σχεδιάσουμε το site. Για να το αναπαραστήσουμε χρησιμοποιούμε απλές γραμμές, “κουτιά” και διάφορα απλά σχήματα που σκιαγραφούν τα λειτουργικά μέρη της σελίδας μας χωρίς να χάνουμε χρόνο σε ολοκληρωμένα designs. Είναι το πρώτο βήμα της διαδικασίας δημιουργίας του ιστοχώρου μας και δείχνει πού θα μπει τι, σε τι έκταση και πώς θα λειτουργεί. Χάριν σε αυτό μπορεί να επικοινωνηθεί εύκολα και άμεσα ποιες είναι οι ανάγκες της ιστοσελίδας μεταξύ αυτού που ζητάει μια ιστοσελίδα και της σχεδιαστικής ομάδας που αναλαμβάνει το project.
Γιατί χρειάζονται τα wireframes;
Αφού είδαμε τι είναι τα wireframes ας δούμε πόσο μας βοηθούν και γιατί πρέπει να περιλαμβάνονται σχεδόν σε κάθε project. Με τα wireframes μπορούμε:
- Να αναπαραστήσουμε ιδέες μας εύκολα και γρήγορα
- Να αλλάξουμε γνώμη για αυτές τις ιδέες και απλά να σχεδιάσουμε κάτι νέο
- Να επιβεβαιώσουμε ότι όλα τα μέλη της ομάδας αλλά και οι άνθρωποι που μας ζήτησαν το project είναι στο ίδιο μήκος κύματος
- Να δούμε σε ποια σημεία της σελίδας θα μπει το περιεχόμενο και τι είδος; π.χ. Πού θα μπει κείμενο και σε τι έκταση, πού θα μπουν εικόνες, video κ.τ.λ.
- Να δούμε πώς θα γίνεται η πλοήγηση του χρήστη μέσα στην ιστοσελίδα
- Να εξετάσουμε πού θέλουμε να κατευθύνουμε τον επισκέπτη της σελίδας, πού θέλουμε να του τραβήξουμε την προσοχή
- Να αναλύσουμε γενικά τις ανάγκες του User experience σε πρώτο πλάνο
- Να καθορίσουμε ακόμα καλύτερα τις λειτουργίες του site
- Να εντοπίσουμε πιθανά λάθη που προκύπτουν και δεν έχουν προβλεφθεί αρχικά
- Να αξιολογήσουμε το μέγεθος του project σε όλα τα επίπεδα, ανάγκες εικαστικών, development, δημιουργία περιεχομένου, στόχους μάρκετινγκ κ.τ.λ.
- Να πάρουμε feedback πριν φτάσουμε στα πιο δύσκολα βήματα του design και του development της σελίδας.
- Να καταλήξουμε στο layout της σελίδας (π.χ. αν έχει πολλές ή μια στήλες η σελίδα για το περιεχόμενο, αν είναι ασυμμετρικό ή αν έχει κάποια συγκεκριμένη λογική, αν χωρίζει την οθόνη στα δυο, αν είναι στυλ περιοδικού, αν εχει sidebars κ.α. )
Πώς ξεκινάμε να φτιάχνουμε ένα wireframe;
Πρώτα από όλα σχεδιάζουμε το sitemap της ιστοσελίδας μας. Αναπαριστούμε την δομή και την ιεραρχία των σελίδων του site μας και βλέπουμε την συνολική εικόνα. Διαβάστε ακόμα: τι είναι το sitemap; Βοηθάει στο SEO; Από εκεί και πέρα προσπαθούμε να αναπαραστήσουμε το πώς θέλουμε να είναι η σελίδα μας σχεδιάζοντας απλά σχήματα που θα αντιστοιχούν τα διάφορα στοιχεία του site. Π.χ. Χρησιμοποιούμε ένα κουτί με ένα Χ μέσα και θεωρούμε ότι αντιστοιχεί σε εικόνα. Είναι απλό και γρήγορο και μπορεί να γίνει και σε απλό χαρτί.
Στην EtherLogic θεωρούμε αναπόσπαστο κομμάτι της διαδικασίας τα wireframes γιατί μας καθιστούν ξεκάθαρο ποιές είναι οι ανάγκες της ιστοσελίδας και κατ’ επέκταση οι δικές σας. Χρησιμοποιούμε μοντέρνα εργαλεία που επιτρέπουν άμεση αναπαράσταση, διορθώσεις και ολοκληρωμένη συνεργασία και επικοινωνία μεταξύ του τεχνικού team και εσάς. Σκέφτεστε να αποκτήσετε το δικό σας eshop ή website; Αν ναι επικοινωνήστε μαζί μας!
