18 Cool Design Concept (Facelift) των αξιοσημείωτων ιστοσελίδων
Εάν το περιεχόμενο είναι βασιλιάς, ο σχεδιασμός θα πρέπει να είναι η βασίλισσα. Είναι ένα θανάσιμο κρίσιμο στοιχείο για την επιτυχία ενός ιστοτόπου, καθώς αποφασίζει πώς θα δομηθεί το περιεχόμενο και θα προβληθεί το περιεχόμενο, ενώ ο κακός σχεδιασμός απλώς καταστρέφει την εμπειρία του χρήστη, καταστρέφοντας έτσι την επισκεψιμότητα του ιστότοπου.
Συχνά, εμείς οι σχεδιαστές ιστοσελίδων πρέπει να παίζουμε παιχνίδι στο παιχνίδι, ενώ σχεδιάζουμε έναν ιστότοπο. Είμαστε είτε εμπορικοί ομορφιά για λειτουργικότητα, ή λειτουργικότητα για την αναγνωσιμότητα, δεδομένου ότι είναι αδύνατο να παραχθεί ένα σχέδιο που ευχαριστεί όλους σε κάθε πτυχή.
Έτσι ποιο σχέδιο είναι καλύτερο τότε; Οι σχεδιαστές ιστοσελίδων αγαπούν να ρωτήσουν αυτό το ερώτημα και κάποιοι ακόμη και προκάλεσαν τον εαυτό τους να παίξουν καλύτερα το εμπορικό παιχνίδι με τον επανασχεδιασμό διάσημων ιστοτόπων όπως το Facebook και το YouTube, δημιουργώντας έτσι πιθανά σχέδια σε αυτό το post. Καλύτερα ή χειρότερα, εσείς, όπως το αποφασίζει ο χρήστης, απολαύστε!
Σύμφωνα με την επίσημη στατιστική της, το Facebook έχει εξυπηρετήσει περισσότερους από 500 εκατομμύρια ενεργούς χρήστες, με 700 δισεκατομμύρια λεπτά δαπανών για αυτό. Για αυτό το είδος στατιστικής θα είναι πραγματικά αγχωτικό να σχεδιάσετε μια ιστοσελίδα για αυτό. Μπορεί επίσης να είναι ο ίδιος λόγος για τον οποίο τόσοι πολλοί σχεδιαστές προκάλεσαν τον εαυτό τους να επανασχεδιάσουν το Facebook. Ας ρίξουμε μια ματιά σε πολλές μεγάλες προσπάθειες από τους σχεδιαστές παρακάτω:
Έννοια σχεδιασμού Από: Barton Smith
“Το Facebook Facelift είναι ένα πρόγραμμα που ξεκίνησε από μόνη της για να αμφισβητήσει τη μορφή και τη λειτουργικότητα του Facebook. Είναι βελτιωμένη, δομημένη και γραμμική διεπαφή είναι πιο κατανοητή, βελτιώνοντας την εμπειρία των χρηστών και την απορροφητικότητα του περιεχομένου.”
Κύρια σελίδα. (Εικόνα Πηγή: Barton Smith)
Φωτογραφίες. (Εικόνα Πηγή: Barton Smith)
Εκδηλώσεις Σελίδα. (Εικόνα Πηγή: Barton Smith)
Επαφές Σελίδα. (Εικόνα Πηγή: Barton Smith)
Ειδοποιήσεις Σελίδα. (Εικόνα Πηγή: Barton Smith)
Έννοια σχεδιασμού Από: Αρχιτέκτονες Πληροφοριών
Αυτός ο πρωτοποριακός σχεδιασμός γεννήθηκε από τον Δεκέμβριο του 2006 και αργότερα προσαρμόστηκε στα σύγχρονα πρότυπα σχεδιασμού, προκειμένου να υπάρξει δίκαιη σύγκριση με το σημερινό σχεδιασμό του Facebook. Η ιδέα ήταν να δημιουργηθεί μια εφαρμογή που να μοιάζει με αλληλογραφία με διεπαφή που περιέχει ελαστική διάταξη 3 στηλών, η οποία διαχωρίζει σαφώς το φίλτρο, την ροή πληροφοριών και την αντίδραση, οι οποίες εξηγούνται σαφώς στην ανάρτησή τους.
Κύρια σελίδα. (Εικόνα Πηγή: Αρχιτέκτονες Πληροφοριών)
Έννοια σχεδιασμού Από: Justin Dauer
“Ένας από τους πρωταρχικούς μου στόχους ήταν να μετακινήσω τη διασύνδεση προς μια περισσότερο από μια παρουσίαση τύπου web app. Το Facebook έχει περίπου 175 εκατομμύρια χρήστες συνδεδεμένους καθημερινά. όλα τα επαναλαμβανόμενα καθήκοντα που ενυπάρχουν σε αυτή τη χρήση συμβάλλουν σε αυτή τη μορφή προσέγγισης. Όταν περιτυλίξω αυτόν τον επανασχεδιασμό, το νέο UI του app του Twitter ξεκίνησε και μου έδωσε μια στιγμή ελέγχου Stuart Smalley.”
Κύρια σελίδα. (Πηγή εικόνας: ψευδομορφή)
Έννοια σχεδιασμού Από: Peter Knoll
Ένα πολύ κομψό σχέδιο από τον Peter Knoll. Το γραφικό είναι πολύ βελτιωμένο για να κάνει ολόκληρο το site να είναι ελκυστικό και ελκυστικό. Η διεπαφή είναι επίσης πολύ πιο καθαρή με ωραία τυπογραφία που εφαρμόζεται για καλή αναγνωσιμότητα.
Κύρια σελίδα. (Εικόνα Πηγή: Peter Knoll)
Έννοια σχεδιασμού Από: AndasoloARTS
Η παραλλαγή του Facebook γίνεται από την AndasoloARTS, παίρνει ακόμη και πωλείται! Το σχέδιο χρωμάτων είναι αρκετά παρόμοιο με το σχέδιο του Peter Knoll, αλλά συνολικά είναι διαφορετικό σχέδιο. Και πάλι ένα πολύ κομψό σχέδιο με μινιμαλισμό στο μυαλό.
Κύρια σελίδα. (Εικόνα Πηγή: AndasoloARTS)
Σχέδιο σχεδιασμού Από: Jonaska
Ένα σχέδιο εμπνευσμένο από το σχεδιασμό του Facebook της AndasoloARTS, είναι επίσης μοναδικό! Μου αρέσει η εφαρμογή της κοινής κατάστασης και του πλαισίου αναζήτησης, μια καλά σχεδιασμένη παραλλαγή μάλιστα.
Κύρια σελίδα. (Εικόνα Πηγή: Jonaska)
Έννοια σχεδιασμού Από: Czarny-Design
Τι γίνεται με ένα σέξι σχέδιο με στρογγυλεμένες γωνίες; Μια εντελώς μοναδική προσέγγιση σχεδιασμού για το Facebook με ελαφρώς αλλοιωμένο συνδυασμό χρωμάτων, μπορείτε να το δεχτείτε?
Κύρια σελίδα. (Εικόνα Πηγή: Czarny-Design)
Ο χώρος μου
Μόλις ο κόσμος της κοινωνικής δικτύωσης, το Myspace τελικά ξεπεράστηκε από τον κύριο ανταγωνιστή του, το Facebook. Το Rebranded ως My_____ τώρα, στοχεύει να γίνει ο κορυφαίος προορισμός κοινωνικής διασκέδασης που περιλαμβάνει μουσική, ταινίες, celebs, τηλεόραση και παιχνίδια, που τροφοδοτούνται από το πάθος των οπαδών. Τα σχέδια παρακάτω επιχειρήθηκαν για το παλιό Myspace, αλλά είναι ακόμα υπέροχο να δούμε τι σχεδιαστής σκέφτεται το Myspace να είναι.
Έννοια σχεδιασμού Από: Rafael Oliveira
“Τι γίνεται αν το Myspace είχε μια πιο ξεκάθαρη, καθορισμένη και όμορφη διεπαφή από προεπιλογή, αλλά με την επιλογή να την προσωποποιήσει, αλλά με έναν πιο κατανοητό τρόπο; Αυτή είναι η ερώτηση που έκανα εγώ όταν ξεκίνησα αυτό και βγήκε ένα δροσερό έργο. Εκτός από τον οπτικό σχεδιασμό, πρότεινα κάποιες βελτιώσεις όσον αφορά τη χρηστικότητα, με βάση το περιεχόμενο που υπάρχει ήδη στον ιστότοπο και την εξέταση του sitemap του.”
Κύρια σελίδα. (Εικόνα Πηγή: Rafael Oliveira)
Μενού καναλιών. (Εικόνα Πηγή: Rafael Oliveira)
Φωτογραφίες. (Εικόνα Πηγή: Rafael Oliveira)
Προσαρμοσμένη σελίδα προφίλ. (Εικόνα Πηγή: Rafael Oliveira)
Σελίδα καλλιτέχνη. (Εικόνα Πηγή: Rafael Oliveira)
Σελίδα καλλιτέχνη - Προσαρμοσμένη. (Εικόνα Πηγή: Rafael Oliveira)
Σελίδα καναλιού βίντεο. (Εικόνα Πηγή: Rafael Oliveira)
Επεξεργασία πάνω από 1 δισεκατομμύριο αιτήματα αναζήτησης σε όλο τον κόσμο, η Google είναι η πιο διάσημη ιστοσελίδα στον πλανήτη Γη. Είναι επίσης γνωστό ως το βασίλειο που προσπαθεί να κυριαρχήσει στο διαδίκτυο κατασκευάζοντας φιλικά προς το χρήστη προϊόντα όπως το Android, το Gmail και το Analytics. Δεδομένου ότι η Google έχει πολλούς κορυφαίους σχεδιαστές που ασχολούνται με το σχεδιασμό της ιστοσελίδας τους, οποιαδήποτε προσπάθεια επανασχεδιασμού αποτελεί άμεση πρόκληση για τους σχεδιαστές τους. Ενδιαφέρων.
Σχέδιο σχεδιασμού Από: Craig Reville
“Δεδομένου ότι η Google αποφάσισε να σχεδιάσει ίσως τα πράγματα λίγο σκέφτηκα ότι θα είχα πάει στο πώς θέλω να δω και να χρησιμοποιήσω το Google. Δεν ήμουν άγρια για τα εικονίδια ή το λογότυπο, κυρίως επειδή οι σχεδιαστές εικονιδίων μπορούσαν να κάνουν καλύτερη δουλειά και μου αρέσει το λογότυπο απλό. Οποιαδήποτε και όλα τα σχόλια εκτιμήθηκε.”
Κύρια σελίδα. (Εικόνα Πηγή: Craig Reville)
Σελίδα αποτελεσμάτων αναζήτησης. (Εικόνα Πηγή: Craig Reville)
Σελίδα αποτελεσμάτων αναζήτησης - 2η έννοια. (Εικόνα Πηγή: Craig Reville)
Σελίδα αποτελεσμάτων αναζήτησης εικόνας. (Εικόνα Πηγή: Craig Reville)
Έννοια σχεδιασμού Από: FloxDesign
Λίγο σαν τον Bing, αλλά με πιο επικό τρόπο. Με ειλικρίνεια θέλω να έχω αυτό το εξαιρετικά φοβερό σχέδιο για την κύρια σελίδα μου Google, παρακαλώ.
Κύρια σελίδα. (Πηγή εικόνας: FloxDesign)
YouTube
Κατατάχθηκε # 3 στην παγκόσμια και # 4 στην κυκλοφορία ιστότοπων των ΗΠΑ, το YouTube είναι ένας ιστότοπος για να ανακαλύψετε, να παρακολουθήσετε, να ανεβάσετε και να μοιραστείτε βίντεο. Το μεγαλύτερο μέρος των περιεχομένων έχουν μεταφορτωθεί από άτομα, αλλά διάσημα μέσα όπως το CBS, το BBC, το Vevo και το Hulu έχουν παράσχει τα δικά τους βίντεο στο πλαίσιο του προγράμματος συνεργασίας του YouTube. Τολμάτε να επανασχεδιάσετε έναν ιστότοπο που προβάλλεται περισσότερο από 2 δισεκατομμύρια φορές την ημέρα; Τα κατάφεραν.
Έννοια του σχεδιασμού Από: Michele Byrne
Ένας κομψός επανασχεδιασμός που δίνει έμφαση περισσότερο στην προβολή και κοινή χρήση βίντεο. Η μοναδική προσέγγιση εφαρμόζεται σε αυτό το σχέδιο, αν και η διεπαφή χρήστη είναι λίγο παρόμοια με τη Vimeo. Μεγάλη προσπάθεια ούτως ή άλλως.
Κύρια σελίδα. (Εικόνα Πηγή: Michele Byrne)
Σελίδα βίντεο. (Εικόνα Πηγή: Michele Byrne)
Σελίδα χρήστη. (Εικόνα Πηγή: Michele Byrne)
Πληροφορίες βίντεο. (Εικόνα Πηγή: Michele Byrne)
Συνιστώμενο βίντεο. (Εικόνα Πηγή: Michele Byrne)
Έννοια σχεδιασμού Από: Josh Collie
“Μία από τις μεγαλύτερες προσβολές μου στο YouTube με την πάροδο των ετών ήταν η αδυναμία αναζήτησης άλλων βίντεο κατά την παρακολούθηση βίντεο, καθώς και ανάγνωση σχολίων χωρίς να έχει το βίντεο να κυλήσει από την κορυφή της οθόνης. Ο παρακάτω σχεδιασμός επιχειρεί να λύσει αυτό το ζήτημα, έχοντας 3 ξεχωριστά κυλιόμενες στήλες, όπως αναζήτηση, βίντεο και σχόλια.”
Κύρια σελίδα. (Εικόνα Πηγή: Josh Collie)
Σελίδα χρήστη. (Εικόνα Πηγή: Josh Collie)
Έννοια σχεδιασμού Από: Thadeu Morgado
Ένα πείραμα επανασχεδιασμού για την κύρια σελίδα του YouTube. Το στυλ είναι σχεδόν το ίδιο, εκτός από το ότι ολόκληρη η διάταξη έχει αναδιαρθρωθεί και προστίθεται ένα μεγάλο, κομψό ρυθμιστικό για να δοθεί μεγαλύτερη έμφαση στα βίντεο.
Κύρια σελίδα. (Εικόνα Πηγή: Thadeu Morgado)
Αμαζόνα
Η Amazon πήγε στο διαδίκτυο το 1995 και τώρα έγινε η πολυεθνική εταιρία ηλεκτρονικού εμπορίου που περιέχει τη μεγαλύτερη συλλογή βιβλίων, περιοδικών, μουσικής, DVD, ηλεκτρονικών υπολογιστών, λογισμικού, παπουτσιών, σχεδόν όλων! Επειδή έχουν τόσο τεράστια δουλειά, οι σχεδιαστές παγκοσμίως έχουν αμφισβητήσει τον εαυτό τους για τη βελτίωση του σχεδιασμού για να το κάνουν ακόμα πιο όμορφο και φυσικά φιλικό προς το χρήστη.
Έννοια σχεδιασμού Από: Trevor Cleveland
“Ήθελα να διερευνήσω τρεις μοναδικές έννοιες για τον επανασχεδιασμό της αρχικής σελίδας του Amazon πάνω από το πτυχίο. Το Amazon είναι ένας από τους κορυφαίους σε απευθείας σύνδεση καταστήματα αγορών, αλλά ο σχεδιασμός της αρχικής τους ιστοσελίδας είναι ρυθμισμένος για μεγέθη οθόνης με μικρές διαστάσεις, αφήνοντας το site να φαίνεται πολύ κενό σε πολύ νεότερους υπολογιστές με υψηλότερα ψηφίσματα. Έτσι, ήθελα να παρουσιάσω τρεις ιδέες για να φέρω την ταχύτητα του Amazon.”
Πρώτη έννοια - κύρια σελίδα. (Εικόνα Πηγή: Trevor Cleveland)
Πρώτη έννοια - Μενού. (Εικόνα Πηγή: Trevor Cleveland)
Δεύτερη έννοια - κύρια σελίδα. (Εικόνα Πηγή: Trevor Cleveland)
Δεύτερη έννοια - Μενού. (Εικόνα Πηγή: Trevor Cleveland)
Τρίτο Έννοια - Κεντρική Σελίδα. (Εικόνα Πηγή: Trevor Cleveland)
Τρίτο Έννοια - Μενού. (Εικόνα Πηγή: Trevor Cleveland)
Έννοια σχεδιασμού Από: Maurice Kindermann
Δεν υπάρχει καμία προσπάθεια επανασχεδιασμού εάν δεν υπάρχει πρόβλημα στην τρέχουσα σχεδίαση, ο σχεδιασμός του Amazon της Maurice Kindermann είναι το καλύτερο παράδειγμα για αυτήν την περίπτωση. Απογοητευμένος από την τρέχουσα σχεδίαση του Amazon, ο Maurice επανασχεδίασε τη σελίδα για να λύσει τρία συγκεκριμένα θέματα: υπερβολικά μεγάλη ανάλυση οθόνης, κατακερματισμένη επιλογή αγοράς και πλημμυρισμένο περιεχόμενο.
Κύρια σελίδα. (Πηγή εικόνας: Maurice Kindermann)
IMDb
Αναφερόμενος ως ο μεγαλύτερος, καλύτερος και πιο βραβευμένος χώρος ταινιών στον πλανήτη, η IMDb (Internet Movie Database) είναι μια ηλεκτρονική βάση δεδομένων για πληροφορίες σχετικά με ταινίες, τηλεοπτικές εκπομπές, ηθοποιούς, προσωπικό πληρώματος παραγωγής, βιντεοπαιχνίδια και φανταστικούς χαρακτήρες οπτικά μέσα ψυχαγωγίας. Ο επανασχεδιασμός αυτού του ιστότοπου με τρόπο που να δείχνει αποτελεσματικά τις πληροφορίες θα είναι μια μεγάλη πρόκληση για τους σχεδιαστές ιστοσελίδων.
Έννοια σχεδιασμού Από: Vladimir Kudinov
“Γιατί δεν διαθέτετε το τρέχον σχέδιο IMDB; Είναι υπερφορτωμένο. Μεγάλη ποσότητα αδόμητων πληροφοριών. Ενώ οι περισσότεροι χρήστες τέτοιων ιστότοπων δίνουν προσοχή κυρίως στις εικόνες, τα βίντεο και άλλα.
Έτσι έκανα ένα καθαρό και κομψό σχέδιο. Εδώ, ο χρήστης λαμβάνει μια οθόνη στην οποία υπάρχουν πληροφορίες για την ταινία: φωτογραφίες, ηθοποιοί, ρυμουλκούμενα, ιστορία και πολλά άλλα. Δεν χρειάζεται να περιστρέφεται, να περιστρέφεται, να διαβάζεται. Το μόνο που χρειάζεται - είναι να κοιτάξετε την οθόνη.”
Σελίδα ταινίας. (Εικόνα Πηγή: Vladimir Kudinov)
Μενού. (Εικόνα Πηγή: Vladimir Kudinov)
Αναδυόμενο παράθυρο παίκτη. (Εικόνα Πηγή: Vladimir Kudinov)
Κορυφή πίνακα. (Εικόνα Πηγή: Vladimir Kudinov)
Έννοια σχεδιασμού Από: Rob Hendricks
“Δεν είναι δύσκολο να καταλάβεις γιατί ο σημερινός ιστότοπος IMDB είναι τόσο γεμάτος. Το γεγονός είναι ότι έχουν πολλά περιεχόμενα. Η σωστή αρχιτεκτονική πληροφόρησης ήταν το κλειδί για την αλλαγή αυτού.”
Κύρια σελίδα. (Εικόνα Πηγή: Rob Atomic)
Τετράγωνο
Με το Foursquare, οι χρήστες μπορούν να μοιραστούν την τρέχουσα τοποθεσία τους με “έλεγχος” μέσω μιας εφαρμογής smartphone ή SMS, τη δημιουργία σελιδοδεικτών για πληροφορίες σχετικά με τους χώρους και την αφήγηση σχετικών προτάσεων σχετικά με τους κοντινούς χώρους. Οι τοπικοί έμποροι χρησιμοποιούν επίσης το Foursquare για να εμπλακούν και να διατηρήσουν τους πελάτες τους. Ο επανασχεδιασμός του Foursquare είναι πολύ δύσκολος καθώς είναι μια εντελώς μοναδική υπηρεσία, ώστε να απαιτούνται περισσότερες μελέτες.
Έννοια σχεδιασμού Από: Clay Parker Jones
Ο Clay Parker Jones πιστεύει ότι ένας χάρτης είναι μια πραγματική έξυπνη προσθήκη στη σελίδα χρήστη της Foursquare, καθώς η υπηρεσία αφορά στη θέση. Κάνοντας κλικ στο χάρτη θα καταρρεύσουν τα ενημερωτικά στατιστικά στοιχεία με 4 διαθέσιμες διαθέσιμες προβολές. Άλλα πρόσθετα σε αυτήν τη σελίδα είναι τροφές, αρέσει, συμβουλές και προτάσεις, σαν μια συνηθισμένη σελίδα κοινωνικού δικτύου!
Σελίδα χρήστη. (Πηγή εικόνας: exitcreative)
Αντανάκλαση
Δεν έχει σημασία με το σχέδιο, κάθε χρήστης χρειάζεται χρόνο για να προσαρμόσει το νέο σχέδιο. Το ερώτημα είναι, ως χρήστης, θέλετε να αλλάξετε σε οποιοδήποτε από τα παραπάνω σχέδια ή είστε καλοί με την τρέχουσα σχεδίαση; Πιστεύετε ότι αυτές οι λύσεις επιλύουν το ζήτημα της εμπειρίας χρήστη; Πιστεύω ότι αυτοί οι σχεδιασμοί γίνονται για να λάβουν τη γνώμη σας, γι 'αυτό αισθανθείτε ελεύθεροι να μοιραστείτε τι σκέφτεστε γι' αυτούς, κάθε γνώμη μετράει!
