Mockup ιστοσελίδας. Αν σου έχει ζητηθεί να εγκρίνεις «mockup» πριν αρχίσει η κατασκευή και δεν ήξερες τι ακριβώς κοιτάς, δεν είσαι ο μόνος. Το mockup είναι ένα από τα πιο σημαντικά στάδια στη δημιουργία ιστοσελίδας, και το να το καταλαβαίνεις σωστά σου γλιτώνει χρόνο, χρήμα, και ατελείωτες επαναλήψεις.
Τι είναι το mockup ιστοσελίδας
Το mockup είναι η οπτική αναπαράσταση της ιστοσελίδας πριν γραφτεί ένας κώδικας. Φτιάχνεται σε εργαλεία σχεδιασμού όπως το Figma ή το Adobe XD και δείχνει ακριβώς πώς θα φαίνεται κάθε σελίδα: χρώματα, γραμματοσειρές, layout, εικόνες, κείμενα, κουμπιά. Επομένως, είναι σαν αρχιτεκτονικό σχέδιο σπιτιού πριν ξεκινήσει η ανέγερση.
Η διαφορά από wireframe: το wireframe είναι σκελετικό σχέδιο χωρίς χρώματα και εικόνες. Το mockup είναι το πλήρες οπτικό αποτέλεσμα. Αυτό που βλέπεις στο mockup είναι πολύ κοντά σε αυτό που θα πάρεις στο τέλος.
Γιατί το mockup είναι το πιο σημαντικό στάδιο
Το να αλλάξεις κάτι σε mockup παίρνει λεπτά. Το να αλλάξεις το ίδιο πράγμα αφού έχει κατασκευαστεί η σελίδα παίρνει ώρες. Και το να το αλλάξεις αφού έχει παραδοθεί; Πολύ περισσότερο. Άρα, η έγκριση mockup δεν είναι τυπική διαδικασία. Είναι το σημείο όπου κατοχυρώνεις αυτό που θέλεις.
Τι να ελέγχεις στο mockup
Όταν βλέπεις το mockup, ελέγξτα με αυτή τη σειρά. Πρώτα η δομή: είναι η πληροφορία στη σωστή σειρά; Βλέπει ο χρήστης αυτό που θέλεις πρώτο; Επιπλέον, είναι τα CTAs (κουμπιά) ορατά και στη σωστή θέση;
Μετά, τα χρώματα: εκφράζουν το brand σου; Υπάρχει αρκετός contrast; Ωστόσο, μην κολλάς σε χρωματικές αποχρώσεις στο αρχικό feedback. Αυτό μπορεί να το συζητήσετε μετά.
Τέλος, η mobile version: ζήτα πάντα να δεις και mobile mockup. Αν ο designer σου δεν δείχνει mobile από μόνος του, είναι κόκκινη σημαία.
Πόσο mobile mockup πρέπει να δεις
Τουλάχιστον για τις 3 βασικές σελίδες: αρχική, κύρια υπηρεσία/προϊόν, και επικοινωνία. Αυτές είναι οι σελίδες που ο περισσότερος κόσμος επισκέπτεται από κινητό. Αν φαίνονται σωστά εκεί, οι υπόλοιπες ακολουθούν παρόμοια λογική.
Το λάθος που κάνουν σχεδόν όλοι πελάτες
Εγκρίνουν το mockup χωρίς να το ελέγξουν σοβαρά, και μετά ζητάνε αλλαγές στο development ή μετά την παράδοση. Αυτό δημιουργεί πρόβλημα και για τον πελάτη και για τον developer. Άρα, αφιέρωσε χρόνο στο mockup. Κοίτα το σε μεγάλη οθόνη, σε κινητό, και δείξε το σε ένα άτομο εκτός επιχείρησης για να πάρεις γνώμη χωρίς προκατάληψη.
Στη dycode κάνουμε mockup σε Figma για κάθε project, desktop και mobile, πριν γραφτεί ένας κώδικας. Έτσι εξασφαλίζουμε ότι αυτό που παραδίδεται είναι ακριβώς αυτό που είδατε και ενεκρίθηκε. Επικοινώνησε μαζί μας αν θέλεις να δεις δείγματα.