Σχεδίαση χαρτοφυλακίου Adobe

Τον Νοέμβριο του 2015 έκανα λίγη συζήτηση στο Σχολή Εικαστικών Τεχνών (SVA) στη Νέα Υόρκη σχετικά με το σχεδιασμό του Adobe Portfolio και το σχεδιασμό προϊόντων. Μπορείς Παρακολουθήστε τη συζήτηση εδώ . Αρχικά έγραψα αυτό το άρθρο για την προετοιμασία της ομιλίας, αλλά έκτοτε επεκτάθηκα σε αυτό για να δημοσιεύσω εδώ. Στόχος του είναι η εισαγωγή του προϊόντος, η ανταλλαγή απόψεων στη διαδικασία σχεδιασμού, η σάρωση από το sketchbook μου και ορισμένες προδιαγραφές / σχέδια από πίσω. Ελπίζω να το βρείτε ενδιαφέρον.

Μια μικρή εισαγωγή.

Γεια είμαι Ανδρέας . Είμαι ο επικεφαλής σχεδιαστής προϊόντων και δημιουργικός διευθυντής της Adobe Portfolio . Θα μοιραστώ μαζί σας ό, τι εγώ και μια μεγάλη ομάδα προγραμματιστών στην Behance (Adobe) εργάζομαι αυτό το παρελθόν έτος.

Ο ιστότοπος μάρκετινγκ Adobe Portfolio

Τι είναι το χαρτοφυλάκιο Adobe;

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

• Έχει σχεδιαστεί ειδικά για διαφημιστικά κείμενα που παρουσιάζουν το χαρτοφυλάκιό τους. Αυτό σημαίνει ότι κάνει ό, τι χρειάζεστε για να το κάνετε, απλά και γρήγορα.
• Είναι δωρεάν με όλα τα σχέδια Adobe Creative Cloud.
• Μπορείτε να έχετε πρόσβαση σε όλες τις βιβλιοθήκες γραμματοσειρών του Typekit, που μπορείτε να χρησιμοποιήσετε στον ιστότοπό σας.

Το χαρτοφυλάκιο συγχρονίζεται με το Behance.

Το πράγμα που κάνει το Portfolio πιο μοναδικό είναι ότι συγχρονίζεται με την Behance. Η ιδέα είναι να δημιουργήσετε έναν όμορφο προσαρμοσμένο ιστότοπο με το Portfolio και να συγχρονίσετε τα έργα σας με το προφίλ Behance. Εκεί μπορείτε να αποκτήσετε ανεκτίμητη έκθεση για την εργασία σας σε μια δημιουργική πλατφόρμα που χρησιμοποιείται από εκατομμύρια διαφημιστικά κείμενα και ανθρώπους που προσλαμβάνουν διαφημιστικά κείμενα! Αλλά δεν χρειάζεται να χρησιμοποιήσετε το Behance εάν δεν θέλετε - μπορείτε να χρησιμοποιήσετε το χαρτοφυλάκιο από μόνο του και να επιλέξετε να μην συγχρονίσετε με το Behance. Η επιλογή είναι δική σου.

Η φωτογραφία του Matthias Heiderich - όπως φαίνεται Χαρτοφυλάκιο και Behance

Ανταπόκριση διατάξεις.

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

Οι σχεδιαγράμματα αποσκοπούν στην κάλυψη ποικιλίας στυλ που ταιριάζουν σε διαφορετικά δημιουργικά πεδία. Μπορούν είτε να χρησιμοποιηθούν ως μια λύση off-the-shelf για να γεμίσουν γρήγορα με τα έργα σας και να δημοσιεύσουν έναν ιστότοπο (μέσα σε λίγα λεπτά), είτε να χρησιμοποιήσουν τα χαρακτηριστικά του προγράμματος επεξεργασίας για να αλλάξουν τη δομή και την εμφάνιση ανάλογα με το στυλ σας.

Εύκολα προσαρμόστε την ίδια διάταξη ώστε να φαίνεται πολύ διαφορετική. Διαθέτει φωτογραφία από Μπράτσε Τζόνσον

