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

Ένας οδηγός βήμα προς βήμα για την εκκίνηση ενός νέου έργου σχεδίασης εφαρμογών στο σκίτσο

Και γιατί ποτέ δεν τα ξεκίνησα από το μηδέν.

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

Η εκκίνηση ενός έργου σχεδιασμού είναι δύσκολη.

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

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

Αυτές οι έννοιες έρχονται με αυστηρές προθεσμίες και απαιτούν γρήγορη ανάκαμψη, οπότε ο ΟΛΟΚΛΗΡΟΣ ΚΟΣΜΟΣ μου επικεντρώνεται στην αποτελεσματικότητα και την ακρίβεια. οι mockups μου πρέπει να λύσουν το πρόβλημα, να δώσουν όραμα και να γυαλιστούν για μια ομαλή μετάβαση στο σχεδιασμό της παραγωγής.

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

Σημείωση: Δεν σας δείχνω πώς να φτιάξετε όλο το γεύμα ... πώς να κόψετε τα υλικά και να γυρίσετε τη σόμπα στο

Πίνακας περιεχομένων / Συνοπτική έκδοση / "Δεν διαβάζω όλα αυτά":

  1. Δημιουργήστε τους φακέλους αρχείων (ναι, για πραγματικό)
  2. Επιλέξτε τα χρώματα
  3. Επιλέξτε τη Γραμματοσειρά
  4. Διαμορφώστε το πλέγμα
  5. Δημιουργήστε ένα "Blockframe"
  6. Μετατροπή σε Hi-Fi

1. Δημιουργήστε τους φακέλους αρχείων

Γιατί: Για να διατηρήσετε οργανωμένα τα αρχεία και τα στοιχεία του σχεδιασμού!
Εργαλεία που χρησιμοποιώ: Finder + Automation (παρακάτω)

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

Προσθέτω ένα _underscore για να βεβαιωθείτε ότι οι φάκελοι αυτοί παραμένουν στην κορυφή της λίστας.
  • _assets: Αυτός ο φάκελος συνήθως μοιράζεται με εσωτερικές / εξωτερικές ομάδες dev. Περιλαμβάνει όλα όσα θα χρειαστούν για την κατασκευή της εφαρμογής (εικονικές εικόνες / περιεχόμενο, γραμματοσειρές, εικονίδια, εικόνες και λογότυπα).
  • _exports: Κάθε φορά που εξάγω μια οθόνη στο PNG, πηγαίνουν εδώ. Αυτός ο φάκελος μοιράζεται με το μάρκετινγκ, έτσι ώστε να έχουν πάντοτε τις τελευταίες οθόνες στο χέρι για να το βάλουν σε διάφορα υλικά μάρκετινγκ (καταστρώματα, ιστοσελίδες, κοινωνικά μέσα).
  • ui-design: Αυτά είναι τα αρχεία προέλευσης μου. Συνήθως είναι μόνο ένα αρχείο, αλλά αν δημιουργήσω νέες, αποθηκεύονται εδώ.

Δημιούργησα μια αυτοματοποίηση για να δημιουργήσω όλους αυτούς τους φακέλους για μένα ...

... και μπορείτε να το πάρετε εδώ δωρεάν:

2. Επιλέξτε τα χρώματα

Γιατί: Για να δημιουργήσετε μια βασική παλέτα σχεδιασμού για το έργο μου.
Εργαλεία που χρησιμοποιώ: Coolors.co

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

Τα συστήματα σχεδιασμού μου είναι πάντα χτισμένα σε 5 κύρια χρώματα:

  • Μάρκα Πρωτοβάθμια
  • Μαύρος
  • Έμφαση 1 (επιτυχία)
  • Έμφαση 2 (Προειδοποίηση)
  • Έμφαση 3 (Κίνδυνος)

Γιατί αυτά τα χρώματα; (ανατρέξτε στην ενότητα 2 σε αυτό το άρθρο)

Χρησιμοποιώ μια εφαρμογή που ονομάζεται Coolors από τον Fabrizio Bianchi για να με βοηθήσει να δημιουργήσω μια παλέτα. Πατάτε το πλήκτρο διαστήματος και θα επιλέξετε τυχαία χρώματα για εσάς. Όταν βρείτε ένα χρώμα που σας αρέσει, κλειδώστε το και συνεχίστε να δημιουργείτε μέχρι να βρείτε τα άλλα σας χρώματα. Εάν το χρώμα της μάρκας σας έχει ήδη οριστεί, μπορείτε να εισάγετε την τιμή hex, να κλειδώσετε αυτό το χρώμα και στη συνέχεια να πατήσετε το πλήκτρο διαστήματος για να δημιουργήσετε τα υπόλοιπα χρώματα.

Δείτε ένα καλό χρώμα

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

Το πρότυπό μου έχει και ένα

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

3. Επιλέξτε τη Γραμματοσειρά

Γιατί: Για να δώσω στην εφαρμογή μου κάποιο χαρακτήρα!
Εργαλεία που χρησιμοποιώ: Γραμματοσειρές Google και Ζεύγος γραμματοσειρών

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

Hey Jon, τι κάνει ένα καλό τύπος για τα σχέδια εφαρμογών;

Γεια σου, χαίρομαι που ρωτήσατε Εδώ είναι μερικές ερωτήσεις που ρωτώ τον εαυτό μου όταν μαζεύω ένα τυπογραφικό γράμμα:

  • Αναγνωσιμότητα: Είναι αυτό αναγνώσιμο για μεγάλες χρονικές περιόδους;
  • Ευελιξία: Είναι αυτό αναγνώσιμο όταν είναι μεγάλο και όταν είναι μικρό;
  • Μεταβλητότητα: Υπάρχουν δύο τουλάχιστον μεταβολές βάρους;

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

