Το μολύβι είναι ένα εργαλείο συρματοπλέγματος που μπορούμε να χρησιμοποιήσουμε για να σκιαγραφήσουμε μια μακέτα του περιβάλλοντος εργασίας της εφαρμογής μας. Το σπουδαίο πράγμα για το Pencil είναι ότι είναι ελαφρύ, εύκολο στη χρήση και στενά ενσωματωμένο με τον Firefox. Πάνω από όλα είναι μια δωρεάν εφαρμογή ανοιχτού κώδικα! Στο τέλος του άρθρου θα σας δώσουμε μια απλή επίδειξη για το πώς να χρησιμοποιήσετε το μολύβι για να δημιουργήσετε ένα wireframe Brizzly.
Γιατί δημιουργούμε σύρματα;
Το wireframe είναι ένα σκίτσο μιας ιδέας διάταξης σελίδας. Ένα wireframe εστιάζει στον σχεδιασμό πληροφοριών μιας σελίδας για να διασφαλίσει ότι ο σχεδιασμός ταιριάζει σε αυτό που χρειάζεται ο χρήστης. Ένα συρματόσχοινο αποτελείται συνήθως από διαφορετικά σχήματα (όπως κουτιά, οβάλ και διαμάντια) για να αντιπροσωπεύει περιεχόμενο, λειτουργικά και στοιχεία πλοήγησης. Αυτά τα σχήματα εμφανίζουν την τοποθέτησή τους στη σελίδα.
Στην αρχή μπορεί να φαίνεται σαν χάσιμο χρόνου δημιουργώντας τραχιά σκίτσα μιας σελίδας. Ένα συρματόσχοινο είναι σημαντικό για να κάνετε τους χρήστες σας να εστιάσουν στο στοιχείο σπουδαιότητας στη σελίδα σας. Δημιουργώντας ένα τραχύ σχέδιο μιας σελίδας, χωρίς φανταχτερά οπτικά στοιχεία, στρέψτε την προσοχή του χρήστη σε σημαντικά στοιχεία όπως το μέγεθος, η διάταξη και η τοποθέτηση των στοιχείων της σελίδας σας. Θα αρχίσουμε να κατανοούμε καλύτερα τι πραγματικά θέλει και χρειάζεται ο πελάτης από το λογισμικό όταν ο χρήστης αρχίσει να εστιάζει στα σημαντικά στοιχεία μιας σελίδας. Η δημιουργία ενός καλωδίου επιτρέπει σε εσάς και τους χρήστες σας να συνεργαστείτε αποτελεσματικά και να εντοπίσετε πιθανό πρόβλημα σχεδιασμού νωρίς.
Ξεκινώντας με το μολύβι
Κατεβάστε το μολύβι από τη σελίδα προσθήκης του μολυβιού. Μόλις εγκαταστήσετε το μολύβι, είναι προσβάσιμο από τα «Εργαλεία»> «Σκίτσο μολυβιού».
Αυτό είναι το Brizzly. Είναι μια πολύ ωραία εφαρμογή ιστού που συγκεντρώνει το Facebook και το Twitter σας σε μία μόνο σελίδα.
Αυτό είναι το τελικό αποτέλεσμα του καλωδίου. Τα κύρια σχήματα σε αυτό το πλαίσιο είναι τα ορθογώνια, τα πλαίσια κειμένου και οι καρτέλες. Η επόμενη ενότητα του άρθρου θα δώσει ένα απλό παράδειγμα πώς να δημιουργήσετε κάθε σχήμα.
Δημιουργία ορθογωνίου
Το πρώτο βήμα για τη δημιουργία ενός σχήματος σύρματος είναι να σύρετε ένα σχήμα από το μενού "Shape Συλλογές" στον καμβά.
Αλλαγή μεγέθους του ορθογωνίου σε κατάλληλο πλάτος και ύψος.
Μπορούμε να προσαρμόσουμε το κείμενο, το περίγραμμα και το χρώμα φόντου οποιουδήποτε σχήματος στο μολύβι. Κάντε δεξί κλικ στο ορθογώνιο και επιλέξτε "Properties" για να ανοίξετε τα παράθυρα Properties. Αυτή είναι η οθόνη ιδιοτήτων φόντου. Ορίστε το χρώμα φόντου ορθογωνίου σε λευκό (#FFFFFF).
Κάντε κλικ στην καρτέλα "Περίγραμμα" και προσαρμόστε τις ιδιότητες περιγράμματος. Ορίστε το χρώμα περιγράμματος σε μαύρο (# 000000) και αλλάξτε το βάρος περιγράμματος σε 1.
Η οθόνη ιδιοτήτων κειμένου μας επιτρέπει να προσαρμόσουμε τον τύπο γραμματοσειράς, το μέγεθος, το στυλ, το βάρος, το χρώμα, τη φωτεινότητα και την αδιαφάνεια του κειμένου.
Δημιουργία καρτελών
Οι καρτέλες σπιτιού, πρόχειρου, εικόνων είναι τρεις καρτέλες που στοιβάζονται το ένα πάνω στο άλλο. Σύρετε τρία «Πίνακα καρτελών» στο ορθογώνιο. Αλλάξτε το μέγεθος κάθε καρτέλας έτσι ώστε κάθε καρτέλα να εμφανίζεται δίπλα-δίπλα.
Ανοίξτε την οθόνη ιδιοτήτων κειμένου για να προσαρμόσετε το χρώμα γραμματοσειράς της καρτέλας "Εικόνες" και "Πρόχειρο". Ορίστε το σε γκρι (# 989898).
Δημιουργία κειμένου
Σύρετε το σχήμα «Κείμενο» στον καμβά για να δημιουργήσετε κάθε μενού. Μπορούμε να προσαρμόσουμε την εμφάνιση του κειμένου μεταβαίνοντας στο παράθυρο ιδιοτήτων κειμένου.
Χρήσιμες συμβουλές για αλλαγή χρώματος
Το χρώμα είναι ένα από τα πιο απαραίτητα μέρη για την παροχή ενός ευχάριστου wireframe. Ο πιο ακριβής τρόπος αλλαγής χρώματος ενός σχήματος είναι ο καθορισμός του κώδικα HTML του χρώματος. Η εύρεση του κώδικα HTML για ένα συγκεκριμένο χρώμα μπορεί να είναι δύσκολη. Μπορούμε να χρησιμοποιήσουμε HTML cheat sheet από το w3cschools.com για να αναζητήσουμε τον σωστό κώδικα HTML για ένα συγκεκριμένο χρώμα.
Μας αρέσει επίσης να χρησιμοποιούμε το colorzilla για να διαλέγουμε χρώματα από την οθόνη και να το χρησιμοποιούμε στο Pencil. Κάντε κλικ στο εικονίδιο σταγονόμετρου στην κάτω αριστερή γωνία του Firefox για να επιλέξετε το χρώμα στην οθόνη. Μπορούμε επίσης να ανοίξουμε το εργαλείο επιλογής χρώματος του ColorZilla κάνοντας διπλό κλικ στο εικονίδιο σταγόνας. Απλώς αντιγράψτε επικολλήστε τον κώδικα Hex στον κώδικα HTML χρώματος του μολυβιού.
συμπέρασμα
Το μολύβι είναι εύχρηστο εργαλείο σύρματος. Η ενσωμάτωση του μολυβιού με τον Firefox μας επιτρέπει να χρησιμοποιήσουμε άλλο plugin του Firefox για να δημιουργήσουμε ένα καλύτερο wireframe
Συνδέσεις
Κατεβάστε το μολύβι
Κατεβάστε το Colorzilla
Φύλλο εξαπάτησης χρώματος HTML W3C
