Σχεδιασμός για μη σχεδιαστές: Μέρος 1

Η μόνη συμβουλή για να βελτιώσετε άμεσα τις δεξιότητές σας στο σχεδιασμό.

Πάρτε το βιβλίο! Παραγγελία Hello Web Design εδώ - πλήρης σειρά βίντεο, βιβλίο και eBook διαθέσιμο.

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

Έτσι, το πρώτο μέρος - ποιο είναι το κύριο πράγμα που πρέπει να θυμάστε κατά το σχεδιασμό;

Μειώστε την ακαταστασία.

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

Το άσχημο widget μας που πρόκειται να εφαρμόσουμε τις έννοιες σχεδιασμού.

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

Ας αρχίσουμε!

Μειώστε την ακαταστασία προσθέτοντας ένα πλέγμα στα πράγματα της γραμμής.

Εικόνα μέσω του πλαισίου πρόσοψης του Ιδρύματος

Υπάρχει ένα ανέκδοτο που συχνά λέγεται για τη διαμάχη ανάμεσα στους σχεδιαστές και τους προγραμματιστές του front-end: Ένας σχεδιαστής δίνει ένα mockup σε έναν προγραμματιστή, ο οποίος υλοποιεί το σχέδιο σε κώδικα. Ο σχεδιαστής στη συνέχεια διαμαρτύρεται ότι το στοιχείο so-and-so είναι δύο εικονοστοιχεία μακριά, προκαλώντας τον κύριο του έργου να ρίξει τα μάτια - δύο εικονοστοιχεία; Αυτό είναι τόσο μικρό που δεν πρέπει να πειράζει! Αδηφάγοι σχεδιαστές και το νευρώσεις τους!

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

Ποια φαίνεται πιο συνεκτική;

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

Η τοποθέτηση των αριστερών και δεξιών άκρων όλων των στοιχείων κάνει το widget να φαίνεται πιο συνεκτικό.

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

Εν ολίγοις, μειώστε την αίσθηση της ακαταστασίας, γεμίζοντας τα πράγματα.

Για εργασίες ιστού, χρησιμοποιήστε συντομεύσεις χρησιμοποιώντας πλαίσια πλέγματος front-end που περιλαμβάνουν ένα πλέγμα, όπως το Foundation, Bootstrap, Skeleton και PureCSS, τα οποία θα κάνουν σχεδόν αδύνατη τη χρήση τυχαίας τοποθέτησης στοιχείων HTML.

Για εργασίες εκτός του web design και mockups, μπορείτε επίσης να χρησιμοποιήσετε πλέγματα και οδηγούς στα προγράμματα σχεδίασης όπως το Sketch, το Photoshop και το Gimp.

Μειώστε την ακαταστασία περιορίζοντας τα χρώματα στο σχεδιασμό σας.

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

Παλιά τοποθεσία GoDaddy σε σχέση με το τρέχον.

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

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

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

Ο δικτυακός τόπος Adobe Color CC διαθέτει μια μεγάλη διασύνδεση point-and-click για να δημιουργήσετε συμπληρωματικές παλέτες χρωμάτων.

Η επιλογή μιας παλέτας χρωμάτων από την αρχή είναι μια δύσκολη επιχείρηση και γι 'αυτό μου αρέσει να βασίζομαι σε ιστότοπους που παρουσιάζουν προ-χτισμένες παλέτες χρωμάτων ή σας βοηθούν να δημιουργήσετε παλέτες από ένα βασικό χρώμα, όπως Colourlovers, Adobe Color CC και Colorblendy. Αυτές οι τοποθεσίες θα σας βοηθήσουν να δημιουργήσετε μια παλέτα που περιέχει ένα μικρό αριθμό χρωμάτων που λειτουργούν καλά μαζί.

Εφαρμογή μιας παλέτας χρωμάτων από το Colourlovers

Για το widget μας, πήραμε μια παλέτα από το Colourlovers και το εφαρμόσαμε στο widget. Σημειώστε ότι δεν πρέπει να χρησιμοποιηθούν όλα τα χρώματα, ούτε και τα ακριβή χρώματα που ορίζονται στην παλέτα. Το νέο κουμπί "Λήψη" δεν είναι το ίδιο σκούρο ροδάκινο, όπως στην παλέτα, αλλά η παλέτα μας έδωσε ένα καλό σημείο εκκίνησης.

Εάν θέλετε να μάθετε περισσότερα σχετικά με τη διαδικασία κατασκευής χρωμάτων, θα συνιστούσα αυτό το εξαιρετικό άρθρο σχετικά με το Smashing Magazine: Ένας οδηγός απλού web developer για το χρώμα.

Μειώστε την ακαταστασία μειώνοντας τον αριθμό γραμματοσειρών που χρησιμοποιείτε.

Σας ευχαριστούμε που διαθέτουμε περισσότερες γραμματοσειρές τώρα! Πηγαίνουν οι ημέρες που έχουν μόνο λίγες γραμματοσειρές από τις οποίες μπορείτε να επιλέξετε.

