Mountainde Dew
Mountainde Dew
φοιτητικά νέα

Πολυγωνικά Σχήματα και Γεωμετρικά Layers στην κατασκευή ιστοσελίδων για το 2018.

  • Πολύγωνα Παντού
  • Απλή Γεωμετρία
  • Οι Έντονες Γραμμές Τραβούν την Προσοχή
  • Γεωμετρικά Divots και Λεπτομέρειες
  • Εικονική Πραγματικότητα και Παιχνίδια
  • Συνδυασμός όλων μαζί

Πολυγωνικά Σχήματα και Γεωμετρικά Layers

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

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

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

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

Πολύγωνα Παντού

Anakin
Anakin
Absolut
Absolut

Η τάση των πολύγωνων έχει πιθανώς ρίζες στο πειραματικό τρισδιάστατο animation, την εικονική πραγματικότητα και τα παιχνίδια (όπου τα τρίγωνα χρησιμοποιούνται συχνά για τη δημιουργία και το render αντικειμένων γρήγορα). Πολυμορφικά σχήματα αποδίδουν επίσης φόρο τιμής σε μερικά από τα πιο ρετρό μοτίβα σχεδίασης που ήταν δημοφιλή και το 2017. Αυτή η τάση στην κατασκευή ιστοσελίδων είναι κυρίαρχη και στο 2018

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

Απλή Γεωμετρία

ESPN
Minus 99
Minus 99

Τα γεωμετρικά μοτίβα δε χρειάζεται να είναι περίπλοκα για να είναι καλαίσθητα.

Καθαρές απλές γραμμές, όπως το λοξό σχήμα που χρησιμοποιεί το ESPN για το σχεδιασμό του Body Issue, καθώς και τα πλωτά τετράγωνα από το Minus 99 παρουσιάζουν το περιεχόμενο με το κάτι παραπάνω.

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

Οι Έντονες Γραμμές Τραβούν την Προσοχή

Mountainde Dew
Mountainde Dew
Bailey And French
Bailey And French

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

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

Αυτό που κάνει κάθε ένα από αυτά τα σχέδια επιτυχές είναι οι επιλογές χρωμάτων και οι διασταυρώσεις των γραμμών. Σημειώστε πως το “X” στο site του Mountain Dew συνέρχεται σε πολύχρωμες και pixel – perfect γραμμές. Το γωνιακό τρίγωνο από Bailey & French θυμίζει τη χρυσή αναλογία και το χρώμα συμπληρώνει τη φωτογραφία για να τραβήξει πραγματικά τους χρήστες πίσω στην εικόνα. (Το πολυγραμμικό περίγραμμα συνεχίζεται επίσης κάτω από την κύλιση για να κάνει τους χρήστες να τρέχουν με το ποντίκι.)

Γεωμετρικά Divots και Λεπτομέρειες

 

Woodwork
Chop Chop Agency

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

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

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

Όταν εργάζεστε με μικρά πολυμορφικά σχήματα, ένα μικτό animation μπορεί να είναι ο καλύτερος φίλος του web designer. Χρησιμοποιήστε μικροσκοπικές αλληλεπιδράσεις, όπως ένα φαινόμενο hover, απαλή κίνηση ή αλλαγή σχήματος για να τραβήξετε το μάτι και να δείξετε στους χρήστες ότι πρέπει να αλληλεπιδρούν με το αντικείμενο.

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

Εικονική Πραγματικότητα και Παιχνίδια

The Musical Forest
The Musical Forest
My Most Beautiful Nightmare

Παρόλο που δεν μπορούμε να το πούμε με βεβαιότητα, φαίνεται ότι η πολυμορφική τάση έχει προκύψει ακριβώς καθώς άρχισαν να διαμορφώνονται περισσότερα σχέδια βασισμένα σε VR. Η λογική αιτία είναι μια σύνδεση μεταξύ interface και rendering. (Πολλά σχέδια 3D και VR διαθέτουν κινούμενα σχέδια με πολυ-σχήμα.)

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

Συνδυασμός όλων μαζί

Xbox Gift Card
Ditto
Ditto

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

Τα τελευταία δύο παραδείγματα δείχνουν ότι τα πολύγωνα μπορούν να λειτουργούν σχεδόν οπουδήποτε, από την πώληση δωροκαρτών Xbox στο διαδίκτυο (ναι, τα πολύγωνα είναι πολύ χρήσιμα και στο ηλεκτρονικό εμπόριο) έως στο να βοηθούν το χρήστη να καταλάβει ένα πιο περίπλοκο κομμάτι πληροφοριών για τη Ditto, μια εταιρεία που χρησιμοποιεί πολυμορφικά σχήματα για να σας δείξει πώς θα ταιριάζουν τα γυαλιά. Είναι αναντίλεκτα μια νέα τάση στην κατασκευή eshop την οποία σαν dreamweaver.gr έχουμε εναγκαλιστεί πλήρως και θέλουμε να πιστεύουμε με πολύ καλά σχεδιαστικά , λειτουργικά και πωλησιακά αποτελέσματα.

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

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

Όπως λέμε πάντα στην DreamWeaver.Gr. Ολιστική προσέγγιση στην διαδικασία κατασκευής μιας ιστοσελίδας. Κάτι που δεν έχει αλλάξει σε εμάς από το 2001 όταν εμφανιστήκαμε στον χώρο.

ΠΗΓΗ: dreamweaver.gr