Ένας ανταγωνιστής φαίνεται προσεγμένος σε κάθε οθόνη. Ένας άλλος φαίνεται στριμωγμένος και ξεπερασμένος, ακόμα κι αν πουλάνε παρόμοιες υπηρεσίες. Η διαφορά βγαίνει συνήθως από τη διαδικασία σχεδιασμού και τις συνήθειες πίσω από αυτήν. Τη διαφορά την καταλαβαίνεις αμέσως, ακόμα κι αν δεν μπορείς να ονομάσεις κάθε κανόνα.
Η διαδικασία σχεδιασμού ξεκινά από την έρευνα και τους στόχους και περνά από σκίτσα και σχόλια μέχρι το τελικό γυάλισμα. Εδώ θα δεις τι σημαίνει αυτό με απλά λόγια, γιατί επηρεάζει την ιστοσελίδα και το μάρκετινγκ σου και πώς να το εφαρμόσεις χωρίς να χαθείς σε όρους. Θα δεις επίσης πώς το graphic design ταιριάζει στην ίδια εικόνα. Πάμε βήμα βήμα.
Πώς δουλεύει η διαδικασία σχεδιασμού
Η διαδικασία σχεδιασμού ξεκινά από την έρευνα και τους στόχους και περνά από σκίτσα και σχόλια μέχρι το τελικό γυάλισμα.
Τα wireframes βρίσκονται συχνά ανάμεσα στις πρώτες ιδέες και στον πλήρη οπτικό σχεδιασμό.
Μια καθαρή διαδικασία σχεδιασμού αποτρέπει ακριβές διορθώσεις αργά μέσα σε ένα έργο.
Στάδια που μπορείς να χρησιμοποιήσεις σε κάθε έργο
Γράψε στόχους, κοινό και απαραίτητες ενότητες πριν ανοίξεις εργαλείο σχεδίασης.
Πρώτα η έρευνα, μετά η πρόχειρη διάταξη, και μετά το οπτικό γυάλισμα. Αν πηδήξεις κατευθείαν στα χρώματα και τις γραμματοσειρές, συνήθως προκύπτουν διορθώσεις.
Τα wireframes και η δομή συνδέονται άμεσα με το κεφάλαιο τι είναι ένα wireframe και με καλά παραδείγματα σχεδιασμού ιστοσελίδας σε αυτή την ενότητα.
Πρακτική λίστα που μπορείς να χρησιμοποιήσεις σήμερα
Γράψε στόχους, κοινό και απαραίτητες ενότητες πριν ανοίξεις εργαλείο σχεδίασης.
Όταν ελέγχεις μια σελίδα, ρώτα τον εαυτό σου αν η διαδικασία σχεδιασμού φαίνεται στην πρώτη κύλιση στο κινητό. Αν όχι, άλλαξε τη σειρά των ενοτήτων πριν γυαλίσεις τις λεπτομέρειες.
Κράτα στιγμιότυπα οθόνης πριν και μετά τις αλλαγές, ώστε να καταλαβαίνεις τι έκανε τη διαφορά στην ιστοσελίδα σου.
Μοιράσου αυτή τη λίστα με όποιον ενημερώνει την ιστοσελίδα σου, ώστε το graphic design να μένει σταθερό και στις νέες σελίδες.
Διάλεξε έναν δείκτη για να παρακολουθείς αυτόν τον μήνα, όπως τον χρόνο στη σελίδα ή τις φόρμες που ξεκίνησαν, ώστε οι αλλαγές στον σχεδιασμό να συνδέονται με αποτελέσματα και όχι μόνο με γούστο.
Πώς συνδέεται το θέμα με τη συνολική εικόνα της επιχείρησής σου
Οι οπτικές επιλογές σπάνια ζουν σε μία μόνο σελίδα. Τα wireframes βρίσκονται συχνά ανάμεσα στις πρώτες ιδέες και στον πλήρη οπτικό σχεδιασμό.
Οι αναρτήσεις σου στα social, τα email και τα έντυπά σου πρέπει να επαναλαμβάνουν την ίδια ιεράρχηση, τα ίδια χρώματα και τους ίδιους κανόνες γραμματοσειράς με την ιστοσελίδα.
Όταν η οπτική ταυτότητα ξεφεύγει, οι πελάτες νιώθουν μια διακριτική αναντιστοιχία, ακόμα κι αν δεν μπορούν να την εξηγήσουν.
Δες το κεφάλαιο κακός σχεδιασμός ιστοσελίδας, για να συγκρίνεις σημειώσεις με ένα συναφές κεφάλαιο αυτής της ενότητας.
Μια καθαρή διαδικασία σχεδιασμού αποτρέπει ακριβές διορθώσεις αργά μέσα σε ένα έργο.
Συνήθεις ερωτήσεις που περνούν απαρατήρητες
Δευτερεύοντες όροι, όπως το graphic design και το wireframe, σε βοηθούν να ψάξεις βαθύτερα παραδείγματα και να συγκρίνεις τη δουλειά σου με τα συνηθισμένα πρότυπα.
Τα wireframes βρίσκονται συχνά ανάμεσα στις πρώτες ιδέες και στον πλήρη οπτικό σχεδιασμό.
Γράψε μία αλλαγή «πριν και μετά» που θα δοκιμάσεις σε μια ζωντανή σελίδα αυτή την εβδομάδα. Οι μικρές αλλαγές που μετριούνται κερδίζουν τα αόριστα σχέδια.
Αν η ομάδα σου μάθει κοινό λεξιλόγιο για τη διαδικασία σχεδιασμού, θα χρειάζονται λιγότεροι γύροι διορθώσεων με σχεδιαστές και εταιρείες.
Εργαλεία που κάνουν πιο εύκολες τις οπτικές αλλαγές
Δεν χρειάζεσαι δικό σου κώδικα για να διορθώσεις πολλά προβλήματα διάταξης και στυλ. Ένας οπτικός επεξεργαστής σε αφήνει να ρυθμίσεις αποστάσεις, χρώματα και γραμματοσειρές.
Με τον δημιουργό ιστοσελίδων της WEMASY φτιάχνεις τις δικές σου σελίδες στην ιστοσελίδα σου. Άνοιξε τον δημιουργό ιστοσελίδων όταν είσαι έτοιμος να εφαρμόσεις όσα έμαθες.
Όταν δημοσιεύεις αλλαγές, ξαναδές τι είναι ένα wireframe και καλά παραδείγματα σχεδιασμού ιστοσελίδας, ώστε η ενότητα να μένει συνδεδεμένη στο μυαλό σου.
Τώρα έχεις έναν πρακτικό φακό για τη διαδικασία σχεδιασμού. Χρησιμοποίησέ τον όταν ελέγχεις την ιστοσελίδα σου, εγκρίνεις υλικό μάρκετινγκ ή δίνεις οδηγίες σε σχεδιαστή. Συνέχισε με καλά παραδείγματα σχεδιασμού ιστοσελίδας και κακός σχεδιασμός ιστοσελίδας, για να κρατήσεις τη δυναμική σε αυτή την ενότητα.
Συχνές ερωτήσεις
Πόσο χρόνο παίρνει να βελτιώσεις τη διαδικασία σχεδιασμού σου;
Οι περισσότερες μικρές επιχειρήσεις βλέπουν πιο καθαρές σελίδες μέσα σε λίγες συγκεντρωμένες συνεδρίες, μόλις εφαρμόσουν τα βασικά αυτού του κεφαλαίου. Ξεκίνα από την αρχική σελίδα και μετά πέρασε τους ίδιους κανόνες στις σελίδες υπηρεσιών και επικοινωνίας.
Χρειάζεσαι σχεδιαστή για τη διαδικασία σχεδιασμού;
Ένας σχεδιαστής βοηθά σε σύνθετες αλλαγές ταυτότητας, αλλά πολλές διορθώσεις στη διαδικασία σχεδιασμού γίνονται και μόνος σου, μόλις ξέρεις τι να προσέχεις. Διάβασε μαζί με αυτό το κεφάλαιο το άρθρο: τι είναι ένα wireframe.
Μπορεί η WEMASY να σε βοηθήσει να εφαρμόσεις τη διαδικασία σχεδιασμού στην ιστοσελίδα σου;
Με τον δημιουργό ιστοσελίδων της WEMASY φτιάχνεις τις δικές σου σελίδες στην ιστοσελίδα σου. Άνοιξε τον δημιουργό ιστοσελίδων για να δεις τις δυνατότητες.
Ποιο είναι το πιο συνηθισμένο λάθος στη διαδικασία σχεδιασμού;
Οι άνθρωποι προσπαθούν να διορθώσουν τα πάντα μονομιάς, αντί για μία σελίδα τη φορά. Διάλεξε μία προτεραιότητα, όπως την αναγνωσιμότητα ή την αντίθεση, και μετά δες καλά παραδείγματα σχεδιασμού ιστοσελίδας για την επόμενη βελτίωση.
Πώς συνδέεται η διαδικασία σχεδιασμού με το SEO;
Η καθαρή οπτική ιεράρχηση και η ευανάγνωστη γραμματοσειρά κρατούν τους επισκέπτες περισσότερο στη σελίδα, κάτι που στηρίζει τα σήματα αλληλεπίδρασης που παρακολουθούν οι μηχανές αναζήτησης. Συνδύασε τις διορθώσεις σχεδιασμού με σωστή δομή περιεχομένου για τα καλύτερα αποτελέσματα.
Τι να μάθεις μετά τη διαδικασία σχεδιασμού;
Συνέχισε με τι είναι ένα wireframe και καλά παραδείγματα σχεδιασμού ιστοσελίδας σε αυτό το βιβλίο, για να χτίσεις ένα ολοκληρωμένο οπτικό σύστημα για την επιχείρησή σου στο διαδίκτυο.