Εκπαιδευτικά Σκετς

9 Συμβουλές για το σχεδιασμό πιο γρήγορα και πιο αποτελεσματικά, ώστε να μην πηγαίνετε παράλογο

Ναι, είναι ένα γράμμα. Αλλά αυτά είναι καλά.

Σημείωση συγγραφέων και απίστευτο βύσμα: Αυτές είναι οι τεχνικές που ανέκτησα κατά την κατασκευή του συστήματος σχεδίασης του UX Power Tools. Είμαι ενεργός σχεδιαστής και χρησιμοποιώ αυτό το σύστημα για 10 ώρες την ημέρα, μαζί με κάθε τεχνική που αναφέρεται σε αυτό το άρθρο. Εάν δεν πίστευα σε αυτό, δεν θα έγραφα γι 'αυτό

1. Χρησιμοποιήστε Στυλ

Με πονάει πόσο συχνά πρέπει να ειπωθεί αυτό, αλλά θα συνεχίσω να το λέω μέχρι να το ξεκινήσετε

Θεμελιώδεις αλλαγές έρχονται στο Sketch πολύ σύντομα, που θα κάνουν τη ζωή σας ΠΟΛΥ ΕΥΚΟΛΟΥΝ, αν απλώς λυγίζετε κάτω και αρχίζετε να χρησιμοποιείτε στυλ. Δεν υπάρχει καλύτερος χρόνος από τώρα.

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

2. Δημιουργήστε ένα φύλλο στυλ

Δεν απαιτείται-αλλά-πολύ-ενθαρρυνόμενη ανάγνωση:

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

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

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

3. Χρησιμοποιήστε τη Διαφάνεια

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

Γιατί χρησιμοποιώ διαφάνεια αντί για τιμές hex;

Είναι ένα τακτοποιημένο μικρό τέχνασμα για να βεβαιωθείτε ότι το κείμενό σας φαίνεται υπέροχο σε οποιοδήποτε χρώμα φόντου. Στην εικόνα παρακάτω, η διαφάνεια (δεύτερη γραμμή) μοιάζει πολύ καλύτερα από το γκρι (πρώτη γραμμή), επειδή έχει πάρει την απόχρωση του χρώματος κάτω από αυτό. Δεν υπάρχουν κόλπα. η δεύτερη γραμμή κειμένου είναι ακριβώς η ίδια σε κάθε χρώμα σενάριο. Είναι μόνο η διαφάνεια που εργάζεται για εσάς που τους κάνει να μοιάζουν με διαφορετικά στυλ κειμένου. Όλα για την τιμή ενός. Πόσο βολικό!

Αυτό το μικρό τέχνασμα μπορεί να χρησιμοποιηθεί και για σύνορα κουμπιών. Ξέρετε πώς μερικές φορές θέλετε ένα κόκκινο κουμπί με ένα ελαφρώς πιο σκούρο κόκκινο περιθώριο; Δοκιμάστε ένα εσωτερικό σύνορο με 25% μαύρο:

Ένα διαφανές μαύρο περίγραμμα σας βοηθάει να μιμείται ένα πιο σκούρο χρώμα χωρίς το κεφάλαιο hex-value.

4. Κάνετε ένα σύμβολο Empty State

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

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

Εικονογράφηση από τον εκπληκτικά ταλαντούχο συνάδελφό μου, τον Parker McCullough.

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

Που με φέρνει σε ...

5. Δημιουργήστε μια βιβλιοθήκη εικονογραφήσεων

Αυτό είναι ένα κομμάτι μιας προηγμένης τεχνικής, αλλά είναι μια απλή ιδέα που θα κάνει τη ζωή σας ευκολότερη και τη ζωή του αγαπημένου σας εικονογράφου ευκολότερη, επίσης (χάρη, Parker)!

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

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

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

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

Εικονογράφηση από τον εκπληκτικά ταλαντούχο συνάδελφό μου, τον Parker McCullough.

Αρκετά δροσερό, ε;

6. Χρησιμοποιήστε τα συνεπή εικονίδια

Τα Nucleo Icons είναι μακράν τα καλύτερα εικονίδια που υπάρχουν στο Διαδίκτυο. Όχι μόνο είναι το σύνολο τεράστιο και ποικίλο, αλλά το desktop app τους είναι απίστευτο.

