Mockups ιστότοπου: 4 δημοφιλείς προσεγγίσεις για εξερεύνηση

Κοροϊδεύω ιστότοπου

Τα mockup ιστοτόπων μπορούν να δημιουργηθούν με πολλούς διαφορετικούς τρόπους. Είναι αλήθεια ότι δεν υπάρχει «καλύτερη» προσέγγιση, αλλά ανάλογα με τα στυλ και τις προτιμήσεις ορισμένων σχεδιαστών UI και UX (και τη διαδικασία σχεδιασμού), μερικά θα λειτουργούν καλύτερα από άλλα.

Σε αυτό το άρθρο, θα εξετάσουμε τα πλεονεκτήματα και τα μειονεκτήματα των τεσσάρων από τις πιο δημοφιλείς επιλογές: εργαλεία UX από άκρο σε άκρο, εργαλεία κοροϊδεύω, εργαλεία γραφιστικής, καθώς και κωδικοποιημένα σχέδια που αρχίζουν να θολώνουν τις γραμμές μεταξύ mockup ιστότοπων και πρωτότυπα.

Εάν ακολουθείτε ειδικά τα εργαλεία wireframing, δείτε αυτήν την ανάρτηση στο καλύτερα εργαλεία wireframe ή για μια ευρύτερη συλλογή, ρίξτε μια ματιά στο mega-roundup του καλύτερα εργαλεία σχεδιασμού ιστοσελίδων .



Δημιουργία banner

Κάντε κλικ στην εικόνα για να μάθετε περισσότερα και παραλάβετε τα εισιτήριά σας(Πιστωτική εικόνα: Future / Toa Heftiba, Unsplash)

Μην κάνετε το λάθος να πιστεύετε ότι όλα τα mockup του ιστότοπου είναι τα ίδια. Οι απλές αποφάσεις σχετικά με τις πλατφόρμες, την πιστότητα και την κωδικοποίηση θα παράγουν σημαντικά διαφορετικά αποτελέσματα. Μάθετε τι θέλετε και ποιοι είναι οι στόχοι σας προτού ξεκινήσετε ακόμη και τη διαδικασία σχεδιασμού - εάν θέλετε ένα εργαλείο που υποστηρίζει και τις τρεις φάσεις, είναι καλύτερο να ξεκινήσετε να το χρησιμοποιείτε παρά να αλλάξετε τη μέση. Ομοίως, εάν χρειάζεστε ένα αστρικό, πλήρως ρεαλιστικό κοροϊδεύω, λάβετε υπόψη ότι θα χρησιμοποιήσετε κάποιο πρόγραμμα επεξεργασίας γραφικών σε κάποιο σημείο.

να περιγράψετε δύο στοιχεία της παραπάνω ζωγραφικής που ο καλλιτέχνης συμπεριέλαβε για να δημιουργήσει προοπτική;

01. Εργαλεία UX από άκρο σε άκρο

Στην υψηλότερη βαθμίδα υπάρχουν εργαλεία end-to-end που στοχεύουν στην ικανοποίηση ολόκληρης της ροής εργασίας: mockups, prototyping, documentation, developer handoffs και design design. UXPin ανταποκρίνεται σε αυτήν την ανάγκη από τις αρχές της δεκαετίας του 2010, αλλά πολλές άλλες μάρκες, όπως η Adobe και η InVision, προσπαθούν επίσης να δημιουργήσουν το «ένα εργαλείο για να τα κυβερνήσουν όλα».

UXPin

Το UXPin διαθέτει ισχυρό πρωτότυπο, mockups, τεκμηρίωση και handoffs προγραμματιστών

Πώς λοιπόν αυτά τα εργαλεία συσσωρεύονται μόνο για δημιουργία κοροϊδεύω; Μπορούν να τα αντιμετωπίσουν χωρίς κανένα πρόβλημα - και μετά μερικά. Με το UXPin, για παράδειγμα, μπορείτε να δημιουργήσετε mockup με πολλές καταστάσεις και αλληλεπιδράσεις. Μιμείται ακόμη και ορισμένες δυνατότητες του Photoshop και του Sketch συμπεριλαμβάνοντας ένα εργαλείο πένας.

