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

Ας περιγράψουμε τα κύρια προβλήματα που επιλύει ένα πλαίσιο σχεδίασης, γιατί το χρειάζεστε και τα στοιχεία που θα πρέπει να δημιουργήσετε κατά την κατασκευή ενός. Θα βρείτε ένα πλαίσιο Sketch UI με δυνατότητα λήψης Ελεύθερος αργότερα στο άρθρο που σας επιτρέπει να δημιουργήσετε το δικό σας πλαίσιο σχεδίασης.

Ένα πλαίσιο σχεδίασης στο Σκίτσο

Τι είναι το πλαίσιο σχεδίασης;

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

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

Τα πλαίσια σχεδιασμού επιλύουν διάφορα προβλήματα, όπως:

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

Το πρώτο πρόβλημα: ασυνέπεια στο προϊόν

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

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

Τα πλαίσια σχεδιασμού επιλύουν αυτό το πρόβλημα θεσπίζοντας σταθερά πρότυπα.

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

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

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

Ένα κοινό πρόβλημα: τρία διαφορετικά στυλ στο ίδιο κουμπί

Το τρίτο πρόβλημα: αλλαγές στο σχεδιασμό του τελευταίου σταδίου

Πόσες φορές οι σχεδιαστές πρέπει να κάνουν μια εφάπαξ αλλαγή χρώματος στο αρχείο σχεδίασης με 120 ήδη εξελιγμένα πρότυπα επιφάνειας εργασίας; Πόσες φορές είναι απαραίτητο να αλλάξετε ένα εικονίδιο που αποτελεί μέρος 200 στοιχείων;

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

Πώς να δημιουργήσετε ένα πλαίσιο σχεδίασης

Τώρα που γνωρίζουμε τι είναι ένα πλαίσιο σχεδίασης και τα προβλήματα που επιλύει, ας μιλήσουμε για τον τρόπο δημιουργίας ενός (και τι υπάρχει στη λήψη του κιτ Sketch UI που παρέχεται αργότερα στο άρθρο).

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

Ιεραρχία πλαισίου σχεδιασμού

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

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

Χρώμα

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

Μια καλή πρακτική είναι να χωρίσετε τα χρώματα σε ομάδες:

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

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

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

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

Πλέγμα: Ο σχεδιαστικός χώρος

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

Υπάρχουν δύο τύποι πλεγμάτων: κατακόρυφος Υ οριζόντιος .

Το κάθετο πλέγμα είναι το πιο συχνά χρησιμοποιούμενο και διατηρεί τα πάντα σε οριζόντια ευθυγράμμιση. Υπάρχουν πολλά δημοφιλή συστήματα πλέγματος όπως Μπότα ή το παλαιότερο πλέγμα 960 εικονοστοιχείων. Ένα οριζόντιο πλέγμα δεν είναι τόσο κοινό. Ένα οριζόντιο πλέγμα χρησιμοποιείται για την τυπογραφία. Δημιουργεί έναν κατακόρυφο ρυθμό για παραγράφους και συνήθως εμφανίζεται στις εφημερίδες.

Τροποποιητές: στυλιστικοί κανόνες

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

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

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

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

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

Τυπογραφία: το περιεχόμενο

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

Σχεδιάστε το στυλ και το μέγεθος όλων των επικεφαλίδων (H1, H2, H3, κ.λπ.) και των παραγράφων. Το στατικό αντίγραφο της σελίδας γενικά δεν έχει πολλές στυλιστικές παραλλαγές (χρώμα ή βάρος). Η μόνη παραλλαγή, σε σχέση με το στατικό στυλ αντιγραφής σελίδας, είναι αν είναι ανοιχτόχρωμο ή σκούρο φόντο. Επομένως, είναι καλύτερο να δημιουργήσετε δύο σύνολα χρωμάτων για να διασφαλίσετε ότι το στατικό αντίγραφο της σελίδας λειτουργεί και στα δύο.

Κομψό σώμα κειμένου σε ανοιχτόχρωμο και σκούρο φόντο

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

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

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

Εικονίδια

Υπάρχουν δύο ομάδες εικονιδίων σε ένα σύστημα διάταξης: ενημερωτικά και εικονίδια διεπαφής χρήστη. Η πρώτη ομάδα είναι συνήθως μέρος ενός σύνολο εικονογράφησης και δεν χρησιμοποιείται για κανένα στοιχείο αλληλεπίδρασης διεπαφής χρήστη (όπως κουμπιά). Η δεύτερη ομάδα - εικονίδια διεπαφής χρήστη - προσθέτει νόημα στα πιο σύνθετα στοιχεία: κουμπιά, ετικέτες ή πίνακες, ενώ καταλαμβάνει πολύ μικρό χώρο. Τα εικονίδια στο περιβάλλον χρήστη μπορούν επίσης να χρησιμοποιηθούν ως ενεργοποιητές για λειτουργίες όπως 'επεξεργασία', 'αντιγραφή', 'λήψη' και 'διαγραφή'. Ξεκινήστε με απλά εικονίδια που χρησιμοποιούνται για αλληλεπιδράσεις διεπαφής χρήστη, όπως βέλη, 'προσθήκη' (+) ή 'κλείσιμο' (x). Μια καλή πρακτική είναι να τα σχεδιάσετε σε διαφορετικά μεγέθη (12px, 16px, 24px 32px).

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

Συστατικά

Κουμπιά

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

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

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

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

Στοιχεία εισόδου

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

Πολύπλοκα συστατικά

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

Ενότητες

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

Καλές πρακτικές του πλαισίου σχεδιασμού

Δοκιμάστε συνεχώς το πλαίσιο σχεδίασης

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

Δημιουργήστε απλά στοιχεία διεπαφής χρήστη

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

Μην εστιάζετε σε ένα μόνο στυλ

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

Δημιουργήστε το δικό σας πλαίσιο σχεδίασης

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

Είστε έτοιμοι να ξεκινήσετε το δικό σας πλαίσιο σχεδίασης;

Κατεβάστε το αρχείο Sketch εδώ . Περιλαμβάνονται οδηγίες για τον τρόπο χρήσης του.

Εμπνευσμένα συστήματα σχεδίασης και πλαίσια διεπαφής χρήστη

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

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

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

Ατλαντικός - Ένας άλλος σπουδαίος μαθησιακός πόρος. του οδηγός στυλ προϊόντος είναι ένα σπουδαίο σύστημα σχεδίασης για μελέτη. Μοιράζονται τους Πακέτο GUI Ιστού , ένα αρχείο Sketch με τόνους συστατικών και εννοιών.