Τα 5 καλύτερα εργαλεία για ευαίσθητο σχεδιασμό
Επιτρέψτε μου να ξεκινήσω λέγοντας αυτό, δεν θα συμπεριλαμβάνω κανένα εργαλείο σχεδιασμού point-and-click σε αυτόν τον κατάλογο (νομίζω ότι το Adobe Edge Reflow). Ο λόγος είναι αρκετά απλός, πιστεύω ότι είναι κακό για όλους. σχεδιαστές, πελάτες, κωδικοποιητές ... όλοι υποφέρουν.
Δεν πρόκειται για την ποιότητα της παραγωγής κώδικα από αυτά τα προγράμματα. Δεν είναι επειδή κάνει το σχέδιο "πολύ εύκολο". Είναι επειδή δεν έχει σημασία πόσο καλά είναι αυτά τα προγράμματα, θα περιορίζουν πάντα τους ανθρώπους που τα χρησιμοποιούν.
Θα είναι περιορισμένες, ακόμη και από το τι μπορεί να επιτελέσει το πρόγραμμα, αλλά από αυτό που πιστεύουν ότι μπορεί να επιτύχει. Εάν το σκέφτονται, ο μέσος χρήστης θα το συγκρίνει πιθανώς με εργαλεία όπως το PowerPoint ή / και οποιοδήποτε αριθμό προγραμμάτων εκτύπωσης, που θα πέσει και πάλι σε παλιά νοοτροπία. Εκεί βρίσκεται το πρόβλημα. Τα εργαλεία οπτικής δημοσίευσης ιστού θα προσπαθήσουν πάντα να εφαρμόζουν παλιές διαδικασίες στις νέες τεχνολογίες.
Μια πραγματικά ροή εργασίας που είναι προσανατολισμένη στο web είναι αυτή που αγκαλιάζει τις βασικές έννοιες και τις τεχνολογίες πάνω στις οποίες κατασκευάζεται ο ιστός. Σίγουρα, μπορείτε να χρησιμοποιήσετε οποιοδήποτε αριθμό οπτικών εργαλείων για τη δημιουργία ιστοτόπων που ανταποκρίνονται τεχνικά, αλλά θα χάνατε το σημείο.
Δεν πρόκειται για προσαρμόσιμη διάταξη. Πρόκειται για την παροχή πληροφοριών σε όσο το δυνατόν περισσότερους ανθρώπους. Υπάρχουν μερικά πράγματα που ένα πρόγραμμα όπως το Edge Reflow απλά δεν μπορεί να κάνει. Εν ολίγοις, πρέπει να γράψετε κώδικα.
Ως εκ τούτου, τα καλύτερα εργαλεία για να σας βοηθήσουν στην απόκριση του σχεδιασμού είναι εκείνα τα εργαλεία που σας βοηθούν να κατανοήσετε και να χρησιμοποιήσετε τεχνολογίες ιστού, να σχεδιάσετε τον ιστότοπό σας λεπτομερώς, να γράψετε τον καλύτερο κώδικα πιο αποτελεσματικά και να δοκιμάσετε / παρουσιάσετε τα σχέδια που ανταποκρίνονται στους πελάτες σας στο πλαίσιο.
Ας ξεκινήσουμε με το προφανές:
1) Το πρόγραμμα περιήγησής σας
Όχι, δεν το αρνούνται. Αυτό είναι κυριολεκτικά το πιο σημαντικό εργαλείο που έχετε, επειδή σας δείχνει ακριβώς τι μοιάζει με τον ιστότοπό σας υπό τις συγκεκριμένες σας συνθήκες.
Υπήρξε πολλή συζήτηση σχετικά με το αν ο σχεδιασμός στο πρόγραμμα περιήγησης είναι καλύτερο από το σχεδιασμό σε έναν επεξεργαστή εικόνας όπως το Photoshop ή το GIMP. Επιτρέψτε μου να το επιλύσω αυτό για σας ...
Οι χρήστες του ιστότοπού σας θα κάνουν την περιήγησή τους στο Photoshop; Οι συντάκτες εικόνων μπορούν να κάνουν όμορφες εικόνες, να μην μιμούνται πραγματικές εμπειρίες. Χρησιμοποιήστε επεξεργαστές εικόνων για επεξεργασία φωτογραφιών. Χρησιμοποιήστε το πρόγραμμα περιήγησης για να σχεδιάσετε ιστοσελίδες.
Ήρθε η ώρα να αποκλείσουμε τους πελάτες μας από τις υπερ-λεπτομερείς mockups που έχουν συνηθίσει. Καθώς ο ιστός αλλάζει και οι διαδικασίες μας γίνονται πιο ρευστοί και επαναληπτικοί, πρέπει να προχωρήσουμε.
Εγκαταστήστε τουλάχιστον ένα πρόγραμμα περιήγησης με κάθε σημαντική μηχανή εμφάνισης και λάβετε ορισμένες επεκτάσεις προγραμματιστών. Συνηθίστε να βλέπετε τον πηγαίο κώδικα με τον τρόπο που το βλέπει ο περιηγητής σας, επειδή πρόκειται να είστε εδώ εδώ και λίγο καιρό.
2) Εφαρμογή σχεδίασης του Google Drive
Τεχνικά, σχεδόν οποιοσδήποτε επεξεργαστής εικόνων με βάση τον φορέα θα μπορούσε να κάνει τη δουλειά όταν σχεδίαζε τις ιστοσελίδες και τις εφαρμογές σας. Έχω την τάση να καλωσορίζω την έκδοση desktop της ιστοσελίδας μου πρώτα, να δημιουργήσω ένα αντίγραφο του αρχείου, να αλλάξω το μέγεθος του καμβά και να πάω από εκεί. Χρησιμοποιώντας διανύσματα καθιστά εύκολο το μέγεθος και την αναδιάταξη των στοιχείων σας, ενώ βρίσκεστε ακόμα στο στάδιο του σχεδιασμού.
Προτιμώ την εφαρμογή σχεδίασης Google Drive για μερικούς λόγους:
Χαρακτηριστικά κοινής χρήσης και συνεργασίας: Η Google κάνει την ανταλλαγή πληροφοριών καλύτερη από ό, τι σχεδόν όλοι οι άλλοι. Με το σχολιασμό στο πλαίσιο, την ταυτόχρονη επεξεργασία και την ολοκλήρωση του Hangout, είμαι ερωτευμένος.
Αυτόματοι οδηγοί: Σε κάθε σχέδιο, οι οδηγοί δημιουργούνται αυτόματα με βάση τις διαστάσεις κάθε αντικειμένου που βάζετε στο έγγραφο. Αυτό καθιστά εύκολη την απεικόνιση στοιχείων σταθερού μεγέθους στο έγγραφο, κάτι το οποίο είναι ιδανικό για τους σχεδιαστές με τη σκέψη του δικτύου όπως εμένα.
Καθώς μοιράζομαι αυτά τα καλώδια με πελάτες, αυτή η επαγγελματική εμφάνιση είναι ένα μεγάλο πλεονέκτημα. Και όμως, δεν είμαι περιορισμένος σε αυτούς τους οδηγούς. Θεωρώ ότι είναι μια καλή εναλλακτική λύση για εφαρμογές mockup που προσπαθούν να σας συγκρατήσουν σε ένα δίκτυο.
Ω, και είναι δωρεάν. Χρειάζεται να πω περισσοτερα?
3) πρωτότυπα στυλ
Με βάση τα πλακάκια στυλ, Πρωτότυπα στυλ είναι ένα παραδοτέο εντός του προγράμματος περιήγησης που έχει σχεδιαστεί για να σας βοηθήσει να δώσετε στους πελάτες σας μια ιδέα για το πώς θα εμφανίζεται η τυπογραφία, το χρώμα και τα στοιχεία UI του ιστοτόπου τους. Δεδομένου ότι προορίζεται να προβληθεί στο πρόγραμμα περιήγησης, θα υπάρξουν λιγότερες ανακολουθίες μόλις δημιουργηθεί ο ιστότοπος.
Επιπλέον, θα έλεγα ότι τα πρωτότυπα στυλ θα μπορούσαν να βοηθήσουν τους πελάτες μας να διαχωρίσουν διανοητικά τις έννοιες του UX και της αισθητικής. Και πραγματικά, οτιδήποτε βοηθά τους πελάτες μας να κατανοήσουν καλύτερα τη διαδικασία σχεδιασμού ιστοσελίδων μπορεί να είναι μόνο καλό.
4) Responsinator
Υπεύθυνος είναι ένα απλό εργαλείο που δείχνει τον ιστότοπό σας σε διαφορετικά μεγέθη. Μιμείται, με έναν πολύ βασικό τρόπο, πολλά διαφορετικά μεγέθη και περιβάλλοντα συσκευών. Αυτό το εργαλείο δεν είναι προς όφελός σας. Θέλετε να δείτε ποια είναι η εμφάνιση της ιστοσελίδας σας σε μικρότερα μεγέθη; Αλλάξτε το μέγεθος του παραθύρου του προγράμματος περιήγησης. Καλύτερα, να πάρετε κάποιες πραγματικές κινητές συσκευές και να κάνετε μερικές πραγματικές δοκιμές.
Αυτή η εφαρμογή Ιστού χρησιμοποιείται καλύτερα για να δείξει στους πελάτες σας μια γρήγορη προσέγγιση της εμφάνισης του ιστότοπού τους σε περιβάλλοντα διαφορετικά από επιτραπέζιους ή φορητούς υπολογιστές.
Και πάλι, υπάρχουν πολλά εργαλεία που θα μπορούσαν να κάνουν την ίδια δουλειά με την Responsinator και, εξίσου αποτελεσματικά, υποθέτω. Το διάλεξα αυτό επειδή παρουσιάζει αρκετές σιλουέτες συσκευών το ένα μετά το άλλο, για εύκολη ανάγνωση.
5) Επιθεώρηση του Adobe Edge
Τώρα αυτό είναι για εσάς. Εάν διαθέτετε ένα εργαστήριο δοκιμών για κινητά (και όσο πιο γρήγορα μπορείτε να κάνετε ένα, τόσο το καλύτερο) Έλεγχος άκρων θα συγχρονίσει όλες τις συσκευές σας για να δει την ίδια σελίδα ταυτόχρονα. Ανανεώστε τη σελίδα σε μία συσκευή και ενημερώστε τα όλα.
Σε αντίθεση με τους υπόλοιπους σε αυτόν τον κατάλογο, αυτό δεν είναι ελεύθερο. Ωστόσο, εάν μπορείτε να αντέξετε οικονομικά αρκετές κινητές συσκευές που χρειάζονται μια λύση όπως αυτή, αξίζει τα χρήματα.
συμπέρασμα
Όπως πάντα, το σημαντικότερο πλεονέκτημά σας είναι ο εγκέφαλός σας. Αυτά τα εργαλεία, και άλλοι σαν τους, μπορούν μόνο να σας βοηθήσουν στο δρόμο σας. Επέλεξα αυτά επειδή εκτελούν πολύ συγκεκριμένες λειτουργίες που με βοηθούν στο σχεδιασμό ανταποκριτικών περιοχών. Δεν περιορίζουν αυτό που μπορώ να κάνω.
Τα καλύτερα εργαλεία είναι πραγματικά αυτά που μένουν μακριά από το δρόμο.
Χρησιμοποιείτε αυτά τα εργαλεία; Ποια είναι τα κορυφαία 5 εργαλεία σας για ευέλικτο σχεδιασμό; Ενημερώστε μας στα σχόλια.
Προτεινόμενη εικόνα / μικρογραφία, εικόνα εργαλείων μέσω Shutterstock.