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

Το δύσκολο κομμάτι για το σχεδιασμό για την ανταπόκριση δημιουργεί μια τοποθεσία που φαίνεται καλή και μικρή. Πρέπει να λάβετε υπόψη σας πολλά πριν ανοίξετε το πρόγραμμα σχεδίασης και πηγαίνετε στη δουλειά. Είναι ένα επιπλέον βήμα που συνήθως καταλήγει να αξίζει τον κόπο στο τελικό προϊόν. Είναι πολύ προφανές όταν ένας σχεδιαστής δεν σχεδιάζει την ανταπόκριση. τα sites τείνουν να φαίνονται πραγματικά γυμνά και βαρετά.

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

1. Χρησιμοποιήστε εξαιρετική τυπογραφία

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

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

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

Σιδηρουργός

Το περιοδικό Smashing τείνει να κάνει το ίδιο. Εξαφανίζονται από τη δεξιά πλευρά του σχεδίου (οι διαφημίσεις) εξ ολοκλήρου όταν το παράθυρο έχει μειωθεί. Ωστόσο, το κείμενο αναδιπλώνεται μέσα στο παράθυρο και τα στυλ, τα χρώματα και τα μεγέθη όλα παραμένουν συνεπή.

 SmashingMagazine

2. Χρησιμοποιήστε εξαιρετικές εικόνες

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

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

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

Pandiscio

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

KinHR

3. Μην κοιμάστε στην πλοήγηση

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

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

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

Mashable

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

Μονόκλ

4. Κάνετε τη διασκέδαση στη χρήση

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

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

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

Λάσπη

Ο Neue Yorke χρησιμοποιεί πολλή κίνηση όταν πηγαίνει από το στοιχείο χαρτοφυλακίου στο στοιχείο. Και πάλι, δημιουργεί μια πολύ υψηλή αίσθηση και κρατά τους θεατές να ενδιαφέρονται για αυτό που σύντομα θα αποκαλυφθεί.

NeueYork

5. Σκεφτείτε έξω από το κουτί

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

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

Enso

Το TBWA διαθέτει έναν ιστότοπο με εξαιρετικό σχεδιασμό. Αλλά έχουν επίσης εξαιρετικές εικόνες. Και έχουν επίσης μεγάλη τυπογραφία! Έχουν χρησιμοποιήσει όλα εδώ για να κάνει ένα πολύ μοναδικό και ενδιαφέρουσα ανταποκρινόμενο σχεδιασμό ιστοσελίδων.

tbwa

συμπέρασμα

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

Ποιες συμβουλές θα μοιραστείτε για την εμπλοκή του σχεδιασμού; Βρήκατε ένα πολύ δημιουργικό σχεδιασμό που ανταποκρίνεται; Ενημερώστε μας στα σχόλια.