Οι καλύτεροι πόροι για τη σχεδίαση συρματοκιβωτίων με βάση το δίκτυο

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

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

Πρόωρη ενσωμάτωση UI / UX

Ας αρχίσουμε με τη διευκρίνιση των διαφορών μεταξύ a wireframe και ένα πρωτότυπο. Αυτές οι δύο λέξεις χρησιμοποιούνται συχνά εναλλακτικά επειδή σχετίζονται με την ίδια διαδικασία.

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

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

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

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

Αλλά wireframing είναι πάντα μια καλή ιδέα για κάθε νέο έργο. Σας βοηθά εστιάστε στη μεγάλη εικόνα χωρίς να ανησυχείτε για λεπτομέρειες. Έχετε μια αίσθηση του πώς η συνολική σελίδα έχει τεθεί, και αυτό είναι ανεκτίμητο όταν σχεδιάζετε μια συγκεκριμένη διάταξη.

Στόχοι για συρματοποίηση

Κάθε φορά που ξεκινάτε ένα νέο έργο, θα πρέπει να μελετήσετε τι προσπαθείτε να λύσετε. Κάθε τοποθεσία είναι χτισμένος με συγκεκριμένο στόχο στο μυαλό. Πολλοί ιστότοποι έχουν ακόμη και πολλαπλούς στόχους, όπου ορισμένοι στόχοι είναι πιο σημαντικοί από τους άλλους.

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

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

Σκεφτείτε τα wireframes από ένα διαδραστική άποψη. Αυτές δεν είναι μόνο όμορφες εικόνες. Πρόκειται για παραστάσεις ψηφιακών διεπαφών και θέλετε να σχεδιάσετε τις ιδέες σας με αυτό κατά νου.

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

Grid Sketchpads

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

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

Υπάρχουν πολλά υπέροχα προϊόντα έξω εκεί αν θέλετε ξεκινήστε τη φωτοεκτύπωση σε χαρτί, για παράδειγμα το ροδί Dot Pad έρχεται σε διάφορα μεγέθη για καθημερινή χρήση. Έρχεται μόνο με 80 σελίδες, αλλά αυτό είναι αρκετά χαρακτηριστικό των περισσότερων sketchbooks πλέγματος.

Ένα άλλο πολύ δροσερό και προσαρμόσιμο προϊόν είναι το Dotgrid. Όλα τα είδη του Dotgrid είναι πιο ακριβά από τα βιβλία Rhodia, αλλά έρχονται με περισσότερα υλικά και προσαρμοσμένα σχέδια κάλυψης.

Η Dotgrid δέχεται ακόμη παραγγελίες βάσει παραγγελίας που σας επιτρέπουν Σχεδιάστε το δικό σας προσαρμοσμένο sketchpad. Κάθε βιβλίο περιέχει μόλις 100 φύλλα, οπότε συμπεριλαμβάνεται και το μπροστινό και το πίσω μέρος που έχετε περίπου 200 σελίδες για το σκίτσο του πλέγματος.

Ένα ζευγάρι άλλα σκίτσα σχάρα πλέγματος θέλω να αναφέρω περιλαμβάνουν το Behance Dot Grid που είναι σκληρό και σπειροειδές δεσμευμένο, αν και περιέχει μόνο 50 φύλλα χαρτιού.

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

Αυτά τα επιρρεπή μαξιλάρια σχεδιασμού έχουν επίσης 50 φύλλα συνολικού ύψους 100 σελίδων, αλλά κάθε σελίδα έχει τέσσερα διαφορετικά ανταποκρινόμενα πλέγματα που αντιπροσωπεύουν διαφορετικά σημεία διακοπής στην ανταπόκριση του σχεδιασμού: επιφάνεια εργασίας, φορητό υπολογιστή, tablet και smartphone.

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

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

Τα πλέγματα έρχονται σε μέγεθος γραμμάτων A4 και ΗΠΑ για διαφορετικά στυλ χαρτιού εκτυπωτή. Μπορείτε να επιλέξετε από πολλές επιλογές, όπως πρότυπα για ένα πλήρες πρόγραμμα περιήγησης ιστού ή διαφορετικές οθόνες iPhone.