Οι ρυθμίσεις στο δεξί πλαίσιο είναι το πώς μου αρέσει το εύρος της αναζήτησης μου.

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

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

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

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

4. Διαμορφώστε το πλέγμα

Γιατί: Να δημιουργήσετε συνέπεια ευθυγράμμισης σε ολόκληρη την εφαρμογή.
Εργαλεία που χρησιμοποιώ: Σκίτσο και Υπολογιστής

Είναι αρκετά συνηθισμένο για τα πλέγματα να κατασκευαστούν από πολλαπλάσια των 8.

Γιατί 8;

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

Περισσότερες λεπτομέρειες εδώ: https://spec.fm/specifics/8-pt-grid

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

  • Πλήρες πλάτος: Μια εφαρμογή πλήρους πλάτους είναι από άκρη σε άκρη. Εάν πρόκειται για μια εφαρμογή ιστού, ο σχεδιασμός σας θα τεντωθεί στις άκρες του προγράμματος περιήγησης.
Μου αρέσει να θέτω τα υδρορροές μου να είναι τουλάχιστον 24px. Στην περίπτωση αυτή, τα υδρορροές διαιρούνται με 8, αλλά οι στήλες δεν είναι. Δεν είναι μεγάλη υπόθεση.
  • Πλωτή: Μια πλωτή εφαρμογή προσκολλάται σε ένα πλέγμα σταθερού πλάτους, συνήθως στο κέντρο του παραθύρου.

Για τις επιπλέουσες εφαρμογές, μου αρέσουν τα υδρορροές και οι στήλες μου να διαιρούνται με 8. Ακολουθεί μια απλή εξίσωση:

(12 στήλες * πλάτος) + (11 υδρορροές * πλάτος) = Συνολικό πλάτος διάταξης

  • Υβριδικό: Μια υβριδική εφαρμογή είναι ένα μίγμα πλήρους πλάτους και επιπλέοντα στοιχεία. Ο ιστότοπος "Μεσαία" είναι μια εφαρμογή που είναι υβριδική, επειδή η επάνω κεφαλίδα είναι πλήρους πλάτους, αλλά η περιοχή περιεχομένου έχει οριστεί σε 740px.
Αυτή η διάταξη είναι μια πλωτή διάταξη με ορισμένα στοιχεία πλήρους πλάτους.

Μια τελευταία σημείωση. Η προεπιλεγμένη απόσταση Shift + → στο Sketch είναι 10px. Αυτό θα είναι SUPER ενοχλητικό όταν εργάζεστε σε ένα πλέγμα 8px. Ευτυχώς, το Σκίτσο σάς επιτρέπει να το αλλάξετε σε προτιμήσεις.

5. Δημιουργήστε ένα "Blockframe"

Γιατί: Για να επαναλάβετε γρήγορα τις διατάξεις εφαρμογής και τις ροές αλληλεπίδρασης UX.
Εργαλείο (ες) που χρησιμοποιώ: Καλά ... ορθογώνια.

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

Ακολουθεί ένα blockframe που έκανα για μια εφαρμογή συζήτησης που σχεδιάζω:

Δεν υπάρχει λόγος πίσω από τα χρώματα. Προφανώς ένιωθα πατριωτικό.

Αυτό μόνο μου πήρε περίπου 90 δευτερόλεπτα για να παραγάγει, αλλά είναι όλα τα καθοδήγηση που θα χρειαστεί να αρχίσω να σχεδιάζω τη διεπαφή. Προτιμώ αυτό πέρα ​​από το πλήρες φάσμα wireframing επειδή τείνω να παρασύρουν σε hi-fi όταν προσπαθώ να wireframe κάθε στοιχείο στην οθόνη. Ίσως είμαι απλά ένας κακός σχεδιαστής; Βλέπω πολλά συρματοπλέγματα που είναι τόσο λεπτομερή που μπορείτε να τα έχετε κάνει με πλήρη οπτική πιστότητα την πρώτη φορά γύρο ούτως ή άλλως. Απλά η γνώμη μου!

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

6. Μετατροπή σε Hi-Fi

Έτσι δεν θέλω να σας αφήσω να κρέμεται ...

... αλλά εδώ κάνεις τη μαγεία σου!

Το πιο σημαντικό πράγμα κατά τη διάρκεια της φάσης σχεδιασμού hi-fi είναι να τηρήσουμε όλα όσα δημιουργήσαμε στα βήματα 1-5.

  • Αποθηκεύστε τα πράγματα στο σωστό φάκελο (ες).
  • Χρησιμοποιήστε μόνο χρώματα στην παλέτα σας.
  • Μην ξεφύγετε από τα στυλ κειμένου σας.
  • Πάντα να συμμορφώνεστε με το πλέγμα σας.
  • Κατασκευάστε νέες παραμέτρους πριν να τις κάνετε σε υψηλή πιστότητα.

Περίληψη

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

Όταν δεν γράφω, δουλεύω σε εργαλεία σχεδίασης Sketch όπως τα UX Power Tools για να σας κάνει έναν καλύτερο, πιο αποδοτικό σχεδιαστή. Όλοι οι σχεδιαστές και ομάδες Sketch το χρησιμοποιούν και νομίζω ότι μπορεί να σας αρέσει και αυτό. Ελέγξτε το στο Marvel!

Ακολουθήστε το UX Power Tools στο Twitter
Ακολούθησέ με στο τουίτερ