WireframePlus is online!

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

Πρόκειται για το www.wireframeplus.com και πρωτού προχωρήσω στην εξιστόρηση όλων των “βρώμικων” λεπτομερειών (Τι κάνει το wireframeplus, πως το κάνει, πως άρχισε όλη η ιστορία και ποιοι άνθρωποι είναι πίσω από αυτό), νοιώθω ότι πρέπει να εξηγήσω (αν και νομίζω ότι σχεδόν όλοι γνωρίζετε τι είναι το wireframe και τι εξυπηρετεί) τι σημαίνει η λέξη Wireframe και δεν θα μπορούσα να βρω καλύτερη εξήγηση και στα Ελληνικά:

Wireframes είναι τα σκίτσα, ή διαγράμματα, ή απεικονίσεις μέρους μιας εφαρμογής ή ιστοσελίδας. Ασχέτως αν είναι low-fidelity ή high-fidelity, αποτελούν στατικές απεικονίσεις, με σκοπό να οργανώσουν το layout μιας ιστοσελίδας χωροταξικά.

via css3.gr

Τι ακριβώς κάνει το WireframePlus.

Το WireframePlus είναι μια online υπηρεσία που δέχεται τα σκίτσα/wireframes και παράγει από αυτά ποιοτικά website/web application designs, διατηρώντας παράλληλα μια οικονομική σχετικά, τιμή.
Με άλλα λόγια, αν είστε Creative Director, Ux Designer, Web developer ή ακόμη και πολυάσχολος web designer ή Startup και ψάχνετε για ποιοτικό Custom web design με περιορισμένο budget, το WireframePlus είναι αυτό που ψάχνετε.

Αν θέλετε, μπορείτε να χαρακτηρίσετε το WireframePlus μια Business to Business υπηρεσία.

Πως συμβαδίζει η ποιότητα με την χαμηλή τιμή;

Ένα έργο σχεδιασμού ιστοσελίδας έχει πολλές παραμέτρους αν και συνήθως οι περισσότεροι γνωρίζουν μόνο τη μια από αυτές, η οποία είναι “Πηγαίνω σε έναν web designer, του λέω τι θέλω, μου το κάνει, είμαι έτοιμος”.

Όσοι όμως εργαζόμαστε στο χώρο, γνωρίζουμε πως υπάρχουν οι παρακάτω σημαντικές διαδικασίες:

α. Η διαδικασία της πώλησης.

β. Η διαδικασία της ανάλυσης και καταγραφής των αναγκών.

γ. Ανάλυση του πελάτη και του ανταγωνισμού.

δ. Παραγωγή prototypes και Wireframes.

ε.  Creative Direction / Web design.

στ. Front end development.

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

Να δει πόσο ακριβώς θα πληρώσει και να πληρώσει online.

Να ανεβάσει το συνολικό creative brief του έργου που έχει προκύψει από όλη την διαδικασία.

Να επιλέξει to στυλ της ιστοσελίδας που θέλει να δημιουργηθεί, μεταξύ 12 στυλιστικών επιλογών.

Να ορίσει την παλέτα χρωμάτων που θέλει να χρησιμοποιηθει και τέλος,

να ανεβάσει τα τελικά Wireframes, βάση των οποίων θα σχεδιαστεί η ιστοσελίδα.

Όταν τα παραπάνω στοιχεία μαζεύονται μέσω της πλατφόρμας του WireframePlus, μπορούμε να πούμε με σιγουριά πως το 50% της δουλειάς έχει ήδη γίνει, πρωτού φτάσει σαν αίτημα στο WireframePlus(!), κάτι που σημαίνει, περισσότερος χρόνος για Web design, λιγότερος συνολικός χρόνος για ένα project, άρα και λιγότερα χρήματα.

Με άλλα λόγια, μένουν μόνο τα ευχάριστα πράγματα. Το ποιοτικό design και η χαμηλή τιμή!

Πως άρχισε η ιστορία.

Η ιστορία όλως τυχαίως άρχισε δυο εβδομάδες πριν το Wordcamp, όπου για πρώτη φορά ανακοινώθηκε το Wireframeplus.com.

Περπατούσαμε στη Θεσσαλονίκη με τον @tsiger, την @pinkmoustache και την Ευδοκία και συζητούσαμε πως το web δεν είναι μόνο η Ελλάδα και το ότι είναι αδύνατον να δουλεύεις για το web και να μην έχεις σκεφτεί την προοπτική του “global”  και εκεί ήταν που κάποιος ( πραγματικα δε θυμάμαι αν ήμουν εγώ ή ο Γεράσιμος) πέταξε την φράση “Γιατί δεν κάνεις κι εσύ κάτι τέτοιο;”

- Πρέπει να ήσουν εσύ Γεράσιμε! Ε;

