Είδος: Εκπαίδευση

Πελάτης: EWORX S.A.

To έργο αφορά την Ελληνοαμερικανική Ένωση και είναι το σημείο προβολής του Hellas Alive, ενός προϊόντος εκμάθησης ελληνικών.

Εργασίες:

• Concept
• ο σχεδιασμός του GUI
• τα απαιτούμενα XHTML templates
• η συγγραφή του σχετικού CSS
• τα απαραίτητα γραφικά

Είδος: Fashion industry

Πελάτης: EWORX S.A.

To έργο αφορά την εταιρεία OMOR  και στην ουσία εξυπηρετεί τρείς στόχους: Την κατασκευή εταιρικού site, ενός site για την προβολή της τρέχουσας collection, και ενός e-shop (υπο κατασκευή).

Εργασίες:

• Concept
• ο σχεδιασμός του GUI
• τα απαιτούμενα XHTML templates
• η συγγραφή του σχετικού CSS
• τα απαραίτητα γραφικά
• Flash design

Είδος: Health management
Πελάτης: EWORX S.A.

Το ageingatwork.eu αναπτύχθηκε με την υποστήριξη της Ευρωπαϊκής Επιτροπής, στα πλαίσια του Leonardo da Vinci Lifelong Learning Programme 2007-2013.

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

Εργασίες:

• σχεδιασμός εταιρικής ταυτότητας και λογοτύπου
• ο σχεδιασμός του GUI
• τα απαιτούμενα XHTML templates
• η συγγραφή του σχετικού CSS
• τα απαραίτητα γραφικά
• ειδική μελέτη για άτομα με ειδικές ανάγκες

Επισκεφθείτε το site.

Η μαγική λέξη που απουσιάζει σχεδόν ολόκληρη από κάθε έργο που αναλαμβάνει κάποιος web designer, τουλάχιστον στην Ελλάδα (κάτι μου λέει πως αυτό βέβαια είναι γενικό πρόβλημα - στην Ελλάδα πάντα).

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

Ορίζοντας προδιαγραφές γλυτώνει κανείς από τους εξής πονοκεφάλους:

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

Πολλοί συνάδελφοι γνωρίζουν τους παραπάνω πονοκεφάλους και παίρνουν τα κατάλληλα χάπια για την καταστολή. Όμως δεν είναι καλύτερη η πρόληψη από την θεραπεία;

Prototyping

Είναι μια έννοια που ορίζει ακριβώς αυτό: ΤΟ πρωτότυπο πάνω στο οποίο μπορεί κανείς να υλοποιήσει ένα έργο έχοντας καταγράψει (όσο το δυνατόν περισσότερες) ανάγκες του πελάτη.

Το prototype πρέπει να αποτελείται από τρία διαφορετικά προϊόντα:

Wireframes (ή αλλιώς “κουτάκια”)

Καθορίζει σαφώς τις επιμέρους οθόνες και τα στοιχεία που απαρτίζουν την κάθε μια καθώς και τα χαρακτηριστικά κάθε στοιχείου. Επίσης, περιέχει και use cases που αποσαφηνίζουν τις διαδικασίες πλοήγησης σε επιλεγμένα (ή όλα) σενάρια χρήσης του website. Οπτικά, αυτό θα μπορούσε να είναι πολλά Α4 με σχεδιασμένα κουτάκια (οθόνες), με άλλα κουτάκια μέσα τους (στοιχεία οθόνης) και πολλές πολλές σημειώσεις πάνω τους και βελάκια ή ακόμη περισσότερες Α4 με περιγραφή όλων των παραπάνω. Το πως μπορεί κανείς να συμμαζέψει αυτό το πάκο χαρτιών σε ένα και μόνο αρχείο, θα το πούμε παρακάτω.

Design Mock ups (η αλλιώς “εικαστικά προσχέδια”)

