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

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

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

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

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

Δεν πρόκειται για ταλέντο

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

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

Ο σχεδιασμός είναι μια δεξιότητα, και όπως κάθε άλλη δεξιότητα, μπορεί να μάθει.

Διαλέγοντας το σωστό εργαλείο για την εργασία

Στον προγραμματισμό, μπορείτε να χρησιμοποιήσετε το Σημειωματάριο (Notepad) και να γράψετε μια εφαρμογή που είναι τόσο καλή όσο γράφτηκε σε ένα πλήρες IDE… αν και η ζωή σας μπορεί να είναι πολύ άθλια κάνοντας το και πιθανότατα θα διαρκέσει αισθητά περισσότερο. Στον κόσμο του σχεδιασμού ιστοσελίδων, το MS Paint θα αναλάβει το ρόλο του Notepad, και όπως το Notepad, λίγοι άνθρωποι επιλέγουν πραγματικά να σχεδιάσουν μαζί του… ελπίζω

Τα πιο δημοφιλή εργαλεία σχεδίασης για τον Ιστό είναι:

  • Το Sketch, ένα εργαλείο μόνο για MacOS που, παρόμοιο με το React, φαίνεται να είναι κωδικοποιημένο σε κάθε λίστα εργασιών. 99 $ / έτος.
  • Adobe XD, ένα δωρεάν εργαλείο πολλαπλής πλατφόρμας που αναλαμβάνει το ρόλο της Vue. Έχει μια μικρότερη κοινότητα, αλλά είναι πολύ εύκολο να ξεκινήσετε.
  • Adobe Photoshop, το ελβετικό μαχαίρι για οποιαδήποτε εργασία σχεδιασμού γνωστή από όλους. Έχει πάρει το σημείο… το μαντέψατε, jQuery. 9,99 $ / μήνα.

Δεν υπάρχει σχεδόν καμία διαφορά αν χρησιμοποιείτε κώδικα Sublime ή VS για τη σύνταξη εφαρμογών. Ή αν χρησιμοποιείτε το React ή το Vue για το frontend. Είναι απλώς θέμα προτίμησης. Το ίδιο ισχύει και για τα εργαλεία σχεδίασης, καθώς το καθένα έχει τα πλεονεκτήματα και τα μειονεκτήματά του.

Χρησιμοποιώ το Adobe XD. Ο κύριος λόγος για μένα είναι ότι είναι cross-platform, οπότε δεν είμαι όμηρος από το οικοσύστημα της Apple. Υποστηρίζεται επίσης από την Adobe, οπότε θα είναι εδώ για λίγο. Το καλύτερο πράγμα για τους νεοεισερχόμενους είναι ότι, από τον Μάιο του 2018, το Adobe XD είναι ελεύθερο να χρησιμοποιήσει με λίγους περιορισμούς (που είναι απίθανο να σκοντάψετε ούτως ή άλλως).

Προσαρμογή της νοοτροπίας σας

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

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

Μαθαίνοντας τα εργαλεία

Κατά την κωδικοποίηση, χρησιμοποιείτε στοιχεία HTML όπως div, span και εισόδους και αφήνετε το πρόγραμμα περιήγησης να τα μετατρέψει σε κάτι οπτικό. Με εργαλεία σχεδίασης, έχετε τη δυνατότητα να παραλείψετε τον μεσάζοντα και να χρησιμοποιήσετε άμεσα οπτικά στοιχεία όπως σχήματα και κείμενο.

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

Εργαλείο ορθογωνίου

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

Εργαλείο κειμένου (ετικέτα)

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

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

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

Εργαλείο κειμένου (παράγραφος)

Η δεύτερη κατάσταση είναι ένα κοντέινερ κειμένου με συγκεκριμένο μέγεθος που συμπεριφέρεται σαν

με συγκεκριμένο πλάτος ή

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

Επιλέξτε εργαλείο

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

Εργαλείο γραμμής

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