Παρακάτω είναι οι διατάξεις με τις οποίες ξεκινάμε. Οι αρχικές διατάξεις (για τη δημόσια beta και την εκκίνηση του προϊόντος) είναι πολύ απλές, εστιάζοντας σε καλύμματα, γκαλερί και έργα. Το προϊόν θα αναπτυχθεί βεβαίως για να προσφέρει περισσότερες δυνατότητες, όπως εικόνες πλήρους οθόνης, επεξεργασία HTML & CSS, ενσωμάτωση ιστολογίων κτλ ... εγκαίρως. Και καθώς οι δυνατότητες επεκτείνονται, έτσι και η ποικιλία και ο αριθμός των σχεδιαγραμμάτων που θα επιλέξετε ως αφετηρία.

Οι διατάξεις και τα δημιουργικά που ονομάζονται μετά από: Λίνα , Πριονίδια , Μάθιου , Juco , Mercedes και Θωμάς

Επιλέξαμε να ονομάσουμε τις διατάξεις μετά από τα δημιουργικά Behance . Πραγματοποιήσαμε υποψηφιότητα για δημιουργικά, τα έργα των οποίων προσφέρονται καλά σε μια συγκεκριμένη διάταξη και, φυσικά, ήταν επίσης εκπληκτικά οπτικά.

Θα έπρεπε να πω ότι αυτά τα σχέδια ήταν ένα από τα τελευταία πράγματα που έπρεπε να σχεδιαστούν (προ-βήτα), αλλά οδηγώ μαζί τους για χάρη αυτού του άρθρου, για να σας παρουσιάσω σε τι κάνει το προϊόν ή τουλάχιστον 'τελικό προΪον'.

Ο εκδότης.

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

Ακούγεται κάπως αχρείος, αλλά είχα στο μυαλό μου τρία πράγματα ενώ σχεδίαζα τα πάντα από το μάρκα, το site μάρκετινγκ και ειδικά τον συντάκτη:

Θα πρέπει να δίνει τη δυνατότητα στον χρήστη να:

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

Ακολουθεί μια σειρά από σενάρια επεξεργασίας από το προϊόν (πρόγραμμα επεξεργασίας):

Διάφορες οθόνες από τον επεξεργαστή. Διαθέτει φωτογραφία από Chris Burkard και σχεδιασμός από Andrew Couldwell

Ο ρόλος ενός σχεδιαστή προϊόντων.

Ο δικός μου ρόλος ως σχεδιαστής στο χαρτοφυλάκιο άλλαξε αρκετά δραματικά κατά τη διάρκεια του έτους, από την ιδέα μέχρι την έναρξη. Καθώς προχωράει ένα ψηφιακό προϊόν, το ίδιο συμβαίνει και με το ρόλο του σχεδιαστή προϊόντων. Για να επιστρέψετε στην αρχή:

ProSite.

Το χαρτοφυλάκιο είναι στην πραγματικότητα η εξέλιξη ενός υπάρχοντος προϊόντος Behance (που συνταξιοδοτείται) που ονομάζεται ProSite. Είναι 5 χρονών, οπότε υπήρχαν πολλά που θα μπορούσαμε να μάθουμε από αυτό το προϊόν: Τι λειτούργησε καλά; Τι δεν έκανε;

Behance Network.

Επίσης, αυτό που έχουμε μάθει για τη δημιουργική κοινότητα και την παρουσίαση της δουλειάς, μέσω του σχεδιασμού, της αποκατάστασης (και της χρήσης!) Του Δικτύου Behance είναι ανεκτίμητο στην κατανόηση του τρόπου κατασκευής ενός προϊόντος όπως το χαρτοφυλάκιο.

Συνεπώς, πέρασα πολύ χρόνο απορροφώντας όλη αυτή τη γνώση που η Behance είχε αποκτήσει όλα αυτά τα χρόνια, καθώς και μελέτη των αρχικών σχεδίων τους για την εξέλιξη του ProSite. Κανοντας ερωτησεις. Δημιουργία σημειώσεων. Σχεδίαση ιδεών.

Το δίκτυο Behance και το ProSite

Αρχίζω πάντα με ένα μολύβι και ένα σκίτσο.

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

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