Αφ 'ετέρου, Στούντιο από την InVision , επιτρέπει κάποια ωραία επεξεργασία κινούμενων σχεδίων. ενώ Adobe XD σας επιτρέπει να ανοίξετε αρχεία Photoshop και Sketch μέσα στα σχέδια XD σας και να εφαρμόσετε χρώματα, σύμβολα, γραμμικές κλίσεις και στυλ χαρακτήρων.

Στούντιο InVision

Το Studio by InVision στοχεύει στη δημιουργία ροής εργασίας από άκρο σε άκρο

Το πιο σημαντικό, τα εργαλεία από άκρο σε άκρο προσφέρουν τώρα συστήματα σχεδίασης για να διασφαλίσουν τη συνοχή των προτύπων σε διάφορα έργα. Τα συστήματα σχεδιασμού παρέχουν σε όλους μια μοναδική πηγή αλήθειας για στοιχεία και αρχές σχεδιασμού σε όλα τα εργαλεία. Εάν σκοπεύετε να δημιουργήσετε πολλά κοροϊδεύω, αυτή η λειτουργία καθίσταται σχεδόν υποχρεωτική.

Κατά την επιλογή ενός εργαλείου από άκρο σε άκρο για τη δημιουργία mockup του ιστότοπού σας, αξίζει να λάβετε υπόψη τις ακόλουθες πτυχές:

  • πιστότητα : Πόσο ισχυρό είναι το εργαλείο σχεδιασμού οπτικής και αλληλεπίδρασης;
  • Συνοχή : Ποια χαρακτηριστικά διασφαλίζουν τη συνοχή του σχεδιασμού στην εργασία σας;
  • Ακρίβεια : Τα στοιχεία με τα οποία εργάζεστε αντικατοπτρίζουν την «πηγή αλήθειας» στον οργανισμό σας;
  • Συνεργασία : Μπορείτε να συνεργαστείτε με ενδιαφερόμενους ή άλλους σχεδιαστές;
  • Παραχώρηση προγραμματιστή : Πώς δημιουργεί το εργαλείο προδιαγραφές και στοιχεία για προγραμματιστές;

02. Ειδικά εργαλεία κοροϊδεύω

Λιγότερες λύσεις όπως Αρχή , Σχεδιαστής , Moqups ή Μπαλσάμικ μπορεί να σας παρέχει ό, τι χρειάζεστε για να δημιουργήσετε το πρότυπο σας - θα χάσετε απλώς την πρόσθετη ροή εργασίας και τις λειτουργίες συνέπειας σχεδιασμού. Αυτά τα εργαλεία έχουν σχεδιαστεί για να κάνουν τη διαδικασία δημιουργίας όσο το δυνατόν πιο εύκολη, ώστε να μπορείτε να εστιάζετε περισσότερο στις στυλιστικές αποφάσεις και λιγότερο στον τρόπο χειρισμού του προγράμματος.

Τα ειδικά εργαλεία mockup έχουν σαφή πλεονεκτήματα: Οι αρχάριοι επωφελούνται από την ευκολία χρήσης τους, ενώ οι ειδικοί εκτιμούν τα σχέδια ειδικά προσαρμοσμένα στις προηγμένες ανάγκες τους. Στο πιο προηγμένο τέλος, εργαλεία όπως το Framer και το Principle ειδικεύονται σε κινούμενες εικόνες και αλληλεπιδράσεις για mockups.

Σχεδιαστής

πώς να επικολλήσετε μια εικόνα σε μια άλλη εικόνα στο photoshop
Εργαλεία όπως το Framer ειδικεύονται στις αλληλεπιδράσεις

