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

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


Συμβουλές σχεδιασμού ιστοσελίδων για αρχάριους

Αυτές τις μέρες είναι δυνατόν για όλους να είναι σχεδιαστής ιστοσελίδων. Ναι, είναι μια τολμηρή δήλωση – αλλά με αυξημένη προσβασιμότητα σε λογισμικό σχεδιασμού ανοιχτού κώδικα όπως Σειρήτι, και με πλατφόρμες δημιουργίας ιστότοπων DIY, όπως το Wix και το Weebly που πλημμυρίζουν την αγορά, η γραμμή μεταξύ ερασιτέχνης και καλόπιστα Σχεδιαστής ιστοσελίδων έχει γίνει πολύ πιο λεπτό και πιο αχνό από τα τέλη. Το ενδιαφέρον για τη δημιουργικότητα είναι ότι κανείς δεν μπορεί να αποφασίσει για εσάς όταν είστε «έτοιμοι» να ολοκληρώσετε έναν συγκεκριμένο ρόλο. Πολλά ροκ σταρ δεν πήραν ποτέ μαθήματα μουσικής. Πολλοί επιτυχημένοι καλλιτέχνες δεν μελέτησαν ποτέ ανθρώπινη ανατομία. και η πλειονότητα των σχεδιαστών ιστοσελίδων εκεί έξω δεν έχουν επίσημο πτυχίο. Έτσι, εάν δημιουργήσατε τον ιστότοπο της επιχείρησής σας, μπορείτε τότε να πείτε με αυτοπεποίθηση ότι είστε “σχεδιαστής ιστοσελίδων”; Αυτό πρέπει να καθορίσετε.

Είναι πιθανό ο καθένας να είναι σχεδιαστής ιστοσελίδων με πλατφόρμες κατασκευής ιστοσελίδων DIY.

Κάντε κλικ στο Tweet

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

Τι είναι αυτός ο οδηγός (και τι δεν είναι)

Για να είμαστε σαφείς, μιλάμε για τα βασικά στοιχεία του σχεδιασμού ιστού εδώ – και δεν θα ασχοληθούμε με πιο προηγμένα θέματα, όπως συστήματα πλέγματος, JavaScript ή πλαίσια CSS. Αυτός ο οδηγός υποθέτει επίσης ότι χρησιμοποιείτε κάποιο είδος δημιουργίας ιστότοπων μεταφοράς και απόθεσης, ώστε να μπορείτε να σχεδιάσετε έναν ιστότοπο χωρίς κωδικοποίηση. Είτε χρησιμοποιείτε ένα υπάρχον πρότυπο από τον δημιουργό του ιστότοπού σας είτε ξεκινάτε από το μηδέν (μια πιο φιλόδοξη επιλογή για αρχάριους), αυτός ο οδηγός θα σας βοηθήσει με τις βασικές αρχές και πρακτικές σχεδιασμού ιστοσελίδων που πρέπει να εφαρμόσετε στον ιστότοπό σας. Ένα μεμονωμένο άρθρο για το σχεδιασμό ιστοσελίδων δεν θα σας μετατρέψει αμέσως σε ειδικό, γι ‘αυτό θεωρήστε το πρώτο σας βήμα σε έναν μεγαλύτερο κόσμο.

ΓΡΗΓΟΡΗ ΣΥΜΒΟΥΛΗ: Μια βασική γνώση HTML και CSS θα είναι τεράστια οφέλη για κάθε αρχάριο web designer. Εάν θέλετε πραγματικά να κάνετε τα χέρια σας στην κωδικοποίηση, προτείνω να κάνετε check out W3Schools για να μάθετε περισσότερα για το ίδρυμα.

Τα βασικά του Web Design για αρχάριους

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

1. Βάλτε μακριά το ποντίκι, σηκώστε ένα μολύβι

