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