Το πιο θορυβώδες μέσο περιεχόμενου εκεί έξω έχει επιτέλους αρχίσει να μαθαίνει πως να κάνει ησυχία. Το 2015, το web - design απομακρύνθηκε από την υπερπληροφόρηση σε μία ανακυκλούμενη αισθητική γύρω από τον άδειο χώρο και την απλότητα. Παίρνοντας μια ιδέα από τα περιοδικά, οι ιστοσελίδες χρησιμοποιούν μεγάλες και μεγάλης ευκρίνειας φωτογραφίες και γραμματοσειρές για να προσελκύσουν αναγνώστες με ευχάριστες στο μάτι εισαγωγές πριν αποκαλυφθεί επιπλέον περιεχόμενο.
Αυτός ο σχεδιασμός έχει επηρεαστεί από μία νέα προσέγγιση στην απλότητα και από την ανάγκη να φροντίζεται η πρόσβαση στο ίντερνετ από κινητό, που αυξάνεται κάθε χρόνο. Στο μέτωπο αυτής της προσπάθειας να κοπεί η υπερβολή, παρουσιάζονται 14 σχεδιαστικές προτάσεις που έχουν χρησιμοποιηθεί το 2015.
1. Μινιμαλισμός
Από απλοποιημένα λογότυπα και τυπογραφικά στοιχεία μέχρι καθαρισμό ολόκληρων ιστοσελίδων, ο μινιμαλισμός είναι η μόδα που έχει επηρεάσει όλα τα άλλα. Οι ιστοσελίδες συγκεντρώνονται περισσότερο στο πραγματικό περιεχόμενο και μειώνουν όλο το χάος γύρω από αυτό. Τα Footer, τα Sidebar και τα περιθώρια όλα εξαφανίζονται και ακόμη οι παλέτες χρωμάτων απλοποιούνται ενώ οι εταιρίες δίνουν σημασία σε ένα κυρίαρχο χρώμα στον οπτικό τους σχεδιασμό. Η αλλαγή του λογότυπου της StubHub είναι ένα τέλειο παράδειγμα αυτής της μόδας.
2. Εφαρμογιστικά μενού
Σχεδιάζοντας με την αγορά κινητού στο μυαλό αλλάζει περισσότερα από την αισθητική. Έχει επηρεάσει όλη την διαδικασία οι απεικονιστές του ίντερνετ σκέφτονται την οργάνωση του περιεχομένου τους και πως αφήνουν τους αναγνώστες να το προσβάσουν. Τα μενού που κολλάνε και sidebar χάνουν την προτίμηση τους για να κάνουν χώρο σε περιεχόμενο που οι αναγνώστες πραγματικά θέλουν να δουν. Στις μέρες μας, τα μενού είναι στο πάνω μέρος της οθόνης και είναι κατά κύριο λόγο κρυμμένα, αναγνωρίσιμα από ένα μόνο εικονίδιο (συχνά μία στοίβα από τρις γραμμές λεγόμενες ως "χάμπουργκερ" που όταν επιλέγεται εμφανίζεται ή γλιστράει σε ένα πιο δυνατό μενού.
3. Κουμπιά φαντάσματα
Οι ιστοσελίδες απομακρύνονται από θορυβώδη, επιδεικτικά κουμπιά, και αγκαλιάζουν διαφανή κουμπιά. Επειδή είναι λιγότερα αφαιρετικά τα κουμπιά φαντάσματα βοηθούν τις ιστοσελίδες να επισημάνουν περισσότερο από το περιεχόμενο που θέλουν το κοινό πραγματικά να δει αντί για κάλεσμα-για-δράσεις που θα ήθελαν να αναγκάσουν τους χρήστες να δουν. Τα κουμπιά φαντάσματα περιλαμβάνουν μόνο το περίγραμμα του κουμπιού (χωρίς γέμισμα) μαζί με μία λέξη ή δύο σε απλή γραμματοσειρά στο κέντρο. Η BigDrop μία web - design εταιρία έχει ένα εξέχων κουμπί φάντασμα στην αρχική σελίδα τους.
4. H βασιλεία της εικόνας - ήρωα
Ήδη στη μόδα από το 2014, η εικόνα-ήρωας δεν έχει πάει πουθενά αυτό το χρόνο, αλλά έχει εξελιχθεί. Πρόπερσι, οι ιστοσελίδες σε όλο το διαδίκτυο περιείχαν την πρότυπη εικόνα-ήρωας: μια υψηλής ευκρίνειας (ΗD) φωτογραφία προβλεπόμενο εμφανώς στο πάνω μέρος της ιστοσελίδας που τέντωνε το ολόκληρο πλάτος του παραθύρου ενός περιηγητή ενός χρήστη με μόνο λίγες λέξεις κειμένου να την επικαλύπτουν.
Αυτόν τον χρόνο η εικόνα ήρωας έχει αλλάξει σε λίγους αξιοσημείωτους λόγους. Μερικές τοποθεσίες έχουν πάρει την HD φωτογραφία ένα βήμα παρακάτω και ενσωμάτωσαν video στην αρχική τους σελίδα. Άλλα επιδίωξαν την αντίθετη διαδρομή: θολώνοντας την εικόνα λάβαρο ή απομακρύνοντας την εντελώς υπέρ ενός απλού χρωματισμού background για να τραβήξουν προσοχή στο κείμενο. Η ιστοσελίδα του Spotify δείχνει ένα μείγμα από αυτές τις μόδες προσφέροντας μια εικόνα στο ένα μισό της ιστοσελίδας αλλά αφήνοντας πολύ άσπρο χώρο για την κεφαλίδα του και ένα παστέλ και ένα κουμπί φάντασμα να ξεκινήσουν.
5. Ενδιαφέρουσα γραμματοσειρά
Όταν η εικόνα - ήρωας έγινε γνωστή, οι σχεδιαστές άρχισαν να δίνουν περισσότερη σημασία στην τυπογραφία. Η διαλογή μιας επίμαχης γραμματοσειράς είναι κρίσιμη στην προσέλκυση της προσοχής ενός επισκέπτη όταν τόσο πολύ περιεχόμενο της ιστοσελίδας απλοποιείται και μειώνεται ως αποτέλεσμα του μινιμαλισμού. Η διαφημιστική εταιρία RSQ χρησιμοποιεί ειδικής κατασκευής τυπογραφία στην ιστοσελίδα της και προβλέπει μία δυνατή δήλωση χωρίς κανέναν άλλο περισπασμό για να τονίσει το μήνυμα στο κοινό.
6. Stock Φωτογραφία Που Δεν Μοιάζουν Σαν Stock Φωτογραφία
Οι ημέρες της γενικών stock φωτογραφιών τελείωσαν. Απαράμιλλα οπτικά μέσα είναι στη μόδα. Με κοινότητες όπως 500px και Unsplash, βρίσκοντας υψηλής ποιότητας κάνε-ότι-θες-μαζί-της-φωτογραφίες είναι πιο εύκολη από ποτέ. Ως αποτέλεσμα οι ιστοσελίδες δεν μοιάζουν πια σαν το αποτέλεσμα μιας εξόρμηση στα μαγαζιά για ασυντετάγμητες stock φωτογραφίες. Τώρα πραγματικά αισθάνονται γνήσιες.
7. Σχεδιασμός μονής σελίδας
Κανείς δεν θέλει να κάνει κλικ μέσα από πολλαπλές σελίδες τώρα πια. Αντί για αυτό, οι χρήστες προτιμούν να κάνουν scroll μέσα από περιεχόμενο σε μία μεγάλη σελίδα. Αυτή η μόδα έχει επίσης τις ρίζες της στο κινητό surfing στο διαδίκτυο επειδή είναι μακράν πιο εύκολο να κάνει scroll με τον αντίχειρα σου από το να κάνει click μέσα από πολλαπλές σελίδες και να περιμένει κάθε μία να φορτώσει. Το 2015 έχει ενισχύσει αυτή την ιδέα, ενώ μερικές ιστοσελίδες είναι μόνο μια σελίδα, οι περισσότερες μειώνουν τον αριθμό των σελίδων που έχουν και μακραίνουν το περιεχόμενο της κάθε μίας για να είναι πιο φιλική σε κινητά. Η ιστοσελίδα της Smartwater χρησιμοποιεί sroll σε ένα μεγάλο βαθμό κάνοντας τον επισκέπτη να κάνει scroll πάνω αντί για κάτω για να απεικονίσει ότι το νερό τους διυλίζεται από ατμό.
8. Parralax scrolling
Ένας τρόπος να κάνεις ιστοσελίδες πιο συμμετοχικές, το parallax scrolling δημιουργεί μία τρισδιάστατη παραίσθηση που προσελκύει το κοινό στο περιεχόμενο μίας ιστοσελίδας.
9. Μοντελικός σχεδιασμός
Κάλεσε το πλέγμα, πλακάκι ή κάρτες κάθε ένα από αυτά τα σχέδια δημιουργεί το ίδιο εφέ: οργανώνοντας το περιεχόμενο σε ένα αποτελεσματικό, αισθητικό ευχάριστο τρόπο. Μία μονή στήλη είναι αποτελεσματική και λιγότερο φιλική συγκριτικά. Ο μοντελικός σχεδιασμός επιτρέπει σε μία σελίδα να δείχνει περισσότερο περιεχόμενο στους χρήστες γρηγορότερα με έναν τρόπο που το κάνει πιο χρησιμοποιεί τη διαίσθηση και δημιουργεί μια πιο οπτικά εμπλεκόμενη διάταξη παράλληλα. Στην αρχική της σελίδα η The Next Web προσφέρει ένα εγχειρίδιο – τέλειο παράδειγμα καλού μοντελικού σχεδιασμού.
10. Η εξέλιξη του επίπεδου σχεδιασμού
Ο επίπεδος σχεδιασμός είχε τεράστιο αντίκτυπο στα γραφικά το 2014 που η Google ανακοίνωσε της δικιάς της έκδοσης λεγόμενης ως σχεδιασμός υλικών. Ο σχεδιασμός υλικού μεταχειρίζεται την ίδια αισθητική όπως ο επίπεδος σχεδιασμός επικεντρώνοντας μόνο στην απλότητα και καθαρή παρουσίαση, αλλά ο σχεδιασμός της Google έχει πιο πολύ λεπτότητα.
Δεδομένου ότι ο επίπεδος σχεδιασμός περιλαμβάνει απλές απεικονίσεις, για να δημιουργήσει αναγνωρίσιμο αλλά μινιμαλιστικό δισδιάστατο περιεχόμενο o σχεδιασμός υλικού χρησιμοποιεί αποχρώσεις κίνηση και σκίαση για να δώσει βάθος στην εικόνα.
11. Εικονίδια γραμμής
Μαζί με το σχεδιασμό υλικών, τα εικονίδια γραμμής είναι η άλλη κίνηση κλείνοντας την μείωση του σκευομορφισμού. Αντί για ένα εικονίδιο που μοιάζει ακριβώς σαν το αντικείμενο που αναπαριστά (ένας σχεδιασμός που η Apple γνωστοποίηση με τα iOs εικονίδια) τα εικονίδια δημιουργούνται με απλές γραμμές που εκφράζουν μία πράξη, αντικείμενο ή σκέψη που μας είναι γνωστά. Πολλά εικονίδια γραμμής έχουν γίνει παγκόσμια στο web design, όπως το περίγραμμα ενός μεγενθυτικού φακού σημαίνοντας την διαδικασία της αναζήτησης ή το χάμπουργκερ (3 μαζεμένες γραμμές) για ένα μενού. Παρακάτω είναι παραδείγματα από εικονίδια γραμμής από την Othericons.
12.Ενσωμάτωση Google Maps
Οι Google Maps είναι όλων η πήγαινε-σε υπηρεσία χαρτών, και προς το καλό πηγαίνει. Με επεξεργάσιμες ρυθμίσεις, περισσότερες μάρκες ενσωματώνουν την υπηρεσία τους στην ιστοσελίδα τους, μία καθυστερημένη κίνηση. Οι εταιρίες μπορούν να προσθέσουν του χάρτες στην ιστοσελίδα τους και να τους προσαρμόσουν ώστε να συμπληρώνουν το προτιμώμενο χρώμα σχεδίου. Για παράδειγμα, η Airbnb χρησιμοποιεί Google Maps για να βοηθήσει τους χρήστες να καταλάβουν με δείκτες που υπάρχουν διαθέσιμα δωμάτια και να σχεδιάσουν μια εξόρμηση που θα κάνει για το πορτοφόλι τους και το στυλ τους.
13. Μεγενθύσιμα διανυσματικά γραφικά (SVG)
Όταν η Apple έβγαλε στην αγορά την απεικόνιση Retina, οι σχεδιαστές πιάστηκαν στα χέρια. Νευριασμένοι που τα γραφικά τους και εικόνες τους ξαφνικά έμοιαζαν pixelοποιημένα με την υψηλότερη ευκρίνεια της Retina, οι σχεδιαστές αναγκάστηκαν να υιοθετήσουν νέες μεθόδους που θα επέτρεπαν τις απεικονίσεις τους και να δείχνουν καλά και να είναι συμβατά με όλες τις συσκευές. Ευτυχώς τα Μεγενθύσιμα Διανυσματικά Γραφικά (SVG), αντιμετώπισε με επιτυχία την πρόκληση. Τα SVG παρουσιάζουν τα γραφικά ως διανύσματα, επιτρέποντας τα να αλλάζουν μέγεθος ανάλογα την ανάλυση. Με τα SVG οι εικόνες διατηρούν την διαύγεια και την κομψότητα τους σε όλες τις συσκευές. Η Snap.svg μια Javascript SVG βιβλιοθήκη, έχει πολλά διαθέσιμα παραδέιγματα όπως αυτό παρακάτω.
14. Κατακόρυφα μοιρασμένα στρώματα
Τα μισής οθόνης στρώματα ξεφυτρώνουν σε όλο τον ιστό. Με ένα κατακόρυφης οθόνης μισό στρώμα, οι σχεδιαστές μπορούν να παρουσιάσουν δύο φορές το περιεχόμενο στους χρήστες σε μία καθαρή και απλή διαμόρφωση. Οι ιστοσελίδες χωρίζονται στο μισό πλάτος, προβλέποντας δύο διαφορετικά μυνήματα. Η μισή οθόνη είναι ένας πολύ καλός τρόπος να δείξεις ισότητα μεταξύ δύο πραγμάτων επειδή τα κανονικά στρώματα του ιστού ορίζουν ότι τα πιο σημαντικά πράγματα έρχονται πρώτα. Η κατασκευάστρια αυτοκινήτων Peugeot χρησιμοποιεί κατακόρυφα στρώματα μισής οθόνης στην αρχική της σελίδα για να αναμίξει το ανθρώπινο στοιχείο του αυτοκινήτου με το ίδιο το αυτοκίνητο, που υποδηλώνει τη σχέση μεταξύ οδηγού και αυτοκινήτου.
Πηγή / Source: https://www.entrepreneur.com/article/252650
