Daily UI Challenge #009

Behance link

Daily UI Challenge (#001-#008)

Πριν λίγο καιρό ανακάλυψα ή πιο σωστά αποφάσισα να ξεκινήσω (γιατί κακά τα ψέμματα είναι αρκετός καιρός που το πήρε το μάτι μου) το Daily UI Challenge.

Το Daily UI Challenge, λοιπόν αποτελεί στην ουσία ένα mailing list στο οποίο γράφεσαι και κάθε μέρα σου στέλνουν ένα task που αφορά UI/UX design. Οι προδιαγραφές για αυτό το task είναι αρκετά γενικές ώστε να δίνουν τη δυνατότητα στον καθένα να τις ερμηνεύει όπως επιθυμεί. 

Απώτερος στόχος του Daily UI Challenge είναι να αποτελέσει ένα διασκεδαστικό τρόπο για να βελτιώσεις τα skills σου και ταυτόχρονα να δώσει τη δυνατότητα να λάβεις feedback για τη δουλειά σου από άλλους designers που συμμετέχουν στο ίδιο challenge.

Παρακάτω έχω μαζεμένα τα πρώτα 8 tasks που ολοκλήρωσα, τα υπόλοιπα από εδώ και πέρα θα τα ανεβάζω σε δικό τους post.

Monday app - Get rid of bad habits

Το Monday είναι ένα app που ως βασικό στόχο έχει να βοηθήσει τους χρήστες να απεξαρτηθούν από τις κακές συνήθειες. Για να το πετύχει αυτό ακολουθεί δυο βασικές αρχές:

• Ο καλύτερος τρόπος να απεξαρτηθείς από μια κακιά συνήθεια είναι να την αντικαταστήσεις με κάποια καλή.

• Ο μέσος άνθρωπος χρειάζεται 66 μέρες για να υιοθετήσει μια καινούρια συνήθεια.

Boxmark it! - A cloud based bookmarking tool

Το Boxmark it! είναι ένα εργαλείο διαχείρισης bookmarks βασισμένο στο cloud. Η διαφορά του ωστόσο από τις υπόλοιπες αντίστοιχες λύσεις είναι πως η αποθήκευση και διατήρηση των δεδομένων δεν γίνεται σε κάποιον δικό μου server αλλά τα δεδομένα του κάθε χρήστη αποθηκεύονται και διατηρούνται στον προσωπικό του λογαριασμό Dropbox. 

Η μοναδική απαίτηση λοιπόν για να χρησιμοποιήσει κάποιος χρήστης το Boxmark it! είναι να διατηρεί λογαριασμό στο Dropbox και να εγκαταστήσει την αντίστοιχη εφαρμογή σε αυτόν. 

Algorithm Gallery - BSc thesis

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

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

Η εφαρμογή αυτή ονομάζεται Algorithm Gallery και είναι διαθέσιμη στη διεύθυνση: http://thesis.primitiveart.gr.

Νέο primitiveart logo

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

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

Primitiveart - personal site - 2013

Πριν περίπου έναν χρόνο αποφάσισα πως ήθελα να ανανεώσω την προσωπική μου ιστοσελίδα, έκατσα λοιπόν και υλοποίησα σε ένα πρώτο concept όλα αυτά που είχα στο μυαλό μου για το πως θα ήθελα να είναι. Το αποτέλεσμα ήταν το primitiveart.2012.

NEO URL - http://primitiveart.gr

Έχει αρκετό καιρό (χρόνια για την ακρίβεια) που ήθελα να αποκτήσω ένα κανονικό url και να πάψω να χρησιμοποιώ αυτά τα άσχημα που παρέχονται στις διάφορες υπηρεσίες hosting. Για κάποιον λόγο, που τώρα φαντάζει αδικαιολόγητος, το ανέβαλα συνεχώς μέχρι χθες που επιτέλους απέκτησα το δικό μου φυσιολογικό url.

Το http://primitiveart.gr είναι και επίσημα πλέον το νέο μου url που θα φιλοξενεί την προσωπική μου ιστοσελίδα (το blog θα συνεχίσει εδώ που είναι).

(Το http://primitiveart.net63.net θα συνεχίσει κανονικά να λειτουργεί, αλλά δεν θα δέχεται πλέον καμία αναβάθμιση περιεχομένου) 

primitiveart.2012

Έχω ξεκινήσει την επανασχεδίαση της προσωπικής μου ιστοσελίδας η οποία μετά από πολλές εκδόσεις είναι η πρώτη φορά που δεν ενσωματώνει ίχνος Flash. Για την ανάπτυξη της χρησιμοποιούνται JavaScript, jQuery, CSS, HTML...

Η ιστοσελίδα θα έχει και ειδική έκδοση για φορητές συσκευές με μικρή οθόνη της οποίας screenshot μπορείτε να δείτε παρακάτω. Την demo έκδοση για υπολογιστές μπορείτε να την βρείτε εδώ, ενώ την αντίστοιχη έκδοση για φορητές συσκευές εδώ, οι αλλαγές που θα γίνουν στην τελική έκδοση θα αφορούν το navigation μεταξύ των σελίδων (Αρχική, Ποιος είμαι και Που θα με βρείτε)...

Το concept της αχικής σελίδας μπορείτε να το βρείτε εδώ

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

Νέο προσωπικό λογότυπο-avatar

Μετά από αρκετό καιρό προχώρησα στην επανασχεδίαση του προσωπικού μου λογοτύπου. Το νέο λογότυπο είναι σχεδιασμένο με βασικό στόχο να παραπέμπει σε μια από τις γνωστότερες μορφές πρωτόγονης τέχνης (primitive art), τις σπηλαιογραφίες, από τις οποίες και είναι επηρεασμένο.

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

Light Theme

Dark Theme

Tablet UI concept - Lock Screen

Ένα concept που ολοκλήρωσα μέσα στην εβδομάδα και αφορά την μορφή της lock screen  σε ένα υποτιθέμενο tablet. Η μορφή βασίστηκε σε διάφορες ιδέες που είχα τον τελευταίο καιρό σχετικά με το πως θα επιθυμούσα το UI ενός tablet.

Όλα έχουν γίνει με την χρήση του Photoshop, ενώ για χάρη ταχύτητας έχω χρησιμοποιήσει για τα εικονίδια έτοιμα γραφικά από το iconfinder.com. Παρακάτω θα βρείτε ένα video με μια παρουσίαση των βασικών στοιχείων που έχω ετοιμάσει μέχρι τώρα. Για τις ανάγκες του video, αλλά και για καλύτερη κατανόηση των όσων έχω σκεφτεί έχω δημιουργήσει και ένα interactive demo σε flash (με περιορισμένες προφανώς δυνατότητες) που θα βρείτε εδώ. 

 

Αργότερα θα σχεδιάσω και πως φαντάζομαι το κεντρικό μενού, αλλά και κάποιες ακόμα λειτουργίες και αντίστοιχα θα υπάρξουν εικόνες, video και interactive demos...

Interactive Demo

Primitiveart Personal Website

Εδώ και λίγες εβδομάδες ολοκλήρωσα την ανάπτυξη της προσωπικής μου ιστοσελίδας (Primitiveart) η οποία βασίζεται στο Primitiveart.2009 concept που είχα παρουσιάσει παλιότερα. Οι διαφορές της τελικής έκδοσης με το concept δεν περιορίζονται μόνο στην εισαγωγή του τελικού περιεχομένου αλλά υπάρχουν αλλαγές και στο user interface με στόχο μια πιο ολοκληρωμένη εμπειρία χρήσης από την πλευρά του επισκέπτη.
(Μέσα στο post υπάρχει μεγαλύτερη ανάλυση της ιστοσελίδας και screenshots)

Personal websites 2004-2008 (video)

Ένα video που ετοίμασα με όλα τα προσωπικά μου websites (εκτός του τελευταίου που είναι online) από το 2004 μέχρι και το 2008 και με όλα τα ενδιάμεσα concepts που ανέπτυξα. Από το video απουσιάζει το πρώτο μου website που χάθηκε στο πέρασμα των χρόνων καθώς και όλα τα concepts που δεν έφτασαν ποτέ σε κάποια interactive μορφή.

Gadget mockup Photoshop

Η παρακάτω εικόνα αποτελεί μια προσπάθεια μου να σχεδιάσω κάτι που δεν έχω ξαναδοκιμάσει ποτέ, το mockup ενός gadget (mp3 player στην προκειμένη) με την χρήση Photoshop. Η σχέση μου με το Photoshop είναι πολύ καλή όσον αφορά την σχεδίαση interfaces για websites, ωστόσο η σχεδίαση real life (ας μου επιτραπεί η έκφραση) αντικειμένων είναι κάτι το τελείως άγνωστο για εμένα που ασχολήθηκα καθαρά και μόνο από περιέργεια μαζί του για μια φορά.  

UPDATE: Το συγκεκριμένο post αναρτήθηκε και από το techblog.gr για να δείτε το σχετικό post πατήστε εδώ.

Red and Green 3D (Μια απόπειρα)

Η πρώτη μου απόπειρα για δημιουργία 3D εικόνας με την χρήση της τεχνικής Red and Green. Η δυσκολία στο όλο εγχείρημα ήταν το πως έπρεπε να τροποποιήσω την αρχική εικόνα ώστε να προσωμοιώνει με τον καλύτερο δυνατό τρόπο πως αντιλαμβάνονται την εικόνα το αριστερό και το δεξί μάτι. Μετά από λίγη ώρα και αρκετό ανοιγοκλείσιμο των ματιών, κοιτώντας κάποιο αντικείμενο μπροστά μου, έκανα τις απαραίτητες αλλαγές στις δύο εικόνες (left, right) που στην συνέχεια ενώθηκαν για να συνθέσουν το τελικό αποτέλεσμα.

Η εικόνα αποτελείται από 3 επίπεδα, το φόντο, το σχήμα και το κείμενο και για να δοθεί η ψευδαίσθηση του τρισδιάστατου το τελευταίο επίπεδο (το φόντο) μένει απαράλλαχτο στις  δυο εικόνες, το μεσαίο επίπεδο (το σχήμα) έχει μικρές διαφορές, ενώ το πρώτο επίπεδο (το κείμενο) διαφέρει αρκετά μεταξύ left και right.

Pinboard Guestbook Concept

Ένα concept που ξεκίνησα αρχές του 2009 (και οφείλω να ομολογήσω πως δεν το προχώρησα καθόλου πάνω από χρόνο τώρα) και αφορά σε ένα διαφορετικό από τα συνηθισμένα guestbook, ξέρετε τα γνωστά σε όλους μας βιβλία επισκεπτών στα οποία μπορείτε να αφήσετε τα σχόλια σας για την εκάστοτε ιστοσελίδα.

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

Το project δεν υπάρχει on line ωστόσο ακολουθεί video (για ακόμα μια φορά τα κολλήματα είναι πρόβλημα της βιντεοσκόπησης):

Primitiveart2009 Personal Website Concept

Ένα concept για την προσωπική μου ιστοσελίδα, αναπτύσσεται καιρό τώρα και έχει περάσει από πολλά στάδια. Στόχος δεν είναι τόσο η ολοκλήρωση της και χρήση της όσο η εκμάθηση και η δοκιμή κάποιων ιδεών που έχω. Η σελίδα βρίσκεται σε λειτουργία και μπορείτε να την δείτε πατώντας το σχετικό link στην sidebar του blog ή εδώ (απαιτείται flash player plugin).


Ακολουθεί ένα video με σύντομη παρουσίαση της(τα κολλήματα είναι θέμα βιντεοσκόπησης):

myOS.87 Wallpapers

7 διαφορετικά wallpaper για το myOS.87 (όλα εκτός από το πρώτο είναι από το interface lift). Η βασική ιδέα είναι με χρήση JavaScript να εναλλάσσονται ανά κάποιο χρονικό διάστημα.

myOS.87 Menu Concept 2

Νέο menu concept πιο κοντά σε αυτό που έχω στο νου μου για το myOS.87 με κανονικό background αυτήν την φορά (εικόνα από το internet με κάποια επεξεργασία στο photoshop).

Η λογική του menu είναι πάλι η ίδια, να υπάρχουν άμεσα διαθέσιμες όλες εκείνες οι εφαρμογές που χρησιμοποιώ σε καθημερινή βάση. Είναι χωρισμένο σε 4 κατηγορίες (media, web, organizer, folders) με άμεσα προσβάσιμες εφαρμογές στις 3 πρώτες music, safari και calendar αντίστοιχα, ενώ δίπλα το εικονίδιο που φαίνεται ανοίγει φάκελο που περιέχει τις λοιπές σχετικές εφαρμογές.

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

myOS.87 Menu Concept

Φάση δεύτερη στην ανάπτυξη του myOS.87 και πέρασα στην σχεδίαση της κεντρικής οθόνης ή menu για όσους προτιμούν. Οι επιρροές από τα ui των windows phone 7 series, zune hd και playstation 3 είναι κάτι παραπάνω από εμφανής...

Στόχος ήταν η δημιουργία ενός ui πιο κοντινού στα γούστα μου και σε αυτό που θα ήθελα σε ένα music player.Το μενού είναι θεωρητικά χωρισμένο σε 4 ενότητες (media, internet, organizer, folders) που ξεχωρίζουν μεταξύ τους με την χρήση διαφορετικών και μεγαλύτερων εικονιδίων για τις βασικές εφαρμογές κάθε κατηγορίας. Τέλος στην κάτω δεξιά γωνία έχει τοποθετηθεί μια stack που περιέχει όλες τις εφαρμογές που αφορούν την παραμετροποίηση της συσκευής.