Ένα wireframe είναι ο σκελετός ενός σχεδίου. Κουτιά για εικόνες. Γραμμές για κείμενο. Ετικέτες για κουμπιά. Χωρίς χρώματα. Χωρίς γραμματοσειρές. Χωρίς στιλβωμένα γραφικά. Μόνο η δομή, απογυμνωμένη μέχρι το κόκκαλο.

Τα wireframe εμφανίζονται νωρίς στη διαδικασία σχεδιασμού, μετά τα σκίτσα αλλά πριν από τα mockup υψηλής πιστότητας. Η δουλειά τους είναι να απαντούν σε ερωτήσεις διάταξης: πού πηγαίνει η πλοήγηση, πόσες στήλες, ποια είναι η ιεραρχία. Το να τα κρατάμε άσχημα είναι σκόπιμο. Εάν ένα wireframe φαίνεται πολύ ολοκληρωμένο, οι ενδιαφερόμενοι αρχίζουν να συζητούν για την απόχρωση του μπλε αντί για το αν η διάταξη λειτουργεί.

Τι δείχνει ένα wireframe

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

Εργαλεία όπως το Balsamiq και το Figma έχουν κάνει τη δημιουργία wireframe γρήγορη. Μερικοί σχεδιαστές εξακολουθούν να χρησιμοποιούν χαρτί και μαρκαδόρους. Το μέσο έχει λιγότερη σημασία από τη σκέψη. Ένα wireframe είναι έναυσμα για συζήτηση. Λέει: ορίστε η δομή, τι πιστεύετε; Οι αλλαγές είναι φθηνές σε αυτό το στάδιο. Μόλις ολοκληρωθεί ο οπτικός σχεδιασμός, η μετακίνηση μιας πλαϊνής μπάρας σημαίνει ότι πρέπει να επαναλάβετε τα πάντα κατάντη. Μετακινήστε την στο wireframe αντ' αυτού.