Συμβουλές και τεχνικές σχεδιασμού

Διάταξη

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

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

Χρωματιστά

Για να σας βοηθήσουμε να βρείτε το τέλειο χρώμα για το επόμενο έργο σας, σκεφτείτε να έχετε κατά νου την ψυχολογία των χρωμάτων (colorpsychology.org). Ένα χρήσιμο εργαλείο για να βρείτε τον τέλειο συνδυασμό χρωμάτων με βάση το κύριο χρώμα σας είναι το Paletton.

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

Τυπογραφία

Το Typeface επηρεάζει σε μεγάλο βαθμό την επωνυμία του έργου σας, οπότε επιλέξτε με σύνεση. Οι premium γραμματοσειρές τείνουν να φαίνονται καλύτερα από αυτές των γραμματοσειρών Google, αλλά όταν ξεκινάτε, μην αγοράζετε καμία. Ακόμα και στις γραμματοσειρές Google, υπάρχουν μερικοί κρυμμένοι πολύτιμοι λίθοι.

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

Σχεδιασμός αρχικής σελίδας (ή σελίδας προορισμού)

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

Αφού καθορίσω αυτό που θέλω να πω, συνήθως αναζητώ κάποια έμπνευση. Ένας εξαιρετικός πόρος για αυτό είναι το land-book.com, ένας τεράστιος κατάλογος με υπέροχες σελίδες προορισμού που μπορούν να ψηφίσουν οι χρήστες. Μια άλλη εξαιρετική σελίδα με έμπνευση σχεδιασμού είναι το interfaces.pro όπου μπορείτε να φιλτράρετε κατά κατηγορίες όπως η τιμολόγηση, το 404 ή για εμάς. Απλώς περιηγηθώ μέχρι να βρω αρκετούς ιστότοπους που μου αρέσουν και να ταιριάξουν με το στυλ που επιθυμώ.

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

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

Διακοπές:

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

Σχεδιασμός μιας εφαρμογής ιστού (ή ενός ταμπλό)

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

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

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

Διορθώθηκε το δοχείο

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

Παραδείγματα: Twitter, Buffer, DigitalOcean, Netlify, GitHub

Δοχείο υγρού

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

Παραδείγματα: Slack, Intercom, Hotjar, Google Sheets, Trello, Spotify

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

Διακοπές:

  • Κρατήστε το απλό
  • Χρησιμοποιήστε αναγνώσιμη γραμματοσειρά
  • Χρησιμοποιήστε οπτική ιεραρχία κατά την προβολή πολλών δεδομένων
  • Επωφεληθείτε από τις κακές επιλογές σχεδιασμού του ανταγωνιστή

Τυλίγοντας

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

Ξεκινήστε το σχεδιασμό του ταξιδιού σας παίρνοντας ένα πρότυπο Adobe XD που έφτιαξα για τη σελίδα προορισμού του νεότερου έργου μου. Απλώς εγγραφείτε στην ολοκαίνουργια λίστα email μου και θα μεταφερθεί στο γραμματοκιβώτιό σας.

Επίσης, θα είστε οι πρώτοι που θα ενημερωθείτε για την επόμενη ανάρτησή μου, όπου θα μοιραστώ 69 ημέρες προόδου που έκανα στο Sidemail - ένα έργο SaaS στο οποίο εργάζομαι. Θα περιλαμβάνει πράγματα όπως ο αριθμός των συνδρομητών, οι επισκέψεις σε ιστότοπους, οι δαπάνες και τα σχέδια σχεδίασης. Θα πρέπει να είναι αυτονόητο, αλλά εγγυώμαι απολύτως κανένα spam Δεν έχω καν χρόνο για αυτό το χάλια.

Τα DM μου στο Twitter είναι ανοιχτά, οπότε αν κολλήσετε κάνοντας τα σχέδιά σας ή έχετε κάποιες περαιτέρω ερωτήσεις, μη διστάσετε να με χτυπήσετε.