Κορυφαίες τάσεις σχεδίασης ιστοσελίδων για εφαρμογή στο Edge Animate

Χρησιμοποιώντας το Adobe Edge Animate, μπορείτε να δημιουργήσετε όλες τις τάσεις σχεδιασμού που αναφέρονται εδώ. Οι τάσεις σχεδιασμού ιστοσελίδων που παρουσιάζονται εδώ, ως επί το πλείστον, αντιπροσωπεύουν όχι μόνο νέες τεχνικές κωδικοποίησης, αλλά και νέους τρόπους για το κοινό σας να αλληλεπιδρά με τον ιστότοπό σας με ελκυστικούς τρόπους. Όταν τραβάτε την προσοχή του κοινού σας και το ιντριγκάρετε στο σχεδιασμό ιστοσελίδων σας, είστε σε καλό δρόμο για να διατηρήσετε αυτό το κοινό.

Περισσότερες εικόνες και εικονογράφηση

Έχετε κουραστεί και βαρεθείτε να κοιτάτε έναν τοίχο με κείμενο; Όλες αυτές οι μικρές εικόνες και εικονίδια αρχίζουν να φαίνονται λίγο παλιές; Ένα συμπαγές χρώμα φόντου σας κάνει να χασμουρηθείτε; Εάν αισθάνεστε έτσι, υπάρχει μεγάλη πιθανότητα το κοινό σας να αισθάνεται το ίδιο.

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

Μπορείτε εύκολα να εισαγάγετε εικόνες για χρήση με τη σύνθεση Animate και τον τρόπο εργασίας με αυτές. Ανακαλύψτε πώς να χρησιμοποιείτε εικόνες στο παρασκήνιο και τη διαφορά μεταξύ της χρήσης μιας ετικέτας div και μιας ετικέτας img για τις εικόνες. Μπορείτε να ορίσετε προεπιλογές διάταξης για τις εικόνες σας.

Οριζόντια κύλιση

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

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

Κάθετη κύλιση

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

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

Διορθώθηκαν οι κεφαλίδες

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

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

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

Δημιουργική πλοήγηση

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

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

Ένας πολύ καλός τρόπος για να δείξετε στο κοινό σας ότι μια εικόνα ή ένα εικονίδιο είναι ένας σύνδεσμος, είναι να χρησιμοποιήσετε τη δυνατότητα χαρακτηριστικού Δρομέας στο Animate. Όταν το κοινό σας περνά τον δείκτη του ποντικιού πάνω από μια συνδεδεμένη εικόνα, ο κέρσορας μπορεί να αλλάξει από δείκτη σε χέρι, υποδεικνύοντας έναν σύνδεσμο.

Διήγηση μύθων

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

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

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

Πλοήγηση σε μία σελίδα

Οι μονοσέλιδες ιστότοποι — κάποτε γνωστοί ως ιστότοποι φυλλαδίων — επιστρέφουν. Διατηρώντας το κοινό σας σε μία μόνο σελίδα που μπορεί να πάρει την εμφάνιση διαφόρων διαφορετικών σελίδων, μπορείτε να επωφεληθείτε από την τάση κύλισης.

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

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

Απομάκρυνση από το φλας

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

Το Adobe Edge Animate μπορεί να μην είναι έτοιμο να αντικαταστήσει πλήρως το Flash, αλλά είναι καθ' οδόν για να το πετύχει ακριβώς αυτό. Εξάλλου, δεν μπορείτε να προβάλετε το Flash σε συσκευές i-συσκευές, όπως iPhone και iPad, και ποιος θέλει να δημιουργήσει περιεχόμενο που εμφανίζεται κατεστραμμένο σε μερικές από τις πιο δημοφιλείς κινητές συσκευές του κόσμου;

HTML5, CSS3 και JavaScript

Ο κόσμος του web design και των τεχνικών κωδικοποίησης εξελίσσεται συνεχώς. Η μεγάλη τάση στον κώδικα είναι τα HTML5 και CSS3, τα οποία πρόκειται να ενσωματωθούν ολοένα και περισσότερο στο web-o-sphere. Το Google Chrome ηγείται της επιβάρυνσης, εφαρμόζοντας τα πιο πρόσφατα πρότυπα — με τον Firefox και το Safari δίπλα.

Έπειτα, υπάρχει ο Internet Explorer - αυτή τη στιγμή εμφανίστηκε λίγο αργά στο πάρτι - αλλά η Microsoft κάνει μεγάλα βήματα στην ενημέρωση του προγράμματος περιήγησής της για να συμβαδίζει.

Προστατέψτε τα κινούμενα σχέδια σας ώστε να μην εμφανίζονται κατεστραμμένα σε παλαιότερες εκδόσεις του Internet Explorer, χρησιμοποιώντας το Down-level Stage και τις διαφορετικές επιλογές δημοσίευσης web που προσφέρει το Edge Animate. Από αυτή την άποψη, η απλή χρήση του Adobe Edge Animate θα μπορούσε να θεωρηθεί ως τάση σχεδιασμού ιστοσελίδων!

Σχεδιασμός ιστοσελίδων προσαρμοζόμενος σε συσκευές

Το Responsive web design (RWD) είναι η πιο πρόσφατη οργή αυτές τις μέρες. Η ιδέα πίσω από το RWD είναι ο σχεδιασμός ενός ιστότοπου για χρήση σε οποιονδήποτε αριθμό συσκευών, από επιτραπέζιους οθόνες έως tablet και τηλέφωνα. Ενώ οι σχεδιαστές ιστοσελίδων μπορεί να χωριστούν ως προς το αν θα δημιουργήσουν έναν ιστότοπο για κινητά ξεχωριστά από έναν ιστότοπο για επιτραπέζιους υπολογιστές ή αν θα δημιουργήσουν έναν ενιαίο ιστότοπο που μπορεί να ανταποκρίνεται στο μέγεθος του προγράμματος περιήγησης, η τάση κλίνει προς το στρατόπεδο που ανταποκρίνεται.

Ο λόγος για αυτό είναι μάλλον απλός, με τη δημιουργία ενός responsive site, δεν χρειάζεται να συνεχίζετε να ενημερώνετε δύο διαφορετικούς ιστότοπους. Η δημιουργία ενός RWD δείχνει προς την κατεύθυνση του μέλλοντος. Όσο πιο προηγμένες γίνονται οι τεχνικές και τα εργαλεία κωδικοποίησης, τόσο καλύτερα θα λειτουργούν με το RWD. Σκεφτείτε το έναν ακόμη τρόπο με τον οποίο το Adobe Edge Animate σας βάζει στην πρωτοπορία των τάσεων στο σχεδιασμό ιστοσελίδων.