Πολλές φορές όταν “ντύνουμε” ένα wordpress δεν μας αρκεί ένα template παρότι η αφθονία και η ποικιλία τους είναι τέτοια στο διαδίκτυο που είναι πολύ δύσκολο να μην βρεις κάτι που με τις κατάλληλες μετατροπές θα καλύψει τις ανάγκες τις δικές σας ή του πελάτη σας.
Σε αυτές όμως τις περιπτώσεις ο σχεδιασμός της ιστοσελίδας εκ του μηδενός είναι η λύση και φυσικά τότε μιλάμε για σχεδιασμό στο photoshop και …
την παραγωγή ενός αρχείου PSD το οποίο θα εφαρμοστεί επάνω στο WordPress Επειδή σε αυτήν την περίπτωση έχουμε δυο επαγγελματίες που θα συνεργαστούν , τον web designer που θα εργαστεί στο psd και τον coder που θα αναλάβει να εφαρμόσει αυτό στο wordpress είναι πολύ σημαντικό ο web designer να έχει υπόψη τους τις ακόλουθες πρακτικές συμβουλές.
Ονοματίστε και γκρουπάρετε τα layers: Πραγματικά είναι πολύ σημαντικό να μπορεί ο coder να μπορεί να κάνει hide/show τα διάφορα elements προκειμένου να αποσπά τα κομμάτια που επιθυμεί από το psd κάθε φορά. Για παράδειγμα ψάχνοντας τον φάκελο με το header όπου μέσα σε αυτόν θα βρίσκονται όλα τα layers με τα elements του header θα κάνει την εργασία μας πιο εύκολη απο το να έχουμε όλα τα layers σε μια λίστα χύμα και ειδικά αν τα ονόματα των layers είναι με default ονομασίες π.χ layer 4.
Βεβαιωθείτε ότι τα fonts που χρησιμοποιήσατε κάνουν για το web: Εαν δεν χρησιμοποιείτε μια standard γραμματοσειρά στο σχεδιαστικό σας (Helvetica, Arial, κ.τ.λ) τότε θα πρέπει να είναι μια γραμματοσειρά διαθέσιμη στο Google Web Fonts ή στα FontSquirrel’s font kits ή στο TypeKit .
Συμπεριλάβετε τα πάντα : Αν θέλετε dropdown menus, δώστε ένα σαφές παράδειγμα του πως θα φαίνονται αυτά τα menu στο on hover. Αν θέλετε rollover states στα εικονίδια σας, συμπεριλάβετε αυτά τα rollover state σε ένα ξεχωριστό layer group.
Επαναλαμβανόμενα πρότυπα: Εαν χρησιμοποιείτε για background μια επαναλαμβανόμενη εικόνα, ορίστε την ξεχωριστά μέσα στο design μέσω css.
Responsive design: Το Responsive design είναι όχι μόνο μια μόδα αλλά μια απαίτηση των νέων εποχών στην κατασκευή ιστοσελίδων. Αν είσαι ένας designer που θέλεις οι δημιουργίες σου να είναι responsive,πρέπει να συμεπεριλάβεις ενα layout για tablet και κινητό ώστε o developer που θα συνεχίσει την ανάπτυξη του project, να καταλάβει πως θέλεις να το “σπάσεις”. Τυπικά, υπάρχουν πολλές αλλαγές, ειδικά απο desktop σε mobile, που το να δουλέψεις ξεχωριστά την έκδοση desktop σε ενα responsive design γίνεται πολύ δύσκολο.
Σε τελική ανάλυση υπάρχουν μια σειρά βημάτων που πρέπει να ακολουθήσουμε προκειμένου να διευκολύνουμε την διαδικασία παραγωγής και μετατροπής ενός psd σε wordpress theme. Αν είστε ένας web designer ή έχετε μια εταιρεία web design και ενδιαφέρεστε για αυτό το γνωστικό αντικείμενο θα σας πρότεινα να ρίξετε απαραιτήτως μια ματιά στα Photoshop Etiquette
πηγή:wdf.gr – dreamweaver.gr