Μέχρι στιγμής ο πραγματικός ιστότοπος δεν μοιάζει καθόλου με τον σχεδιασμό του Photoshop. Σε αυτό το screencast ανακαλύπτουμε να κάνουμε ακριβώς αυτό, ξεκινώντας από την κορυφή με την περιοχή κεφαλίδας και λογότυπου. Είναι ωραίο να έχουμε λίγο «πραγματικό» ξεκίνημα στην κατασκευή του ιστότοπου οπτικά.
Χρησιμοποιούμε το Frank DeLoupe ως εργαλείο επιλογής χρωμάτων, το οποίο είναι όμορφα ενσωματωμένο στο Photoshop (κάνει το χρώμα που επιλέγετε το ενεργό χρώμα στο Photoshop, καθώς και αντιγράφηκε στο πρόχειρο σας).
Σε ένα σημείο αλλάζουμε τη διαμόρφωση Sass / Compass για να μεταγλωττίσουμε το CSS :expanded αντί :compressedνα βλέπουμε το πραγματικό CSS να δημιουργείται για λόγους εντοπισμού σφαλμάτων.
Πρέπει να χρησιμοποιήσουμε λίγο το μυαλό μας σχετικά με το πώς θα τοποθετηθούν τα πράγματα και θα αντιδράσουμε στη ρευστή φύση ενός παραθύρου του προγράμματος περιήγησης. Για παράδειγμα, το αρχείο καταγραφής πρέπει πάντα να αγγίζει την επάνω αριστερή γωνία.
Κάνουμε πάρα πολλά πράγματα γύρω από τις τιμές για να κάνουμε τα πράγματα σωστά, καθώς και να προσθέτουμε μικρές λεπτομέρειες εδώ και εκεί για να κάνουμε τα πράγματα να φαίνονται καλύτερα, όπως να προσθέτουμε ελαφρές σκιές στο εφέ στοίβας χαρτιού.