Η παρουσίαση φορτώνεται. Παρακαλείστε να περιμένετε

Η παρουσίαση φορτώνεται. Παρακαλείστε να περιμένετε

Οπτική Σχεδίαση στο Διαδίκτυο

Παρόμοιες παρουσιάσεις


Παρουσίαση με θέμα: "Οπτική Σχεδίαση στο Διαδίκτυο"— Μεταγράφημα παρουσίασης:

1 Οπτική Σχεδίαση στο Διαδίκτυο
ΤΕΧΝΟΛΟΓΙΚΟ ΕΚΠΑΙΔΕΥΤΙΚΟ ΙΔΡΥΜΑ ΜΕΣΟΛΟΓΓΙΟΥ ΣΧΟΛΗ ΔΙΟΙΚΗΣΗΣ ΟΙΚΟΝΟΜΙΑΣ ΤΜΗΜΑ ΕΦΑΡΜΟΓΩΝ ΠΛΗΡΟΦΟΡΙΚΗΣ ΣΤΗ ΔΙΟΙΚΗΣΗ ΚΑΙ ΤΗΝ ΟΙΚΟΝΟΜΙΑ Οπτική Σχεδίαση στο Διαδίκτυο ΕΠΙΜΕΛΕΙΑ Καραφωτιά Νικολίτσα Βέτσου Ευανθία

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

3 Τρόποι επικοινωνίας Στη καθημερινή επικοινωνία με τους συνανθρώπους μας επικοινωνούμε διαμέσου: Το web έχει τη δική του σειρά σημάτων: Γλώσσας Πολιτισμός Χειρονομιών Εικόνες Εκφράσεις προσώπου Πράξεις Τονισμός Σιωπή Διάστημα Αδράνεια Εικόνα Κείμενο Οργάνωση Κίνηση Ήχος

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

5 Παραδείγματα χρωματικών μεταβολών στην ίδια ιστοσελίδα!
Τα χρώματα είναι ίδια με τα φυσικά χρώματα των φρούτων Τα χρώματα είναι πιο ανοικτά από τα φυσικά χρώματα Τα χρώματα είναι πιο σκούρα από τα φυσικά χρώματα των φρούτων

6 Gamma Το Gamma είναι το κλειδί για την πλήρη κατανόηση της πρωταρχικής πηγής των χρωματικών μεταβολών στο διαδίκτυο Το Gamma είναι μια ποιοτική μέτρηση, όπως τα gigabytes, τα megahertz, τα bandwidth. Οι μετρήσεις του υπολογιστή σε gamma κυμαίνονται από 1.0 έως 3.0 το gamma περιγράφει μια βασική σχέση μεταξύ του ηλεκτρισμού και του τι παράγεται στην οθόνη του μόνιτορ. Η σχέση αυτή επηρεάζει τη φωτεινότητα και τη σκοτεινότητα των χρωμάτων καθώς και την αντίθεση στους μεσαίους τόνους της εικόνας το gamma πρέπει να διορθώνεται πλήρως από την προσθήκη μιας κάρτας βίντεο ή γραφικών για την καλύτερη επίδειξη των πραγματικών χρωμάτων και για ένα καλό εύρος ανοιχτών, μεσαίων και σκούρων τόνων

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

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

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

10 Δοκιμή 1 Η εικόνα παραπάνω περιέχει 7 ασφαλή χρώματα για τον Ιστό. Κάθε ένα από αυτά τα χρώματα είναι ένα ξεχωριστό σκούρο χρώμα. Αν κάποιο από αυτά τα χρώματα εμφανιστεί το ίδιο μαύρο με την μαύρη οριζόντια λωρίδα στην βάση, τότε το σύστημα των υπολογιστών χρειάζεται πλήρη διόρθωση του gamma και/ή καλύτερη ποιότητα μόνιτορ.

11 Δοκιμή 2 Αυτή η δοκιμή θα επιβεβαιώσει αν ο υπολογιστής μπορεί να παράγει ένα καθαρό άσπρο pixel (εικονοκύτταρο). Τοποθετήστε ένα λευκό χαρτί κάθετα σε ένα κενό λευκό έγγραφο πάνω στην οθόνη του υπολογιστή, όπως φαίνεται στην εικόνα παρακάτω. Αν η οθόνη εμφανίσει ανοιχτό γκρι ή κάποιο άλλο ‘χλωμό’ χρώμα εκτός από άσπρο, τότε το σύστημα δεν μπορεί να δημιουργήσει ένα καθαρό άσπρο pixel. αυτό είναι μάλλον ένα σημάδι πως το gamma χρειάζεται πλήρη διόρθωση, ή πως το μόνιτορ είναι ανεπαρκές, ή πως και τα δυο είναι ελαττωματικά.

12 Προσιτά χρώματα Διαδικτύου
Web-safe colors (Ιστό- ασφαλή χρώματα): Υπάρχουν μόνο 216 χρώματα που είναι κοινά σε όλους τους υπολογιστές και τις μηχανές αναζήτησης. Unsafe colors (Μη ασφαλή χρώματα): Όλα τα υπόλοιπα χρώματα. Συνήθως είναι τα χρώματα που οι σχεδιαστές τα επιλέγουν βασισμένοι μόνο στην εμφάνιση. Ασφαλή μπλε (από την παλέτα των 216 χρωμάτων) Μη ασφαλή μπλε

13 Τα 216 χρώματα της ασφαλούς παλέτας για το web

14 Μορφές αρχείων για ακρίβεια χρωμάτων
Το GIF (Graphics Interchange Format) είναι κατάλληλο για γραμμικά σχέδια και καθαρά χρώματα. Το JPEG (Joint Photographic Expert Group) χρησιμοποιείτε καλύτερα για φωτογραφίες και γενικά εικόνες συνεχούς τόνου.

