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

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

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

Η εκλαΐκευση του επίπεδου στυλ στο σχεδιασμό διευκολύνθηκε από την κυκλοφορία του λειτουργικού συστήματος Windows 8 από τη Microsoft σε στυλ Metro, καθώς και του iOS 7, στο οποίο η Apple επιλέγει επίσης ένα επίπεδο στυλ. Μετά από αυτό ξεκινά η πραγματική εποχή του flat design. Σύντομα, μεγάλες υπηρεσίες αναζήτησης και εφαρμογές - Google, Youtube - αλλάζουν σε Flat-design· εμφανίζονται πολλοί ιστότοποι που χρησιμοποιούν τις αρχές του flat style στο σχεδιασμό τους. Τα τελευταία χρόνια, η επίπεδη σχεδίαση κατέχει ηγετική θέση στις παγκόσμιες τάσεις σχεδιασμού ιστοσελίδων.

Οφέλη από επίπεδη σχεδίαση

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

5 αρχές σχεδιασμού επίπεδης ιστοσελίδας

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

1 - Χρήση αντικειμένων 2D

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

2 - Εικονίδια και απλά αντικείμενα

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

3 - Απλές γραμματοσειρές στο στυλ σχεδίασης

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

4 - Παιχνίδι χρωμάτων

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

5 - Μινιμαλισμός

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

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

Παραδείγματα επίπεδων σχεδίων

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

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

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

Μπορείτε να βρείτε καλά παραδείγματα επίπεδης σχεδίασης στη διεύθυνση http://market.envato.com/. Υπάρχουν τόνοι διατάξεων, εικονιδίων και προτύπων που θα σας δώσουν μια ξεκάθαρη κατανόηση του πώς μοιάζει το μοντέρνο σχέδιο .

1. Τι είναι το επίπεδο σχέδιο;

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

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

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

2. Λίγη ιστορία

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

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

Το 2010 Η Microsoft κυκλοφόρησε το Windows Phone 7, το οποίο χρησιμοποιούσε επίπεδη σχεδίαση με αιχμηρές άκρες και απλά γραφικά που κληρονομήθηκαν από ένα από τα προηγούμενα προϊόντα της. Microsoft (Zune). Αργότερα, εμπνευσμένη από την επιτυχία, η Microsoft κυκλοφόρησε το λειτουργικό σύστημα Windows 8 βασισμένο στο ίδιο επίπεδο στυλ Metro.

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

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

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

Έτσι, υπάρχουν τρία παγκόσμια παραδείγματα επίπεδης σχεδίασης από εταιρείες χωρίς τα οποία είναι δύσκολο να φανταστεί κανείς τον σύγχρονο κόσμο της τεχνολογίας:

Σχεδιασμός Metro της Microsoft

Σχεδιασμός Apple iOS 7

Υλικό Σχεδιασμός της Google

3. Θυμηθείτε να είστε καθαροί

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

Επιπλέον, σε επίπεδο σχέδιο, τα αντικείμενα απεικονίζονται με πολύ απλοποιημένο και στυλιζαρισμένο τρόπο.

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

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

4. Φέρτε το στην τελειότητα

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

Το Adobe Photoshop είναι σαφές εδώ: λειτουργεί με γραφικά ράστερ, τα οποία βασίζονται σε pixel.

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

Μια φορά κι έναν καιρό, το Adobe Illustrator δεν ήταν ένα ιδιαίτερα βολικό πρόγραμμα για τη δημιουργία γραφικών τέλεια pixel. Τα καλά νέα είναι ότι οι τελευταίες εκδόσεις του Illustrator έχουν γίνει ένα εξαιρετικό εργαλείο για τη δημιουργία καλών γραφικών.

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

5. Χρώμα

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

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

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

Μερικά από αυτά είναι κατάλληλα για όλους τους τύπους σχεδίασης και εικονογράφησης, όχι μόνο για επίπεδη σχεδίαση. Για παράδειγμα, το Adobe Color CC, πιο γνωστό ως Cooler. Σήμερα υπάρχει πρόσβαση σε αυτό, τόσο μέσω της ιστοσελίδας όσο και απευθείας μέσω των προϊόντων της Adobe. Το Cooler είναι ένα πολύ ευέλικτο εργαλείο που σας επιτρέπει είτε να δημιουργήσετε τη δική σας παλέτα χρωμάτων είτε να επιλέξετε από μια προσαρμοσμένη παλέτα από μια βιβλιοθήκη.

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