Υπάρχει πάντα ένα σημείο όταν ξέρετε ότι έχετε αρκετό για να πάρετε αυτό το βήμα περαιτέρω, και στην πραγματικότητα να αρχίσει να εξαντλεί αυτές τις ιδέες. Στο παρελθόν έχω χρησιμοποιήσει το Adobe Illustrator ή Omnigraffle για αυτό, σε wireframe. Αλλά ο χρόνος ήταν σφιχτός σε αυτό το έργο, έτσι πήγα κατευθείαν στο Photoshop.

Παρακάτω υπάρχουν μερικές σαρώσεις από το sketchbook μου. Ορισμένοι σχετίζονται με το προϊόν (editor), μερικοί με το site μάρκετινγκ και το εμπορικό σήμα:

Μερικές σαρώσεις από το sketchbook μου

Μια ενδιαφέρουσα εικόνα για να επισημάνω παραπάνω είναι η τελευταία (κάτω-δεξιά). Μπορείτε να δείτε ότι το σκίτσο μου είναι κοντά σε αυτό που τελικά σχεδίασα.

Έννοιες & πρωτότυπα.

Όλες αυτές οι ιδέες και τα σχέδια ενημερώνονται και εξελίσσονται με την ιδέα, το πρωτότυπο και τη συζήτηση με την ομάδα. Είναι καλό να συζητάμε μέσω ιδεών με άλλους σχεδιαστές και προγραμματιστές και ακόμη και το κοινό-στόχο όταν είναι δυνατόν. Για παράδειγμα: Μία συγκεκριμένη ιδέα ήρθε από μένα να συζητήσω ένα πρόωρο (προϊόν) σχεδιασμό με έναν φοιτητή εικονογράφησης MFA στο SVA . Μια νέα προοπτική πάντα βοηθά, ειδικά για ένα προϊόν αυτής της πολυπλοκότητας.

Εργαζόμαστε σε αρκετά έντονα χρονικά πλαίσια για αυτό το έργο. Απλά δεν υπήρχε χρόνος να χτιστούμε πολύπλοκα πρωτότυπα. Αλλά αυτό που έκανα ήταν να δημιουργήσω μια σειρά από επεξηγήσεις PDF χρησιμοποιώντας το Layer Comps στο Photoshop, δείχνοντας τον κέρσορα του ποντικιού να κινείται γύρω από την οθόνη, επιδεικνύοντας κάθε αλληλεπίδραση, χαρακτηριστικό και ροή χρηστών μέσα στο προϊόν. Αυτοί επέτρεψαν στους προγραμματιστές (και άλλους ενδιαφερόμενους) να κάνουν κριτική και / ή να κατανοήσουν όλες τις λειτουργίες και τη ροή των χρηστών - έτσι ήξεραν τι πρέπει να κατασκευαστεί και επίσης να εντοπίσουν τυχόν ατέλειες στο UI / UX πριν από την κατασκευή και τη δοκιμή.

Ακολουθεί (ένα βίντεο) ένα παράδειγμα αυτών των αναλυτικών οδηγιών PDF:

Πρωτότυπο / walkthrough που δείχνει την παγκόσμια προσαρμογή στον επεξεργαστή του έργου

Λεπτομέρεια στο σχεδιασμό.

Με απλά λόγια: Πάρτε τις εικασίες έξω από αυτό για τους προγραμματιστές. Η ομάδα σας πρέπει να καταλάβει τι πρέπει να οικοδομηθεί. Δεν είναι δουλειά τους να συμπληρώνουν τα κενά, να ανταποκρίνονται, ή να μαντέψουν τι συμβαίνει σε κάθε δεδομένο σενάριο. Δεν μπορώ να υπερβάλλω αυτό αρκετά - έχω δοκιμάσει τόσους πολλούς σχεδιαστές που σχεδιάζουν και εξετάζουν το 20% ενός προϊόντος, και δεν σκέφτονται τα πράγματα μέσω.

Εκτός από τις οδηγίες, τις ροές χρηστών και τα πρωτότυπα που μίλησα νωρίτερα, θέλω επίσης να δημιουργήσω λεπτομερείς προδιαγραφές για όλα τα στοιχεία του UI, τα χαρακτηριστικά και το εμπορικό σήμα. Νομίζω ότι αυτά είναι σημαντικά όταν έχετε μια μεγάλη ομάδα, έτσι ώστε όλοι να βρίσκονται στην ίδια σελίδα, με ένα κεντρικό σημείο αναφοράς. Οι προδιαγραφές αποσκοπούν στην κάλυψη όλων των σεναρίων, από τις ανατροπές, στα σφάλματα, στις ενεργές / αδρανείς καταστάσεις κλπ ... και επίσης καλύπτουν τις τιμές και τις διαστάσεις του px (έρχομαι μάλιστα μέχρι και να συμπεριλάβω το βασικό CSS).

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

