Καλές αρχές σχεδιασμού στο web, τα μεγαλύτερα λάθη στον web σχεδιασμό

handsomechannelSoftware and s/w Development

Jul 2, 2012 (4 years and 11 months ago)

527 views

1
Δικτυακά Πολυμέσα ΙΙ
Διάλεξη #1
η
:
Οργάνωση & στόχοι μαθήματος, καλές αρχές 
σχεδιασμού στο web, τα μεγαλύτερα λάθη στον web σχεδιασμό
Γαβαλάς Δαμιανός
dgavalas@aegean.gr
2
Στόχοι μαθήματος

Κατανόηση της δομής και λειτουργίας του διαδικτύου και του 
παγκόσμιου ιστού (των υποκείμενων τεχνολογιών και 
διαδικασιών πίσω από τις web δημιουργίες μας)

Διάκριση των εννοιών του σχεδιασμού και της ανάπτυξης στον
 
παγκόσμιο ιστό (web design vs. web development)

Εμπέδωση των ιδιαιτεροτήτων των διαδικτυακών εφαρμογών 
και των βασικών αρχών που τηρούνται στο σχεδιασμό στο web

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

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

Παράμετροι φιλοξενίας και συντήρησης ιστοτόπων (web 
hosting and maintainance)
3
Αναμενόμενο αποτέλεσμα

Ικανότητα ανάπτυξης ιστοτόπων με τη γλώσσα 
σήμανσης  XHTML

Εξοικείωση με περιβάλλοντα ανάπτυξης ιστοτόπων 

Εξοικείωση με περιβάλλοντα ανάπτυξης ιστοτόπων 
⡁摯扥  Dreamweaver)

Κατανόηση θεμάτων σχεδιασμού στον ιστό (web 
design), αρχών καλού σχεδιασμού

Οργάνωση περιεχομένου, συστήματα πλοήγησης, 
τε
χ
νολο
γ
ίε
ς
 και 
μ
έθοδοι διάτα
ξης
 πε
ρ
ιε
χ
ο
μ
ένου
,
?
?[
?g?P?P?D
?
?]?G?X?Q?S?K?X?V?]?Q,φ
στυλ, γραφικά και χρώμα 

Αφομοίωση ρόλου και χαρακτηριστικών της τεχνολογίας 
CSS
Αναμενόμενο αποτέλεσμα

Κανόνες ευχρηστίας στο web design

Ο ρόλος του web design στην προσβασιμότητα (web 
accessibility
)
accessibility
)

Σχεδιασμός στον κινητό ιστό (mobile web design)

Web design και μηχανές αναζήτησης

Παράμετροι φιλοξενίας δικτυακών τόπων (Web 
hosting), συντήρηση ενός web site

Εισαγωγή στις τεχνολογίες
 
J
avascript, XML,
 
A
橡j
4
Δομή Μαθήματος

Θεωρία:

∆ευτέρα 11:00-12:00μμ, Αίθουσα Α’ Γεωγραφίας
Ε ή Α θ ί

Ε
ργαστ
ή
ριο
Α
ν
θ
ρωπογεωγραφ
ί
ας:

1
η
ομάδα: ∆ευτέρα 12:00-14:00

2
η
ομάδα: ∆ευτέρα 14:00-16:00
Τρόπος αξιολόγησης

Οπωσδήποτε ένα (ατομικό ή ομαδικό) project
(σχεδιασμός ενός διαδικτυακού τόπου):
ηλεκτρονική παράδοση στο τέλος του εξαμήνου
ηλεκτρονική παράδοση στο τέλος του εξαμήνου
και πιθανόν σύντομη προφορική παρουσίαση στο
διδάσκοντα

Γραπτή εξέταση στο τέλος του εξαμήνου
5
Διδακτικά Εγχειρίδια

«Μάθετε την HTML & CSS σε 24 ώρες»

Συγγραφείς: J. Meloni & M. Morrison

Εκδόσεις Γκιούρδα, 2010

Εισαγωγή στην H
TML
για τον 

«
Εισαγωγή στην H
TML
για τον 
Παγκόσμιο Ιστό με Εικόνες»

Συγγραφείς: E. Castro

