Wireframes, Mockups, Prototypes! Ποιες είναι οι διαφορές?   - Pango Mango
21323
post-template-default,single,single-post,postid-21323,single-format-standard,ajax_fade,page_not_loaded,,select-child-theme-ver-1.0.0,select-theme-ver-1.9,vertical_menu_enabled,wpb-js-composer js-comp-ver-4.4.3,vc_responsive

Wireframes, Mockups, Prototypes! Ποιες είναι οι διαφορές?  

Wireframes, Mockups, Prototypes! Ποιες είναι οι διαφορές?  

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

Wireframes

 

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

Mockups

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

Prototypes

Από την ελληνική λέξη πρωτότυπος < πρωτο- + τύπος. Τα mockups είναι στατικά σχέδια, άρα δεν μπορούν να μας δείξουν την ροή της ιστοσελίδας μας, ούτε τη μετάβαση από τη μια σελίδα στην άλλη. Για αυτή την ανάγκη χρησιμοποιούμε τα prototypes.
Tα prototypes άρα είναι διαδραστικά σχέδια που μας δείχνουν πως λειτουργεί η ιστοσελίδα μας χωρίς να έχει χτιστεί στην πραγματικότητα.
Τα αγαπημένα μου εργαλεία για prototypes είναι το Marvel App και το Invision App.

Συνοψίζοντας

Wireframes, Mockups, Prototypes είναι στάδια της λεγόμενης “διαδικασίας σχεδιασμού” και κάθε ένα είναι απαραίτητο και έχει την θέση του. Ακολουθώντας αυτά τα στάδια μας βοηθάει να οργανώσουμε τις ιδέες μας καλύτερα, να γλιτώνουμε χρόνο και να δώσουμε στον χρήστη, μια καλύτερη εμπειρία χρήσης.

Εσάς ποιο είναι το αγαπημένο σας εργαλείο σχεδιασμού;

No Comments

Post a Comment