Επίσης, το ωραίο πράγμα για να πάρεις το χρόνο για να δημιουργήσεις αυτά τα "κιτ UI" είναι ότι είναι πιο εύκολο να ενημερώνεις το προϊόν (design) στο μέλλον. Δεν χρειάζεται να ενημερώσετε εκατοντάδες mockups, ενημερώστε μόνο τις προδιαγραφές.

Παρακάτω παρατίθενται μερικά παραδείγματα αυτών των μορφοτύπων και προδιαγραφών:

Μάρκετινγκ και μάρκα.

Τους μήνες τώρα, με το σχεδιασμό και την κατασκευή του προϊόντος (επεξεργαστή), επικεντρώθηκα την προσοχή μου στο μάρκετινγκ, την επιβίβαση και το εμπορικό σήμα. Τι είναι αυτό το προϊόν; Πώς ξεκινάτε να το χρησιμοποιείτε; Χρειάστηκε μια φωνή. Μια ταυτότητα.

Το όνομα.

Όταν πρωτοχώρησα στην Behance, το έργο αυτό ήταν κάπως χαζανότατα ονομάζεται "Prosite 2.0" εσωτερικά. Το προϊόν ProSite εξυπηρετούσε το χρόνο του, αλλά ο διάδοχός του είχε μεγαλώσει σε ένα διαφορετικό κτήνος. Εκτός από τη σύνδεσή τους με την Behance, ήταν πολύ διαφορετικά προϊόντα και δεν είχαν συσχετισμό 1: 1. Αυτό δεν ήταν επανασχεδιασμός / εκτόξευση. Χτίσαμε ένα συναρπαστικό νέο προϊόν από το έδαφος και το ProSite. Αυτό ήταν σημαντικό να μεταφέρω - και αυτό ξεκινά με το όνομα.

Επέστρεψα στο sketchbook μου και πέρασα μια λέξη άσκηση σύνδεσης με γράφοντας όλα όσα έκανε αυτό το προϊόν και επίσης ποια γλώσσα χρησιμοποιούσε κάθε παρόμοιο προϊόν στην αγορά. Η φυσική εξέλιξη όλων αυτών συνέχισε να επιστρέφει στο "Χαρτοφυλάκιο". Έτσι, μετά από κάποιες σκέψεις, κατέληξα: "Γιατί όχι ;!" - κάνει ακριβώς αυτό που λέει στο κασσίτερο. Είναι ένας δημιουργός / εκδότης ιστότοπου που έχει σχεδιαστεί ειδικά για τη δημιουργία χαρτοφυλακίου. Η απλότητα και η τολμηρότητα του ονόματος παντρεύτηκαν καλά με το σχεδιασμό και τις αξίες του προϊόντος. Έτσι το ονομάσαμε "Χαρτοφυλάκιο", το οποίο σύντομα έγινε "Adobe Portfolio" για να ταιριάζει με τη σουίτα προϊόντων της Adobe.

Η αρχική σελίδα του ιστότοπου μάρκετινγκ με φωτογραφία από τον Τάνια Τιμάλ

Η μάρκα.

Το χαρτοφυλάκιο πάρα πολύ έχει τη δική του ταυτότητα και προσωπικότητα. Το χαρτοφυλάκιο δεν είναι ένα εταιρικό προϊόν (να το πω έτσι). Είναι λευκή ετικέτα. Είναι δικό σου, να φτιάξεις το δικό σου. Είναι φιλικό, απλό και προσιτό. Η μάρκα, ο ιστότοπος μάρκετινγκ, η onboarding, η copywriting και η ανταλλαγή μηνυμάτων σε όλη την εμπειρία του χρήστη (χρήστης) επιχειρούν να το μεταδώσουν μέσω της χρησιμοποιούμενης γλώσσας, της τυπογραφίας, του πλέγματος, των εικόνων και των χρωμάτων.

