Τάσεις σχεδιασμού ιστότοπων 2016 που πρέπει να λάβετε υπόψη πριν από τη δημιουργία του ιστότοπού σας

dk new media site 1

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

  1. Κινουμένων σχεδίων

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

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

Ιστοσελίδα κινουμένων σχεδίων Beagle

Κάντε κλικ για να δείτε την εκπληκτική κινούμενη εικόνα JavaScript και CSS του Beagle όταν κάνετε κύλιση προς τα κάτω στον ιστότοπό τους.

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

Τα κινούμενα σχέδια GIF επανεμφανίστηκαν (με χαρά;) και μπορούν να χρησιμοποιηθούν για πολλούς διαφορετικούς σκοπούς, όπως κωμωδία, επιδείξεις και ακόμη και μόνο για διακόσμηση.

  1. Υλικό Σχεδιασμός

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

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

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

Έννοια επανασχεδιασμού σχεδιασμού υλικών Android Youtube

  1. Επίπεδη σχεδίαση

Ενώ το Material Design προσφέρει μια προσέγγιση στην έννοια του μινιμαλισμού, η επίπεδη σχεδίαση παραμένει η κλασική επιλογή για τους λάτρεις των καθαρών γραμμών. Δηλαδή, η επίπεδη σχεδίαση θεωρείται συχνά ως πιο ρεαλιστική, αυθεντική και άνετη ψηφιακή εμφάνιση.

Space Needle

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

προσεδάφισης

  1. Διαχωριστικές οθόνες

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

split-screen

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

σπασμένη οθόνη-ωκεανός

  1. Απόρριψη του Chrome

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

χρώμιο

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

χρώμιο προς τα εμπρός

 

  1. Ξεχάστε το Fold

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

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

γλάστρα

  1. Βίντεο πλήρους οθόνης

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

DK New Media

Κάντε κλικ για να δείτε DK New MediaΤο βίντεο στην αρχική τους σελίδα

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

Ποια είναι η γνώμη σας;

Αυτός ο ιστότοπος χρησιμοποιεί το Akismet για να μειώσει το spam. Μάθετε πώς επεξεργάζονται τα δεδομένα των σχολίων σας.