Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Γεφυρώνοντας το χάσμα μεταξύ 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.

WordPress Greek Community

October 12, 2019
Tweet

More Decks by WordPress Greek Community

Other Decks in Technology

Transcript

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

    View full-size slide

  2. Όταν ακούμε τη λέξη “design”
    σκεφτόμαστε γενικά το σχεδιασμό
    γραφικών.
    Με την εξέλιξη της τεχνολογίας η
    βιομηχανία των μέσων μαζικής
    ενημέρωσης, εξελίχτηκε από έντυπη σε
    ψηφιακή και η ενημέρωση γίνεται κυρίως
    μέσα από το διαδίκτυο και τις mobile
    συσκευές. Ομοίως έχει εξελιχθεί και η
    βιομηχανία σχεδιασμού.
    Design

    View full-size slide

  3. Graphic Designer
    • Εταιρική Ταυτότητα
    • Λογότυπα
    • Έντυπες Εκδόσεις
    • Διαφημίσεις
    • Συσκευασίες Προϊόντων
    • Αφίσες
    Το Graphic Design είναι μία τέχνη, μία δημιουργική διαδικασία που συνδυάζει τις τέχνες
    και την τεχνολογία για να επικοινωνήσει ιδέες.
    • Σχεδιασμός Ιστοσελίδων

    View full-size slide

  4. Απευθείας συνεντεύξεις χρηστών
    Ερωτηματολόγια
    Δημιουργία Personas
    Σχεδιασμός πρωτοτύπων σχεδίων
    Χρήση στατιστικών
    • Τροποποίηση/Βελτίωση
    Βελτίωση της εμπειρίας των επισκεπτών
    Εντοπισμό λαθών
    Διαφορετικές δοκιμές
    Προσθήκη και αφαίρεση στοιχείων
    User Experience Designer
    • Έρευνα
    Ο όρος “ User Experience ” χρησιμοποιείται για να περιγράψει την εμπειρία που αποκομίζει κάποιος κατά την αλληλεπίδρασή του
    με ένα προϊόν. Ο UX Designer επικεντρώνεται στη λογική και τη δομή πίσω από τα στοιχεία με τα οποία αλληλεπιδρά ο χρήστης σε
    μια εφαρμογή.

    View full-size slide

  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
    • Για την έρευνα

    View full-size slide

  6. Κουμπιά
    Χρωματική απεικόνιση
    User Interface Designer
    • Διαδραστικά στοιχεία
    Ο όρος “User Interface” χρησιμοποιείται για να περιγράψει ένα σύνολο στοιχείων,τα οποία
    εμφανίζονται στην οθόνη μίας ψηφιακής συσκευής και χρησιμοποιούνται για να διευκολύνουν
    και να επιταχύνουν την αλληλεπίδραση μεταξύ του χρήστη και της συσκευής. Ο UI Designer
    ασχολείται με την εμφάνιση και την αίσθηση του προϊόντος.
    Πεδία εισαγωγής φόρμας
    Κινούμενα σχέδια
    Μενού
    Τυπογραφία

    View full-size slide

  7. “If a picture is worth 1000 words,
    a prototype is worth 1000 meetings.”

    View full-size slide

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

    View full-size slide

  9. Επικοινωνία Designers και developers συμβάλλουν και οι δύο στη δημιουργία και χρειάζονται ο ένας τον
    άλλο για να δημιουργηθεί κάτι μοναδικό.
    • Meetings
    • Σχεδιασμός Χρονοδιαγραμμάτων
    • Content Design
    • Τεχνικές δυνατότητες
    “Happy Designer + Happy Developer = Happy Client”

    View full-size slide

  10. Προετοιμασία
    Πρωτοτύπων
    Σχεδίων
    Ακόμα και αν ο UI/UX/Web Designer έχει σχεδιάσει και ολοκληρώσει τα πρωτότυπα δείγματα
    της ιστοσελίδας, ο developer έχει την ευθύνη να επιβεβαιώσει ότι τα σχέδια καλύπτουν τις
    προσδοκίες του έργου.
    • Επιλογή Προγραμμάτων
    • Style Guide
    • Γραμματοσειρές
    • Χρώμα
    • Margin & Padding

    View full-size slide

  11. Προετοιμασία
    Πρωτοτύπων
    Σχεδίων
    • Επιλογή Προγραμμάτων
    • Style Guide

    View full-size slide

  12. Προετοιμασία
    Πρωτοτύπων
    Σχεδίων
    • Γραμματοσειρές
    • Χρώμα

    View full-size slide

  13. Προετοιμασία
    Πρωτοτύπων
    Σχεδίων
    • Γραμματοσειρές
    • Χρώμα
    Επιπλέον στοιχεία που χρειάζεται
    να λάβει υπόψη ο designer:
    Dropdown menus
    Link/Button hover states
    404 page
    Σελίδα αναζήτησης
    Tooltips
    Πεδία φόρμας
    Responsive Design

    View full-size slide

  14. “Coming together is a beginning. Keeping together
    is progress. Working together is success.”

    View full-size slide

  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+

    View full-size slide

  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+

    View full-size slide

  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+

    View full-size slide

  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+

    View full-size slide

  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+

    View full-size slide

  20. Δημοφιλή εργαλεία που θα σας βοηθήσουν να κάνετε κατανοητά
    τα σχέδιά σας στους προγραμματιστές.
    Justinmind (Sketch & Photoshop)
    All-in-one prototyping tool for web and mobile apps
    From wireframes to highly interactive prototypes
    www.justinmind.com

    View full-size slide

  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/

    View full-size slide

  22. Free Image Sites
    freepik.com
    unsplash.com
    pexels.com
    flickr.com
    lifeofpix.com
    stocksnap.io
    pixabay.com
    burst.shopify.com/photos

    View full-size slide

  23. Ευχαριστώ! WORDCAMP THESSALONIKI 2019
    Σμαρώ Μάρογλου
    Θεσσαλονίκη
    Μοναστηρίου 90,
    Τηλ: 2310551107
    email: [email protected]
    Αθήνα
    Εθνικής Αντιστάσεως 11, Καισαριανή
    Τηλ: 2107243276
    socialmindmedia socialmindgr

    View full-size slide