Χρησιμοποιήστε τον Firefox για να δημιουργήσετε απλά mockups

Το μολύβι είναι ένα εργαλείο συρματοποίησης που μπορούμε να χρησιμοποιήσουμε για να σχεδιάσουμε μια μακέτα της διεπαφής χρήστη της εφαρμογής μας. Το μεγάλο πράγμα για το μολύβι είναι ότι είναι ελαφρύ, εύκολο στη χρήση και στενά ενσωματωμένο στον Firefox. Πάνω από όλα είναι μια δωρεάν εφαρμογή ανοιχτού κώδικα! Στο τέλος του άρθρου θα σας δώσουμε ένα απλό demo για το πώς να χρησιμοποιήσετε το Pencil για να δημιουργήσετε ένα Brizzly όπως wireframe.

Γιατί δημιουργούμε wireframes ?

Ένα wireframe είναι ένα σκίτσο μιας ιδέας διάταξης σελίδας. Ένα wireframe επικεντρώνεται στο σχεδιασμό πληροφοριών μιας σελίδας για να εξασφαλίσει ότι ο σχεδιασμός ταιριάζει σε αυτό που χρειάζεται ο χρήστης. Ένα συρμάτινο πλαίσιο αποτελείται συνήθως από διαφορετικά σχήματα (όπως κιβώτια, οβάλ και διαμάντια) που αντιπροσωπεύουν περιεχόμενο, λειτουργικά στοιχεία και στοιχεία πλοήγησης. Αυτά τα σχήματα εμφανίζουν την τοποθέτησή τους στη σελίδα.

Στην αρχή μπορεί να φαίνεται σαν χάσιμο χρόνου δημιουργώντας τραχεία σκίτσα μιας σελίδας. Ένα σύρμα πλαίσιο είναι σημαντικό για να πάρετε τους χρήστες σας να επικεντρωθεί στο στοιχείο σπουδαιότητας στη σελίδα σας. Η δημιουργία ενός ακατέργαστου σκίτσου μιας σελίδας, χωρίς φανταστικά οπτικά στοιχεία, μετατοπίζει την προσοχή του χρήστη σε σημαντικά στοιχεία όπως το μέγεθος, τη διάταξη και την τοποθέτηση των στοιχείων της σελίδας σας. Θα αρχίσουμε να έχουμε καλύτερη κατανόηση για το τι πραγματικά θέλει και χρειάζεται ο πελάτης από το λογισμικό, όταν ο χρήστης αρχίσει να εστιάζει στα σημαντικά στοιχεία μιας σελίδας. Η δημιουργία ενός πλαισίου συρμάτων επιτρέπει σε εσάς και τους χρήστες σας να συνεργάζονται αποτελεσματικά και να εντοπίζουν πιθανά πιθανά προβλήματα σχεδιασμού νωρίς.

Ξεκινώντας με το μολύβι

Κάντε λήψη του μολυβιού από τη σελίδα πρόσθετων μολυβιών. Μόλις εγκαταστήσετε το μολύβι, είναι προσβάσιμο από το 'Εργαλεία'> 'Σκίτσο μολύβι'.

Αυτό είναι που μοιάζει με το Brizzly. Είναι μια πολύ καλή εφαρμογή Ιστού που συγκεντρώνει το Facebook και το Twitter σας σε μια σελίδα.

Αυτό είναι το τελικό αποτέλεσμα του πλαισίου σύρματος. Τα κύρια σχήματα σε αυτό το wireframe είναι, ορθογώνια, πλαίσια κειμένου και καρτέλες. Η επόμενη ενότητα του άρθρου θα δώσει ένα απλό παράδειγμα πώς να δημιουργήσετε κάθε σχήμα.

Δημιουργία ορθογωνίου

Το πρώτο βήμα για τη δημιουργία ενός σχήματος πλαισίου είναι η μεταφορά ενός σχήματος από το μενού "Συλλογές Σχήματος" πάνω στον καμβά.

Αλλάξτε το μέγεθος του ορθογωνίου σε κατάλληλο πλάτος και ύψος.

