Το web design αποτελεί την εμφάνιση μιας ιστοσελίδας στο διαδίκτυο, είναι το μέσο με το οποίο θα εντυπωσιάσουμε και θα προσελκύσουμε νέους επισκέπτες στην ιστοσελίδα μας. Με τον καιρό τα trends αλλάζουν και ένα website πρέπει να ανανεώνεται συχνά έτσι ώστε να παραμένει σύγχρονο λειτουργικό και να υποστηρίζει τις νέες τεχνολογίες.
Σε αυτό το topic θα μαζέψω μερικά από τα πιο ενδιαφέροντα links και blogs που σίγουρα θα σας δώσουν ιδέες για να βελτιώσετε την εμφάνιση της ιστοσελίδας σας. Θα προσπαθήσω να τα χωρίσω σε κατηγορίες και να τα ενημερώνω οπότε βρίσκω κάτι καινούριο και ενδιαφέρων. Τα links θα περιλαμβάνουν διαφορά θέματα από typography μέχρι ενδιαφέροντα javascript που θα ζωντανέψουν το περιεχόμενο σας.
__TOC__
Inspiration
Σίγουρα θα έχετε δει κάποιες σελίδες που σας έχουν εντυπωσιάσει με τον σχεδιασμό και την λειτουργικότητα τους όμως όταν πάτε να ξεκινήσετε τον σχεδιασμό το μυαλό σας κολάι και κοιτάτε για ώρα την οθόνη χωρίς αποτέλεσμα. Εμένα πάντως μου έχει τύχει. Σε αυτό το section του άρθρου θα μαζέψω μερικά χρήσιμα Links που θα σας βοηθήσουν να βρείτε την χαμένη σας έμπνευση.
Χρωματικές παλέτες
Το kuler είναι ένα flash site της adobe που περιλαμβάνει χιλιάδες χρωματικές παλέτες αξιολογημένες και βαθμολογημένες από τους χρηστές. Σκοπός του site είναι να σας βοηθήσει να επιλέξετε το κατάλληλο χρώμα για την ιστοσελίδα σας. Σας έχει αναλυτικά τους χρωματικούς συνδυασμούς και σας δίνει τους hex codes ώστε να τους εισάγετε στο σχεδιαστικό σας πρόγραμμα.
Από τις αγαπημένες μου ιστοσελίδες, είναι παρόμοιο με το kuler αλλά αυτό εδώ δεν σταματάει μονό στα χρώματα. Περιλαμβάνει patterns, pallets και ανάλυση των χρωμάτων σε διαφορές καλοσχεδιασμένες ιστοσελίδες.
Η ιδέα του daily color scheme είναι ότι κάθε μέρα γίνεται ανάλυση μιας χρωματικής παλέτας. Είναι εξαιρετική ιστοσελίδα και περιέχει έναν αξιοσημείωτο αριθμό χρωμάτων.
Αυτό εδώ δεν έχει να κάνει τόσο με τις παλέτες αλλά ασχολειται με την προσβασιμότητα (Accessibility). Βοηθοί να βρείτε τα κατάλληλα χρώματα ώστε να διευκολύνετε τα άτομα που έχουν μερική αχρωματοψία.
Resources
Αφού ξεμπερδέψαμε με τους χρωματικούς συνδυασμούς ήρθε η ώρα να ανοίξουμε το Photoshop ή οποίο άλλο πρόγραμμα χρησιμοποιούμε για ξεκινήσουμε τον σχεδιασμό μας. Σε αυτό το σημείο καλό είναι να έχουμε μερικά καλά resources όπως patterns, brushes και textures, layouts ώστε να κάνουμε την ζωή μας πιο εύκολη και να μην σχεδιάζουμε από την αρχή πράγματα που ήδη υπάρχουν ελεύθερα στο internet.
Photoshop patterns
Το BgPatterns είναι ένα εργαλείο που μπορείτε να δημιουργήσετε τα δικά σας patterns με έναν αρκετά εύκολο generator. Περιλαμβάνει 68 σχεδία που μπορείτε να τα τροποποιήσετε ώστε να τα φέρετε στις δικές σας ανάγκες.
Άλλος ένας generator μονό που αυτήν την φορά ασχολειται αποκλειστικά με ρίγες (stripes).
Το DeviantArt αποτελεί ένα από τα μεγαλύτερα (ίσως το μεγαλύτερο) web gallery γραφιστικής και τεχνών. Μια από τις κατηγορίες του είναι αυτή των resources και σε αυτήν την περίπτωση των photoshop patterns. Εδώ θα βρείτε μια τεραστία συλλογή από patterns που έχουν φτιάξει άλλοι χρηστές και μπορείτε να χρησιμοποιήσετε στις δημιουργίες σας.
Smashing Magazine Collection
Αν ασχολείστε με το web design η την γραφιστική τότε σίγουρα θα έχετε ακούσει το smashing magazine. Είναι μια ιστοσελίδα που περιλαμβάνει αρκετά ενδιαφέρον θέματα γύρω από τον χώρο του web και της σχεδίασης. Σε αυτό το post έχουν συμπεριλάβει μια πολύ καλή συλλογή από patterns που σίγουρα θα σας φανούν χρήσιμες.
Icons
Δεν συνηθίζω να χρησιμοποιώ πολλά έτοιμα εικονίδια στις ιστοσελίδες μου οπότε σε αυτόν τον τομέα δεν έχω αρκετή εμπειρία. Μερικά όμως που χρησιμοποιώ είναι κάποια από τις παρακάτω συλλογές που είναι αρκετά καλοσχεδιασμένες και όμορφες.
Photoshop Brushes
Το απόλυτο site για brushes, έχει τεραστία συλλογή και εύχρηστο μενού που μπορείτε να βρείτε αυτό που ψάχνετε πολύ εύκολα. Δεν υπήρχε φορά που να έψαξα κάτι και να μην το βρήκα.
Textures & Stock Images
Περιλαμβάνει μια αρκετά πλούσια συλλογή από χρήσιμα textures διαφορετικού είδους (Rust, Water, Wood Κλπ) και μεγάλης ανάλυσης.
Το stock Exchange εχει μια συλλογή από stock φωτογραφίες. Δηλαδή φωτογραφίες και γραφικά που οι δημιουργοί τους σας παραχωρούν τα δικαιώματα χρήσης τους με κάποιους ορούς. Η τεραστία βάση του περιλαμβάνει από πορτρέτα και φωτογραφίες μέχρι γραφικά και textures.
Άλλη μια συλλογή του smashing magazine, περιέχει μερικά πολύ όμορφα και χρηστικά textures που σίγουρα θα δώσουν μια νέα υφή στις ιστοσελίδες που θα κατασκευάσετε.
CSS
Μια πολύ καλή συλλογή από css layouts του
, δεν είναι templates αλλά layouts. Δηλαδή σας δίνουν μονό το προσχέδιο ενός web site και το μετατρέπετε φτιάχνοντας ένα λειτουργικό web site.
Design & Typography
Σε αυτήν την στήλη θα προσπαθήσω να συμπεριλάβω μερικά από τα πιο διάσημα trends που υπάρχουν αυτόν τον καιρό στο διαδίκτυο.
Trends για το 2009 (Πηγή smashing Magazine)
1. PNG transparency
Παρόλο που ο Internet explorer 6 δεν υποστηρίζει πλήρως τα png η τεχνολογία των transparent png ανέβηκε αρκετά και όλο και περισσότεροι άρχισαν να την χρησιμοποιούν. Με αυτόν τον τρόπο μπορούμε να κάνουμε το περιεχόμενο μας να ξεχωρίσει από το background και να το κάνει πιο ευκολοδιάβαστο στο μάτι μας.
2. Big typography
Εδώ δεν νομίζω ότι χρειάζεται να το αναλύσω πολύ, αυτόν τον καιρό είδα σε παρά πολλά sites τυπογραφία άνω των 36pt και παρατήρησα ότι εκτός από το font-size οι designers έριξαν βάρος στα line-height αλλά και στην σωστή επιλογή των fonts. Αυτό εχει σαν αποτέλεσμα "καθαρότερα" και πιο όμορφα websites που τραβούν αμέσως την προσοχή και το ενδιαφέρων
3. Font replacement
Τα safe fonts που μπορούμε να χρησιμοποιήσουμε είναι πολύ λίγα και συχνά φτάνουμε σε ένα αδιέξοδο και συμβιβαζόμαστε με κάποιο font που δεν μας αρέσει. Για να λυθεί αυτό το πρόβλημα έρχεται το font replacement οπού είναι μια τεχνική που χρησιμοποιείς τα fonts που θες χωρίς να υπάρχει η ανάγκη να είναι και στο pc του client. Τα παραπάνω γίνονται χρησιμοποιώντας flash η βάζοντας σε png's και gif's το κείμενο που θέλουμε.
4. Carousels (slideshows)
Τα carousels είναι ένας τύπος slideshow που χρησιμοποιείται αρκετά αυτές τις μέρες, εχει το πλεονέκτημα ότι είναι αρκετά όμορφο στο μάτι αλλά και λειτουργικό. Συνήθως εχει μονό 2 επιλογές πλοήγησης μια για αριστερά και η άλλη για δεξιά, με αυτόν τον τρόπο δεν μπερδεύει τον χρηστή αλλά του σώζει και περιττό χρόνο.
5. The Magazine Look
Οι τεχνολογίες εκτύπωσης και η γραφιστική περνάνε στο web design δημιουργώντας όμορφα και απλά designs. Συνήθως χρησιμοποιούνται σε μεγάλα blogs, portfolios και προσωπικές ιστοσελίδες.
Περισσότερα trends για το 2009 θα βρείτε
Νέα καινοτόμα websites
Ένα σωστό background μπορεί να προβάλει καλυτέρα το κείμενο μας και να κάνει την ιστοσελίδα μας να ξεχωρίσει. Σε αυτήν την ιστοσελίδα η ιδέα για το background ταιριάζει απόλυτα με το θέμα και σε κάνει να θες να εξερευνήσεις όλο το site.
Ο δημιουργός αυτού του site εχει κάνει εντυπωσιακή δουλειά στην κατηγορία των articles. Έχει ορίσει στο κάθε άρθρο διαφορικό layout και παρόλο που τα layouts αλλάζουν συνεχεία καταφέρνει και διατηρεί το κείμενο του όμορφο και λειτουργικό.
Από τα πιο εντυπωσιακά sites που έχω δει, το site χρησιμοποιεί javascript και δημιουργεί μια ολόκληρη πόλη. Η μεταφορές ανάμεσα στα sections της σελίδας είναι ομοιόμορφες και όλο μαζί φτιάχνει ένα πολύ πρωτότυπο και λειτουργικό αποτέλεσμα.
Το animeted navigation και τα sliding sections φτιάχνουν μια αρκετά εντυπωσιακή και περιεκτική σελίδα. To background δένει ομοιόμορφα με το κυρίως θέμα και δίνει έναν τόνο πολυτελείας σε όλη την ιστοσελίδα.
10 συστατικά που πρέπει να έχουμε στο μυαλό μας την ώρα του web design
Πώς σκέφτονται οι επισκέπτες;
Οι επισκέπτες μιας ιστοσελίδας δεν διαφέρουν πολύ από τους επισκέπτες ενός καταστήματος. Οι επισκέπτες μπαίνουν στην σελίδα και κάνουν κλικ στο 1ο link που θα τραβήξει το ενδιαφέρον τους. Στην πραγματικότητα δεν κοιτάνε όλη την σελίδα αλλά μερικά μικρά τμηματικά κομμάτια. Οι περισσότεροι ψάχνουν κάτι ενδιαφέρον η κάτι που να πατιέται, αν το link που θα βγουν δεν τους καλύπτει πατάνε πίσω και ξαναψάχνουν. Παρακάτω κλέπτετε τι κοιτούν οι χρηστές όταν μπαίνουν σε μια σελίδα (με κόκκινο είναι αυτά που προσέχουν πιο πολύ).
1) Μην κάνετε τους επισκέπτες σας να σκέφτονται.
Συμφωνά με τον 1ο νομό του krug (που εχει γράψει και ένα πολύ καλό βιβλίο παρεμπίπτοντως
), όταν σχεδιάζουμε μια σελίδα πρέπει να βγάλουμε ότι μπορεί να μπερδέψει και να κουράσει τους χρηστές. Οι επισκέπτες αν δουν την σελίδα μας δύσκολη και ακατανόητη, θα πατήσουν back και θα πάνε αλλού, οπότε εμείς πρέπει να έχουμε καθαρό layout, links που να ξεχωρίζουν και σωστό και λειτουργικό design.
2) Μην παίζετε με την υπομονή των επισκεπτών.
Σίγουρα όλοι θα έχετε επισκεφτεί κάποιο web site οπού ζητάει από την αρχή register και η φόρμα του απαιτεί την εισαγωγή των ιδίων στοιχειών ξανά και ξανά. Η φόρμες στις ιστοσελίδες σας πρέπει να είναι απλές και σύντομες, εχει παρατηρηθεί ότι όσο πιο απλή είναι μια φόρμα τόσο πιο εύκολα ένας τυχαίος χρηστής που έρχεται στο site σας θα κάνει εγγραφή. Παρακάτω μπορείτε να δείτε ένα παράδειγμα μιας απλής και λειτουργικής φόρμας.
3) Τραβήξατε την προσοχή των επισκεπτών.
Το ανθρώπινο μάτι δέχεται ερεθίσματα από κείμενα εικόνες και κινούμενες εικόνες (βίντεο) κάποια από αυτά τραβάνε περισσότερο την προσοχή και κάποια λιγότερο. Σίγουρα πιο "χτυπητό" στο μάτι είναι οι εικόνες οπότε καλό είναι να τις χρησιμοποιούμε όταν θέλουμε να τραβήξουμε την προσοχή του χρηστή αλλά δεν πρέπει να το παρακάνουμε γιατί στο τέλος ο χρηστής θα καταλήξει μπερδεμένος. Παρακάτω βλέπουμε ένα site που εφαρμόζει τελεία αυτόν τον κανόνα, ο επισκέπτης το 1ο πράγμα που βλέπει είναι η λέξη free οπού θα τον κάνει να ψάξει πιο προσεκτικά το site με σκοπό να βρει το δωρεάν προϊόν η υπηρεσία.
4) Βοηθήστε τους επισκέπτες σας να καταλάβουν πώς λειτουργεί το site σας.
Πόσες φορές σας εχει τύχει να πάτε σε κάποια ιστοσελίδα και να πατήσετε x επειδή δεν καταλάβατε πως λειτουργεί; Εμένα μου εχει τύχει αρκετές φορές, το ίδιο και οι επισκέπτες σας. Για αυτό πρέπει να τους βοηθήσετε όσο πιο πολύ μπορείτε, χρησιμοποιήστε χρώματα που να κάνουν αντίθεση και να είναι ευκολοδιάβαστα στα κείμενα σας και οπού έχετε links σχεδιάστε όμορφα buttons. Θα διευκολύνει τους επισκέπτες σας και θα κάνει την ζωή τους στο site σας αρκετά πιο εύκολη.
5) Υιοθετήστε ένα σωστό τρόπο γραφής.
Ο κόσμος του διαδίκου διαφέρει αρκετά άλυπο αυτόν της τυπογραφίας και της εκτύπωσης και για αυτόν τον λόγω πρέπει να υιοθετήσετε έναν διαφορετικό τρόπο γραφής από αυτόν που είχατε μέχρι τώρα. Συνοδέψατε το κείμενο σας με όμορφα backgrounds και σωστά τοποθετημένα κείμενα και αφήστε στην άκρη τα πολυχρησιμοποιημένα bold και italic. Δεν λέω ότι δεν πρέπει να τα χρησιμοποιείτε απλά πρέπει να υπάρχει πάντα ένα μέτρο. Επίσης σημαντικό είναι να έχετε ξεκάθαρες εκφράσεις και να αποφύγετε τους marketing ορούς πχ είναι καλύτερο ο επισκέπτης να δει το "Εγγραφείτε τώρα" από το "Αρχίστε τώρα" η το "Ανακαλύψατε τις υπηρεσίες μας". Παρακάτω είναι μια ιστοσελίδα που εφαρμόζει πολύ σωστά αυτόν τον κανόνα, δίνει στους επισκέπτες αυτό ακριβώς που ψάχνουν και δεν τους κουράζει με άσκοπα κείμενα και μεγάλες φράσεις.
6) Κρατήστε τη σελίδα σας απλή.
Αυτός θα πρέπει να είναι ο βασικός κανόνας σας όταν σχεδιάζετε μια ιστοσελίδα, πρέπει να είναι απλή και κατανοητή. Οι επισκέπτες σας σπάνια μένουν σε μια ιστοσελίδα που εχει μονό καλό και εντυπωσιακό design. Η σελίδα πρέπει να είναι απλή και αυτός που έρχεται για 1η φορά ότι ηλικίας και αν είναι να βρίσκει άνετα τις πληροφορίες που θέλει.
7) Μην φοβάστε τους άδειους χώρους.
Οι κενοί χώροι όχι μονό θα κάνουν την σελίδα σας γρηγορότερη (αυτό ισχύει μονό σε ορισμένες περιπτώσεις) αλλά θα ξεκουράσουν τα ματιά του επισκέπτη και θα τον καθοδηγήσουν που είναι το περιεχόμενο και που πρέπει να εστιάσει την προσοχή του.
8) Επικοινωνήστε με τους επισκέπτες σας με μια «εικονική γλωσσά».
Με τον ορό εικονική γλωσσά αναφέρομαι στην συνολική εικόνα της ιστοσελίδα σας και το τι λέει για εσάς στον επισκέπτη. Ο
εχει ορίσει τα 3 συστατικά της επικοινωνιακής γλωσσάς
-
ΟργάνωσηΠαρέχετε στον επισκέπτη καθαρή δομή, συνεπεία στην σελίδα σας και ιεραρχικά τοποθετημένα τα στοιχειά (κείμενα, εικονες, πολυμέσα) σας.
-
ΟικονομίαΌπως είπα και παραπάνω κρατήστε την σελίδα σας απλή και αναιρέστε οτιδήποτε περιττό. Η σελίδα σας πρέπει να εχει 4 κυρία χαρακτηριστικά:Αφαιρετικότητα (Simplicity)Να έχετε μονό τα απαραίτητα στοιχειά.Καθαρότητα (Clarity)Όλα τα στοιχειά της σελίδα σας πρέπει να είναι έτσι σχεδιασμένα ώστε να μην μπερδεύουν.Distinctiveness(Διακριτικότητα; Δεν είμαι σίγουρος για τον Ελληνικό ορό
)Όλα τα στοιχειά πρέπει να ξεχωρίζουν και να είναι διακριτά.Έμφαση (Emphasis)Τα πιο σημαντικά στοιχειά πρέπει να τονίζονται και να ξεχωρίζουν από το υπόλοιπο σύνολο. -
ΕπικοινωνίαΚατασκευάστε την σελίδα σας έχοντας υπ' όψιν το κοινό που απευθύνεστε και για κανένα λόγο μην χρησιμοποιείτε πάνω από 3-4 διαφορετικούς τύπους γραφής.
9) Κάντε συμβιβασμούς με το προηγούμενο design σας αλλά και τους χρηστές σας.
Όταν φτάνει η ώρα να επανασχεδιάσετε την ιστοσελίδα σας, καλό θα ήταν να κάνετε λίγες αλλαγές την φορά αν αυτό είναι δυνατό. Έτσι διευκολύνετε τους χρηστές σας να προσαρμοστούν στην νέα σελίδα σας. Επίσης σημαντικό ίνα να έχετε υποψιών σας τις ανάγκες και τις προτάσεις των επισκεπτών της ιστοσελίδας σας. Ακουστέ τις απόψεις τους και εφαρμοστέ την γνώμη σας σε περιπτώσεις που νομίζετε ότι η ιδέα σας είναι καλύτερη από την δικιά τους.
10) Test, test, test!
Πριν δημοσιεύσετε κάτι δοκιμάστε το σε όλα τα πιθανά προβλήματα που μπορεί να προκύψουν. Επίσης μην αμελείτε τα website σας, είναι πολύ σημαντικό να δοκιμάζετε αν λειτουργούν σωστά και τι αλλαγές θα πρέπει να κάνετε για να βελτιωθεί η εικόνα τους.
Κατασκευή ιστοσελίδων με την χρήση του Photoshop
Το Photoshop, εκτός από ένα εκπληκτικό πρόγραμμα επεξεργασίας, μπορεί να χρησιμοποιηθεί για να σχεδιάσουμε τις δικές μας ιστοσελίδες. Η διαδικασία αυτή αποτελείται από 2 μέρη. Το πρώτο είναι ο σχεδιασμός και το 2ο είναι το slicing (κόψιμο) του template που θα δημιουργήσουμε, ώστε να το κάνουμε λειτουργικό. Παρακάτω έχω συγκεντρώσει μερικά χρήσιμα tutorials που σας καθοδηγούνε από την αρχή ώστε να σχεδιάσετε την σελίδα έτσι όπως την έχετε φανταστεί.
Δημιουργία template
Slice και δημιουργία HTML-CSS
Χρήσιμα blogs και ιστοσελίδες
Ελληνικά
Αγγλικά
Επόμενες προγραμματισμένες προσθήκες.
- 10 συστατικά της τυπογραφίας στο web designing
- Javascripts που πρέπει να έχετε υπόψιν
Changelog
28-05-2009 Κατασκευή ιστοσελίδων με την χρήση του Photoshop.