Μπορείτε να αλλάξετε από γεμάτα εικονίδια σε εικονίδια γραμμής, να αλλάξετε το βάρος και ακόμα να ορίσετε ένα χρώμα προφοράς:

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

Αυτό δεν είναι πολύ πιο εύκολο από αυτό.

7. Χρησιμοποιήστε Plugin Organizer Artboard του Ale Muñoz

Ντρέπομαι να πω ότι δεν ήξερα ότι αυτό υπήρχε πριν από περίπου ένα μήνα, αλλά από τότε έχω χρησιμοποιήσει την εμμονή.

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

Κατεβάστε το εδώ:

Το Hit Control-Option-Command-A στο πληκτρολόγιό σας και όλοι οι πίνακες τέχνης θα ευθυγραμμιστούν μαγικά και θα ομαδοποιηθούν κάθετα και οριζόντια. Οι σειρές πινάκων τέχνης αντιπροσωπεύουν ομαδοποιήσεις (50px μεταξύ κάθε πίνακα γραφικών) και οι ομαδοποιήσεις χωρίζονται κάθετα κατά 250px.

Τα δύο καλύτερα χαρακτηριστικά αυτού του plugin είναι: Artboard Snapping και Reordering Layer. Όταν σύρετε έναν πίνακα γραφικών σε μια νέα σειρά, αυτόματα θα κουμπώσει στη θέση του, ακόμα κι αν το σύρετε μεταξύ άλλων artboards. Ακόμα καλύτερα, ο πίνακας τέχνης θα τοποθετηθεί σε σωστή σχέση με όλους τους άλλους πίνακες τέχνης στη λίστα επιπέδων. Σας λέω, ποτέ δεν ένιωσα τόσο οργανωμένη στη ζωή μου!

Έτσι καθαρό και τακτοποιημένο!

8. Δημιουργήστε μια Αρχιτεκτονική Προϊόντων (βλ. Παραπάνω)

Μόλις εγκαταστήσετε το plugin από το # 7, οι αρχιτεκτονικές προϊόντων (πιθανότατα υπάρχει ένα καλύτερο όνομα γι 'αυτό) γίνονται πολύ εύκολα να οικοδομηθούν. Το παραπάνω στιγμιότυπο οθόνης είναι μια πραγματική αρχιτεκτονική προϊόντος που δημιούργησα για ένα έργο πελάτη. Οι σειρές αντιπροσωπεύουν χαρακτηριστικά και κάθε πίνακας γραφικών αντιπροσωπεύει μια οθόνη που έχουμε προσδιορίσει ότι πρέπει να σχεδιαστεί. Τα μικροσκοπικά είναι modals.

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

9. Δώστε στο Modals τη δική του Artboard

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

Γιατί;

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

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

Το άλλο πλεονέκτημα της δημιουργίας αυτόνομων τετράγωνων πινάκων τέχνης είναι ότι μπορείτε να τους συνδέσετε ως διαλόγους τρόπων χρησιμοποιώντας το εργαλείο πρωτοτύπων της InVision. Αυτό επιτρέπει σε ένα χρήστη να κάνει κλικ σε ένα κουμπί στο mockup του InVision και το μοντέλο που δημιουργήσατε πραγματικά θα ζωντανέψει στην οθόνη. Στη συνέχεια μπορούν να κάνουν κλικ μακριά από το modal και θα είναι "κλειστά" ακριβώς όπως θα ήταν στην πραγματική εφαρμογή. Οι πελάτες αγαπούν αυτά τα σκατά!

Όταν δεν ψάχνω για ζεστά και ασαφή συναισθήματα, δουλεύω σε πόρους όπως το UX Power Tools για να σας κάνει έναν καλύτερο, πιο αποδοτικό σχεδιαστή.

  1. Ακολουθήστε το UX Power Tools στο Twitter
  2. Ακολούθησέ με στο τουίτερ
  3. Πείτε hi στο LinkedIn
  4. Μάθετε κάποια πράγματα και εγγραφείτε στο ιστολόγιο της υπηρεσίας μου