Μια παρουσίαση ιστότοπων μιας σελίδας
Όταν σχεδιάζετε έναν ιστότοπο με ελάχιστο αριθμό σελίδων και όχι τόνο περιεχομένου, ένας σχεδιασμός μιας σελίδας μπορεί να είναι ένας καινοτόμος τρόπος για να ξεχωρίσετε τον ιστότοπο.
Οι ιστότοποι μιας σελίδας χρησιμοποιούν συχνά το JavaScript και το Flash, μαζί με το HTML και το CSS για να χωρέσουν περισσότερο περιεχόμενο σε μια σελίδα χωρίς να αυξάνουν σημαντικά τους χρόνους φόρτωσης.
Πρέπει να δοθεί ιδιαίτερη προσοχή στην πλοήγηση όταν πρόκειται για τοποθεσίες μιας σελίδας, για να βεβαιωθείτε ότι οι επισκέπτες μπορούν να επιστρέψουν στο αρχικό τμήμα της σελίδας χωρίς προβλήματα και να πλοηγηθούν από οποιαδήποτε ενότητα σε οποιαδήποτε άλλη ενότητα. Αυτό επιτυγχάνεται συχνά μέσω κολλητικών κεφαλίδων ή επανάληψης πλοήγησης σε κάθε ενότητα.
Οι παρακάτω τοποθεσίες αποτελούν εξαιρετικά παραδείγματα ιστότοπων μιας σελίδας. Είναι και οι δύο χρήσιμες και αισθητικά ευχάριστες και αξιοποιούν πλήρως τη μορφή μιας σελίδας.
Roaaar
Ο ιστότοπος Roaaar περιλαμβάνει έναν σύνδεσμο "επιστροφής στην κορυφή" στο κάτω μέρος κάθε τμήματος, ο οποίος διευκολύνει τους επισκέπτες να επιστρέψουν στην πλοήγηση στην κεφαλίδα.
Duplos από τον Ricardo Mestre
Ο ιστότοπος Duplos υιοθετεί μια διαφορετική προσέγγιση, τοποθετώντας το κύριο περιεχόμενο στο κάτω μέρος της σελίδας. Η πλοήγηση σας μεταφέρει προς τα πάνω στη σελίδα και όχι προς τα κάτω.
Γκρέγκοζ Κοζάκ
Το μοτίβο του φάρου διατρέχει ολόκληρο το μήκος της σελίδας, πηγαίνοντας από το χώρο μέχρι το επίπεδο του εδάφους. Τα πανό που κρέμονται από τα παράθυρα του φάρου σας επιστρέφουν στο επάνω μέρος της σελίδας όπου βρίσκεται η πλοήγηση.
Καλειδοσκόπιο
Ο ιστότοπος Καλειδοσκόπιο χρησιμοποιεί διαφορετικές εικόνες φόντου και υφές πίσω από κάθε τμήμα του ιστότοπου. Αυτό διαφοροποιεί κάθε περιοχή περιεχομένου από κάθε άλλη περιοχή περιεχομένου.
Νταν Σκότον
Σύντομες σελίδες όπως αυτή με ελάχιστο περιεχόμενο λειτουργούν ιδιαίτερα καλά. Η πλοήγηση παραμένει στην πλαϊνή μπάρα κατά την κύλιση προς τα κάτω στη σελίδα.
Viktor Shvaiko
Αυτός ο ιστότοπος χρησιμοποιεί ένα οριζόντιο ρυθμιστικό για να φορτώσει νέο περιεχόμενο, μετακινώντας μέσω άλλου περιεχομένου για να φτάσει στη σελίδα στην οποία έχετε πλοηγηθεί. Η γραμμή πλοήγησης παραμένει στην κορυφή ανεξάρτητα από τη σελίδα στην οποία βρίσκεστε.
Jon Rundle
Απλές, προσωπικές τοποθεσίες προφίλ όπως αυτή είναι τέλεια προσαρμοσμένες σε σχεδιασμό μιας σελίδας. Τα εικονίδια και τα χρώματα έμφασης προσθέτουν λίγο περισσότερο οπτικό ενδιαφέρον στο σχέδιο, το οποίο κατά τα άλλα είναι πολύ ουδέτερο.
Jason Reed
Η χρήση ενός αποτελέσματος ακορντεόν για την εμφάνιση νέου περιεχομένου λειτουργεί καλά όταν το περιεχόμενο δεν είναι πολύ μεγάλο. Η εικονογραφημένη εικόνα κεφαλίδας και το γκρι και πορτοκαλί χρώμα κάνουν το site ξεχωρίζει.
Tweet CC
Χρησιμοποιώντας υφές και απλές απεικονίσεις, η τοποθεσία του Tweet CC είναι ελκυστική, ενώ ταυτόχρονα διατηρείται απλή με μονόχρωμη σχεδίαση χρωμάτων.
PSD Layout
Οι ιστότοποι που προσφέρουν ευθείες υπηρεσίες μπορούν να λειτουργήσουν ιδιαίτερα καλά σε μορφή μιας σελίδας. Δεν υπάρχουν πάρα πολλές πληροφορίες που μπορείτε να προσφέρετε και διατηρώντας το όλα σε μια σελίδα, καθιστά εύκολο για τους πιθανούς πελάτες να βρουν γρήγορα αυτό που χρειάζονται.
Feelwire
Ο ιστότοπος Feelwire κρατά τα πράγματα απλά και προσφέρει επιπλέον πληροφορίες με tooltips. Το λευκό φόντο το κρατά μινιμαλιστικό και τα έντονα εικονίδια προσθέτουν οπτικό ενδιαφέρον.
Hot Meteor
Ο ιστότοπος Hot Meteor χρησιμοποιεί σχεδίαση που βασίζεται σε τυπογραφία, γκρι και κόκκινο. Η κεφαλίδα είναι κολλητική, διατηρώντας την πλοήγηση στο επάνω μέρος της σελίδας.
Μία Makila
Ο ιστότοπος Mia Makila είναι λίγο διαφορετικός από τους περισσότερους από τους υπόλοιπους τόπους που περιλαμβάνονται εδώ, χρησιμοποιώντας έναν πιο παραδοσιακό σχεδιασμό 3-στηλών. Το JavaScript χρησιμοποιείται για την προβολή έργων τέχνης σε κάθε κατηγορία.
Κώστα Θεοχάρη
Αυτός ο ιστότοπος χρησιμοποιεί ένα ενδιαφέρον εφέ δρομέα, ενώ κάθε τμήμα (η κεφαλίδα, το κύριο περιεχόμενο και το υποσέλιδο) ολισθαίνουν ξεχωριστά το ένα από το άλλο.
Javan Makhmali
Το σχέδιο πλέγματος που χρησιμοποιείται εδώ δεν φαίνεται πολύ συχνά σε σχέδια μιας σελίδας. Αλλά με άφθονο λευκό χώρο, λειτουργεί καλά για να συμπεριλάβει πολλά διαφορετικά περιεχόμενα σε ένα πολύ βελτιωμένο σχεδιασμό.
Ομάδα Nomad
Ο σχεδιασμός εδώ είναι απλός και απλός και ο σχεδιασμός με 2 στήλες λειτουργεί καλά για να χωρέσει περισσότερο περιεχόμενο στη σελίδα χωρίς να το κάνει να φαίνεται βαρύ.
Jorge Fino
Ο ιστότοπος του Jorge Fino τοποθετεί το επίκεντρο των σχεδίων. Η πλοήγηση είναι ανύπαρκτη (εκτός από την κύλιση) και τα στοιχεία επικοινωνίας περιλαμβάνονται τόσο στην κεφαλίδα όσο και στο υποσέλιδο.
Moly Yim
Εδώ είναι ένας άλλος ιστότοπος χωρίς πλοήγηση. Έχει διατηρηθεί σε λογικό μήκος, όμως, έτσι δεν είναι ένα ζήτημα.
Τζάντι Τσανγκ
Η πλοήγηση εδώ είναι λίγο διαφορετική. Αντί να συμπεριλάβετε κουμπιά που σας μεταφέρουν στην κορυφή ή πλοήγηση σε κάθε οθόνη, τα κουμπιά δίνονται δίπλα σε κάθε περιοχή έργου και περιεχομένου για να ανεβαίνουν ή να χαμηλώνουν μια οθόνη. Υπάρχει επίσης μια γραμμή πλοήγησης στην κορυφή για να μεταβείτε σε κάθε κύρια ενότητα.
Mogulista
Οι προσωρινοί ιστότοποι είναι ένας πολύ καλός χρόνος για να χρησιμοποιήσετε έναν ιστότοπο μιας σελίδας. Αυτός ο ιστότοπος χρησιμοποιεί JavaScript για να φορτώσει νέο περιεχόμενο για κάθε "σελίδα" στον ιστότοπο.
Χιράγκ Σολάνκι
Η πλοήγηση σε αυτόν τον ιστότοπο συνδυάζει τόσο την κύρια πλοήγηση όσο και τους συνδέσμους στο τέλος κάθε ενότητας για να επιστρέψει τους επισκέπτες στην κορυφή της σελίδας. Εικονογραφημένα doodles συνδέουν κάθε τμήμα, δίνοντας μια αίσθηση συνέχειας σε ολόκληρη τη σελίδα.
Τα ενοικιαζόμενα δωμάτια
Η διάταξη του site του Deluge Studios είναι από τις πιο μοναδικές που παρουσιάζονται εδώ. Δύο στήλες παρέχουν πέντε περιοχές περιεχομένου, όλες συνδεδεμένες από την κορυφαία πλοήγηση. Η συμπερίληψη των κύριων τμημάτων περιεχομένου στη μικρότερη στήλη "πλευρικής γραμμής" καθιστά τη σελίδα σημαντικά μικρότερη.
Στάδιο 5 Στούντιο
Ο ιστότοπος Stage 5 Studio είναι σύντομος, χωρίς πλοήγηση. Οι συνδέσεις "Διαβάστε περισσότερα" μεταφέρουν περισσότερες πληροφορίες για κάθε έργο, ενώ άλλο περιεχόμενο διατηρείται στην "πλευρική γραμμή".
SmartCube
Ο ιστότοπος SmartCube χρησιμοποιεί μια κολλητική κεφαλίδα για να διατηρεί την πλοήγηση στην οθόνη ανά πάσα στιγμή. Χρησιμοποιεί επίσης συνδυασμό διατάξεων 1 και 2 στηλών, ανάλογα με το περιεχόμενο.
Eclectique Designs
Οι ενότητες περιεχομένου εδώ διαφοροποιούνται από μοναδικές υφές φόντου. Η τυπογραφία τραβάει τα πάντα μαζί σε όλη τη σελίδα και το JavaScript χρησιμοποιείται για την προβολή επιπλέον προϊόντων χωρίς να καταλαμβάνει περισσότερο χώρο.
Inside Secrets σε μια εφαρμογή iPhone
Αυτός είναι ένας από τους μεγαλύτερους δικτυακούς τόπους μιας σελίδας που εμφανίζονται εδώ. Χρησιμοποιεί μια κολλητική κεφαλίδα με την πλοήγηση για να είναι εύκολη η πρόσβαση από μια ενότητα σε μια άλλη.
Σκοτώστε τη διαρροή
Η διατήρηση ενός ιστοτόπου φιλανθρωπίας σαν αυτό ενός σύντομου και μέχρι το σημείο είναι σχεδόν βέβαιο ότι θα αυξήσει τον αριθμό των δωρεών που έρχονται μέσα. Η τολμηρή τυπογραφία, γραφικές εικόνες, και η συμπερίληψη μιας φόρμας δωρεάς στο κάτω μέρος όλα δουλεύουν τέλεια μαζί.
Η Έμιλι Γουίτσμιθ
Ακολουθεί ένας άλλος ιστότοπος που σας ξεκινάει στο κάτω μέρος της σελίδας. Κάνοντας κλικ στο σύνδεσμο "μάθετε περισσότερα" μετατοπίζετε τη σελίδα σε μια περιοχή χαρτοφυλακίου. Τα παράθυρα των διαδρόμων παρέχουν κοντινά πλάνα από κάθε ύφασμα.
Αεροπόρος
Οι ιστότοποι εφαρμογών είναι κατάλληλοι για σχέδια μιας σελίδας, καθώς συχνά έχουν περιορισμένο περιεχόμενο και μόνο ένα στιγμιότυπο οθόνης ή δύο εικόνες.
Hayley Smith
Ακολουθεί μια πολύ μεγάλη σελίδα. Η πλοήγηση επαναλαμβάνεται στο επάνω μέρος κάθε τμήματος και το λογότυπο ολισθαίνει προς τα κάτω κατά τη διάρκεια της κύλισης.
Conway Anderson
Ο ιστότοπος Conway Anderson χρησιμοποιεί ένα μείγμα ρυθμιστικών (για πληροφορίες και πληροφορίες επικοινωνίας) και παράθυρα modal (για την εργασία) για την προβολή περιεχομένου. Η απλή σχεδίαση με βάση το πλέγμα και το μονοχρωματικό σχέδιο χρωμάτων κρατούν τα πράγματα απλά και μοντέρνα.
Ντάνιελ Μουάρ
Ο ιστότοπος του Daniel Moir είναι απλός με ελάχιστο περιεχόμενο και χωρίς πλοήγηση. Ο σχεδιασμός με 2 στήλες οργανώνει τους διάφορους τύπους περιεχομένου στον ιστότοπο και το κρατά συντομότερο.
Latte ανά ημέρα
Οι ιστοσελίδες πριν την εκκίνηση είναι πολύ κατάλληλες για σχέδια μιας σελίδας, όπως φαίνεται εδώ. Δεν υπάρχει αρκετό περιεχόμενο που να δικαιολογεί ακόμα έναν ιστότοπο πολλών σελίδων.
Η Αγορά Κυψέλης
Ακολουθεί ένας ακόμη μεγαλύτερος ιστότοπος μιας σελίδας. Το φωτεινό κίτρινο φόντο και οι εικονογραφήσεις μελισσών συνδέουν το σύνολο της τοποθεσίας μαζί και η πλοήγηση επαναλαμβάνεται στην κορυφή κάθε τμήματος.
Ρουβιδίνη
Η τοποθεσία Rubidin χρησιμοποιεί μια κολλητική κεφαλίδα με ένα διαφανές φόντο που συνδυάζεται με κάθε μεμονωμένο τμήμα περιεχομένου.
Jakub Szymanski
Αυτός ο ιστότοπος χρησιμοποιεί JavaScript για τη φόρτωση νέου περιεχομένου και την ολίσθηση της σελίδας. Ένα κολλητικό υποσέλιδο εμφανίζεται μετά την αρχική σελίδα με μια σύνδεση "επιστροφή στην κορυφή".
Tyler Termini
Ο ιστότοπος του Tyler Termini είναι σύντομος, με πλοήγηση μόνο στην κεφαλίδα. Επειδή δεν είναι μια πολύ μεγάλη σελίδα, δεν είναι πραγματικά πρόβλημα να πρέπει να μετακινηθείτε προς τα επάνω (ή απλά να μετακινηθείτε σε κάθε τμήμα χωρίς να χρησιμοποιήσετε καθόλου την πλοήγηση).
Josh Sender
Το σχέδιο χρώματος του γκρίζου εδώ φαίνεται υπέροχο. Η εργασία που προβάλλεται πηγαίνει σε πλήρες χρώμα όταν μετακινηθεί πάνω, και όταν κάνετε κλικ σε ένα παράθυρο χρώματος modal ανοίγει με μια μεγαλύτερη έκδοση.
Γράφει και συντάσσεται αποκλειστικά για WDD από Κάμερον Τσάπμαν .
Τι σας αρέσει περισσότερο για ιστοσελίδες μιας σελίδας; Έχετε κάποια αγαπημένα που δεν εμφανίζονται εδώ; Παρακαλώ μοιραστείτε τα σχόλια παρακάτω ...