Προτού να μπορέσετε να μάθετε το σχεδιασμό, πρέπει πρώτα να ελέγξετε τις βασικές αρχές

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

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

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

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

Εδώ είναι μερικές βασικές αρχές που πρέπει να καταλάβετε ώστε να μπορείτε να πάρετε τον οπτικό σας σχεδιασμό στο επόμενο επίπεδο.

Θεμελιώδης # 1: Επιστρέψτε στα βασικά με τον τύπο

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

Πληκτρολογήστε ως εικόνες

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

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

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

Η αντιστοίχιση γραμματοσειρών μπορεί να δημιουργήσει ή να σπάσει ένα σχέδιο

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

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

Θεμελιώδης # 2: Χρησιμοποιήστε το χώρο για να δημιουργήσετε ισορροπία

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

Δημιουργήστε ισορροπία και οπτική αρμονία

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

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

Απλοποίηση της βραβευμένης αφίσας από τον Craig Welsh

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

Θεμελιώδης # 3: Χρησιμοποιήστε το μέγεθος για να δημιουργήσετε οπτική ιεραρχία

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

Η ταξινόμηση μεγέθους είναι ένας από τους λόγους για τους οποίους τα δίκτυα είναι χρήσιμα

Η ταξινόμηση μεγέθους είναι ένας από τους λόγους για τους οποίους τα δίκτυα είναι χρήσιμα. Μπορείτε να χρησιμοποιήσετε τα πλέγματα για να βοηθήσετε τα στοιχεία μεγέθους χρησιμοποιώντας λόγους για να δώσετε σημασία.

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

Χρησιμοποιήστε το μέγεθος για να ορίσετε την οπτική ιεραρχία

Εδώ είναι μια άσκηση που θα βοηθήσει να αναπτυχθεί το μάτι σας για το μέγεθος.

Το κλειδί ζητά σχόλια.

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

Κατά την άσκηση αυτή, να έχετε υπόψη σας τα ακόλουθα ερωτήματα:

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

Θεμελιώδης # 4: Χρησιμοποιήστε χρώμα για να μεταφέρετε νόημα

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

Το χρώμα συμβάλλει στην ερμηνεία του σχεδιασμού

Για βαθιά βουτιά στο χρώμα, μπορείτε να διαβάσετε το άρθρο Σχεδίαση σε χρώμα. Εδώ είναι μερικά βασικά σημεία από το άρθρο.

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

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

Οι ταινίες και οι εκπομπές είναι μια μεγάλη πηγή έγχρωμης έμπνευσης

Εδώ είναι μια άσκηση που θα βοηθήσει να αναπτυχθεί το μάτι σας για το χρώμα.

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

Προσέξτε πώς αλλάζει η διάθεση και ο τόνος του σχεδίου. Αλλάζει και το νόημα;

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

Τι στρατηγικές για τη βελτίωση ως σχεδιαστής; Αφήστε μου μια σημείωση ή στείλτε μου ένα tweet στο Twitter.

Εάν σας άρεσε αυτό το άρθρο, μπορείτε επίσης να απολαύσετε το CSS σε Javascript με την Αφροδίτη, μια βιβλιοθήκη της Ακαδημίας Khan.

Μπορείτε να με βρείτε στο Medium όπου δημοσιεύει κάθε εβδομάδα. Ή μπορείτε να ακολουθήσετε εμένα στο Twitter, όπου δημοσιεύω μη-αισθησιακή ramblings σχετικά με το σχεδιασμό, front-end ανάπτυξη, και την εικονική πραγματικότητα.

P.S. Εάν σας άρεσε αυτό το άρθρο, αυτό θα σήμαινε πολλά αν κάνετε κλικ στο και μοιραστείτε με φίλους.