Flat Design – Το επόμενο βήμα στην εξέλιξη του Web Design

Flat Design – Το επόμενο βήμα στην εξέλιξη του Web Design

To flat design δεν είναι τίποτα περισσότερο παρά η απλότητα του σχεδιασμού σε εφαρμογή. Το γεγονός ότι απλά σχήματα όπως τετράγωνα και κύκλοι προτιμούνται σε σχέση με κλίσεις και σκιές, δείχνει ότι η εικαστική τάση αυτές τις μέρες είναι υπέρ της απλότητας. Μια τέτοια περίπτωση είναι ο νέος σχεδιασμός του Windows Phone και των Windows 8 OS Metro UI - κατά πάσα πιθανότητα δεν είναι το καλύτερο παράδειγμα, αλλά σίγουρα είναι η πρώτη σημαντική εφαρμογή του επίπεδου σχεδιασμού στην πράξη.

Ωστόσο, ο επίπεδος σχεδιασμός δεν είναι ένα σχεδιαστικό κίνημα ή μία οντότητα από μόνος του. Στην πραγματικότητα, κάθε μινιμαλιστής σχεδιαστής θα σας πει ότι δεν υπάρχει κάτι τέτοιο όπως το "flat design". Είναι απλά minimal design, με μια επίπεδη εμφάνιση και αίσθηση.

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

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

flat-icons-shapes

 

Η αξία του "Flat" στο Web Design

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

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

Tι έχει να προσφέρει πραγματικά λοιπόν ο επίπεδος σχεδιασμός;

 

Η Σημασία της Απλότητας

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

Η απλότητα σε συνδυασμό με το μινιμαλισμό, βελτιώνουν σημαντικά την πτυχή της αναγνωσιμότητας, τόσο στο κινητό όσο και στις οθόνες desktop. Αυτός είναι ακριβώς ο λόγος που ακόμη και ιστοσελίδες κοινωνικής δικτύωσης όπως το Facebook και το Google+ κινείται προς την κατεύθυνση του flat design - η χρήση του flat design ως κατά ελάχιστο εξασφαλίζει τόσο την αναγνωσιμότητα και τη σαφήνεια.

facebook-flat

 

 

Το τέλος του Skeuomorphism!

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

Για παράδειγμα πάρτε την υπόθεση του iOS. Η νεότερη έκδοση του iOS φαίνεται να ευνοοεί τον επίπεδο σχεδιασμού. Έχει απομακρυνθεί από τον skeuomorphism που χρησιμοποιήθηκε στις προηγούμενες εκδόσεις του. Ως αποτέλεσμα, οι 2D εικόνες έχουν αντικαταστήσει τις 3D εικόνες που υπήρχαν σε προηγούμενες εκδόσεις του iOS. Κλίσεις, υφές, κάδρα κλπ., όλα χάθηκαν!

apple-flat

 

Χρώματα και Τυπογραφία

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

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

Τα degrade χρώματα έχουν τελειώσει...Πλέον, τα απλά χρώματα μπορούν να προσφέρουν ένα επιπλέον πλεονέκτημα: είναι πραγματικά εύκολο να αντιπαραβάλλουν (contrast) με άλλα χρώματα. Μια καλή πηγή για να σας βοηθήσει να δοκιμάσετε τα χρώματα σε στυλ επίπεδου σχεδιασμού, είναι το "Flat UI Colors".

 

Μινιμαλισμός, όπου το..."Less is More"

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

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