Δεν σχεδιάζει το νέο σχέδιο;
Αχ, θυμάμαι τις μέρες καλά ... όταν όλα ήταν μια λαμπερή, βαθιά σκιά με κλίση, με τουλάχιστον 6 κομμάτια clip art, και μια φωτογραφία απόθεμα 5 εορταστικών υπαλλήλων γραφείου. Μας άρεσε εικόνες από πληκτρολόγια με απίστευτα κουμπιά πάνω τους, και άτομα με ραβδώσεις με εφέ 3D που κρατούν γυαλιστερά σύμβολα.
Και τότε τι έγινε; Το iOS 7 ήρθε μαζί. Το εργαλείο κλίσης στα Photoshops μας άρχισε να συλλέγει σκόνη και διαγράψαμε τη μαζική μας βιβλιοθήκη φωτογραφικών αποθεμάτων.
Επίπεδη σχεδίαση ανέλαβε το 2013 . Όλα έπρεπε να είναι φωτεινά, γελοιογραφικά και, φυσικά, επίπεδα. Με τον ίδιο τρόπο που η επίπεδη σχεδίαση ήταν μια αντίδραση στον σπερμομορφισμό, αρχίζουμε να βλέπουμε τα πράγματα να πηγαίνουν με άλλο τρόπο εντελώς.
Λοιπόν, ποια είναι η νέα γεύση του έτους; Χαίρομαι που ρωτήσατε: Ιστότοποι που μοιάζουν με τη σελίδα λήψεων μιας εταιρείας λογισμικού ανοιχτού κώδικα που έκλεισε στα τέλη της δεκαετίας του '90.
Αυτό έχει τεκμηριωθεί από Ιστοσελίδες βρουταλιστών , η οποία σημείωσε έλξη και σημείωσε κάλυψη Washington Post και Fast Co για να ονομάσετε ένα ζευγάρι. Αλλά σίγουρα πρόκειται για ιστοσελίδες από αξιόλογους οργανισμούς σχεδιασμού και πειραματικούς καλλιτέχνες; Στο Brutalist Websites βιτρίνα, αυτό είναι ως επί το πλείστον αληθινό, αλλά αρχίζουμε να βλέπουμε αυτή την αισθητική διαρροή στο mainstream. Ομορφη! Δεν μπορούμε να δούμε το κομψό επίπεδο σχέδιο για τις υπόλοιπες μέρες μας, μπορούμε;
Προσωπικά, μου αρέσει αυτή η τάση. Δεν είμαι ο πιο έντονος σχεδιαστής ιστοσελίδων εκεί έξω, και ούτε θέλω να χρησιμοποιήσω ένα σκεπασμένο πλαίσιο - ό, τι μπορώ να φτιάξω μαζί είναι το καλύτερο που μπορώ να κάνω.
Συνήθιζα να ξοδεύω χρόνο για να καθαρίζω το διαδίκτυο για ξεπερασμένο σχεδιασμό ιστοσελίδων, χαρούμενος για τα ογκώδη Times New Roman και αμήχανα πλαίσια. Πιθανώς επειδή μου υπενθύμισε μια απλούστερη στιγμή, όπου οι άνθρωποι κάλεσαν τους εαυτούς τους webmasters και όλα ήταν μόνιμα «Under Construction».
Αλλά, επιδιώκοντας να μάθουν το web design από το μηδέν αντί να υιοθετήσουν ένα θέμα WP ή CSS πλαίσιο, πάντα ήμουν πολύ ντροπή για να δημιουργήσω την απλή, άσχημη ιστοσελίδα των ονείρων μου. «Ποιο θα ήταν το θέμα;», σκέφτηκα. Η εμφάνισή του θα με έκανε να φανεί γελοίο. Δεν μπορώ να το χρησιμοποιήσω ως χαρτοφυλάκιο για τίποτα χωρίς να μοιάζει με χάος.
Βλέποντας ιστοσελίδες με φως CSS χωρίς JavaScript στην οπτική γωνία μου έδωσε την εμπιστοσύνη που πρέπει να σταματήσω να δουλεύω στους ιστότοπους άλλων ανθρώπων και να κάνω το δικό μου, αντ 'αυτού.
Κοιτάζοντας την επιλογή των νέων μινιμαλιστικών τοποθεσιών, παρατήρησα ορισμένα βασικά θέματα που φαίνονται να εκτρέφουν τα όμορφα άσχημα κεφάλια τους.
Μονόχρωμος
Ο μονόχρωμος σχεδιασμός κάνει ακριβώς αυτό που πρέπει να κάνει ο καλός σχεδιασμός: εφιστά την προσοχή στο περιεχόμενο.
Δεν Fancy CSS
Θυμάστε τις παλιές καλές μέρες; Όταν όλοι ανήκαν σε έναν ιστότοπο και είχαν κάτι να αποδείξουν; Η μη (ή μικρή) προσέγγιση CSS φέρνει πίσω εκείνες τις μέρες και προσωπικά με κάνει εξαιρετικά νοσταλγικό για πιο απλές στιγμές όπου ένας ιστότοπος θα μπορούσε να είναι απλώς ένα σύντομο bio και μια συλλογή συνδέσεων.
Επικαλυμμένο / επικαλυπτόμενο κείμενο
Το επικλινές κείμενο ρίχνει το χρήστη μακριά λίγο, και όχι με εκπληκτικό τρόπο . Αντ 'αυτού, είναι κάτι που ο χρήστης δεν χρησιμοποιείται για να δει έτσι κάνει μια ισχυρή εντύπωση.
Ελέγξτε την πειραματική τοποθέτηση κειμένου που χρησιμοποιεί το Loïc την ιστοσελίδα του . Η απόλυτη αδιαφορία για την αναγνωσιμότητα δίνει στους επισκέπτες την αίσθηση ενός καταστήματος υψηλής μόδας που δεν έχει ετικέτες τιμών. Είναι τόσο μη ενημερωτικό (και σε αυτή την περίπτωση, μακριά) ότι είναι αριστοκρατικό.
Λίγα λόγια για την κλίμακα ή την επένδυση
Το Bloomberg να πάρει αρκετά πειραματική αυτές τις μέρες, και μου αρέσει. Φανταστείτε τις δοκιμές και τις δοκιμασίες που ο σχεδιαστής έπρεπε να περάσει για να πάρει αυτό που εγκρίθηκε με το μεγάλο αφεντικό.
Ο λόγος που αυτό είναι φοβερό είναι ότι είναι τόσο διαφορετικό. Δεν δίνει ιδιαίτερη προσοχή στους σκληρούς κανόνες σχεδιασμού: αφήνοντας αρκετό χώρο μεταξύ των στοιχείων, διατηρώντας τα πράγματα σε παρόμοια κλίμακα και ακόμη και βεβαιώνοντας ότι όλα είναι κατάλληλα αναγνωρίσιμα σε όλες τις συσκευές.
Αναφορές σε τεχνολογία κληρονομιών
Πολλοί από εμάς θα έχουν ευχάριστες αναμνήσεις των Windows 98 ή των πρώιμων λειτουργικών συστημάτων Mac. Ορισμένες ιστοσελίδες ενσταλάζουν την αίσθηση της νοσταλγίας - και, ίσως, το χιούμορ - κάνοντας αναφορές σε παλιό λογισμικό. Μετά από όλα, πολύ βίαιη web design προέρχεται από τις «παλιές μέρες».
Ελέγξτε αυτό το παράδειγμα από Δημοσίευση HTML (οι φάκελοι αυτοί περιέχουν πειραματική τέχνη).
Τι σημαίνει αυτό για τους σχεδιαστές
Σκεφτήκαμε ότι η επίπεδη = απλότητα, αλλά προφανώς χρειάστηκε ακόμη ένας τόνος έργου σχεδιασμού για να το κάνει σωστό.
Με τη βιταμπαλιστική αισθητική να έρχεται στο προσκήνιο, οι σχεδιαστές θα χρειαστεί να βασίζονται λιγότερο στα παραδοσιακά πλαίσια CSS και στις περιοχές κώδικα από την αρχή.
Ωστόσο, δεν φαίνεται να είναι επιχειρήσεις που χρησιμοποιούν αυτή την τάση στους χώρους τους. Ο σχεδιασμός βρουταλιστών - εκτός από το Bloomberg και κάποια άλλα μεγαλύτερα ονόματα - περιορίζεται, τώρα, σε πρακτορεία σχεδιασμού, πειραματικούς χώρους και προσωπικά ιστολόγια.
Αν θέλετε να φτιάξετε τη δική σας κτηνωδία ιστοσελίδα, εδώ είναι μερικές οδηγίες ...
Απογυμνώστε το CSS από τον τρέχοντα ιστότοπό σας
Ενώ μερικοί ιστότοποι εξαρτώνται σε μεγάλο βαθμό από το CSS για οριζόντια τοποθέτηση, είναι πιθανό να σχιστούν όλα τα styling από κάποιες τοποθεσίες και να εξακολουθούν να εμφανίζονται 'σωστά'. Ακολουθεί ένα παράδειγμα:
Αν ο ιστότοπός σας βασίζεται σε φανταχτερά κινούμενα σχέδια, JavaScript ή φανταχτερά CSS, θα χρειαστεί να ξανακάνετε την ανανέωση εάν θέλετε να υιοθετήσετε αυτό το στυλ. Στην πραγματικότητα, ο λόγος που έσβησα το WordPress ήταν επειδή δεν μπορούσα να βρω ένα θέμα που να ταιριάζει με το όραμά μου. Στο τέλος, τελικά κατέληξα να μαθαίνω HTML / CSS επεξεργάζοντας ένα αρχαίο πρότυπο από τις αρχές της δεκαετίας του 2000. Μετά από αυτό, ένιωσα βέβαιος να προχωρήσω και να αρχίσω, γράφοντας το δικό μου βρώμικο CSS και κάνοντας το πιο απομακρυσμένο πράγμα από έναν γυαλισμένο, «σύγχρονο» χώρο.
Μειώστε το μονοχρωματικό
Μερικές φορές, ο βίαιος σχεδιασμός σημαίνει απλός σχεδιασμός. Και αυτό είναι πάντα εξαιρετικό για την εμπειρία του χρήστη. Η περικοπή της τρέχουσας παλέτας χρωμάτων σε μόλις 2 χρώματα (μαύρο και ένα άλλο-λευκό, τεχνικά), μπορεί να βοηθήσει στη μείωση της υπερφόρτωσης του χρήστη και να δώσει μια σαφέστερη κατεύθυνση για το πού να πάει. Μετά από όλα, δεν βλέπετε ιστότοπους με έναν τόνο διαφορετικών χρωμάτων στην περιοχή κειμένου, επειδή είναι δύσκολο να εστιάσετε.
Αποκτήστε δημιουργικότητα με την τοποθέτηση κειμένου
Ποιος δήλωσε ότι πρέπει να έχεις όλα καλά; Ο ιστότοπος του Loïc Dupasquier παραπάνω, για παράδειγμα, είναι μια τολμηρή δήλωση που λέει κάτι για τον σχεδιαστή. Κοιτάζοντας ακριβώς το ίδιο με κάθε άλλη πιθανή μίσθωση δεν είναι μια καλή εμφάνιση.
Αν δεν είστε ο πιο διάσημος σχεδιαστής σε αυτόν τον τομέα, θα είστε πάντα το δεύτερο καλύτερο. Αποφεύγοντας τους παραδοσιακούς «κανόνες» σχετικά με την τυπογραφία, στέκεστε έξω από το πλήθος.
Επαναλάβετε τα βασικά και τους παλιούς τρόπους
Για μένα, δεν ήταν θέμα προσαρμογής ενός σχεδίου ή μιας ικανότητας σε μια νέα νοοτροπία. Έμαθα τα βασικά του σχεδιασμού ιστοσελίδων όταν οι τοποθεσίες στην πραγματικότητα έμοιαζαν με αυτές που σας έδειξα, οπότε το μόνο που έπρεπε να κάνω ήταν να πάρω μια γρήγορη ενημέρωση και να έρθω στη δουλειά.
Θα συνιστούσα να ελέγξω τον πηγαίο κώδικα σε παλιούς ιστότοπους και εκείνους που εμφανίζονται σε ιστοτόπους Brutalist, παλιά tutorials HTML , ή αυτό το χρυσωρυχείο που περιλαμβάνει μια λίστα με τις πρώτες ιστοσελίδες που είναι ακόμη ζωντανές.
Όπου αυτό το στυλ λειτουργεί καλά (και όπου δεν το κάνει)
Στο τέλος, ένας ιστότοπος είναι πάντα μια ισορροπία μεταξύ αυτο-έκφρασης και δημιουργώντας την καλύτερη εμπειρία για τους χρήστες σας.
Σε ένα blog, ίσως είναι καλύτερο να επικεντρωθούμε στο να κάνουμε το σώμα του κειμένου εύκολο να χωνέψει. Θα παρατηρήσετε ότι ενώ το κομμάτι του Bloomberg στο Yahoo ξεκινάει αρκετά περίεργο, το κύριο σώμα του κειμένου είναι εύκολο να το διαβάσετε.
Έτσι, όταν χτίζετε ένα blog, είναι καλύτερα να επιμείνετε σε συμβάσεις για το σώμα του άρθρου. Για παράδειγμα, WIRED Ο σχεδιασμός του είναι αρκετά διακριτικός, αλλά όταν πρόκειται για τα ίδια τα άρθρα, χρησιμοποιούν μια ευχάριστη γραμματοσειρά και τη διατηρούν ευανάγνωστη.
Για έναν σχεδιαστή που εργάζεται κυρίως με βουλωμένες επιχειρήσεις, ένα πειραματικό χαρτοφυλάκιο μπορεί να βάλει τον πελάτη μακριά στην πιο ζωτική στιγμή-πρώτη επαφή.
Στο τέλος, καταλήγουμε στο να γνωρίζουμε το ακροατήριό σας και αν μπορείτε να ξεφύγετε με αγνόηση των συμβάσεων.
Προχωρήστε και κάντε κάτι απαίσια λαμπρό.