Συμβουλές για καλύτερο design

[DimitrisLiar]

Σε λίγο καιρό θα είναι έτοιμη η πλατφόρμα που στήνω με smartphone & desktop wallpapers.

Σχεδιαστηκά θα ήθελα τι μπρώ να προσθέσω για να το κάνει πιο ενδιαφέρον !

Παραθέτω βίντεο

και η ιστοσελίδα

https://www.ontelica.com/

 

Παρακαλώ επειδή το project θα πάρει μέρος στο madewithlaravel οι προτάσεις να είναι ουσιαστικές.

(*Το μόνο που δεν δουλέυει ακόμα είναι να επιλέξεις ενα wallpaper και να το κάνεις download)

[kontinos]

Δεν εχεις πεδιο αναζητησης, δεν εχεις κατηγοριες.

[DimitrisLiar]

1 λεπτό πριν, kontinos είπε

Δεν εχεις πεδιο αναζητησης, δεν εχεις κατηγοριες.

Κατηγορίες δεν θα υπάρχουν, αλλά αναζήτηση σίγουρα θα πρέπει να έχει! Θα το στήσω με elastic search . Σε ευχαριστώ για το χρόνο σου 

[XPHSTOS_]

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

1) Γραμματοσειρά.
Βλέπω παίζεις με Αγγλικά άρα δεν μπορείς να βάλεις μια πιο ιδιαίτερη και λιγότερο βαρετή από τις default Sans Serif του εκάστοτε συστήματος.
Στο παράδειγμα μου έχω βάλει την Poppins (Google Fonts)
Αμέσως θα πάρει έναν άλλο χαρακτήρα η σελίδα.

2) Μενού.
Δεν χρειάζεσαι κάποια μπάρα να στέκονται τα αντικείμενα, στοχεύεις σε ένα αρκετά clean layout και δεν χρειάζεσαι μπάρες και σκιές και δεν χρειάζεσαι το Home link.
Ο κόσμος πλέον είναι αρκετά εξοικειωμένος με το home link να βρίσκεται στο logο.
Πόσο μάλλον το "κοινό" σου που την "ψάχνει" με artistic wallpapers.
Η λέξη "wallpapers" επαναλαμβάνεται και δεν χρειάζεται... και φτάνουμε στο button.
Πρόσεξε τα rounded corners στο button. Στο δικό σου είναι ένα "τυχαίο" .25rem και στο δικό μου 12px (κράτα το αυτό).

3) Το container του site σου είναι 1140px κάτι το οποίο δείχνει κάπως καλό στην τριάδα με τα wallpapers αλλά όχι στα κείμενα τα οποία τρέχουν από την μια άκρη στην άλλη.
Ο τίτλος είναι οκ που χωράει σε μια σειρά αλλά το κείμενο από κάτω είναι λίγο "κουραστικό".
Επίσης είναι πολύ λεπτό το font και σε μια μη retina οθόνη ή σε κάποιο windows machine με κακό scalling το font-weight και το font-color το καθιστούν επίσης δύσκολο στο να διαβαστεί.
Επίσης δεν χρειάζεσαι αυτό το divider (<hr>), το οποίο μόνο άχρηστο margin προσδίδει και ενώ έχεις 64px padding πάνω κάτω από το κείμενο σου η κάτω πλευρά λόγο των margin από το p & hr δείχνει μεγαλύτερο και συνεπώς χαλάει την οπτική ισορροπία.

4) Πάμε στις κάρτες με τα wallpapers. 
Εδώ είμαστε καλά. Το μόνο που έκανα είναι να μικρύνω το username, να αφαιρέσω το created by (γιατί ο άλλος απλά το ανέβασε δεν ξέρεις αν είναι και ο δημιουργός, καλό θα ήταν να ήταν link αυτό και να μπορούσε κάποιος να δει όλα τα uploads από κάποιο συγκεκριμένο χρήστη) και τέλος πρόσθεσα την ημερομηνία του upload.
Επίσης θέλω να προσέξεις το border radius που έχεις στις εικόνες σου εδώ.
Πάλι υπάρχει ένα "τυχαίο" 35px το οποίο δείχνει πραγματικά πολύ υπερβολικό και δεν έχει κάποια συνάφεια με κάποιο άλλο element στην σελίδα.
Στο παράδειγμα μου έβαλα 24px το οποίο είναι το 2πλάσιο του 12px που χρησιμοποίησα στα buttons.
Τέλος ενώ το layout σου κάθεται καλά, το ασύμμετρο κενό που υπάρχει μεταξύ των καρτών δημιουργεί μια οπτική σύγχυση.
Η 1η κάρτα είναι πιο κοντά με την 1η κάρτα της 2η γραμμής παρά με την 2η κάρτα της 1ης γραμμής.
Το μάτι αυτόματα "πέφτει" πάνω στην 1η εικόνα της 1ης γραμμής μετά στην 1η εικόνα της 2ης γραμμής μετά στην 2η εικόνα της 1ης γραμμής κ.ο.κ.
Κάνει ένα κάθετο ζιγκ-ζαγκ που δεν συνηθίζεται..
Στο παράδειγμα μου όλες οι αποστάσεις είναι ίσες (32px)
Φτάνουμε στις κάρτες με τα wallpapers για desktops...
Εδώ ο τίτλος των καρτών αυτών είναι σχεδόν κολλημένος με την τελευταία σειρά από τις προηγούμενες κάρτες!
Δώσε "αέρα" να αναπνεύσει το κάθε section. 
Στο παράδειγμα μου κάθε section έχει απόσταση 96px από τα γύρω του.

