25 Παραδείγματα κανόνων Web 2.0 και Παραδοσιακού Σχεδιασμού που έρχονται Μαζί

Στο μεγάλο πεδίο του σχεδιασμού, ο όρος "Web 2.0" είναι σχετικά νέος.

Με αυτό, έρχεται το δικό του σύνολο προτύπων, μερικά ισχυρά, άλλα όχι τόσο ισχυρά, δεδομένου ότι το Web 2.0 από μόνο του είναι ένας πολύ ασταθής, συνεχώς εξελισσόμενος ορισμός των προτύπων σχεδιασμού .

Αμέτρητα παραδείγματα ιστότοπων Web 2.0 έχουν παραβιάσει τους κανόνες αυτού που κάποτε θεωρούνταν ισχυρό σχέδιο.

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

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

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

1. Σχέδιο Matrix Pixel

Ο Josh Pyles είναι ένας καλός τύπος και είναι επίσης ένας φανταστικός, πειθαρχημένος σχεδιαστής. Η πιο πρόσφατη επανάληψη του Pixel Matrix είναι ένα αναισθητοποίησης και κάνει ιδιαίτερα καλή χρήση του χρώματος και ενός ισχυρού συστήματος πλέγματος. Περιηγηθείτε στο χαρτοφυλάκιό του και θα δείτε ότι μεταφέρει αυτή την πρακτική στην εργασία του πελάτη του.

Εάν δείτε τη σελίδα "Σχετικά" (σημειώνοντας το ωραίο σύστημα καρτών στο παιχνίδι), μπορείτε να δείτε ότι ο Josh έχει συμπεριλάβει μια ωραία φωτογραφία του χώρου εργασίας του.

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

Παραδοσιακές πτυχές:

Μεγάλο σύστημα πλέγματος.
Υπέροχη θεωρία χρωμάτων
Ισχυρή ιεραρχία πληροφοριών

Βελτιώσεις Web 2.0:

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

2. MuttInk

Τελικά, η υφή φαίνεται να είναι το μέγιστο από τις στρογγυλεμένες γωνίες και παρόλο που ο ιστότοπος του MuttInk δεν μπορεί να χαρακτηριστεί ως τυπικό Web 2.0, είναι μόνο μια ματιά που χρειάζεται να γνωρίζουμε ότι ο Jeremy Holmes (ο άνθρωπος πίσω από το έργο) είναι ένας εκπληκτικός σχεδιαστής και γραφικός καλλιτέχνης .

Μια προσοχή στη λεπτομέρεια, την υφή και μια ισχυρή ταυτότητα το τοποθετεί ως προσωπικό αρένα.

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

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

Παραδοσιακές πτυχές:

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

Βελτιώσεις Web 2.0:

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

3. 45 Royale

Το χαρτοφυλάκιο των 45 Royale όχι μόνο παρουσιάζει μια εκπληκτική ποικιλία εργασιών, αλλά δείχνει ότι η ομάδα πίσω από το site αντιλαμβάνεται την καλή χρήση των πολλαπλών προτύπων σχεδιασμού. Είναι ένα φανταστικό μείγμα εναλλακτών Web 2.0, αλλά έχει μια σταθερή βάση στα παραδοσιακά πρότυπα σχεδίασης (και απλά κοιτάξτε τα χρώματα!).

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

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

Φωτεινά χρώματα γύρω από μια δευτερεύουσα παλέτα γκρι, λευκό και μαύρο; Φοβερός.

Παραδοσιακές πτυχές:

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

Βελτιώσεις Web 2.0:

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

4. Ζουμ πείρου

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

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

Θυμηθείτε τα τέλη της δεκαετίας του 90 όταν το Flash ήταν όλη η οργή; Θυμηθείτε πόσο κουρασμένος από το Flash πήραμε όλοι στη συνέχεια; Τα καλά πρότυπα Web 2.0 είναι εξίσου πειραματικά με το σχεδιασμό και το Pinch Zoom το έχει καλά υπό έλεγχο.

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

Παραδοσιακές πτυχές:

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

Βελτιώσεις Web 2.0:

Το ρυθμιστικό χαρτοφυλακίου JavaScript είναι dang διασκεδαστικό και αποτελεσματικό.
Η διασύνδεση είναι μινιμαλιστική και άμεση.
Η ποικίλη χρήση του εικονογράφου είναι μια μεγάλη πινελιά.
Αγκαλιάζει την τρέχουσα τεχνολογία του ιστού χωρίς να καταστεί δυσκίνητη.
Μοναδικές λύσεις για τη διάταξη σελίδας (Ανατρέξτε στο αναπτυσσόμενο μενού όταν κάνετε κλικ στην καρτέλα "Πληροφορίες". Υπάρχει ουσιαστικά ένας ολόκληρος ιστότοπος που κρύβεται εκεί!).

5. Cameron Moll

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

Τα χρώματα είναι ζωντανά και οι επιλογές γραμματοσειρών ματιών με τη συνολική αίσθηση, αλλά και πάλι, ο τύπος μπορεί να πάρει αρκετά μικρό σε μέρη, το οποίο είναι ένα Web 2.0 όχι-όχι. Αλλά ποιος είμαι εγώ να επιλέξω; Ο Cameron βρήκε μεγάλη επιτυχία και είναι ο άνθρωπος πίσω από το Authenticjobs.com, μια μεγάλη πηγή για τους σχεδιαστές (και μία που βοήθησε να πληρώσω τους λογαριασμούς μου).

Παραδοσιακές πτυχές:

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

Βελτιώσεις Web 2.0:

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

6. Θέμα "Fluid" Tumblr του Metalab

Το μόνο θέμα Tumblr για να φτιάξετε τη λίστα έχει τίτλο "Fluid", από το σχεδιασμό της Metalab. Έκανε τη λίστα για έναν απλό λόγο: Είναι ένα φρικτό όμορφο παράδειγμα του Web 2.0 στο καλύτερο δυνατό. Απλό, καθαρό και λαμπερό με χρώμα.

Κάποιος θα μπορούσε να θεωρήσει ότι είναι λίγο μονόπλευρη σε αυτή τη σύγκριση (είναι ένα Web 2.0 catch-all). Αυτό συμβαίνει επειδή το Metalab είναι γνωστό για τον καθορισμό προτύπων στην arena του Web 2.0, και αυτός ο ιστότοπος είναι μαρτυρία αυτού του γεγονότος. Ωστόσο, η Metalab Design διατηρεί τους βασικούς κανόνες και διατηρεί την δομή απλή και καλά οργανωμένη.

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

Παραδοσιακές πτυχές:

Απλή, αποτελεσματική δομή.
Διακρίνεται στις μάζες των θεμάτων Tumblr.
Σύγχρονο (αν και απλό) χρωματικό σχέδιο.

Βελτιώσεις Web 2.0:

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

7. Viget

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

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

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

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

Παραδοσιακές πτυχές:

Καλά δομημένο περιεχόμενο.
Όμορφο χρώμα και τύπος.
Αν και οι γραμματοσειρές είναι στη μικρή πλευρά, το κύριο περιεχόμενο είναι ακόμα εύκολο να διαβαστεί.
Το μεγάλο έργο τέχνης συνδέεται άψογα στο σχέδιο (δροσερά πορτρέτα).

Βελτιώσεις Web 2.0:

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

8. FeelWire

Ένα άλλο εκπληκτικό παράδειγμα μεγάλου λευκού είναι το Feelwire. Ο μαύρος τύπος σε λευκό φόντο, με μεγάλες αποχρώσεις του γκρι στο μεταξύ, ποτέ δεν φαίνεται να γερνάει. Προσθέστε μερικά έντονα έγχρωμα εικονίδια και έχετε τον εαυτό σας έναν απλό αλλά αποτελεσματικό ιστότοπο. Είναι όλα σχετικά με την απλότητα εδώ (heck, έχουν μόνο μια σελίδα!).

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

Κατά την κύλιση πάνω σε αυτά τα εικονίδια, ήμουν πραγματικά ευχαριστημένος με αυτό που βρήκα: Μια πολύ απλή κατάταξη που μου έδωσε τις πληροφορίες που έψαχνα, κάνοντας έτσι με το δημοφιλέστερο Web 2.0 "Speech Bubble". Μια μεγάλη πινελιά.

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

