19 πραγματικά χρήσιμα εκπαιδευτικά σεμινάρια σχεδιασμού ιστοσελίδων

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

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

01. Πώς να αρχίσετε να σκέφτεστε ανταποκριτικά

Εκπαιδευτικά σεμινάρια σχεδιασμού ιστοσελίδων: Πώς να αρχίσετε να σκέφτεστε ανταποκριτικά



πώς να φτιάξετε ένα μοτίβο στον εικονογράφο cc
Μπείτε σε μια απόκριση του νου(Πιστωτική εικόνα: FreeCodeCamp)

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

02. 9 αποκριτικές τυπογραφικές συμβουλές

Εκπαιδευτικά σεμινάρια σχεδιασμού ιστοσελίδων: 9 συμβουλές για τυπογραφία που ανταποκρίνονται

Λάβετε συμβουλές τύπου απόκρισης από τους ειδικούς(Πιστωτική εικόνα: Adam Banks)

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

03. Οι κανόνες της τυπογραφίας διαδικτυακής απόκρισης

Οι κανόνες της τυπογραφίας web ανταποκρίνεται

Ακολουθήστε αυτές τις συμβουλές για να αποκτήσετε σωστή τυπογραφία ιστού

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

04. Σχεδιάστε έναν αποκριτικό ιστότοπο με μέγεθος em

Σχεδιάστε έναν αποκριτικό ιστότοπο με μέγεθος em

Δημιουργήστε τις σελίδες σας έτσι ώστε το σχέδιο να μην σπάσει εάν αλλάξει το μέγεθος της γραμματοσειράς

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

05. Οδηγοί προτεραιότητας: μια εναλλακτική λύση περιεχομένου για τα wireframes

Οδηγοί προτεραιότητας: μια εναλλακτική λύση περιεχομένου για τα wireframes

Μάθετε γιατί πρέπει να χρησιμοποιείτε οδηγούς προτεραιότητας και όχι wireframes

Τα Wireframes μπορεί να είναι το πιο ευρέως χρησιμοποιούμενο εργαλείο για το σχεδιασμό ιστοτόπων, εφαρμογών και άλλων ψηφιακών διεπαφών, αλλά δεν είναι χωρίς τα μειονεκτήματά τους, ιδίως όταν πρόκειται για σχεδιασμό που ανταποκρίνεται. Εδώ οι Heleen van Nues και Lennart Overkamp παρουσιάζουν την προτιμώμενη εναλλακτική τους λύση για τα wireframes: οδηγοί προτεραιότητας , τα οποία περιέχουν περιεχόμενο και στοιχεία για μια οθόνη για κινητά, ταξινομημένα κατά ιεραρχία από πάνω προς τα κάτω και χωρίς προδιαγραφές διάταξης.

06. Ο οδηγός του επαγγελματία για αποκριτική σχεδίαση ιστοσελίδων

Ο επαγγελματίας

Δημιουργήστε καλύτερους ιστότοπους για οποιαδήποτε συσκευή με αυτόν τον οδηγό

Γραμμένο από Τζάστιν Άβερ , επιμελήτρια του Εβδομαδιαίου ενημερωτικού δελτίου Responsive Design, αυτόν τον οδηγό από το περιοδικό net παίρνει επαγγελματίες Ιστού μέσω των βασικών μέχρι τις πιο προηγμένες τεχνικές σχεδιασμού ιστοσελίδων που ανταποκρίνονται.

07. Πώς να σχεδιάσετε ανταποκρινόμενες και αγνωστικές φόρμες συσκευών

Αποκριτικές φόρμες προσαρμοσμένες σε διαφορετικές συσκευές

Βεβαιωθείτε ότι οι φόρμες σας λειτουργούν, ανεξάρτητα από τη συσκευή

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

08. Δημιουργήστε μια αποκριτική διάταξη με το CSS Grid

Σχεδιαστής που δημιουργεί έναν ιστότοπο CSS Grid

Δημιουργήστε έναν υπέροχο ιστότοπο χαρτοφυλακίου κατάλληλο για όλα τα σημεία προβολής

Το CSS Grid Layout αναπτύσσεται καθημερινά στην υποστήριξη του προγράμματος περιήγησης και ενώ δεν αποτελεί αντικατάσταση του Flexbox ή ακόμα και των floats, όταν χρησιμοποιείται σε συνδυασμό με αυτά, είναι ένας πολύ καλός τρόπος για να δημιουργήσετε νέες και συναρπαστικές αποκριτικές διατάξεις. Ακολουθήστε αυτόν τον αναλυτικό οδηγό στη δημιουργία ενός ιστότοπου χαρτοφυλακίου που ανταποκρίνεται χρησιμοποιώντας το Grid.

09. Ο οδηγός του web designer για το Flexbox

Στήλες Flexbox με την ένδειξη 1 2 3 4 5 με ένα βέλος που δείχνει ότι ο κύριος άξονας είναι οριζόντιος

Ξεκινήστε με το Flexbox

Έχετε ξεκινήσει να χρησιμοποιείτε το Flexbox ακόμα; Σε αυτό το σεμινάριο το Wes Bos παρέχει ένα ολοκληρωμένος οδηγός στις βασικές έννοιες που θα σας δώσουν μια σταθερή κατανόηση όλων όσων χρειάζεστε για να αντιμετωπίσετε αυτό το ισχυρό εργαλείο.

10. Αναφορά Codrops Flexbox

