Μινιμαλιστικός σχεδιασμός ιστοσελίδων: Όταν το λιγότερο είναι περισσότερο
Ως σχεδιαστές, όλοι γνωρίζουμε ότι ένα μινιμαλιστικό σχέδιο μπορεί να επιτύχει όμορφα αποτελέσματα.
Ωστόσο, πολλοί σχεδιαστές δυσκολεύονται να δημιουργήσουν ένα. είτε έχουν δύσκολο χρόνο κάνοντας μια σελίδα με τόσο λίγα στοιχεία να φαίνονται καλά ή το τελικό αποτέλεσμα απλά δεν φαίνεται "πλήρες".
Υπάρχουν πολλά άρθρα στο διαδίκτυο σχετικά με τον μινιμαλισμό και αυτό το άρθρο στοχεύει να σας βοηθήσει να επιτύχετε ένα μινιμαλιστικό σχέδιο που είναι όμορφο αλλά όχι γυμνό.
Για να το ξεπεράσουμε, θα παρουσιάσουμε μια μικρή βιτρίνα μινιμαλιστικών σχεδίων , ώστε να μπορείτε να αναλύσετε γιατί ορισμένα σχέδια δουλεύουν και άλλα όχι.
Τι είναι ο μινιμαλιστικός σχεδιασμός;
Ο μινιμαλιστικός σχεδιασμός έχει περιγραφεί ως σχεδιασμός στα πιο βασικά του, απογυμνωμένα από περιττά στοιχεία, χρώματα, σχήματα και υφές.
Σκοπός της είναι να κάνει το περιεχόμενο ξεχωρίζει και να είναι το επίκεντρο. Από οπτικής απόψεως, ο μινιμαλιστικός σχεδιασμός έχει σκοπό να είναι ηρεμώντας και να φέρει το μυαλό στα βασικά .
Το σχεδιαστικό κίνημα ξεκίνησε στην Ελβετία και στη συνέχεια εφαρμόστηκε σε διάφορα μέσα: γραφιστική, αρχιτεκτονική, μουσική, λογοτεχνία, ζωγραφική και, πιο πρόσφατα, σχεδίαση ιστοσελίδων.
Αν και ο μινιμαλιστικός σχεδιασμός έφυγε πριν από δεκαετίες, οι πρώτες μέρες του Διαδικτύου δεν το έδειξαν. Ακόμη και χωρίς τα περιστρεφόμενα λογότυπα, τα μαρκίζες και τα φωτεινά χρώματα, τα σχέδια των ιστοσελίδων ήταν γεμάτα και ακατάστατα .
Θα ξεπεράσουμε τις βασικές αρχές του μινιμαλιστικού σχεδιασμού. Αλλά ακόμα κι αν επιλέξετε να μην ακολουθήσετε μια μινιμαλιστική αισθητική, τα μαθήματα εδώ μπορούν να σας βοηθήσουν να απλοποιήσετε το σχέδιό σας, ανεξάρτητα από το στυλ σας.
Λιγότερο είναι περισσότερο
Όπως αναφέρθηκε, ο μινιμαλισμός φέρνει στο προσκήνιο το πιο σημαντικό περιεχόμενο και ελαχιστοποιεί τις περισπασμούς για τον χρήστη. Εάν μια σελίδα έχει πάρα πολλά στοιχεία, ο θεατής θα μπερδευτεί σχετικά με το πού να κοιτάξει ή να παρερμηνεύσει την προτεραιότητα κάθε στοιχείου. Μια μινιμαλιστική σχεδίαση δίνει την εστίαση ακριβώς στο περιεχόμενο.
Οποιαδήποτε εκτόξευση χρώματος σε ασπρόμαυρο σχέδιο, για παράδειγμα, είναι βέβαιο ότι θα τραβήξει την προσοχή του χρήστη. Το ίδιο το χρώμα γίνεται το εστιακό σημείο . Ας δούμε ένα συγκεκριμένο παράδειγμα:
Έχετε δει πιθανώς αυτό το είδος του σχεδιασμού πριν: καθαρό λευκό φόντο, ένα μπλοκ του περιεχομένου και ένα γραφικό στοιχείο.
Το γραφικό στοιχείο φέρνει χρώμα, υφή και σχήμα. Είναι σαφώς το πιο σημαντικό στοιχείο στη σελίδα και ορίζει το εμπορικό σήμα και την ταυτότητα του σχεδιαστή.
Με την πολυπλοκότητα αυτού του συγκεκριμένου γραφικού στοιχείου, περισσότερο περιεχόμενο σε αυτή τη σελίδα θα το έκανε λιγότερο αισθητό και λιγότερο σημαντικό. Διατηρώντας το περιεχόμενο στο ελάχιστο, ο σχεδιαστής έχει επιτύχει την τέλεια ισορροπία.
Πώς να ελαχιστοποιήσετε το περιεχόμενο
Το πρώτο βήμα για τη δημιουργία ενός μινιμαλιστικού σχεδιασμού ή απλώς για την απλούστευση μιας διάταξης δεν είναι απλώς να αποκόψετε τα περισσότερα γραφικά, αλλά να αναθεωρήσετε το περιεχόμενο και να το καταργήσετε στις γυμνές απαιτήσεις. Μόνο τότε τα πιο σημαντικά στοιχεία της σελίδας θα επιτύχουν το επιδιωκόμενο αποτέλεσμα.
Ακριβώς όπως θα σχεδιάζετε οποιαδήποτε ιστοσελίδα, καταγράψτε τι περιεχόμενο χρειάζεστε: λογότυπο, εισαγωγή, πλοήγηση κτλ. Κόψτε οτιδήποτε άλλο δεν είναι απαραίτητο. Πέτα όσο το δυνατόν περισσότερο .
Παρακάτω είναι μερικά στοιχεία που πιθανώς δεν χρειάζεστε. Λάβετε υπόψη ότι αυτό είναι απλώς ένας οδηγός. Οι ακριβείς απαιτήσεις σας θα εξαρτηθούν από το ιδιαίτερο σχεδιασμό σας. Ορισμένα από τα παρακάτω στοιχεία ενδέχεται να μην απαιτούνται για τον ιστότοπό σας.
- Εικόνες ή γραφικά για κοινωνικά μέσα ή μια ενότητα κοινωνικών μέσων
- Taglines και συμπληρωματικές περιγραφές ή εισαγωγές
- "Προτεινόμενες", "Δημοφιλείς" και "Πρόσφατες" λίστες (συμπεριλαμβανομένων των λιστών Twitter και RSS)
- Σελίδες με περισσότερα από τρία κύρια τμήματα (π.χ. "Εισαγωγή", "Πληροφορίες" και "Υπηρεσίες")
- Δευτερεύουσες σελίδες πλοήγησης.
Το σημείο εδώ δεν είναι να κάνουμε τον ιστότοπο λιγότερο λειτουργικό, αλλά να αποκόψουμε περιττά στοιχεία (και επομένως να τονίσουμε τα απαραίτητα στοιχεία) ή να συνδυάσουμε τα τμήματα σε μια απλούστερη διάταξη (για παράδειγμα, ενσωματώνοντας τους συνδέσμους κοινωνικών μέσων στο "About" ή εισαγωγικό τμήμα).
Θα μπορούσατε επίσης να διαιρέσετε το περιεχόμενο σε ξεχωριστές σελίδες, δίνοντας σε κάθε κομμάτι περιεχομένου περισσότερη προσοχή.
Πώς να απλοποιήσετε το σχεδιασμό
Τώρα ήρθε η ώρα να απλοποιήσετε το σχέδιο όσο το δυνατόν περισσότερο.
Τα μινιμαλιστικά σχέδια πρέπει να έχουν μικρή υφή, χρώμα, σχήμα, γραμμές, περιεχόμενο ή τύπο. Πάμε όμως πολύ γυμνός, και ο σχεδιασμός θα είναι βαρετός. Αντί να απορρίπτετε τα πάντα, δώστε το ενδιαφέρον για το σχεδιασμό κάνοντας ένα μόνο σημαντικό χαρακτηριστικό το επίκεντρο .
Επιλέξτε αυτό που θα είναι αυτή η εστίαση και κρατήστε τις παρακάτω συμβουλές κατά νου, καθώς εργάζεστε με το σχεδιασμό σας.
Χρησιμοποιήστε ένα Great Wireframe
Κατά την περιήγηση στο τμήμα βιτρίνας που ακολουθεί, βλέπουμε ότι μερικοί σχεδιαστές έχουν προσθέσει οπτικό ενδιαφέρον με εκλεπτυσμένες εκρήξεις χρώματος, μοναδική τυπογραφία ή ενδιαφέροντα σχήματα. Ίσως το πιο σημαντικό στοιχείο που όλοι βασίστηκαν, όμως, είναι ένα μοναδικό wireframe .
Η δημιουργία ενός πλαισίου για μια τέτοια γυμνή σελίδα απαιτεί λίγο περισσότερη προσοχή. Με το σωστό wireframe, μπορείτε να επιτύχετε τη σωστή ιεραρχία και οργάνωση και να δημιουργήσετε οπτικό ενδιαφέρον.
Για να εμφανίσετε ένα wireframe, ακολουθήστε τα εξής βήματα:
- Αποφασίστε για το περιεχόμενο που χρειάζεστε απολύτως
- Σε μια λίστα, δώστε προτεραιότητα στο περιεχόμενο
- Σχεδιάστε μερικά σύρματα που βασίζονται στη λίστα σας για να πειραματιστείτε με την καλύτερη οπτική ιεραρχία.
Κατά την επεξεργασία του σκελετού, εξετάστε την τοποθέτηση αλλά και την οπτική επεξεργασία. Για παράδειγμα, εάν το λογότυπό σας έχει χρώμα που δεν επαναχρησιμοποιείτε σε άλλο σημείο του σχεδίου, πρέπει να το λάβετε υπόψη.
Λευκός χώρος
Ο λευκός χώρος είναι σχεδόν συνώνυμος με τον μινιμαλισμό.
Ανεξάρτητα από το πόσο δημιουργικό είστε με αυτό, ένα μινιμαλιστικό σχέδιο χωρίς άφθονο λευκό χώρο δεν είναι πραγματικά μινιμαλιστικό καθόλου. Έτσι, βεβαιωθείτε ότι προσθέτετε περισσότερους λευκούς χώρους γύρω από τα στοιχεία που θα κάνατε κανονικά.
Ο χώρος είναι απαραίτητος για να εξισορροπηθούν τα λίγα στοιχεία που θα εμφανιστούν στη σελίδα.
Ισορροπία, Ευθυγράμμιση, Αντίθεση
Ενώ μεγάλο μέρος του φορτίου μπορεί να μεταφερθεί με λευκό χώρο και καλό καλώδιο, πρέπει να ληφθεί ιδιαίτερη προσοχή με τα βασικά στοιχεία του σχεδιασμού. Οι τρεις μεγαλύτερες που σχετίζονται με τον μινιμαλισμό είναι η ισορροπία, η ευθυγράμμιση και η αντίθεση .
Βεβαιωθείτε ότι ο σχεδιασμός σας ακολουθεί αυτές τις αρχές και ότι δεν χρειάζεται συμπληρωματικά οπτικά βοηθήματα για να φανεί "τελειωμένο".
Διατηρήστε επίσης υπόψη σας και άλλες βασικές αρχές σχεδιασμού. Ελέγξτε τα και δοκιμάστε με διαφορετικές επιλογές για να επιτύχετε το καλύτερο αποτέλεσμα. Ολοκλήρωση αγοράς " Οι Αρχές Σχεδιασμού "Για περισσότερες ιδέες.
Όταν η υπερ-σχεδίαση γίνεται συνήθεια
Ο υπερσχεδιασμός μερικές φορές γίνεται συνήθεια. Ανεξάρτητα από το πόσο σκληρά προσπαθείτε να κρατήσετε ένα απλό σχέδιο, βγαίνει ακατάστατο και περίπλοκο. Για να το διορθώσουμε αυτό, πρέπει να δημιουργήσουμε νέες συνήθειες.
Δοκιμάστε να ανατρέξετε στις παραπάνω συμβουλές πριν από κάθε έργο, για να τις έχετε κατά νου κατά τη διάρκεια της διαδικασίας. Εστίαση στην ανάπτυξη μιας συνήθειας κάθε φορά. Για παράδειγμα, προσπαθήστε να μειώσετε και να απλοποιήσετε το περιεχόμενο πριν μετακινηθείτε σε λευκό χώρο.
Αν βρεθείτε σε ένα δύσκολο σημείο που σκέφτεσαι "Κάτι λείπει", προσπαθήστε πρώτα να βγάλετε κάτι έξω, αντί να βάλετε κάτι καινούριο.
Κάθε πτυχή του μινιμαλισμού απαιτεί διαφορετικό ταλέντο. Τα σχέδιά σας θα γίνουν απλούστερα όσο περισσότερο θα θέσετε σε εφαρμογή αυτές τις αρχές.
Επιπλέον, αφού εφαρμόσετε τις τεχνικές που συζητήσαμε εδώ, εξετάστε το τελικό προϊόν και δείτε εάν μπορείτε να βρείτε τρόπους απλούστευσης του αποτελέσματος.
Θα μπορούσατε να εστιάσετε σε περιοχές που δεν ήσασταν ασφαλείς κατά τη διάρκεια της διαδικασίας σχεδιασμού και θα μπορούσατε να ζητήσετε από άλλους σχεδιαστές να επισημάνουν στοιχεία που ενδεχομένως έχετε χάσει.
Μινιμαλιστική Βιτρίνα
Παρακάτω είναι μια σύντομη βιτρίνα μινιμαλιστικών σχεδίων. Δείτε πώς κάθε ένα από αυτά εφαρμόζει τις αρχές που συζητήσαμε. Δείτε επίσης ποιες παραβιάζουν τις οδηγίες μας και σκεφτείτε γιατί συνεχίζουν να εργάζονται.
1. Φωτογραφία του James Day
2. Killswitch Collective
3. Μόνη
4. Βελτιώστε
5. XPD.no
6. Toy NY
7. Ο Joshua Serbus
8. Ah-Studio
9. Symour Powell
10. Icon Werk
11. Αρχιτέκτονες του Neil Wilson
12. Μη μορφοποίηση
13. Zaum
14. Checkland Kindlysides
15. Blumenthal
16. Tink Λονδίνο
17. Περήφανο Δημιουργικό
18. Kimag
19. Bernat Fortet
20. Όλη την Ημέρα
Μερικές τάσεις
Όπως μπορείτε να δείτε, ο μινιμαλιστικός σχεδιασμός ιστοσελίδων έχει κάποιες σαφείς τάσεις. Η γνώση αυτών των τάσεων μας βοηθά να βελτιώσουμε τα σχέδιά μας με πολλούς τρόπους.
Όχι μόνο είμαστε σε θέση να αντλήσουμε έμπνευση από τα σχέδια που άλλα εργάτες εργάστηκαν τόσο σκληρά, αλλά μπορούμε συνειδητά να σπάσουμε από αυτές τις τάσεις για να σφυρηλατήσουμε το δικό μας καινοτόμο μονοπάτι.
Ας συζητήσουμε μερικές από αυτές τις τάσεις με περισσότερες λεπτομέρειες.
Μαύρο και άσπρο
Μία από τις πιο αξιοσημείωτες τάσεις είναι η εκτεταμένη χρήση ασπρόμαυρων . Αυτό είναι αρκετά προφανές: το χρώμα πρέπει να απλοποιηθεί μαζί με την υφή, το σχήμα και το περιεχόμενο. Αλλά μπορεί να είναι υπερβολική αυτές τις μέρες και να φανεί λίγο βαρετό.
Κοιτάξτε μερικές ιστοσελίδες που έχουν καθορισμένα χρώματα στην βιτρίνα παραπάνω και δείτε πώς ξεχωρίζουν από άλλα μινιμαλιστικά σχέδια. Επίσης, σκεφτείτε πώς καταφέρνουν να παραμείνουν μινιμαλιστές ακόμη και με τόσο έντονη χρήση του χρώματος. Ακολουθεί ένα παράδειγμα:
Ενδιαφέρουσα τυπογραφία
Ο σχεδιασμός ιστοσελίδων βασισμένος στην τυπογραφία είναι στενά συνδεδεμένος με τον μινιμαλισμό.
Όταν οι σχεδιαστές δεν έχουν τίποτα άλλο να διεγείρουν τον χρήστη, συχνά αξιοποιούν την ενδιαφέρουσα τυπογραφία. Θα μπορούσατε ακόμη και να χρησιμοποιήσετε τη τυπογραφία ως μοναδικό οπτικό στοιχείο.
Αυτή είναι μια τολμηρή τεχνική, αλλά εξακολουθεί να αποτελεί μόνη τάση . Αναζητήστε τρόπους για να κάνετε την τυπογραφία να βελτιώσει το σχέδιο ενώ παραμένει μοναδικό.
Λάμψη
Ένας εκπληκτικός αριθμός μινιμαλιστικών σχεδίων ιστού βασίζεται στο Flash. Με τόσο λίγα για την οπτική διέγερση, ένας σχεδιασμός θα μπορούσε να επωφεληθεί από τη λεπτή κινούμενη εικόνα (όπως το ξεθώριασμα του κειμένου μέσα και έξω) χωρίς να είναι υπερβολικό.
Επίσης, το Flash αφαιρεί ορισμένους περιορισμούς στη διαδικασία σχεδιασμού. Τα ασυνήθιστα σύρματα, η τυπογραφία και άλλα στοιχεία μπορούν να επιτευχθούν ευκολότερα με το Flash παρά με παραδοσιακές μεθόδους.
Τυλίγοντας
Ο μινιμαλιστικός σχεδιασμός έρχεται σε πολλές μορφές, και όμως συχνά βλέπουμε την ίδια μορφή να επαναλαμβάνεται. Οι τάσεις μπορούν να γίνουν υπερβολικές και πρέπει να καταπολεμήσουμε την παρόρμηση να μιμηθούμε κατανοώντας τι πρόκειται για μια τάση που έχει νόημα.
Σε κάθε περίπτωση, ο μινιμαλισμός μπορεί να είναι όμορφος και θα είναι γύρω για τα επόμενα χρόνια, οπότε η εκμάθηση μερικών από τις τεχνικές του μπορεί να είναι απίστευτα ευεργετική, είτε για τους πελάτες σας είτε για τα δικά σας έργα.
Και ακόμα κι αν δεν ενδιαφέρεστε για το μινιμαλιστικό ύφος, τα διδάγματα και οι αρχές που εμπλέκονται μπορούν να σας βοηθήσουν να απλοποιήσετε τα σχέδιά σας, κάτι που είναι πάντα καλό.
Γράφτηκε αποκλειστικά για το Webdesigner Depot από την Kayla Knight.
Έτσι, τι κάνει τον μινιμαλιστικό σχεδιασμό τόσο αποτελεσματικό και πότε πρέπει να το αποφύγουμε; Παρακαλώ μοιραστείτε τα σχόλιά σας παρακάτω ...