Παραδοσιακές πτυχές:

Σύντομη, γλυκιά και στο σημείο: μια σελίδα μιας σελίδας.
Λευκός χώρος!
Λεπτές, καλαίσθητες επιλογές γραμματοσειράς.
Ωραία, βασική διάταξη.

Βελτιώσεις Web 2.0:

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

9. Agami Creative

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

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

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

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

Παραδοσιακές πτυχές:

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

Βελτιώσεις Web 2.0:

Η υπερμεγέθη πλοήγηση διευκολύνει την κυκλοφορία στην περιοχή.
Είναι πολύ εύκολο να έρθετε σε επαφή.
Η χρήση των avatar είναι μια καλή ιδέα (αν και ειλικρινά νομίζω ότι θα μπορούσαν να έχουν κάνει καλύτερα με αυτά. Δεν είστε σίγουροι πως το βλέμμα anime πρέπει να συνδέεται με αυτό το site εκτός από την ασιατική επιρροή;).
Αγάπη της υφής!

10. Adit Shukla

Μια άλλη ιστοσελίδα με μια μεγάλη απεικονιστική προσέγγιση, ο σχεδιαστής Adit Shukla ξέρει επίσης πώς να βάλει μαζί ένα μεγάλο σχέδιο χρωμάτων, και μάλιστα παίζει με μια ωραία λύση στην πλαϊνή μπάρα.

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

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

Παραδοσιακές πτυχές:

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

Βελτιώσεις Web 2.0:

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

12. Κρέμα Scoop

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

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

Παραδοσιακές πτυχές:

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

Βελτιώσεις Web 2.0:

Φανταστική χρήση κλίσης στο παρασκήνιο.
Το λαμπρό μπλε τραβά πραγματικά την προσοχή σας και το κατευθύνει προς τα σημαντικά πράγματα.
Ψυχρή χρήση των avatar σε περίπου σελίδα (πόσο παλιά είναι αυτά τα παιδιά;).
Μεγάλες γραμματοσειρές που χρησιμοποιούνται καθ 'όλη.

13. Carbonica

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

Βεβαιωθείτε ότι έχετε μετακινηθεί λίγο και δείτε τα εικονίδια, τα οποία ταιριάζουν τέλεια στο θέμα!

Παραδοσιακές πτυχές:

Βασική δομή είναι στο παιχνίδι.
Τα χειροποίητα γράμματα πηγαίνουν καλά με το θέμα της ιστοσελίδας.
Το κινούμενο σχέδιο είναι ένα ωραίο άγγιγμα (αλλά λυπάμαι που η χρήση του Flash κρατά αυτό το σημείο εκτός της κατηγορίας Web 2.0).

Βελτιώσεις Web 2.0:

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

14. DSGN + DVLP

Και πάλι το γενικό σχέδιο ασπρόμαυρου χρώματος λειτουργεί για αυτόν τον ιστότοπο και τονίζουν αυτή την κατεύθυνση με κάποιες καθαρές εικόνες που τραβήχτηκαν απευθείας από την τσάντα Web 2.0.

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

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

Παραδοσιακές πτυχές:

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

Βελτιώσεις Web 2.0:

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

15. Marchand de Trucs

Έτσι ίσως δεν μπορώ να μιλήσω τη γλώσσα, αλλά αυτό δεν σημαίνει ότι η περιοχή δεν μιλάει ακόμα σε μένα ... Εντάξει, αυτή η γραμμή ήταν κουραστική, αλλά ακόμα αυτό το site είναι πολύ γλυκό. Περιέχει υπέροχα έργα τέχνης και, πίσω από όλα, ένα μεγάλο θεμέλιο και δομημένο περιεχόμενο. Δεν είναι πολύ κακό για το τι (νομίζω) φαίνεται να είναι ένα ηλεκτρονικό μαγαζί μαγικό!

Παραδοσιακές πτυχές:

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

Βελτιώσεις Web 2.0:

Εξαιρετικά ωραία χρήση της εικονογράφησης ως επικεφαλίδα
Σχετικά μεγάλα εικονίδια.

16. Paiko

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

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

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

Παραδοσιακές πτυχές:

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

Βελτιώσεις Web 2.0:

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

17. Matt Dempsey

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

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

Όταν έρχεται σε αυτό, ο Matt Dempsey παρουσιάζει το έργο του και τον ιστότοπό του με τολμηρό και "με το πρόσωπό σας" τρόπο. Και η παραβίαση κάποιων κανόνων είναι το ζήτημα της ύπαρξης σχεδιαστή, ανεξάρτητα από το αν οι κανόνες είναι παλιοί ή νέοι.

Παραδοσιακές πτυχές:

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

Βελτιώσεις Web 2.0:

Ο Matt χρησιμοποιεί προφανώς προσέγγιση Web 2.0 για τις γραμματοσειρές και το λογότυπό του
Καλή χρήση της τεχνολογίας στις εσωτερικές σελίδες (το ρυθμιστικό JavaScript είναι ένα δροσερό άγγιγμα).
Κάθε κομμάτι σημαντικών πληροφοριών είναι τεράστιο και ευανάγνωστο.
Το χαρτοφυλάκιο παρουσιάζει το έργο με τρόπο διασκεδαστικό, υψηλής τεχνολογίας.

18. Digital Mash

Με το Digital Mash, μπορείτε να δείτε ότι η αφθονία της σκέψης πήγε στα αντικείμενα που ήθελαν να συμπεριλάβουν στο site, ή ακόμα καλύτερα, τα αντικείμενα που επέλεξαν να αφήσουν έξω.

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

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

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

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

Παραδοσιακές πτυχές:

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

Βελτιώσεις Web 2.0:

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

19. Kyan Media

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

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

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

Παραδοσιακές πτυχές:

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

Βελτιώσεις Web 2.0:

Φωτεινή μπλε χρωματική παλέτα.
Διασκεδαστική χρήση της απεικόνισης (ποιος δεν συμπαθεί τα σύννεφα;).
Πνευματική φωτογραφία.
Καλή εφαρμογή της τεχνολογίας.
Λεπτές σκιάσεις προσθέτουν βάθος.
Υψηλά ευανάγνωστες γραμματοσειρές και υπερμεγέθεις κεφαλίδες.

20. Rockatee

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

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

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

Παραδοσιακές πτυχές:

Όλα έχουν μια εξαιρετικά σταθερή αίσθηση.
Η γενική διάταξη κάθε σελίδας είναι ισχυρή.
Η θεωρία των χρωμάτων διερευνάται και εφαρμόζεται.
Ιδιαίτερη προσοχή στη λεπτομέρεια.

Βελτιώσεις Web 2.0:

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

21. Πράγματα που είναι καφέ

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

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

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

Αυτό είναι ένα από αυτά τα σπάνια sites που συνδυάζει άψογα τους ισχυρούς κανόνες σχεδιασμού με τα σύγχρονα τσιμπήματα. Η ετικέτα τους, "Ταπεινώς τρομερή", είναι νεκρή.

Παραδοσιακές πτυχές:

Ωραίο χρώμα με μεγάλες προεκτάσεις.
Καλή χρήση των έργων τέχνης που ενσωματώνει καλά.
Στερεό και συνεπές σε όλο.

Βελτιώσεις Web 2.0:

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

22. Andrew Bradshaw

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

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

Σημειώνεται επίσης η κεφαλίδα με υφή και η ισχυρή επιλογή γραμματοσειράς που χρησιμοποιείται στο λογότυπό του. Και πάλι, ο Andrew συνδυάζει λεπτότητα και τόνους για να δημιουργήσει μια όμορφη τοποθεσία που είναι διεξοδική και συναρπαστική καθ 'όλη.

Παραδοσιακές πτυχές:

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

Βελτιώσεις Web 2.0:

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

23. James Lai

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

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

Παραδοσιακές πτυχές:

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

Βελτιώσεις Web 2.0:

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

24. Υποβιβασμός

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

κανόνες σχεδιασμού συλλογή σχεδίων παραδοσιακός web 2.0