Το στιγμιότυπο οθόνης Codrops λέει

Ένας πλήρης οδηγός της Sara Soueidan

Αυτό πλήρης οδηγός για το Flexbox γράφτηκε από τη Sara Soueidan, μια συγγραφέα που φημίζεται για την ικανότητά της να εξηγεί έννοιες με τρόπο που είναι εύκολο να ακολουθηθεί χωρίς να χτυπήσει λεπτομερώς. Ο οδηγός Codrops ενημερώνεται τακτικά, οπότε είναι ένας εξαιρετικός πόρος για να επιστρέψετε όταν το χρειάζεστε.

11. Στοίβες: Flexbox για Sketch

Το μεσαίο στιγμιότυπο άρθρου λέει

Αποκτήστε δυνατότητες Flexbox στο Sketch

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

12. Ένα μάθημα συντριβής στο τεχνικό RWD

Ένα μάθημα συντριβής στο τεχνικό στιγμιότυπο οθόνης σχεδιασμού ιστοσελίδων

Απολαύστε τα βασικά στοιχεία του ανταποκριτικού σχεδιασμού ιστοσελίδων

Γράφοντας στο blog του Treehouse, ο Jerry Cao έχει συγκεντρώσει πολλές χρήσιμες πληροφορίες σε ένα σχετικά σύντομο και ευανάγνωστο άρθρο.

13. Δημιουργήστε ευέλικτες διατάξεις με το Susy και το Breakpoint

Οθόνες συσκευών που δείχνουν αποκριτική διάταξη ιστότοπου προσαρμοσμένη σε κάθε αναλογία

Επεκτάσεις Sass για τη φροντίδα των μαθηματικών που ανταποκρίνονται

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

14. Πώς να δημιουργήσετε αποκριτικούς οδηγούς στο Adobe XD

Οι αποκριτικοί οδηγοί γίνονται στο Adobe XD

Το Adobe Experience Design (XD) είναι ένα εργαλείο UX και πρωτοτύπων

Αν θέλετε να δοκιμάσετε Σχεδιασμός εμπειρίας Adobe (XD) , εδώ ένα καλό σεμινάριο για να ξεκινήσετε. Περιλαμβάνει μια επίδειξη βίντεο που σας οδηγεί σε κάθε κλικ της διαδικασίας.

15. CSS στο BBC Sport

Στιγμιότυπο οθόνης του ιστότοπου BBC Sport

Ελαφρύ CSS για έναν μεγάλο ιστότοπο που ανταποκρίνεται

Αυτό δεν είναι από μόνο του ένα μάθημα, αλλά εδώ υπάρχει πολλή μάθηση. Σε αυτήν την ανάρτηση , η πρώτη μιας σειράς δύο τμημάτων, ο προγραμματιστής frontend Shaun Bent μας ταξιδεύει σε μια λεπτομερή περιοδεία για το πώς γίνεται το CSS στο BBC Sport. Κατάφεραν να διατηρήσουν τα θεμέλια του CSS αυτού του τεράστιου ιστότοπου κάτω από 9kb και είναι συναρπαστικό να βλέπουμε πώς έχει γίνει.

Το στιγμιότυπο οθόνης CSS Tricks ξεκινά το άρθρο με

Οι αυτοκόλλητοι τρόποι του Chris Coyier

Κολλώδες υποσέλιδο ... αυτό πρέπει να είναι αρκετά απλό, σωστά; Δυστυχώς δεν. Μπορεί να είναι πιο δύσκολο από ό, τι θα περίμενε κανείς να πάρει αυτό το υποσέλιδο στο σωστό μέρος σε κάθε συσκευή. Ευτυχώς ο Chris Coyier ένωσε πέντε κόλπα που θα σας βοηθήσουν να το πραγματοποιήσετε χρησιμοποιώντας υπολ. () , Flexbox, αρνητικά περιθώρια και πλέγμα.

17. Προσαρμογή στην εισαγωγή

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

Βεβαιωθείτε ότι ο αποκριτικός ιστότοπός σας μπορεί να δεχτεί είσοδο από οποιοδήποτε είδος συσκευής

Ο αποκριτικός σχεδιασμός δεν αφορά μόνο τη σωστή εμφάνιση της σελίδας σας σε οποιαδήποτε συσκευή, αλλά πρέπει επίσης να την κάνει να λειτουργεί καλά - και αυτό σημαίνει ότι πρέπει να είναι καλή στην αποδοχή εισόδου σε έναν κόσμο όπου οι επιτραπέζιοι υπολογιστές έχουν οθόνες αφής και τα τηλέφωνα διαθέτουν πληκτρολόγια. αυτό το άρθρο από τον Jason Grigsby του Cloud Four έχει κάποιες καλές συμβουλές.

18. Οι βέλτιστες πρακτικές μας είναι η απώλεια της απόδοσης του ιστού για κινητά

Στιγμιότυπο οθόνης ανάγνωσης άρθρου

Τα ζητήματα απόδοσης πρέπει να λειτουργούν και για κινητά

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

19. Τρόπος δημιουργίας αποκριτικών εφαρμογών ιστού με ερωτήματα κοντέινερ

Οθόνες διαφορετικών διαστάσεων που δείχνουν κλιμάκωση κοροϊδεύω εφαρμογών ιστού

Μάθετε πώς να κάνετε την κλίμακα πολυμέσων σας, χρησιμοποιώντας ερωτήματα κοντέινερ

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

Σχετικά Άρθρα: