7 εργαλεία πρωτοτύπων για τους σχεδιαστές ιστοσελίδων

Ξέρετε τη διαφορά μεταξύ wireframe, mockup και πρωτότυπο? Αυτοί οι τρεις όροι χρησιμοποιούνται συχνά εναλλακτικά για να σημαίνουν το ίδιο πράγμα. Το πρόβλημα είναι, δεν πρέπει.

ΕΝΑ wireframe είναι ένα στατική, χαμηλής πιστότητας απεικόνιση ενός σχεδίου. Παρέχει μια περίληψη της εμφάνισης ή του σχήματος ενός προτεινόμενου σχεδίου, αλλά όχι της λειτουργικότητας ή της αίσθησης. ΕΝΑ mockup παρέχει περισσότερες πληροφορίες. Τα mockups είναι μεσαίες και υψηλής πιστότητας απεικονίσεις ενός προτεινόμενου σχεδιασμού. Τα mockups είναι επίσης στατικά, και δεν αποδεικνύουν την αλληλεπίδραση.

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

Πώς να οικοδομήσουμε ένα πρωτότυπο

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

1. Η ροή της σελίδας (πώς μπορεί να πλοηγηθεί ένας χρήστης) έχει σκιαγραφηθεί.
2. Έχουν κατασκευαστεί αρκετές εκδόσεις χαμηλής πιστότητας κάθε σελίδας και δοκιμάζεται η χρηστικότητα.
3. Από τα διδάγματα που αντλήθηκαν, προστίθενται λεπτομέρειες για τη δημιουργία ενός μοντέλου υψηλής πιστότητας του προτεινόμενου σχεδίου.

Σε αυτήν την ανάρτηση, θα εξετάσουμε μερικά πρωτότυπα εργαλεία που μπορούν να βοηθήσουν στη διευκόλυνση της διαδικασίας, να διευκολύνουν τα πράγματα και να χτυπήσετε τα πρωτότυπα πολύ πιο γρήγορα. Εδώ είναι 7 εργαλεία προτυποποίησης για να δοκιμάσετε.

InVision

Το InVision, σύμφωνα με το Forbes, βρίσκεται στην κορυφή της λίστας ιδιωτικών εταιρειών cloud στον κόσμο, μαζί με φωτιστικά όπως το Slack, το Dropbox και το MailChimp. Η τιμή αυτή οφείλεται εν μέρει στην πλατφόρμα "πάντα-on" της InVision, η οποία κάνει τη συνεργασία, την ανατροφοδότηση και την κατασκευή πρωτοτύπων υψηλής πιστότητας.

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

Για να ανακαλύψετε τι αγαπά ο κόσμος του σχεδιασμού και οι περισσότεροι από 2 εκατομμύρια χρήστες της InVision σχετικά με αυτήν την πλατφόρμα, εγγραφείτε για δωρεάν δοκιμή. Απλά κάντε κλικ στο σύνδεσμο InVision για να ξεκινήσετε.

Pidoco

Είτε χρειάζεστε ένα click-through wireframe, ή α πλήρως διαδραστικό πρωτότυπο UX, Το Pidoco θα σας φέρει γρήγορα εκεί και χωρίς αναστάτωση. Ξεκινώντας με τη δυνατότητα εύκολης σχεδίασης, μπορείτε να δημιουργήσετε ένα σύνολο προσαρμοσμένα πρότυπα, δημιουργήστε το διαδραστικά στοιχεία χρειάζεσαι, παρουσιάστε το πρωτότυπο σας σε άλλους, και περιμένετε τα σχόλιά τους - τα οποία δεν θα πρέπει να έρχονται πολύ καιρό.

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

Proto.io

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

Τρία μέρη συνδυάζονται για να κάνουν αυτό το εργαλείο: ένα ταμπλό, έναν επεξεργαστή και έναν παίκτη. Ο πίνακας ελέγχου χρησιμεύει ως κύριος έλεγχος και διαχειριστής έργου. Ο συντάκτης αποτελείται από ένα σύνολο εργαλείων που μιμούνται τον σχεδιασμό σας και ενσωματώνουν τις αλληλεπιδράσεις. Με τη συσκευή αναπαραγωγής, μπορείτε να δείτε το πρωτότυπο στο πρόγραμμα περιήγησης ιστού, να αλληλεπιδράσετε με αυτό, να ζητήσετε ανατροφοδότηση και να το δοκιμάσετε σε πραγματικές κινητές συσκευές. Αν το σχεδιασμό εφαρμογών για κινητά είναι το πράγμα σας, αυτό είναι το εργαλείο για εσάς.