Η συνέχεια είναι γνωστή. Μυστικά #zombo meetings, κουβέντα στην κουβέντα, έρευνα για το τι υπάρχει εκεί έξω και τι θα μπορούσε να υπάρξει – το περιγράφω άλλωστε κι εδώ αρκετά καλά - και 4 μήνες μετά το WireframePlus, αρμενίζει στα ανοιχτά. Οκ, μας πήρε λίγο παραπάνω  αλλά ξεκίνησε σαν Side Project, κάτι που σήμαινε πως όλος ο ελεύθερος χρόνος μας πήγαινε εκεί. Τον υπόλοιπο, κάπως έπρεπε να πληρώσουμε τους λογαριασμούς :}

Οι άνθρωποι και η εξέλιξη.

Σχετικά με το Development, χρειαζόμασταν ένα e-commerce σύστημα το οποίο αρχικά να δέχεται online πληρωμές μέσω paypal και όλα τα απαραίτητα στοιχεία που περιγράφονται παραπάνω, με τις συνοδευτικές διαδικασίες επαλήθευσης, ασφάλειας και φυσικά, έναν τρόπο ώστε όλο αυτό να το διαχειρίζομαι εγώ, εύκολα και γρήγορα.

Αφού εξέτασα πως με το WordPress ή το Expression Engine η δουλειά θα γινόταν πολύ δύσκολα, αποφάσισα πως χρειάζομαι ένα Custom CMS με e-commerce δυνατότητες και τι πιο δυνατό από το Code Igniter; Έτσι, κάθισα και έμαθα μέσα σε 2 εβδομάδες Code Igniter και δημιούργησα ένα τρελό back end.

Οκ, οκ! Δεν το έκανα εξ ολοκλήρου εγώ. Με βοήθησε και ο Γεράσιμος

ΟΚ! Το έκανε όλο μόνος του, ωωω! Πως κάνετε έτσι!  Εντάξει, πέρα από την πλάκα, ο τύπος είναι επικίνδυνος. Κάθισε και έγραψε ένα CMS από την αρχή σε Code Igniter.  Τώρα υπάρχει δηλαδή το WireframePlus CMS. Άντε γειά!

Σχετικά με το Design, αρχικά, ήταν αυτό

και συνεχίστηκε κάπως έτσι.

Μετά ήρθαν τα ελικοπτεράκια…

Εννοείται πως από το αρχικό Wireframe είχα αποφασίσει να υπάρχει η φόρμα.  Και το πρώτο αποτέλεσμα βγήκε κάπως έτσι. Το “what we do” αντικαταστάθηκε από το “how it works”,  το “Order” αφαιρέθηκε τελείως αφού υπάρχει η φόρμα παραγγελίας σε όλες τις σελίδες και αποφάσισα πως οι φανφάρες του στυλ “σχεδιάζουμε φοβερές σούπερ γουάο σελίδες”, είναι μεν καλές, αλλά ίσως θα είναι καλύτερα στον κεντρικό τίτλο της σελίδας να επικοινωνήσουμε ακριβώς αυτό που κάνει.

“Έχεις Wireframe; Θα στο σχεδιάσουμε!”

Αν με ρωτήσετε, ακόμη μου αρέσει η πρώτη έκδοση του WireframePlus. Όμως υπήρχαν κάποια προβλήματα που έπρεπε να διευθετηθούν. Το πρώτο ήρθε από τον Γεράσιμο που συνεχώς γκρινιάζει με τις σημασιολογικές παρατηρήσεις του και μου χαλάει τα designs.

“Μαργαρίτα; Αληθεια, Θάνο; ΜΑΡΓΑΡΙΤΑ; Κάνω πως δεν το είδα και περιμένω να βάλεις κάτι άλλο για slider handler.  Επίσης, ξεκινάς ωραία, λογότυπο – μενού – φόρμα και μετά πας στο thumbnail  και έχεις αφήσει το τι προσφέρεις στους πελάτες σου, τελευταίο. Αυτό είναι πιο σημαντικό από το mini showcase που έτσι κι αλλιώς έχεις ξεχωριστή σελίδα για αυτό. ΑΛΛΑΞΕ ΤΑ ΘΕΣΗ ΓΡΗΓΟΡΑ”.

Καταπίεση στο 100%. Αυτό ήταν, “η σελίδα μου καταστράφηκε” σκέφτηκα… “Πίσω από το thumbnail είναι ένα κενό. Αυτό το χρώμα που έχω επιλέξει. Αν βάλω 3 τίτλους ξερούς, χωρίς να τους πλαισιώνει κάτι άλλο, σχετικό με τη σελίδα, πάει!”

Κι όμως,  είχε δίκιο. Έπρεπε γρήγορα να σκεφτούμε κάτι.

“Τι ακριβώς κάνει η σελίδα; Ζητά το wireframe σου για να το μεταμορφώσει σε ένα όμορφο website design. Να το απογειώσει! Όπως τα ελικοπτεράκια προσπαθούν να πάρουν την τιμή και να φύγουν ( πραγματικά μάταιη προσπάθεια – τα ελικοπτεράκια είναι πολύ μικρότερα ), έτσι και εμείς προσπαθούμε να απογειώσουμε το project του πελάτη μας με ένα όμορφο design – και εμείς είμαστε πολύ μεγαλύτεροι (μην με κάνετε να δείξω φωτογραφία μου). Θα το σηκώσουμε ψηλά στα μάτια των πελατών του, ώστε να επιτύχει εύκολα τους στόχους του.

