8 Βασικά εργαλεία σχεδιασμού για να μεγιστοποιήσετε την επισκεψιμότητα στον ιστότοπό σας |

Σύμφωνα με μελέτη της Παγκόσμιας Τράπεζας, περίπου το 75% των ανθρώπων σε όλο τον κόσμο έχουν πρόσβαση σε κινητές συσκευές. Η CNET αναφέρει ότι οι συνδρομές στις υπηρεσίες κινητής τηλεφωνίας αυξήθηκαν από 1 δισεκατομμύριο το 2000 σε πάνω από 6 δισεκατομμύρια το 2012. Λόγω της ταχείας επέκτασης της χρήσης κινητών τηλεφώνων, είναι τώρα πιο κρίσιμο από ποτέ οι ιστοχώροι να λειτουργούν σε πολλαπλές πλατφόρμες. Χρησιμοποιήστε αυτά τα οκτώ εργαλεία, για να βελτιώσετε τον ανταποκρινόμενο σχεδιασμό ιστοσελίδων σας και να μεγιστοποιήσετε τον αριθμό των ατόμων που μπορούν να προβάλλουν και να κάνουν κλικ στους ιστότοπούς σας.

8. Το Adobe Edge Inspect

Ενημερώθηκε και κυκλοφόρησε το 2013 με τη νέα επωνυμία που τη συνδέει με το Creative Cloud. Το Adobe Edge Inspect σάς επιτρέπει να κάνετε προεπισκόπηση των σχεδίων ιστού σας για να δείτε πώς θα προβληθούν σε διαφορετικές πλατφόρμες. Το κύριο πλεονέκτημα του Edge είναι η ικανότητά του να εξοικονομεί χρόνο βλέποντας αλλαγές σε πλατφόρμες σε πραγματικό χρόνο.

Αυτό το εργαλείο καθιστά δυνατό τον συγχρονισμό του υπολογιστή και των κινητών συσκευών. Κάνοντας αυτό, μπορείτε να περιηγηθείτε και να επιθεωρήσετε το σχεδιασμό ιστοσελίδων σε πολλές πλατφόρμες ταυτόχρονα. Επίσης, καθώς κάνετε αλλαγές στο σχεδιασμό και τον εντοπισμό σφαλμάτων στο web, η εργασία σας εμφανίζεται αμέσως στη συσκευή σας, εφόσον εργάζεστε με κώδικα Java, CSS και HTML.

7. Skeleton

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

6. Ανταπόκριση Wireframe

Χάρη σε ένα πειραματικό εργαλείο που χρησιμοποιεί τεχνικές απόκρισης web που ανταποκρίνονται, το Responsive Wireframe χρησιμοποιεί HTML / CSS για να παρέχει ένα πλέγμα επικάλυψης που σας επιτρέπει να βλέπετε τις επιτραπέζιες και κινητές προβολές του σχεδίου σας. Η ιδέα με αυτό το εργαλείο είναι να διευκολύνεται ο σχεδιασμός του στο πρόγραμμα περιήγησης. Ενώ ορισμένοι σχεδιαστές μπορεί να υποστηρίζουν ότι αυτά τα wireframes συντρίβουν τη δημιουργικότητα, άλλοι λένε ότι είναι ένας γρήγορος και απλός τρόπος για να δημιουργήσετε σχέδια που λειτουργούν σε διάφορες πλατφόρμες. Χρησιμοποιώντας αυτό το εργαλείο εξοικονομείτε χρόνο καθώς δοκιμάζετε τα σχέδια χρησιμοποιώντας τα αποκωδικοποιημένα καλώδια για να δείτε πώς θα φαίνονται σε φορητούς υπολογιστές, επιτραπέζιους υπολογιστές και κινητά.

5. Πλακάκια στυλ

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

Αυτές οι κασέτες παρουσιάζουν σχέδια χωρίς να τα προσαρμόζουν σε οποιαδήποτε συσκευή, καθιστώντας τους έναν εύκολο τρόπο να δημιουργήσουν σχέδια και να τα μοιραστούν με τους πελάτες πριν λάβουν υπόψη τις πολλές θεωρήσεις που σχετίζονται με ανταποκρινόμενο σχεδιασμό. Με άλλα λόγια, αυτή η προσέγγιση δίνει στους σχεδιαστές την ελευθερία από περιορισμούς διαστάσεων. Ένα αδελφοποιημένο προϊόν των πλακιδίων Style, "Οδηγός στυλ συστατικού", σας παρέχει συμβουλές για τη λήψη του σχεδίου σας και τη λειτουργία του σε διάφορες πλατφόρμες, όπως το iPhone και το νέο smartphone Blackberry 10.

4. Ο Υπολογιστής Υπολογιστής

Χρησιμοποιώντας ποσοστά, ο υπολογιστής αυτός σας δίνει τα δεδομένα που χρειάζεστε για να μετατρέψετε ένα σχέδιο PSD σε ένα στοιχείο για το έργο σας στο web responsive. Εισάγετε έξι πεδία και, στη συνέχεια, κάντε κλικ στην επιλογή "Υποβολή ερωτήματος". Επιλέξτε τα περιγράμματα, τα περιθώρια και τα παραγεμίσματα στο PSD σας με αυτήν την αριθμομηχανή.

3. Wookmark

Πρόκειται για ένα plug-in jQuery που λαμβάνει τα στοιχεία μιας ιστοσελίδας και τα τοποθετεί σε στήλες. Η διάταξη της στήλης βασίζεται στο μέγεθος του παραθύρου του προγράμματος περιήγησης. Αυτό το εύχρηστο εργαλείο είναι ένας εξαιρετικός τρόπος για να κάνετε μια περιοχή να ανταποκρίνεται σε διάφορα μεγέθη οθόνης.

2. ProtoFluid

Έχοντας ένα πλεονέκτημα επειδή είναι web-based, αυτό το εργαλείο καθιστά ανώφελο να βλέπεις μακέτες του σχεδίου σου με διαφορετικές αναλύσεις και διαστάσεις. Απολαύστε να χρησιμοποιήσετε το Firebug καθώς ελέγχετε τα HTML, CSS, JS και άλλα στοιχεία για προβλήματα. Συντομεύσεις πληκτρολογίου, γρήγορη εναλλαγή μεταξύ διαφορετικών προβολών και καθαρός κώδικας διασφαλίζουν την ταχύτητα καθώς χρησιμοποιείτε αυτό το εργαλείο για να ελέγξετε πόσο καλά φαίνεται το σχέδιό σας σε διαφορετικά μεγέθη οθόνης, συμπεριλαμβανομένων των συσκευών Nexus, iPhone και iPad

1. Ίδρυμα

Αυτό το πλαίσιο front-end εξυπηρετεί την επιλογή κωδικού πιο έξυπνη και ταχύτερη. Μεταξύ των χαρακτηριστικών του, το εργαλείο αυτό σας επιτρέπει να ξεκινήσετε σχεδιάζοντας για μικρές οθόνες. Καθώς εργάζεστε για να φτιάξετε το σχέδιό σας για μεγαλύτερες οθόνες, το Ίδρυμα σας βοηθά να επεκτείνετε τα στοιχεία σχεδιασμού. Επιπλέον, αυτό το εργαλείο σας φέρνει δροσερά πρότυπα HTML που σας δίνουν μια ξεκάθαρη εκκίνηση στο σχεδιασμό της τοποθεσίας.

Επωφεληθείτε από το ευέλικτο πλέγμα αυτού του εργαλείου, τις ανταποκρινόμενες διατάξεις και την ταχεία παραγωγή πρωτοτύπων. Η αποτελεσματικότητα και η αξιοπιστία του Ιδρύματος είναι εμφανής στον κατάλογο των ιστότοπων που το χρησιμοποιούν, το οποίο περιλαμβάνει τα Εθνικά Εργαστήρια National Geographic, Pixar και Los Alamos

. Ποια εργαλεία σας βοήθησαν περισσότερο;

[Εικόνες μέσω]