Η σημασία του Wireframing πρίν το design

VN:F [1.9.22_1171]
Rating: 0.0/5 (0 votes cast)
FavoriteLoadingΠροσθήκη στα Αγαπημένα μου
11/04/2013 από
RsS

Τι είναι ένα Wireframe

Το Wireframe είναι ένα χαμηλού επιπέδου σχεδιάγραμμα (προσχέδιο, σκελετός, blueprint) του design μας, το οποίο μας βοηθάει τόσο εμάς όσο και τους πελάτες μας, να δούμε την δομή και την αίσθηση που αφήνει ο σχεδιασμός μας. Στα wireframes αναπαράγουμε τα στοιχεία όλης της σελίδας στις πραγματικές τους διαστάσεις και μεγέθη, αλλά παρόλα αυτά δεν περιέχει γραφιστικά στοιχεία. Απλά την θέση που θα πάρουν στον τελικό σχεδιασμό.

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


Η βέλτιστη διαδικασία design

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

proccess

Μετά την επικοινωνία της ιδέας, σχεδιάζεται ένα πρόχειρο σκίτσο σε χαρτί και αφού επικοινωνηθεί το σκίτσο, περνάμε σε wireframe. Εδώ υπάρχει όλο το περιθώριο για αλλαγές, διορθώσεις και προσθήκες. Αφού κλείσουμε και συμφωνίσουμε στο wireframe, τότε έρχεται η σειρά του mockup, που ουσιαστικά είναι το “ντύσιμο” του wireframe με γραφικά, χρώματα, εικονίδια και οτιδήποτε άλλο συνοδεύει το design. Τέλος το mockup περνάει σε επίπεδο development.

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


Ανάλυση των βημάτων

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

SKETCH (ΣΚΙΤΣΟ)

Το σκίτσο (συνήθως με χαρτί και μολύβι ή με κάποιο tabler) μας βοηθάει να βρούμε γρήγορα και εύκολα την βάση του σχεδίου μας. Μας βοηθάει να επικοινωνήσουμε τον αρχικό σχεδιασμό της σελίδας και την δομή της. Επίσης στο σκίτσο μπορούμε να επεξεργαστούμε το σχέδιο μας πάρα πολύ εύκολα με γόμα.

WIREFRAME (ΣΚΕΛΕΤΟΣ)

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

MOCKUP (ΤΟ ΠΡΑΓΜΑΤΙΚΟ ΣΧΕΔΙΟ)

Τέλος το mockup είναι το πραγματικό look and feel της ιστοσελίδας. Χρώματα, fonts, στοιχεία, icons και ότι άλλο συνοδεύει το design έρχονται και δένουν με τον σκελετό της σελίδας.


10 Δωρεάν Εργαλεία Wireframe

Παρακάτω θα δούμε μια λίστα από 10 δωρεάν εργαλεία wireframing που θα σας βοηθήσουν να φτιάξετε γρήγορα και έυκολα τα δικά σας wireframes. Η λίστα αυτή είναι μια πρόταση του mashable.com


1. Mockingbird

Mockingbird


2. Lovely Charts

LovelyCharts


3. Cacoo

Cacoo


4. Gliffy

Gliffy


5. Lumzy

Lumzy


6. Mockflow

Mockflow


7. Pencil Project

Pencil


8. SimpleDiagrams

SimpleDiagrams


9. Denim

Denim


10. Website Wireframe

WebsiteWireframe


Εσείς έχετε χρησιμοποιήσει κάποιο από τα παραπάνω wireframes; Ποια θεωρείτε πως είναι η ανάγκη και η σημασία των wireframes;











Σχόλια

Δεν υπάρχουν σχόλια ακόμα.

Αφήστε ένα σχόλιο

 






RSS για τα σχόλια σε αυτό το άρθρο.  |  TrackBack URL



 
 
 

Eταιρείες παροχής υπηρεσιών διαδικτύου




 

Το Όραμά Μας

3d2 3d2

Η νέα εποχή ξεκινάει…

Είστε έτοιμοι;

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

Ξεκινάμε μια νέα εποχή για τα Ελληνικά δεδομένα. Κοιτάμε μπροστά και οραματίζομαστε το μέλλον με αισιοδοξία σε μία πολύ δύσκολη εποχή!

Αν είστε digital artist (web designer. web developer, programmer, 3d animator, graphic designer κτλ)  δώστε λίγα λεπτά από τον χρόνο σας να διαβάσετε το παρακάτω άρθρο. Σίγουρα σας ενδιαφέρει

 
web design forum

  • Προσεγγίστε νέους αναγνώστες και φίλους
  • Αποκτήστε το δικαίωμα να προωθήστε την σελίδα σας μέσω διαφημιστικών banner στο web design forum
  • Αποκτήστε συνδέσμους και backlinks δωρεάν
  • Αυτόματη προωθηση του άρθρου σας, σε διάφορες ιστοσελίδες κοινωνικής δικτύωσης.