Εκδόσεις Κλειδάριθμος, 2003
Ξένη βιβλιογραφία
6
Σελίδα του μαθήματος στο web
http://www2.aegean.gr/dgavalas/DP_II/

Τι περιέχει;;;

Ανακοινώσεις

Διαφάνειες

Ασκήσεις εργαστηρίου

Βιβλιογραφία, Links, «Λεξικό» εννοιών (Γλωσσάρι όρων)
Σχεδιάζοντας 
ένα Website
7
Περιεχόμενα

Κατασκευή ιστοσελίδων

Τα 3 Cs σ
χ
εδιασ
μ
ού στο web
χ μ

∆έκα καλές πρακτικές στο Web Design
(Nielsen, 1999)

Κάποιες σημειώσεις σε σχέση με Γραφικά και
Flash

Τα μεγαλύτερα λάθη στο Web Design

Ενδιαφέροντα Website Designs

Σχεδιάζοντας για κινητές συσκευές
Κατασκευή ιστοσελίδων

Ένας καλός web page developer πρέπει να
έχει αντίληψη των αναγκών και
ενδια
φ
ε
ρ
όντων των επισκεπτών ιστοσελίδων
φ ρ

Μια καλή ιστοσελίδα δεν βασίζεται μόνο στο
σχεδιασμό της

Μια καλή ιστοσελίδα προσφέρει πληροφορία +
δημιουργικό σχεδιασμό.
8
Τα 3 Cs του Web Design

Quality Content
(ποιοτικό περιεχόμενο)

Reader Convenience
(άνεση/ευκολία χρήστη)

Artistic Composition
(καλλιτεχνική σύνθεση)
Τα 3 Cs του Web Design
(συν.)

Ποιοτικό περιεχόμενο

Βεβαιωθείτε ότι έχετε ποιοτικό περιεχόμενο που 
θα
προσφέρετε
θα
προσφέρετε

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

Ευκολία ανάγνωσης

Σκεφτείτε και λάβετε υπόψη τον επισκέπτη

Διευκολύνετε τον επισκέπτη να εντοπίσει πληροφορία,
ν
α
 
πλοηγείται εύκολα και να «βλέπει» τις σελίδες όπως 
επιθυμείτε να τις βλέπει

Επίσης, κρατήστε τους χρόνους μεταφόρτωσης 
(download) στο ελάχιστο
9
Τα 3 Cs του Web Design
(συν.)

Καλλιτεχνική σύνθεση

ȱɖɔɉəɔɎɑɠɗəɉɡɒɄɏɄɐɐɎəɉɝɒɎɏɦɗɝɉɈɎɄɗɑɦ

ȱɖɔɉəɔɎɑɠɗəɉɡɒɄɏɄɐɐɎəɉɝɒɎɏɦɗɝɉɈɎɄɗɑɦ

Η όψη και αντίληψη (look & feel) της σελίδας σας 
θα εκτιμηθεί μόνο αν οι προηγούμενες δύο 
προϋποθέσεις ικανοποιούνται

Οι πρωτάρηδες στην ανάπτυξη ιστοσελίδων 
συχνά υπερβάλουν στη «διασκέδαση» των ψηφιακών 
γραφικών και
εικόνων
γραφικών και
εικόνων
.

