3.2 Το λογισμικό (software) 

[63] 

 

 

Εικόνα 3.6: Βέλτιστος τρόπος σχεδιασμού μίας εφαρμογής 

 
Μετά την σύλληψη μίας ιδέας, σχεδιάζεται ένα πρόχειρο σκίτσο σε 

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

Στο  παραπάνω  διάγραμμα,  μετά  την  ιδέα  ακολουθούν  τα  βήματα 

σχεδιασμού  μέχρι  την  περαιτέρω  ανάπτυξη  (development)  της 
εφαρμογής. Θα αναπτύξουμε λίγο αναλυτικότερα τί είναι κάθε βήμα και 
πώς μας βοηθάει στη βέλτιστη δημιουργία των σχεδίων (design) μας: 

Sketch (Σκίτσο) 
Το  σκίτσο  γίνεται  συνήθως  με  χαρτί  και  μολύβι  ή  με  κάποιο  tabler 

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

Wireframe (Σκελετός) 
Το  wireframe,  που  ακολουθεί,  είναι  ουσιαστικά  το  “ντύσιμο”  των 

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

Mockup (Τo πραγματικό σχέδιο) 
Τέλος το mockup είναι το πραγματικό look and feel της εφαρμογής. 

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