15 Χρωματική προσβασιμότητα και όραση
Το ηλικιωμένο μάτι Ολοένα και περισσότεροι είναι οι μεγαλύτερης ηλικίας χρήστες του internet. Αυτός ο πληθυσμός βλέπει τα χρώματα αρκετά διαφορετικά από τους νέους. Ο κερατοειδής χιτώνας αρχίζει να κιτρινίζει και να ‘σκουριάζει’ και τα κοντινά μήκη κύματος είναι επιλεκτικά μπλοκαρισμένα. Επιπλέον, λιγότερο φως φτάνει στους φωτοδέκτες. Αχρωματοψία Το μάτι που έχει αχρωματοψία είναι αναίσθητο σε ένα συγκεκριμένο εύρος χρώματος και βλέπει διαφορετικά χρώματα από τα κανονικά. Υπάρχουν πολλές μορφές αχρωματοψίας και πολλές παραλλαγές αλλά οι πιο συχνές περιπτώσεις μη ασφαλών χρωμάτων είναι: Κόκκινο Πράσινο

16 Παραδείγματα 1. Τα μπλε δείχνουν πιο σκούρα και τα χρώματα που έχουν ως βάση το μπλε μπορεί να διαχωρίζονται δύσκολα. Για παράδειγμα, το μπλε-πράσινο και το μπλε-γκρι μπορεί να φαίνονται παρόμοια. Το ηλικιωμένο μάτι μπορεί να δει 2. Όλα τα χρώματα εμφανίζονται πιο μουντά και σκούρα. Για παράδειγμα, ένα μέτριο φωτεινό κίτρινο μπορεί να φαίνεται καφετί και πιο θαμπό και όλα τα σκούρα χρώματα μπορεί να φαίνονται μαύρα. Το ηλικιωμένο μάτι μπορεί να δει

17 Μη ασφαλείς συνδυασμοί χρωμάτων (1/3)
1. Κόκκινο και πράσινο Κάποιος που έχει αχρωματοψία θα δει και τα δύο χρώματα γκρι 2. Γκρι πάνω σε κόκκινο ή πράσινο Αυτός που έχει αχρωματοψία θα δει

18 Μη ασφαλείς συνδυασμοί χρωμάτων (2/3)
3. Τα χρώματα σε κείμενο –σύνδεσμο πάνω σε χρωματιστό φόντο Αυτός που έχει αχρωματοψία θα δει 4. Χρωματιστό κείμενο πάνω σε κάθε φόντο με μίξη χρωμάτων Αυτός που έχει αχρωματοψία θα δει

19 Μη ασφαλείς συνδυασμοί χρωμάτων (3/3)
5. Συνδυασμούς με πολλές σκιές ενός χρώματος Αυτός που έχει αχρωματοψία θα δει

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

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

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

23 Παράδειγμα Ο Joe πληρώνει τον λογαριασμό, όμως δεν σχεδιάζετε την ιστοσελίδα για τον Joe. Την σχεδιάζετε για το κοινό του Joe. Το κοινό του Joe θέλει να το αγοράσει. Οι πελάτες του Joe θέλουν να κάνουν την δουλειά τους. Το κοινό του Joe θέλει να εξερευνήσει την ιστοσελίδα του Joe για να δει τι μπορεί να βρει. Ο Joe θέλει να πουλήσει το προϊόν του. Ο Joe θέλει να μειώσει το κόστος εισάγοντας υπηρεσίες online. Ο Joe θέλει να δώσει πληροφορίες. Βασικές διαφορές ανάμεσα στις απόψεις των πελατών και των αγοραστών μπορείτε να τις δείτε στα ρήματα: πουλώ/ αγοράζω, παρέχω/ εξερευνώ.

24 Δείγμα σεναρίου Προφίλ Όνομα: Amanda Sample Φύλο: Θηλυκό Ηλικία: 28 Κατοικία: μικρό, υπερτιμημένο διαμέρισμα στο Manhattan Χόμπι: Να ξεφυλλίζει περιοδικά μόδας, οι άντρες (φυσικά), το τοπικό θέατρο της Ν. Υόρκης και περιστασιακά το μαγείρεμα Λόγος που επισκέφτηκε το Williams- Sonoma: Θέλει να μαζέψει μία καλή συλλογή υψηλής ποιότητας είδη μαγειρικής που θα διαρκέσει πολλά χρόνια. Έχει βαρεθεί φτωχής ποιότητας σκεύη που πρέπει να αναπληρωθούν. Προσδοκία: Θέλει να δει προϊόντα οργανωμένα από υλικά και την τιμή κόστους τους και θέλει επίσης περιγραφή αυτών των υλικών, ιδιαίτερα της ανθεκτικότητάς τους. Ιδανικό αποτέλεσμα: Να μπορεί να συγκρίνει προϊόντα με τον τρόπο που αυτή διαλέγει και εύκολα να τα αγοράσει. Τα σενάρια είναι χρήσιμα για να δούμε μέσα από τα μάτια του χρήστη. Όταν μία απόφαση για ένα σχέδιο πρέπει να παρθεί πρέπει να αναρωτηθείτε ‘Πως θα περίμενε η Amanda να συμβεί αυτό;’ Όσο πιο συγκεκριμένο είναι ένα λεπτομερές σενάριο, τόσο πιο εύκολα θα απαντήσετε στην ερώτηση.

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

26 Θετικά των κατηγοριών Οι κατηγορίες κάνουν την εύρεση πληροφοριών ευκολότερη και γρηγορότερη. Χωρίζουν τις πληροφορίες σε μικρότερες. Δίνουν έμφαση στις ομοιότητες των πληροφοριών. Τονίζουν τις διαφορές των πληροφοριών. Δίνουν διαδρομές για τις πληροφορίες.

27 Οργανώνοντας με Διαίρεση (1/3)
Στην ιστοσελίδα των οπαδών του Bob Marley, στη διπλανή εικόνα, το βασικό περιεχόμενο αποτελούταν από φωτογραφίες, ηχητικά κλιπ, βίντεο, λίστες συναυλιών και βιογραφικές πληροφορίες.

28 Οργανώνοντας με Διαίρεση (2/3)
Υπάρχουν κι άλλοι τρόποι για να οργανώσετε το περιεχόμενο και να είναι η ιστοσελίδα πιο διασκεδαστική και ευχάριστη για τους επισκέπτες. Α) χωρίζοντας το site σε τρεις κατηγορίες: Συναυλίες, στούντιο και ζωντανό.

29 Οργανώνοντας με Διαίρεση (3/3)
Β) να χρησιμοποιηθεί χρονολογική σειρά που καθρεπτίζει την ζωή του Bob με ακρίβεια.

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

31 Στοιχεία πλοήγησης Τα στοιχεία πλοήγησης που πρέπει να υπάρχουν σε όλες τις σελίδες πλοήγησης είναι: Σύνδεσμος αρχικής σελίδας Ιστοσελίδα ταυτοποίησης Σύνδεσμος κορυφής επιπέδων πλοήγησης Εργαλεία πλοήγησης ιστοσελίδας Χρησιμότητα βάθους ιστοσελίδας Πληροφορίες επικοινωνίας - Πρέπει να θυμόσαστε ότι το web έχει έλλειψη αληθινού χώρου. - Τα στοιχεία πλοήγησης που παρέχετε είναι τα μόνα που έχουν οι χρήστες. Γι’ αυτό δεν πρέπει να τα ξεχνάμε.

32 Τεχνικές σκέψεις στη χρήση του web
Να απαντάτε γρήγορα Να ενώνετε το web ακολουθώντας συνδέσεις Να συνδέετε τις σελίδες Να είναι προσιτές Επίσης, Οργανώνοντας τα sites Καθορίζοντας τον σκοπό των συνδέσμων Χρησιμοποιώντας στάνταρ web αλληλεπιδράσεις Δίνοντας αξιόλογες ανατροφοδοτήσεις είναι κάποιοι τρόποι για να βελτιώσετε την κατασκευή του site και να κάνετε δυνατή την επικοινωνία.

33 Άμεση απόκριση - Συχνά ονομάζουμε το web λωρίδα ταχείας πληροφόρησης.
- Είναι ένα γρήγορο μέσο για να βρείτε πληροφορίες, αρκετά πιο σύντομο από το να ψάχνετε σε εγκυκλοπαίδειες και βιβλία. - Επομένως, τα παράπονα των χρηστών ‘Δεν βρίσκω αυτό που ψάχνω’ και ‘Αργεί’ είναι αυτονόητα. Υπάρχουν μερικοί τρόποι για να μικρύνετε το μέγεθος των αρχείων: Ξαναχρησιμοποιείστε εικόνες. Όταν έχετε κατεβάσει μία εικόνα, παραμένει σαν στοιχείο. Χρησιμοποιείστε εξωτερικά αρχεία κειμένου. Ισχύει το ίδιο, μία φορά κατεβαίνει και παραμένει στο αρχείο. Μειώστε το φυσικό μέγεθος των εικόνων. Αν μειώσετε το μέγεθος των εικόνων, θα μειωθεί και το μέγεθος των αρχείων.

34 Tips για την εξυπηρέτηση των επισκεπτών σας (1/4)
1.Δημιουργήστε σελίδες που σκανάρονται. -Οι σελίδες που σκανάρονται μπορούν να τις δουν γρήγορα και να καταλάβουν το περιεχόμενο. -Χωρίστε το περιεχόμενο σε μικρότερες πληροφορίες, πιο βολικές αναλογίες και βάλτε οπτική ιεραρχία για να εξηγήσετε στο κοινό σας. -Έτσι θα αυξήσετε την ταχύτητα που το κοινό ερμηνεύει την σελίδα και τους επιτρέπει να προσδιορίσουν τι τους ενδιαφέρει. -Μία συνεπής παρουσίαση των πληροφοριών θα μειώσει τον χρόνο που χρειάζονται για να καταλάβουν την σελίδα.

35 Tips για την εξυπηρέτηση των επισκεπτών σας (2/4)
2.Μειώστε τις πολύπλοκες αλληλεπιδράσεις. -Μπορείτε να μειώσετε τον χρόνο μάθησης της ιστοσελίδας σας μειώνοντας την χρήση σύνθετων αλληλεπιδράσεων. -Ένας τρόπος είναι η μέθοδος click and go. Όταν πρέπει να τραβάτε και να αφήνετε τα ψώνια στο καλάθι αγοράς είναι απροσδόκητο. Οι περισσότεροι περιμένουν να βρουν το κουμπί ‘add to shopping cart’ προσθέστε στο καλάθι αγοράς που απαιτεί ένα μόνο κλικ. -Όταν το κοινό πρέπει να σταματήσει για να βρει πώς να λειτουργήσει το σύστημα πλοήγησης δοκιμάζεται την υπομονή τους. Και οι πιο πολλοί με λίγη υπομονή είναι επιλεκτικοί.

36 Tips για την εξυπηρέτηση των επισκεπτών σας (3/4)
3. Παρέχοντας ανατροφοδότηση. -Όταν γνωρίζουμε την αναμονή, μας φαίνεται ότι αργεί. -Αυτό μπορεί να αντιμετωπιστεί δίνοντας σωστή ανατροφοδότηση στην κατάλληλη στιγμή. -Στο download βασιζόμαστε σε απλές ενδείξεις ότι όλα πάνε ομαλά ή δημιουργούμε μικρά κόλπα για να αποσπάται η προσοχή του κοινού. -Ένας τρόπος για να αποσπαστεί η προσοχή του κοινού είναι να δώσετε κάποια ένδειξη του τι θα φανεί στην εικόνα μέσω της χρήσης των τριών οφελών του IMG. Δηλώνοντας το alt, το ύψος και το πλάτος των εικόνων σας θα δώσετε στο κοινό σας το περιεχόμενο της ιστοσελίδας σας και το πώς θα είναι.

37 Tips για την εξυπηρέτηση των επισκεπτών σας (4/4)
4. Παρέχοντας ανάδραση. - Η ανάδραση απαιτείται επίσης στην διάρκεια της αλληλεπίδρασης που ίσως δεν πάει καλά επειδή υπάρχουν καθυστερήσεις στο δίκτυο ή χειρισμοί πολύπλοκων δεδομένων. - Εάν μία έρευνα παίρνει χρόνο, μπορείτε να βάλετε ένα μικρό κινούμενο σχέδιο και ένα επεξηγηματικό κείμενο για να δείξετε στο κοινό ότι όλα εξελίσσονται ομαλά. - Μετά από μία αποτυχημένη αναζήτηση το Google παρέχει την σωστή ανατροφοδότηση γιατί ήρθε πίσω χωρίς αποτελέσματα. Μπορείτε να κάνετε κάτι παρόμοιο…

38 Καινοτομίες ή στάνταρ;
- Το να βρείτε μία καινοτομία είναι συχνά δύσκολο και όχι πάντα θετικό αφού μπορεί να μπερδέψετε το κοινό σας. Βασικοί λόγοι που πρέπει να ακολουθείτε τα στάνταρ είναι: Το μεταβλητό ίσως να μην είναι καλύτερο. Οι δραματικές βελτιώσεις χρειάζονται για να δικαιολογήσετε την εισαγωγή του μεταβλητού. Οι δραστικές αποχωρήσεις δεν γίνονται συνήθως αποδεκτές. Η συνέπεια είναι σημαντική, ιδιαίτερα online. Το μεταβλητό επιβαρύνει το κοινό. Το μεταβλητό ίσως κάνει την κατανόηση αργή. Είναι εύκολο να είστε διαφορετικοί, αλλά είναι δύσκολο να γίνεται καλύτεροι.

39 Είδη Συνδέσεων(1/6) Εξωτερικές Συνδέσεις
Οι εξωτερικές συνδέσεις παρέχουν συνδέσεις από την ιστοσελίδα σας σε συγκεκριμένα sites που έχετε προσδιορίσει. Αν και φαίνεται αντιφατικό να προτείνεται στο κοινό σας να φύγει από την ιστοσελίδα σας, μπορεί να είναι χρήσιμο. Συνδέοντας εξωτερικές κριτικές προϊόντων, πληροφορίες, μία δεύτερη γνώμη κ.α. σας επιτρέπει να χρησιμοποιήσετε το περιεχόμενο που σχεδιάστηκε και διατηρήθηκε από άλλους για να πετύχετε τους στόχους σας. - Μόνο προσέξτε να είστε επιλεκτικοί στις συνδέσεις που διαλέγετε.

40 Είδη Συνδέσεων(2/6) 2. Συνδέσεις σε λίστες
Ακολουθούνται συνήθως από επεξηγηματικά κείμενα καθώς αρκετοί δεν γνωρίζουν από τον τίτλο το περιεχόμενο της κάθε σύνδεσης.

41 Είδη Συνδέσεων(3/6) 3. Εσωτερικές Συνδέσεις
-Οι εσωτερικές συνδέσεις είναι μάλλον οι πιο γνωστές: τα συστήματα πλοήγησης και οι ενσωματωμένες συνδέσεις. -Οι ενσωματωμένες συνδέσεις (συνήθως με blocks κειμένων ή εικόνων) κατευθύνουν το κοινό σε σχετικές ή επιπρόσθετες πληροφορίες σε κάποιο άλλο σημείο μέσα στην ίδια σελίδα.

42 Είδη Συνδέσεων(4/6) 4. Συνδέσεις με download
-Οι συνδέσεις που οδηγούν σε οποιοδήποτε αρχείο που δεν εμφανίζεται σε παράθυρο του web browser, προτιμούνται ως σύνδεση download. -Μπορούν να χρησιμοποιούνται όταν το περιεχόμενο είναι πιο κατάλληλο για ένα διαφορετικό σχήμα σελίδας ή εικόνας. -Λόγοι εισαγωγής της σύνδεσης αυτής στη σελίδα σας Παρέχετε περισσότερη ανάλυση περιεχομένων Συμπυκνώνετε κομμάτια σε μία ενιαία μονάδα Παρέχετε μέγιστη αλληλεπίδραση Μοιράζετε εφαρμογές

43 Είδη Συνδέσεων(5/6) 5. Ευθύγραμμες Συνδέσεις
Μία κοινή χρήση των ευθύγραμμων συνδέσεων είναι η μορφή της πάνω σύνδεσης (Up link). Αυτή η σύνδεση, χρησιμοποιείται συνήθως σε μεγάλα κείμενα και τοποθετείται στο κάτω μέρος ή μέσα στην μεγάλη σελίδα, παρέχοντας μία γρήγορη λύση για το κοινό σας να μεταβεί στην αρχή της σελίδας.

44 Είδη Συνδέσεων(6/6) 6. Ευθύγραμμες Επισκοπήσεις
Παρέχουν μία γενική θεώρηση των κυρίων σημείων του περιεχομένου της ιστοσελίδας, ενώ ταυτόχρονα βοηθούν με την πλοήγηση. 7. Συνδέσεις Δράσης πυροδοτούν γεγονότα διαφορετικά από το browsing. -Η πιο κοινή σύνδεση δράσης εμφανίζετε ως τα κουμπιά αποδέχομαι ή επαναριθμήστε (submit, reset) στις web μορφές όπως και τα κουμπιά πήγαινε ή ψάξε (go, search) δίπλα στο πεδίο εισαγωγής.

45 Συναρμολογώντας την ιστοσελίδα
Όλες οι σελίδες πρέπει να έχουν: Έναν τίτλο σελίδας Έναν σύνδεσμο προσδιορισμού Έναν σύνδεσμο αρχικής σελίδας Μια ένδειξη για το πότε η σελίδα ενημερώθηκε Κάποια στοιχεία πλοήγησης Περιεχόμενο

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

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

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

49 Παράδειγμα Σαν παράδειγμα, μπορούμε να σκεφτούμε μία αφίσα που διαφημίζει την άφιξη ενός τσίρκου. Όταν δείτε για πρώτη φορά την αφίσα, τα πιο ισχυρά οπτικά στοιχεία είναι οι εικόνες του τσίρκου και η λέξη τσίρκο. Βάζοντας αυτά τα στοιχεία στην αρχή της ιεραρχίας καταλαβαίνετε ότι αυτά θα προσέξουν πρώτα. Αυτό είναι σημαντικό για την κατανόηση της γενικής εικόνας: Το τσίρκο είναι στην πόλη. Πριν μπείτε σε λεπτομέρειες πρέπει να έχετε μία γενική αίσθηση του τι θα αντιμετωπίσετε. Εάν δείτε την αντίθετη πλευρά, ίσως βρείτε λιγότερα ενδιαφέροντα στοιχεία όπως την τιμή του εισιτηρίου. Φανταστείτε το λίγο: μία αφίσα να δίνει έμφαση στην τιμή από το υπόλοιπο περιεχόμενο. Οι πιθανότητες είναι ότι λίγοι θα ήξεραν για το τσίρκο στη πόλη. Αντίθετα, θα αδιαφορούσαν για μία μεγάλη αφίσα με $7.50, μη ασχολούμενοι να διαβάσουν τα μικρά γράμματα που λένε πως έρχεται το τσίρκο στην πόλη τους.

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

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

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

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

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

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

56 Οπτικό πέρασμα (1/2) Ένας σχεδιαστής Ιστού χρειάζεται για να κατασκευάσει χώρο για άνετο οπτικό πέρασμα. Οι σχεδιαστές πρέπει να αξιολογήσουν τον ‘αρνητικό χώρο’, αυτές οι περιοχές όπου το μάτι δεν μπορεί να ξεκουραστεί, αυτούς τους χώρους χωρίς τίποτα που δημιουργούν χώρο αναπνοής. Συγκρίνετε τα χωρικά αποτελέσματα παρακάτω: Συμφόρηση Άνετο πέρασμα

57 Οπτικό πέρασμα (2/2) Το χρώμα οργανώνει το χώρο κατηγοριοποιώντας το εμπόρευμα ή άλλα παρόμοια στοιχεία μαζί.

58 Ανίχνευση σημάτων (1/2) Η ‘ανίχνευση σημάτων’ είναι πάντα σε λειτουργία. Εν συντομία, αυτή η θεωρία σημαίνει πως ο εγκέφαλος είναι ικανός να καταλάβει και να οργανώσει πληροφορίες όταν ένα ελάχιστο σύνολο από χρώματα και σχήματα υπάρχουν μέσα στο οπτικό πεδίο. Πολλά χρώματα και σχήματα τον καθιστούν αδύνατο να συγκεντρωθεί και να βρει οτιδήποτε. Super market Web site

59 Ανίχνευση σημάτων (2/2) Χωρικοί κανόνες:
Κάθε χρώμα πρέπει να έχει κάποιο σκοπό Χρησιμοποιήστε χρώματα μόνο όταν χρειάζονται πραγματικά Μη χρησιμοποιείται περισσότερα από 6 χρώματα σε μια οθόνη

60 Χρώμα και Συγκέντρωση(1/2)
Το χρώμα, αν και έχει δύο διαστάσεων χαρακτήρα, στην πραγματικότητα κινείται στο χώρο σαν να ήταν μια τρισδιάστατη μορφή. Αυξάνεται, μειώνεται, δονείται. Το χρώμα ελέγχει το σημείο εστίασης. Η κατανόηση και η εφαρμογή των πιο σημαντικών οπτικών θεωριών και των χαρακτηριστικών συμπεριφοράς των κινήσεων του χρώματος είναι το κλειδί για τη σύνθεση ιδανικών και κανονικών ακολουθιών οπτικών κινήσεων σε μια ιστοσελίδα.

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

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

63 Συγκέντρωση και αντίθεση(1/2)
Η αναγνωσιμότητα υποδεικνύει την επιλογή χρώματος όταν πρόκειται για τον φόντο ιστοσελίδας. Οι πελάτες πρέπει να μπορούν να διαβάζουν το περιεχόμενο με απόλυτη ευκολία. Ανεπαρκής αντίθεση, όπως απεικονίζεται στα παρακάτω παραδείγματα, αναγκάζει τους μύες του ματιού να δουλέψουν υπερβολικά. Με αποτέλεσμα, τα μάτια να κουράζονται.

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

65 After-image (1/2) Το ‘after-image’ μπορεί να οριστεί καλύτερα με ένα απλό οπτικό τεστ: στην παρακάτω εικόνα, κοιτάξτε για 30 δευτερόλεπτα τη μαύρη τρύπα στο κέντρο του μπλε τετράγωνου. Κρατήστε την εστίασή σας σταθερή στη μαύρη τελεία. Στο τέλος των 30 δευτερολέπτων, εστιάστε στη μαύρη τελεία στη μέση του λευκού τετραγώνου στα δεξιά. Για να έχετε καλύτερα αποτελέσματα, βεβαιωθείτε πως είστε συγκεντρωμένοι στη μαύρη τελεία και τις δυο φορές.

66 After-image (2/2) Τι είδατε? Οι πιθανότητες είναι να είδατε ένα πυρακτωμένο κίτρινο ή πορτοκαλί διάφανο χρώμα στη μέση του λευκού τετραγώνου. Αυτή η επίδραση είναι γνωστή ως ‘after-image’. Επιστημονικά, όταν ένα χρώμα δεν ανακουφίζεται από ένα άλλο αντίθετο χρώμα, το μάτι θα δημιουργήσει ένα ‘after-image’ χρώμα. Αυτό αναγκάζει το μάτι να εκτελέσει υπερβολική μυϊκή δράση. Σε σχέση με το σχέδιο του ηλεκτρονικού εμπορίου, δυνατά χρώματα σε μεγάλες περιοχές μιας σελίδας προκαλούν την ίδια οπτική κούραση.

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

68 Οπτική άνεση (1/2) Κορεσμός
Από τον ορισμό, η λέξη κορεσμός αναφέρεται στο πόσο απαλό (μουντό) ή ζωηρό (φωτεινό) είναι ένα χρώμα. Τα απαλά χρώματα παρέχουν ένα ήσυχο φόντο για τα πιο έντονα χρώματα του εμπορεύματος.

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

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

71 Παράδειγμα Συγκρίνετε τα αποτελέσματα του χρώματος σε μια ιστοσελίδα για αντηλιακά προϊόντα στα δυο παρακάτω παραδείγματα. Το μωβ συνδέεται με το μελάνιασμα επομένως λειτουργεί αρνητικά στο επιθυμητό αποτέλεσμα των προϊόντων μαυρίσματος. Οι χρυσές αποχρώσεις συνδέονται με το μαυρισμένο δέρμα. Έτσι ενισχύουν τα οφέλη του προϊόντος.

72 Οδηγίες για Επιλογή Συμβολικών Χρωμάτων (1/3)
Ανάλυση Προϊόντος Μια ανάλυση για το πόσο παρόμοια παρουσιάζονται τα χρώματα ή οι υπηρεσίες σε άλλα μέσα, περιοδικά, εμπορικές δημοσιοποιήσεις, τηλεοπτικά σποτ, ιστοσελίδες και διαφημιστικές πινακίδες, παρέχει πολύτιμες πληροφορίες. Συσκευασίες, ετικέτες, εταιρικά λογότυπα, χαρτικά, σηματοδότες, βιβλία και άλλες οπτικές εικόνες θα πρέπει επίσης να εξεταστούν. Αυτό μπορεί να αποκαλύψει πως ένα μόνο σύνολο χρωμάτων χρησιμοποιείται πιο συχνά από τα άλλα. Επιπλέον, αυτό μπορεί να είναι μια ένδειξη πως μια ευνοϊκή ανταπόκριση είναι αποτέλεσμα οικείων ενώσεων.

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

74 Οδηγίες για Επιλογή Συμβολικών Χρωμάτων (2/3)
2. Ο στόχος καταναλωτής Η ηλικία, το φύλο, η εθνικότητα του τυπικού πελάτη της ιστοσελίδας πρέπει να οριστούν. Οι στερεοτυπικές ενώσεις χρωμάτων πρέπει να αποφεύγονται. Για παράδειγμα, το ροζ δεν είναι το προεπιλεγμένο χρώμα για τις γυναίκες. Στην πραγματικότητα, πολλές γυναίκες επαγγελματίες προσβάλλονται όταν αυτό το χρώμα χρησιμοποιείται συμβολικά για το είδος τους. Οι υποτιθέμενες ενώσεις μπορεί να είναι καταστροφικές σε ένα ακόμα επίπεδο. Ο συμβολισμός ενός χρώματος μπορεί να πάρει διαφορετική σημασία σε διαφορετικούς πολιτισμούς. Για παράδειγμα, ένα χρώμα που μπορεί να είναι κατάλληλο για τα εντομοκτόνα προϊόντα στις Ηνωμένες Πολιτείες, μπορεί να είναι ένα ιερό χρώμα σε έναν μουσουλμανικό πολιτισμό.

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

76 Παράγοντες που επηρεάζουν τον συμβολισμό (1/4)
Η ποσότητα του χρώματος Η ποσότητα του χρώματος μέσα στη συνολική σύνθεση έχει επιπτώσεις στην ποσότητα του συμβολισμού που παραδίδει. Μια μικρή περιοχή ενός χρώματος σε μια ιστοσελίδα μπορεί να αναζωογονήσει το συνολικό σχέδιο ή να τραβήξει την προσοχή σε μια διαφορετική περιοχή. 2. Το πλαίσιο Ιστού Μερικοί σχεδιαστές μπορεί να αντιγράψουν τα οπτικά χαρακτηριστικά των συσκευών του αληθινού κόσμου. Όμως η μεταφορά των χρωμάτων από τα φαινόμενα του πραγματικού κόσμου μπορεί να μην είναι αξιόπιστο πρότυπο.

77 Παράγοντες που επηρεάζουν τον συμβολισμό (2/4)
3. Η μορφή που το χρώμα καταλαμβάνει Ο συμβολισμός γίνεται πιο περίπλοκος όταν συγκεκριμένες αποχρώσεις ενός χρώματος χρησιμοποιούνται σε συνδυασμό με ένα βασικό σχήμα. Ως κανόνας, οι κύκλοι συνδέονται με την απαλότητα, τη σύνδεση, την πληρότητα, τη ζεστασιά, την άνεση και την αγάπη, τα ορθογώνια με τη στερεότητα, τη συγκράτηση, τη σειρά, τη λογική, τη σιγουριά και την σκληρότητα, τα τρίγωνα με τη δύναμη, τον ενθουσιασμό, την επιθετικότητα, την ώθηση και το μυστήριο. Από τα παραπάνω συμπεραίνουμε ότι το πιο κατάλληλο σχήμα στην παρακάτω εικόνα είναι το σκούρο ορθογώνιο.

78 Παράγοντες που επηρεάζουν τον συμβολισμό (3/4)
4. Το αντικείμενο Όταν τα χρώματα συνδυάζονται με συγκεκριμένα σχήματα, ο συμβολισμός είναι ακόμα πιο πολύπλοκος. Ένα άξιο παράδειγμα είναι ο συμβολισμός ενός πράσινου καπέλου. Στο δυτικό κόσμο, το συνδέουν με καλή τύχη. Θα φαινόταν ασφαλές να φορέσετε ένα φανταχτερό πράσινο καπέλο σε ένα θάλαμο σε μια εμπορική έκθεση. Μια απρόσμενη αντίδραση συνέβη όταν οι άντρες που επάνδρωσαν ένα θάλαμο σε μια έκθεση τεχνολογίας στην Κίνα έκαναν ακριβώς αυτό. Δυσκολεύτηκαν να καταλάβουν το λόγο που το πλήθος τους κορόιδευε και τους απέφευγε και τους δύο… όταν οι Κινέζοι λένε ‘φοράω ένα πράσινο καπέλο’, σημαίνει πως η γυναίκα του έχει εξωσυζυγική σχέση.

79 Παράγοντες που επηρεάζουν τον συμβολισμό (4/4)
5. Ο συνδυασμός χρωμάτων Όταν ένα χρώμα συνδέεται με κάποιο άλλο χρώμα ή χρώματα, προκύπτουν νέοι συνειρμοί. Ένα κλασικό παράδειγμα είναι το κόκκινο και το πράσινο, τα συμβολικά χρώματα των Χριστουγέννων στον δυτικό κόσμο. Όταν συνδυάζονται με λευκό, είναι τα χρώματα της μεξικάνικης, της ιταλικής και της ιρανικής σημαίας. Αν οι συνειρμοί συγκεκριμένων χρωμάτων χρησιμοποιούνται συχνά για ένα συγκεκριμένο είδος, αυτά τα χρώματα μπορεί να μη λειτουργούν σε μια ιστοσελίδα που απαιτεί διαφορετικούς συνειρμούς.

80 Αρμονία- Αντίθεση χρωματικών σχεδίων (1/3)
Η λογική της χρωματικής αρμονίας βασίζεται σε ένα χρωματικό τροχό ή χρωματικό κύκλο. Κάθε χρώμα εναρμονίζεται με τον εαυτό του. Αυτό είναι γνωστό ως μονοχρωματικό σχέδιο χρώματος, καλύπτει ένα μόνο χρώμα ή παραλλαγές αυτού του χρώματος. Για παράδειγμα, μια μπλε παλέτα μπορεί να περιλαμβάνει ανοιχτές και σκούρες παραλλαγές ενός συγκεκριμένου μπλε. Παραδείγματα αυτών των παραλλαγών, συμπεριλαμβάνοντας τις RGB και HEX φόρμουλες, απεικονίζονται παρακάτω.

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

82 Αρμονία- Αντίθεση χρωματικών σχεδίων (2/3)
Ένα από τα πιο αποτελεσματικά σχέδια χρώματος είναι ένα μόνο χρώμα συνδυασμένο με μαύρο ή άσπρο. Το χρώμα μπορεί επίσης να εξυπηρετεί σαν ένας ενεργό σύνδεσμος χρώματος. Αυτή η παλέτα μπορεί επίσης να επεκταθεί και να συμπεριλάβει περισσότερες από μία αποχρώσεις του πράσινου του λεμονιού. Ένα παράδειγμα αυτής της επεκταμένης αρμονίας 5 χρωμάτων, συμπεριλαμβάνοντας τις RGB και HEX φόρμουλες , απεικονίζεται παρακάτω.

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

84 Αρμονία- Αντίθεση χρωματικών σχεδίων (3/3)
Μια απλή φόρμουλα για μια πολύχρωμη παλέτα είναι δυο αντίθετα χρώματα, όπως ένα ζεστό χρώμα και ένα ψυχρό. Παράδειγμα: Κόκκινο και πράσινο! Τα μωβ μπορεί να είναι ζεστά ή ψυχρά Μια ακριβής φόρμουλα είναι δυο συμπληρωματικά χρώματα, οποιαδήποτε δύο χρώματα που τοποθετούνται ακριβώς απέναντι το ένα με το άλλο στον τροχό.

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

86 Συχνά λάθη του background(1/3)
1. Τα μεγάλα πλαίσια, ειδικά αυτά που έχουν φωτεινά χρώματα, εξουδετερώνουν το εμπόρευμα. Τα πλαίσια είναι πιο πετυχημένα όταν το μέγεθος και το χρώμα τους είναι κατάλληλα για την εικόνα. Συγκρίνετε τα αποτελέσματα στις παρακάτω εικόνες: Το πλαίσιο είναι πολύ μεγάλο και πολύχρωμο για το προϊόν. Η κλίμακα και το χρώμα είναι κατάλληλα για το προϊόν.

87 Συχνά λάθη του background (2/3)
2.Τοποθετώντας τις εικόνες σε φωτεινό χρωματιστό φόντο ή καλούπια εξουδετερώνει το εμπόρευμα. Το φωτεινό μπλε κάνει τα χρώματα των ρούχων να μοιάζουν ‘ξεπλυμένα’. Λευκό, μαύρο ή ένα κατάλληλο μουντό χρώμα είναι πιο ταιριαστό.

88 Συχνά λάθη του background (3/3)
3. Το χειρότερο λάθος είναι ένας συνδυασμός ενός υπερβολικά δυνατού πλαισίου και ενός φόντου. Το χρώμα του νερού και το ροδακινί είναι ένας όμορφος χρωματικός συνδυασμός… Ωστόσο έχει αρνητικά αποτελέσματα όταν χρησιμοποιείται ως φόντο για πολύχρωμο εμπόρευμα.

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

90 Σωστές επιλογές background (2/2)
Εμπορεύματα ανοιχτού χρώματος Τα σκούρα χρώματα συντρίβουν το ανοιχτού χρώματος εμπόρευμα. Τα ανοιχτά μουντά χρώματα ή το άσπρο ενισχύουν το ανοιχτού χρώματος εμπόρευμα. Εμπορεύματα μουντού χρώματος Τα φωτεινά χρώματα συντρίβουν το εμπόρευμα μουντού χρώματος. Τα πολύ μουντά χρώματα ή το λευκό ενισχύουν το εμπόρευμα μουντού χρώματος.

91 Η δύναμη της προσωπικότητας (1/2)
Μία καλά σχεδιασμένη προσωπικότητα: Λέει την σωστή ιστορία Παρέχει διακρίσεις Απευθύνεται και υπόσχεται στο κοινό Ενοποιεί την σελίδα σας Όταν καλές πληροφορίες δίνονται σε μία φτωχή παρουσίαση, σίγουρα δεν θα εκτιμηθούν. Η προσωπικότητα της ιστοσελίδας σας επικοινωνεί πιο γρήγορα μέσω της οπτικής παρουσίασης. Αν και κάθε άνθρωπος αντιδρά λίγο διαφορετικά, οι κύριες γενικές τάσεις σας βοηθούν να καταλάβετε τι λέει η οπτική παρουσίαση στο κοινό σας.

92 Η δύναμη της προσωπικότητας (2/2)
Όταν αποφασίσετε να δημιουργήσετε την προσωπικότητα της ιστοσελίδας σας θα πρέπει να θεωρήσετε κάποια γεγονότα: - Ιστορία: Ποια είναι η πρόσφατη στρατηγική φίρμας του πελάτη σας; Έχουν μία δημοσιευμένη γλώσσα γραφικών; Χρειάζεται να μεταφέρετε κάποια προηγούμενα σχέδια ιστοσελίδων; - Κοινό: Πως θα αντιδράσουν στην προσωπικότητα; Είναι η κατάλληλη; Τι περιμένουν από το site σας; - Έκθεση: Πώς μπορείτε να ξεχωρίσετε από τους ανταγωνιστές σας; Τι ιστορία έχετε να τους πείτε; Υποδήλωση: Ποιες είναι οι συσχετίσεις με τα προϊόντα σας; Ταιριάζουν με την προσωπικότητα της σελίδας σας;

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

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

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

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

97 Κανόνες Χρωμάτων Διαλέξτε μόνο τρία ή τέσσερα χρώματα για τα σχέδιά σας. Μπορείτε να έχετε ένα χρώμα για background και δύο ή τρία ακόμα χρώματα για το φόντο ή τις υπογραμμίσεις. Εξισορροπήστε τα στοιχεία των σχεδίων σας. Μερικοί σχεδιαστές διαιρούν την περιοχή του εξωφύλλου σε τρίτα, εξετάζοντας το σχεδιάγραμμα σε κάθε περιοχή της σύνθεσης. Σχεδιάστε την σελιδοποίησή σας σε μαύρο και άσπρο στην αρχή και μετά προσθέστε χρώμα. Με αυτόν τον τρόπο είναι ευκολότερο να δείτε τις καλές αποδόσεις των χρωμάτων στο σχέδιό σας. Μην χρησιμοποιείτε έντονο χρώμα στο κείμενο σε άσπρο ή φωτεινό background. Είναι πολύ δύσκολο να διαβάσετε στην οθόνη. Ποτέ μην χρησιμοποιείται σκοτεινό ή μεσαίου βαθμού μπλε σε κείμενο με μαύρο background.

98 Γραμματοσειρές (1/3) Τα στοιχεία που συνθέτουν τον μοναδικό χαρακτήρα κάθε γραμματοσειράς είναι: Το ύψος των κεφαλαίων και των μικρών γραμμάτων Η αντίθεση μεταξύ της λεπτής και της παχύς θέσης των γραμμάτων Το ύψος των γραμμάτων που ανέρχονται και κατέρχονται από τη γραμμή όπως τα d και q ή στα ελληνικά το δ και το γ Η λεπτότητα των γραμμάτων Η απόσταση μεταξύ των γραμμάτων Η παρουσίαση των διακοσμητικών στοιχείων όπως τα άγκιστρα Η στρογγυλότητα των άκρων (ομαλότητα, τραχύτητα)

99 Γραμματοσειρές (2/3) Σας παραθέτουμε κάποιες…
Old style: Αναπτύσσοντας την παραδοσιακή γραφή, αυτή η γραμματοσειρά έχει μία πρόσκληση, μία κομψή και κλασική παρουσίαση: Garamond, Palatino, Times   Grunge: Αυτή συχνά παραμορφώνει και κάνει τα ενεργά φόντα αστεία και με συναισθηματική επιρροή: Ammonia, Bedbug, Dead History, Psycho Poetry Retro: Μιμούμενη τα σημάδια των ’50 και του ’60, αυτή η γραμματοσειρά έχει μοναδικό στυλ που προσθέτει χαρακτήρα: Parisian, Moonglow και οι γραμματοσειρές που υπάρχουν στην ιστοσελίδα

100 Γραμματοσειρές (3/3) Υπάρχουν πάρα πολλές γραμματοσειρές μέσα σε κάθε υπολογιστή και αρκετές περισσότερες διατίθενται στο web. Όταν αποφασίζετε να βάλετε κάποιο οπτικό στοιχείο στο site σας, σκεφτείτε: Καταλληλότητα: Είναι αυτό το οπτικό στοιχείο σωστό για το κοινό σας; Υποστηρίζει την ιστορία που προσπαθείτε να πείτε; Ενδιαφέρον: Μπορεί να κρατήσει το ενδιαφέρον του κοινού αυτό το οπτικό στοιχείο; Μήπως παίρνει την προσοχή από σημαντικές πληροφορίες; Ενότητα: Ενισχύει αυτό το οπτικό στοιχείο την αφήγηση;

101 Ευχαριστούμε!


Κατέβασμα ppt "Οπτική Σχεδίαση στο Διαδίκτυο"

Παρόμοιες παρουσιάσεις


Διαφημίσεις Google