Σχεδιασμός UI/UX και ταυτότητα μάρκας στην Κύπρο

Σχεδιάζουμε τις διεπαφές πάνω στις οποίες τρέχει ένα προϊόν και την ταυτότητα από την οποία αναγνωρίζεται μια μάρκα, UI/UX βασισμένο σε έρευνα και συστήματα ταυτότητας φτιαγμένα για αυτή την αγορά. Οι ίδιοι κανόνες και η ίδια αυστηρότητα, φτιαγμένα για εσάς.

Χτίζουμε τον σχεδιασμό UI/UX και την ταυτότητα μάρκας ως μία πειθαρχία στην Κύπρο: έρευνα και συστήματα διεπαφής για προϊόντα, και τα σήματα, το χρώμα και τους κανόνες τυπογραφίας που μεταφέρουν μια μάρκα σε ό,τι αγγίζει. Μία ομάδα κουβαλά και τα δύο, ώστε η διεπαφή ενός προϊόντος και η ταυτότητα μιας μάρκας να διαβάζονται ως η ίδια φωνή.

Η απόδειξη είναι το σύστημα πίσω από τη σελίδα μπροστά σας. Μία παλέτα χρωμάτων που χρησιμοποιείται με πειθαρχία, μια κλίμακα τυπογραφίας που διατρέχει κάθε επικεφαλίδα και παράγραφο, και μια γλώσσα components φτιαγμένη για αυτή τη μάρκα αντί να προέρχεται από ένα kit. Η ίδια αυστηρότητα μπαίνει σε κάθε διεπαφή και ταυτότητα που σχεδιάζουμε για έναν πελάτη.

Από πού προέρχεται το «χρέος» σχεδιασμού

Οι περισσότερες μάρκες και προϊόντα χάνουν τον σχεδιασμό τους λίγο-λίγο, σε μικρές αποφάσεις που παίρνονται η καθεμία μόνη της: ένα κουμπί χτισμένο με τρεις διαφορετικούς τρόπους επειδή το πρώτο ήταν θαμμένο στα αρχεία, ένα λογότυπο τοποθετημένο πάνω σε ένα φόντο με το οποίο συγκρούεται, ένα μπλε που παρεκκλίνει σε πέντε ελαφρώς διαφορετικά μπλε μέσα σε έναν χρόνο από screenshots και παρουσιάσεις. Κάθε επιλογή είναι μικρή. Μαζί, προστίθενται.

Το κόστος εμφανίζεται αργότερα: οι νέες σελίδες χρειάζονται περισσότερο χρόνο για να κυκλοφορήσουν επειδή κάθε νέο χέρι πρέπει να ανακαλύψει ξανά τι είχε ήδη αποφασιστεί, και οι πελάτες παρατηρούν την ασυνέπεια πριν μπορέσουν να εξηγήσουν γιατί. Ξεκινάμε καταγράφοντας τους κανόνες που η μάρκα ή το προϊόν έχουν ήδη εν μέρει, και έπειτα χτίζουμε τα κομμάτια που λείπουν ακόμα.

Διεπαφές, ταυτότητα, και τα συστήματα που κρατούν και τα δύο ενωμένα

Τρεις συγγενείς πειθαρχίες, που συνήθως δουλεύουν μαζί.

Σχεδιασμός προϊόντος & UI/UX

Διεπαφές για web και mobile προϊόντα: έρευνα, ροές χρήστη, και οθόνες σχεδιασμένες και δοκιμασμένες προτού μία γραμμή κώδικα παραγωγής εξαρτηθεί από αυτές.

Ταυτότητα μάρκας & σχεδιασμός λογότυπου

Το σήμα, η επεξεργασία του ονόματος, οι επιλογές χρώματος και τυπογραφίας που κάνουν μια μάρκα αναγνωρίσιμη, χτισμένα ως ένα σύστημα που μια μικρή ομάδα μπορεί να εφαρμόζει με συνέπεια.

Design systems