Ο ιστότοπός σας μπορεί να υπάρχει ήδη ως μια όμορφη, ολοκληρωμένη οντότητα στο μυαλό σας – γι ‘αυτό μεταβείτε αμέσως στο Photoshop (ή χειρότερα, ένα πρόγραμμα περιήγησης και HTML) για να το σχεδιάσετε. Ουάου, ω, κρυώστε τα αεροπλάνα σας για ένα δευτερόλεπτο! Μην βάζετε το καροτσάκι πριν από το άλογο. Πρώτα, βγάλτε ένα μολύβι και ένα χαρτόνι και ξεκινήστε να βάζετε τις ιδέες σας σε κάτι εύκολα απτό. Αυτή είναι μια σημαντική φάση για να χαρτογραφήσετε τη δομή του ιστότοπού σας χρησιμοποιώντας τίποτα περισσότερο από ορθογώνια, σκίτσα και εμπνευσμένες ιδέες (συχνά αποκαλούνται καλωδίωση). Τα πράγματα μπορεί να είναι εξαιρετικά δύσκολα σε αυτό το σημείο. κανείς δεν θα το δει, αλλά εσείς.

Παράδειγμα wireframe ιστότοπουΈνα wireframe ιστότοπου σάς βοηθά να αναπτύξετε μια διάταξη και δομή για τον ιστότοπό σας, βελτιώνοντας παράλληλα την εμπειρία χρήστη (UX) και εξοικονομώντας χρόνο.

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

2. Ακολουθήστε μια Ιεραρχία

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

Διατηρήστε το περιεχόμενο “Πάνω από το Fold”

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

Χρησιμοποιώντας μια εικόνα «Ήρωας»

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

Παράδειγμα εικόνας ή banner ήρωας

Το “Fold” μπορεί να αλλάξει ανάλογα με τη συσκευή

Εδώ είναι που τα πράγματα γίνονται περίπλοκα – και γιατί δεν πρέπει να επιβαρύνετε τον εαυτό σας προσπαθώντας να ταιριάξετε τα πάντα πάνω από αυτήν τη μαγική γραμμή. Ανάλογα με τη συσκευή του χρήστη, οι διαστάσεις της οθόνης θα μπορούσαν να διαφέρουν πολύ. Μια εντυπωσιακή οθόνη 5K έχει κατακόρυφη ανάλυση 2880 pixel, ενώ ένα iPhone 5 έχει λιγότερο από το ήμισυ αυτού. Αυτό σημαίνει ότι οι χρήστες κινητών συσκευών δεν θα μπορούν να ενσωματώσουν όσο το δυνατόν περισσότερο περιεχόμενο στην οθόνη τους. (Περισσότερα για αυτό αργότερα.)

ΓΡΗΓΟΡΗ ΣΥΜΒΟΥΛΗ: Ο γενικός κανόνας είναι να διασφαλιστεί ότι το περιεχόμενο “στο επάνω μέρος” ταιριάζει στον χαμηλότερο κοινό παρονομαστή των διαστάσεων της οθόνης. Αυτό είναι συνήθως αποδεκτό ως 768 εικονοστοιχεία κάθετης ανάλυσης.

3. Η τυπογραφία είναι το σχέδιό σας

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

  • Βεβαιωθείτε ότι το κείμενο είναι ευανάγνωστος (αποφύγετε τις περίεργες γραμματοσειρές!) και αρκετά μεγάλο (συνήθως περίπου 16 εικονοστοιχεία για το σώμα).
  • Κολλήστε σε όχι περισσότερο από δύο γραμματοσειρές—Και βεβαιωθείτε ότι συνδυάζονται καλά!
  • Δώστε στις παραγράφους σας χώρο για να αναπνέετε μεταξύ τους και ρυθμίστε αρκετά επάνω επένδυση ή περιθώριο στις επικεφαλίδες σας για να δηλώσετε σαφή διαλείμματα στο περιεχόμενο.
  • Αποφύγετε τις μεγάλες γραμμές κειμένου. Είναι ευκολότερο στα μάτια οι γραμμές παραγράφων να είναι περίπου 15 λέξεις—Και λίγο λιγότερο από αυτό για οθόνες κινητών.
  • Ελαφρή γραμμή Οι γραμματοσειρές είναι συνήθως καλύτερες μόνο σε έντυπη μορφή – εκτός αν χρησιμοποιούνται σε μεγάλους τίτλους στον Ιστό.

