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

Alexandros K. Nasiopoulos

• 05-08-2019
• 2133 Unique Views

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

Ότι και να ισχύει από τα παραπάνω, είναι σίγουρο ότι αναζητάτε συχνά τις λέξεις - κλειδιά "σχεδιασμός ιστοσελίδων" στο Google. Σίγουρο επίσης είναι ότι, ο σχεδιασμός ιστοσελίδων δεν είναι το ίδιο με την κατασκευή ιστοσελίδων.

Θέλεις να μία Ιστοσελίδα με μοναδικό σχεδιασμό για την επιχείρηση σου; Δες τις προσφορές της Cloud O.E. για κατασκευή ιστοσελίδων!

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

Ο σχεδιασμός ιστοσελίδων αναφέρεται στην εμφάνιση και την αισθητική μίας ιστοσελίδας καθώς και στην ευχρηστία της. Οι σχεδιαστές ιστοσελίδων - web designers χρησιμοποιούν προγράμματα όπως το CorelDraw ή το Adobe Photoshop για τη δημιουργία διαφόρων οπτικών στοιχείων ή σχεδίων της ιστοσελίδας.

Η κατασκευή ιστοσελίδων περιλαμβάνει το front-end development (client-side) και το back-end development (server-side) και αφορά αποκλειστικά τον κώδικα της ιστοσελίδας. Όταν λέμε κώδικα ιστοσελίδας αναφερόμαστε τόσο στην αισθητική της ιστοσελίδας (html, css, javascript, jquery, bootstrap) όσο και στις λειτουργίες της ιστοσελίδας (php, sql, javascript, jquery, ajax)

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

Η δεύτερη εικόνα που βλέπετε, απεικονίζει τμήμα της αρχικής μας ιστοσελίδας. Τα σχέδια που υπάρχουν στην εικόνα, είναι σχέδια γραφικών που έχουν δημιουργηθεί με το CorelDraw από έναν web designer. Στο σημείο αυτό βέβαια, μπορεί να αναρωτιέστε τι διαφορά έχει ο web designer με τον graphic designer (γραφίστας ή σχεδιαστής γραφικών). 

Ο web designer έχει γνώση των κανόνων αισθητικής που πρέπει να έχει μία ιστοσελίδα, ώστε να τραβάει την προσοχή του επισκέπτη αλλά παράλληλα να είναι και ξεκούραστη. Κατασκευάζει επίσης το σχέδιο ώστε να φαίνεται σωστά σε όλες τις συσκευές υπολογιστές, tablet και κινητά, που μπορεί να εμφανίζεται μία ιστοσελίδα. Γνωρίζει επίσης και λαμβάνει υπόψη του κανόνες search engine optimization και δημιουργεί 'μικρά' (λίγα kb) σχέδια, για τη βέλτιστη ταχύτητα της ιστοσελίδας. Ένας web designer χρησιμοποιεί χρωματική παλέτα RGB και μπορεί επίσης να έχει γνώσεις html, css και javascript και να φροντίσει για τη συνολική εμφάνιση της ιστοσελίδας.

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

Ο σχεδιασμός ιστοσελίδων όμως, δε σταματάει εδώ. Στο σχεδιασμό ιστοσελίδων μπορεί να πάρει μέρος ένας UX designer και ένας UI designer, οι οποίοι δεν γνωρίζουν απαραίτητα κάποια γλώσσα κώδικα.

UX designer - User Experience designer: Ένας UX designer είναι υπεύθυνος για την εμπειρία του χρήστη με μία ιστοσελίδα, ένα προϊόν ή μία εφαρμογή. Η εμπειρία του χρήστη μπορεί να αναλυθεί από συνεντεύξεις χρηστών, χαρακτηριστικά χρηστών, από το Google Analytics και την αρχιτεκτονική της πληροφορίας, από επιστημονικές έρευνες στο σχεδιασμό ιστοσελίδων καθώς και μέσα από δοκιμές.

UI designer - User Interface designer:  Ένας UI designer παίρνει τα ευρήματα του UX designer και τα εφαρμόζει στην πράξη. Είναι υπεύθυνος για το πως θα είναι τακτοποιημένα τα στοιχεία μέσα στη σελίδα, σε όλες τις συσκευές. Καθορίζει τις αποστάσεις που θα έχουν, το χρώμα, το μέγεθος και το στυλ των γραμμάτων και των κουμπιών και γενικά όλων των στοιχείων που υπάρχουν σε μία ιστοσελίδα.

Η κατασκευή ιστοσελίδων αναλυτικά

Η κατασκευή ιστοσελίδων γίνεται από τους front-end developers και τους back-end developers. Ένας full-stack developer μπορεί όμως να αναλάβει ολόκληρη την κατασκευή της ιστοσελίδας, να είναι δηλαδή και front-end και back-end developer.

Ο front-end developer (client-side developer) παίρνει τα χαρακτηριστικά που πρέπει να έχει η ιστοσελίδα από τον UI designer και δημιουργεί με κώδικα αυτό που βλέπετε σε μία ιστοσελίδα: την εμφάνισή της, τον τρόπο που κινούνται τα slider, την αλλαγή χρώματος στα κουμπιά, τα icons που θα έχει κλπ. Είναι επίσης υπεύθυνος για τη σωστή εμφάνιση της ιστοσελίδας, σε όλες τις συσκευές. Έχει άριστες γνώσεις html, css και javascript. Front-end developer μπορεί να είναι και ένας web designer.

Μέχρι το σημείο αυτό, δηλαδή του σχεδιασμού από τους web designer, UX designer και UI designer και της κατασκευής από τον front-end developer, έχει δημιουργηθεί το template της ιστοσελίδας, χωρίς να διαθέτει κάποιες λειτουργίες. To template αυτό μπορεί να χρησιμοποιηθεί όπως είναι, για τη δημιουργία στατικών ιστοσελίδων.

Αυτός που θα δώσει 'ζωή' στην ιστοσελίδα, θα κατασκευάσει δηλαδή τις λειτουργίες της, είναι ο back-end developer. Ο back-end developer (server-side developer) κατασκευάζει με κώδικα ή αλλιώς προγραμματίζει, όσα δεν βλέπετε σε μία ιστοσελίδα. Έχει άριστες γνώσεις τουλάχιστον μίας γλώσσας προγραμματισμού, συνήθως PHP. Έχει επίσης άριστες γνώσεις SQL και τουλάχιστον ενός συστήματος βάσεων δεδομένων, συνήθως MySQL. Για τη βέλτιστη εμπειρία των χρηστών, θα πρέπει επίσης να έχει πολύ καλές γνώσεις στη γλώσσα προγραμματισμού javascript και στη βιβλιοθήκη jquery καθώς και σε τεχνικές προγραμματισμού ajax.

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

Ο SEO Specialist, είναι υπεύθυνος για την τοποθέτηση των structured data, για να μετατρέψει σε minify όλα τα αρχεία css και js και γενικά για να εφαρμόσει όλες εκείνες τις on-page τεχνικές SEO - Search Engine Optimization για μία αποτελεσματική προώθηση ιστοσελίδων.

Η δημιουργία ιστοσελίδων στην πράξη

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

Υπάρχουν άπειρα έτοιμα template και δημιουργούνται συνεχώς νέα, για όλων των ειδών τις ιστοσελίδες τα οποία είναι και responsive αλλά και πανέμορφα. Με 50 - 60€ μπορεί κάποιος να διαλέξει από μία πληθώρα έτοιμων template, για ένα site wordpress ή joomla. Τα html template κοστίζουν ακόμα φθηνότερα και πωλούνται σε ένα εύρος τιμών από 15€ έως 25€, ως επί το πλείστον.

Αν αναλογιστεί κανείς τις γνώσεις css και javascript που απαιτούνται για τη δημιουργία ενός template, καθώς και τη χρονική διάρκεια δημιουργίας του, σίγουρα η αγορά του αποτελεί μία εξαιρετικά συμφέρουσα επιλογή και στις περισσότερες περιπτώσεις, μονόδρομο. Φυσικά, ένας web designer ή ένας front-end developer ή ένας full-stack developer μπορεί να επέμβει στο css ή τη javascript του template και να τροποποιήσει κάποιο/κάποια στοιχεία, ώστε να αντιπροσωπεύει κατάλληλα την επιχείρηση ή/και να ικανοποιεί τον πελάτη.

Όσον αφορά το back-end development, οι λειτουργίες μίας ιστοσελίδας ή ενός ηλεκτρονικού καταστήματος μπορούν να δημιουργηθούν με τη χρήση ενός cms σε διάρκεια μόλις λίγων ημερών. Τα cms επιτρέπουν τη δημιουργία ιστοσελίδων σε ένα γραφικό περιβάλλον με τη χρήση ενός ποντικιού και ενός πληκτρολογίου, χωρίς να απαιτείται καμία απολύτως γνώση κάποιας γλώσσας προγραμματισμού. Στα cms, το template, οι λειτουργίες αλλά και το SEO, προστίθενται με την εγκατάσταση plugins.

Προγραμματισμός Διαδικτυακών Εφαρμογών

Υπάρχουν βέβαια εταιρείες που έχουν αναγνωρίσει τα προβλήματα που προκαλούν οι open source cms πλατφόρμες και έχουν δημιουργήσει δικές τους διαδικτυακές εφαρμογές, με κώδικα γραμμένο από τον/τους προγραμματιστές τους και SEO από τον/τους SEO Specialists. Στην περίπτωση αυτή, μπορούμε πλέον να μιλάμε για 'Προγραμματισμό Διαδικτυακών Εφαρμογών' - 'Web Application Development' ή 'Web App Development' και όχι απλά για κατασκευή ιστοσελίδων. (Πως μπορείς όμως να να πετύχεις επισκεψιμότητα στο Google, κυνηγώντας τις λέξεις - κλειδιά 'Προγραμματισμός Διαδικτυακών Εφαρμογών';)

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