Βασικές τάσεις σχεδιασμού, Δεκέμβριος 2016
Βρίσκεστε πάντα παρατηρώντας ότι ένα συγκεκριμένο στοιχείο σχεδίασης συνεχίζει να αναδύεται; Ακόμα και αυτές οι μικροσκοπικές λεπτομέρειες που φαίνονται κάπως ασήμαντες μπορεί να είναι δείκτες των τάσεων σχεδιασμού. Αυτό ισχύει ιδιαίτερα με τα στοιχεία του ρομπότ αυτού του μήνα.
Κάθε μία από αυτές τις τάσεις - οι άσπρες ακμές που πλαισιώνουν ένα σχέδιο ιστού, οι κινηματογραφικές ταινίες και τα μικροσκοπικά κινούμενα σχέδια φόρτωσης - είναι φαινομενικά απλές λεπτομέρειες που βελτιώνουν την οπτική εμπειρία για τους χρήστες.
Ας δούμε τι συμβαίνει στον σχεδιασμό αυτού του μήνα:
1) Λευκές άκρες
Περισσότερα σχέδια web χρησιμοποιούν λευκές άκρες ή πλαισιώνουν γύρω από την περίμετρο του σχεδίου στο πρόγραμμα περιήγησης ιστού. Είναι μια νέα συστροφή σε μια παλιά ιδέα όταν χτίστηκαν περισσότερες ιστοσελίδες σε συγκεκριμένα μεγέθη και το πλαίσιο χρησιμοποιήθηκε για περίεργα πλάτη του προγράμματος περιήγησης.
Είναι κάτι που ξεθωριάζει, καθώς περισσότεροι σχεδιαστές επέλεξαν σχέδια με ευέλικτο, πλήρους πλάτους.
Η νέα συστροφή με τη διαμόρφωση είναι ενδιαφέρουσα και είναι ένας καλός τρόπος για να δημιουργήσετε έναν καμβά για το σχεδιασμό. Οι περισσότεροι από τους ιστότοπους που χρησιμοποιούν αυτήν την τάση περιλαμβάνουν ένα λευκό-κοινό, αλλά όχι υποχρεωτικό άκρο γύρω από το σχεδιασμό. Έχει πλάτος λίγων pixel και συνήθως τοποθετείται γύρω από τρεις ή τέσσερις πλευρές του σχεδίου. (Μερικοί επιλέγουν να αφήσουν το πλαίσιο από το κάτω μέρος του σχεδίου για να ενθαρρύνουν την κύλιση.)
Το ωραίο πράγμα για τη λευκή άκρη είναι ότι ο σχεδιασμός είναι καθαρός με λευκές γραμμές που μπορούν να βοηθήσουν να εστιάσετε σε δυνατές επιλογές χρωμάτων, τραβήξτε το μάτι από την άκρη της οθόνης σε άλλα φωτεινά στοιχεία (όπως πλαίσια κειμένου ή κλήσεις προς δράση) και η εξόρυξη μπορεί να βοηθήσει στη δημιουργία καμβά φόντου για κύλιση παράλλαξης ή άλλα κινούμενα εφέ.
Ζυθοποιία Camden Town κάνει αυτό εξαιρετικά καλά. Το λευκό πλαίσιο πλαισιώνει μεταξύ των στοιχείων του σχεδιασμού για να δημιουργήσει βάθος και εστίαση για τον χρήστη. Ο λευκός διαχωρισμός ξεχωρίζει κάθε νέο τμήμα περιεχομένου στην οθόνη και συμβάλλει στη συνολική οργάνωση του σχεδίου. (Επιπλέον, οι λευκές προθέσεις φέρνουν πραγματικά την έντονη κόκκινη και μαύρη παλέτα χρωμάτων για να διατηρήσουν τον συνδυασμό να αισθάνεται υπερβολικά.)
2) Cinemagraphs
Οι ταινίες είναι φωτογραφίες με ένα στοιχείο κίνησης μέσα τους. Μπορεί να είναι κάτι από μια φωτογραφία ενός ατόμου που αναβοσβήνει τα μάτια τους στο λεπτό κέλυφος του ουρανού στον ουρανό όπου τίποτα άλλο δεν κινείται. Ενώ οι συνηθέστερες χρήσεις της τάσης σχεδιασμού εξακολουθούν να εμφανίζονται σε διαφημίσεις και κοινωνικά μέσα, οι σχεδιαστές ιστοσελίδων αρχίζουν να ενσωματώνουν αυτή την τεχνική "ζωντανής φωτογραφίας".
Λειτουργεί επειδή οι χρήστες ενδιαφέρονται για κίνηση. Είναι αποτελεσματικό για πολλούς από τους ίδιους λόγους, το βίντεο είναι μια καλή επιλογή για να προσελκύσετε την προσοχή ενός χρήστη. Η κίνηση και η δράση εμπλέκονται. Είναι ενδιαφέρον. Αισθάνεται πραγματικά.
Όταν πρόκειται για την εργασία με κινηματογράφους, το επίδομα είναι ότι μπορείτε να δημιουργήσετε ένα σχέδιο με κίνηση αλλά χωρίς κάποια από την υψηλή παραγωγή που έρχεται με ένα video project.
Το τέχνασμα να δουλέψει κανείς είναι να ριζώσει την κίνηση στην πραγματικότητα. Ακόμη και αν η σκηνή είναι πιο φανταστική, όπως Μονόχρωμο Παρίσι , οι νόμοι της φυσικής θα πρέπει να εφαρμόζονται στην κίνηση στην οθόνη. Το νερό θα πρέπει να ρέει προς τα κάτω, για παράδειγμα, η βαρύτητα πρέπει να είναι μια δύναμη στο πώς γίνεται η κίνηση.
Η κίνηση πρέπει επίσης να είναι απλή και λεπτή. Πολύ μεγάλη κίνηση και ένα βίντεο μπορεί να είναι μια καλύτερη επιλογή. Αυτό που εφιστά τους χρήστες σε ένα σινεμά είναι αυτό το στοιχείο της έκπληξης. Αυτό που μοιάζει με μια φωτογραφία ακόμα σε μια εικόνα ήρωα έχει πραγματικά κάτι που συμβαίνει σε αυτό. Αυτό το μικρό divot θα βοηθήσει να προσελκύσουν τους ανθρώπους, να τους κρατήσει δεσμευμένους με το σχέδιο περισσότερο και ελπίζουμε ότι θα οδηγήσει σε μια μετατροπή ιστοσελίδα.
3) Tiny Animation Animations
Οι χρόνοι φόρτωσης είναι μεγάλοι. Αλλά δεν μπορείτε πάντα να υπολογίζετε για την ταχύτητα του δικτύου στο οποίο είναι συνδεδεμένος ένας χρήστης. αυτό είναι όπου τα μικρά κινούμενα σχέδια φόρτωσης μπορούν να γίνουν μια μεγάλη υπόθεση.
Αυτό που διαφέρει από τη μικροσκοπική τάση της κίνησης φόρτωσης είναι ότι είναι μερικές φορές το βλέπετε, μερικές φορές δεν σχεδιάζετε στοιχείο. Είτε έτσι είτε αλλιώς η ομάδα σχεδιασμού έχει φροντίσει ώστε κάθε χρήστης να έρχεται στην ιστοσελίδα με μια θετική εμπειρία.
Αυτά τα μικροσκοπικά κινούμενα σχέδια μπορούν να αναγνωριστούν από το γεγονός ότι δεν αποτελούν πραγματικά μέρος της εμπειρίας των χρηστών που μετράει προς το στόχο του συνολικού ιστότοπου. Είναι ένα απλό, μικρό στοιχείο που προσελκύει την προσοχή σας για ένα γρήγορο δευτερόλεπτο ενώ το πρωταρχικό σχέδιο τοποθεσίας εξυπηρετείται.
Το δροσερό πράγμα για την τάση είναι ότι αυτά τα μικροσκοπικά κινούμενα σχέδια φόρτωσης είναι πραγματικά μικροσκοπικά, από το μέγεθος του οπτικού εαυτού μέχρι την ενέργεια στην οθόνη, δεν υπάρχουν πολλά να δούμε, αλλά αυτό που υπάρχει είναι απόλυτα ευχάριστο.
Εδώ είναι τρία υπέροχα παραδείγματα:
- Η Hannah Purmort η φόρτωση της κινούμενης εικόνας είναι μία κίνηση που κινείται στον απέναντι συνδυασμό χρωμάτων της κύριας οθόνης. Το εγκεφαλικό επεισόδιο μεταφέρεται μέσω του σχεδιασμού και στο εφέ κύλισης.
- Susa Ventures διαθέτει ένα μικρό εικονίδιο με μια μικρή μπάρα φορτίου. Αυτός προσελκύει την προσοχή σας επειδή ο μικροσκοπικός γορίλλας είναι οπτικά ενδιαφέρον και σας κάνει περίεργο για το περιεχόμενο του ιστότοπου.
- FPG χρησιμοποιεί ένα σκίτσο που φαίνεται να σχεδιάζεται στην οθόνη ως το υπόλοιπο φορτίο της αρχικής σελίδας. Η μόνη παρατήρηση ότι είναι στην πραγματικότητα ένα animation φόρτωσης είναι ότι το υπόλοιπο της οθόνης είναι πολύ πιο περίτεχνα μόλις φορτωθεί με τρέχον βίντεο και ακόμα περισσότερα σκίτσα. Το αποτέλεσμα είναι απρόσκοπτο και είναι πάνω από σχεδόν πριν ο χρήστης αντιληφθεί ότι έχει ξεκινήσει.
συμπέρασμα
Οι λεπτομέρειες βρίσκονται στην καρδιά κάθε καλού σχεδιασμού. Είναι σημαντικό να θυμάστε ότι είναι σημαντικό να σχεδιάζετε (και να υπολογίζετε) τα πράγματα που δεν θα παρατηρούν όλοι οι χρήστες. Έτσι συνδέονται όλες αυτές οι τάσεις - μέσα από μικρά σχεδιαστικά στοιχεία που δεν είναι προφανές κομμάτι της συνολικής αισθητικής.
Αυτά τα μικροσκοπικά στοιχεία μπορεί να είναι το πράγμα που θέτει πραγματικά τον ιστότοπό σας ξεχωριστά για έναν χρήστη. Μπορεί να είναι το στοιχείο της απόλαυσης που φέρνει κάποιον πίσω στο σχέδιό σας. Οι λεπτομέρειες μπορεί να είναι ο διαφοροποιητής μεταξύ επιτυχίας και αποτυχίας.
Τι τάσεις αγαπάτε (ή μιλάτε) τώρα; Θα ήθελα πολύ να δω κάποιες από τις ιστοσελίδες που σας γοητεύει. Ρίξτε μου ένα σύνδεσμο στο Twitter . Θα ήθελα πολύ να σας ακούσω.