Όλες αυτές οι επιλογές είναι εξαιρετικές και αξίζει να εξερευνήσετε εάν είστε μέσα σκίτσο μολυβιού. Το χαρτί είναι ένα από τα ευκολότερα μέσα για να κατεβάσετε γρήγορα τις νέες ιδέες, γι 'αυτό είναι συχνά η προτιμώμενη επιλογή ακόμη και από τους σχεδιαστές του UI.

Ψηφιακά εργαλεία και εφαρμογές ιστού

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

Πρώτον, θα ήθελα να αναφέρω ότι μπορείτε να χρησιμοποιήσετε εργαλεία της Adobe όπως το Illustrator δημιουργήστε τα δικά σας καλώδια. Αυτό δεν είναι μέρος της ροής εργασίας όλων και το Illustrator σίγουρα δεν είναι δωρεάν. Αλλά εάν ήδη εργάζεστε με το Adobe Creative Cloud, τότε ίσως να είναι ένα καλό μέρος για να ξεκινήσετε.

1. Moqups

Moqups είναι ένα από τα καλύτερα online εργαλεία για wireframing. Εργάζεστε με έναν οπτικό επεξεργαστή και μια βιβλιοθήκη περιουσιακών στοιχείων για μεταφορά και απόθεση σε όλη τη σελίδα.

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

Ο ιστότοπος λειτουργεί από προεπιλογή σε δωρεάν σχέδιο το οποίο περιορίζει τον χρήστη σε αντικείμενα 300 σελίδων. Ο ιστότοπος έχει επιλογές πριμοδότησης, αλλά η καταβολή ενός μηνιαίου τέλους μπορεί να είναι πιο ενοχλητικό από το να πηγαίνετε με τα εργαλεία της Adobe ή να αγοράσετε ένα Sketch.

2. Πλέγμα Papr

Η εφαρμογή web Grid Papr είναι εντελώς δωρεάν και προσφέρει τόσο δημόσιους όσο και ιδιωτικούς λογαριασμούς για τα wireframes σας. Δημιουργείτε ένα όνομα για το έργο σας και αποκτήστε τη δική σας μοναδική διεύθυνση URL για το wireframe που μπορείτε να επεξεργαστείτε από οποιονδήποτε υπολογιστή.

Κάθε νέο σύρμα έρχεται με ένα πλέγμα η οποία σας επιτρέπει να εκτελέσετε το snap-to-grid σε όλα τα στοιχεία. Τα χαρακτηριστικά είναι απλά, αλλά αρκούν δημιουργήστε ένα lo-fi wireframe μέσα σε λίγα λεπτά. Απλά σύρετε ό, τι θέλετε στη σελίδα και ακολουθήστε το πλέγμα για να δημιουργήσετε ένα αστρικό σκελετό.

3. Wireframe.cc

Το Wireframe.cc είναι ένα από τα απλούστερα και τα πιο ελάχιστα εργαλεία που μπορείτε να χρησιμοποιήσετε για την wireframing. Διαθέτει a χωρίς διασύνδεση με προ-χτισμένο πλέγμα και οργανωμένες γραμμές εργαλείων. Απλά κάντε κλικ & σύρετε για να δημιουργήσετε νέα στοιχεία στον καμβά. Μπορείτε επίσης να αποθηκεύσετε και να μοιραστείτε την εργασία σας.

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

4. Mockingbird

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

Το Mockingbird έχει μια ατελείωτη βιβλιοθήκη στοιχείων UI, όπως καρτέλες, ακορντεόν, αναπτυσσόμενα μενού, συσκευές αναπαραγωγής βίντεο και απλές συνδέσεις κειμένου. Το προεπιλεγμένο πλέγμα χρησιμοποιεί το σύστημα πλέγματος 960gs, αλλά μπορείτε να διαλέξετε 12, 16 και 24 στήλες.

Τελικές λέξεις

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

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

(Φωτογραφία εξώφυλλου του Oykun Yilmaz)