Σύστημα Σχεδίασης UI

Αθανάσιος Παπαλίτσας
Παίδοψυχοθεραπευτής - Κλινικός Ψυχολόγος
Επισκεφτείτε τον Ιστότοπο

Παλέτα Χρωμάτων Brand

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

Εκτεταμένη Κλίμακα Primary Χρώματος

Μια ολοκληρωμένη κλίμακα 10 βημάτων από ανοιχτό προς σκούρο για το primary χρώμα (Sage Green), παρέχοντας ευελιξία για καταστάσεις UI, φόντα και ιεραρχίες κειμένου.

Εκτεταμένη Κλίμακα Secondary Χρώματος

Κλίμακα 10 βημάτων από ανοιχτό προς σκούρο για το secondary χρώμα (Cool Blue-Gray), παρέχοντας ευελιξία για backgrounds, borders και UI states.

Σύστημα Τυπογραφίας

Ένα εκλεπτυσμένο σύστημα διπλής γραμματοσειράς που συνδυάζει την κομψότητα της STIX Two Text (serif) για τους τίτλους με τη σαφήνεια της Geologica για το κύριο κείμενο, δημιουργώντας μια επαγγελματική αλλά προσιτή φωνή.

H1 • Επικεφαλίδα Εμφάνισης
Μεθοδική υποστήριξη για όλες τις ηλικίες
Γραμματοσειρά STIX Two Text
Μέγεθος 48px / 3rem
Βάρος 700 (Bold)
Ύψος Γραμμής 125% (Snug)
Διάστημα Γραμμάτων 0.03em
H2 • Επικεφαλίδα Ενότητας
Ξεκάθαρη διαδικασία από την πρώτη συνάντηση
Font STIX Two Text
Size 36px / 2.25rem
Weight 600 (Semibold)
Line Height 125% (Snug)
Letter Spacing 0.025em
H3 • Επικεφαλίδα Υποενότητας
Θεραπευτική Γέφυρα Οικογένειας–Σχολείου
Font STIX Two Text
Size 28px / 1.75rem
Weight 600 (Semibold)
Line Height 140% (Normal)
Letter Spacing 0.02em
Κύριο Κείμενο • Κανονικό
Η ψυχοθεραπεία αποτελεί μια δομημένη διαδικασία που στοχεύει στην κατανόηση και αντιμετώπιση ψυχολογικών δυσκολιών. Μέσα από συνεργατικό διάλογο και εξατομικευμένες στρατηγικές, υποστηρίζουμε την προσωπική ανάπτυξη και ευημερία.
Font Geologica
Size 16px / 1rem
Weight 400 (Regular)
Line Height 160% (Relaxed)
Υπόμνημα • Μικρό Κείμενο
Δευτέρα – Παρασκευή: 09:00 – 21:00 | Σάββατο: Κατόπιν συνεννόησης
Font Geologica
Size 14px / 0.875rem
Weight 400 (Regular)
Χρώμα Primary 700
Hero Title • Επικεφαλίδα Hero Section
Μεθοδική υποστήριξη για όλες τις ηλικιακές ομάδες
Font Geologica
Size 56px / 3.5rem
Weight 700 (Bold)
Line Height 125% (Snug)
Letter Spacing 0.03em
Χρήση Hero Section Title
Hero Subtitle • Υπότιτλος Hero Section
REBT: Στις υπηρεσίες του ανθρώπου, απέναντι στις προκλήσεις του σήμερα • Παιγνιοθεραπεία: Το παιχνίδι επιστρέφει στις ρίζες του
Font Geologica
Size 18px / 1.125rem
Weight 400 (Regular)
Line Height 175% (Relaxed)
Χρήση Hero Section Subtitle

Στοιχεία UI

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

Κουμπιά

Γραμματοσειρά Geologica
Βάρος 600 (Semibold)
Ακτίνα Περιγράμματος 8px (md)
Μετάβαση 0.3s ease

Κάρτες

Ψυχοθεραπεία Παιδιών

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

Ψυχοθεραπεία Εφήβων

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

Padding 32px (2rem)
Ακτίνα Περιγράμματος 16px (lg)
Σκιά md → xl (hover)
Μετάβαση 0.3s ease

Πεδία Φορμών

Padding 14px 16px
Περίγραμμα 2px solid
Ακτίνα Περιγράμματος 8px (md)
Δακτύλιος Focus 3px opacity 0.1

Σύστημα Αποστάσεων & Διάταξης

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

--spacing-xs
4px

Ελάχιστη απόσταση για στενές διατάξεις, padding εικονιδίων

--spacing-sm
8px

Μικρά κενά μεταξύ συναφών στοιχείων

--spacing-md
12px

Προεπιλεγμένη απόσταση για πεδία φορμών, κουμπιά

--spacing-lg
16px

Τυπική απόσταση μεταξύ στοιχείων

--spacing-xl
24px

Padding ενότητας, μεγαλύτερα κενά

--spacing-2xl
32px

