e-Μανάβης

Γυμνασίο με Λ.Τ. Αρμενίου Σχολικό Έτος: 2025-2026

e-Μανάβης: Επιχειρηματικό πλάνο

Στόχος: Να γίνει κατανοητό το πρόβλημα και ο κοινός στόχος.

Φάση 1:Ενσυναίσθηση & Έρευνα Πεδίου

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

1. Συγκρότηση Ομάδων & Ρόλοι

Κάθε επιτυχημένο project βασίζεται στη συνεργασία και στην επικοινωνία.

2. Η Διαδικασία Design Thinking

Για τη παραγωγή του ιστοτόπου, θα ακολουθηθεί ένας κύκλος καινοτομίας.

3. Έρευνα Πεδίου:Κατανοώντας το Πρόβλημα

Πριν γραφεί κώδικας, πρέπει να κανατοηθεί τι χρειάζονται οι χρήστες.

4. Ιστορική Σύνδεση:Το Κιλελέρ ως Έμπνευση

Η αγροτική ιστορία της περιοχής.

Στόχος: Να "χτιστεί" ο σκελετός του ιστότοπου, διασφαλίζοντας ότι είναι φιλικός, ιδίως προς τους ηλικιωμένους.

Φάση 2:Σχεδιασμός & Αρχιτεκτονική

Η αποστολή: Να οργανώσουμε την πληροφορία έτσι ώστε ένας ηλικιωμένος χρήστης να μπορεί να βρει το mini-van και να μπορεί να παραγγείλει τα προϊόντα του σε λιγότερο από 1 λεπτό;

1. Αρχιτεκτονική Πληροφορίας(Sitemap)

Αρχική

Ο χάρτης ιστότοπου (sitemap) είναι ένα διάγραμμα που δείχνει την ιεραρχική δομή όλων των ιστοσελίδων του (πώς συνδέονται μεταξύ τους).

Παραγγελία

Χάρτης

Σχέδιo της πλοήγησης

Σχετικά με μας

Επικοινωνία

2. Σκελετός Ιστοσελίδας(Wireframe)

Ο σκελετός της ιστοσελίδας (Wireframe) είναι το αρχιτεκτονικό της σχέδιο. Δεν χρησιμοποιούνται χρώματα ή τελικές εικόνες ακόμα, αλλά γίνεται εστίαση στη διάταξη (layout).

Αρχική

Παραγγελία

Χάρτης

Σχετικά με μας

Επικοινωνία

3. Σχεδιασμός για Όλους(Universal & Accessible Design)

Καθολικός Σχεδιασμός (Universal Design) είναι η φιλοσοφία του να σχεδιάζονται προϊόντα που μπορούν να χρησιμοποιηθούν από το ευρύτερο δυνατό κοινό.

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

Next

3. Εμπειρία & Διεπαφή Χρήστη(UX/UI)

UX (User Experience - Εμπειρία Χρήστη) είναι η συνολική αίσθηση και ικανοποίηση κατά τη χρήση ενός προϊόντος.

UI (User Interface - Διεπαφή Χρήστη) είναι τα οπτικά στοιχεία και η αλληλεπίδραση που βλέπει ο χρήστης.

Next

3. Checklist Προσβασιμότητας (Senior Friendly UX)

[ ] Απλότητα και Διαισθητικότητα: Ο χρήστης ξέρει τι να κάνει χωρίς οδηγίες; [ ] Συνέπεια: Είναι το μενού στην ίδια θέση σε όλες τις σελίδες; [ ] Ανεκτικότητα σε λάθη: Αν ο χρήστης πατήσει κάτι λάθος, μπορεί να επιστρέψει εύκολα (π.χ. ένα μεγάλο κουμπί "Πίσω"). [ ] Χαμηλή φυσική προσπάθεια: Εξασφαλίστηκαν λιγότερα κλικ και σχεδιάστηκαν μεγαλύτεροι στόχοι (π.χ. κουμπιά) για το ποντίκι ή την αφή; [ ] Οπτική προσβασιμότητα: Επιλέχθηκε υψηλή χρωματική αντίθεση (π.χ. μαύρα γράμματα σε λευκό φόντο), μεγάλη γραμματοσειρά και υπάρχει δυνατότητα μεγέθυνσης κειμένου; [ ] Γνωστική προσβασιμότητα: Χρησιμοποιούνται απλές λέξεις αντί αγγλικών ή δύσκολων τεχνικών όρων; (π.χ. "Θέλω να αγοράσω" αντί για "Προσθήκη στο καλάθι").

4. Επωνυμία & Διαχείριση(Branding)

Η επωνυμία (brand) είναι η συνολική αντίληψη που έχει το κοινό για μια επιχείρηση, τα προϊόντα/υπηρεσίες της. Ουσιαστικά είναι η υπόσχεση που δίνεται στον χρήστη και το συναίσθημα που του προκαλείται.

Η δημιουργία/διαχείριση επωνυμίας (branding) είναι η στρατηγική διαδικασία για να χτιστεί αυτή την αντίληψη, μέσω της εταιρικής ταυτότητας (brand identity) και της οπτικής ταυτότητας (visual identity).

Next

4. Ψηφιακό Μάρκετινγκ(Digital Marketing)

Το Digital Marketing είναι το μέσο που προωθεί το branding και η στρατηγική επικοινωνίας στον ψηφιακό κόσμο μέσω καναλιών (social media, SEO, content marketing, email marketing), δημιουργώντας συναισθηματική σύνδεση και αναγνωρισιμότητα.

Next

4. Αφήγηση (Storytelling)

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

Next

4. Checklist Περιεχομένου (Branding & Storytelling)

Βασικές ερωτήσεις/απαντήσεις με τη σωστή σειρά: - Γιατί υπάρχει ο e-μανάβης; Για να μην νιώθει κανείς μόνος και αποκλεισμένος στην ύπαιθρο. - Πώς/με ποιον τρόπο το κάνουμε; Μέσω προσβάσιμης τεχνολογίας και αειφόρου εφοδιαστικής αλυσίδας (logistics). - Τι ακριβώς φτιάχνουμε; Μια ιστοσελίδα με live tracking και προπαραγγελίες.

Στόχος: Η ψηφιακή δημιουργία του πρωτοτύπου.

Φάση 3:Υλοποίηση & Κωδικοποίηση

Η αποστολή: Να χτιστούν τα θεμέλια του e-Μανάβης χρησιμοποιώντας την κατάλληλη δομή (HTML) και εμφάνιση (CSS), δίνοντας ζωή στις λειτουργίες του live tracking και της προπαραγγελίας.

1. Βασικός Σκελετός (HTML)

Κάθε ιστοσελίδα πρέπει να έχει μια σωστή ιεραρχία. Να γίνει χρήση των παρακάτω tags για να είναι ο κώδικας «καθαρός» και προσβάσιμος:

• <header>: Για το λογότυπο (logo) και τον τίτλο (title).
• <nav>: Για το μενού πλοήγησης (menu) και τη διασύνδεση των ιστοσελίδων (πρέπει να είναι ίδιο σε όλες τις σελίδες).
• <main>: Το κύριο περιεχόμενο (π.χ. ο χάρτης ή η φόρμα).
• <section>: Για να χωρίζετε τις ενότητες (π.χ. "Ιστορία", "Προϊόντα").
• <form>: Για τη φόρμα προπαραγγελίας, προσθέστε <labels> σε κάθε πεδίο (π.χ. "Ποσότητα σε κιλά") για να είναι σαφές τι πρέπει να συμπληρώσει ο χρήστης.

2. Σχεδίαση & Προσβασιμότητα (CSS)

[ ] Είναι υψηλή η αντίθεση χρώματος γραμμάτων και background; [ ] Είναι αρκετά μεγάλα τα γράμματα για έναν ηλικιωμένο; [ ] Είναι μεγάλα τα κουμπιά για εύκολο πάτημα; (διάταξη)[ ] Οι εικόνες έχουν alt text (περιγραφή) για άτομα με προβλήματα όρασης;

3. Λειτουργικότητες (Maps & Forms)

[ ] Ενσωματώθηκε ο χάρτης (live tracking simulation) [ ] Ενσωματώσθηκε η φόρμα προπαραγγελίας (σύνδεση με Google Sheets); [ ] Λειτουργούν τα links στο μενού πλοήγησης;

Στόχος: Ο έλεγχος του έργου.

Φάση 4:Δοκιμές, Βελτιστοποίηση & Παρουσίαση

Η αποστολή: Να τελειοποιηθεί το e-Μανάβης μέσα από την κριτική των χρηστών και να γίνει η διήγηση της ιστορία μας με τρόπο που θα εμπνεύσει την τοπική κοινωνία και τους κριτές.

1. «Τέστ του Παππού και της Γιαγιάς» (UX Testing)

Προσκαλέστε ένα άτομο της Τρίτης Ηλικίας (ή κάποιον μη εξοικειωμένο με την τεχνολογία) να δοκιμάσει το site. Παρατηρήστε τις αντιδράσεις τους χωρίς να τους βοηθήσετε. Ερωτήσεις Παρατήρησης:[ ] Βρήκαν εύκολα πού βρίσκεται το Mini-Van στον χάρτη; [ ] Μπόρεσαν να διαβάσουν τα κείμενα χωρίς δυσκολία; [ ] Υπήρξε κάποιο σημείο που «κόλλησαν» ή μπερδεύτηκαν; Διορθώσεις: Καταγράψτε τα πιο σημαντικά στοιχεία που πρέπει να αλλάξετε στον κώδικα (CSS/HTML) για να γίνει το site πιο απλό.

2. Τελική Βελτιστοποίηση & "Bug Hunting"

[ ] Responsiveness: Λειτουργεί το site σωστά σε κινητό και tablet; [ ] Links: Οδηγούν όλα τα κουμπιά στις σωστές σελίδες; [ ] Forms: Όταν πατάς «Αποστολή» στην παραγγελία, εμφανίζεται μήνυμα επιτυχίας; [ ] Speed: Φορτώνουν οι εικόνες γρήγορα;

3. Προετοιμασία της Παρουσίασης

Δημιουργία: [ ] Φυλλάδιο [ ] Αφίσα [ ] Σύντομο βίντεο (1') που δείχνει το site σε λειτουργία (screen recording) [ ] Ημερολόγιο αναρτήσεων σε social media και περιεχόμενο [ ] Παρουσίαση

4. Αποτίμηση Προγράμματος(Self-Reflection)

Κάθε μέλος της ομάδας να απαντήσει ατομικά: [ ] Τι έμαθα για την τεχνολογία που δεν ήξερα πριν; [ ] Πώς άλλαξε η γνώμη μου για τις ανάγκες των ηλικιωμένων στην περιοχή μου; [ ] Ποια ήταν η μεγαλύτερη δυσκολία που αντιμετωπίσαμε ως ομάδα και πώς τη λύσαμε;

Θεωρία σε βάθος

Web Design Lifecycle (WDLC)

Ο κύκλος ζωής του σχεδιασμού ιστοσελίδων είναι μια δομημένη, σταδιακή διαδικασία για:

• τη δημιουργία,
• την ανάπτυξη,
• την ασφάλεια,
• την κυκλοφορία και
• τη συντήρηση ιστοσελίδων,

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

Γιατί είναι σημαντική;

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

Διαδοχικά Στάδια

1. Οργάνωση & Ανακάλυψη (Planning & Discovery)
2. Σχεδιασμός & Δημιουργία περιεχομένου (Design & Content Creation)
3. Ανάπτυξη (Development)
4. Δοκιμές και διασφάλιση ποιότητας (Testing & Quality Assurance-QA)
5. Ανάπτυξη και έναρξη λειτουργίας (Deployment & Launch)
6. Συντήρηση και βελτιστοποίηση (Maintenance & Optimization)

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

1. Οργάνωση & Ανακάλυψη (Planning & Discovery)

(α) Κατανόηση των στόχων του πελάτη, του κοινού στόχου, των απαιτήσεων και της υπάρχουσας διαδικτυακής παρουσίας μέσα από τη συλλογή πληροφοριών (information gathering) και την ανάλυση πληροφοριών (information analysis). (β) Καθορισμός στόχων, κοινού στόχου, δομής ιστότοπου (sitemap, wireframes) και πεδίου εφαρμογής του έργου.

Sitemap

Wireframe

Σχέση και Σειρά: Πρώτα το ο χάρτης ιστότοπου - sitemap (ορίζει ποιες σελίδες υπάρχουν και πώς συνδέονται) και μετά το σκελετός ιστοσελίδας - wireframe (για κάθε βασική σελίδα του χάρτη, δημιουργείται ένα wireframe που δείχνει την εσωτερική της δομή). Συνεπώς, το sitemap αφορά τη συνολική πλοήγηση, ενώ το wireframe την οργάνωση περιεχομένου σε κάθε σελίδα. Με απλά λόγια, το sitemap είναι το σχέδιο της πόλης (πώς θα πάμε από το Α στο Β), ενώ τα wireframes είναι τα σχέδια των κτιρίων (πώς θα είναι μέσα το κάθε κτίριο).

2. Σχεδιασμός (Design)

Δημιουργία σκελετών και πρωτοτύπων (wireframes & prototypes) για τη δομή (structure), τη διάταξη (layout), τη διεπαφή χρήστη (χρώματα, γραφικά και πλοήγηση).

Prototype

Wireframe

Σχέση και Σειρά: Η κύρια διαφορά είναι ότι τα wireframes είναι στατικά, χαμηλής πιστότητας (low-fidelity) σχέδια που εστιάζουν στη δομή και τη διάταξη (layout), ενώ τα prototypes είναι δυναμικά, υψηλής πιστότητας (high-fidelity) μοντέλα που προσομοιώνουν την αλληλεπίδραση και την εμπειρία χρήστη (UX), προσφέροντας μια «ζωντανή» προσομοίωση του τελικού προϊόντος, με χρώματα, γραμματοσειρές και λειτουργικότητα. Με απλά λόγια, σχεδιάζεις πρώτα με wireframes για να αποφασίσεις πού θα πάνε τα κουμπιά και οι πληροφορίες. Μετά, φτιάχνεις prototypes για να "παίξεις" με την εφαρμογή και να δεις αν η εμπειρία είναι καλή πριν την φτιάξεις πραγματικά. Συνεπώς, τα wireframes είναι για την αρχική ιδέα και τη ροή, ενώ τα prototypes είναι για δοκιμές χρήστη και λεπτομερή ανατροφοδότηση.

Next

Όλα τα προηγούμενα αναφέρονται στη δημιουργία της οπτικής εμφάνισης και αίσθησης (UI/UX).

UX - User Experience

UI - User Interface

Σχέση και Σειρά: Η διαφορά είναι ότι το UX αφορά τη συνολική, λειτουργική και συναισθηματική εμπειρία του χρήστη (π.χ. πόσο εύκολο είναι να βρεις κάτι), ενώ το UI είναι η οπτική, αισθητική πλευρά που βλέπει ο χρήστης (π.χ. τα χρώματα, τα κουμπιά, η διάταξη), και ουσιαστικά το UI είναι ένα μέρος του UX, σχεδιάζοντας την «εμφάνιση» της λύσης που προτείνει το UX. Δηλαδή, το UX καθορίζει το «πώς» και «γιατί» (τη δομή και τη λειτουργία), ενώ το UI καθορίζει το «τι» και «πώς φαίνεται» (την οπτική παρουσίαση). Το UX προηγείται, καθώς δημιουργεί τη βάση για να σχεδιάσει ο UI designer τα γραφικά πάνω σε αυτή τη λειτουργική δομή.

Δημιουργία περιεχομένου (Content Creation) αφορά στην ανάπτυξη κειμένου, εικόνων, βίντεο και άλλου υλικού που θα “γεμίσει” την ιστοσελίδα, εξασφαλίζοντας αναγνωσιμότητα και συνάφεια.

3. Ανάπτυξη (Development)

Μετατροπή των εγκεκριμένων σχεδίων - προτύπων σε λειτουργικό ιστότοπο δηλαδή, προγραμματισμός (front-end και back-end), μετατρέποντας τα πρότυπα σε έναν λειτουργικό ιστότοπο.

Back-End

Front-End

Πώς συνεργάζονται: Το Front-End στέλνει αιτήματα (requests) στο Back-End, το οποίο επεξεργάζεται τα δεδομένα (π.χ. login, αναζήτηση) και επιστρέφει τις πληροφορίες πίσω στο Front-End για να τις δει ο χρήστης. Επομένως, η διαφορά είναι ότι το Front-End αφορά ό,τι βλέπει και αλληλεπιδρά ο χρήστης (οπτικό περιβάλλον, UI/UX), χρησιμοποιώντας HTML, CSS, JavaScript, ενώ το Back-End αφορά την «καρδιά» της εφαρμογής που τρέχει στον server (βάσεις δεδομένων, λογική, ασφάλεια), χρησιμοποιώντας γλώσσες (π.χ. Python, Java, PHP), και frameworks (π.χ. Django). Με απλά λόγια το Front-End είναι η «βιτρίνα» (εξωτερικό αυτοκινήτου), το Back-End είναι η μηχανή (εσωτερικό αυτοκινήτου). [Full-Stack Developer είναι ο επαγγελματίας που έχει γνώσεις και στις δύο πλευρές, γεφυρώνοντας το χάσμα μεταξύ τους.]

4. Δοκιμές και διασφάλιση ποιότητας (Testing & Quality Assurance-QA)

Αυστηρός έλεγχος της λειτουργικότητας, της χρηστικότητας, της απόδοσης και της συμβατότητας σε όλες τις συσκευές.

5. Ανάπτυξη και έναρξη λειτουργίας (Deployment & Launch)

Ανάρτηση του ιστότοπου σε έναν live server ώστε ο ιστότοπος να γίνει προσβάσιμος στο κοινό.

6. Συντήρηση και βελτιστοποίηση (Maintenance & Optimization)

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

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

Wireframes (Σκελετός)

Σκοπός: Ορισμός της δομής, της διάταξης και της ροής πληροφορίας. Πιστότητα: Χαμηλή (Low-fidelity), ασπρόμαυρο, βασικά σχήματα. Διαδραστικότητα: Στατικό, χωρίς κλικκαι αλληλεπίδραση. Στάδιο: Πολύ νωρίς στη διαδικασία σχεδιασμού.

Back-End Development (Server-Side)

Είναι η λογική, η διαχείριση δεδομένων και η υποδομή που λειτουργεί «πίσω από τις σκηνές». Τι περιλαμβάνει: Βάσεις δεδομένων (π.χ., MySQL, PostgreSQL), διακομιστές (servers), APIs, λογική εφαρμογής. Βασικές Τεχνολογίες: Python (Django), Java (Spring), PHP (Laravel), Ruby (Rails), Node.js. Στόχος: Λειτουργικότητα, ασφάλεια και αποδοτική διαχείριση δεδομένων.

UI (User Interface - Διεπαφή Χρήστη)

Βασικά στοιχεία Χρηστικότητα: κάνει το προϊόν εύκολο και ευχάριστο στη χρήση; Εμπλοκή: ενθαρρύνει τους χρήστες να παραμείνουν και να επιστρέψουν; Branding: αντικατοπτρίζει την προσωπικότητα της μάρκας και χτίζει εμπιστοσύνη; Ολοκλήρωση εργασιών: βοηθά τους χρήστες να επιτύχουν τους στόχους τους αποτελεσματικά;

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

Ο χάρτης ιστότοπου - sitemap είναι ένα διάγραμμα που δείχνει την ιεραρχική δομή όλων των σελίδων του (πώς συνδέονται μεταξύ τους). Σκοπός: δείχνει τη δομή και την αρχιτεκτονική πληροφορίας ολόκληρου του ιστότοπου. Εστίαση: στις σελίδες και τις σχέσεις τους (πλοήγηση). Μορφή: συνήθως ένα διάγραμμα με κουτιά και γραμμές, σαν δέντρο.

UI (User Interface - Διεπαφή Χρήστη)

Βασικά στοιχεία:

• Χρηστικότητα: Κάνει το προϊόν εύκολο και ευχάριστο στη χρήση.
• Εμπλοκή: Ενθαρρύνει τους χρήστες να παραμείνουν και να επιστρέψουν.
• Branding: Αντικατοπτρίζει την προσωπικότητα της μάρκας και χτίζει εμπιστοσύνη.
• Ολοκλήρωση εργασιών: Βοηθά τους χρήστες να επιτύχουν τους στόχους τους αποτελεσματικά.

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

Digital Storytelling

Γιατί είναι σημαντικό; - Διαφοροποίηση από τον ανταγωνισμό: σε ένα κορεσμένο περιβάλλον. - Εμπιστοσύνη & Αφοσίωση: οι άνθρωποι συνδέονται με ιστορίες που τους αγγίζουν συναισθηματικά. - Καλύτερη δέσμευση: οι χρήστες αλληλεπιδρούν περισσότερο με την ιστοσελίδα. Πώς εφαρμόζεται; - Σελίδα "Σχετικά με εμάς": γίνεται αφήγηση της ιστορίας, των προκλήσεων, του όραματος (όχι μια τυπική περιγραφή). - Περιγραφές Προϊόντων/Υπηρεσιών: εξηγείται πώς το προϊόν/υπηρεσία λύνει ένα πρόβλημα ή βελτιώνει τη ζωή του πελάτη (αντί μιας περιγραφή των χαρακτηριστικών). - Οπτικό Υλικό: χρησιμοποιούνται εικόνες και βίντεο που αφηγούνται μια ιστορία και μεταφέρουν συναισθήματα.

Τι περιλαμβάνει; - Δημιουργία εμπειρίας: μετατρέπει την περιήγηση σε μια συναισθηματική εμπειρία (όχι απλώς σε μια λίστα προϊόντων). - Επικοινωνία αξιών & Ταυτότητας: δείχνει ποια είναι και τι πρεσβεύει η επιχείρηση (όχι μόνο τι πουλάει). - Σύνδεση με το κοινό: κάνει το brand πιο «ανθρώπινο» και αξιομνημόνευτο, ενεργοποιώντας το κοινό σε βαθύτερο επίπεδο. - Παρουσίαση του «Γιατί»: εξηγεί τον λόγο ύπαρξης της επιχείρησης (πέρα από τα προϊόντα και τις υπηρεσίες).

Η "Ιστορία" μας έχει ρίζες

Η ιστορία μας δεν ξεκινάει το 2026, αλλά το 1910. Τότε οι αγρότες αγωνίστηκαν για τη γη τους. Σήμερα, εσείς αγωνίζεστε για να κρατήσετε αυτή τη γη και τους ανθρώπους της ζωντανούς μέσω της τεχνολογίας. Ήρωας: Ο ηλικιωμένος κάτοικος του Κιλελέρ ή ο τοπικός παραγωγός. Εμπόδιο: Η απομόνωση, η δυσκολία μετακίνησης, η σπατάλη προϊόντων. Λύση: Ο e-μανάβης εμφανίζεται ως ο «βοηθός» που λύνει το πρόβλημα.

Checklist: Πώς να μας βρουν

[ ] Ψηφιακά κανάλια: κοινότητα σε social, εφαρμογή που χρησιμοποιούν οι ηλικιωμένοι, αναζήτηση στο Google. [ ] Φυσικός & ψηφιακός κόσμος: Τοποθέτηση QR codes σε φυσικά σημεία. [ ] Πυλώνες περιεχομένου: εκπαιδευτικό, ανθρώπινο και χρηστικό περιεχόμενο.

Front-End Development (Client-Side)

Είναι το κομμάτι που βλέπει ο χρήστης στον browser (ιστότοπος, εφαρμογή). Τι περιλαμβάνει: Σχεδιασμό, διάταξη, γραμματοσειρές, χρώματα, γραφικά, διαδραστικότητα (π.χ. κουμπιά). Βασικές Τεχνολογίες: HTML, CSS, JavaScript (και frameworks όπως React, Angular, Vue). Στόχος: Οπτική εμπειρία χρήστη (UX).

Design Thinking

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

Είναι μια στρατηγική μεθοδολογία που: - μειώνει το ρίσκο, - εστιάζει στην καινοτομία και - εξασφαλίζει ότι το τελικό προϊόν/υπηρεσία ανταποκρίνεται πραγματικά στις ανάγκες των ανθρώπων.

Προσβάσιμος Σχεδιασμός (Accessible Design)

Στόχος: να επιτρέψει σε άτομα με αναπηρίες να χρησιμοποιούν ένα προϊόν ή μια υπηρεσία, συχνά προσφέροντας εναλλακτικές μεθόδους αλληλεπίδρασης (π.χ. εναλλακτικές συντομεύσεις πληκτρολογίου, φωνητικές εντολές). Προσέγγιση: εστιάζει στις ανάγκες «ειδικών» ομάδων χρηστών, δημιουργώντας ξεχωριστές, αλλά ισοδύναμες, εμπειρίες. Παράδειγμα: ένας ιστότοπος με ξεχωριστή λειτουργία για αναγνώστες οθόνης.

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

Branding & Digital Marketing

Tο digital marketing είναι η σύγχρονη, μετρήσιμη και διαδραστική εφαρμογή του branding στο διαδίκτυο, ένα εργαλείο που μεταφράζει την ταυτότητα σε πραγματικά αποτελέσματα. Το branding είναι το στρατηγικό θεμέλιο (ποια είναι η επιχείρηση και τι πρεσβεύει), ενώ το digital marketing είναι το εργαλείο που το «ζωντανεύει» στο ψηφιακό περιβάλλον.

Το branding εξασφαλίζει ότι η εικόνα και το μήνυμα είναι ίδια σε όλα τα ψηφιακά κανάλια, χτίζοντας εμπιστοσύνη. Το digital marketing, μέσω της άμεσης επικοινωνίας (social media, content), δημιουργεί οικειότητα και μετατρέπει τους πελάτες σε πιστούς υποστηρικτές του brand, κάνοντάς το ορατό.

UX (User Experience - Εμπειρία Χρήστη)

Βασικά στοιχεία Ευχρηστία: είναι εύκολο να το μάθει κανείς και αποτελεσματικό στη χρήση; Προσβασιμότητα: μπορούν όλοι να έχουν πρόσβαση και να το χρησιμοποιούν; Ελκυστικότητα: είναι οπτικά ελκυστικό και ευχάριστο; Ευρεσιμότητα: μπορούν οι χρήστες να βρουν εύκολα αυτό που χρειάζονται; Αξιοπιστία: ο χρήστης εμπιστεύεται το προϊόν/την υπηρεσία;

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

Ύφος: Πώς μιλάει ο e-μανάβης; Είναι σοβαρό και επίσημο ή φιλικό και καθημερινό; (Για τους ηλικιωμένους, μια ζεστή, φιλική και απλή γλώσσα είναι η ιδανική). Συνέπεια (Consistency): Το λογότυπο και τα χρώματα πρέπει να είναι ίδια παντού: στο site, στα φυλλάδια, στα social. Αυτό χτίζει εμπιστοσύνη. Σύνθημα (Tagline): Μια μικρή φράση που τα λέει όλα (π.χ. "Ο e-μανάβης στην πόρτα σας").

Σχεδιασμός ιστοσελίδας (Wireframe)

Είναι σαν ένα αρχιτεκτονικό σχέδιο για ένα σπίτι, που περιγράφει πού βρίσκονται τα δωμάτια (ενότητες) και οι πόρτες (πλοήγηση), εξασφαλίζοντας ότι η εμπειρία του χρήστη είναι λογική και εύκολη. Σκοπός: σχεδιασμός του "σκελετού" μιας μεμονωμένης ιστοσελίδας, εστιάζοντας στη διάταξη και τη λειτουργικότητα (π.χ. πού θα μπει το slider, το μενού, το κείμενο). Εστίαση: στο περιεχόμενο (content), τη διάταξη (layout) και τη χρηστικότητα (UX) κάθε σελίδας. Μορφή: απλά, ασπρόμαυρα προσχέδια που μοιάζουν, χωρίς χρώματα και γραμματοσειρές.

Το Wireframe είναι η δημιουργία ενός απλοποιημένου, σκελετικού σχεδίου (blueprint) μιας ιστοσελίδας πριν από την προσθήκη λεπτομερειών οπτικού σχεδιασμού (π.χ. χρώματα, γραμματοσειρές ή εικόνες), με έμφαση: - στη δομή (structure), - τη διάταξη του περιεχομένου (layout) και - τη λειτουργικότητα (όπως η τοποθέτηση κουμπιών και η ροή των χρηστών) και τη θέση των βασικών στοιχείων (π.χ. header, footer, menu).

UX (User Experience - Εμπειρία Χρήστη)

Βασικά στοιχεία Ευχρηστία: Είναι εύκολο να το μάθει κανείς και αποτελεσματικό στη χρήση; Προσβασιμότητα: Μπορούν όλοι να έχουν πρόσβαση και να το χρησιμοποιούν; Ελκυστικότητα: Είναι οπτικά ελκυστικό και ευχάριστο; Ευρεσιμότητα: Μπορούν οι χρήστες να βρουν εύκολα αυτό που χρειάζονται; Αξιοπιστία: Ο χρήστης εμπιστεύεται το προϊόν/την υπηρεσία;

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

Είναι σαν ένα αρχιτεκτονικό σχέδιο για ένα σπίτι, που περιγράφει πού βρίσκονται τα δωμάτια (ενότητες) και οι πόρτες (πλοήγηση), εξασφαλίζοντας ότι η εμπειρία του χρήστη είναι λογική και εύκολη πριν από οποιαδήποτε οπτική διαμόρφωση. Σκοπός: σχεδιασμός του "σκελετού" μιας μεμονωμένης ιστοσελίδας, εστιάζοντας στη διάταξη και τη λειτουργικότητα (π.χ. πού θα μπει το slider, το μενού, το κείμενο). Εστίαση: στο περιεχόμενο (content), τη διάταξη (layout) και τη χρηστικότητα (UX) κάθε σελίδας. Μορφή: Απλά, ασπρόμαυρα προσχέδια που μοιάζουν με σκελετό, χωρίς χρώματα και γραμματοσειρές.

Ο σκελετός ιστοσελίδας - wireframe είναι η δημιουργία ενός απλοποιημένου, σκελετικού σχεδίου (blueprint) μιας ιστοσελίδας πριν από την προσθήκη λεπτομερειών οπτικού σχεδιασμού (π.χ. χρώματα, γραμματοσειρές ή εικόνες), με έμφαση: - στη δομή (structure), - τη διάταξη του περιεχομένου (layout) και - τη λειτουργικότητα (όπως η τοποθέτηση κουμπιών και η ροή των χρηστών) και τη θέση των βασικών στοιχείων (π.χ. header, footer, menu).

Προσβάσιμος Σχεδιασμός (Accessible Design)

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

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

Checklist

[ ] Να επιλεχθούν 3 λέξεις-κλειδιά που περιγράφουν το project. [ ] Να γραφούν οι τίτλοι και τα κείμενα (π.χ. ιστορία-έμπνευση, ειδική παράδοση, περιγραφές προϊόντων κ.α.). [ ] Να επιλεχθεί το σύμβολο για το λογότυπο. [ ] Να επιλεχθούν 3-4 χρώματα (παλέττα). [ ] Να δημιουργηθεί μια φωτογραφία που δείχνει το συναίσθημα που επιδιώκεται να νιώσει ο χρήστης (π.χ. ένας χαμογελαστός παππούς που παραλαμβάνει καφάσι με ντομάτες).

Έρευνα Πεδίου

Α. Για τους ηλικιωμένους (Κοινωνική αλληλεγγύη): - Ποιες δυσκολίες αντιμετωπίζουν όταν θέλουν να αγοράσουν φρέσκα προϊόντα; - Τι θα τους έκανε να νιώθουν ασφαλείς με μια «κατ' οίκον παράδοση»; - Πόσο θα βοηθούσε τους οικείους τους να τους παρέχουν απομακρυσμένη βοήθεια; - Τι μέγεθος γραμματοσειράς και τι χρώματα προτιμούν σε μια οθόνη;

Β. Για τους τοπικούς παραγωγούς (Αειφορία): - Πόσο προϊόν «χάνεται» επειδή δεν ξέρουν ακριβώς πόσο θα πουλήσουν; - Πώς θα τους βοηθούσε να ξέρουν τις παραγγελίες 24 ώρες πριν ξεκινήσει το mini-van; - Πώς θα βοηθούσε την αγροτική οικονομία της κοινότητας με την άμεση διάθεση των τοπικών παραγόμενων προϊόντων;

Prototype (Πρωτότυπο)

Σκοπός: Προσομοίωση της λειτουργικότητας και της εμπειρίας χρήστη (UX). Πιστότητα: Υψηλή (High-fidelity), με τελικό design, χρώματα, γραμματοσειρές. Διαδραστικότητα: Κλικάρισμα (clickable), διαδραστικό, σαν «εξομοιωτής». Στάδιο: Αργότερα, για δοκιμές (user testing) πριν την ανάπτυξη.

Checklist: "Προσωπικότητα"

[ ] Ταυτότητα: Ποιοι είμαστε; (π.χ. είμαστε η γέφυρα ανάμεσα στην παράδοση και την τεχνολογία). [ ] Αξίες: Τι μας νοιάζει; (π.χ. σεβασμός στην τρίτη ηλικία, αλληλεγγύη, ποιότητα, αειφορία). [ ] Οπτική Ταυτότητα: Λογότυπο, γραμματοσειρές, χρώματα. (π.χ. συμβολισμοί: πράσινο χρώμα για τη φύση και την ανάπτυξη).

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

Branding

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