Σχεδιάζοντας το CSS3.gr - Τα εργαλεία
Τα εργαλεία που χρησιμοποιήθηκαν κατά τη σχεδίαση του CSS3.gr είναι λίγο ή πολύ γνωστά και δεδομένα: χαρτί, Photoshop, κάποιος text editor (προτίμησα το Coda).
Υπάρχει όμως τελικά κάποια σειρά με την οποία πρέπει να χρησιμοποιούνται αυτά; Οι απόψεις διΐστανται.
Οι περισσότεροι web designers ξεκινούν από το χαρτί, συνεχίζουν στο Photoshop μέχρι να βρουν την τελική μορφή του design τους και καταλήγουν στον text editor, όπου “μεταφράζουν” την έμπνευσή τους σε κώδικα.
Για μένα ήταν διαφορετικά.
“Έπαιξα” με το χαρτί, το Photoshop και τον κώδικα αρκετές φορές κατά τη διάρκεια του design. Καθώς το κομμάτι του κώδικα είναι το αγαπημένο μου, μεταπήδησα στον text editor μου αμέσως μετά το στάδιο του χαρτιού. Γύρισα στο Photoshop για να προσθέσω λεπτομέρειες. Ξαναγύρισα στο χαρτί για να σχεδιάσω τη μορφή κάποιων από τα modules του footer. Τα μετέφρασα σε κώδικα, μόνο για να τα ξανασχεδιάσω στο χαρτί καθώς τότε μόνο παρατήρησα τις real life δυσκολίες της προσέγγισης που είχα ακολουθήσει.
Με λίγα λόγια: χάος.
Όμως δεν αισθάνθηκα σε καμία περίπτωση χαμένη στη μετάφραση. Από ένα σημείο και μετά, η εικόνα στο μυαλό μου ήταν δεδομένη και έλειπαν οι λεπτομέρειες. Αυτές προσπαθούσα να τελειοποιήσω αλλάζοντας εργαλεία με ρυθμό πολυβόλου.
Τελικά, μετράει η σειρά με την οποία χρησιμοποιείς τα εργαλεία της δουλειάς σου;
Όπως διαπίστωσα κατά τη σχεδίαση του CSS3.gr, όχι ιδιαίτερα.
{23 σχόλια ως τώρα } + Νέο σχόλιο
klou
όταν δεν έχεις σχεδιάσει στο μυαλό σου το project, τότε θεωρώ πως το χαρτί είναι απαραίτητο.
Αν έχεις την εικόνα εκεί γιατί είσαι ενθουσιασμένος, γιατί δεν μπορείς να περιμένεις μέχρι να αρχίσεις να σχεδιάζεις, μπορείς να πάς κατευθείαν στο photoshop και να αρχίσεις τις version και τα save as και έπειτα text editor, βγάζοντας το χαρτί από τη μέση.
Αυτά για το βασικό layout. Για τα Modules, όντως χρειάζεται editor to photoshop and back.
nice work
Gerasimos
Προσωπικα ακολουθώ 2 τρόπους.
Με τον πρώτο όταν έχω ακριβώς την εικόνα στο κεφάλι μου απλά κάνω μια μουτζούρα στο χαρτί να ξέρω τι ακριβώς πάει που και καταλήγω σελίδα σελίδα στο Photoshop. Επειδή εγώ θα κάνω και την μετατροπή σε xhtml/css δεν ανοίγω καν editor για να δοκιμάσω πράγματα.
Ο δεύτερος (όταν δεν εχω ιδεα που θελω να καταληξω) έχει μπόλικο χαρτομάνι, με διάφορες ιδέες και πηγαινοέρχομαι χαρτί / photoshop.
Πάντως και σε αυτό το κομμάτι ισχύει το όπως την ακούει ο καθένας.
Apostolos
Λοιπόν καλή αρχή από μένα... Και καλή επιτυχία! Εύχομαι τα καλύτερα! Τo css3.gr είναι από τα καλύτερα ελληνικά projects που έχω δει! Congrats!
2 ερωτήσεις μόνο:
1) Στα “άρθρα” γιατί δεν υπάρχουν comments?
2) Γιατί δεν βασιστήκατε σε Wordpress? xD
Αυτά...
Καλή συνέχεια dudez!
George P
Ιδανικά, προτιμώ να έχω στα χέρια μου αρχικά μόνο το περιεχόμενο, χωρίς να σκεφτώ καν το design. Με βάση το περιεχόμενο και την ιεράρχησή του, γράφω την XHTML. Τι επιτυγχάνεται με αυτό; Καθαρός κώδικας, απαλλαγμένος από markup που αφορά τη σχεδίαση (βλ. Divitis
Η CSS έρχεται μετά, έχοντας σα σκοπό να δώσει στο περιεχόμενο τη μορφή που θέλω, προσέχοντας όσο είναι δυνατό να μην αλλοιώσει την σωστή δομή της HTML και να μην προστεθούν “άχρηστες” γραμμές κώδικα.
Στην πράξη, επειδή συνήθως οι πελάτες θέλουν να δουν κάποιο εικαστικό πρώτα, η διαδικασία αυτή είναι δύσκολο να εφαρμοστεί, ελπίζω όμως ότι σταδιακά θα καταφέρω να τη χρησιμοποιώ περισσότερο.
Ζαχαρένια Ατζιτζικάκη
@Apostolos
1) Τα σχόλια είναι μιας πρώτης τάξεως ευκαιρία για καλή και αρκετές φορές μακροσκελή συζήτηση. Ως εκ τούτου, γνώμη μας ήταν ότι θα αποπροσανατόλιζαν από τον καθαρά ενημερωτικό χαρακτήρα ενός άρθρου.
Πιστεύουμε ότι τα σχόλια έχουν τη θέση τους εδώ, στο blog, όπου τα πράγματα είναι περισσότερο άμεσα και χαλαρά.
Για οποιοδήποτε θέμα άλλωστε, μπορείς να επικοινωνήσεις μαζί μας μέσω της φόρμας.
2) Το ΕΕ ήταν μια ιδέα του Γιάννη Κ. και μέχρι τώρα έχει πάει καλά. Γιατί όχι;
Fotis Evangelou
Καλή αρχή παιδιά!
Χαίρομαι για την προσπάθεια που κάνετε, που αν μη τι άλλο, δείχνει ότι έχετε πάθος για αυτό που κάνετε.
Μικρή απορία: σε ποιο cms τρέχει το css3.gr? Αν δεν κάνω λάθος πρέπει να είναι το CMS Made Simple, σωστά?
Και πάλι, καλή συνέχεια... feed bookmarked!
Fotis Evangelou
Μάλλον είναι περασμένη η ώρα... LOL
Πολύ καλή δουλειά σε Expression Engine
dizzy_fingers
12 απλά βήματα για να κάνετε τη δουλειά σας:
1) Παίρνω την εντολή από την project manager εν μέσω μαστιγωμάτων και διαταγών.
2) Γκρινιάζω για τον ελάχιστο χρόνο που έχω για να διεκπεραιώσω τις χθεσινές επείγουσες-κάντο-χθες-δεν-έχουμε-χρόνο priorities (ή “pending issues” αν τα πράγματα είναι πολύ σοβαρά)
3) Ξανά μαστίγωμα και συμμόρφωσή μου.
4) Κάθομαι για 5’ στον υπολογιστή.
4) Πάω για number 1.
5) Ξανακάθομαι για 5’ μπροστά στον υπολογιστή.
6) Κλείνω τελικά το youtube και στρώνομαι στη δουλειά.
7) Πιάνω χαρτί.
8) Το κάνω σαΐτα και το πετάω στον flashά.
9) Ανταποδίδει.
10) Έρχεται ο administrator καθυστερημένα στη δουλειά.
11) Φορτώνω το project σε αυτόν και είναι έτοιμο - όποτε να’ναι, καθώς ο administrator έχει πάντα δουλειά και δεν τον παρεξηγούμε αν αργεί.
12) Ποστάρω στο css3 τη διαδικασία.
Vagelis
Πρώτα από όλα, συγχαρητήρια για την ιδέα (CSS3) και το αποτέλεσμα !
Στο άρθρο και το ερώτημα σου τώρα, μετά και από συζήτηση πάνω σε παρόμοιους προβληματισμούς που μας προκάλεσε στην o-some άρθρο της 37signals, καταλήξαμε πως για εμάς υπάρχουν 2 ήδη projects και άρα 2 προσεγγίσεις:
1. Project εντάσεως design, εκ του εντάσεως εργασίας ένα πράγμα, που από το χαρτί περνάμε στο photoshop, και μετά από 22 revisions εκεί, ακούς lexx?, στο coda
. Παράδειγμα, προσωπικά sites, εταιρικά sites, και λοιπές κατά βάση διαφημιστικές ενέργειες, που μεγαλύτερο ρόλο παίζει η εικόνα.
2. Projects μη εντάσεως design, δηλαδή web apps, sites που κυριαρχεί η τυπογραφία (αλήθεια γιατί το photoshop δεν έχει κάποια επιλογή να κάνει render της γραμματοσειρές όπως το mozilla engine, ή το webkit να κάνουμε την δουλειά μας;) και πάσης φύσεως λοιπά projects που το mockup καταλήγει πεταμένα λεπτά & λεφτά
.
Τώρα η 3η διαδικασία που ακολούθησες, φαίνεται πως είναι ιδιαίτερα αποδοτική σε content oriented projects, thumbs up! φαίνεται πιο διασκεδαστική και αποτελεσματική εδώ
Συγχαρητήρια σε όλους σας και πάλι,
Vagelis
Apostolos
@Ζαχαρένια
Οκ. Βλέπω το σκεπτικό και βλέπω και ότι έχετε δίκιο.
Χεχε
Το EE όπως το είδα καλό μου φάνηκε. Απλά το είχα σαν απορία επειδή όλοι είστε βασισμένοι στο WP για το personal blogs σας.
Anyhow thumbs up! Keep up the good work!
Γιάννης Κωνσταντακόπουλος
@Apostolos
Όχι όλοι
Το δικό μου site είναι εδώ κι αρκετό καιρό ΕΕ powered.
Το ΕΕ κατά τη γνώμη μου είναι πολύ δυνατότερο του Wordpress, γιατί δεν είναι εστιασμένο στο να είναι μια καλή μηχανή για blogging, αλλά στο να κάνει περισσότερα πράγματα, παραμένοντας εύχρηστο.
PanosJee
Μεγεία και καλή συνέχεια παιδιά!
Εγώ πάω χαρτί -> GIMP -> CSS -> xHTML και στην πορεία στο coding μου βγαίνουν τα περισσότερα
στο GIMP βγάζω το εντελώς γενικό απέξω layout
Qwertys
Olo to site einai vasismeno se EE?
Γιάννης Κωνσταντακόπουλος
Ναι. Όλο είναι υλοποιημένο με EE.
(Με την ευκαιρία, να πω για μια διόρθωση που έγινε στο site. Πιθανόν, ακολουθώντας ένας επισκέπτης εγγεγραμμένος στα RSS Feeds, τόσο στο Blog όσο και στα Άρθρα, το link του Feed να κατέληγε στην σελίδα 404 του site. Τώρα πια αυτό έχει λυθεί.
Όσοι φίλοι αντιμετωπίσατε αυτό το πρόβλημα, μπορείτε να κάνετε Refresh στα Feed σας και θα διορθωθεί.
Άλλη εναλλακτική λύση είναι να διαγράψετε το Feed και να εγγραφείτε από την αρχή.
Ευχαριστούμε και συγνώμη για την αναστάτωση.)
Qwertys
Θα μπορούσατε να γράψετε ένα άρθρο-tutorial στα ελληνικά για το ee;
Γιάννης Κωνσταντακόπουλος
Θα το έχουμε υπόψη μας Qwertys. Ευχαριστούμε για την ιδέα.
Qwertys
okζ..θα περιμένω
papaman
καλή αρχή και από μένα! Το team είναι φοβερό και νομίζω ότι μια κοινότητα web design/development χρειάζεται σίγουρα...
... ααα έχω και μια ερώτηση να κάνω στον Γιάννη επί τη ευκαιρία.
Γιάννη προσπαθώ να κάνω μια σελίδα σε Frontpage φυσικά και θέλω να βάλω την καθιερωμένη μουσική στην intro page (wav, 5mb). Πως θα γίνει να παίζει αυτόματα αφού πρώτα τελειώσει ένα μικρό (245kb) gif animation;
cheers
Γιάννης Κωνσταντακόπουλος
Αντώνη καλώς ήλθες.
Γι’ αυτό που θες, μάλλον πρέπει να κάνεις κάτι με Flash.
Αλλά είσαι σίγουρος ότι θες και animated gif και ήχο (ο οποίος φυσικά θα διακόπτεται όταν ο επισκέπτης αλλάζει σελίδα);
Εγώ θα προσπαθούσα στη θέση να αποφύγω τον ήχο τουλάχιστον.
Ζαχαρένια Ατζιτζικάκη
Επίσης, αγαπητέ μου papaman, 5mb μουσικής και 245kb animation δεν θεωρούνται ακριβώς “μικρά”, ακόμα και με τις υπερσύγχρονες (γκουχ) συνδέσεις που έχουμε σήμερα.
papaman
ρε παιδιά sorry άλλα έκανα πλάκα
καλά βρε Γιάννη είναι δυνατόν να προσπαθώ να κάνω σελίδα σε Frontpage; Απορώ πως ακόμη μου μιλάς μετά απ’αυτό και μάλιστα προσπαθείς να μου βρεις και λύση
Ζαχαρένια γουστάρω που ακούω για Coda! δυστυχώς δεν έχω ακόμη Mac και δεν μπορώ να το δουλέψω, όταν αποκτήσω όμως θα γίνει must.
και κάτι άσχετο. Στην αρχή του post υπάρχει ένα link για το Coda, όπου αν πλησιάσω το mouse στο κάτω μέρος του σε Firefox 3.0.3 (win) αρχίζει να αναβοσβήνει... τρελό έτσι; Δοκιμάστε το και θα δείτε. Είδα λίγο τον κώδικα και νομίζω ότι συμβαίνει λόγο του border στο a:hover.
Γιάννης Κωνσταντακόπουλος
Με έπιασες.
1-0 Αντώνη. Θα το θυμάμαι όμως
Ζαχαρένια Ατζιτζικάκη
@papaman
Πάλι καλά
Όσο για το Firefox θέμα, το γνωρίζουμε. Είναι λόγω του border στο link, αλλά δεν ξέρω αν είναι δικό μας πρόβλημα τελικά - μόνο στον Firefox 3 συμβαίνει απ’ότι ξέρω.
Θα το κοιτάξουμε όμως περαιτέρω, αν είναι τόσο ενοχλητικό.
Thanks για την ειδοποίηση