() translation by (you can also view the original English article)
Σε αυτό το σύντομο σεμινάριο θα σας δείξω μία από τις αγαπημένες μου συντομεύσεις για να ξεκινήσουμε ένα web design. Αυτή είναι μια μέθοδος που έχω χρησιμοποιήσει πολύ σε freelance σχεδιασμό και θα σας βοηθήσει να ξεπεράσετε το αρχικό εμπόδιο του να αποφασίσετε τη χρωματική παλέτα και τη συνολική εμφάνιση.
Αυτή η τεχνική είναι απλή, αλλά δεν είναι οπωσδήποτε προφανής έως ότου έχετε περάσει τη διαδικασία μερικές φορές. Όλα ξεκινούν, επιλέγοντας την τέλεια εικόνα. Οπότε ας ξεκινήσουμε!
Δείτε το Βίντεο
Επιλέγοντας μια Εικόνα
Όπως αναφέρθηκε, όλα ξεκινούν με μια εικόνα. Κάτι το οποίο είναι σχετικό με την τοποθεσία Web που σχεδιάζετε. Θα χρησιμοποιήσω αρκετά το Unsplash επειδή είναι καταπληκτικό, αλλά η ποικιλία από όμορφες φωτογραφίες που είναι τώρα διαθέσιμες στο Envato Elements είναι επίσης εξαιρετική.
Διαλέξτε κάτι σχετικό, αλλά και κάτι το οποίο περιέχει επίσης χρώματα που μπορείτε να φανταστείτε ότι θα ταιριάζουν με την ιστοσελίδα σας. Εάν σχεδιάζετε κάτι για μια καθιερωμένη επιχείρηση, ίσως χρειαστεί να μείνετε εντός απαιτήσεων του branding, στην οποία περίπτωση όλη αυτή η διαδικασία θα λειτουργήσει εξίσου καλά χρησιμοποιώντας ένα λογότυπο ως το σημείο εκκίνησης.
Εδώ είναι η εικόνα με την οποία θα αρχίσω, από τον Kyler Trautner (είναι όμορφη, και μας δίνει μια σειρά από ισορροπημένα χρώματα):
Μπορείτε να δείτε το μπλε - μαύρο από την άσφαλτο, και μια πορτοκαλί απόχρωση από την τούνδρα, εάν αυξήσουμε τον κορεσμό, συν μια απόχρωση που φαίνεται να είναι γκρι, αλλά είναι στην πραγματικότητα μια μπλε απόχρωση από το χαμηλό σύννεφο.
Εισάγοντας μια Εικόνα στο Adobe XD
Έχω κατεβάσει και αποθηκεύσει την εικόνα , έτσι τώρα θα ανοίξω το Adobe XD (που τυγχάνει να είναι το εργαλείο της επιλογής μου σε αυτήν την περίπτωση, μπορείτε να χρησιμοποιήσετε κάτι που είναι πιο οικείο σε εσάς αν προτιμάτε).
Μεταβείτε στο File > Import και επιλέξτε την εικόνα για να τη φέρετε στον καμβά σας. Αλλάξτε το μέγεθος κατά βούληση.
Επιλέγοντας Χρώματα
Τοποθετώντας στοιχεία UI στον καμβά, μπορούμε να πάρουμε τον color picker και να επιλέξουμε αποχρώσεις από την εικόνα μας.
Για παράδειγμα:
- Τοποθετήστε ένα ορθογώνιο για να χρησιμοποιηθεί σαν φόντο, και δώστε του μια "μεσαία" απόχρωση από την άσφαλτο.
- Δημιουργήσετε ένα άλλο ορθογώνιο για το κύριο στοιχείο wrapper και, στη συνέχεια, δώστε μια πιο σκούρα απόχρωση από το δρόμο.
- Προσθέστε μια σκιά στο ίδιο στοιχείο wrapper, και δώστε του μια αντίστοιχη σκούρα μπλέ/γκρί απόχρωση.
- Ένα χλωμό χρώμα του ουρανού θα ταιριάζει σε ένα στοιχείο σελίδας κάτω από την εικόνα.
- Το ίδιο ισχύει και στο κείμενο, κάποιο από το οποίο θα πρέπει να είναι σκούρο σε ανοιχτό φόντο και αντίστροφα.
Αυτό έχω μέχρι στιγμής:
Στοιχεία UI σε Αντίθεση
Ας χρησιμοποιήσουμε τώρα ορισμένες αντιθετικές πορτοκαλί αποχρώσεις για κάποια από τα κουμπιά. Τοποθετήστε μερικά ορθογώνια κουμπιά στη σελίδα και να επιλέξτε μια μπεζ/πορτοκαλί απόχρωση από τα χόρτα δίπλα στο δρόμο.
Το αρχικό εφέ είναι σχεδόν "βαρετό", οπότε χρησιμοποιώντας το εργαλείο επιλογής Fill ανεβάστε τον επιλογέα πάνω δεξιά για να αυξήσετε τον κορεσμό.
Δοκιμάστε το ίδιο με ένα αντιπαραβαλλόμενο μπλε χρώμα, για ένα δευτερεύον κουμπί.
Συμπέρασμα
Από μια κατάλληλη εικόνα μπορείτε να ξεκινήσετε μια χρωματική παλέτα και τη βάση για ένα ολοκληρωμένο web design.
Το παράδειγμα που ακολουθήσατε είναι μέρος από μια επερχόμενη σειρά μαθημάτων με τίτλο «Σχεδιασμό με Adobe XD Φιλικό προς τον Κώδικα» οπότε έχετε το νου σας για αυτό!
Εάν σας ενδιαφέρει η θεωρία χρώματος επίσης μπορεί να θέλετε να δείτε κάποια από αυτές τις άλλες πηγές μάθησης:
