Στοιχεία Web Design Που Δεν Πρέπει Να Παραβλέπετε

VN:F [1.9.22_1171]
Rating: 5.0/5 (3 votes cast)
FavoriteLoadingΠροσθήκη στα Αγαπημένα μου
17/12/2012 από
Zeoz

Όταν έχουμε να κάνουμε με το design και την κατασκευή websites, προσπαθούμε να φτιάξουμε τα πάντα όσο το δυνατόν πιο γρήγορα.

Λαμβάνοντας υπόψη αυτό το γρήγορο ρυθμό, πολλές μικρές λεπτομέρειες που τελικά απαιτούνται για την κατασκευή των websites συχνά παραλείπονται από τη διαδικασία του design. Οι λεπτομέρειες αυτές, μπορεί να είναι μείζονος σημασίας και να είναι αυτές τελικά που θα οδηγήσουν το website στο αποκορύφωμα.

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

Αν και πολλοί προγραμματιστές ενδιαφέρονται για το design, ο designer είναι αυτός που επιφορτίζεται το σχεδιασμό της ιστοσελίδας και είναι τελικά αυτός που σχεδιάζει όλα αυτά τα στοιχεία. Ο προγραμματισμός των elements (ακόμα και για τις πιο μικρές διαφορές) μπορεί να έχει σοβαρές επιπτώσεις στην ποιότητα του τελικού προϊόντος.

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

1. Links

links

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

Συμπεριλαμβάνουμε τις ακόλουθες καταστάσεις για όλα τα links στη σελίδα:

• Normal
Αυτή είναι η προεπιλεγμένη κατάσταση ενός link. Δηλαδή αυτό που  γίνεται όταν δεν κάνουμε click ή δείχνουμε σε μια διεύθυνση URL που ο χρήστης έχει ήδη επισκεφθεί. Αυτή είναι μια μορφή συνδέσμου που η πλειοψηφία των σχεδιαστών πάντα καλύπτει.

• Visited
Αυτό είναι ένα link που ο χρήστης το έχει επισκεφτεί.

• Active
Ένα ενεργό link είναι αυτό που επί του παρόντος ο χρήστης έχει πατήσει. Οι περισσότεροι προγραμματιστές θα αναπαράγουν την κατάσταση hover αν το ύφος δεν τους παρέχεται.

• Hover
Τέλος, η κατάσταση hover είναι ποια είναι η κατάσταση του link όταν βάλουμε το mouse πάνω του. Αυτή και η κατάσταση normal είναι αυτά τα οποία οι περισσότεροι σχεδιαστές προετοιμάζουν.

Μια λεπτομέρεια που συχνά παραβλέπεται είναι ότι αυτές οι διαφορετικές καταστάσεις θα πρέπει να προγραμματιστούν για όλα τα σημεία ενός website. Για παράδειγμα, πολλές ιστοσελίδες έχουν σκούρο body σε ανοιχτόχρωμο φόντο, αλλά αντιστρέφεται στο footer. Θα πρέπει να προγραμματίσουμε όλα τα πλαίσια των συνδέσμων που βρίσκονται στην σελίδα μας.

2.Φόρμες

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

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

Δύο από τα πιο σημαντικά ζητήματα, για μια φόρμα είναι τα εξής:

• Διαμόρφωση Ετικετών (Form label)
Οι φόρμες συνήθως συλλέγουν προσωπικά δεδομένα που οι χρήστες διστάζουν να μοιραστούν. Ως εκ τούτου, η ορθή ενημέρωση των χρηστών για τον ακριβή σκοπό των φορμών αυτών είναι συνετό να γίνει.

• Πεδία εισόδου και ετικέτες (Input fields and labels)
Δεύτερον, σχεδιάζουμε το πώς τα πεδία εισαγωγής της φόρμας θα ορίζονται στη σελίδα και πώς οι ετικέτες για αυτά τα πεδία θα έχουν κάποια μορφή και θα προσανατολίζονται σε σχέση αυτά.

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

Ας ρίξουμε μια ματιά σε ένα πολύ καλό παράδειγμα:

form

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

Ο σχεδιασμός μορφών, μας οδηγεί σε πολλές διαπιστώσεις.

3. Χρήση των Buttons

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

• Default
Αυτή είναι η προεπιλεγμένη κατάσταση ενός κουμπιού. Οι περισσότεροι designers καλύπτουν αυτό, αλλά αφήνουν τα άλλα.

• Hover
Η κατάσταση hover φαίνεται όταν ο χρήστης περνάει το mouse πάνω από το κουμπί. Αυτή η κατάσταση είναι χρήσιμη για να δείξει στον χρήστη ότι το κουμπί είναι ένα actionable αντικείμενο.

• Click
Μόλις ο χρήστης κάνει κλικ στο κουμπί, αυτή η κατάσταση του δείχνει οπτικά ότι το έχει πατήσει.

• Disabled
Η απενεργοποιημένη κατάσταση ενός κουμπιού είναι ίσως το λιγότερο που χρησιμοποιείται, αλλά μπορεί να είναι πολύ χρήσιμο για τους προγραμματιστές. Σπάνια αυτή η κατάσταση σχεδιάζεται, εκτός εάν το προβλέψει ο σχεδιαστής.

button_states

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

4.Φόρμα επικύρωσης (Form validation)

Μια σημαντική λεπτομέρεια είναι τα Form validation. Είναι το σημείο όπου η ιστοσελίδα συναντά τις απαιτήσεις των χρηστών και τα σφάλματα σε μια φόρμα.
Υπάρχουν τρία βασικά πράγματα για να έχετε υπόψιν:

• Υποχρεωτικά πεδία
Όλα τα πεδία που απαιτούνται θα πρέπει να αναφέρονται. Πιο συχνά, αυτό γίνεται με έναν αστερίσκο.

form-validation

• Real-time validation
Κάποια επικύρωση μπορεί να γίνει εκείνη τη στιγμή καθώς ο χρήστης συμπληρώνει τη φόρμα. Αυτό το είδος της επικύρωσης ενημερώνει το χρήστη όσο το δυνατόν γρηγορότερα για οποιοδήποτε πρόβλημα έχει δημιουργηθεί με τα δεδομένα που έχουν εισαχθεί. Μπορείτε να δείτε το παρακάτω παράδειγμα:

realtime-validation

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

postback-error

5. Μηνύματα κατάστασης: σφάλματα, προειδοποιήσεις, επιβεβαιώσεις,κλπ.

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

6. Επεκτείνοντας το φόντο σε μεγαλύτερες οθόνες

Ανάλογα με το ύφος της ιστοσελίδας, τα στοιχεία που βρίσκονται στο background θα μπορούσαν να είναι ένα πρόβλημα για τους προγραμματιστές μας. Τα περισσότερα backgrounds είναι απλά και δεν απαιτούν πολλή προετοιμασία, αλλά μερικά είναι περίπλοκα με μοτίβα, gradients, και εικόνες.

Λαμβάνοντας υπόψη ότι οι μεγάλες οθόνες γίνονται όλο και πιο σύνηθες φαινόμενο και ότι τα περισσότερα σχέδια προγραμματίζονται για 960-pixel-wide baseline, πολλοί μπορεί να έχουν πολύ μεγαλύτερες οθόνες. Αν το background μας περιλαμβάνει κάτι περίπλοκο, επιβάλλεται να σχεδιάσουμε το πώς θα επεκταθεί για να γεμίσει και τις μεγαλύτερες οθόνες.

7. Βάση στοιχείων HTML

Για τις ιστοσελίδες, ο σχεδιασμός και το στυλ των βασικών HTML στοιχείων είναι θεμελιώδεις και δεν πρέπει να παραβλέπονται.
Αυτά είναι: paragraphs, headings 1 έως 6, unordered και ordered lists, tabular data, form fields, εικόνες, bold και italicized text.

Ένα παράδειγμα βρίσκεται παρακάτω :

base-html

8. Website e-mails

Ένα πράγμα που δε βλέπουμε συχνά είναι σχέδιο από designers για website e-mails. Ένα τέτοιο βασικό στοιχείο είναι εύκολο να παραλειφθεί διότι δεν είναι το κύριο σημείο μιας ιστοσελίδας. Και όμως, το ηλεκτρονικό ταχυδρομείο είναι ένα ισχυρό εργαλείο που μπορεί να προωθήσει και να επεκτείνει μια υπηρεσία.

email

Ας διαβάσουμε προσεκτικά τα περιεχόμενα της ιστοσελίδας για κάθε e-mail που θα μπορούσε να σταλεί. Μερικά από τα πιο συνηθισμένα είναι:

• Επιβεβαίωση εγγραφής,
• Επιβεβαίωση εγγραφής mailing list,
• Επιβεβαίωση ολοκλήρωσης φόρμας (όπως σε μια φόρμα επικοινωνίας),
• Επαλήθευση παραγγελίας μετά την αγορά.

Αν θέλουμε να εντυπωσιάσουμε τους πελάτες και τους προγραμματιστές μας, ας ετοιμάσουμε ένα e-mail marketing template για την ιστοσελίδα. Θα παρέχει στους χρήστες μια ομαλή μετάβαση από την ιστοσελίδα στο φάκελο εισερχομένων, και θα διατηρήσουμε το branding στις διάφορες μορφές του.

9. Stretching σελίδας

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

extend-the-design extra-content

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

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

Animations: αναδυόμενα παράθυρα, tooltips, μεταβάσεις, κλπ.

tooltip

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

• Tooltips
Είναι εκείνα τα μικρά μικρά αναδυόμενα παράθυρα όταν οι χρήστες πατάνε τα στοιχεία αυτά.

• Image rotators
Ένα ευρύ φάσμα επιλογών είναι διαθέσιμο για μεταβάσεις και στυλ.

• Lightbox
Μπορούμε να αλλάξουμε όχι μόνο το ύφος στο lightbox αλλά και το transition σε αυτό.

Κάθε ένα από αυτά τα κινούμενα στοιχεία έχει ένα ξεχωριστό οπτικό στυλ.

Γιατί θα πρέπει να μας νοιάζει;

Πολλά από τα στοιχεία που παρουσιάζονται εδώ φαίνονται πιο χρήσιμα για τους προγραμματιστές από τους σχεδιαστές.

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

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








Hide ↑

Xtnd.it Group | e-xtend your possibilities

Ripple Effects με SVG και Javascript ~ Material Design 

18 September 2015

Ενα σε βάθος tutorial για το πώς να οικοδομήσουμε  ripple effect  που περιγράφονται με βάση των προδιαγραφών σχεδιασμού της Google και να τις συνδυάσουμε[…]

Read more...

5η Έκθεση για τις Υπηρεσίες Internet Web World Expo 2015

18 September 2015

 24-25 Οκτωβρίου – Ζάππειο Μέγαρο|  

Η WebWorldExpo[…]

Read more...

WordPress Greek Community 3rd meetup

21 April 2015

Τρίτη 28/04/2015, 18:00
THE HUB EVENTS, Αλκμήνης 5, Κ. Πετράλωνα

Η ελληνική κοινότητα του WordPress είναι εδώ! Αρκετό καιρό μετά το προηγούμενο meetup[…]

Read more...






Σχόλια

Δεν υπάρχουν σχόλια ακόμα.

Αφήστε ένα σχόλιο

 






RSS για τα σχόλια σε αυτό το άρθρο.  |  TrackBack URL



 
 
 

Eταιρείες παροχής υπηρεσιών διαδικτύου




 

Το Όραμά Μας

3d2 3d2

Η νέα εποχή ξεκινάει…

Είστε έτοιμοι;

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

Ξεκινάμε μια νέα εποχή για τα Ελληνικά δεδομένα. Κοιτάμε μπροστά και οραματίζομαστε το μέλλον με αισιοδοξία σε μία πολύ δύσκολη εποχή!

Αν είστε digital artist (web designer. web developer, programmer, 3d animator, graphic designer κτλ)  δώστε λίγα λεπτά από τον χρόνο σας να διαβάσετε το παρακάτω άρθρο. Σίγουρα σας ενδιαφέρει

 
web design forum

  • Προσεγγίστε νέους αναγνώστες και φίλους
  • Αποκτήστε το δικαίωμα να προωθήστε την σελίδα σας μέσω διαφημιστικών banner στο web design forum
  • Αποκτήστε συνδέσμους και backlinks δωρεάν
  • Αυτόματη προωθηση του άρθρου σας, σε διάφορες ιστοσελίδες κοινωνικής δικτύωσης.