Κάν’το όπως ο Mark
Μερικές φορές βρίσκεις την έμπνευση στα πιο μικρά πράγματα και τη χάνεις στα πιο μεγάλα.
Προσπερνώντας CSS galleries, showcases με τα 2.048 καλύτερα δείγματα Web 2.0 Design και τα 4.096 καλύτερα grunge headers, εγώ τη βρήκα σε έναν τρόπο δουλειάς, όπως αυτός διαφαίνεται από μερικά mockups.
Αναγνώστη, μπες στον κόσμο της πραγματικά οργανωμένης δουλειάς Web Design: δες τη δουλειά του studio του Mark Boulton για το καινούριο site του Drupal.
Πολλά μου προξένησαν το ενδιαφέρον στη συγκεκριμένη δουλειά και με έκαναν πραγματικά να πω, hey, μ’αρέσει τελικά αυτό που κάνω.
Καταρχήν, η ορατή εξέλιξη του design από στάδιο σε στάδιο. Βλέπουμε ένα simple HTML mockup που με απλές αλλαγές μεταμορφώνεται σιγά σιγά σε ένα site prototype - αυτή είναι η μαγεία.
Επιπλέον, μου αρέσει που είναι HTML και όχι κάποιο στατικό mockup στο Photoshop. Πάντα θεωρούσα την HTML πιο αρμόζουσα για live mockups από μια απλή εικόνα - επιπλέον, μου αρέσει πολύ περισσότερο να γράφω κανόνες CSS παρά να κυνηγάω layers δεξιά και αριστερά με το ποντίκι.
Τέλος, αυτό που με άφησε άφωνη είναι το ποσοστό της δουλειάς που πήγε στην παρουσίαση των mockups. Καταγράφονται αναλυτικά οι λεπτομέρειες κάθε αλλαγής και με notes και απλά Javascript tricks δίνονται οι διαφορετικές “φάσεις” της διάδρασης.
Πήγε στα bookmarks μου κατευθείαν, το θεωρώ εξαιτερικά γοητευτικό να αναλύω τον τρόπο δουλειάς των άλλων, πόσο μάλλον όταν πρόκειται για τόσο μεγάλα studios.
Ελπίζω να σας φανεί ενδιαφέρον - έστω και λίγο.
{5 σχόλια ως τώρα } + Νέο σχόλιο
Αλέξανδρος Λίγγρης
Σε κάνει να θες να φτιάξεις site εδώ και τώρα. Πολύ ωραία η ιδέα του να αρχειοποιήσει τα στάδια και εξαιρετικό link!!
Προσωπικά δεν έχω αποφασίσει αν με βολεύει το photoshop πρώτα ή κατευθείαν σε html. Προς το παρόν το κάνω ανάλογα το site. Θα ήθελα πάρα πολύ να γίνει ένα εκτενές debate επί του θέματος.
Δημητρης Γιώτας
Ενδιαφέρον σύνδεσμος. Και σκεφτόμουνα ερχόμενος προς την δουλειά πόσο ενδιαφέρον θα είχε να μπορούσα να δω τη διαδικασία που ακολουθούν πολλοί από τους designers που ακολουθώ, για να δω ομοιότητες ή διαφορές.
Πάντως το debate “Photoshop VS HTML” καλά κρατεί. Προσωπικά θεωρώ καλό να ξεκινάς με HTML για να δώσεις τα όρια και το σχήμα και μετά να πας στο Photoshop ώστε να δίνει τις μικρές λεπτομέρειες που κάνουν την διαφορά.
Σεμπαστιάν Νικολάου
Δε θεωρώ ότι πρέπει απαραίτητα να ξεκινάμε από HTML ή Photoshop.
Το καλύτερο είναι το χαρτί. Είναι το πιο γρήγορο απ’ όλα, εκεί παίρνει εύκολα σχήμα και όρια, και ορίζεται το IA σε γενικές γραμμές.
Από κει και πέρα, μπορεί να αναπτυχθεί το HTML prototype, ή/και ταυτόχρονα να σχεδιαστεί στο Photoshop. Αυτό εξαρτάται από το τι έχει τη περισσότερη δουλειά. Σε ένα portal ή ένα site με πολύ περιεχόμενο, βλέπε drupal.org, αξίζει να δώσει σημασία στο prototype, γιατί πολλά αλλάζουν στο IA, πράγμα χρονοβόρο να γίνει στο Photoshop.
Από την άλλη, σε ένα site που βασίζεται σε ένα layout με περισσότερο design, ένα τυχαίο παράδειγμα http://31three.com, ίσως είναι καλύτερα να σχεδιαστεί στο Photoshop πρώτα. Πολλές φορές ένα site δε χρειάζεται το Photoshop μόνο για τις μικρές λεπτομέρειες που θα κάνουν τη διαφορά, αλλά και για ένα συνολικό layout που θα μπορούσε να σχεδιαστεί πιο ελεύθερα και δημιουργικά παρά με HTML/CSS.
Γιάννης Τσεβδός
Φανταστικό post Sugar! Φοβερό το τελικό αποτέλεσμα ενώ η ιδέα με τα διάφορα στάδια είναι πολύ έξυπνη και προσεγμένη! Στο θέμα PSD Vs HTML τείνω προς την άποψη του Σεμπαστιάν, δηλαδή σε άλλα site πρέπει να ξεκινάμε από το Photoshop και σε άλλα σε HTML.
Ζαχαρένια Ατζιτζικάκη
Θα έλεγα ότι συμφωνώ με το Δημήτρη.
Εκτός κι αν το site είναι καθαρά showcase, δεν καταλαβαίνω γιατί *πρέπει* να περάσει από Photoshop πρώτα.
Η μέθοδός μου είναι πρώτα χαρτί, μετά HTML. Συνήθως.
Χαίρομαι που βρήκατε το link χρήσιμο.