Padding container, κύριες ενότητες

--spacing-3xl
48px

Μεγάλη απόσταση ενότητας

--spacing-4xl
64px

Εξαιρετικά μεγάλη απόσταση μεταξύ κύριων ενότητων

Σκιές & Ύψος

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

--shadow-sm

0 1px 2px rgba(0,0,0,0.05)

Λεπτή ανύψωση για κάρτες

--shadow-md

0 4px 6px rgba(0,0,0,0.1)

Προεπιλεγμένη ανύψωση κάρτας

--shadow-lg

0 10px 15px rgba(0,0,0,0.1)

Καταστάσεις hover, modals

--shadow-xl

0 20px 25px rgba(0,0,0,0.1)

Dropdowns, popovers

UI Εφαρμογής Web

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

Κύριες Σχεδιαστικές Αποφάσεις

🎨 Οπτική Γλώσσα

Ζεστός Μινιμαλισμός: Καθαρές διατάξεις με οργανικά gradients και λεπτές κινήσεις δημιουργούν μια φιλόξενη, επαγγελματική ατμόσφαιρα. Η ρευστή gradient ενότητα hero χρησιμοποιεί τα brand χρώματα για να καθιερώσει εμπιστοσύνη αμέσως.

📱 Ανταποκρινόμενη Σχεδίαση

Προσέγγιση Mobile-First: Η διεπαφή προσαρμόζεται απρόσκοπτα από 320px έως 1920px+ με 17 ανταποκρινόμενα breakpoints. Το sticky mobile call module εξασφαλίζει προσβασιμότητα στις πληροφορίες επικοινωνίας ανά πάσα στιγμή.

♿ Προσβασιμότητα

Συμμόρφωση WCAG AA: Όλο το κείμενο πληροί τις απαιτήσεις αντίθεσης (8.5:1 για κύριο κείμενο). Semantic HTML, ARIA labels, πλοήγηση πληκτρολογίου και focus states εξασφαλίζουν μια συμπεριληπτική εμπειρία.

⚡ Απόδοση

Βελτιστοποιημένη Εμπειρία: CSS custom properties για δυναμικό theming, ελάχιστο JavaScript, lazy-loaded εικόνες και αποτελεσματικές κινήσεις εξασφαλίζουν γρήγορους χρόνους φόρτωσης και ομαλές αλληλεπιδράσεις.

Αρχιτεκτονική Στοιχείων

Σύστημα Πλοήγησης
• Sticky header με logo και CTA
• Mobile hamburger menu με slide-in drawer
• Desktop dropdown menus με hover states
• Δείκτες ενεργής σελίδας
Ενότητα Hero
• Ρευστό animated gradient background
• Video background με fallback εικόνες
• Διπλά CTA κουμπιά (primary + secondary)
• Κίνηση δείκτη scroll
Module Βημάτων Διαδικασίας
• Οπτικοποίηση τριών-βημάτων θεραπευτικής διαδικασίας
• Κάρτες εικονιδίου + τίτλου + περιγραφής
• Ανταποκρινόμενη διάταξη grid
• Κινήσεις hover στις κάρτες
Κάρτες Υπηρεσιών
• Παιδιά, Έφηβοι, Ενήλικες, Ομάδες, WISC-V
• Δομή εικόνας + overlay + περιεχομένου
• Συνεπής ανύψωση σκιάς
• Σύνδεσμος σε λεπτομερείς σελίδες υπηρεσιών
Module Επικοινωνίας
• Επιλογές επικοινωνίας πολλαπλών καναλιών
• Sticky mobile bar με τηλέφωνο/WhatsApp/email
• Ενσωματωμένο ημερολόγιο για ραντεβού
• CTA δωρεάν 15λεπτης συμβουλευτικής

Ανταποκρινόμενα Breakpoints

Ολοκληρωμένο σύστημα breakpoints που εξασφαλίζει βέλτιστη εμπειρία σε όλες τις συσκευές.

@media (max-width: 320px)
Εξαιρετικά μικρές κινητές συσκευές
Ελάχιστο υποστηριζόμενο πλάτος, μία στήλη, συμπιεσμένες αποστάσεις
@media (max-width: 480px)
Μικρές κινητές συσκευές
Στοίβαση όλων των στοιχείων, βελτιστοποιημένη για mobile τυπογραφία
@media (max-width: 768px)
Tablets portrait, μεγάλα τηλέφωνα
Ενεργοποίηση hamburger menu, κάρτες στοιβάζονται σε μία στήλη
@media (min-width: 769px) and (max-width: 1024px)
Tablets landscape, μικρά laptops
Διατάξεις 2 στηλών, ξεκινάει desktop navigation
@media (min-width: 1025px)
Desktop και μεγαλύτερα
Πλήρης πλοήγηση, grids 3 στηλών, μέγιστο πλάτος container 1200px
@media (min-width: 1440px)
Μεγάλες οθόνες desktop
Αυξημένες αποστάσεις, βελτιωμένος οπτικός χώρος αναπνοής

Brand Assets

Πλήρης συλλογή όλων των brand assets: λογότυπα, σύμβολα, favicons και εκτυπώσιμα αρχεία. Όλα τα assets οργανωμένα ανά κατηγορία και μορφή για εύκολη πρόσβαση.

📦 Κατέβασμα Όλων (Google Drive)

01. PNG Transparent Background

PNG αρχεία με διαφανές φόντο, ιδανικά για ψηφιακές εφαρμογές, presentations και web.

Full Color

Dark Monochrome

White Monochrome

02. SVG Vector Web

Vector SVG αρχεία για web, scalable και optimized για όλες τις οθόνες.

Full Color

Dark Monochrome

White Monochrome

04. Symbol Only

Μόνο το σύμβολο σε διάφορες μορφές: favicons (16x16, 32x32) και social media icons (1000x1000).

Favicons

Social Media Icons

Προστατευμένη Στρατηγική

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

Οδηγίες Χρήσης

Καλύτερες πρακτικές για τη διατήρηση της συνέπειας brand και της ποιότητας σχεδίασης σε όλες τις εφαρμογές.

✓ Να Κάνετε

  • Χρησιμοποιήστε STIX Two Text για όλους τους τίτλους για να καθιερώσετε εξουσία και κομψότητα
  • Διατηρήστε ελάχιστη αναλογία αντίθεσης 4:1 για όλο το κείμενο (8.5:1 για κύριο κείμενο)
  • Χρησιμοποιήστε το σύστημα αποστάσεων 8 σημείων (4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px)
  • Εφαρμόστε λεπτές σκιές (sm, md) για κάρτες και lg/xl για modals και overlays
  • Χρησιμοποιήστε primary-900 (#364931) για κύρια CTAs και σημαντικές ενέργειες
  • Υλοποιήστε ομαλές μεταβάσεις (0.3s ease) για διαδραστικά στοιχεία
  • Εξασφαλίστε ότι τα touch targets είναι ελάχιστα 44x44px για mobile
  • Χρησιμοποιήστε semantic HTML5 στοιχεία και ARIA labels για προσβασιμότητα
  • Εφαρμόστε border-radius συνεπώς (sm: 4px, md: 8px, lg: 16px, xl: 24px)
  • Δοκιμάστε τα σχέδια σε πολλαπλές συσκευές και μεγέθη οθονών

✗ Μην Κάνετε

  • Μην χρησιμοποιείτε Geologica για τίτλους· είναι δεσμευμένη για κύριο κείμενο
  • Μην χρησιμοποιείτε sage green (#91A78B) για κείμενο· η αντίθεση είναι ανεπαρκής
  • Μην δημιουργείτε αυθαίρετες τιμές αποστάσεων εκτός του συστήματος
  • Μην χρησιμοποιείτε βαριές drop shadows ή πολλαπλά στρώματα σκιών
  • Μην συνδυάζετε περισσότερα από δύο βάρη γραμματοσειράς σε ένα στοιχείο
  • Μην χρησιμοποιείτε καθαρό μαύρο (#000000) για κείμενο· χρησιμοποιήστε primary-900
  • Μην ξεχνάτε hover και focus states σε διαδραστικά στοιχεία
  • Μην χρησιμοποιείτε μόνο χρώμα για να μεταδώσετε πληροφορία
  • Μην υπερβαίνετε 60-80 χαρακτήρες ανά γραμμή για κύριο κείμενο
  • Μην χρησιμοποιείτε gradient κείμενο ή υπερβολικά διακοσμητικά εφέ

Συμβάσεις Εκτύπωσης

Μετατροπή Χρωμάτων CMYK

Μετατρέψτε πάντα τα χρώματα σε CMYK για εκτυπώσιμα υλικά:

  • Sage Green: CMYK(13, 0, 17, 35)
  • Olive Green: CMYK(22, 0, 28, 49)
  • Text Primary: CMYK(26, 0, 33, 71)
  • Beige: CMYK(0, 4, 9, 10)

Τυπογραφία για Εκτύπωση

• Χρησιμοποιήστε STIX Two Text για επαγγελματικές κάρτες, επικεφαλίδες και επίσημα έγγραφα
• Ελάχιστο μέγεθος γραμματοσειράς 8pt για εκτυπωμένο κείμενο
• Αυξήστε το διάστημα γραμμάτων κατά 0.02em για μικρό τυπωμένο κείμενο
• Χρησιμοποιήστε βάρος 600 ή υψηλότερο για έμφαση στην εκτύπωση

Συστάσεις Υλικών

• Χαρτί ματ finish για μείωση της αντανάκλασης
• Φόντα off-white ή beige (#E6DDD1) για θερμότητα
• Ελάχιστη ανάλυση 300 DPI για όλα τα εκτυπωμένα υλικά
• Επαληθεύστε την ακρίβεια χρώματος με φυσικά proofs πριν τη μαζική εκτύπωση

✓ Αντιγράφηκε στο πρόχειρο!