Μια ματιά στο σχεδιασμό για κινητές συσκευές
Όταν κυκλοφόρησε το πρώτο iPhone, πήρε τον κόσμο τεχνολογίας από καταιγίδα. Από τότε έχει περάσει σχεδόν 5 χρόνια και η αγορά των smartphone έχει αυξηθεί σε δημοτικότητα, ακόμη και η Microsoft έχει πάρει μέρος στον ανταγωνισμό με τα Windows 7 OS και συνεργάτες της. Με τόσους πολλούς χρήστες του Διαδικτύου στο smartphone τους σήμερα, είναι κοινή λογική να περιμένουμε τον αριθμό των ιστότοπων για κινητά να αυξηθούν επιθετικά.
Ωστόσο, ο σχεδιασμός για τον κινητό ιστό είναι μια εντελώς διαφορετική λειτουργία με κοινό σχεδιασμό ιστοσελίδων. Οι ιστοσελίδες μας έχουν σχεδιαστεί για τεράστια οθόνη, αλλά το μέγεθος της οθόνης του smartphone είναι πολύ μικρό σε σύγκριση με αυτό, οδηγώντας έτσι σε ενοχλητικά ζητήματα χρηστικότητας. Νέα πρότυπα και πρακτικές σχεδιασμού απαιτούνται σε μεγάλο βαθμό για ένα καλύτερο σχέδιο κινητής τοποθεσίας με ομαλή εμπειρία χρήστη.
Σε αυτόν τον οδηγό θα προσπαθήσουμε να σχεδιάσουμε έναν φιλικό προς τον χρήστη ιστότοπο για κινητά προγράμματα περιήγησης για κινητά smartphones. Θα μιλήσω για τις βέλτιστες πρακτικές και χρήσιμο εργαλείο για προγραμματιστές για να σχεδιάσετε έναν καλύτερο ιστότοπο για κινητά, οπότε ας πάμε σε αυτό μετά από άλμα!
Σχεδιασμός ισχυρής εμπειρίας χρήστη
Όταν δημιουργείτε έναν ιστότοπο για κινητά, είναι σημαντικό να το κάνετε κρατήστε τους χρήστες σας κατά νου ανά πάσα στιγμή, καθώς τελικά ο ιστότοπός σας σχεδιάζεται και δημιουργείται για να απολαμβάνουν οι χρήστες. Είναι σίγουρα κοινό για τους χρήστες να περιμένουν έναν ιστότοπο για κινητά να συμπεριφέρεται παρόμοια με το περιβάλλον εργασίας, έτσι διατηρώντας την εμπειρία του χρήστη φιλική θα πρέπει να εστιάζετε κυρίως στην οικοδόμηση ενός επιτυχημένου κινητού ιστότοπου.
Υπάρχουν πολλές έννοιες χρηστικότητας που πρέπει να εξεταστούν για τους χρήστες σας. Αυτές οι σκέψεις περιλαμβάνουν Μέγεθος οθόνης, inline εικόνες, υπερσύνδεσμοι, μέγεθος γραμματοσειράς, και πλοήγηση σελίδας. Έχουμε γράψει για το σχεδιασμό κινητής ευχρηστίας για να χαράξετε τον ιστότοπό σας για καλύτερη χρηστικότητα. Εκτός από τον οδηγό, πρέπει πάντα κρατήστε τον εαυτό σας συναγερμό για νέες ιδέες για να βελτιώσετε τον ιστότοπό σας.
Ο προγραμματισμός μιας ισχυρής εμπειρίας χρήστη σημαίνει επίσης ότι πρέπει σκεφτείτε πώς ο χρήστης θα αλληλεπιδρά με τον ιστότοπό σας. Σε μια επιφάνεια εργασίας, ο ιστότοπός σας μπορεί να αλληλεπιδράσει με ένα ποντίκι και ένα πληκτρολόγιο, αλλά σε ένα smartphone οι χρήστες θα είναι τρύπημα, κτυπώντας, και σπρώχνοντας το δρόμο τους γύρω από τον ιστότοπό σας. Ίσως πρέπει να σχεδιάσετε τον ιστότοπο με τον τρόπο που μπορούν να κάνουν οι χρήστες πρόσβαση στις πληροφορίες του ιστότοπου εύκολα με αυτές τις φυσικές κινήσεις.
Κρατήστε τις σελίδες Σύντομες & Γλυκό
Το κρέας και οι πατάτες οποιασδήποτε ιστοσελίδας είναι το περιεχομένου σελίδας. Κάθε μία από τις ιστοσελίδες σας διαθέτει σημαντικές ποσότητες χρήσιμων πληροφοριών για τους χρήστες σας, όπως κείμενο, φωτογραφίες ή βίντεο. Θα βρείτε επίσης άρθρα ειδήσεων και αναρτήσεις ιστολογίου που εκτελούνται για μερικές σελίδες, οι οποίες μπορούν να βοηθήσουν στη διάλυση του κειμένου, αλλά δεν συνιστάται για κινητές συσκευές, όπως η τεχνική απαιτεί περισσότερη φόρτωση σελίδας που σημαίνει περισσότερος χρόνος αναμονής από την πλευρά του χρήστη.
Εκτός αν είναι απολύτως απαραίτητο προτείνω διατηρώντας το περιεχόμενο της σελίδας σας σύντομο. Θα πρέπει επίσης να εξετάσει το ενδεχόμενο να φαίνεται γλυκιά από styling τη γραμματοσειρά σε πολύ μεγαλύτερο μέγεθος και ίσως κινούμενες εικόνες στην άκρη. Με το περιεχόμενό σας σε πλήρη οθόνη αυτό προσελκύει φυσικά την προσοχή, για να μην αναφέρουμε τη βελτιστοποίηση κάνει πραγματικά τη σάρωση των σελίδων πολύ πιο απλή. Αυτός είναι και ο λόγος για τον οποίο μονή διάταξη στήλης ταιριάζει τέλεια το νομοσχέδιο.
Στις περισσότερες περιπτώσεις, τα προγράμματα περιήγησης για κινητά δεν πρόκειται να φορτώσουν τις ιστοσελίδες τόσο γρήγορα όσο τα προγράμματα περιήγησης επιφάνειας εργασίας και αυτό θα μπορούσε να ενοχλήσει τους αναγνώστες σας, γι 'αυτό πρέπει να βελτιστοποιήστε το περιεχόμενο και τον ιστότοπο για φόρτωση περιεχομένου υψηλής ταχύτητας. Μπορείς είτε συντομεύστε το άρθρο διατηρώντας ταυτόχρονα το πλήρες περιεχόμενο, ή απλά αφαιρέστε τις περιττές εικόνες. Τοποθετήστε την προσοχή σας στην απλότητα αντί για την ομορφιά.
Η βασική πλοήγηση σας είναι ο σωστός τρόπος ζωής για τους επισκέπτες σας που θέλουν να μετακινούνται μεταξύ των σελίδων. Σε μια κινητή συσκευή, οι σύνδεσμοι οθόνης θα φαίνονται πολύ μικρότεροι από τη φύση τους, και έτσι θα είναι πολύ πιο δύσκολο να αγγίξετε. Ένα ουσιαστικό τσίμπημα για την επίλυση αυτού του ζητήματος είναι να μεγιστοποιήστε τη γραμματοσειρά και το χώρο για τους συνδέσμους πλοήγησης, ίσως να αναλάβει ολόκληρη την περιοχή μπλοκ. Εναλλακτικά μπορείτε σχεδιάστε τη γραμμή πλοήγησης ώστε να είναι παρόμοια με την μπάρα καρτελών της πραγματικής εφαρμογής iPhone, όπως αυτή που παρουσιάστηκε παραπάνω.
Δημιουργία στυλ CSS για κινητά
Τώρα που γνωρίζουμε πώς να βελτιστοποιήσουμε τον ιστότοπο για κινητά για καλύτερη αναγνωσιμότητα και χρηστικότητα, θα ήταν καλό να μιλάμε για στυλ CSS. Κάθε φύλλο στυλ CSS περιέχει πολλούς επιλογείς με ιδιότητες σχετικά με τις γραμματοσειρές, τα μεγέθη, τη θέση και τις ρυθμίσεις εμφάνισης. Όταν πρόκειται για κινητά θα πρέπει να προσέχετε πώς μπλοκάρουν τα μπλοκ σας.
(Εικόνα Πηγή: Smashing Magazine)
Μια περιοχή για να ξεκινήσετε είναι να επαναφέρετε τα ποσοστά περιτύλιξης του ιστότοπού σας σε ποσοστό. Είναι συνηθισμένο να χρησιμοποιείτε εικονοστοιχεία ως τη μονάδα για την τοποθέτηση, το ύψος της γραμμής, το μέγεθος της γραμματοσειράς και το πλάτος του div, αλλά όταν ασχολείστε με το κινητό, θα θέλετε οι σελίδες σας να είναι υγρό και μετάβαση μεταξύ κάθε συσκευής φυσικά. Ο ορισμός του δοχείου διαμοιράζεται σε πλάτος 100% θα επιτρέψει το περιεχόμενο σε γεμίστε εύκολα μεταξύ πορτρέτου / οριζόντιας λειτουργίας χωρίς να περάσετε πάνω από την άκρη.
Αν είστε ένας από τους ανθρώπους που θέλουν να αναδιαμορφώσουν ολόκληρη τη διάταξη σας, βεβαιωθείτε ότι είστε χτυπήστε τα πάντα με ένα επαναφορά. Επίσης οι παράγραφοι, οι επικεφαλίδες και οι συνδέσεις πλοήγησης πρέπει να ρυθμιστούν σε όλες εμφάνιση: μπλοκ? έτσι ώστε να έχετε το γραμμικό αίσθημα εκτύπωσης. Επανατοποθετήστε τα περιθώρια και την επένδυση για να αφαιρέσετε το φουσκωτό από τη διάταξη σας. Αποφύγετε τους πίνακες αν είναι δυνατόν, καθώς αυτές τείνουν να αποδίδουν αποτελέσματα μεταξύ των συσκευών.
Μεγάλες εικόνες είναι επίσης μια ταλαιπωρία μεταξύ συσκευών. Οι περισσότερες εικόνες του ιστότοπού σας θα είναι μεγαλύτερες από 480ppx και ίσως να μην θέλετε να σπάσουν το δοχείο. Η πρώτη επιλογή είναι να ορίστε το πλάτος τους στο 100%, ώστε οι εικόνες να μπορούν να αλλάξουν φυσικά. Είναι σίγουρα δυνατό δημιουργήστε διαφορετικά σύνολα εικόνων για τον ιστότοπό σας και να τα καταστήσετε διαφορετικά με βάση τον πράκτορα του προγράμματος περιήγησης, αλλά ειλικρινά αυτό απλά προσθέτει περισσότερα έργα από την πλευρά σας, έτσι προσπαθήστε χρησιμοποιήστε την τεχνική μόνο όταν είναι πραγματικά απαραίτητη.
Σχεδιασμός ιστοσελίδων για το iPhone
Το μερίδιο αγοράς κινητής τηλεφωνίας είναι αρκετά μεγάλο και διαιρεμένο, αλλά η Apple έχει μια μεγάλη φέτα της πίτας με τα iDevices. Τόσο το iPhone όσο και το iPad είναι συσκευές έτοιμες για χρήση στο Internet με ενσωματωμένη λειτουργικότητα αφής. Διαθέτουν το ίδιο προεπιλεγμένο πρόγραμμα περιήγησης ιστού, το Safari και μια πληθώρα άλλων επιλογών.
Για δικτυακούς τόπους που σχετίζονται με το iPhone, θα πρέπει να στοχεύσετε το μέγεθος της οθόνης. Το σταθερό μέγεθος οθόνης έχει οριστεί σε 320px σε 480px για παλαιότερα μοντέλα iPhone και 640 εώς 960 εικονοστοιχεία για το iPhone 4 και το iPhone 4S.
Οι οθόνες iPhone περιορίζονται στο χώρο. Επρεπε να είχες ένα μπλοκ περιεχομένου που εκτείνεται για όσο χρονικό διάστημα χρειάζεται. Διατηρώντας στοιχεία σε μια μόνο στήλη θα σας εξοικονομήσει πονοκεφάλους και επιτρέψτε σε μια υγρή διάταξη “συμπληρώνω” τόσο σε κατακόρυφο όσο και σε οριζόντιο περιβάλλον. Για το σκοπό αυτό, θα χρειαστεί να αναπτύξετε ένα άλλο πρότυπο και να βρείτε έναν τρόπο να ελέγξετε αν ο επισκέπτης (οι) σας χρησιμοποιεί ένα iPhone. Το μικρό απόσπασμα PHP παρακάτω θα πρέπει να λειτουργεί καλά:
Βασικά η λογική τραβάει την παγκόσμια μας $ _SERVER μεταβλητή για τον πράκτορα HTTP και ελέγχει αν η λέξη “iphone” εμφανίζεται οπουδήποτε. Εάν ναι τότε ξέρουμε ότι ο επισκέπτης μας χρησιμοποιεί ένα iPhone και από εκεί μπορούμε να βάλουμε ελαφρώς διαφορετικά HTML ή ακόμα και μια ολόκληρη νέα διάταξη προτύπου! Αυτό θα μπορούσε επίσης να χρησιμοποιηθεί για να να συμπεριλάβετε ένα φύλλο στυλ σχετικό με το iPhone, να αλλάξετε τους τίτλους της σελίδας σας, να αφαιρέσετε εικόνες ή σχεδόν οποιαδήποτε δυναμική εφέ.
Όταν πρόκειται για την εξυπηρέτηση νέων στυλ, υπάρχει ένας ευκολότερος τρόπος. Όπως αναφέρθηκε νωρίτερα, το μέγιστο μέγεθος οθόνης για το iPhone είναι 960px ευρύ. Επομένως, με νέα ερωτήματα μέσων CSS3 μπορείτε να προσθέσετε στυλ απευθείας στο κεντρικό φύλλο στυλ του ιστοτόπου σας μόνο εμφάνιση στο iPhone. Παρακάτω είναι ένας μικρός κώδικας παραδείγματος:
@media οθόνη και (max-πλάτος συσκευής: 960px) / * iPhone css * /
Αυτό λειτουργεί επειδή Το CSS μπορεί πλέον να ανιχνεύει πράκτορες περιήγησης και τις ιδιότητές τους. Το μέγιστο πλάτος οθόνης είναι μία από τις ιδιότητες που μπορούν επίσης να ανιχνευθούν.
Ο all-in-all κινητός ιστότοπος για συσκευές iPhone δεν είναι πολύ δύσκολο να σχεδιαστεί για, υπάρχουν ακριβώς πάρα πολλά παραδείγματα για να αναφερθώ, δηλαδή, iPhone CSS. Κρατήστε τον εαυτό σας απασχολημένος μελετά και μην φοβάστε να πειραματιστείτε με νέες τεχνικές στο σχεδιασμό του UI.
Κινητό jQuery Scripting
Η πλειονότητα των προγραμματιστών του web development είναι εξοικειωμένοι με τη βιβλιοθήκη jQuery. Προσφέρει κάποια φανταστική συντομογραφία για τα εφέ κωδικοποίησης, τα κινούμενα σχέδια, τα αναπτυσσόμενα μενού και μια σειρά από άλλες λειτουργίες στο πρόγραμμα περιήγησης και απλά γίνεται πιο εκπληκτικό με την ανακοίνωση του jQuery Mobile. είναι δεν συνιστάται να μεταβείτε απευθείας στην τεχνολογία και να φορτώσετε τον ιστότοπό σας με εφέ παντού, αλλά για λόγους δοκιμής η προηγμένη λειτουργικότητα μπορεί να παίξει πολύ καλά.
Το jQuery Mobile είναι λίγο διαφορετικό από το κανονικό jQuery καθώς σας δίνει ένα πλήρες περιβάλλον για να αξιοποιήσετε. Όταν εργάζεστε με τα αρχεία τους, δεν είναι μόνο το JavaScript, αλλά και τα στυλ CSS για κουμπιά, συνδέσμους και εφέ μετάβασης. Εξακολουθείτε να γράφετε ιστοσελίδες σε κώδικα HTML, αλλά η ομάδα του jQuery Mobile έχει παρέσχε πολλά προαιρετικά χαρακτηριστικά σχεδιασμού UI. Υπάρχουν πολλά που μπορούμε να κάνουμε με αυτό το πλαίσιο, αλλά από τότε το πλαίσιο είναι ακόμα σε beta, ας επιμείνουμε σε απλά αποτελέσματα.
Ένα μικρό σεμινάριο στο blog του DevGrow παρέχει μερικά εκπληκτικά παραδείγματα. Ο επίσημος ιστότοπος προσφέρει επίσης demos για να δοκιμάσετε. Σημειώστε ότι χρησιμοποιούμε το χαρακτηριστικό HTML, μετάβαση δεδομένων για να προσθέσετε εφέ κίνησης με οποιαδήποτε από τις προκαθορισμένες τιμές. Αυτές περιλαμβάνουν slide, pop, flip, fade, κλπ. Δείτε το μικρό παράδειγμα DevGrow για να πάρετε μια γεύση από αυτά τα εφέ.
Τα αποτελέσματα και οι μεταβάσεις είναι αρκετά τακτοποιημένα και το γεγονός ότι μπορείτε να δημιουργήσετε μια ολόκληρη διεπαφή κινητού τηλεφώνου αυστηρά με το jQuery είναι επίσης ένα τεράστιο βήμα προς τα εμπρός για αυτήν την πλατφόρμα, αλλά με την πλατφόρμα μόνο σε beta, δεν θα συνιστούσα να δημιουργήσετε ολόκληρο τον ιστότοπό σας για κινητά με τη βιβλιοθήκη τους, ειδικά με το γεγονός ότι είναι δεν υποστηρίζονται από όλα τα μεγάλα smartphones τη στιγμή της γραφής (ιδιαίτερα το Windows Phone 7), αλλά σίγουρα θα βελτιωθεί με το χρόνο.
Τελικά σας συνιστώ να εξοικειωθείτε με αυτό το νέο πλαίσιο κινητής τηλεφωνίας πριν αναπτύσσοντας ζωντανά σε οποιοδήποτε έργο.
Χρήσιμα εργαλεία για προγραμματιστές
Οι προγραμματιστές κινητής τηλεφωνίας δεν αναζητούν απλώς πόρους κωδικοποίησης και σχεδιασμού. Υπάρχει επίσης υψηλή ζήτηση για εργαλεία λογισμικού και IDE, για να μην αναφέρουμε ισχυρά κινητά πλαίσια. Η ανάπτυξη του ιστού είναι ένα δύσκολο έργο που απαιτεί αρκετή αφοσίωση, αλλά η χρήση πρόσθετων εργαλείων θα κάνει τη δουλειά σας πολύ πιο εύκολη.
Opera Mobile Emulator
Ψάχνετε για έναν τρόπο να ελέγξετε τον τρόπο προβολής του ιστότοπού σας για κινητά; Αυτό μπορεί να είναι ένας τεράστιος πόνος αν δεν έχετε ένα smartphone με πρόσβαση στο Internet. Ή απλά δεν θέλετε να χρησιμοποιήσετε το smartphone σας για να δοκιμάσετε τον ιστότοπο κάθε φορά που μια ενημέρωση ωθείται στον server σας. Λοιπόν, το Opera Mobile Emulator είναι ένα φανταστικό κομμάτι λογισμικού για να δοκιμάσετε τον ιστότοπό σας για κινητά.
Ο εξομοιωτής υποστηρίζει γύρω 20 προφίλ για κινητά όπως το Samsung Galaxy S, το HTC Desire και ακόμη και το tablet όπως το Motorola Xoom. Είναι επίσης δυνατή η ρύθμιση του προσαρμοσμένη ανάλυση και πυκνότητα pixel για σκοπούς εντατικής δοκιμής. Το καλύτερο από όλα, δεν χρειάζεται να κάνετε υπερβολικό έργο διαμόρφωσης, κάντε μερικά μόνο κλικ και είστε καλό να πάτε.
Η λήψη είναι εντελώς δωρεάν και το λογισμικό λειτουργεί σε περιβάλλον Mac OS X και Windows. Οι προγραμματιστές τους είναι σκληροί στη δουλειά, δημιουργώντας κατάλληλα πρότυπα ιστού και τροποποιώντας τον κινητό εξοπλισμό απόδοσης. Συνιστώ τα άλλα εργαλεία dev, αν ψάχνετε για επιπλέον εργαλεία για να σας βοηθήσουμε στο δρόμο.
PhoneGap
Δεν έχουν αναπτυχθεί πολλά API μέσω HTML5 για την ανάπτυξη σταθερών εφαρμογών για κινητά. Ειδικά το κινητό τοπίο στερείται αυτών των τύπων ιστοσελίδων, και γι 'αυτό το λόγο το PhoneGap γεμίζει τόσο καλά τη θέση. Η πλατφόρμα τους σας επιτρέπει εύκολα Κατασκευάστε τις εφαρμογές που βασίζονται σε HTML5 ως εγγενείς εφαρμογές σε 6 διαφορετικές πλατφόρμες.
Η διαδικασία λειτουργεί καταρχήν συμπιέζοντας τον κώδικα σας και διαβιβάζοντάς τον μέσα από το πλαίσιο εφαρμογής του PhoneGap. Από εκεί, οι εφαρμογές σας μπορούν να προσεγγίσουν ένα μεγάλο μέρος της αγοράς κινητής τηλεφωνίας, συμπεριλαμβανομένων των Android, iOS, Windows Phone 7 και BlackBerry.
Αν είστε λίγο συγκεχυμένοι μην φοβάστε πάρα πολύ. Οι σελίδες υποστήριξής τους περιγράφουν με προσοχή τη διαδικασία και προσφέρουν συνδέσμους σε χρήσιμους πόρους. Οι εφαρμογές που έχουν ήδη αναπτυχθεί έχουν συγκεντρωθεί σε ένα όμορφο χαρτοφυλάκιο βιβλιοθήκης. Ελέγξτε την πλήρη συλλογή των εφαρμογών τους, την οποία μπορείτε να ταξινομήσετε στη συνέχεια με συσκευές με στιγμιότυπα οθόνης.
Aptana Studio
Ο ιστότοπος Aptana είναι ο κορυφαίος χώρος για την εκμάθηση των εργαλείων ανάπτυξης. Η τελευταία έκδοση της εφαρμογής, Aptana 3.0.3, διαθέτει πλήρως ενσωματωμένο IDE για την ανάπτυξη ιστού, τα στυλ CSS και την τοποθέτηση ετικετών HTML και το καλύτερο μέρος: Το Aptana είναι εντελώς Ελεύθερος για να κατεβάσετε! Προσφέρουν πακέτα και για τα 3 μεγάλα λειτουργικά συστήματα (συμπεριλαμβανομένου του Linux), γεγονός που αποτελεί τεράστια άνεση για τους προγραμματιστές.
Αυτό που κάνει το Aptana ιδιαίτερο είναι το πόσο γρήγορα μπορείτε να αναπτύξετε μια μικρή εφαρμογή Ιστού και να δοκιμάσετε το σχέδιό σας. Η σουίτα στούντιο σας επιτρέπει να να αναπτύξετε γρήγορα και να δοκιμάσετε μια εφαρμογή web που τρέχει πάνω σε Ruby on Rails, PHP, Python ή απλά HTML / CSS, και τα χαρακτηριστικά τους που τονίζουν τον κώδικα έχουν βελτιωθεί πρόσφατα περιλαμβάνουν νέες βιβλιοθήκες ετικετών HTML5 και CSS3. Έρχεται επίσης με την ενσωμάτωση Git, ένα ενσωματωμένο τερματικό, κώδικα debugger, και μια χούφτα άλλων ικανών χαρακτηριστικών.
Κινητά κιτ GUI και εικονίδια
Ποιος θα ήταν ο ιστός χωρίς ελεύθερα που βρίσκονται γύρω; Για τους σχεδιαστές ιστοσελίδων, η σημασία της διασύνδεσης χρήστη κατατάσσεται πάνω από οτιδήποτε άλλο. Απλά GUIs είναι δύσκολο να έρθουν κοντά και μόνο οι πιο δημιουργικοί σχεδιαστές έχουν έρθει με λύσεις εργασίας.
Ωστόσο, υπάρχουν πολλοί ελεύθεροι ακόμη πόροι ποιότητας που διατίθενται για σας web designer για να δοκιμάσετε. Αυτά τα κιτ GUI σχεδιάζονται ως επί το πλείστον για το Adobe Photoshop ή το Fireworks, όπου μπορείτε να μετακινήσετε στοιχεία και να τα εξαγάγετε ως αρχεία επίπεδης εικόνας.
Τα εικονίδια είναι ένας πολύ χρήσιμος πόρος για να έχετε. Οι σχεδιαστές δημιουργούν δωρεάν σύνολα και προσφέρουν τους σε απευθείας σύνδεση πιο συχνά από ποτέ. Ένας τέτοιος δικτυακός τόπος Glyphish έχει μια βιτρίνα τόσο δωρεάν όσο και pro icons. Αυτά τα σχέδια βασίζονται σε ένα ενιαίο θέμα που θα χρησιμοποιηθεί σε πρότυπα για κινητά και σχέδια εφαρμογών.
Η συλλογή προτύπων πρωτοτύπων για κινητές συσκευές θα σας βοηθήσει πολύ κατά τη διάρκεια της διαδρομής της ανάπτυξης ιστοτόπων και εφαρμογών. Δεν πρέπει να ξεκινήσετε την κωδικοποίηση έως ότου έχετε ισχυρό γραφικό περιβάλλον και αυτά τα κιτ ιστού θα σας ξεκινήσουν στην σωστή πορεία.
iOS 5 κιτ GUI
Διανυσματικά στοιχεία UI του iPhone
iPhone App Icon Kit
Ηλεκτρονικοί μαγνήτες (DIY Kit)
GUI διεπαφής Android