Η διασκέδαση είναι σημαντική αλλά διασφαλίστε ότι ο 
σχεδιασμός δεν απορροφά περισσότερη προσοχή από 
το περιεχόμενο
∆έκα καλές πρακτικές στο Web
Design (Nielsen, 1999)
1.
Τοποθετήστε το όνομα και λογότυπό σας και κάνετε το 
logo σύνδεσμο στην αρχική σελίδα
2.
Παρέχετε λειτουργία αναζήτησης (search) αν το site 
έχει περισσότερες από 100 σελίδες
3
?+?V?D?Y?b?W?Y?I??D?U?P?a?X??Y?N?X??I?U?N?O?I?[?D?P?c?H?I?X??O?D?N??Y?T?Z?X??Y?c?Y?P?T?Z?X??Y?_?R?
3
.
Κρατήστε απλές τις επικεφαλίδες και τους τίτλους των 
σελίδων
4.
Δομήστε τη σελίδα
10
∆έκα καλές πρακτικές στο Web
Design (Nielsen, 1999)
(συν.)
5.
Χρησιμοποιήστε κείμενο με υπερσυνδέσμους στην 
αρχική σελίδα ώστε να παρέχει μια γενική εικόνα και 
αρχική σελίδα ώστε να παρέχει μια γενική εικόνα και 
διάφορες δευτερεύουσες σελίδες, καθεμία από τις 
οποίες επικεντρώνει σε ένα συγκεκριμένο θέμα
6.
Χρησιμοποιήστε υψηλής ποιότητας φωτογραφίες
7.
Αντί να μικρύνετε τις εικόνες σας σε μικρές και 
δυσανάγνωστες, κάνετε zoom στο πιο σημαντικό 
μέρος τους με συνδυασμό κοψίματος (cropping) και 
αλλαγής μεγέθους
8.
Χρησιμοποιήστε τίτλους συνδέσμων που να παρέχουν 
στους χρήστες μια ιδέα για τη σελίδα στην οποία 
∆έκα καλές πρακτικές στο Web
Design (Nielsen, 1999)
(συν.)
στους χρήστες μια ιδέα για τη σελίδα στην οποία 
δείχνουν
9.
Διασφαλίστε ότι οι σελίδες σας είναι προσβάσιμες από 
τους χρήστες
10.
Κάνετε το ίδιο που κάνουν τα «μεγάλα» websites: αν 
κάνουν κάτι με συγκεκριμένο τρόπο, τότε ακολουθήστε 
παρόμοιες πρακτικές καθώς αυτό θα περιμένουν οι 
επισκέπτες σας και από το δικό σας website
11
Σχόλια σχετικά με γραφικά (ή 
Flash)

Οι εικόνες δεν μπορούν να αναλυθούν από μηχανές 
αναζήτησης

ȴɔ
Flash 
στην αρχική σελίδα μπορεί να ενοχλήσει
(
?I?[?f?W?T?R?

ȴɔ
Flash 
στην αρχική σελίδα μπορεί να ενοχλήσει
(
?I?[?f?W?T?R?
?T??I?U?N?W?O?a?U?Y?K?X??W?Z?R?H?a?I?Y?D?N??Q?a?W?_??D?V?G?b?X??W?g?R?H?I?W?K?X)
Τα μεγαλύτερα λάθη στο Web 
Design
http://www.webpagesthatsuck.com/biggest‐mistakes‐in‐
web‐design‐1995‐2015.html
1
Το να πιστεύετε ότι οι άλλοι νοιάζονται για το 
site 
1
.
Το να πιστεύετε ότι οι άλλοι νοιάζονται για το 
獩se  
σας (δηλ. να το σχεδιάσετε με βάση τις δικές σας 
και όχι τις δικές τους ανάγκες)
2.
Οι επισκέπτες δεν μπορούν να κατανοήσουν σε 4
sec περί τίνος είναι το site σας
3
.
Α
ντίθεσ
η (
contrast
)
3
η (
)
12
Τα μεγαλύτερα λάθη στο Web 
Design 
(συν.)
5. Έχετε ποτέ δει άλλο website;
6. Αποτυχία στην πλοήγηση
7. Λείπει περιεχόμενο…
8. Ξεχάσατε τη σημασία του κειμένου
9. Πληροφοριακή υπερφόρτωση (πάρα πολύ 
περιεχόμενο σε μια σελίδα)
10. Κακή χρήση του Flash
WebPagesThatSuck.com

Δείγματα κακών websites
13
Πληροφοριακή υπερφόρτωση
Κακό (δυσανάγνωστο κείμενο)
14
100% Flash + Κακή πλοήγηση
Κακή τυπογραφία
15
Γραφικό μενού
Γραφικά μενού
16
Έντονα χρώματα (με 
πονούν τα μάτια μου…)
Ενδιαφέροντες σχεδιασμοί 
Websites
17
Παρέχεται δυνατότητα
 
αναζήτησης
Σχεδιασμός για κινητές 
συσκευές

Γιατί;
Μ ή  θό

Μ
ικρ
ή 
ο
θό
νη

Όχι τόσο ισχυρός browser

Περιορισμένες και ακριβές                                            
ταχύτητες σύνδεσης