Στο κάτω άκρο, τα Moqups και Balsamiq παρέχουν περισσότερη λειτουργικότητα από τα μη σχεδιαστικά εργαλεία που μερικές φορές χρησιμοποιούνται για wireframes και mockups (όπως Βασικός τόνος , αλλά περιορίζονται μόνο σε σχέδια χαμηλής πιστότητας. Μπορούν, ωστόσο, να είναι αρκετά χρήσιμα εάν ο στόχος είναι να δημιουργηθούν πολύ γρήγορα τα πλαίσια καλωδίων χαμηλής πιστότητας.

Όσον αφορά τα εργαλεία κοροϊδεύω, πρέπει να αποφασίσετε εάν μια απλή λύση wireframing θα κάνει ακριβώς ή αν χρειάζεστε πιο προηγμένη σχεδίαση οθόνης. Ανεξάρτητα από το εργαλείο κοροϊδεύωσης που επιλέγετε, απλώς βεβαιωθείτε ότι είστε πρόθυμοι να αποδεχτείτε την απώλεια στη συνεργατική ροή εργασίας και λιγότερες λειτουργίες συνέπειας σχεδιασμού που προσφέρονται από εργαλεία end-to-end.

03. Λογισμικό σχεδιασμού γραφικών

Ορισμένοι σχεδιαστές ορκίζονται από λογισμικό όπως Photoshop CC , Σκίτσο ή Εικονογράφος CC , ειδικά εκείνοι που είναι ιδιαίτερα ειδικευμένοι ή εξοικειωμένοι με εργαλεία που προσφέρουν έλεγχο μέχρι το pixel. Οι πλατφόρμες γραφικού σχεδιασμού λειτουργούν καλύτερα αν στοχεύετε στο υψηλότερο επίπεδο ρεαλισμού και οπτικής πιστότητας. Και όπως εξηγούμε στον οδηγό μας για το γρήγορο πρωτότυπο χρησιμοποιώντας το Photoshop CC , μπορεί να είναι ευκολότερο από όσο νομίζετε.

Photoshop CC

Το Photoshop παρέχει λεπτομερή έλεγχο, αλλά μπορεί να είναι υπερβολικό για απλές κοροϊδεύσεις

Η εργασία σε λογισμικό σχεδιασμού γραφικών σάς παρέχει πρόσβαση σε μια σχεδόν ατελείωτη επιλογή χρωμάτων υψηλής ποιότητας, οπότε αν εργάζεστε εντός των περιορισμών ενός άκαμπτου και προκαθορισμένου συνδυασμού χρωμάτων - για παράδειγμα, βάσει συγκεκριμένων κανόνων επωνυμίας - τότε αυτά τα προγράμματα μπορεί να είναι τα καλύτερα επιλογή. Πέρα από τις επιλογές χρώματος, αυτά τα προγράμματα προσφέρουν πολύ περισσότερα οπτικά εργαλεία, επιτρέποντάς σας να αντιμετωπίσετε τις λεπτομέρειες.

Ωστόσο, το μειονέκτημα της χρήσης αυτού του τύπου λογισμικού είναι ότι μπορεί να είναι δύσκολο να μεταφραστεί όταν έρθει η ώρα να ξεκινήσετε την κωδικοποίηση του σχεδιασμού. Αυτό που λειτούργησε στο Photoshop ενδέχεται να μην λειτουργεί πάντα σε κώδικα (στοιχεία όπως γραμματοσειρές, σκιές, εφέ κλίσης και ούτω καθεξής), τα οποία μπορούν να μεταφραστούν σε σπατάλη χρόνου, βρίσκοντας λύσεις για τη φάση του πρωτοτύπου.

Για σελίδες με στιλ, μπορεί να σας βοηθήσει να διαγράψετε τις συγκεκριμένες οπτικές λεπτομέρειες κατά τη φάση κοροϊδεύω, οπότε το Photoshop ή το Sketch θα σας δώσει τις περισσότερες επιλογές. Παρομοίως, εάν αντιμετωπίζετε έναν επιλεκτικό ή δύσκολο να ευχαριστήσετε πελάτη, παρουσιάζοντάς τους ένα πανέμορφο και εντυπωσιακό κοροϊδεύω μπορεί να τους κερδίσει πιο εύκολα.

mockups μπορούν να μεταφερθούν στο UXPin

Mockups που δημιουργούνται στο Photoshop ή το Sketch μπορούν να μεταφερθούν και να μεταφερθούν στο UXPin

Αξίζει επίσης να σημειωθεί ότι τα mockup που δημιουργήθηκαν στο Photoshop ή το Sketch μπορούν να μεταφερθούν και να μεταφερθούν στη φάση του πρωτότυπου με το UXPin. Αυτό σας επιτρέπει να κινείτε εύκολα όλα τα επίπεδα (χωρίς ισοπέδωση) με μερικά κλικ και διασφαλίζει ότι δεν χρειάζεται να ξεκινήσετε από το μηδέν όταν έρθει η ώρα να κάνετε πρωτότυπο.

Εάν τα οπτικά δεν είναι η μόνη προτεραιότητά σας, ίσως να είστε πιο αποτελεσματικοί χρησιμοποιώντας ένα εργαλείο που σας επιτρέπει να κάνετε το wireframing, mockups και prototyping όλα σε ένα μέρος. Το λογισμικό σχεδιασμού γραφικών μπορεί να είναι περισσότερο πρόβλημα από ό, τι αξίζει για mockups, εκτός αν ψάχνετε για βέλτιστη οπτικοποίηση - σίγουρα θα πρέπει να επικοινωνείτε τακτικά με τον προγραμματιστή σας, καθώς αυτά τα εργαλεία δεν έχουν σχεδιαστεί για συνεργασία.

04. Κωδικοποιημένα κοροϊδεύω

Εάν είστε κυρίως σχεδιαστής και δεν είστε άνετοι με την κωδικοποίηση, τότε αυτό προφανώς δεν είναι επιλογή. Όπως συζητήθηκε στο Ο οδηγός για κοροϊδεύω , τα κωδικοποιημένα mockups δεν είναι η προεπιλεγμένη επιλογή.

Η πλειονότητα της κωδικοποίησης μπορεί να αναβληθεί έως το στάδιο του πρωτότυπου (εάν δημιουργείτε ένα πρωτότυπο HTML / JavaScript) ή ακόμα και αργότερα (εάν χρησιμοποιείτε ένα εργαλείο πρωτοτύπων). Ωστόσο, παρά την πολυπλοκότητα και τα πιθανά εμπόδια, υπάρχουν πολλοί αξιοσέβαστοι σχεδιαστές που υποστηρίζουν την εισαγωγή κώδικα στη φάση του mockup.

Ενώ οι βελτιώσεις στα εργαλεία και την τεχνολογία σημαίνουν ότι όλο και περισσότερες δυνατότητες ανοίγουν στο σχεδιασμό διάταξης, δεν είναι εύκολο (ή ακόμη και εφικτό) να δημιουργηθεί εκ νέου σε κώδικα. Ξεκινώντας από τον κώδικα μπορείτε να γνωρίζετε αμέσως τι μπορείτε και τι δεν μπορείτε να κάνετε. Εάν αισθάνεστε άνετα με τον κωδικό, μπορεί επίσης να υποστηριχθεί ότι ξεκινώντας από αυτό είναι λιγότερο σπατάλη - το mockup θα καταλήξει ούτως ή άλλως σε HTML / CSS.

xbox ένα εξωτερικό σκληρό δίσκο μαύρη Παρασκευή

Αλλά όπως αναφέραμε προηγουμένως, τα mockup με κωδικοποίηση δεν είναι μια δημοφιλής στρατηγική, για περισσότερους λόγους από τη δυσκολία κωδικοποίησης. Η αρχική κωδικοποίηση πολύ νωρίς μπορεί να περιορίσει τη δημιουργικότητά σας και την ετοιμότητά σας να πειραματιστείτε, καθώς είναι εύκολο να ανησυχείτε για τη σκοπιμότητα των ιδεών σας στον κώδικα παρά για το πόσο συναρπαστικό θα μπορούσαν να φαίνονται.

Εναπόκειται σε εσάς πότε να εισαγάγετε την κωδικοποίηση. Απλώς βεβαιωθείτε ότι γνωρίζετε τους στόχους του σχεδιασμού σας και ενημερώστε τους προγραμματιστές σχετικά με τον τρόπο προτεραιότητας των λειτουργιών.

Διαβάστε περισσότερα: