Προτού μπορέσετε να κυριαρχήσετε στο σχεδιασμό, πρέπει πρώτα να κυριαρχήσετε τις βασικές αρχές

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Όταν κάνετε αυτήν την άσκηση, λάβετε υπόψη τις ακόλουθες ερωτήσεις:

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

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

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

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

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

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

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

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

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

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

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

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

CSS σε Javascript: Το μέλλον του στυλ που βασίζεται σε συστατικά

Αυτή την εβδομάδα, θέλω να σας παρουσιάσω την έννοια του CSS στο Javascript με το Aphrodite από την Khan Academy. Η Αφροδίτη επιτρέπει… medium.com

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

PS Αν σας άρεσε αυτό το άρθρο, θα σήμαινε πολλά αν κάνετε κλικ στο? και μοιραστείτε με φίλους.