Οι τεκμηριωμένοι κανόνες πίσω από τα δύο: components, αποστάσεις, χρώμα και τυπογραφία, ώστε μια απόφαση να παίρνεται μία φορά και να επαναχρησιμοποιείται σε κάθε νέα οθόνη μετά.

Πείτε μας τι χρειάζεται ένα σύστημα

Από την έρευνα στις δοκιμασμένες οθόνες

Το ίδιο σχήμα διατρέχει ένα έργο λογότυπου και έναν επανασχεδιασμό προϊόντος, κλιμακωμένο στο brief.

Έρευνα

Εξετάζουμε τους χρήστες, τη μάρκα όπως υπάρχει σήμερα, και τον χώρο στον οποίο ανταγωνίζεται, προτού σχεδιάσουμε οτιδήποτε. Οι υποθέσεις καταγράφονται και ελέγχονται σε σχέση με το πραγματικό κοινό.

Ροές

Οθόνες και διαδρομές χαρτογραφούνται πρώτα ως wireframes, ώστε η δομή ενός προϊόντος ή η λογική ενός συστήματος ταυτότητας να συμφωνείται πριν αποκτήσει έστω ένα χρώμα ή μία γραμματοσειρά.

Σύστημα

Η ταυτότητα ή η διεπαφή γίνεται ένα σύστημα: τυπογραφία, χρώμα, components, και οι κανόνες που το κρατούν συνεπές καθώς η μάρκα ή το προϊόν μεγαλώνει.

Δοκιμή & παράδοση

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

Τι κρατά πραγματικά ένα σύστημα μάρκας ή διεπαφής

Το ορατό σήμα είναι το μικρότερο κομμάτι. Οι κανόνες πίσω του είναι αυτοί που κρατούν μια μάρκα ή ένα προϊόν να μοιάζουν με τον εαυτό τους έναν χρόνο μετά.

Το σήμα

Ένα λογότυπο φτιαγμένο να δουλεύει σε μέγεθος επαγγελματικής κάρτας και σε μια οθόνη σταδίου, σε ένα χρώμα και σε πλήρες χρώμα, με καθορισμένο τον ελεύθερο χώρο και το ελάχιστο μέγεθος.

Τυπογραφία

Ένας συνδυασμός γραμματοσειρών και μια κλίμακα, ώστε μια επικεφαλίδα και μια λεζάντα να έχουν πάντα την ίδια σχέση μεταξύ τους, σε κάθε σελίδα που χτίζει κανείς στη συνέχεια.

Χρώμα

Μία παλέτα με καθορισμένο ρόλο για κάθε χρώμα, κύριο, accent, και ουδέτερο, εφαρμοσμένη με τον ίδιο τρόπο σε κάθε επιφάνεια.

Φωνή & κίνηση

Πώς ακούγεται η μάρκα σε μια πρόταση και πώς κινείται μια διεπαφή, καθορισμένα ώστε και τα δύο να παραμένουν συνεπή σε κάθε μέλος της ομάδας που τα αγγίζει.

Το σύστημα πίσω από αυτή τη σελίδα είναι η απόδειξη

Κοιτάξτε τη σελίδα που διαβάζετε. Μία παλέτα που διατηρείται με πειθαρχία σε σκούρες και ανοιχτόχρωμες επιφάνειες, μια κλίμακα τυπογραφίας που κρατά από μια hero επικεφαλίδα μέχρι μια λεζάντα, και μια γλώσσα components σχεδιασμένη για αυτή τη μάρκα από μια κενή σελίδα. Τη σχεδιάσαμε οι ίδιοι, με τον ίδιο τρόπο που σχεδιάζουμε για έναν πελάτη.

Εμφανίζεται και σε μικρότερα σημεία: οι πέντε εικονογραφημένες προσωπικότητες πίσω από τις υπογραφές του Insights μοιράζονται ένα ενιαίο στιλ αναλογίας, χρώματος και πάχους γραμμής, ένα μικρό σύστημα ταυτότητας από μόνο του, χτισμένο με τον ίδιο τρόπο όπως η ευρύτερη μάρκα γύρω του.