Άλλα σενάρια περιλαμβάνουν αστεία μηνύματα και χιουμοριστικές εικόνες. Φωτογραφία του έργου από dua - Αλέξανδρος Esslinger

Ανταποκρίσιμος σχεδιασμός.

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

Ακολουθούν μερικά παραδείγματα των σχεδίων που ανταποκρίνονται, τα οποία έχουν παραδοθεί στους προγραμματιστές για να δημιουργήσουν myportfolio.com :

Ανταπόκριση σχέδια για την περιοχή μάρκετινγκ, που δείχνει μια πρόωρη έκδοση της ταυτότητας της μάρκας

Προβολή a πλήρη μελέτη περίπτωσης του ιστοτόπου μάρκετινγκ εδώ

Ανταπόκριση σχέδια για μερικές από τις διατάξεις, που καλύπτουν διαφορετικά σενάρια

Προβολή a πλήρη μελέτη περίπτωσης των σχεδίων εδώ

Δοκιμές χρηστών.

Ένα ψηφιακό προϊόν πρέπει να εξελίσσεται για να ταιριάζει στους ανθρώπους που το χρησιμοποιούν, λαμβάνοντας υπόψη τη συμπεριφορά των χρηστών, για να προσφέρει την καλύτερη εμπειρία χρήστη. Στην ιδανική περίπτωση, τα προϊόντα θα περάσουν από μια φάση άλφα / βήτα (περιορισμένες κυκλοφορίες) πριν ξεκινήσουν σε όλους. Το κάναμε με το Portfolio. Αυτό μας βοήθησε να εξαλείψουμε τα ζητήματα, να μάθουμε εάν το UI / UX "δούλεψε" και να αποκτήσει πραγματική ανατροφοδότηση από τους χρήστες με σκοπό τη βελτίωση του προϊόντος. Είναι καλύτερο να δοκιμάσετε, να μάθετε και να τελειοποιήσετε με μια περιορισμένη ομάδα χρηστών, παρά να ξεκινήσετε χιλιάδες / εκατομμύρια ανθρώπους και να ανακαλύψετε προβλήματα όταν είναι πολύ αργά.

Δοκιμή. Μαθαίνω. Αναθεωρώ. Επαναλαμβάνω.

Αυτό είναι σημαντικό στο σχεδιασμό του προϊόντος. Μπορείτε να μάθετε τόσο πολύ από τους ανθρώπους που χρησιμοποιούν το προϊόν.

Θα εκπλαγείτε με αυτό που θα ανακαλύψετε:

... Οι άνθρωποι δεν χρησιμοποιούν πάντα ένα προϊόν όπως θα περίμενε κανείς!

• Μαθαίνεις,
• Βελτιάζετε,
• Μπορείτε να επαναλάβετε το προϊόν,
• Κρατάτε τη δοκιμή,
• Και επαναλάβετε αυτή τη διαδικασία.

Και ειλικρινά, μερικές φορές αισθάνεται λίγο σαν αυτό:

... Αλλά το προϊόν θα είναι καλύτερο για αυτό.

Συμπερασματικά.

Αν ήθελα να πάρω κάτι από αυτό θα ήταν:

Κόψτε ταχύτητα.

Εμπνέομαι. Κατανοήστε το κοινό σας. Κράτησε σημειώσεις. Σκίτσα ιδέες.

Εννοια.

Εργαστείτε με την ομάδα σας. Εξερευνήστε ιδέες. Σκεφτείτε το.

Λεπτομέρεια στο σχεδιασμό.

Κάποιος (αλλιώς) πρέπει να χτίσει αυτό που σχεδιάζετε.

Δοκιμάστε και βελτιώστε.

Λειτουργεί? Πώς μπορεί να βελτιωθεί; Μπορεί πάντα να βελτιωθεί.

Μαθαίνω.

Πάντα. Κάθε εμπειρία στον σχεδιασμό είναι μια καλή εμπειρία μάθησης.

[- Αυτό το άρθρο ήταν αρχικά δημοσιεύτηκε στο Medium.com , αναδημοσιεύθηκε με την άδεια του συντάκτη -]

• ← Uber relaunches με μια νέα ταυτότητα επωνυμίας
• Σχεδιάζοντας τις διακοπές →