5) Τέλος το footer.
Τα links είναι αρκετά "σκόρπια" μεταξύ τους και χάνεται η ιδέα της ομαδοποίησης τους.

Αν πρόσεξες όλα μου τα νούμερα είναι πολλαπλάσια του 8.
Αυτό συμβαίνει γιατί το grid που χρησιμοποίησα είναι το 8px grid system.
Αν χρησιμοποιηθεί σωστά προσφέρει μια οπτική ισορροπία στο layout μας.
Μπορεί να ακούγεται ασήμαντο αλλά το ανθρώπινο μάτι και ο εγκέφαλος είναι πάρα πολύ καλά όργανα στο να βρίσκουν patterns.
Τέτοιες μικρές λεπτομέρειες στα designs είναι που μπορούν να ισορροπήσουν ή να γκρεμίσουν εντελώς μια σύνθεση.
Μπορείς να διαβάσεις περισσότερα για το 8 point grid system εδώ: (https://builttoadapt.io/intro-to-the-8-point-grid-system-d2573cde8632)

Επίσης προστέθηκαν links "see more" στην αρχή του κάθε section για την πιο εύκολη πλοήγηση του χρήστη στην εκάστοτε "κατηγορία" καθώς και ένα dark mode καθότι ζούμε στο 2019 και τίποτα δεν βγαίνει χωρίς dark mode 😜😜
JK, that was just for fun.

Α! Κάτι τελευταίο, τα χρώματα σου!
Το χρώμα στο upload button είναι ένα ξένο χρώμα στο design.
Χρησιμοποίησε χρώματα που υπάρχουν ήδη στην παλέτα σου ή πιο σκούρες/ανοιχτές αποχρώσεις των χρωμάτων αυτών για μεγαλύτερη ομοιογένεια.
Το χρώμα στο button είναι ένας τόνος πιο σκούρος από αυτόν του τριγώνου στο λογότυπο.
All-and-all είναι καλή η προσπάθεια απλά θέλει "γυάλισμα" στις λεπτομέρειες...

Light Version Better Quality Image
Dark Version: Better Quality Image

Επεξ/σία 20 Νοεμβρίου 2019 από XPHSTOS_

[DimitrisLiar]

9 ώρες πριν, XPHSTOS_ είπε

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

1) Γραμματοσειρά.
Βλέπω παίζεις με Αγγλικά άρα δεν μπορείς να βάλεις μια πιο ιδιαίτερη και λιγότερο βαρετή από τις default Sans Serif του εκάστοτε συστήματος.
Στο παράδειγμα μου έχω βάλει την Poppins (Google Fonts)
Αμέσως θα πάρει έναν άλλο χαρακτήρα η σελίδα.

2) Μενού.
Δεν χρειάζεσαι κάποια μπάρα να στέκονται τα αντικείμενα, στοχεύεις σε ένα αρκετά clean layout και δεν χρειάζεσαι μπάρες και σκιές και δεν χρειάζεσαι το Home link.
Ο κόσμος πλέον είναι αρκετά εξοικειωμένος με το home link να βρίσκεται στο logο.
Πόσο μάλλον το "κοινό" σου που την "ψάχνει" με artistic wallpapers.
Η λέξη "wallpapers" επαναλαμβάνεται και δεν χρειάζεται... και φτάνουμε στο button.
Πρόσεξε τα rounded corners στο button. Στο δικό σου είναι ένα "τυχαίο" .25rem και στο δικό μου 12px (κράτα το αυτό).