Υπάρχουν πολλές άλλες παρόμοιες υπηρεσίες με προσαρμοσμένες παλέτες που μπορεί να είναι χρήσιμες. Ωστόσο, υπάρχει ένα εργαλείο που δημιουργήθηκε ειδικά για επίπεδη σχεδίαση: FlatUIColors.com από την Designmodo - μια υπηρεσία με ένα σύνολο «επίπεδων» χρωμάτων, πολύ βολικό για εργασία. Αυτός ο ιστότοπος έχει γίνει πολύ δημοφιλής μεταξύ των σχεδιαστών που αναζητούν καλές λύσεις χρώματος για τέλειο σχέδιο. Δοκίμασέ το!

Και μπορείτε επίσης να βρείτε μεγαλύτερη ποικιλία χρωμάτων και παλετών Οδηγός Σχεδιασμού Υλικού της Google.

6. Μακριές σκιές

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

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

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

7. Εργασία με γραμματοσειρές

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

Τα επίπεδα σχέδια χρησιμοποιούν συνήθως απλά στυλ γραμματοσειράς, καθιστώντας ολόκληρο το σχέδιο καθαρό και ευανάγνωστο. Μπορείτε να βρείτε πολλές δωρεάν γραμματοσειρές στο Adobe Typekit εάν χρησιμοποιείτε προϊόντα της Adobe. Θα βρείτε επίσης πολλές καλές δωρεάν γραμματοσειρές στο Font Squirrel. Αλλά μην ξεχάσετε να διαβάσετε την άδεια εάν σκοπεύετε να χρησιμοποιήσετε τη γραμματοσειρά για εμπορικούς σκοπούς.

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

Χρησιμοποιήστε τις γραμματοσειρές με φειδώ, να θυμάστε ότι θα πρέπει να συμπληρώνουν και να συμπληρώνουν το σχέδιο αντί να εμφανίζονται ως ξεχωριστό στοιχείο. Αυτό δεν σημαίνει ότι δεν μπορείτε να χρησιμοποιήσετε σύνθετες γραμματοσειρές serif ή χειρόγραφες. Απλά θυμηθείτε να είστε minimal και να κρατάτε τα πάντα σε ισορροπία. Ωστόσο, το flat εξακολουθεί να χρησιμοποιεί συχνά γραμματοσειρές sans-serif, καθώς φαίνονται πιο αυστηρές και προσεγμένες.

8. Πλεονεκτήματα και μειονεκτήματα του Flat design

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

πλεονεκτήματα

Δημοτικότητα

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

Απλότητα

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

Λάμψη

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

Ελαττώματα

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

Μη ανταπόκριση

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

Προβλήματα με την τυπογραφία

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

Αδύναμα οπτικά

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

9. Μελλοντικές τάσεις επίπεδης σχεδίασης

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

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

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

Έτσι, το flat δεν χάνει τα χαρακτηριστικά του, αλλά γίνεται πιο ενδιαφέρον και ευέλικτο- Πραγματικά γίνεται καλύτερα.

συμπεράσματα

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

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

Τελικά, τι άλλο να αναφέρουμε για το flat design;

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

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

Από τον συγγραφέα:Χαιρετισμούς, φίλοι! Σήμερα θα μιλήσουμε για το τι είναι επίπεδη σχεδίαση ή επίπεδη σχεδίαση ιστότοπου. Αυτός ο όρος έχει κερδίσει εδώ και καιρό τις καρδιές των σχεδιαστών ιστοσελίδων και εξακολουθεί να είναι με αυτοπεποίθηση τάση σήμερα. Οι μεγαλύτερες εταιρείες (Google, YouTube, Microsoft, Apple Inc., κ.λπ.) το χρησιμοποιούν για να σχεδιάσουν τις ιστοσελίδες και τις εφαρμογές τους. Δεν είστε ακόμα στην αίρεση των επίπεδων υποστηρικτών του σχεδιασμού ιστοσελίδων; Τότε πάμε σε εσάς!

