Γεφυρώνοντας το χάσμα μεταξύ creative και development στον κόσμο του WordPress - Σμαρώ Μάρογλου

WordCamp Thessaloniki 2019

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

Despite the versatility and ease of use that characterizes the WordPress platform, errors are often encountered in the process of implementing an application, at the level of requirements, design and operating options. These mistakes are usually in the cooperation of the planning and implementation teams. Both teams contribute to the creation of the application and play a very important role, but they have different sets of skills, work on different objectives and have a different mentality. As this is an important topic that costs time and money to the company and to the customer, we have developed, and we propose, a set of good practices, useful tools and guides for «bridging the gap», aiming at a proper and organized framework of cooperation between the planning and implementation teams. These practices improve the work environment, enhance the unobstructed flow of projects and ultimately optimize the end-user experience.

Transcript

1. Γεφυρώνοντας το χάσμα μεταξύ creative και development στον κόσμο του WordPress. WORDCAMP THESSALONIKI 2019 Σμαρώ Μάρογλου
2. Όταν ακούμε τη λέξη “design” σκεφτόμαστε γενικά το σχεδιασμό γραφικών. Με την εξέλιξη της τεχνολογίας η βιομηχανία των μέσων μαζικής ενημέρωσης, εξελίχτηκε από έντυπη σε ψηφιακή και η ενημέρωση γίνεται κυρίως μέσα από το διαδίκτυο και τις mobile συσκευές. Ομοίως έχει εξελιχθεί και η βιομηχανία σχεδιασμού. Design
3. Graphic Designer • Εταιρική Ταυτότητα • Λογότυπα • Έντυπες Εκδόσεις • Διαφημίσεις • Συσκευασίες Προϊόντων • Αφίσες Το Graphic Design είναι μία τέχνη, μία δημιουργική διαδικασία που συνδυάζει τις τέχνες και την τεχνολογία για να επικοινωνήσει ιδέες. • Σχεδιασμός Ιστοσελίδων
4. Απευθείας συνεντεύξεις χρηστών Ερωτηματολόγια Δημιουργία Personas Σχεδιασμός πρωτοτύπων σχεδίων Χρήση στατιστικών • Τροποποίηση/Βελτίωση Βελτίωση της εμπειρίας των επισκεπτών Εντοπισμό λαθών Διαφορετικές δοκιμές Προσθήκη και αφαίρεση στοιχείων User Experience Designer • Έρευνα Ο όρος “ User Experience ” χρησιμοποιείται για να περιγράψει την εμπειρία που αποκομίζει κάποιος κατά την αλληλεπίδρασή του με ένα προϊόν. Ο UX Designer επικεντρώνεται στη λογική και τη δομή πίσω από τα στοιχεία με τα οποία αλληλεπιδρά ο χρήστης σε μια εφαρμογή.
5. UX Map Woopra Mouse Stats Usabila Naview Polldady TryMyUI Adobe XD Axure Sketch Zeplin Mockflow Webflow Balsamiq Loop11 Attensee Silverback User Testing WhatUsersDo Appsee Flinto Invision App OmniGraffle Figma Framer Principle Proto.io Justinmind Prototyper UXPin Adobe Photoshop Adobe Illustrator • Για τη σχεδίαση User Experience Designer • Για την έρευνα
6. Κουμπιά Χρωματική απεικόνιση User Interface Designer • Διαδραστικά στοιχεία Ο όρος “User Interface” χρησιμοποιείται για να περιγράψει ένα σύνολο στοιχείων,τα οποία εμφανίζονται στην οθόνη μίας ψηφιακής συσκευής και χρησιμοποιούνται για να διευκολύνουν και να επιταχύνουν την αλληλεπίδραση μεταξύ του χρήστη και της συσκευής. Ο UI Designer ασχολείται με την εμφάνιση και την αίσθηση του προϊόντος. Πεδία εισαγωγής φόρμας Κινούμενα σχέδια Μενού Τυπογραφία
7. “If a picture is worth 1000 words, a prototype is worth 1000 meetings.”
8. Αυτό μπορεί να δημιουργήσει προβλήματα στην επικοινωνία των δύο πλευρών που ουσιαστικά προσπαθούν να δουλέψουν μαζί. Είναι ζωτικής σημασίας να υπάρξει κάποιος τρόπος να συνεργαστούν οι δύο ομάδες από την αρχή, αντί να αντιμετωπίζουν τις διαδικασίες σχεδιασμού και ανάπτυξης ως εντελώς ξεχωριστά μέρη της διαδικασίας. Development Οι developers αναλαμβάνουν να υλοποιήσουν τα σχέδια • Εστιάζουν στους υπολογισμούς και τη λογική
9. Επικοινωνία Designers και developers συμβάλλουν και οι δύο στη δημιουργία και χρειάζονται ο ένας τον άλλο για να δημιουργηθεί κάτι μοναδικό. • Meetings • Σχεδιασμός Χρονοδιαγραμμάτων • Content Design • Τεχνικές δυνατότητες “Happy Designer + Happy Developer = Happy Client”
10. Προετοιμασία Πρωτοτύπων Σχεδίων Ακόμα και αν ο UI/UX/Web Designer έχει σχεδιάσει και ολοκληρώσει τα πρωτότυπα δείγματα της ιστοσελίδας, ο developer έχει την ευθύνη να επιβεβαιώσει ότι τα σχέδια καλύπτουν τις προσδοκίες του έργου. • Επιλογή Προγραμμάτων • Style Guide • Γραμματοσειρές • Χρώμα • Margin & Padding
11. Προετοιμασία Πρωτοτύπων Σχεδίων • Επιλογή Προγραμμάτων • Style Guide
12. Προετοιμασία Πρωτοτύπων Σχεδίων • Γραμματοσειρές • Χρώμα
13. Προετοιμασία Πρωτοτύπων Σχεδίων • Γραμματοσειρές • Χρώμα Επιπλέον στοιχεία που χρειάζεται να λάβει υπόψη ο designer: Dropdown menus Link/Button hover states 404 page Σελίδα αναζήτησης Tooltips Πεδία φόρμας Responsive Design
14. “Coming together is a beginning. Keeping together is progress. Working together is success.”
15. Δημοφιλή εργαλεία που θα σας βοηθήσουν να κάνετε κατανοητά τα σχέδιά σας στους προγραμματιστές. InVision (Sketch & Photoshop) Τhis tool will help you create beautiful interactive interfaces with a bucket load of features. Rapid Prototyping Using Sketch Symbols and Templates webdesign.tutsplus.com/tutorials/rapid-prototyping-using-sketch-symbols-and- templates--cms-23021 EnvatoTuts+
16. Δημοφιλή εργαλεία που θα σας βοηθήσουν να κάνετε κατανοητά τα σχέδιά σας στους προγραμματιστές. Avocode (Sketch & Photoshop) Avocode is a design hand-off tool to open, share, inspect and collaborate on Sketch, Adobe XD, Photoshop, Illustrator and Figma designs. How to Use Avocode to Inspect Your Photoshop and Sketch Files - by Adi Purdila webdesign.tutsplus.com/tutorials/how-to-use-avocode-to-inspect-your-photoshop- and-sketch-files--cms-23440 EnvatoTuts+
17. Δημοφιλή εργαλεία που θα σας βοηθήσουν να κάνετε κατανοητά τα σχέδιά σας στους προγραμματιστές. Zeplin (Sketch) Zeplin is a great tool for generating style guides too. It makes sure your team creates consistent experiences by having an up-to-date online guide accessible to everyone from anywhere. How to Use Zeplin to Generate Style Guides - by Andreia Paralta Carqueija webdesign.tutsplus.com/tutorials/quick-tip-how-to-use-zeplin-to-generate-style- guides--cms-26461 EnvatoTuts+
18. Δημοφιλή εργαλεία που θα σας βοηθήσουν να κάνετε κατανοητά τα σχέδιά σας στους προγραμματιστές. Framer A really exciting new design tool that is certainly worth a look for experienced UI designers who want more from their tools. Beyond the Basics With Framer - by Ashraff Hathibelagal code.tutsplus.com/tutorials/beyond-the-basics-with-framer--cms- 24294?_ga=2.151529721.1744197577.1570002036-1333634597.1569424472 EnvatoTuts+
19. Δημοφιλή εργαλεία που θα σας βοηθήσουν να κάνετε κατανοητά τα σχέδιά σας στους προγραμματιστές. Adobe XD Adobe XD offers the best environment for digital projects under the Adobe Creative Cloud collection of design tools. How to Create a UI Prototype Using Adobe XD - by Rafiq Elmansy webdesign.tutsplus.com/tutorials/how-to-create-a-ui-prototype-using-adobe-xd-- cms-26585 EnvatoTuts+
20. Δημοφιλή εργαλεία που θα σας βοηθήσουν να κάνετε κατανοητά τα σχέδιά σας στους προγραμματιστές. Justinmind (Sketch & Photoshop) All-in-one prototyping tool for web and mobile apps From wireframes to highly interactive prototypes www.justinmind.com
21. A free designer tool for creating color combinations Color Scheme Designer A designer tool for creating color combinations that work together well. colorschemedesigner.com/csd-3.5/
22. Free Image Sites freepik.com unsplash.com pexels.com flickr.com lifeofpix.com stocksnap.io pixabay.com burst.shopify.com/photos
23. Ευχαριστώ! WORDCAMP THESSALONIKI 2019 Σμαρώ Μάρογλου Θεσσαλονίκη Μοναστηρίου 90, Τηλ: 2310551107 email: info@socialmind.gr Αθήνα Εθνικής Αντιστάσεως 11, Καισαριανή Τηλ: 2107243276 socialmindmedia socialmindgr