Όλο αυτό όμως ξεκινά από κάπου. Υπάρχει μια βάση για όλο αυτό. Θα πρέπει να είναι μυστική βάση. Ναι! Θα πρέπει να είναι κάπου κρυμένη στο βουνό ώστε να κάνει απρόσκοπτα τη δουλειά της. Κάπως έτσι (το ξέρω ότι μετά από αυτή την περιγραφή ίσως έχασα 2-3 πιθανούς πελάτες αλλά what the heck, it was worth it) ήρθε το παρακάτω:

That’s more like it! Wait a minute… Αυτό δε μιάζει με βάση. Μιάζει με ένα βουνό με δεντράκια.

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

1. Το βουνό δεν μιάζει με βάση. Εδώ ανέλαβε ο Γεράσιμος και παραμετροποίησε το βουνό κατάλληλα!

2. Το λογότυπο, αν και σχετικό με Wireframe και σχέδιο λόγω της γραμματοσειράς, δεν επικοινωνεί αυτό που πραγματικά προσφέρει αυτή η υπηρεσία.

Έτσι επιστρατεύσαμε την Ελένη. Η Ελένη είναι η πιο δυνατή logo designer που γνωρίζω και το αποτέλεσμα έκανε το δικό μου λογότυπο να βάλει τα κλάμματα και να φύγει. Όχι πως κι εγώ δεν είμαι δυνατός logo designer και είμαι πολύ καλύτερος από την Ελένη αλλά…. Εχμ, είχα πολλά στο μυαλό μου, έβρεχε, δεν άκουγα σωστή μουσική, ήμουν στεναχωρημένος, και άλλες δικαιολογίες.

Η Ελένη είναι το Ροζ μουστάκι. Δείτε τι σχεδιάζει στον ελεύθερο χρόνο της και θα καταλάβετε! Rock n roll designer.

Χρειαζόμασταν ένα λογότυπο λοιπόν, που μπορεί να επικοινωνήσει το μήνυμα της υπηρεσίας αλλά και να είναι memorable και να μπορεί να χρησιμοποιηθεί σε διαφημιστικά banners και άλλες web εφαρμογές για την προώθηση του website.

Το τελικό αποτέλεσμα μπορείτε να το δείτε στο live πλέον website, WireframePlus!

Τι λέτε; Σας άρεσε; :-}

Comments 8

8 Responses

Γιάννης

Καλή αρχή εύχομαι, έκανες / κάνατε πολύ ωραία δουλειά και η υπηρεσία σας είναι πολύ χρήσιμη για μεγάλη μάζα ανθρώπων

Basilakis

Δεν ξέρω εάν έχω πρόβλημα αλλά το διάβασα όλο! Και ζηλεύω για το WireFramePlus CMS!

Καλή αρχή Θάνο και μπράβο για τι δουλειά που κάνατε πάνω του!

klou

@Γιάννη

ευχαριστώ πολύ και χαίρομαι που βρίσκεις χρήσιμη την υπηρεσία!

@Basilakis

Σε ευχαριστώ Βασίλη!
εδώ που τα λέμε, ήταν λίγο υπερβολή να το διαβάσεις όολο :P
Το wireframeplus CMS είναι όντως αντικείμενο πόθου και ζήλιας! :}

Sugarenia

Κι εγώ το διάβασα όλο – αμέ.

Εκεί στα σχόλια του Γεράσιμου έσκασα στα γέλια. Όχι για τα σχόλια αυτά καθεαυτά, αλλά επειδή σαν να ‘βλεπα τη φάτσα σου την ώρα που τα διάβαζες / άκουγες.

Sad puppy eyes and all.

Καλές δουλειές Kloob!

klou

Sug@r!

lol κάπως έτσι!

Σε ευχαριστώ για τις ευχές :}

HitMan

Well done sir! & congrats to all involved parties :p

Είμαι σίγουρος ότι θα πετύχει το εγχείρημα, απολαυστικό το behind the scenes άρθρο!

Το έχω πάρει χαμπάρι πλέον: όπου συμμετέχει ο Γεράσιμος, έστω και για βρίζει, τα projects πάνε ένα σκαλί παραπάνω.

Το είπα και πιο πάνω ε; Θα πετύχει! Καλές δουλειές Θάνο. :D

PinkMoustache

Klou είσαι ο καλύτερος! Σ’αγαπάμε …αχ το είπα!

Πάω τώρα να παίξω με την φόρμα επικοινωνίας του WireframePlus και να στείλω ψεύτικη παραγγελία..χοχο!

Θα σκίσεις.

klou

@PinkMoustache

με κάνεις και κοκκινίζω, αλλά ναι, όντως είμαι ο καλύτερος ( hahah ) :}

@HitMan

σ’ευχαριστώ για τις ευχές φίλε!

Leave a comment

Follow me on twitter

I tweet interesting things about me, web design & NYC!