Μια άποψη για μια σελίδα που φτιάχνω

[Blondeamon]

Καλησπέρα

 

φτιάχνω ερασιτεχνικα μια σελίδα για μια εταιρεία (ενημερωτικη σελιδα οχι eshop κλπ) και ενώ έχω τελειώσει σχεδόν με όλα τα menu items και τις σελίδες που δείχνουν κλπ έχω κολλήσει στο εξώφυλλο.

 

Το παλιο σαιτ ειναι αυτο: http://www.hydraulichammerhire.com/index.html

μια ξεπερασμένη αηδία απτο 2005 εντελώς στατική.

 

Αυτο που έφτιαξα εγω ειναι σε joomla, όχι τίποτα σπουδαίο αλλά καλύτερο απο το προηγούμενο θέλω να ελπίζω. Θα σας κεράσω μια μπύρα αμα μου προτείνετε τρόπους να οργανώσω το front page ώστε να δείχνει καλύτερο. Έκανα εκεί μια πρώτη αναπαράσταση αλλά δε μου αρέσει όπως είναι τώρα.

 

Μηπως να βγάλω όλα τα προιοντα σε δικά τους modules , να βγάλω τα slideshow επειδή είναι βαρια? Για προτείνετε τίποτα,

 

Εδώ είναι η δική μου δουλειά: http://foss.math.aegean.gr/~blondeamon/Joomla/

 

Υ.Γ Αν κάποιος έχει προβλήματα με κάποιο browser ας πει,

[rebel2000]

Καλησπέρα

 

φτιάχνω ερασιτεχνικα μια σελίδα για μια εταιρεία (ενημερωτικη σελιδα οχι eshop κλπ) και ενώ έχω τελειώσει σχεδόν με όλα τα menu items και τις σελίδες που δείχνουν κλπ έχω κολλήσει στο εξώφυλλο.

 

Το παλιο σαιτ ειναι αυτο: http://www.hydraulichammerhire.com/index.html

μια ξεπερασμένη αηδία απτο 2005 εντελώς στατική.

 

Αυτο που έφτιαξα εγω ειναι σε joomla, όχι τίποτα σπουδαίο αλλά καλύτερο απο το προηγούμενο θέλω να ελπίζω. Θα σας κεράσω μια μπύρα αμα μου προτείνετε τρόπους να οργανώσω το front page ώστε να δείχνει καλύτερο. Έκανα εκεί μια πρώτη αναπαράσταση αλλά δε μου αρέσει όπως είναι τώρα.

 

Μηπως να βγάλω όλα τα προιοντα σε δικά τους modules , να βγάλω τα slideshow επειδή είναι βαρια? Για προτείνετε τίποτα,

 

Εδώ είναι η δική μου δουλειά: http://foss.math.aegean.gr/~blondeamon/Joomla/

 

Υ.Γ Αν κάποιος έχει προβλήματα με κάποιο browser ας πει,

 

Κάποιες γρήγορες παρατηρήσεις: Η σελίδα θέλει λογότυπο για να ξέρει ο επισκέπτης που μπήκε, άλλαξε τη γραμματοσειρά απο comic sans και προσπάθησε να οργανώσεις λίγο καλύτερα την πληροφορία σου.(πχ 2 slideshow δίπλα δίπλα με μπερδεύουν)

[Ros_Original]

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

 

• 
  Σίγουρα η αρχική σελίδα πρέπει να ελαφρύνει αρκετά και καλό θα ήταν να περιορίσεις τις εικόνες και να τις αντικαταστήσεις με "χρήσιμο" περιεχόμενο. Η αρχική σελίδα είναι η βιτρίνα του καταστήματος σου οπότε θέλεις να δείξεις όσο το δυνατό περισσότερα πράγματα και μάλιστα αποφεύγοντας να τα κρύψεις κάτω από scrolling (πχ. το ποιο είμαστε και τι κάνουμε εμφανίζεται στην "δεύτερη" σελίδα σε ανάλυση 1680Χ1050, φαντάσου που θα βρίσκεται σε ένα λαπτοπ ή netbook)
  

• 
  To menu παρόλο που χρησιμοποιήσεις cascading menus on mouse hover είναι οκ αν και συνήθως κάτι τέτοιο το αποφεύγεις γιατί καταλήγει να είναι δύσχρηστο (σκέψου πόσες φορές σου έχει φύγει ο κέρσορας σε παρόμοια menus)
  

• 
  Όπου έχεις κείμενο στοίχισε το αριστερά και όχι στο κέντρο. Το ζιγκ-ζαγκ που δημιουργείτε από τα center-aligned elements δεν είναι καθόλου εύχρηστο.
  

• 
  Τέλος θα ήταν προτιμότερο να χρησιμοποιήσεις sans-serif γραμματοσειρές στο web (π.χ. Arial, Calibri, Verdana κλπ) γιατί είναι πιο ξεκούσαστες στο μάτι (οι serif γραμματοσειρές που έχουν τα "τσιγκελάκια" είναι προτιμότερες να τυπωμένα έγγραφα και όχι τόσο κατάλληλες για pc)
  

[papp0us]

Συμφωνω για τη γραμματοσειρα. Βάλε μια πιο απλή και "επαγγελματική" η Comic Sans είναι παιχνιδιάρικη και δεν ταιριάζει με το υφος του Site.

Επίσης συμφωνω να προσθέσεις ένα banner, ή ακόμα καλύτερα ένα logo, για να μην ξεχνάει ο επισκέπτης το ονομα της εταιρίας.

Καλύτερα να αλλάξεις και το ξυλινo backround , βάλε κάτι πιο ουδέτερο.

Τα 2 Slideshow σβήστα και βάλε ένα μεγαλο στο κέντρο, οχι πολύ ψηλό, οσο πιο μακρόστενο γίνετε.

Τις φωτογραφίες που έχεις κάτω απο το Every Attachment For Every Excavator κάντες πιο μικρές γιατι τις έχεις κάνει Stretch και φαίνονται ασχημα στο netbook, αρα υποθέτω σε μεγάλο υπολογιστή θα χειροτερεύει η κατάσταση.

Και τέλος το Contact HHH βαλτο στο footer και όχι κάτω απο το κείμενο, είναι καλό οι πληροφορίες επαφής να είναι εμφανείς σε όλες τις σελίδες-υποσελίδες.

 

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

[Blondeamon]

Ευχαριστώ παιδιά, θα ακολουθήσω τις συμβουλές σας και μέχρι αύριο θα το έχω σε καλύτερη μορφή. Θα ποστάρω τα αποτελέσματα.

 

---------- Προσθήκη στις 20:37 ---------- Προηγούμενο μήνυμα στις 13:51 ----------

 

1)Παίδες έβγαλα τη γραμματοσειρά και έβαλα verdana παντού. Καλύτερα?

 

2) Άλλαξα και το background αλλά δεν ξέρω ποιο είναι καλύτερο. Ποιο απο τα 2 παρακάτω?

 

α) http://i45.tinypic.com/3007alj.jpg

β) http://i45.tinypic.com/epkk1j.jpg

 

3) Προσπαθώ μισή ώρα να βάλω αυτο το flash στο footer αλλά ακόμα δεν τα κατάφερα, καμια ιδέα? http://www.hydraulichammerhire.com/temp/b_banner.swf

 

---------- Προσθήκη στις 21:26 ---------- Προηγούμενο μήνυμα στις 20:37 ----------

 

Link fixed.

 

10 χαρακτήρες

[poscaman]

Ευχαριστώ παιδιά, θα ακολουθήσω τις συμβουλές σας και μέχρι αύριο θα το έχω σε καλύτερη μορφή. Θα ποστάρω τα αποτελέσματα.

 

---------- Προσθήκη στις 20:37 ---------- Προηγούμενο μήνυμα στις 13:51 ----------

 

