porcupine colors

Αρχική › Έργα › Μέγαρο Μουσικής Αθηνών Επικοινωνία »

Μέγαρο Μουσικής Αθηνών

Μέγαρο Μουσικής Αθηνών

Σχεδιασμός & ανάπτυξη για τον επίσημο διαδικτυακό τόπο του μεγαλύτερου Ελληνικού φορέα πολιτισμού

Μια νέα αρχή

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

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

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

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

Μέγαρο Μουσικής Αθηνών - Αρχική Σελίδα — Η Αρχική Σελίδα

Events στο Μέγαρο Μουσικής Αθηνών — Η σελίδα όλων των events

Event στο Μέγαρο Μουσικής Αθηνών — Η σελίδα του event

Events

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

Στο δεξί sidebar γίνεται ουσιαστικά το φιλτράρισμα των παραστάσεων με βάση:

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

Σελίδα Event

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

Άλλες σελίδες

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

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

Σελίδα χώρου — Σελίδα αίθουσας του Μέγαρου Μουσικής Αθηνών

Mobile design

Το νέο website για το Μέγαρο Μουσικής Αθηνών λύνει και μια σοβαρή μέχρι σήμερα παθογένεια: τη συμβατότητα με τις φορητές συσκευές. Στον νέο διαδικτυακό τόπο η εύκολη πρόσβαση από smartphones και tablets είναι προτεραιότητα. Επιπλέον, έχει γίνει ειδικό optimization στον κώδικα για τις φορητές συσκευές.

Mobile Design

Προσβασιμότητα

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

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

Προσβασιμότητα — Προσβασιμότητα στο διαδικτυακό τόπο του Μέγαρου Μουσικής Αθηνών

Χρωματικός κώδικας

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

Για τις παραστάσεις ειδικά, χρειαζόμαστε χρώματα κοινής φιλοσοφίας: όσο το δυνατό διαφορετικά μεταξύ τους αλλά εξίσου έντονα, καθώς δε θέλουμε να αδικηθεί μια κατηγορία event event σε σχέση με κάποια άλλη.
Φυσικά, το χρώμα του brand και ουσιαστικά του βασικού call to action θα πρέπει να είναι πολύ χαρακτηριστικό.
Τέλος, τα δευτερεύοντα χρώματα θα πρέπει να μπορούν να υποστηρίξουν τα υπόλοιπα αρμονικά.

hsla; Γιατί hsla;

Τα χρώματα ορίστικαν σε όλο τον διαδικτυακό τόπο με τη μέθοδο hsla. Αυτός ο τρόπος επιτρέπει:

κοντινό κι εύκολα ελεγχόμενο κορεσμό (saturation) και φωτεινότητα (lightness) στα χρώματα
καλύτερη ισορροπία στο χρωματικό φάσμα
γρήγορη και σωστά διαχειρίσιμη διαφάνεια όπου απαιτούνταν

Βασικά χρώματα

Brand
hsla(9, 100%, 65%, 1.00)

Χρώμα κειμένου
hsla(113, 0%, 10%, 1.00)

Δευτερεύοντα χρώματα

Βασικό
hsla(109, 100%, 100%, 1.00)

Δευτερεύον
hsla(32, 52%, 97%, 1.00)

Τριτεύον
hsla(113, 0%, 53%, 1.00)

Events

Χορός
hsla(175, 75%, 50%, 1.00)

Μουσική
hsla(46, 100%, 50%, 1.00)

Όπερα
hsla(295, 75%, 50%, 1.00)

Εκθέσεις
hsla(262, 75%, 50%, 1.00)

Εκπαίδευση
hsla(198, 85%, 60%, 1.00)

Θέατρο
hsla(81, 54%, 50%, 1.00)

Διαλέξεις
hsla(3, 92%, 50%, 1.00)

Συνέδρια
hsla(3, 92%, 50%, 1.00)

Τυπογραφία

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

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

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

⟷

Τυπογραφία για το Μέγαρο Μουσικής Αθηνών — Τυπογραφία στη σελίδα παρουσίασης του event

Τυπογραφία για το Μέγαρο Μουσικής Αθηνών — Τυπογραφία σε ειδικές περιοχές του website

Τυπογραφία για το Μέγαρο Μουσικής Αθηνών — Τυπογραφία στη σελίδα παρουσίασης του event

Τυπογραφία για το Μέγαρο Μουσικής Αθηνών — Τυπογραφία στη σελίδα παρουσίασης του event

Τυπογραφία για το Μέγαρο Μουσικής Αθηνών — Trump Soft Pro & PF Square Sans Pro

Τυπογραφία για το Μέγαρο Μουσικής Αθηνών — PF Centro Sans Pro

Τυπογραφία για το Μέγαρο Μουσικής Αθηνών — Lato

Τυπογραφία για το Μέγαρο Μουσικής Αθηνών — Gotham Narrow

Τυπογραφία για το Μέγαρο Μουσικής Αθηνών — PF Beau Sans Pro

Τυπογραφία για το Μέγαρο Μουσικής Αθηνών — Open Sans

Τυπογραφία για το Μέγαρο Μουσικής Αθηνών — Roboto

Τυπογραφία για το Μέγαρο Μουσικής Αθηνών — Noto Sans

Τυπογραφία για το Μέγαρο Μουσικής Αθηνών — PF Square Sans Pro

Κώδικας HTML & CSS

Η λογική πίσω από τον κώδικα των HTML & CSS ήταν να δημιουργηθεί ένα κατανοητό κι ευέλικτο mini framework, το οποίο να εξυπηρετεί τις υπάρχουσες ανάγκες και να μπορεί εύκολα να καλύψει νέες.

Δημιουργήθηκαν περίπου 10 μοναδικά templates σελίδων, τα οποία μοιράζονται κοινό κώδικα σε header, πλοήγηση και footer. Ο κώδικας είναι HTML5 κι έχει γραφτεί ειδικά για τα templates αυτά.

Για το CSS, παράχθηκε μια σειρά διαφορετικών αρχείων .scss, βάση της γλώσσας SASS, τα οποία μοιράζονται κοινές μεταβλητές, nested rules και mixins κ.α. και που στο τέλος παράγουν το μοναδικό αρχείο .css που χρησιμοποιείται.

Το design που δεν τα κατάφερε

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

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

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

Μέγαρο Μουσικής Αθηνών - Εναλλακτική Αρχική Σελίδα — Η εναλλακτική Αρχική Σελίδα για το Μέγαρο Μουσικής Αθηνών

Η ομάδα - Τι κάναμε για το Μέγαρο Μουσικής Αθηνών

User Interface Design
Ανάπτυξη ΗTML & CSS κώδικα
Project Management: Scicada
Web Development: Joinweb
Πλατφόρμα: WordPress
Γλώσσες: Ελληνικά, Αγγλικά
Επισκεφθείτε το Μέγαρο Μουσικής Αθηνών: megaron.gr

Όλα τα Case Studies

Case Studies

Σας άρεσε η δουλειά μου;

Επικοινωνηστε μαζι μου

Δείτε ακόμα