Η τυπογραφία είναι ένα άλλο μεγάλο θέμα που μπορεί να είναι συντριπτικό. Οι όροι που χρησιμοποιούνται για την περιγραφή και την κατηγοριοποίηση των γραμματοσειρών και των γραμματοσειρών (όροι που χρησιμοποιούνται γενικά εναλλακτικά για τους μη τυπογράφους) είναι οι Serif, sans-serif, monospace, display, web-safe και πλάκα.

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

Χρησιμοποιώντας μόνο δύο γραμματοσειρές καθιστά το γραφικό στοιχείο πιο καθαρό.

Το αρχικό μας γραφικό στοιχείο στα αριστερά χρησιμοποιεί τέσσερις διαφορετικές γραμματοσειρές και το ανανεωμένο widget στα δεξιά χρησιμοποιεί μόνο δύο. Το νέο γραφικό στοιχείο χρησιμοποιεί στυλ όπως τα πλάγια και τα all-caps, τα οποία εξακολουθούν να προσδίδουν αίσθηση διαφοράς μεταξύ διαφορετικών στοιχείων, αλλά συνολικά αισθάνονται πιο συνεκτικά.

Αλλά επιλέγοντας δύο γραμματοσειρές με όλες τις επιλογές που έχουμε στη διάθεσή μας μπορεί να είναι ακόμα συντριπτική. Τοποθεσίες όπως το Typekit (δωρεάν έως $ 99 / έτος) και το Google Γραμματοσειρές (δωρεάν) είναι εξαιρετικοί πόροι για επαγγελματικές, ωραίες γραμματοσειρές, αλλά περιέχουν εκατοντάδες επιλογές για να επιλέξουν μεταξύ τους.

Χρησιμοποιήστε ιστότοπους που δημιουργούν δωρεάν γραμματοσειρές όπως Typewolf, Όμορφη Web Type, Ζεύγος γραμματοσειρών και Typ.io.

Μειώστε την επιλογή χρησιμοποιώντας έναν ιστότοπο για τη δημιουργία γραμματοσειρών για να δείτε έναν πιο περιορισμένο αριθμό γραμματοσειρών και να τις δείτε σε δράση. Ορισμένοι ιστότοποι απαριθμούν τις καλύτερες διαθέσιμες γραμματοσειρές Google, όπως το Typewolf, τον όμορφο τύπο ιστού, το ζεύγος γραμματοσειρών και το typ.io. Δεν χρειάζεται πλέον να μετακινηθείτε σε εκατοντάδες γραμματοσειρές - απλά περιηγηθείτε σε αυτούς τους ιστότοπους μέχρι ο συνδυασμός να είναι σωστός για εσάς και την κατάστασή σας.

Για περισσότερες πληροφορίες σχετικά με την επιλογή γραμματοσειρών, δείτε αυτό το εξαιρετικό άρθρο του Smashing Magazine: Πώς να επιλέξετε ένα Typeface - έναν οδηγό βήμα προς βήμα.

Ένα βιβλίο Apart έχει επίσης ένα εξαιρετικό βιβλίο που πηγαίνει στην τυπογραφία web λεπτομερώς: Στην τυπογραφία Ιστού

Μειώστε την αίσθηση της ακαταστασίας προσθέτοντας κενά.

Το Whitespace είναι ο τελικός μειωτής ακαταστασίας.

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

Πριν και μετά την προσθήκη λευκού χώρου στην προσωπική μου ιστοσελίδα.

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

Η προσθήκη κενών θέσεων (και η ομαλοποίηση του χώρου μεταξύ των στοιχείων) κάνει το widget να αισθάνεται πιο επαγγελματικό.

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

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

Για περισσότερα, δείτε αυτά τα εξαιρετικά άρθρα:

  • Το Whitespace στο Web Design: Τι είναι και γιατί πρέπει να το χρησιμοποιήσετε
  • Χρησιμοποιώντας λευκό χώρο (ή αρνητικό χώρο) στα σχέδιά σας

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

Κάθε μια από τις αρχές που μειώνουν την ακαταστασία που εφαρμόζεται σε αυτό το widget έχει βελτιώσει σημαντικά την εμφάνισή του.

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

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

Εν ολίγοις, επιδιώξτε ένα "καθαρό" και ομαλό σχεδιασμό.

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

Επόμενες δημοσιεύσεις σε αυτή τη σειρά:

  • Το μέρος 2 σχετικά με το UX και το περιεχόμενο μπορεί να δει εδώ.
  • Το μέρος 3 σχετικά με τη σχεδίαση διαίσθηση και έμπνευση μπορεί να δει εδώ.
Παραγγείλετε Hello Web Design εδώ

Πάρτε το βιβλίο! Το Hello Web Design θα περιέχει όχι μόνο τις παραπάνω πληροφορίες, αλλά και τη θεωρία και τις βέλτιστες πρακτικές σε όρους προς το έδαφος και ευκόλως κατανοητούς όρους που απευθύνονται σε προγραμματιστές και μη-σχεδιαστές.

Αγοράστε το βιβλίο εδώ.

Σας ευχαριστώ όλους! Για οποιεσδήποτε ερωτήσεις, ακολουθήστε και με μήνυμα στο Twitter.

(Αυτό το άρθρο εμφανίζεται επίσης στο blog Hello Web Books.)