 Καλημέρα, καλημέρα, είμαι η Βηβιάν και σήμερα έχω έρθει για να σας μεταφέρω κάποια τύψη και μία μικρή ιδέα για το πώς μπορείτε να γίνετε designer για μία μέρα, για όσο θέλω καθένας φυσικά. Αλλά πριν ξεκινήσουμε θα ήθελα να σηκώσουν χέρι όσοι έχουν πιο καφέ. Πάρα πολύ ωραία. Όσοι έχουν ασχοληθεί λίγο ή πολύ με design ακόμα καλύτερα. Όσοι πιστεύουν ότι designer σύνα από άλλο πλανή, τι έχουν και ρές, μιλούν κάποια άλλη γλώσσα είναι λίγο εξογήνη. Χαίρομαι. Έχουμε το κατάλληλο κοινό λοιπόν. Λίγα λόγια. Εργάζομαι στην Comi Graphics Design Studio, εδώ και τρία χρόνια, ως designer και art director. Οι Comi Graphics για όσους δεν γνωρίζουν την εταιρία, ασχολείται, δραστηριοποιείται στον τομέα του branding της Σοπτικής Επικοινωνίας και των ψηφιακών εφαρμογών. Ενώ εγώ είμαι αυτό που θα λέγατε, η τυπική designer. Μου αρέσει κάθε είδους μήνυμαλιά, είμαι ρωτευμένη με το digital χώρο εδώ και 17 χρόνια. Φοράω σε νήθος μπλουζάκια με τυπογραφία και στο supermarket ψωνίζω αυτά που έχουν ωραίο packaging και δεν μας ενδιαφέρει τι έχουν εμέσα. Ό,τι πιο τυπικό. Τι θα μιλήσουμε, τι έχουμε να πούμε σήμερα. Λοιπόν, κλασικά designers κάπου στην αφροδίτη, developers σ' έναν άλλο πλανήτη. Ό,τι έχουμε περισσότερη στο μυαλό μας. Πώς μπορούμε όμως αυτά τα δύο να τα συγκαιράσουμε και να έχουμε μία ωραία συνεργασία. Και πριν το μυαλό σας πάει στον πόλεμο των άστρων και σε όλη αυτή την μεταπολεμική περίοδο μετά από μια τέτοια συνεργασία, θα δούμε όλα τα ωραία βήματα και πώς μπορούμε να έρθουν πιο κοντά. Σήμερα όμως βρίσκομαι εδώ για να μιλήσουμε για την περίπτωση που θα έρθει κάποιος πελάτης και θα σας προσεγγήσει για να κάνετε μία δουλειά εξολοκλήρου μόνη σας ξεκινώντας από το design, από το όποιο μάρκετην κομμάτι μπορείτε να μεταφέρετε και την τελική λοπίση. Γνωρίζουμε σίγουρα ότι λόγω των συνθηκών αυτή της τη γμή στην Ελλάδα, οι περισσότεροι πελάτης έχουν ένα περιορισμένο budget ή έχουν τη λογική ότι ένας developer ως διαμαγίας θα κάνει και το design. Τι γίνεται λοιπόν σε αυτές τις περιπτώσεις. Σίγουρα όλοι έχετε ένα δημιουργικό κομμάτι μέσα σας, απλά έχουμε συνειθήσει ως designer και developers να σκεφτόμαστε από διαφορετική σκοπιά, έχοντας όμως ένα κοινός τόχο να λύσουμε το πρόβλημα, να φτιάξουμε ένα όμορφο περιβάλλον και μία ωραία εφαρμογή ή ένα website. Οπότε το μόνο που χρειάζεται είναι να έχετε καλή διάθεση, λίγο ανοιχτό μυαλό, και να δούμε μαζί τα βήματα που μπορούν να σας βοηθήσουν, όποια στιγμή θέλετε, για να σχεδιάσετε κάτι εξολοκλήρου μόνη σας. Το πρώτο κομμάτι, το πιο βασικό, είναι να καταλάβετε τον πελάτη σας, και τι ακριβώς πραγματεύεται. Να ζητήσετε από τη σωσία σε ένα μπρίφ. Για να ζητήσετε ένα μπρίφ, θα πρέπει να αξιολογήσετε αρχικά, ποιος είναι ο στόχος του πελάτη και ποιον είναι το αντικείμενο του. Είναι κάτι που αφορά ένα corporate website, είναι ένα isop με τις δικαίους του ιδιατερότες, όπως καλά γνωρίζετε, είναι ένα blog. Ποια είναι τα ερωτήματα που μπορείτε να θέσετε. Αρχικά είπαμε ποιο είναι το είδος του προϊόντος, το οποίο πραγματεύεται ο πελάτης ή η πηρεσία του. Ποιες είναι οι αξίες του. Για παράδειγμα θα σας μιλήσουμε με ένα συγκεκριμένο project, το οποίο ασχοληθήκαμε πριν από περίπου ένα χρόνο, αφορά το εννοπή ή ο τίνος, για να μας θέλει πιο συγκεκριμένοι και να μιλάμε πιο σωστά. Ποιες είναι οι αξίες του πελάτης. Το συγκεκριμένος πελάτης είχε ψηλής ποιότητας προϊόν, το οποίο ήθελα να το περάσει με ένα πιο φιλοσοφικό vision, δεν ήθελε κάτι standard, δεν ήθελε κάτι corporate, με μεγάλη έμπνευση, εξωτικό χαρακτήρα, από κυκλάδες, γιατί από εκείνα τα κρασιά είναι από την τίνο. Ποιος ήταν ο στόχος του, αυτό που θα πρέπει να ζετήσετε και εσείς. Ένα site, το οποίο θα τονίζει την ιδιατερότητα των προϊόντων, θα έχει ένα χαρακτήρα που θα δημιουργεί, εκπληξύδα θα είναι κάτι standard και θα δημιουργεί ατμόσφαιρα. Ποιες είναι οι δυνατότητες του brand ή του πελάτη, ποιο είναι τα δυνατά του σημεία, ποιος είναι ο ανταγωνισμός του, ποιο είναι τα προβλήματά του και οι αδυναμίες του απέναντι στον ανταγωνισμό, είναι όλα αυτά τα στοιχεία που θα πρέπει να τα μαζέψετε, να τα συλλέξετε για να ξέρετε αργότερα τι είναι αυτό που θα χτίσετε. Και προφανώς, ό,τι δημιουργεί, τεχνικούς περιορισμούς ή σας δίνει παραπάνω ελευθερία. Θα είναι responsive, 95% responsive θα είναι, πλέον. Σε πόσες γλώσσες, και αυτό αφορά και τη τυπογραφία και τη χρήση της, πιο μετά. Ένας τρόπος που θα μπορούσατε να καταγράψετε ένα brief, από το πιο απλό World Document, αλλά ένα extra τίπο από εμάς, είναι το My Visual Brief. Αυτή τη στιγμή δεν το ανοίγω, γιατί είμαστε λίγο περιορισμένοι από το χρόνο. Χρειάζεται ένα μικρό λογγήν, αλλά είναι ένα website, το οποίο σίγουρα σας δίνει την δυνατότητα να κατηγοριοποιήσετε όλες αυτές τις ερωτήσεις. Το πούμενο πιο σημαντικό κομμάτι. Είναι να δημιουργήσετε Proto Types, και ένα mood board. Θα πούμε τι ακριβώς είναι το mood board. Λοιπόν, για να αρχίσει να έρχεται έμπνευση, προς το μέρος σας, να φαντάζαστε σιγά σιγά, πώς αυτό το πράγμα μπορεί να γίνει. Θα πρέπει, έχοντας το brief από τη μία και όλες αυτές τις ερωτήσεις, που έχετε θέσει στον πελάτι, να ανοίξετε ένα browser, σαφάρη, ξέρω θα μας κοτώσετε, όποιον άλλο browser θέλετε, και να μπείτε σε awards ή σε site, τα οποία δίνουν έμπνευση, να βρείτε πράγματα με σχετικό περιεχόμενο, να δείτε και άλλοι άνθρωποι, πώς έχουν αντιμετωπίσει καστικά, και να αρχίσετε να μαζεύετε έμπνευση. Υπάρχουν πάρα πολλά ρησόρισεις, τα οποία είναι μαζεμένα και στο τέλος της παρουσίασης, όπως είναι το site Inspire, το οποίο έχει κατηγοριοποιημένο περιεχόμενο, βασίδους, υπάρχει το Design Inspiration, το οποίο είναι πολύ πιο γενικό, αλλά σίγουρα θα σας δώσει μια έμπνευση, και πολλά άλλα ακόμα. Πώς να κάνετε ένα moodboard? moodboard, από τη σουσίαση, είναι όλες αυτές οι εικόνες, που σας δίνουν έμπνευση, και σας φέρνουν λίγο πιο κοντά στο στόχο. Όταν μιλάμε για το εινοποιείο τίνος, για παράδειγμα, θέλαμε ατμόσφαιρα, άρα έχουμε μαζεψη εικόνες, οι οποίοι είναι πιο ατμοσφερικές, οι οποίοι λαίσουν και δεν είναι πιο standard. Θέλαμε να βγάλουμε συνέστημα, οπότε η τυπογραφία μας θείμιζε κάτι αποπήμα. Όλες αυτές τις εικόνες, που εκείνη τη στιγμή θα σας δώσουν έβνασμα και sparkly, όλα αυτά μπορείτε να τα μαζέψετε, να τα βάλετε σε ένα folder, γιατί είναι το σημείο να φοράσας, για ό,τι έχετε να κάνετε στην πορεία. Φτιάχνοντας τη βασική δομή. Πού θα πάμε αν δεν έχουμε sitemap? Δεν θα έρθουν με το sitemap στο χέρι, δεν θα ξέρουν πολύ συγκεκριμένα τι θέλουν να κάνουν, πέρα από μία πολύ γενική ιδέα. Οπότε είναι καλό να χτίσετε μόνη σας ένα sitemap, να ξέρετε όλη τη δομή και το δέντρο, αυτού που έχετε να παράγεται και για να γνωρίζετε τον budget και όλα αυτό που θα σας πάει, σαν τελική πρόταση, αλλά για να έχετε στο μυαλό σας και κάθε σελίδα συγκεκριμένα, τι θα περιέχει. Ένα ωραίο εργαλείο, το write-map στο οποίο εκεί αυτό επιτρέπει με ένα πάρα πολύ εύκολο τρόπο να φτιάξετε μία πολύ ωραία δομή και να έχετε ένα απλό δέντρο σαν αυτό εδώ. Επίσης πολύ σημαντικό κομμάτι, τα wireframes. Θέλω να σηκώσετε χέρι πώς είστε εξικειομένοι με την έννοια των wireframes και των prototypes. Πολύ ωραία. Ουσιαστικά τα wireframes είναι ένα βήμα πριν ξεκινήσετε να σχεδιάζετε. Είναι ένας τρόπος να βάλετε ένα ελεύθερα στο χαρτί. Το να ξεκινήσετε να σχεδιάζετε κάτι πολύ εύκολα βάση κόδικα, να γράφετε CSS να στείσετε μία σελίδα. Σίγουρα θα σας δεσμεύσει σε ένα αποτέλεσμα και δεν θα σας δημιουργήσει την ελευθερία των αλλαγών. Οπότε το να πάρετε ένα χαρτί, να κάνετε ένα sketch ή με όποιο άλλο εργαλείο υπάρχει που σας βολεύει. Τον αρχίστε να στείνετε το περιεχόμενό σας να οριοθετείτε τις περιοχές, και όλοι την ιεριαρχία της δομής. Είναι κάτι που σίγουρα θα σας ξεπλοκάρει και θα το έχετε σαν point of reference για το σχεδιασμό που είναι αμέσως μετά. Το mokflow είναι πάρα πολύ εύκριστο εργαλείο, το οποίο μπορείτε να χρησιμοποιήσετε, αν θέλετε και έχετε την ώρεξη να κάνετε κάτι ακόμα πιο professional looking όσον αφορά τα wireframes. Έχει μέσα και τη δυνατότητα να χτίζετε κανονικά call to action και links που να οδηγούν από το ένα σημείο στο άλλο. Μπορείτε να το μυραστείτε και με τον πελάτι σας, και βάση αυτού, να κάνετε τις σώσες αλλαγές θέλετε. Μην ξεχνάμε ότι ο πελάτις, πέρα από το να έχει μια γενική ιδέα για το προϊόν του, είναι άμαστε τόσο τυχερή που να πέσουμε σε ένα πελάτι, όπως έχει κάνει τρελή έρευνα και γνωρίζει ακριβώς τι θέλει, το να στείσετε κάτι και να του το δώσετε έτοιμο, στις περισσότερες περιπτώσεις, θα έχει αλλαγές. Οπότε το να κάνετε wireframe και σε αυτή τη διαδικασία, και να το μυραστείτε με τον πελάτι σας, σίγουρα θα σας ξεπλοκάρει και θα σας λύσει τα χέρια να κάνετε γρήγορα εκείνη την ώρα αλλαγές, πριν μπείτε στη διαδικασία, development, design και τα λοιπά. Θα σας γλυκτώσει σίγουρα, χρόνο ακόμα και αν φαίνεται βαρετό. Και σε αυτή την φάση σίγουρα, μην σκεφτείτε, δεν είμαι καλός designer, δεν ξέρω τι θα βάλω στο χαρτί. Δεν είναι design το θέμα μας εδώ. Πάμε να βρούμε το concept. Τι είναι το concept. Έχει ακούσει κάποιος τη λέξη concept, ωραίο τέτα. Άρα για τους περισσότερους είναι κάτι τέτοιο. Μάλιστα. Λοιπόν, τι είναι το concept. Το concept είναι ο πιο βασικός πυρίνας για το σχεδιασμό σας. Έχοντας κατανοήση της ανάγκης του πελάτι, πρέπει να βρείτε μία ιδέα, πάνω στην οποία θα στήριχθείτε, πάνω στην οποία θα στήριχθείτε, πάνω στην οποία θα στήριξετε, πάνω στην οποία θα στήριχθείτε, και θα στήσετε το animation, την τυπογραφία, τα χρώματα. Δηλαδή, μιλάμε για τον συγκεκριμένο πελάτι, για να με πιο κατανοητή. Ξέρουμε ότι το βασικό του concept είναι το κρασί. Οπότε το κρατάμε σαν πρώτο πυρίνα. Δεύτερον, είναι η γέννηση του κρασίου. Επειδή τα συγκεκριμένα κρασιά είναι από την τίνο, με μία μυγεοφυσική, ένα υπέδαφος, κάτι διαφορετικό. Η γέννηση του κρασίου και το πώς βγαίνει από το έδαφος στο φως είναι σίγουρα κάτι πολύ συγκεκριμένο και διαφορετικό από οποιοδήποτε άλλο κρασί μπορεί να βρίσκεται στην Ιταλία, στην Ισπανία, οπότε είναι βασικός πυρίνας και για το concept. Και φυσικά, η ατμόσφαιρα. Είπαμε και στην αρχή ότι, για τη συγκεκριμένη περίπτωση, δεν θέλαμε κάτι standard, δεν θέλαμε κάτι κόρπορε, τοπότε μία γενική φωτογραφία μαζί με το wireframe, μαζί με το brief. Είναι ο πυρίνας. Ας είναι αυτά που θα πρέπει να βλέπετε ανάπάσα όρα και στιγμή και θα σας βοηθήσουν να πάρετε μία απόφαση. Τη τυπογραφία θα βάλω. Για ποιό λόγο θα τη βάλω. Θα πρέπει κάθε φορά να κάνετε εσωτερικές ερωτήσεις και να απαντάτε. Τη σωστή απάντηση θα σας τη δώσει το concept και το brief. Για να βγάλουμε ένα αποτέλεσμα το οποίο θα είναι στοχευμένο και όχι φυσικά κάτι που μπορεί να μας αρέσει θα πρέπει να ταιριάζει στον πελάτη και στις ανάγκες του. Και πάμε στα τυπογραφία. Πόσοι έχετε ευκολία κάθε φορά να βρείτε η τυπογραφία και να ενώσετε τη μία γραμματοσυρά με την άλλη. Ωραίοτατα. Λοιπόν, how to pair phones. Η τυπογραφία είναι πάρα πολύ σημαντικό κομμάτι καθώς η γραμματοσυρά που θα διαλέξουμε θα είναι serif, θα είναι sans serif ότιδήποτε είναι αυτή που θα μας δώσει είναι έστιμα, θα μας μεταφέρει σε αυτό που θέλει να πει ο πελάτης. Αν για παράδειγμα θέλουμε κάτι το οποίο είναι κόρπορε, σίγουρα μία πιο βαριά και πόλη τυπογραφία μπορεί να ταιριάζει. Αν θέλουμε κάτι το οποίο είναι premium μία sans serif γραμματοσυρά και πιο refined και εκλεπτισμένη θα μας δώσει σίγουρα κάτι διαφορετικό. Οπότε ευτυχώς είμαστε και στην περίοδο που δεν έχουμε μόνο τα χώμα. Βερντάνα και τα λοιπά έχουμε options και πολύ ωραία resources όπως είναι το font pair της Google το οποίο σας δίνει έτοιμες λύσεις και συνδυασμούς για τυπογραφία και φυσικά τα Google Fonts είναι και διαθέσιμα μέσα όπως για παράδειγμα εδώ έτοιμες λύσεις για να μην χρειάζεται να τρελένε στην κίνη της στιγμή έχοντας βέβαια στο μυαλό σας για ποιον πελάτη είπαμε ότι μιλάμε θέλουμε corporate θέλουμε κάτι πιο elegant με πολλαρές σώρσεις που μπορείτε να βρείτε γραμματοσυρές μερικά από αυτά υπάρχουν και μέσα στην παρουσίαση και στο τέλος το πιο βασικό που θα πρέπει να θυμάστε ως οναφορά τη τυπογραφία είναι ότι για κάθε site υπάρχουν στανταρστυχία που χρειαζόμαστε χρειαζόμαστε πάντα ένα βασικό τίκλο έναν υπότηκλο κείμενο ροής links και call to action και αριθμητικά στοιχεία αναπεριπτώσεις αν όλα αυτά τα μαζέψετε μαζί και τα κάνετε ένα συνδυασμό ας δούμε την αριστερή πλευρά σίγουρα θα έχετε τη τυπογραφία σας και ό,τι χρειάζεστε για όλες τις ελίδες μετά οπότε αν σε ένα ξεχωριστό αρχείο δεν ξέρω να σας βολεύει να γράψετε κατευθείαν CSS ή για όσους είναι ξικειωμένουμε Photoshop να ανοίξετε και Photoshop αν όλα αυτά τα βάλετε σε μία σειρά και αρχίζετε να βλέπετε χωρίς αυτό να σημαίνει ότι φυσικά θα πάμε να βαρύνουμε ένα site και να βάλουμε 15 γραμματοσυρές πάνω μπορούμε μέχρι 2-3 γραμματοσυρές να είμαστε OK και να έχουμε ένα πάρα πολύ ωραίο αποτέλεσμα το οποίο δεν θα έχει πρόβλημα μετά loading και δεν θα το βαρύνουμε η μία γραμματοσυρά όμως μπορεί να έχει πολύ μεγάλη διαφορά από μέγεθος σε μέγεθος και να χρησιμοποιούμε πολλά πράγματα μαζί για να κάνουμε αυτές τις διαφοροποίησης αν δούμε για παράδειγμα Πώς είναι ένα αποτέλεσμα με την πιο βασική σκέψη ενώ δεξιά έχουν αρχίσει τυπογραφίες και παίρνουν όγκο έχουμε δώσει χάιλαίτης σε σημεία τα οποία μπορούν έναν link πόσο διαφορητικό μπορούν να έχουμε να κόλει το action αν το δημιουργήσετε αυτό έχετε ήδη ένα πολύ σημαντικό στοιχείο για τη δουλειά που θα κάνετε μετά και θα μπορείτε να το περάσετε σε όλες τις ελίδες σας Υπάρχει ένα πάρα πολύ ενδιαφέρον άρθρο για όποιον έχει το μικρόβιο και θέλει να γίνει λίγο παραπάνω designer και να διαβάσει για τη τυπογραφία θα υπάρχει στο τέλος παρουσίασης είναι πάρα πολύ ενδιαφέρον άρθρο που εξηγεί τις αρχές της τυπογραφίας και πώς τη χρησιμοποιούμε θα σας παρότρεναν να το διαβάσει την πολύ ενδιαφέρον έχουμε οπότε brief έχουμε concept έχουμε sitemap έχουμε τυπογραφία μας γλύπουν τα χρώματα η αίσθηση αυτό που θα ξυπνήσει το site και θα του δώσει αισθητική σίγουρα υπάρχουν πελάτες που έχουν εντονοί εταιρική ταυτότητα με χρώματα ήδη συγκεκριμένα και αυτά θα δημιουργήσουν τη βάσα για παράδειγμα έχουν ένα λογότυπο το οποίο είναι πορτοκαλί και μπλε από τη στιγμή που το site θα πρέπει να αγκαλιάζει το πελάτη και τις υπηρεσίες του θα πρέπει τα χρώματα σίγουρα να είναι κοντά στην εταιρική του ταυτότητα υπάρχουν όμως άλλα λογότη πάει υπηρεσίες οι προϊόντετα είναι πολύ συγκεκριμένα και ζητούμαστε εμείς να βρούμε τα χρώματα όλοι φαντάζομαι ότι είστε εξικειωμένοι με την ψυχολογία των χρωμάτων και έστω τα βασικά χρώματα τι μπορούν να σημαίνουν το κόκκινο, ας πούμε, είναι πάθος είναι κάτι γρήγορο εξού και το χρησιμοποιούν τόσα fast food το κίτρινο είναι κίνδυνος οπότε προσοχεί με τα χρώματα που βάζουμε και σε τι όγω τα χρησιμοποιούμε για να δώσουμε αυτό που θέλουμε πώς μπορούμε να διαλέξουμε χρώματα όμως έχοντας πάλι στο μυαλό μας το βασικό concept και τι θέλουμε να πούμε θα πρέπει να εξετάσουμε τι είναι το περιεχόμενο του site είναι κάτι βαρύ και έντονο μας μιλάει για κάτι το οποίο έχει παράδοση άρα θα μπορούσαμε να πάμε στην πρώτη περίπτωση και να έχουμε σκούρα και βαριά χρώματα θέλουμε κάτι το οποίο να βγάζει η ρεμία γιατί είναι ένα σπά δεν θα βάλουμε μαύρο χρώμα σε περισότερες περιπτώσεις γιατί είναι όλα λίγο πιο ήρεμα και χαλαρά για να δίνω αυτή την αίσθηση που μπαίνεις και σε ένα σπά είναι κάτι πιο πρήμιο και θέλουμε να βγάλει πολύ τέλεια θα μπορούσε να έχει λίγο χρυσό λίγο base κάτι τέτοιο οπότε έχουμε πάντα στο μυαλό μας ποιον είναι το προϊόν για το οποίο επικοινωνούμε ένα πάρα πολύ ωραίο απλικαίσον το οποίο μπορείτε να δείτε είναι το Adobe Cooler το οποίο δίνει κάποιες έτοιμες λύσεις ψάχνοντας με λέξη κλειδί υπάρχει και αντίστοιχο απλικαίσον και το κινητό οπότε όπου και να είστε έξω αν δείτε την πλούζα του κολλητού σας που σας αρέσει το χρώμα και σας έδωσε έμπνευση ή ότιδήποτε μπορείτε να βγάλετε φωτογραφία και σας δίνει κατευθείαν το εξαντέσιμαλ και έχετε τον κοθικό για να βάλετε κατευθείαν πάνω στον design σας φυσικά υπάρχουν και άλλα τέτοια ρησώρσεις όπως είναι και το Cooler και διάφορα άλλα Επίσης κάτι που μπορείτε να κάνετε και το χρησιμοποιούμε πάρα πολύ είναι να έχετε ένα θυκό σας Color Library δηλαδή ήσαστε κάθε μέρα στο Internet όπως όλοι μας βρίσκεται κάποιο πορτρέτο που σας αρέσει κάποια εικόνα αν όλα αυτά τα κρατάτε σε ένα Library αν να πάσε όρο και στιγμή ψάχνετε για χρώμα δεν χρειάσετε να τρελένεστε μπορείτε να το ανοίξετε και να διαλέξετε κάτι που είχατε δει ακόμα και πριν από 2 μήνες πριν αλλά τώρα ήρθε η ώρα Επίσης πηγή έμπνευσης υπάρχει παντού σε ένα πίνακα που θα δείτε και μπορείτε να βγάλετε φωτογραφία πηγή έμπνευσης μπορεί να είναι ένα περιοδικό μπορεί να είναι ακόμα και ένα τραπεζομάτιλο αν όλα αυτά τα μαζέψετε και αρχίζετε και κάνετε Library σίγουρα θα έχετε έτοιμα στημένα ρεγάλια τη στιγμή που θα τα χρειαστείτε Στη περίπτωση του δικού μας πελάτη τα χρώματα τα οποία χρησιμοποιήθηκαν στοχευμένα ήταν ένα γκρίσκουρο γιατί θέλαμε αυτή την ατμόσφαιρα την λίγο πιο dark, λίγο πιο mystic για την ποιότητα των προϊόντων και επειδή είναι λίγο πιο ιδιαίτερα και πιο πρήμιο μας έχει βει ένα base και για να τονίσουμε το Origin από όπου έρχονται αυτά τα προϊόντα τις κυκλάδες αλλά με ένα λίγο πιο refine τρόπο είναι το γαλάζιο Πάμε να δούμε τις φωτογραφίες Είναι ένα δύσκολο κομμάτι φωτογραφίες και για εμάς τους designer το να μας δώσει να δουλέψουμε με άσχημα φωτογραφικό υλικό είναι σαν να μας ρίχνεις λίγο σε κόμμα μάλλον αλλά πάντα υπάρχουν ελίσεις θέλουμε να δουλέψουμε πολύ ωραίο φωτογραφικό υλικό ακόμα κι αν αυτό δεν είναι το τελικό του πελάτι γιατί δίνει η έμπνευση της στιγμή που το βλέπεις πάνω στο design και δεν σε μπλοκάρι σε πάει ένα βήμα πιο κάτω Τι γίνεται λοιπόν με τους αγαπημένους πελάτες Πιστεύουν όλοι ότι έχουν τα υλικό ξεκινάμε από εκεί, ό,τι κοινάν αυτό και σου λένε εμένα το υλικό μου είναι αυτό αλλά μάλλον μοιάζει κάπως έτσι Σ' αυτές τις περιπτώσεις λοιπόν γιατί όχι αυτή τη γάτα δεν θα την βάλουμε πάνω στο design το εκατισχετικό θα ανατρέξουμε σε resources για να βρούμε πάρα πολύ ωραία πράγματα και φυσικά όχι μόνο να χαρούμε εμείς εκείνη τη στιγμή που τα βάζουμε αλλά για να δείξουμε και στο πελάτι πιο θα ήταν το βέλτιστο αποτέλεσμα που θα μπορούσε να έχει το τέλειο να το δει και μετά μπορεί να αποφασίσει αν θα αγοράσει φωτογραφίες από e-matchbank αν θα αμπιεκνέω σε φωτογράφιση ή οτιδήποτε Ο ρές φωτογραφίες και πολύ αγαπημένο site είναι το Unsplash Έχει πάρα πολύ ιδιαίτερο υλικό είναι free μπορείτε να τις χρησιμοποιήσετε όσο κάνετε δουλειά Έχουν μια πολύ ιδιαίτερηστητική φωτογραφίες και δεν είναι πολύ mass production αλλά πέρα από αυτό υπάρχουν και άλλα όπως είναι και το Pixabay που έχει μέσα και free icons και videos και φυσικά και κάποια άλλα τα οποία είναι με πλήρωμη αν ο πελάτης το τέλος θέλει να αγοράσει υλικό όπως είναι το Shutterstock Πάρα πολύ σημαντικό κομμάτι είναι οι φωτογραφίες που θα λάβουμε πώς θα τις επεξεργαστούμε είναι και αυτό ένα μικρό λιθαράκια αλλά πάρα πολύ σημαντικό για τα αποτέλεσμα Μπορούμε να έχουμε πολύ ωραίες φωτογραφίες αλλά μεταξύ τους να μηδέουν καθόλου και να μην έχουν καμία αισθητική μια φωτογραφία ανάμενα με υπερβολικά εντοναχρώματα και οι άλλα είναι σχεδόν πεθαμένοι για να ταφέρουμε όλα αυτά στα ύσια τους να ταιριάξουν ή για να δώσουμε ακόμα περισσότερο χαρακτήρα σε όλο αυτό που θα φτιάξουμε υπάρχουν τα φίλτρα και όλα αυτά που σας γνωρίζετε σαφώς καλύτερα για από μας που μπορούν μια φωτογραφία να τη μετατρέψουν σε ότιδήποτε θέλετε και έτσι να έχετε ένα αποτέλεσμα πιο ουσιαστικό και πιο ιδιαίτερο. Αυτό ήταν το τελικό αποτέλεσμα για τη δική μας την περίπτωση. The Saturated φωτογραφία, Grey Scale, απόλυτο, με λίγο μπέζα από πάνω σε μουλτιπλά για να βγάλει αυτή τη νηφή που θέλαμε το λίγο πιο ατμοσφαιρικό. Και φυσικά, δεν ανεβάζουμε στο site ότι φωτογραφία βρούμε, δεν αγαπάμε τις φωτογραφίες του Google, τις φτιάχνουμε μόνοι μας, τις κάνουμε όπτυμάες για να έχουμε σωστό performance και για να γίνει κάτι τέτοιο μπορούμε να χρησιμοποιήσουμε από το Tiny PNG που έχουμε παρατηρήσει ότι ρίχνει πάρα πολύ τον όγκο των φωτογραφίων αλλά κρατάει μια πολύ καλή ποιότητα ή να βάλουμε ένα απλά γίνι στο WordPress, το SMASH, για να κάνει και αυτό τη δουλειά του, το σωστεί, ό,τι και να ανεβάσει ο πελάτης στο τέλος, γιατί ό,τι και να του πούμε και 500 pixels να του πούμε, 2.500 θα ανεβάσει μάλλον, να τη ρίξει και να μη δημιουργήσει το εγγλωστάσμα στο site. Επίσης, σημαντικό κομμάτι είναι τα icons που χρειάζονται σχεδόν σε κάθε project ακόμα είναι ένα eShop και να θέλει ένα μικρό καλάθι από τα βελάκια, από batons, από τηδήποτε χρειαζόμαστε οι εικονίδια και εδώ ξεχνάμε σας παρακαλώ το Google, δεν το αγαπάμε, δεν παίρνουμε ό,τι εικονίδιο βρούμε, σκεφτόμαστε το πελάτη, το concept μας και τι είναι, είναι κάτι πριμή, Θέλουμε οικονοίδια τα οποία θα είναι πιο λεπτοκαμωμένα, πιο ιδιαίτερα και όχι οχοντροκομένα. Θέλουμε κάτι το οποίο θα είναι πιο playful, μπορούμε να πάμε σε doodle, σε ζωγραφία, εσύ σε οτιδήποτε. Άρα πάλι, ποιος είναι ο πελάτις μας και τι θέλουμε να βγάλει προς τα έξω. Και αφού βρούμε τα οικονοίδια, καλό θα είναι να έχουμε στο μυαλό μας λίγο το συγκερασμό τους. Όπως είπαμε και για τη φωτογραφία και για την ενοποίηση, ας μην έχουμε οικονοίδια τα οποία μπορεί να είναι στη μία περίπτωση εχοντροκομένα, με γεμάτο χρώμα, με outline, θα πρέπει όλα αυτά να έχουν μία ενία αισθητική, ακόμα και αν δεν βρίσκονται το ένα δίπλα στο άλλο, στο σάι, το πως θα έχουμε εδώ. Αλλά κάτι με ενία αισθητική, σίγουρα θα δώσει ένα αποτέλεσμα το οποίο θα είναι πιο προσεγμένο και πιο άρτιο. Στην δική μας την περίπτωση, οικονοίδια που χρησιμοποιήθηκαν, custom made, ήταν τα συγκεκριμένα. Είναι όλα λεπτοκαμμωμένα, εκτός από κάποια, τα οποία έπρεπε να φαίνονται πολύ περισσότερο. Πού μπορούμε να βρούμε οικονοίδια. Χρήσιμο ρησόρς και αγαπημένο είναι το icon finder. Έχει και επιπληρωμή, αλλά μπορείτε στα φίλτρα να του βάλετε τα φρύ και να τα κατεβάσετε και ως SVG και ως PNG, ό,τι σας βολεύει για να τα επεξεργαστείτε, ή να τα βάλετε κατευθείαν στο site. Επίσης πάρα πολύ βοηθητικό είναι και το material.io. Έχει αυτό, οικονοίδιοι, αρκετά. Και περνάμε στο επόμενο κομμάτι. Πώς μπορούμε να πούμε αυτό που θέλουμε με λιγότερες λέξεις. Δηλαδή να μην πάμε σε κάτι τέτοιο. Δεν χρειάζεται να τα φορτώσουμε, δεν χρειάζεται να είμαστε υπερβολικοί και να έχουμε μεγάλα buttons και μεγάλα call to actions. Πρέπει να είμαστε πολύ συγκεκριμένοι. Οπότε εδώ έρχεται η αγαπημένη λέξη, πάλι ενός designer, το white space. Πώς από σας έχετε ακούσει από κάποιον τρελό φίλο σας designer και την λέξη white space. Α πάρα πολύ ωραία, έχετε πολύ φίλους designer. Χαίρομαι. Λοιπόν, τι είναι το white space. Φυσικά δεν έχει να κάνουμε την άσσα, δεν έχει να κάνουμε κανένα διάστημα. Είναι ένα σώρος αγαπημένος και θα σας φέρω σαν παράδειγμα μαγαζιά. Μπορεί να πευθύνον περισσότερος τις κυρίες, αλλά νομίζω όλοι θα το καταλάβετε. Μπαίνουμε σαν ένα μαγαζί. Και είναι αυτό, το χάλι. Νομίζω ότι δεν πρόκειται να βρείτε τίποτα. Είναι όλα πεταμένα, το ένα πάνω στάλο, είναι πηγμένα, φαίνονται όλα πολύ φτυνά και σίγουρα δεν θα βγάλετε άκρη ή θα βγείτε με πονωκέφαλο και θα θέλετε πόν. Ενώ αν μπούμε σαν ένα κατάστημα, το οποίο έχει αρκετό ελεύθερο χώρο, τα προϊόντα αναπνέουν, αναδεικνίονται, φαίνονται πολύ πιο ιδιαίτερα. Θα κάνετε τη δουλειά σας, μπορείτε να πλογηθείτε μέσα στο χώρο και να πάτε εκεί που χρειάζεται. Οπότε σίγουρα, ο καινός χώρος σε ένα website είναι πολύ σημαντικός. Εδώ στο site σας έχω απομονώσει όλη αυτή την περιοχή, την Γαλάσσια, που για μας θεωρείται White Space, θα δείτε και στην πορεία το project που σας έχει εξελειχθεί. Έχουμε τα βασικά στοιχεία, το μήνυμα που θέλουμε να επικοινωνήσουμε, τον βράχο στη μέση, θα σας εξηγήσω τι είναι και το call to action. Δεν θέλουμε τίποτα άλλο να διωπελά της, δεν θέλουμε να τον φορτώσουμε. Εδώ έχουμε μια περιοχή, η οποία είναι γεμάτη με τυπογραφία που πρέπει κάποιος να διαβάσει, οπότε έχουμε αφήσει όλο το υπόλοιπο κενό για να μην τους μπερδεύουμε ακόμα περισσότερο. Και εδώ, τρίαντα βασικά στη σημεία που θέλουμε να πατήσει ο Χρήστης και κρατάμε μόνο αυτά. Οπότε σκεφθόμαστε πάντα την ιρεαρχία τι θέλουμε να διαβάσει και όλα τα άλλα θα πρέπει να τα απομονώσουμε, να τα ρίξουμε κάπως και να τα ατονήσουμε. Ένα αγαπημένο κομμάτι, από το οποίο χρειαζόμαστε πάντα την βοηθιά σας, ως designer πολύ περισσότερο, θέλουμε τον πειραματισμό και εμείς ως designer κάθε φορά προσπαθούμε να ξεπεράσουμε τα όρειά μας και να βγάλουμε κάτι διαφορετικό. Το ίδιο ζητάμε και από σας, να μην πηγαίνουμε σε default λύσεις, να πειραματιστούμε και κάθε φορά να εξεληθόμεθα. Όπως τότε, κάποια στιγμή, που κάποιος άρχισε να λέει την έννοια του responsive ή όπως όταν βγει και το κάνει βασόλαφα τα ωραία πράγματα, που τα γνωρίστε πολύ καλύτερα από μας, να προσπαθούμε να πηγαίνουμε ένα βήμα παρακάτω, που σημαίνει, να έχετε στο μυαλό σας τι υπάρχει εκεί έξω, να ανακαλύπτεται, είσαστε όλη την ημέρα στο internet. Βρείτε σωστές πηγές και ενημερωθείτε για εξελήξεις τεχνολογικές. Μη φοβάστε να δοκιμάσετε, ακόμα και αν αυτό σημαίνει να κάνετε το πειραμά σας για ένα προϊόν ή ένα project δικό σας και όταν έρθει ο σωστός πελάτης που θα το αντέξει γιατί προφανώς πρέπει αυτό να κάνει adapt στο προϊόν και στο πελάτη, να το χρησιμοποιήσετε και φυσικά όλα αυτά πάνουν μέτρον άριστον, μην ξαναγερίσουμε στην πρώτη εικόνα, πτάνω όλα μαζί, που μπορείτε να βρείτε examples, που μπορείτε να βρείτε ωραία δίγματα, πειραματισμού, να φτιάξετε το δικό σας, να έχετε ένα library και ένα point of reference, codepen. Προφανώς περισσότεροι το γνωρίζετε ήδη, εμείς είμαστε εδώ απλά να το θυμίσουμε. Και τέλος το τελευταίο βήμα για να μην σας κουράσουμε άλλο, πώς να γίνεται ο σκήνοθέτης. Όταν σχεδιάζουμε ένα project, sun designer επειδή είμαστε λίγο διαφορετικοί φύση, το έχουμε στο μυαλό μας με animation, να γίνεται μια τεράστια έκρυξη, όλα αυτό το πράγμα να κινείται, να έχει ζωή. Εδώ είναι λοιπόν το κομμάτι το οποίο θα πρέπει να σκήνοθετίσετε, θα πρέπει όλα αυτά τα οποία έχετε σχεδιάσει, πώς θα τους δώσετε ζωή και θα τα ξυπνήσετε. Τι animation θα χρησιμοποιήσετε. Είναι ο πελάτης βαρής και ασύκοτος, γιατί έχει κάτι κόρπορε, θα πρέπει κοινήσει σας να είναι πιο στακάτες και να έχουν φυσικά όλες την ίδια ροή. Οι μικρές λεπτομέρεις κάνουν τη διαφορά. Μην πηγαίνετε σε default λύσεις, όπως αυτό το αγαπημένο slider, το τρενάκι, που μετακινείται όλοι εικόνα μαζί και ποτέ κανένας δεν το αγάπησε, ξεχάστε το. Βρείτε κάτι άλλο και ενούργιο, πιο ενδιαφέρον και περάστε σε αυτό. Είναι σημαντικό να είσαστε aligned με το concept, να σκέφτεστε πάλι πιο συνοπελάτη σας και για ποιό λόγο πρέπει να χρησιμοποιήσατε αυτό το animation ή κάποιο άλλο. Και φυσικά όλες οι κινήσεις να έχουν συνοχή. Αυτό γνωρίσουμε ότι είναι και το πιο δύσκολο κομμάτι, αλλά είναι αρκετά σημαντικό. Αν ξεκινάτε με animation τα οποία είναι πολύ πιο smooth και απαλά, έτσι θα πρέπει να είναι από την αρχή της ελίδας μέχρι κάτω, για να βγάζει όλα αυτά ένα νόημα. Ας δούμε και το τελικό αποτέλεσμα για το οποίο σας έλεγα τόση ώρα το τίνος. Είναι ένα site που έχει να κάνει με τη γέννηση του κρασιού. Εξού και όλη αυτή η κίνηση με την πέτρα που σπάει, περιοχές που ανήγουν, μπορείτε να απολογηθείτε και εσείς πιο μετά αν θέλετε. Υπάρχει και νοσχώρος, υπάρχουν αναπνοές, υπάρχουν smooth animations και σωστή τυπογραφία και μια αισθητική οποία περνά υποτιμία σε ελίδα στην άλλη. Είμαι σίγουρη όμως ότι θα σκεφτείτε για ποιό λόγο τα χρειαζόμαστε όλοι αυτά, για ποιό λόγο χρειαζόμαστε όλη αυτή την υπερανάλυση και όλη αυτή τη δουλειά, από τη στιγμή που υπάρχουν έτοιμα template ή ένας ωρό πράγματα που μπορούμε να πάρουμε και να μη δυσκολευτούμε και να τελειώνουμε και με τον συγκεκριμένο πελάτι. Όλοι ξέρουν ότι έχουν ευγύει πραγματικά αρκετές καλές προσπάθη σε template, παρόλα αυτά όμως ένα template δεν θα διαφοροποιήσει τον πελάτι σας. Μπορεί αυτό το ίδιο πράγμα να χρησιμοποιηθεί σε 15 διαφορετικούς πελάτες. Δεν θα του δώσει κάποια αξία, δεν θα τον διαφοροποιήσει σίγουρα από τον ανταγωνισμό και κατά 95% κανένα template θα μπορέσει να κάνει adapt στις δικές του ανάγκες να πει αυτό συγκεκριμένα που θέλει ο πελάτις. Θάνει κάτι πάρα πολύ γενικό. Οπότε σίγουρα δεν είναι κάτι το οποίο θα θέλαμε. Εκτός αν ο πελάτις προφανώς δεν έχει budget ούτε γι' αυτό. Το design όλη αυτή η διαδικασία, το να σκεφτούμε το concept, τη σωστή τυπογραφία και προφανώς όλα αυτά να ενωθούν με ένα σωστό development είναι αυτό που θα δώσει υπεραξία στον πελάτι και θα τον πάει ένα βιώμα πιο κάτω. Όταν έρχεται αυτή η φανταστική ώρα που έρχεται ένας πελάτις, ο creative director, όποιος μες στην εταιρία και μας λέει παιδιά, έχουμε αυτό το πελάτι και πρέπει να σχεδιάσουμε. Ένα ξενοδοχείο, σπούμε. Τις πρώτες ώρες μας πιάνει ένα κενό, ό,τι εμπνευσήχαμε στο κεφάλι μας, έχει φύγει από το παράθυρο, ένα σπανικός και δεν ξέρω με τι να κάνουμε. Κάποια στιγμή όμως πουρχεται αυτή η ωραία ιδέα και λέμε, τώρα το βρήκαμε. Αυτό λοιπόν το κομμάτι, γιατί, να πρέπει να το λέμε εμείσα designer και να μην μπορούμε να το πούμε designer και developers μαζί. Να το βρούμε μαζί. Ένας designer σίγουρα θα σας βοηθήσει να βρείτε ένα concept, θα σας δώσει ένα δημιουργικό, εύχομαι να σας κάνει τη ζωή πιο εύκολη και να μην σε σταναχωείς με τα PSD που θα σας δώσει. Ένας developer από την άλλη, έχει ένα τελείως διαφορητικό τρόπο σκέψεις και κάτι που εμείς λαχταράμε, γνωρίζει όλα αυτά τα τεχνολογικά κομμάτια, τα animation, ό,τι και ενωριοβγένει. Λοιπόν, εμείς δεν μπορούμε να το παρακολουθούμε γιατί είμαστε τελείως διαφορητικοί φύση. Σκεφτώσαστε με αριθμού σε μας, οι αριθμοί μας πεθαίνουν, το πιο πιθανό δώστε μας χρώματα. Οπότε, αν εμείς οι δύο ενόςουμε τις δυνάμεις μας και δουλέψουμε μαζί, θα μπορέσουμε αυτό το τάντα να το κάνουμε όλοι μαζί, και να λέμε ότι αυτό είναι ένα τέλειο, ένα φανταστικό προϊόν, το οποίο είναι άψογο, ηκαστικά και τεχνικά. Οπότε, όταν είσαστε σε ένα χώρο και βρείτε ένα αντίστοιχο designer, να συνεργαστείτε και δεν είσαστε ο λομόναχη και προσπαθείτε να φτιάξετε ένα site, ανοίξτε ένα δίαυλο επικοινωνίας, μοιραστείτε πράγματα. Από την αρχή, από το πρώτο κομμάτι του brainstorming, δεν χρειάζεται να ξεκινάμε μήσα να design και πλά να σας το πετάμε. Και εμείς σας χρειαζόμαστε να μας δώσετε το δικό σας feedback και το δικό σας τρόπο σκέψεις. Ποτέ δεν ξέρετε, αν ρωτήσετε το διπλανό σας, για κάτι που το μυαλό σας έχει κολλήσει, πια θα είναι η απάντησή του και πιο θα είναι το επόμενο βήμα για να σας ξεκολλήσει. Οπότε, παιδιά, όλοι μαζί, υπάρχει στο τέλος της παρουσίαση, σε ένα κομμάτι με resources που μπορείτε να βρείτε, ένα ξεχωριστό URL, που μπορείτε να βρείτε τα πάντα μαζεμένα. Εύχομαι σήμερα να μπορέσα να σας μεταδώσω ένα μικρό λιθαράκι από τη δική μας πλευρά και μία πηγή έμπνευσης για να χτίσετε κάτι εκνέου μόνοι σας. Ό,τι χρειαστείτε, θα είμαι κι εγώ έξω και σας ευχαριστώ πάρα πολύ, που ακούσατε έναν άνθρωπο τέλειος διαφορητικό από τη δική σας φύση. Να είστε καλά. Υπάρχει κάποια ερώτηση, κάποια απορία στην οποία μπορούμε να βοηθήσουμε. Ναι, βέβαια, σε παρουσίας υπάρχει στο URL αυτό που φαίνεται τώρα στην οθόνη, αλλά ούτως οι άλλες και οι διοργανωτές του Worldcam θα τη μοιραστούν. Σας ευχαριστούμε πάρα πολύ για τη χαρά. Οι παρουσιάσεις όλες θα αναρτηθούν online και τα βίντεο των παρουσιάσεων επίσης λίγο αργότερα μέχρι να γίνουν τα απαραίτητα μοντάς και τα λοιπά. Έχουμε και εδώ μπροστάλη μία ερώτηση να δωσουμε το μικρόφωνο. Σας ευχαριστούμε για την παρουσιάση. Και εγώ με δερθήκατε. Είμαι ο αυτούς που θεωρώ το design. Γενικά είναι πολύ απαιτητικό. Και είναι απαιτητικό, διότι ακριβώς σε φαίνησε άμεσαι επαφή με τον πελάτη και τις ανάγκες του. Θα θέλα να ρωτήσω αν έχετε επίσης τη διαδικασία να εγκαταλύψετε ένα project ακριβώς επειδή δεν μπορεί να συμφωνήσετε στο εστητικό κομμάτι με τον πελάτη. Και να μας πείτε και δύο λόγια για τη διαχείρηση μιας διαφωνίας σε εστητικά ζητήματα. Υπάρχουν οι πελάτες, οι οποίοι θα έχουν τελείως διαφορετική γνώμη από αυτό που βλέπεις εσύ ως σωστό ή ως χλάθος. Όμως από την αρχή μιας συζήτησης με ένα πελάτη, έχοντας καταλάβει από το μπρίφ, τι είναι ακριβώς αυτό που θέλει, όταν μπαίνουμε στη διαδικασία να σχεδιάζουμε πέρα από το να σκεφτόμαστε τη δική μας προσωπική φιλοδοξία, το οποίο είναι κάτι, όπως είπε και η προηγούμενη ομιλίτρια, θα πρέπει να μπαίνει στην άκρη. Προσπαθούμε να κάνουμε adapt στις λύσεις που θέλει να δώσει ο πελάτης στις δικές του ανάγκες. Οπότε σίγουρα θα υπάρχουν εκεί περιπτώσεις που κάποιος θα διαφωνήσει, αλλά είναι πάρα πολύ λίγες, γιατί από την αρχή έχουμε φροντίσει να κάνουμε όλη αυτή τη δουλειά με το sidemap, με το μπρίφ, ούτως ώστε να μπορέσουμε να τον καταλάβουμε. Γι' αυτό ακριβώς γίνεται όλο αυτό. Το να θέλουμε να βγάλουμε κάτι το οποίο είναι πάρα πολύ premium. Όταν εσάς απευθύνονται σε ένα ευρύ κοινό και να πάμε να σχεδιάσουμε κάτι το οποίο θα είναι χρυσό, μαύρο και ιδιαίτερο, είναι φάλου δικό μας. Αν έχεις κατανοήσει σωστά από την αρχή των πελάτης, δεν έχεις τέτοια θέματα. Σίγουρα υπάρχουν εκεί περιπτώσεις που θα δώσεις δύο προτάσεις. Αυτό εξαρτάται από την αρχική συμφωνία και θα πρέπει να διαλέξει ένα μέσα στις δύο. Υπάρχουν ελήσεις, και θα δομημένο πλαϊσίο δεν φτάνομαι σε τέτοιο σημείο. Σας ευχαριστώ. Σας ευχαριστώ πάρα πολύ. Καλή συνέχεια.