Μπορούμε να προσαρμόσουμε το κείμενο, τα σύνορα και το χρώμα φόντου οποιουδήποτε σχήματος σε Pencil. Κάντε δεξί κλικ στο ορθογώνιο και επιλέξτε 'Ιδιότητες' για να ανοίξετε τα παράθυρα Ιδιότητες. Αυτή είναι η οθόνη ιδιοτήτων φόντου. Ρυθμίστε το χρώμα παρασκηνίου στο λευκό (#FFFFFF).

Κάντε κλικ στην καρτέλα 'Οριοθέτηση' και προσαρμόστε τις ιδιότητες των συνόρων. Ρυθμίστε το χρώμα του περιγράμματος σε μαύρο (# 000000) και αλλάξτε το βάρος του περιγράμματος στο 1.

Στην οθόνη ιδιοτήτων κειμένου, μπορείτε να προσαρμόσετε τον τύπο, το μέγεθος, το στυλ, το βάρος, το χρώμα, τη φωτεινότητα και την αδιαφάνεια του κειμένου.

Δημιουργία καρτελών

Οι καρτέλες εγχώριου, προσχεδίου, εικόνας είναι τρεις καρτέλες που στοιβάζονται το ένα πάνω στο άλλο. Σύρετε τρεις "πίνακες καρτελών" στο ορθογώνιο. Αλλάξτε το μέγεθος κάθε καρτέλας έτσι ώστε κάθε καρτέλα να εμφανίζεται δίπλα-δίπλα.

Ανοίξτε την οθόνη ιδιοτήτων κειμένου για να προσαρμόσετε το χρώμα γραμματοσειράς των καρτελών "Εικόνες" και "Σχέδιο". Ρυθμίστε το σε Γκρίζο (# 989898).

Δημιουργία κειμένου

Σύρετε το σχήμα του κειμένου στον καμβά για να δημιουργήσετε το κάθε μενού. Μπορούμε να προσαρμόσουμε την εμφάνιση κειμένου με πρόσβαση στο παράθυρο ιδιοτήτων κειμένου.

Χρήσιμες συμβουλές για την αλλαγή χρώματος

Το χρώμα είναι ένα από τα πιο σημαντικά στοιχεία για την παροχή ενός ευχάριστου συρματοπλέγματος. Ο ακριβέστερος τρόπος αλλαγής του χρώματος ενός σχήματος είναι ο καθορισμός του κώδικα HTML του χρώματος. Η αποτύπωση του κώδικα HTML για ένα συγκεκριμένο χρώμα μπορεί να είναι δύσκολη. Μπορούμε να χρησιμοποιήσουμε το φύλλο εξαπάτησης χρώματος HTML από το w3cschools.com για να αναζητήσουμε τον σωστό κώδικα HTML για ένα συγκεκριμένο χρώμα.

Μας αρέσει επίσης να χρησιμοποιούμε colorzilla για να διαλέξουμε χρώματα από την οθόνη και να τα χρησιμοποιήσουμε σε Pencil. Κάντε κλικ στο εικονίδιο σταγονόμετρου στην κάτω αριστερή γωνία του Firefox για να επιλέξετε χρώμα στην οθόνη. Μπορούμε επίσης να ανοίξουμε τον επιλογέα χρωμάτων της ColorZilla κάνοντας διπλό κλικ στο εικονίδιο σταγόνων ματιών. Απλά αντιγράψτε επικολλήστε τον κώδικα Hex στον κώδικα HTML του Pencil.

συμπέρασμα

Το μολύβι είναι εύκολο στη χρήση εργαλειομηχανή. Η ενσωμάτωση του μολυβιού με τον Firefox μας επιτρέπει να χρησιμοποιήσουμε και άλλο plugin του Firefox για να δημιουργήσουμε ένα καλύτερο wireframe

Συνδέσεις
Κατεβάστε το μολύβι
Κατεβάστε Colorzilla
W3C HTML χρώμα εξαπατήσει φύλλο