Projects · Case study 01 · Portfolio site · Αθήνα
saavet designs
Το site του στούντιο που σχεδιάζει τα περισσότερα sites αυτού του portfolio. Ένα portfolio που δείχνει τη διαδρομή, όχι μόνο το τελικό: σκίτσα, δοκιμές, παλέτες, reels και ένα sketchbook που ξεφυλλίζεται. Το σχεδίασε η ίδια, το χτίσαμε εμείς.
Το ζητούμενο
Ένα σπίτι για τη δουλειά της, με όλη την ιστορία.
Η saavetdesigns σχεδιάζει ταυτότητες, sites και social, και τα περισσότερα sites που βλέπεις εδώ ξεκίνησαν από τα δικά της mockups. Μέχρι τώρα η δουλειά της φαινόταν κυρίως στο Instagram, κομμένη σε τετράγωνα. Έλειπε ένα μέρος όπου φαίνεται και το πώς έφτασε ως εκεί: το πρώτο σκίτσο, οι δοκιμές που δεν πέρασαν, η παλέτα, το τελικό.
Ζητούμενο: ένα site που μοιάζει με το τετράδιό της, με χαρτί, χειρόγραφα και σημειώσεις στο περιθώριο, αλλά ανοίγει γρήγορα, διαβάζεται άνετα στο κινητό και της αφήνει να ανεβάζει μόνη της projects και σημειώσεις. Και ναι, η designer ήταν ο πιο απαιτητικός πελάτης που είχαμε.
- 01
Κάθε project, μια ιστορία
Σκίτσο, δοκιμές, τελικό, εφαρμογή. Κάθε σελίδα project ξεδιπλώνει τη διαδρομή με τη σειρά που έγινε, μαζί με την παλέτα και τα μεγέθη του λογότυπου.
- 02
Το χέρι της, παντού
Τα χειρόγραφα του site είναι τα δικά της γράμματα, που έγιναν γραμματοσειρά από τις σελίδες της. Σημειώσεις, βελάκια και υπογραμμίσεις, όπως στο τετράδιο.
- 03
Κίνηση χωρίς βάρος
Το σήμα ζωγραφίζεται μόνο του, τα reels παίζουν χωρίς ήχο και φορτώνουν όταν φτάσεις σε αυτά. Πολλή εικόνα, και το site μένει γρήγορο.
01 · Η οπτική γλώσσα
Χαρτί, μελάνι και τα δικά της γράμματα.
Το σήμα της, δύο καμπύλες σε δύο τόνους πράσινου, ζωγραφίζεται μπροστά σου στην αρχική. Οι τίτλοι είναι σε Alegreya, τα κείμενα σε Alegreya Sans, και οι σημειώσεις στο περιθώριο στη saavet note, μια γραμματοσειρά φτιαγμένη από τον δικό της γραφικό χαρακτήρα. Πράσινο φασκόμηλου για τη βάση, ώχρα για την τελεία, τερακότα για τα χαρτάκια.
- Χαρτί με υφή, χαρτάκια με ταινία και σελίδες τετραδίου αντί για κάρτες.
- Οι υπηρεσίες σε λίστα με κουτάκια, τσεκαρισμένα ένα ένα.
- Κάθε project κρατά μέσα στη σελίδα του τα δικά του χρώματα και τις γραμματοσειρές του.
Design: saavetdesigns
saavet note για τα χειρόγραφα · Alegreya για τίτλους · Alegreya Sans για κείμενο
02 · Η αρχική
Γεια, είμαι η saavet.
Η αρχική συστήνεται σε πρώτο πρόσωπο. Το σήμα ζωγραφίζεται, δίπλα του ένα χειρόγραφο «σήμα» με βελάκι, και από κάτω όλο το στούντιο σε μία σελίδα: επιλεγμένα projects, motion & reels, πώς δουλεύει, τι κάνει, ποια είναι, οι τελευταίες σημειώσεις και ένα χαρτάκι για να της γράψεις.
- Κάθε κάρτα project κρύβει την παλέτα του, σαν βεντάλια χρωμάτων.
- Τα reels παίζουν μόνα τους, χωρίς ήχο, και σταματούν με ένα tap.
- Το «Ποια είμαι» λέει και την άλλη της γλώσσα, τη μουσική: ρυθμός, αρμονία, πειθαρχία, ακρόαση.
03 · Τα projects
Από το πρώτο σκίτσο ως το live.
Κάθε project έχει δική του σελίδα και δικά του χρώματα, και λέει την ιστορία του από την αρχή: το πρώτο σκίτσο, οι δοκιμές, η παλέτα, το τελικό και πού χρησιμοποιήθηκε. Στα sites που χτίσαμε μαζί, όπως η Ηλιάνα, το A Place ApArt και το δικό μας goWebgo, η σελίδα κλείνει με το site live και το credit του development.
- Κάθε project έχει χρονιά, παλέτα και credits, και το ανεβάζει η ίδια από το admin της. Ένα νέο project παίρνει αμέσως κάρτα στην αρχική και δική του σελίδα.
- Όσα θέλουν κάτι παραπάνω αποκτούν δική τους διάταξη, όπως το «Η» της Ηλιάνας που ανοίγει σαν αυλαία.
- Κάθε σελίδα έχει τη δική της εικόνα για όταν τη μοιράζεσαι στα social.
04 · Sketchbook και σημειώσεις
Τα πρόχειρα, σε τετράδιο που ξεφυλλίζεται.
Το sketchbook είναι ένα τετράδιο με εξώφυλλο, περιεχόμενα και σελιδοδείκτες: 7 κεφάλαια και 29 σελίδες, από τις πρώτες γραμμές ως τα σκόρπια, με λεζάντα σε κάθε σκίτσο. Οι σημειώσεις είναι το blog της, με tips, νέα και λίγο process από το στούντιο.
- Βελάκια για να γυρίζεις σελίδα, και περιεχόμενα για να πας κατευθείαν σε κεφάλαιο.
- Τις σημειώσεις τις γράφει η ίδια από το admin, και φιλτράρονται σε process, tips και νέα.
- Email και Instagram στο ίδιο χαρτάκι, χωρίς φόρμες.
05 · Mobile
Το στούντιο, στην τσέπη.
Πολλοί φτάνουν από το Instagram, δηλαδή από το κινητό. Εκεί τα projects πάνε σε μία στήλη, τα reels σέρνονται με το δάχτυλο, το sketchbook χωράει στην οθόνη και το email είναι ένα tap.
hover για scroll
Πώς δουλέψαμε
Εκείνη στο design, εμείς στον κώδικα. Όπως πάντα.
- 01
Design
Η saavetdesigns σχεδίασε κάθε σελίδα σε desktop και κινητό, μαζί με τα χειρόγραφα, τα χαρτάκια και τις κινήσεις. Αυτή τη φορά ήταν και ο πελάτης.
- 02
Χτισμένο από το μηδέν
Χωρίς έτοιμο θέμα και χωρίς page builder: αρχική, σελίδες project, sketchbook και σημειώσεις, γραμμένα από την αρχή με τη δομή που ζήτησε το design.
- 03
Τα γράμματά της
Οι χειρόγραφες σελίδες της έγιναν γραμματοσειρά για το web, με εφεδρική για όσους χαρακτήρες δεν έχει σχεδιάσει ακόμα.
- 04
Γρήγορο, παρά τις εικόνες
Εικόνες σε webp, γραμματοσειρές στον δικό του server, reels που φορτώνουν μόνο όταν τα φτάσεις. Ένα portfolio γεμάτο εικόνα που ανοίγει γρήγορα.
Credits
Ποιος έκανε τι.
Δες το case study →
Το δικό σου project
Θες ένα portfolio που να μοιάζει με εσένα;
Για designers, φωτογράφους, καλλιτέχνες και στούντιο. Φέρε τη δουλειά σου, μαζί και τα πρόχειρα, και τη στήνουμε με τη saavetdesigns σε ένα site που λέει όλη την ιστορία.
Δες επίσης: Κατασκευή ιστοσελίδων