WEB DESIGN Ο σχεδιασμός στο Web Design

Transcript

1 WEB DESIGN Ο σχεδιασμός στο Web Design ΠΑΤΣΙΑΛΟΥ ΚΩΝΣΤΑΝΤΙΝΑ

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

3 Ομάδα Παραγωγής Ομάδα Περιεχομένου - Συλλογής Στοιχείων Ομάδα Ηλεκτρονικής Υλοποίησης - Σχεδιασμού Ομάδα Προγραμματισμού - Τεχνικής Ανάπτυξης Για τη δημιουργία μίας ιστοσελίδας είναι απαραίτητη: η συλλογή στοιχείων, ο σχεδιασμός και η υλοποίηση. Εκτός, λοιπόν, από το πρώτο και το τρίτο κομμάτι, ένα εξίσου βασικό στοιχείο είναι ο σχεδιασμός.

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

5 Σχεδιασμός Έχοντας συλλέξει το υλικό-περιεχόμενο θα γνωρίζετε αν έχετε πολύ κείμενο ή/και εικόνες. Απαραίτητο είναι να ομαδοποιήσετε το υλικό. Αυτό θα σας οδηγήσει στο να ξέρετε αν έχετε πολλές κατηγορίες- menu, υποκατηγορίες κ.λπ. Στη συνέχεια μπορείτε να ψάξετε σε ιστοσελίδες που προωθούν templates, όπως Joomla, Wordpress κ.ά. Ωστόσο υπάρχουν δωρεάν πρότυπα, συνήθως με περιορισμένες δυνατότητες.

6 Σχεδιασμός Χαρακτηριστικά μιας επιτυχημένης ιστοσελίδας Οργανωμένη πλοήγηση Συνέπεια - συνοχή μεταξύ των σελίδων Απλότητα - Αισθητική Σωστή επιλογή χρωμάτων - γραμματοσειρών

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

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

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

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

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

12 Σχεδιασμός/Επιλογή χρωμάτων/χρωματικοί Συνδυασμοί Η Adobe διαθέτει τον Kuler ( έναν online διαδραστικό χρωματικό κύκλο, με τον οποίο μπορούν να δημιουργηθούν χρωματικές παλέτες με διάφορους τρόπους: Ορίζοντας ένα χρώμα ως αρχικό και επιλέγοντας χρωματικό σχήμα (π.χ. αναλογικό, μονοχρωματικό, τριαδικό, συμπληρωματικό) και τον αριθμό των χρωμάτων. Επιλέγοντας χρώματα από μία φωτογραφία. Χρησιμοποιώντας παλέτες που έχουν δημιουργήσει άλλοι χρήστες της εφαρμογής. Αξιόλογο εργαλείο είναι, επίσης, το Color Scheme Designer ( όπου δίνεται η δυνατότητα να παρουσιαστούν τα χρώματα κάθε παλέτας (που επιλέγεται από το σχεδιαστή) σε προεπισκόπηση, για κάθε περίπτωση αχρωματοψίας.

13 Σχεδιασμός/Επιλογή χρωμάτων/χρωματικοί Συνδυασμοί Παράδειγμα αναλογικού χρωματικού σχήματος:

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

15 Σχεδιασμός/Επιλογή χρωμάτων/αναγνωσιμότητα Όταν δύο ή περισσότερες αποχρώσεις χρησιμοποιούνται μαζί, η αντίθεση στη φωτεινότητα (όχι η χροιά και ο κορεσμός) είναι αυτή που καθορίζει τη δυνατότητα ανάγνωσης ενός κειμένου. Υπάρχουν διαδικτυακά εργαλεία, όπως το Color Contrast Comparison ( τα οποία επιτρέπουν τον έλεγχο της αναγνωσιμότητας των κειμένων σε σχέση με το φόντο, εισάγοντας την δεκαεξαδική τιμή των χρωμάτων. Έλεγχος μεταξύ των χρωμάτων #202FFF (μπλε) και #FF0000 (κόκκινο)

16 Σχεδιασμός/Επιλογή γραμματοσειράς Πολλές φορές χρησιμοποιείται μεγάλος αριθμός γραμματοσειρών που (όπως και στην περίπτωση των χρωμάτων) μοιάζει σα να έχει παρασυρθεί ο σχεδιαστής από τις πολλές δυνατότητες που του δίνονται. Με τον όρο ΟΙΚΟΓΕΝΕΙΑ ΓΡΑΜΜΑΤΩΝ εννοούμε μια σειρά τυπογραφικών στοιχείων, τα οποία ανεξαρτήτως μεγέθους και τύπου, είναι σχεδιασμένα με ανάλογους κανόνες και έχουν κοινά μορφολογικά χαρακτηριστικά (π.χ. Arial, Times New Roman). Υπάρχουν διάφοροι ΤΥΠΟΙ ΓΡΑΜΜΑΤΩΝ ανάλογα με την κλίση, το πάχος και το πλάτος. Arial Arial Italic Arial Bold Arial Bold Italic Arial Condensed Arial Condensed Italic

17 Σχεδιασμός/Επιλογή γραμματοσειράς ΓΡΑΜΜΑΤΟΣΕΙΡΑ ονομάζεται μια σειρά γραμμάτων, αριθμών και συμβόλων όπου όλα τα στοιχεία είναι μιας οικογένειας, ίδιου τύπου και ίδιου μεγέθους. Arial Bold Italic 20 στιγμών Θα πρέπει να είμαστε προσεκτικοί με τη χρήση γραμματοσειρών. Να χρησιμοποιούμε ένα σχετικά μικρό αριθμό και να υπάρχει συνέπεια ως προς τον τρόπο χρήσης (τίτλοι, υπότιτλοι, κείμενα, menu, κουμπιά κ.λπ.).

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

19 ΠΑΤΣΙΑΛΟΥ ΚΩΝΣΤΑΝΤΙΝΑ Εκπαιδευτικός ΠΕ18.26 Γραφιστικής