Ποιος πιστεύετε ότι είναι ο λόγος για μια τέτοια άγρια ​​δημοτικότητα του flat design; Θα σου απαντήσω με λίγα λόγια: λειτουργεί πραγματικά! Σε αυτό το άρθρο, θα σας εξηγήσω τι είναι αυτό το στυλ, θα σας πω για τα πλεονεκτήματα και τα μειονεκτήματά του και θα σας δείξω μερικά εξαιρετικά παραδείγματα επίπεδης σχεδίασης ιστότοπου που σίγουρα θα σας εμπνεύσουν να κάνετε σπουδαία πράγματα. Λοιπόν πάμε!

Όλα ξεκίνησαν με σκευομορφισμό

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

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

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

«Το καλύτερο σχέδιο είναι όσο το δυνατόν λιγότερο σχέδιο»

Πώς κοίταξε ο Dieter Rams στο νερό - ένας διάσημος βιομηχανικός σχεδιαστής που αντιτίθεται στον παρεμβατικό σχεδιασμό, τα εφέ κινούμενων σχεδίων κ.λπ. Τον Ιούνιο του 2013, η Apple Inc. παρουσίασε το επαναστατικό iOS 7, το οποίο έλαβε όλα τα χαρακτηριστικά ενός επίπεδου στυλ σχεδίασης ιστοσελίδων. Ωστόσο, το αεροπλάνο δεν «νίκησε» αμέσως τον ρεαλισμό και τον όγκο.

Για πολύ καιρό, οι χρήστες δεν μπορούσαν να ξεχάσουν τη μαγεία του Steve Jobs και τα εικονίδια «που θέλετε να γλείψετε». Πολλοί αποχαιρέτησαν ακόμη και τους «φτωχούς επτά» και άλλαξαν στο «ακτινοβόλο Android». Λάδι στη φωτιά ήταν ο μεγάλος αριθμός σφαλμάτων που υπήρχαν στο iOS 7 και η υπόλευκη, ημιδιαφανής σχεδίαση με παράλλαξη και κινούμενα σχέδια "μύξας" κατά το άνοιγμα εφαρμογών.

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

Πλεονεκτήματα και μειονεκτήματα της επίπεδης σχεδίασης

Τα πλεονεκτήματα της χρήσης αυτού του στυλ περιλαμβάνουν:

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

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

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

Η επίπεδη σχεδίαση ιστοσελίδων έχει επίσης τα μειονεκτήματά της:

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

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

έλλειψη συγκεκριμένων σταθερών κανόνων.

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

Ξεχάστε τους "τουβλότοιχους" και τα φωτεινά φόντο. Η επίπεδη σχεδίαση ιστοσελίδων τείνει να χρησιμοποιεί απλές, ομαλές, απαλές εικόνες για το φόντο.

Σύγχρονες τάσεις και προσεγγίσεις στην ανάπτυξη ιστοσελίδων

Μάθετε τον αλγόριθμο για γρήγορη ανάπτυξη από την αρχή στη δημιουργία ιστοσελίδων

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

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

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

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

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

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

Έτσι, με τα χρόνια, οι επίπεδες ιστοσελίδες έχουν γίνει το πρότυπο αποδεκτό από όλους. Κοιτάξτε τις περισσότερες σύγχρονες ιστοσελίδες - είναι επίπεδες μέχρι τον πυρήνα.

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

1. Ιστότοπος http://dunked.com.

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

2. Διεπαφή Microsoft.

Η Microsoft είναι μια από τις εταιρείες που έκαναν το flat style τόσο δημοφιλές. Ίσως θυμάστε το Zune player, έναν ανταγωνιστή του iPod, το οποίο κυκλοφόρησε η Microsoft στα μέσα της δεκαετίας του 2000; Έτσι, ο σχεδιασμός αυτού του προϊόντος ήταν πολύ διαφορετικός από τις περισσότερες εφαρμογές εκείνης της εποχής, σε μεγάλο βαθμό λόγω της μεγάλης τυπογραφίας, των επίπεδων εικονιδίων, των μεγάλων και φωτεινών σχημάτων.

Αυτή η διεπαφή, η οποία ονομάστηκε Metro, μεταφέρθηκε αργότερα σε προσωπικούς υπολογιστές (Windows 8 OS), στη διεπαφή Xbox 360 και σε άλλα προϊόντα λογισμικού της Mircosoft.

3. Ιστότοπος http://www.vox.com.