Δείτε τη δουλειά μας

One identity system, five characters

Cassini

Apollo

Voyager

Juno

Huygens

Five bylines for our Insights blog, one shared style of proportion, colour and line weight.

Απαντήσεις, με απλά λόγια

Τι περιλαμβάνει ένα έργο UI/UX ή ταυτότητας μάρκας;

Περνά από έρευνα, ροές, σύστημα, και έπειτα δοκιμασμένες οθόνες: μαθαίνουμε τους χρήστες και τη μάρκα, χαρτογραφούμε τη δομή, χτίζουμε το σύστημα τυπογραφίας, χρώματος και components, το δοκιμάζουμε και το παραδίδουμε τεκμηριωμένο και δικό σας να το λειτουργείτε.

Πόσοι γύροι αναθεώρησης περιλαμβάνονται;

Καθορίζουμε τους γύρους αναθεώρησης στο brief πριν ξεκινήσει η δουλειά, ώστε να είναι συμφωνημένοι και όχι ανοιχτοί. Τα περισσότερα έργα περιλαμβάνουν δύο δομημένους γύρους αναθεώρησης: έναν στο σύστημα, έναν στις εφαρμοσμένες οθόνες ή στα assets.

Θα μας ανήκουν τα αρχεία πηγής;

Ναι. Τα αρχεία Figma, οι γραμματοσειρές (ή μια άδεια χρήσης τους), και η τεκμηρίωση του design system σας ανήκουν στην παράδοση, ώστε η δική σας ομάδα να μπορεί να τα ανοίγει, να τα επεξεργάζεται και να τα επεκτείνει από την πρώτη μέρα.

Πόσο διαρκεί ένα έργο ταυτότητας μάρκας ή UI/UX;

Ένα λογότυπο και ένα σύστημα ταυτότητας διαρκούν συνήθως εβδομάδες. Ένα πλήρες σύστημα UI/UX προϊόντος διαρκεί περισσότερο, ανάλογα με το πόσες οθόνες και ροές περιλαμβάνει το εύρος. Δίνουμε ένα πραγματικό χρονοδιάγραμμα μόλις οριστεί το εύρος του brief.

Τι περιλαμβάνει ένα πακέτο μάρκας;

Το σήμα σε όλες τις παραλλαγές του, ένα σύστημα χρώματος και τυπογραφίας, κανόνες χρήσης, και τα templates που χρειάζεται μια μικρή ομάδα καθημερινά, όχι μόνο ένα αρχείο λογότυπου.

Μπορείτε να δουλέψετε με μια μάρκα που ήδη έχουμε, ή χτίζετε μόνο καινούργιες;

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

Διαφέρει αυτό από την υπηρεσία ανάπτυξης ιστοσελίδων σας;

Είναι μια ξεχωριστή πειθαρχία, και οι δύο συχνά τρέχουν μαζί σε ένα έργο. Αυτή η σελίδα καλύπτει την ίδια τη σχεδιαστική δουλειά: έρευνα, διεπαφές και συστήματα μάρκας. Η υλοποίηση και η κυκλοφορία της ιστοσελίδας ή του προϊόντος πάνω στο οποίο τρέχουν είναι ανάπτυξη ιστοσελίδων, όπου ο σχεδιασμός διεπαφής είναι ήδη μέρος κάθε υλοποίησης.

Πείτε μας τι χρειάζεται ένα σύστημα. Φέρτε μας ένα προϊόν που χρειάζεται μια διεπαφή, μια μάρκα που χρειάζεται ένα σήμα, ή μια ταυτότητα που έχει παρεκκλίνει από την παρουσίαση στην οποία ξεκίνησε. Θα σας δείξουμε το σχέδιο προτού δεσμευτείτε. .

Κλείστε μια κλήση ή στείλτε το brief, όπως σας βολεύει. Απαντάμε εντός μίας εργάσιμης ημέρας.