Φανταστείτε ή σκεφτείτε αυτόν τον πελάτη που έρχεται σε εσάς και σας αναθέτει να σχεδιάσετε έναν ιστότοπο. Ίσως πρέπει να σχεδιάσετε το θέμα που πρόκειται να χρησιμοποιήσει και ότι θα είναι η πρώτη εντύπωση που θα αφήσει στους χιλιάδες ή εκατομμύρια ανθρώπους που πρόκειται να το επισκεφτούν. Πώς θα του το παρουσίαζες; Θα τραβούσατε στιγμιότυπα οθόνης ενός ιστότοπου όπου δουλέψατε για το σχεδιασμό και θα τους το δείχνατε; Δεν θα ήταν καλύτερο να χρησιμοποιήσετε ένα web mock up;
Περιμένετε, δεν ξέρατε ότι υπήρχαν και μακέτες ιστοσελίδων; Λοιπόν, αυτό είναι σίγουρα για εσάς. Μπορείτε να δώσετε στην παρουσίασή σας μια πιο κομψή εμφάνιση και να κάνετε τον πελάτη πολύ πιο χαρούμενο αφού δει εικόνες που την κάνουν να φαίνεται ότι ο ιστότοπος είναι ήδη ενεργός και λειτουργεί. Και η αλήθεια είναι ότι δεν θα σας κοστίσει τόσο πολύ.
Τι είναι ένα mockup ιστότοπου
Πριν από οτιδήποτε άλλο, ας εξηγήσουμε λίγο τι είναι ένα mockup ιστοσελίδας . Όπως γνωρίζετε, ένα mockup είναι στην πραγματικότητα μια αναπαράσταση, συνήθως «ρεαλιστική εικόνα», που δείχνει πώς θα μοιάζει το τελικό αποτέλεσμα της εργασίας σας.
Στην περίπτωση ενός ιστότοπου, θα ήταν μια εικόνα του αποτελέσματος αυτής της ιστοσελίδας.
Αυτό το είδος κολάζ χρησιμοποιείται για να δώσει στο έργο περισσότερο ρεαλισμό , καθώς συχνά, όταν παρουσιάζεται, μπορεί να φαίνεται κενό ή να μην αντιπροσωπεύει πλήρως αυτό που έχετε κάνει. Επιπλέον, δίνει στον πελάτη έναν πιο οπτικό τρόπο να σχηματίσει μια ιδέα για το τελικό προϊόν.
Και θα μπορούσατε να πείτε, γιατί να μην τους δείξετε τον ιστότοπο στον οποίο εργάζεστε; Θα μπορούσε να γίνει, αλλά όχι ως παρουσίαση της εργασίας. Θα έπρεπε να αφήσετε τον πελάτη να πλοηγηθεί στον ιστότοπο για να τον γνωρίσει σε βάθος, και συχνά δεν έχει τον χρόνο να το κάνει αυτό, οπότε δεν μπορείτε να είστε σίγουροι ότι τα έχει δει όλα.
Από την άλλη, με ένα web mockup θα το πετύχατε γιατί θα τονίζατε όλα όσα θέλετε να δείτε σε αυτές τις εικόνες.
Πώς φτιάχνονται
Τώρα, πώς κατασκευάζονται αυτές οι μακέτες ιστού; Υπάρχει κάποιο πρόγραμμα για τη δημιουργία τους; Είναι κολάζ που λαμβάνονται από το Διαδίκτυο;
Στην πραγματικότητα, υπάρχουν πολλά δωρεάν εργαλεία που μπορούν να σας βοηθήσουν να τα δημιουργήσετε και να σας δώσουν επιλογές, όχι μόνο με τα παραδείγματα που θα σας δείξουμε λίγο αργότερα.
Με αυτό θα μπορούσατε ακόμη και να δημιουργήσετε μια συλλογή από αυτά για τον συγκεκριμένο πελάτη, βάζοντας το σχέδιο σε διαφορετικές σειρές που κάνουν το τελικό αποτέλεσμα να φαίνεται πολύ καλύτερο.
Αυτά τα εργαλεία είναι:
Γκλίφι
Αυτό το εργαλείο είναι διαθέσιμο online και δωρεάν . Με αυτό, μπορείτε να δημιουργήσετε μακέτες ιστοσελίδων, επειδή διαθέτει πολλά πρότυπα και ένα API που σας επιτρέπει να ξεκινήσετε μέσα σε λίγα λεπτά.
Στην πραγματικότητα, είναι ένα από τα πιο χρησιμοποιούμενα και σας δίνει πολλές επιλογές.
Κακάο
Σε αυτήν την περίπτωση, πρέπει να σας προειδοποιήσουμε ότι, αν και θα επικεντρωθούμε στο δωρεάν μέρος , το εργαλείο είναι επίσης επί πληρωμή και αυτό σημαίνει ότι θα είναι πιο περιορισμένο σε ό,τι μπορείτε να κάνετε.
Για να σας δώσω μια ιδέα, μπορείτε να εξάγετε μόνο σε μορφή PNG (που σημαίνει ότι δεν είναι πολύ προσαρμόσιμο αν θέλετε να το χρησιμοποιήσετε με άλλους πελάτες).
Το καλό είναι ότι αν δουλεύεις με μια ομάδα θα μπορούσες να συνεργαστείς ταυτόχρονα (δηλαδή σε πραγματικό χρόνο).
Επικοινωνήστε
Το Wirefy είναι ένα από τα εργαλεία που μπορούν να μετατρέψουν έναν ιστότοπο σε wireframe , επιτρέποντάς σας να συνεργαστείτε με τον πελάτη και να του δείξετε τον ιστότοπο όπως εκείνος κρίνει κατάλληλο. Ωστόσο, θα χρειαστεί να επιλέξετε μια φωτογραφία που τραβήχτηκε με υπολογιστή, tablet ή κινητή συσκευή για να συναρμολογήσετε το wireframe.
Όπως ίσως έχετε μαντέψει, όλα τα εργαλεία σας δίνουν μια εικόνα του σχεδίου ιστού, αλλά θα ήταν απαραίτητο να το συναρμολογήσετε πραγματικά σε μια πραγματική εικόνα. Για αυτό, πρέπει να έχετε πρόσβαση σε φωτογραφίες όπου εμφανίζονται υπολογιστές, κινητά, tablet, προκειμένου να εισαγάγετε το σχέδιό σας από πάνω και να πάρετε μια φωτογραφία που ενώνει και τα δύο (και φαίνεται ωραία).
Για να το κάνετε αυτό μπορείτε να χρησιμοποιήσετε έτοιμα μακέτες ή να τα δημιουργήσετε μόνοι σας με ένα πρόγραμμα επεξεργασίας εικόνας.
Web mock up που μπορείτε να κατεβάσετε
Αν δεν θέλετε να αγχώνεστε πολύ για την παρουσίαση της δουλειάς σας, ακολουθούν μερικά παραδείγματα μακέτας ιστοσελίδων που μπορείτε να κατεβάσετε και να χρησιμοποιήσετε. Θα εξοικονομήσετε χρόνο.
Ρεαλιστική μακέτα ιστότοπου
Ξεκινάμε με μια σκηνή που θα μπορούσε να έχει ο καθένας. Είναι ένα γραφείο και μια οθόνη υπολογιστή από πάνω (πληκτρολόγιο και ποντίκι κάτω). Στο βάθος μια βιβλιοθήκη με βιβλία. Ωστόσο, αυτή η βιβλιοθήκη είναι ασπρόμαυρη, όπως και τα διακοσμητικά στοιχεία του γραφείου (περισσότερα βιβλία και ένα φωτιστικό) και του τοίχου, που είναι σε γκρι τόνο.
Γιατί; Για να διατηρήσετε την προσοχή του θεατή συγκεντρωμένη στη σελίδα που εμφανίζεται στην οθόνη. Στην περίπτωσή σας, αυτή θα μπορούσε να είναι η αρχική σελίδα ή αντιπροσωπευτικές ενότητες που θέλετε να δείξετε στον πελάτη.
Κατεβάστε το εδώ.
Απλή μακέτα ιστότοπου
Μια πιο απλή αναπαράσταση, όπου με γκρι φόντο (αν και μπορεί να προσαρμοστεί) δεν εμφανίζει οθόνη στην οποία θα έχουμε εισάγει την ιστοσελίδα.
Ξεχωρίζει ότι, αν κοιτάξεις την οθόνη, έχει ένα πιο ανοιχτό μέρος και ένα πιο σκούρο μέρος, γιατί προσομοιώνει ότι το φως πέφτει πάνω της.
Αυτό μπορεί να είναι ενδιαφέρον για τμήματα στα οποία θέλετε ο πελάτης να επικεντρωθεί αποκλειστικά σε αυτά.
Κατεβάστε το εδώ.
Μακέτα Samsung Galaxy S5
Αυτό συγκεκριμένα είναι ένα mockup του Samsung Galaxy S5, αλλά μπορεί να είναι τέλειο για να δείξετε, στην ίδια εικόνα, τρία μέρη του σχεδίου ιστού που έχετε φτιάξει, έτσι ώστε ο πελάτης να εκτιμήσει πώς θα φαινόταν σε ένα κινητό.
Λάβετε υπόψη ότι η Google παρέχει πλέον μεγαλύτερη υποστήριξη σε επιχειρήσεις που χρησιμοποιούν ιστότοπους με δυνατότητα προσαρμογής , δηλαδή ιστότοπους που έχουν καλή εμφάνιση είτε προβάλλονται σε υπολογιστή, tablet είτε σε κινητή συσκευή. Επομένως, δεν αρκεί ο ιστότοπός σας να φαίνεται καλός σε έναν υπολογιστή. Πρέπει να διασφαλίσετε ότι φαίνεται καλός και σε όλες τις άλλες πλατφόρμες.
Μπορείτε να το κατεβάσετε εδώ.
Μακέτα για tablet και κινητό
Σε αυτήν την περίπτωση, δεν θα μπορείτε να εμφανίσετε το 100% του ιστού σε tablet, αλλά μπορείτε στο κινητό. Και είναι ότι αν θέλετε να δείξετε το σχέδιό σας σε αυτές τις δύο συσκευές, μπορείτε επίσης να το κάνετε, έτσι ώστε ο πελάτης να έχει μια ιδέα για το πώς θα φαίνεται.
Λάβετε υπόψη ότι θα εμφανίζεται οριζόντια στο tablet, ενώ στο κινητό τηλέφωνο θα εμφανίζεται κάθετα . Αυτός είναι ένας τρόπος για να δει ο χρήστης την αλλαγή στο σχεδιασμό σας ώστε να προσαρμόζεται και στις δύο συσκευές.
Εδώ είναι.
Έχετε κάποια παραδείγματα web mock up; Μπορείτε να τα μοιραστείτε στα σχόλια.