porcupine colors

porcupine colors

ΑρχικήJournal › Σε 18 ώρες: πώς δημιουργήθηκε το νέο porcupinecolors.com

Σε 18 ώρες: πώς δημιουργήθηκε το νέο porcupinecolors.com

Πριν λίγες μέρες έβγαλα μια νέα έκδοση για το αγγλικό μου site. Ήταν κάτι που ήθελα να κάνω εδώ και καιρό. Ο διαθέσιμος χρόνος που είχα ήταν περίπου δύο εργάσιμες μέρες. Αν θα έβγαινε, θα έβγαινε σε αυτό το χρόνο. Αλλιώς θα έμενε ως είχε.

porcupine colors

Τα specs

Κάθε project για να έχει πιθανότητες να πετύχει πρέπει να έχει συγκεκριμένα specifications. Στην περίπτωση αυτή τα specs ήταν καλά καθορισμένα εδώ και καιρό.

  • Θα ήταν ένα single page website (για πολλούς λόγους - αλλά αυτό είναι μια άλλη κουβέντα)
  • Θα έπρεπε να μη μοιάζει με όλα τα single page websites που είναι στη μόδα
  • Φυσικά, θα ήταν responsive
  • Θα έπρεπε να είναι γρήγορο

Πώς προέκυψαν οι 18 ώρες

18 ώρες μετρημένες. Αλλά πώς προέκυψαν αυτές;

Research

Παρότι κάθε designer έχει στην αποθήκη του μια λίστα από ενδιαφέρουσες ιδέες υλοποιημένες σε διάφορα websites, πάντα ξεκινάς από αυτό. Είχα ένα πολύ καθαρό πλάνο για το βασικό layout, αλλά μου έλειπαν κάποιες λεπτομέρειες.

Χρόνος: 1 ώρα

Σχεδιασμός σε static μορφή

Ο αρχικός σχεδιασμός έγινε στο Sketch, το οποίο είναι το βασικό μου περιβάλλον για static design. Εκεί σχεδιάστηκαν σε μεγάλο βαθμό οι πρώτες ενότητες. Τη στιγμή που άρχισαν να μην προχωράνε τα πράγματα αβίαστα, το άφησα με σκοπό να κλείσουν οι όποιες εκκρεμότητες όταν έρθει η ώρα του HTML.

Χρόνος: 3 ώρες

HTML & CSS

Αμέσως ό,τι είχε σχεδιαστεί στατικά μεταφέρθηκε σε επίπεδο κώδικα.
Αυτό έγινε πάρα πολύ γρήγορα και το Codekit βοήθησε πολύ. Σύντομα συνειδητοποίησα ότι υπήρχαν αρκετά σημεία όπου ο κώδικας θα μπορούσε να είναι πιο αόριστος (να είναι δηλαδή γραμμένος ώστε να αφορά όσο το δυνατόν περισσότερα elements) και πιο εύελικτος. Αποφάσισα να μη λυπηθώ χρόνο για την παράμετρο αυτή, αρκεί να γίνει σωστά η δουλειά.

Ταυτόχρονα, οι εκκρεμότητες που υπήρχαν σε επίπεδο design έκλεισαν κι αυτές.

Χρόνος: 4 ώρες

Image editing

Το οπτικό υλικό παίζει μεγάλο ρόλο στο site. Άρα η επιλογή των εικόνων έπρεπε να είναι πολύ προσεκτική.
Περίμενα ότι αυτό θα έβγαινε εύκολα, αλλά είχα κάνει λάθος. Ήταν η πιο δύσκολη φάση του project με πολλές δοκιμές και συνεχείς αλλαγές μέχρι το αποτέλεσμα να είναι σωστό.

Χρόνος: 4 ώρες

Animation

Ήθελα να υπάρχει animation στο site, αλλά αυτό το animation να είναι ελαφρύ και διακριτικό. Να είναι αρκετά εμφανές ώστε να γίνει αντιληπτό, αλλά κι αρκετά “αόρατο” ώστε να μην κουράσει. Δοκίμασα μεν λίγες JavaScript βιβλιοθήκες αλλά πολλές παραλλαγές του animation μέχρι να καταλήξω.

Χρόνος: 2 ώρες

Responsive

Προέκυψε σχεδόν αυτόματα, καθώς ήταν έτοιμο ως ιδέα από την πρώτη στιγμή που ολοκληρώθηκε ο σχεδιασμός.

Περίμενα ότι θα έβρισκα περισσότερες δυσκολίες, αλλά η extra προσπάθεια που δόθηκε στο σωστό HTML & CSS, “έβγαλε τα λεφτά της” και μου έδωσε πίσω το χρόνο που είχε καταναλωθεί εκεί.

Χρόνος: 2 ώρες

Βελτιστοποίηση στην ταχύτητα του site

Από τη στιγμή που η εικόνα παίζει κυρίαρχο ρόλο σε ένα single page website, το optimization στην ταχύτητα έπρεπε να είναι σκληρό.
Οι εικόνες βελτιστοποιήθηκαν με δύο εργαλεία και έχουν μέσο “βάρος” 72KB. Το minified CSS είναι 18ΚΒ, η HTML 15ΚΒ και η minified JavaScript 8KB.

Από εκεί και πέρα έκανα μια σειρά ακόμα από μικρές αλλά σημαντικές βελτιστοποιήσεις σε διάφορα επίπεδα, που βοήθησαν. Το Google PageSpeed και διάφορα άλλα αντίστοιχα εργαλεία είναι ευχαριστημένα από το αποτέλεσμα.

pageSpeed

Για να βελτιωθεί ακόμα περισσότερο ο χρόνος θα μπορούσα να αποφύγω τα fonts μέσω Typekit, αλλά αυτό δεν ήμουν διατεθειμένος να το κάνω. Η προσεγμένη τυπογραφία ήταν, είναι και θα είναι πάντα ένα από τα πιο σημαντικά στοιχεία ενός καλού website.

Χρόνος: 2 ώρες

Επίλογος

Το sprint αυτό μου έμαθε ότι το να στήνεις ένα site, έστω ένα single page site, σε 18 ώρες δεν είναι καθόλου εύκολο πράγμα. Όμως είναι μια προπόνηση που αξίζει τον κόπο και με το παραπάνω. Κερδίζεις πολλά σε αυτή τη μικρή διαδρομή π.χ. αυτοπειθαρχία, οργάνωση, συγκέντρωση κ.α. και τα περισσότερα από αυτά δεν τα συναντάς σε μεγάλα projects.

Ευχαριστώ πολύ το Δημήτρη, τη Γιούλη, το Μιχάλη και το Βαγγέλη για το χρόνο, τις ιδέες και τις συμβουλές τους.

To Journal

Επιστροφή στην κεντρική του Journal.

Ενα απο τα Projects μας

Myst

MYST

Ανάπτυξη e-shop στην online πλατφόρμα Shopify

Σχεδιάζουμε κι αναπτύσσουμε websites & apps που κερδίζουν. Τι σημαίνει αυτό; Σημαίνει ότι τα έργα μας είναι ελκυστικά, προσεγμένα και εξελίσσονται με το χρόνο. Το πιο σημαντικό: είναι κερδοφόρα για εσάς. Γιατί αν τα καταφέρετε εσείς, νικάμε όλοι.

Μια απρόσμενη βοήθεια από την iwantmyname Το δύσκολο και καλό 2015