Λοιπόν, εμπνέεσαι; Κάτω η ψευδορεαλιστική τρισδιάστατη αισθητική!

Αυτό είναι όλο. Εγγραφείτε και μοιραστείτε τα άρθρα μας με φίλους στα κοινωνικά δίκτυα. Υψηλές μετατροπές σε εσάς!

Σύγχρονες τάσεις και προσεγγίσεις στην ανάπτυξη ιστοσελίδων

Μάθετε τον αλγόριθμο για γρήγορη ανάπτυξη από την αρχή στη δημιουργία ιστοσελίδων

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

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

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

Οι άνθρωποι άρχισαν να μιλάνε για flat design το 2012-2013, όταν πρωτοεμφανίστηκε αυτό το στυλ. Η τάση ήταν πολύ αισθητή και προκάλεσε πολύ θόρυβο, αφού η Microsoft ήταν από τις πρώτες που ανέπτυξαν αυτήν την κατεύθυνση. Η κυκλοφορία των Windows 8 με νέα διεπαφή άλλαξε για πάντα τη σχεδίαση και προκαθόρισε σε μεγάλο βαθμό το διάνυσμα ανάπτυξης του ιστού, τουλάχιστον το οπτικό του στοιχείο.

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

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

Είναι πολύ πιθανό η τάση προς την ακραία απλούστευση που κυριαρχεί τα τελευταία χρόνια να αντικατασταθεί από κάτι άλλο. Υπάρχουν ορισμένες προϋποθέσεις για αυτό - για παράδειγμα, η κατεύθυνση του Material Design, που δημιουργήθηκε από σχεδιαστές της Google.

ΣΥΜΒΑΤΟ ΜΕ ΠΡΟΣΑΡΜΟΣΤΙΚΟ ΣΧΕΔΙΟ

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

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

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

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

ΕΥΕΛΙΚΤΗ ΠΛΑΤΦΟΡΜΑ

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

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

ΑΝΑΓΝΩΣΤΗ ΤΥΠΟΓΡΑΦΙΑ

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

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

ΜΕΙΟΝ

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

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

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

ΑΠΩΛΕΙΑ ΤΗΣ ΑΤΟΜΙΚΟΤΗΤΑΣ

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

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

Μερικές φορές γίνεται αστείο. Βλέποντας αυτές τις εικόνες, μπορεί να σκεφτείτε ότι εξετάζουμε διαφορετικές ενότητες της ίδιας εφαρμογής. Αλλά όχι, οι σχεδιαστές Marco La Mantia και Simone Lippolis εργάστηκαν ανεξάρτητα ο ένας από τον άλλο. Ως κύρια στοιχεία σχεδίασης χρησιμοποιούνται βασικά γεωμετρικά σχήματα και μια λευκή γραμματοσειρά sans-serif - μια παραπάνω από λογική απόφαση. Αλλά το αποτέλεσμα είναι καταστροφικό - ο ίδιος συνδυασμός χρωμάτων στέρησε εντελώς το σχέδιο από τη μοναδικότητά του. Και υπάρχουν πολλές τέτοιες περιπτώσεις.

ΚΥΝΗΓΟΥΜΕ ΜΟΔΑ

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

Ωστόσο, στην επιδίωξη της μόδας, μπορείτε να κάνετε ένα σοβαρό λάθος: εάν ακολουθείτε αμελώς όλες τις τάσεις, είναι πολύ πιθανό να ξεχάσετε τη χρησιμότητα του σχεδιασμού. Ένα διαμέρισμα μπορεί να είναι πολύ όμορφο, κομψό και ακόμη και χαριτωμένο, αλλά η επιλογή του σχεδιαστή πρέπει να καθορίζεται από τη λειτουργικότητα και όχι από την επιθυμία για ομορφιά. Μερικές φορές η επιθυμία να «χωθεί» κάτι μοντέρνο σε ένα σχέδιο βλάπτει μόνο αυτό, για παράδειγμα, τις μακριές σκιές, ένα από τα πιο αναγνωρίσιμα χαρακτηριστικά του επίπεδου σχεδιασμού.