3) Το container του site σου είναι 1140px κάτι το οποίο δείχνει κάπως καλό στην τριάδα με τα wallpapers αλλά όχι στα κείμενα τα οποία τρέχουν από την μια άκρη στην άλλη.
Ο τίτλος είναι οκ που χωράει σε μια σειρά αλλά το κείμενο από κάτω είναι λίγο "κουραστικό".
Επίσης είναι πολύ λεπτό το font και σε μια μη retina οθόνη ή σε κάποιο windows machine με κακό scalling το font-weight και το font-color το καθιστούν επίσης δύσκολο στο να διαβαστεί.
Επίσης δεν χρειάζεσαι αυτό το divider (<hr>), το οποίο μόνο άχρηστο margin προσδίδει και ενώ έχεις 64px padding πάνω κάτω από το κείμενο σου η κάτω πλευρά λόγο των margin από το p & hr δείχνει μεγαλύτερο και συνεπώς χαλάει την οπτική ισορροπία.

4) Πάμε στις κάρτες με τα wallpapers. 
Εδώ είμαστε καλά. Το μόνο που έκανα είναι να μικρύνω το username, να αφαιρέσω το created by (γιατί ο άλλος απλά το ανέβασε δεν ξέρεις αν είναι και ο δημιουργός, καλό θα ήταν να ήταν link αυτό και να μπορούσε κάποιος να δει όλα τα uploads από κάποιο συγκεκριμένο χρήστη) και τέλος πρόσθεσα την ημερομηνία του upload.
Επίσης θέλω να προσέξεις το border radius που έχεις στις εικόνες σου εδώ.
Πάλι υπάρχει ένα "τυχαίο" 35px το οποίο δείχνει πραγματικά πολύ υπερβολικό και δεν έχει κάποια συνάφεια με κάποιο άλλο element στην σελίδα.
Στο παράδειγμα μου έβαλα 24px το οποίο είναι το 2πλάσιο του 12px που χρησιμοποίησα στα buttons.
Τέλος ενώ το layout σου κάθεται καλά, το ασύμμετρο κενό που υπάρχει μεταξύ των καρτών δημιουργεί μια οπτική σύγχυση.
Η 1η κάρτα είναι πιο κοντά με την 1η κάρτα της 2η γραμμής παρά με την 2η κάρτα της 1ης γραμμής.
Το μάτι αυτόματα "πέφτει" πάνω στην 1η εικόνα της 1ης γραμμής μετά στην 1η εικόνα της 2ης γραμμής μετά στην 2η εικόνα της 1ης γραμμής κ.ο.κ.
Κάνει ένα κάθετο ζιγκ-ζαγκ που δεν συνηθίζεται..
Στο παράδειγμα μου όλες οι αποστάσεις είναι ίσες (32px)
Φτάνουμε στις κάρτες με τα wallpapers για desktops...
Εδώ ο τίτλος των καρτών αυτών είναι σχεδόν κολλημένος με την τελευταία σειρά από τις προηγούμενες κάρτες!
Δώσε "αέρα" να αναπνεύσει το κάθε section. 
Στο παράδειγμα μου κάθε section έχει απόσταση 96px από τα γύρω του.

5) Τέλος το footer.
Τα links είναι αρκετά "σκόρπια" μεταξύ τους και χάνεται η ιδέα της ομαδοποίησης τους.

