Read this service in English

Σχεδιασμός και κατασκευή ιστοσελίδων

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

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

Κατασκευή ιστοσελίδων με WordPress ή custom ανάπτυξη;

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

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

Δείτε τον οδηγό επιλογής WordPress ή custom ιστοσελίδας, με παραδείγματα έργων και κριτήρια για τη διαχείριση, τις λειτουργίες και την παράδοση.

Τι περιλαμβάνει ο σχεδιασμός της ιστοσελίδας σας

Εταιρική ιστοσελίδα ή landing page
Οργανώνουμε τις υπηρεσίες, τα έργα και τα στοιχεία που χρειάζεται ο πελάτης πριν επικοινωνήσει. Μια συγκεκριμένη προσφορά μπορεί να παρουσιαστεί σε μία ολοκληρωμένη σελίδα. Όταν υπάρχουν διαφορετικές υπηρεσίες ή κοινά, εξετάζουμε ποιες χρειάζονται δική τους σελίδα και τι πρέπει να εξηγεί καθεμία.
Portfolio ή ηλεκτρονικό κατάστημα
Στο portfolio, ο επισκέπτης χρειάζεται να δει τα έργα και να καταλάβει το αντικείμενό σας. Στο eshop, χρειάζεται να βρει το προϊόν, τις πληροφορίες του και τη διαδρομή αγοράς. Κατηγορίες, καταχωρίσεις προϊόντων, πληρωμές και συνδέσεις με άλλα συστήματα καθορίζονται στην προσφορά, μαζί με το ποιος ετοιμάζει το υλικό.
Δίγλωσση ιστοσελίδα στα ελληνικά και στα αγγλικά
Ορίζουμε ξεχωριστές διευθύνσεις και αντίστοιχες σελίδες ανά γλώσσα. Ελέγχουμε πού οδηγούν το μενού, η αλλαγή γλώσσας και τα κουμπιά επικοινωνίας. Συμφωνούμε επίσης ποιος αναλαμβάνει τα κείμενα και τη μετάφραση, ώστε να μη μένουν βασικές πληροφορίες διαθέσιμες μόνο στη μία γλώσσα.
Χρήση από κινητό και τεχνική βάση για SEO

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

Παραδείγματα από τα έργα μου

CB Automobile — στιγμιότυπο της ιστοσελίδας ή εφαρμογής

CB Automobile: από την πρώτη εικόνα στα στοιχεία του οχήματος

Για την CB Automobile σχεδίασα μια πρώτη οθόνη με το όχημα στο επίκεντρο και την επιλογή «View Collection». Η παρουσίαση συνεχίζεται στη συλλογή, όπου οι φωτογραφίες συνοδεύονται από στοιχεία όπως μοντέλο, έτος, χιλιόμετρα, καύσιμο και κιβώτιο, μαζί με σύνδεσμο προς την αντίστοιχη αγγελία.

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

CB AutoTech — στιγμιότυπο της ιστοσελίδας ή εφαρμογής

CB AutoTech: διαφορετικοί τρόποι εύρεσης προϊόντων

Στο e-shop του CB AutoTech, ο επισκέπτης μπορεί να ξεκινήσει από μια κατηγορία προϊόντων ή από τη μάρκα και το μοντέλο του οχήματος. Το πεδίο αναζήτησης δίνει καθοδήγηση για μάρκα, μοντέλο ή κωδικό OEM.

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

Για το δικό σας κατάστημα, δείτε πώς οργανώνεται η κατασκευή e-shop, από τον κατάλογο μέχρι τις συμφωνημένες λειτουργίες και την παράδοση.

Δείτε την αναλυτική παρουσίαση του CB AutoTech
Lara Melachrinou — στιγμιότυπο της ιστοσελίδας ή εφαρμογής

Lara Melachrinou: από το έργο στη συλλογή

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

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

The Purple Owl — στιγμιότυπο της ιστοσελίδας ή εφαρμογής

The Purple Owl: ξεχωριστές διαδρομές για δραστηριότητες και τραπέζια

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

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

Δείτε την αναλυτική παρουσίαση του έργου — στα αγγλικά

Από το brief μέχρι τη δημοσίευση

1. Συμφωνούμε τι θα παραδοθεί
Καταγράφουμε σελίδες, γλώσσες, λειτουργίες και διαθέσιμο υλικό. Ξεχωρίζουμε τι αναλαμβάνω εγώ και τι χρειάζεται από εσάς: κείμενα, φωτογραφίες, στοιχεία προϊόντων ή πρόσβαση σε υπάρχοντα συστήματα. Η προσφορά ορίζει τα παραδοτέα και το χρονοδιάγραμμα με βάση αυτές τις ανάγκες.
2. Σχεδιάζουμε τη διαδρομή του επισκέπτη
Πριν προχωρήσει η κατασκευή, οργανώνουμε το περιεχόμενο και τα βασικά βήματα: από ποια σελίδα θα ξεκινήσει ο επισκέπτης, τι χρειάζεται να καταλάβει και πού θα τον οδηγήσει το επόμενο κουμπί. Καθορίζουμε τα σημεία ελέγχου και διορθώσεων, καθώς και τον τρόπο ενημέρωσης του site μετά την παράδοση.
3. Ελέγχουμε τη μετάβαση και τη λειτουργία

Πριν από τη δημοσίευση, ελέγχουμε τις συμφωνημένες σελίδες, τα μενού, τις εικόνες και τις διαδρομές επικοινωνίας σε κινητό και υπολογιστή. Σε ανασχεδιασμό, καταγράφουμε ποιο χρήσιμο περιεχόμενο και ποια URL διατηρούνται, αντιστοιχίζουμε όσα αλλάζουν και ελέγχουμε τις ανακατευθύνσεις, τις κύριες διευθύνσεις των σελίδων (canonical) και τον χάρτη ιστοτόπου (sitemap). Στο ronny.design, για παράδειγμα, το παλιό /custom-software/ οδηγεί στη σχετική υπηρεσία /app-development/.

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

Συχνές ερωτήσεις

Πόσο κοστίζει η κατασκευή ιστοσελίδας;

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

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

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

Πόσο χρόνο χρειάζεται και τι πρέπει να ετοιμάσω;

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

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

Χρειάζομαι πλήρη ανασχεδιασμό;

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

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

Διαβάστε τον οδηγό για ανανέωση ή πλήρη ανασχεδιασμό

Θα μπορώ να αλλάζω μόνος μου το περιεχόμενο;

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

Η παρουσίαση έργων της Lara Melachrinou και οι διαφορετικές ενότητες του Purple Owl δείχνουν πόσο διαφορετικές μπορεί να είναι οι ανάγκες περιεχομένου. Η δυνατότητα επεξεργασίας στο δικό σας site πρέπει να περιγράφεται στην προσφορά· δεν προκύπτει αυτόματα από την επιλογή WordPress ή custom ανάπτυξης.

Τι παραλαμβάνω και ποιος αναλαμβάνει τη συντήρηση;

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

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

Ας ξεκινήσουμε από την ιστοσελίδα που χρειάζεστε

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

Συζητήστε την ιστοσελίδα σας