4. Χρώματα & Η αντίθεση είναι κρίσιμη

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

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

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

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

ΓΡΗΓΟΡΗ ΣΥΜΒΟΥΛΗ: Είναι καλύτερο να αποφύγετε πλήρης κορεσμός με χρώματα στον ιστό. Το Pure Red (δεκαεξαδική τιμή # ff0000) είναι λίγο υπερβολικό στα μάτια. Ομοίως, το καθαρό μαύρο (# 000000) για γραμματοσειρές τείνει να δονείται πολύ έντονα για τα μάτια, ενώ ένα ελαφρώς μικρότερο μαύρο (# 333333) διευκολύνει την ανάγνωση.

Θέλετε επίσης να εμφανίζεται το κείμενό σας σε εικόνες φόντου. Η χρήση πολύ απασχολημένων φωτογραφιών μπορεί να αποσπάσει την προσοχή από το κείμενο, οπότε για να αποφευχθεί αυτό το πρόβλημα, είτε χρησιμοποιήστε φωτογραφίες που είναι λιγότερο λεπτομερείς, είτε χρησιμοποιήστε μια επικάλυψη, ας πούμε, rgba (51,51,51,0,5) για να μαλακώσετε την εικόνα κάτω από το κείμενο.

παράδειγμα επικάλυψης εικόναςΧρησιμοποιήστε μια επικάλυψη πίσω από το κείμενο για να το βοηθήσετε να αναδυθεί από το φόντο.

Η αντίθεση παίζει επίσης ρόλο στον τρόπο με τον οποίο οι χρήστες προσελκύονται σε ορισμένα βασικά στοιχεία του ιστότοπού σας. Τα πιο σημαντικά κουμπιά παρότρυνσης για δράση πρέπει να τραβήξουν το βλέμμα μέσω της χρήσης χρωμάτων σε αντίθεση. Ένα μπλε “Αγορά τώρα!” Το κουμπί χάνει τον επείγοντα χαρακτήρα του και αξίζει όταν καταπιεί από έναν ιστότοπο που χρησιμοποιεί μπλε παντού — αλλά ένα κόκκινο κουμπί στην ίδια σελίδα τραβά την προσοχή ενός χρήστη φωνάζοντας «Γεια! Κάντε κλικ με! “

6. Χρήση εικόνων

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

Κατανόηση των τύπων αρχείων & Συμπίεση

Υπάρχει ένα επιπλέον βήμα που πρέπει να ληφθεί για τη χρήση εικόνων στον Ιστό. Αυτές οι φανταχτερές φωτογραφίες που λαμβάνετε από ιστότοπους όπως Σάττερκοκ και iStock μπορεί να είναι αρκετά ογκώδες (5.000+ οριζόντια εικονοστοιχεία και 10+ megabyte σε μέγεθος) που είναι καλό για εκτύπωση, αλλά είναι ακατάλληλα για ιστότοπους. Δεν έχουν όλοι γρήγορο Fiber Internet, οπότε πρέπει να μειώσετε το μέγεθος των εικόνων σας για να ταιριάζει σε χρόνους φόρτωσης (για να μην αναφέρουμε ότι το 40% των επισκεπτών θα φύγει εάν ο ιστότοπος διαρκεί περισσότερο από 3 δευτερόλεπτα για φόρτωση!). Συνήθως, θέλετε να διατηρήσετε καθεμία από τις εικόνες σας στο το πολύ 500 kilobytes σε μέγεθος, αν και το μέσο μέγεθος του αρχείου σας θα πρέπει πιθανώς να είναι περίπου 100 kilobytes.

  • JPEG είναι η τυπική μορφή για φωτογραφίες. Είναι μια απώλεια μορφής, που σημαίνει ότι η ποιότητα της εικόνας του μειώνεται όταν συμπιέζεται. Εάν χρησιμοποιείτε ένα JPEG για μια εικόνα φόντου πλήρους πλάτους, προτείνω να διατηρήσετε την οριζόντια ανάλυσή του σε τουλάχιστον 1200 εικονοστοιχεία. Για γενικούς σκοπούς, αποφύγετε τη χρήση οποιασδήποτε εικόνας με λιγότερα από 600 εικονοστοιχεία οριζόντια ανάλυση, καθώς πιθανότατα θα εμφανίζεται θολό στις σύγχρονες οθόνες.
  • PNG είναι η προτιμώμενη επιλογή για γραφικά ή για εικόνες που απαιτούν διαφάνεια. Είναι μια μορφή χωρίς απώλειες, η οποία είναι ιδανική για τη διατήρηση της ποιότητας της εικόνας, αλλά μπορεί επίσης να αυξήσει τα μεγέθη των αρχείων. Γενικά, θα χρησιμοποιείτε γραφικά PNG για εικόνες, εικονίδια ή μικρότερες εικόνες που μπορούν να στοιβάζονται πάνω από άλλα στοιχεία λόγω της διαφάνειας τους. Σπάνια θα χρειαστείτε ένα PNG μεγαλύτερο από 1000 εικονοστοιχεία.
  • SVG (Επεκτάσιμο διανυσματικό γραφικό) είναι μια νεότερη μορφή που αντικαθιστά GIF και ακόμη και PNG σε ορισμένες περιπτώσεις. Η ομορφιά του SVG είναι ότι μπορεί να είναι τόσο μεγάλη ή τόσο μικρή στην οθόνη όσο χρειάζεστε, διατηρώντας παράλληλα την τέλεια σαφήνεια και ευκρίνεια (και εξακολουθεί να είναι μικρό μέγεθος αρχείου). Θα πρέπει να εξετάσετε το ενδεχόμενο χρήσης SVG για οποιοδήποτε λογότυπο, εικονίδιο ή διανυσματικό γραφικό στον ιστότοπό σας Καθώς οι υψηλές οθόνες DPI γίνονται πλέον συνηθισμένες, η ευκρίνεια του SVG θα παρέχει τη μεγαλύτερη ποιότητα εικόνας.

Παραδείγματα τύπων αρχείων εικόνας

6. Σχεδίαση για φορητές συσκευές

Έχουμε φτάσει τώρα σε μια εποχή όπου τα περισσότερα άτομα καταναλώνουν διαδικτυακό περιεχόμενο με τα τηλέφωνά τους και όχι σε επιτραπέζιο υπολογιστή. Ως αποτέλεσμα, υπάρχει πολύ μεγαλύτερη προτεραιότητα στο σχεδιασμό ιστοσελίδων για την προσαρμογή ειδικά στην εμπειρία κινητής τηλεφωνίας, η οποία οδήγησε στη φιλοσοφία σχεδιασμού “mobile-first”.

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

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

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

ΓΡΗΓΟΡΗ ΣΥΜΒΟΥΛΗ: Βεβαιωθείτε ότι κανένα στοιχείο στον ιστότοπό σας, ειδικά εάν είναι διαδραστικό, δεν είναι μικρότερο από 44 εικονοστοιχεία επί 44 εικονοστοιχεία στο μέγεθος. Γιατί; Αυτό είναι το μικρότερο που μπορεί να είναι ένας στόχος όπου το δάχτυλο μπορεί να τον αγγίξει με ακρίβεια.

7. Κρατήστε τα πράγματα ευθυγραμμισμένα

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

8. Κρατήστε το απλό

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

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

9. Μεγάλοι ανοιχτοί χώροι

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

συμπέρασμα

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

Ένας σχεδιαστής γεννιέται!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me