Στην ουσία μοιάζει με τα κλασικά προσχέδια. Το μυστικό όμως εδώ είναι πως αυτά είναι ανεξάρτητο από τα Wireframes και έχουν δική τους ζωή. Ενώ με τα wireframes καθορίζεις σαφώς τη λειτουργικότητα του website, με τα mock ups καθορίζεις την αισθητική του. ΟΧΙ την τελική μορφή!Αυτή θα προκύψει παντρεύοντας τα wireframes και τα mock ups σε ένα τελικό προσχέδιο πριν ακόμη γραφτεί μια γραμμή CSS, ή HTML.

Αυτά τα δύο έγγραφα καλείται να υπογράψει ο πελάτης και ο ανάδοχος του έργου και πρέπει να είναι δεσμευτικά και για τους δύο. Για να μην χρεώνει ο ένας άλλα και ο άλλος να μην θέλει να πληρώσει τελείως διαφορετικά. Προσοχή όμως: Ο πελάτης πρέπει να καταλάβει πως υπογράφει δύο διαφορετικά έγγραφα! Ένα για το πως δουλεύει το website του και ένα για το πως θα φαίνεται.

Final Mock up (ή αλλιώς “τελικό προσχέδιο”)

Για το πως θα είναι στην πραγματικότητα, μπορεί να υπογράψει το τελικό προσχέδιο το οποίο ονομάζεται Final Mock up και είναι στην ουσία ο γάμος του wireframe και του design mock up που έχει επιλέξει ο πελάτης.

Καταλαβαίνει κανείς πως με τον παραπάνω διαχωρισμό θα μπορούσε αν είναι ανάγκη (το προϋποθέτει η φύση του project) να δουλέψουν δύο διαφορετικοί εξειδικευμένοι συνεργάτες πάνω σε ένα project. πχ ο Analyst ή GUI specialist να δουλέψει στα wireframes και ο απλός web designer πάνω στο εικαστικό. Έτσι μειώνεται στην ουσία και ο χρόνος που απαιτείται για την υλοποίηση.

Συνοψίζοντας, οι φάσεις του prototyping είναι τρεις:

• Wireframe (πως δουλεύει)
• Design mock ups (πως θα φαίνεται)
• Final mock up (Πως πραγματικά θα είναι)

Πρακτικές συμβουλές

Wireframes μπορεί κανείς να δουλέψει με:

• Χαρτί, μολύβι, Post-it και γερή μνήμη
• Εξειδικευμένο software
  Δες : Axure (σοβάρό/ακριβό), MockupScreens (καλό/φτηνό), Denim (παιδικό/τσάμπα) ή δες μια πιο ολοκληρωμένη λίστα.

Design mock ups μπορεί κανείς να δουλέψει με:

• Χαρτί, μολύβι, μαρκαδόρους, πλαστελίνες και γερά νεύρα
• Εξειδικευμένο software
  Adobe Fireworks/Photoshop

Final mock ups μπορεί κανείς να δουλέψει με συνδιασμό των παραπάνω.

Διαβάστε περισσότερα

Μια τόσο αρχαία - ελληνική - ανακάλυψη που συνεχίζει να βρίσκει εφαρμογή τόσο στις παραδοσιακές μορφές τέχνης και σκέψης, όσο και στις νέες τεχνολογίες και ειδικά στον σχεδιασμό του Graphics User Interface!

Εδώ θα πρέπει να αναφερθεί και ο “Κανόνας των Τρίτων“, μια απλοποιημένη μορφή της Χρυσής Τομής που στα χέρια ενός φωτογράφου αλλά και ενός web designer μπορεί να δημιουργήσει συνθέσεις που ακολουθούν την φυσική αρμονία και δημιουργούν στον επισκέπτη ενός website οπτική άνεση.

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

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

• Golden ratio - Wikipedia
• The Rule of Thirds - Wikipedia
• Smashingmagazine - Applying Divine Proportion To Your Web Designs

Βοηθείστε το Firefox να κάνει παγκόσμιο ρεκόρ Guinness. “Υποσχεθείτε” πως θα κατεβάσετε την νέα ανανεωμένη έκδοση 3, την συγκεκριμένη ημέρα που θα δοθεί στο κοινό.
Ακόμη προτείνεται να οργανώσετε και ένα …. Firefox party για αυτό το σκοπό!