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

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

Περισσότερες εικόνες και απεικόνιση

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

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

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

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

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

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

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

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

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

Σταθερές κεφαλίδες

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

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

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

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

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

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

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

Storytelling

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

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

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

Πλοήγηση εντός μιας σελίδας

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

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

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

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

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

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

HTML5, CSS3 και JavaScript

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

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

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

Ανταπόκριση Σχεδίαση Ιστού

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

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