Webflow

Για όσους αναζητούν ένα σχεδιασμός all-in-one, πρωτότυπο και εργαλείο ανάπτυξης, η αναζήτηση τελειώνει εδώ. Πρώτα απ 'όλα, με το Webflow, μπορείτε να χτίσει και να δοκιμάσει τα πρωτότυπα υψηλής πιστότητας πρέπει να βοηθήσετε τις προσπάθειες σχεδιασμού σας. Αλλά εδώ έρχεται η διαφορά - ό, τι χτίζετε τροφοδοτείται από έτοιμο προς παραγωγή HTML / CSS και JavaScript. Το αποτέλεσμα?

Μπορείς μετακινούνται άψογα από ένα πλήρως αλληλεπιδραστικό πρωτότυπο σε ένα αναπτυγμένο προϊόν. Πρωτότυπο, σχεδιασμός και ανάπτυξη έρχονται στο ίδιο πακέτο, το οποίο περιλαμβάνει επίσης τα απαιτούμενα χαρακτηριστικά και δυνατότητες συνεργασίας. Και από το δρόμο, όλα ανταποκρίνονται επισης.

PowerMockup

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

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

Lucidchart

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

Lucidchart είναι επίσης ένα εύχρηστο εργαλείο για Δημιουργώντας διαγράμματα ροής εργασιών και διαγράμματα ροής εργασίας με επαγγελματικό σχεδιασμό, και τα χαρακτηριστικά συνεργασίας της λειτουργούν ομαλά και είναι εύχρηστα.

HotGloo

Η εξομοίωση ενός προτεινόμενου σχεδιασμού UX μπορεί μερικές φορές να προκαλέσει προκλήσεις. Γι 'αυτό χρειάζεστε HotGloo. Με ένα τεράστιο βιβλιοθήκη στοιχείων και Γκαλερί widget UI, εξαγωγή και κοινή χρήση χαρακτηριστικά καθώς και συνεργασία με τα μέλη της ομάδας σας παίρνει ξεκίνησε σε σχεδόν κανέναν χρόνο.

Εάν έχετε οποιεσδήποτε ερωτήσεις ή χρειάζεστε βοήθεια, έχουν πλήρη τεκμηρίωση καθώς και χρήσιμα εκπαιδευτικά βίντεο και live webinars διαθέσιμος. Δημιουργήστε τα πρωτότυπα σας στο πρόγραμμα περιήγησής σας, μοιραστείτε τα ή προεπισκόπηση τους σε οποιαδήποτε κινητή συσκευή. Μπορείτε ακόμη και εξαγωγή της εργασίας σας σε HTML. Η συρραφή και το πρωτότυπο δεν ήταν ποτέ πιο εύκολο και πιο διασκεδαστικό!

Τυλίξτε το

Υπάρχει αφθονία για να επιλέξετε από αυτή τη λίστα από εργαλεία αφιερωμένα σε ειδικούς σκοπούς, σε ένα εργαλείο all-in-one που σίγουρα αξίζει να το δούμε. Όλα αυτά είναι εργαλεία υψηλής ποιότητας, οπότε δεν υπάρχει κανένας κίνδυνος και μπορείτε πάντα να δείτε μια επίδειξη ή να ζητήσετε δωρεάν δοκιμή.

Αυτά τα προϊόντα έχουν μεγάλη βάση χρηστών. Χρησιμοποιούνται ή συνιστώνται από μεγάλες εταιρείες. Έτσι, ανεξάρτητα από το ποιο από εσάς μπορείτε να επιλέξετε, θα βρεθείτε σε καλή επιχείρηση. Είτε ψάχνετε για ένα mockup, wireframe, είτε ένα πρωτότυπο εργαλείο, θα βρείτε ένα εργαλείο για τις ανάγκες σας παραπάνω.