1)Παίδες έβγαλα τη γραμματοσειρά και έβαλα verdana παντού. Καλύτερα?

 

2) Άλλαξα και το background αλλά δεν ξέρω ποιο είναι καλύτερο. Ποιο απο τα 2 παρακάτω?

 

α) http://i45.tinypic.com/3007alj.jpg

β) http://i45.tinypic.com/epkk1j.jpg

 

3) Προσπαθώ μισή ώρα να βάλω αυτο το flash στο footer αλλά ακόμα δεν τα κατάφερα, καμια ιδέα? http://www.hydraulichammerhire.com/temp/b_banner.swf

 

---------- Προσθήκη στις 21:26 ---------- Προηγούμενο μήνυμα στις 20:37 ----------

 

Link fixed.

 

10 χαρακτήρες

 

1. Αρκετά καλύτερα νομίζω

2. Νομίζω πως καλύτερο είναι το πρώτο, αν και πλέον πάει να γίνει ντεμοντέ το ξύλο στις σελίδες (πριν περίπου κανα χρόνο έπαιζε πολύ)

[Ros_Original]

Λοιπόν σίγουρα έχει βελτιωθεί αισθητά. Από χρώμα τόσο εγώ (όσο και η κοπέλα μου που έχει σαφώς καλύτερη αισθητική από μένα) προτιμώ το σκούρο.

 

Σχεδιαστικά, το About το έχεις επιλεγμένο στο μενού οπότε είναι περιττό να έχεις και τίτλο που γράφει About. Μπορείς να το αφαιρέσεις και να κερδίσεις περίπου 40-50 pixels (υπερ-πολύτιμος χώρος είδικα ψηλά στην σελίδα σου).

 

Η ημερομηνία μπορεί να φύγει και η αυξομείωση της γραμματοσειράς να μεταφερθεί τέρμα δεξιά.

 

Στην κορυφή στον χώρο που έχεις διαθέσιμο μπορείς να βάλεις ένα logo που θα περιέχει και την φίρμα όπως είπε και ο "Παππούς" το οποίο μάλιστα μπορεί να είναι λινκ στην αρχική σελίδα άρα να αφαιρέσεις και το Home από το μενού.

 

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

 

Φιλικά,

Ros

[v5net]

το σκούρο χρώμα προτιμώ κι εγώ.

 

ταιριαζει και καλύτερα με το χαρακτήρα της σελίδας.

 

γερανοί,υδραυλικά,τσιμέντο,βαριά πράγματα...το ξυλο δεν του πάει

[zinas]

Θα σε ξενερώσω λίγο, αλλά για καλό είναι ότι σου πω.

 

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

 

Εγώ αυτό που θα σου πρότεινα είναι να αγοράσεις ένα template από το themeforest.net, κάτι που θα σου κοστίσει 15 εώς 25 δολάρια, ένα εξευτελιστικά μικρό ποσό.

 

Να μερικά παραδείγματα που πέτυχα πρώτα πρώτα, χωρίς ψάξιμο.

 

http://themeforest.net/item/podium-clean-and-eleganth-business-template/full_screen_preview/103989

http://themeforest.net/item/pangoo/full_screen_preview/99519

http://themeforest.net/item/blacklight-universal-template/full_screen_preview/100448

 

Σύγκρινέ τα με το δικό σου και πες μου αν αξίζει να το σχεδιάσεις εσύ. Αν πάλι το κάνεις για να μάθεις, μπορείς να εκπαιδευτείς πάνω σε ένα προσωπικό σου site και όχι στο site μιας εταιρείας.

 

Φιλικά πάντα

[derasto]

Θα σε ξενερώσω λίγο, αλλά για καλό είναι ότι σου πω.

 

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

 

Εγώ αυτό που θα σου πρότεινα είναι να αγοράσεις ένα template από το themeforest.net, κάτι που θα σου κοστίσει 15 εώς 25 δολάρια, ένα εξευτελιστικά μικρό ποσό.

 

Να μερικά παραδείγματα που πέτυχα πρώτα πρώτα, χωρίς ψάξιμο.

 

http://themeforest.net/item/podium-clean-and-eleganth-business-template/full_screen_preview/103989

http://themeforest.net/item/pangoo/full_screen_preview/99519

http://themeforest.net/item/blacklight-universal-template/full_screen_preview/100448

 

Σύγκρινέ τα με το δικό σου και πες μου αν αξίζει να το σχεδιάσεις εσύ. Αν πάλι το κάνεις για να μάθεις, μπορείς να εκπαιδευτείς πάνω σε ένα προσωπικό σου site και όχι στο site μιας εταιρείας.

 

Φιλικά πάντα

Συμφωνο με τον φιλο απο πανω.

Το 2ο σιτε μου αρεσει πολυ.

Προτεινω να σκεφτεις ενα τετοιο template,πιο επαγγελματικο.

[Ros_Original]

Zinas και Derasto έχετε ως ένα βαθμό δίκιο όσον αφορά το εικαστικό κομμάτι (γραφικά, εικόνες, χρώματα κλπ). Από άποψη εργονομίας και ευχρηστίας όμως τα "επαγγελματικά" templates πάσχουν καθώς δεν σχεδιάζονται με γνώμονα τον χρήστη. Π.χ. το πρώτο που προτείνεις το Podium έχει τα 2 πρώτα από τα 4 "προβλήματα" που ανέφερα στο πρώτο μου ποστ στο συγκεκριμένο θέμα.

 

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

 

---------- Προσθήκη στις 14:01 ---------- Προηγούμενο μήνυμα στις 13:59 ----------

 

Double post due to Chrome crash...

[zinas]

Zinas και Derasto έχετε ως ένα βαθμό δίκιο όσον αφορά το εικαστικό κομμάτι (γραφικά, εικόνες, χρώματα κλπ). Από άποψη εργονομίας και ευχρηστίας όμως τα "επαγγελματικά" templates πάσχουν καθώς δεν σχεδιάζονται με γνώμονα τον χρήστη. Π.χ. το πρώτο που προτείνεις το Podium έχει τα 2 πρώτα από τα 4 "προβλήματα" που ανέφερα στο πρώτο μου ποστ στο συγκεκριμένο θέμα.

 

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

 

---------- Προσθήκη στις 14:01 ---------- Προηγούμενο μήνυμα στις 13:59 ----------

 

Double post due to Chrome crash...

 

Λοιπόν, έχουμε και λέμε...

 

Πρώτον δεν πρότεινα συγκεκριμένα αυτά τα 3 site. Είπα απλά ότι ήταν τα πρώτα που έκρινα όμορφα, χωρίς ιδιαίτερο ψάξιμο.

 

Δεύτερον, μια χαρά είναι το μενού στο πρώτο. Κάθε link καταλαμβάνει αρκετό χώρο στην οθόνη ώστε να μην "γλυστράει" έξω από αυτό ο cursor και το χάνεις. Ιδανικά θα έπρεπε να έχει και ένα timeout ώστε να μην κλείνει αμέσως, αλλά κι έτσι δεν με χαλάει.

 

Τρίτον. Αναφέρεσαι στο πρώτο post σου, στο να φαίνεται όσο περισσότερη πληροφορία στην πρώτη σελίδα. "Above the fold" που λένε και στο χωριό του Βαϊμάκη. Αυτό είναι μία φιλοσοφία που υπήρχε 5 χρόνια πριν. Πλέον κυριαρχεί το negative space (aka whitespace) τα μεγάλα fonts και οι εντυπωσιακές εικόνες. Ένας μεγάλος τίτλος και μια όμορφη εικόνα, είναι αρκετά για να γεμίσουν το πρώτο πράγμα που βλέπει ο χρήστης. Επίσης, το Cuber που έχει στο template είναι πολύ "της μόδας" τελευταία και είναι πανέμορφο και ότι πρέπει για να δημιουργήσεις μία πάρα πολύ θετική πρώτη εντύπωση στον επισκέπτη. Στη βιτρίνα δεν χρειάζεται να έχεις όλο το μαγαζί. Αρκεί να έχεις ένα πολύ καλό δόλωμα.

[Ros_Original]

Λοιπόν, έχουμε και λέμε...

 

Πρώτον δεν πρότεινα συγκεκριμένα αυτά τα 3 site. Είπα απλά ότι ήταν τα πρώτα που έκρινα όμορφα, χωρίς ιδιαίτερο ψάξιμο.

 

Το σχόλιο μου ήταν γενικότερο και δεν είχε σκοπό να θίξει τις συγκεκριμένες επιλογές. Επίσης ένα καλό template μπορεί με λίγο tweaking να γίνει και ιδιαίτερα εύχρηστο.

 

Δεύτερον, μια χαρά είναι το μενού στο πρώτο. Κάθε link καταλαμβάνει αρκετό χώρο στην οθόνη ώστε να μην "γλυστράει" έξω από αυτό ο cursor και το χάνεις. Ιδανικά θα έπρεπε να έχει και ένα timeout ώστε να μην κλείνει αμέσως, αλλά κι έτσι δεν με χαλάει.

 

Σχετικά με τα drop-down menus, το παρακάτω σχόλιο του Nielsen περιγράφει απόλυτως το πρόβλημα που αντιμετωπίζει ο μέσος χρήστης:

"Drop-down menus are often more trouble than they are worth and can be confusing because Web designers use them for several different purposes. Also, scrolling menus reduce usability when they prevent users from seeing all their options in a single glance"

[πηγή: Nielsen about Drop-Down menus]

 

Τρίτον. Αναφέρεσαι στο πρώτο post σου, στο να φαίνεται όσο περισσότερη πληροφορία στην πρώτη σελίδα. "Above the fold" που λένε και στο χωριό του Βαϊμάκη. Αυτό είναι μία φιλοσοφία που υπήρχε 5 χρόνια πριν. Πλέον κυριαρχεί το negative space (aka whitespace) τα μεγάλα fonts και οι εντυπωσιακές εικόνες. Ένας μεγάλος τίτλος και μια όμορφη εικόνα, είναι αρκετά για να γεμίσουν το πρώτο πράγμα που βλέπει ο χρήστης. Επίσης, το Cuber που έχει στο template είναι πολύ "της μόδας" τελευταία και είναι πανέμορφο και ότι πρέπει για να δημιουργήσεις μία πάρα πολύ θετική πρώτη εντύπωση στον επισκέπτη. Στη βιτρίνα δεν χρειάζεται να έχεις όλο το μαγαζί. Αρκεί να έχεις ένα πολύ καλό δόλωμα.

 

Σαφώς και δεν πρέπει να συμπεριλάβεις όλο το περιεχόμενο του site σου στην αρχική σελίδα, αλλά είναι πιο χρήσιμο να δώσεις σαν σχεδιαστής "έτοιμο/μασημένο" περιεχόμενο στον χρήστη στην πρώτη ματιά, παρά να του δείξεις μια εικόνα και μετά να τον "αναγκάσεις" να ψάξει μόνος του (μέσω την πλοήγησης του site) για αυτό που τον ενδιαφέρει.

 

Κλείνοντας, πρακτικές που δουλεύαν καλά τα τελευταία 5-10 χρόνια και εξακολουθούν να δουλεύουν, δεν πρέπει να θεωρούνται παροχυμένες απλά και μόνο λόγο ηλικίας. Αντιθέτως, κατά την προσωπική μου εκτίμηση, πρέπει να λαμβάνονται υπόψιν κατά την διάρκεια της σχεδίασης γιατί μπορούν να προσφέρουν και το έχουν ήδη αποδείξει.

[zinas]

Σχετικά με τα drop-down menus, το παρακάτω σχόλιο του Nielsen περιγράφει απόλυτως το πρόβλημα που αντιμετωπίζει ο μέσος χρήστης:

"Drop-down menus are often more trouble than they are worth and can be confusing because Web designers use them for several different purposes. Also, scrolling menus reduce usability when they prevent users from seeing all their options in a single glance"

[πηγή: Nielsen about Drop-Down menus]

Αντιπαραθέτεις τι είπε ο Nielsen το 2000? Επίσης, διάβασε το ποστ μου ξανά. Δεν είπα για όλα τα drop downs, μίλησα για ένα συγκεκριμένο. Άμα θες, εξήγησέ μου που είναι το λάθος στο συγκεκριμένο drop down και γιατί είναι δύσχρηστο.

 

Σαφώς και δεν πρέπει να συμπεριλάβεις όλο το περιεχόμενο του site σου στην αρχική σελίδα, αλλά είναι πιο χρήσιμο να δώσεις σαν σχεδιαστής "έτοιμο/μασημένο" περιεχόμενο στον χρήστη στην πρώτη ματιά, παρά να του δείξεις μια εικόνα και μετά να τον "αναγκάσεις" να ψάξει μόνος του (μέσω την πλοήγησης του site) για αυτό που τον ενδιαφέρει.

Θα προσπαθήσω να σου εξηγήσω γιατί αλλάζουν κάποια πράγματα. Ο μέσος χρήστης πλέον δεν διαβάζει μία σελίδα, αλλά απλά την σκανάρει για το αν τον ενδιαφέρει. Για ένα τέτοιο site (γιατί τα πάντα εξαρτώνται και από το αντικείμενό σου), πολύ περιεχόμενο "above the fold" έχει αντίθετο αποτέλεσμα από αυτό που θες να πετύχεις. Επίσης, ο μέσος χρήστης πλέον ξέρει να scrollarει. Και το κάνει. Κατά τη γνώμη μου, η πληροφορία που είναι απαραίτητο να βρίσκεται πάνω πάνω είναι το navigation menu, το λογότυπο και για την πρώτη σελίδα και μόνο, αρκετή πληροφορία ώστε να καταλαβαίνεις περί τίνος πρόκειται. Από εκεί και πέρα βάζεις ότι νομίζεις ότι θα "πουλήσει" περισσότερο.

 

Κλείνοντας, πρακτικές που δουλεύαν καλά τα τελευταία 5-10 χρόνια και εξακολουθούν να δουλεύουν, δεν πρέπει να θεωρούνται παροχυμένες απλά και μόνο λόγο ηλικίας. Αντιθέτως, κατά την προσωπική μου εκτίμηση, πρέπει να λαμβάνονται υπόψιν κατά την διάρκεια της σχεδίασης γιατί μπορούν να προσφέρουν και το έχουν ήδη αποδείξει.

Πρώτον δεν μιλάμε για τεχνικές, μιλάμε για design. Και όχι, δεν πρέπει να εφαρμόζονται στο design πράγματα που ίσχυαν κάποτε, αλλά δεν ισχύουν τώρα. Τα πράγματα αλλάζουν. Όπως το παράδειγμα με το scroll που είπα πριν. Κάποτε δεν καναν, τώρα κάνουν. Κάποτε τα site βασίζονταν στο 800χ600 σε λίγο καιρό, ακόμα και το 1024χ768 θα είναι ξεπερασμένο. Έρχεται σιγά σιγά HTML5 και CSS3. Σε αυτό το χώρο οι αλλαγές έρχονται με πολύ γρήγορους ρυθμούς.

[Uberalles_gr]

Ο Blondeamon ζήτησε μία άποψη για το site του και το post έχει εξελιχτεί σε μία ανούσια αντιπαράθεση...

 

Χαλαρώστε.....

 

Προσωπικά δεν μου αρέσει το ότι χρησιμοποιείς διαφορετικές γραμματοσειρές καθώς και το size αυτών...

Κατά τα άλλα είναι πολύ καλύτερο και όλο βελτιώνεται εικαστικά....