Αν πρόσεξες όλα μου τα νούμερα είναι πολλαπλάσια του 8.
Αυτό συμβαίνει γιατί το grid που χρησιμοποίησα είναι το 8px grid system.
Αν χρησιμοποιηθεί σωστά προσφέρει μια οπτική ισορροπία στο layout μας.
Μπορεί να ακούγεται ασήμαντο αλλά το ανθρώπινο μάτι και ο εγκέφαλος είναι πάρα πολύ καλά όργανα στο να βρίσκουν patterns.
Τέτοιες μικρές λεπτομέρειες στα designs είναι που μπορούν να ισορροπήσουν ή να γκρεμίσουν εντελώς μια σύνθεση.
Μπορείς να διαβάσεις περισσότερα για το 8 point grid system εδώ: (https://builttoadapt.io/intro-to-the-8-point-grid-system-d2573cde8632)

Επίσης προστέθηκαν links "see more" στην αρχή του κάθε section για την πιο εύκολη πλοήγηση του χρήστη στην εκάστοτε "κατηγορία" καθώς και ένα dark mode καθότι ζούμε στο 2019 και τίποτα δεν βγαίνει χωρίς dark mode 😜😜
JK, that was just for fun.

Α! Κάτι τελευταίο, τα χρώματα σου!
Το χρώμα στο upload button είναι ένα ξένο χρώμα στο design.
Χρησιμοποίησε χρώματα που υπάρχουν ήδη στην παλέτα σου ή πιο σκούρες/ανοιχτές αποχρώσεις των χρωμάτων αυτών για μεγαλύτερη ομοιογένεια.
Το χρώμα στο button είναι ένας τόνος πιο σκούρος από αυτόν του τριγώνου στο λογότυπο.
All-and-all είναι καλή η προσπάθεια απλά θέλει "γυάλισμα" στις λεπτομέρειες...

Light Version Better Quality Image
Dark Version: Better Quality Image

 

Σε ευχαριστώ πάρα πολύ η βοήθεια σου ήταν πολύ σημαντική και ουσιώδη πάνω σε αυτό που ήθελα.

Σε ευχαριστώ και για τον χρόνο που διέθεσες για να μου παρουσιάσεις τις ιδέες σου οι οποίες μου άρεσαν αρκετά και τις εφάρμοσα.

Σου παρουσιάζω τις αλλαγές τις οποίες ανέβασα και live https://www.ontelica.com/

 

 

 

 

[kosnik]

Any reason να φορτώνει full hd εικονα για να δείχνεις  thubmnail? (εστω κι αν ειναι σχετικά μεγάλο το thumb)

[XPHSTOS_]

42 minutes ago, kosnik said:

Any reason να φορτώνει full hd εικονα για να δείχνεις  thubmnail? (εστω κι αν ειναι σχετικά μεγάλο το thumb)

Πάνω σε αυτό που λέει ο @kosnik, πρόσεξε οι εικόνες σου να έχουν το setting progressive κατά το σώσιμο τους έτσι ώστε να μην φορτώνουν τμηματικά και φαίνεται σπασμένο.
Επίσης πέρα από διαφορετικά μεγέθη για thumbnail και original size,  δες αν μπορείς αν σερβίρεις και διαφορετικά format, πιο συγκεκριμένα webP για τους browser που το υποστηρίζουν.

[DimitrisLiar]

38 λεπτά πριν, XPHSTOS_ είπε

Πάνω σε αυτό που λέει ο @kosnik, πρόσεξε οι εικόνες σου να έχουν το setting progressive κατά το σώσιμο τους έτσι ώστε να μην φορτώνουν τμηματικά και φαίνεται σπασμένο.
Επίσης πέρα από διαφορετικά μεγέθη για thumbnail και original size,  δες αν μπορείς αν σερβίρεις και διαφορετικά format, πιο συγκεκριμένα webP για τους browser που το υποστηρίζουν.

 Σκέφτομαι να στήσω στο upload να κάνεις resize την εικόνα με βάση αν είναι για mobile ή desktop.

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

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

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

[kosnik]

4 λεπτά πριν, DimitrisLiar είπε

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

Αυτη είναι η σωστή πρακτική. Κατα το upload save την original image και ένα (ή όσα νομίζεις οτι χρειαζεσαι) thumbnails. Δες τα max width των εικόνων που δείχνεις στα διάφορα responsive breakpoints και αποφάσισε για τα thumb sizes που χρειάζεσαι.

[DimitrisLiar]

17 λεπτά πριν, kosnik είπε

Αυτη είναι η σωστή πρακτική. Κατα το upload save την original image και ένα (ή όσα νομίζεις οτι χρειαζεσαι) thumbnails. Δες τα max width των εικόνων που δείχνεις στα διάφορα responsive breakpoints και αποφάσισε για τα thumb sizes που χρειάζεσαι.

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

 

[XPHSTOS_]

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

@DimitrisLiar
Είδα τις αλλαγές στο site.
Όλα οκ.
Απλά υπάρχει πάλι αυτό λευκό background στο header και επειδή είναι με το ζόρι ορατό, στο desktop μου, φαντάζομαι ότι σε ένα laptop με χαμηλότερη φωτεινότητα και γενικά ποιότητα οθόνης τότε παίζει να μην φαίνεται καν.
Οπότε απλά προτείνω να φύγει εντελώς. 

Επίσης το συγκεκριμένο πράσινο δεν γράφει καλά με λευκά γράμματα και δεν περνάει το accessibility test.
Ευτυχώς όμως ο Chrome δείχνει πότε περνάει το test το χρώμα των γραμματών.
Οπότε είτε αλλάζεις το background σε μια πιο σκούρα απόχρωση του πράσινου είτε αλλάζεις το χρώμα στο κείμενο.

Τέλος δώσε λίγο "ζωή" στο έργο με μερικές απλές κινήσεις στα hover, από τα buttons και τα links ή και τις κάρτες με τα wallpaper.
πχ. τα cards θα μπορούσαν να είχαν μια ελαφριά κίνηση με το https://gijsroge.github.io/tilt.js/ 

[Predatorkill]

Αν θελεις το sharing στο facebook να μην χρειαζεται να επισκεφτει εστω και ενας το λινκ ωστε να δειξει τη φωτο τοτε θα πρεπει να φερνεις και τις διαστασεις της φωτογραφιας και να τις βαζεις στο og tag.

just my 2 cents, πολυ καλη προσπαθεια.

Επεξ/σία 20 Νοεμβρίου 2019 από Predatorkill