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

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

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

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

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

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

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

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

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

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

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

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

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

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

Δημοφιλή εργαλεία που θα σας βοηθήσουν να κάνετε κατανοητά τα σχέδιά σας στους προγραμματιστές. 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+

Δημοφιλή εργαλεία που θα σας βοηθήσουν να κάνετε κατανοητά τα σχέδιά σας στους προγραμματιστές. 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+

Δημοφιλή εργαλεία που θα σας βοηθήσουν να κάνετε κατανοητά τα σχέδιά σας στους προγραμματιστές. 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+

Δημοφιλή εργαλεία που θα σας βοηθήσουν να κάνετε κατανοητά τα σχέδιά σας στους προγραμματιστές. 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+

Δημοφιλή εργαλεία που θα σας βοηθήσουν να κάνετε κατανοητά τα σχέδιά σας στους προγραμματιστές. 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+

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

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/

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

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