Μπροστά μας βρίσκονται τα έργα των σχεδιαστών Alexander Lototsky και Erik Malmskeld. Αυτά είναι χαρακτηριστικά παραδείγματα χρήσης μακριών σκιών στο σχεδιασμό. Τώρα αυτό δεν θα εκπλήξει κανέναν, αλλά κάποτε, και τα δύο έργα δημιουργήθηκαν το 2013, όταν το επίπεδο σχέδιο μόλις ερχόταν στη μόδα, το νέο οπτικό στυλ ήταν πολύ ενδιαφέρον και ελκυστικό. Ως αποτέλεσμα, εμφανίστηκαν τόσα πολλά παρόμοια εικονίδια που σήμερα η χρήση σκιών είναι μια τυπική και μη ενδιαφέρουσα λύση. Κάποτε ήταν της μόδας, αλλά όχι πια. Οι σκιές είναι σαν τις σκιές. Δεν υπάρχει κανένα νόημα σε αυτά, δεν επιτελούν καμία χρήσιμη λειτουργία.

ΚΑΚΗ ΕΠΙΛΟΓΗ ΓΡΑΜΤΟΣΤΑΣΕΩΝ

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

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

FLAT 2.0

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

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

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

Η Google έχει κάνει πολλά για την προώθηση του Flat 2.0. Το Material Design Guideline είναι μια προσπάθεια δημιουργίας μιας νέας οπτικής γλώσσας που συνδυάζει επίπεδα και τρισδιάστατα σχεδιαστικά στοιχεία. Οι προτάσεις της Google είναι πολύ λεπτομερείς και εύκολο να ακολουθηθούν. Ταυτόχρονα, η Google δεν επιμένει στην αυστηρή τήρηση όλων των κανόνων που ορίζονται στην οδηγία - οι σχεδιαστές μπορούν να πειραματιστούν, δημιουργώντας τα δικά τους πρωτότυπα έργα, τα οποία μπορούν να συνδυάσουν μια ποικιλία στοιχείων.

ΣΥΜΠΕΡΑΣΜΑ

Σήμερα το Flat 2.0 βρίσκεται στο στάδιο του σχηματισμού, αλλά η κατεύθυνση προς την οποία θα αναπτυχθεί αυτό το στυλ είναι ήδη αρκετά σαφής. Δεν αναμένονται σημαντικές αλλαγές - η Google, η Apple και η Microsoft δεν πρόκειται να εγκαταλείψουν τις τάσεις. Εάν υπάρξουν αλλαγές, θα είναι ασήμαντες - θα εμφανιστούν νέες προσεγγίσεις, κάποιος θα βρει ένα ενδιαφέρον «κόλπο», οι προσπάθειες θα συνεχίσουν να αξιοποιούν το καλύτερο από τον σκευομορφισμό. Αλλά σε παγκόσμια έννοια, δεν χρειάζεται να περιμένουμε κάτι πραγματικά νέο - η επίπεδη σχεδίαση είναι μια μακροπρόθεσμη τάση και μόνο ένα στυλ που ταιριάζει καλύτερα στις νέες τεχνολογίες που δεν υπάρχουν ακόμη μπορεί να το εκτοπίσει από τις κατακτημένες θέσεις του.

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

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

Σήμερα, όλο και περισσότεροι σχεδιαστές χρησιμοποιούν αυτήν την τάση στη δουλειά τους, αλλά το Flat style έχει αποκτήσει ιδιαίτερη δημοτικότητα με την εξάπλωση των σύγχρονων λειτουργικών συστημάτων για κινητά Windows Phone και iOS 7, καθώς είναι οπαδοί αυτής της τάσης, αν και δεν τηρούν το εντελώς.

Η εταιρεία μας έχει ήδη εμπειρία στη δημιουργία ιστοσελίδων σε στυλ Flat και θα χαρούμε να σας βοηθήσουμε να δημιουργήσετε μια επίπεδη ιστοσελίδα!

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

Παρακάτω θα αναλύσουμε και θα δώσουμε παραδείγματα ορισμένων τοποθεσιών που χρησιμοποιούν επίπεδο στυλ.

1. Καταργήστε όλα τα εφέ

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

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

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

2. Χρησιμοποιήστε απλά στοιχεία

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

3. Ας επικεντρωθούμε στην τυπογραφία

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

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

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

4. Ας τραβήξουμε την προσοχή με το χρώμα

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

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

5. Μινιμαλισμός

Η επίπεδη σχεδίαση είναι απλή στη φύση και ταιριάζει καλά με μια μινιμαλιστική προσέγγιση.

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

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