10 design tips για developers

10 πράγματα που τουλάχιστον πρέπει να γνωρίζεις ότι υπάρχουν και ίσως πρέπει να ασχοληθείς μαζί τους.

Join Slack

──────────────┐
White Space

♥ Why whitespace matters

♥ Whitespace in Web Design: What It Is and Why You Should Use It

♥ Whitespace

♥ Why White Space Is Crucial To UX Design

♥ Improve Your User Experience with This Simple Design Trick

──────────────┐
Vertical Rhythm

♥ Harmonious Typography and Grids

♥ Why is Vertical Rhythm an Important Typography Practice?

♥ 4 Simple Steps to Vertical Rhythm

♥ Setting Type on the Web to a Baseline Grid

♥ Compose to a Vertical Rhythm

──────────────┐
Typography

♥ Typography Handbook

♥ Type study: Typographic hierarchy

$ Typographic Hierarchy: Weight, Style, Size, and Position

♥ Typography

♥ Typographic Hierarchy

──────────────┐
Color

♥ A Simple Web Developer's Color Guide

♥ Color Theory: Brief Guide For Designers.

♥ How to Use the Psychology of Color to Increase Website Conversions

──────────────┐
Grid

♥ Building Better UI Designs With Layout Grids

♥ Grids in Graphic and Web Design

♥ Basic concepts of grid layout

♥ A Complete Guide to Grid

♥ How we adopted CSS Grid at scale

──────────────┐
Consistent Voice

♥ 6 reasons to design a voice and tone for your digital product

──────────────┐
Iconography

♥ Designing For User Interfaces: Icons As Visual Elements For Screen Design

♥ Bad Icons: How to Identify and Improve Them

──────────────┐
Forms

♥ Designing Efficient Web Forms: On Structure, Inputs, Labels And Actions

♥ U.S. Web Design System - Forms

──────────────┐
Style guides

__

Ποιός είσαι;

WordPress; Τι είναι αυτό;

WordPress themes; Αυτό πάλι, τι είναι;

Και τα δικά σου themes, που τα βρίσκουμε;

__

[akis_man]

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

[grigorischaram]

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

[foteinikollia]

Μπράβο Γεράσιμε πολύ καλή προσέγγιση. Ακόμα και αν κάποιος δεν είναι designer πρέπει να έχει μια ιδέα όχι μόνο για το αισθητικό κομμάτι αλλά και για το πόσο εύχρηστο θα είναι εν τέλει αυτό που θα δημιουργήσει. Θα ρίξω σε αυτό το σημείο μια ιδέα για βίντεο μιας και αναφερθηκα σε ευχρηστία. Πόσο εφικτό είναι να έχουμε ένα όμορφο site το οποίο όμως να είναι και 100% accessible από όλους? (άτομα με προβληματα όρασης, κινητικότητας, κλπ). Με λύπη μου διαπιστώνω πως σε πολλά site, ενώ είναι πανέμορφα, είναι και δύσχρηστα για κάποιον που θα θέλει να τα "διαβάσει" και να κάνει το οποιοδήποτε interaction χρησιμοποιώντας screen reader.

[ThanosNokas]

Καλές και πρακτικές συμβουλές!

Ένας σχετικά εύκολος τρόπος να τα δεις όλα αυτά μαζί (και πολλά περισσότερα) είναι να κάτσεις να διαβάσεις τα design guidelines που έχουν βγάλει ήδη μεγάλα projects, καθώς εξηγούν το σκεπτικό πίσω από κάθε επιλογή.


Όχι απαραίτητα για να τους αντιγράψεις, αλλά για να μάθεις πως θα κάνεις το δικό σου και γιατί.

[georgeblack]

Κάτι που μπορείς να θίξεις και να πεις τη γνώμη σου ως designer: τα τελευταία χρόνια υπάρχει μια τάση στο design που θέλει τις σελίδες να αποτελούνται από μεγάλα rows-sections με πολύ κενό χώρο και ελάχιστο περιεχόμενο. Αυτή η προσέγγιση έχει σαν αποτέλεσμα να πρέπει ο χρήστης για να βρει αυτό που θέλει να κάνει συνεχώς scrolling πάνω-κάτω. Εγώ το βρίσκω πολύ εκνευριστικό και μου δημιουργεί την εντύπωση ότι λόγω έλλειψης περιεχομένου προσπαθούν να γεμίσουν το χώρο με αυτή την τεχνική. Αυτό που περιγράφω παρατηρείται συνήθως σε WordPress sites με χρήση κάποιου έτοιμου theme.

[georgeblack]

Στο θέμα με το grid, έχω την αίσθηση (ως χρήστης περισσότερο) ότι σήμερα η πλειονότητα των site χρησιμοποιεί ένα σύστημα grid. Αλλά για να το λες, φαντάζομαι θα έχεις πετύχει εξαιρέσεις.

Καλή δουλειά με τη συγκέντρωση των link.

[demetriosarcolakis]

Οταν χρησιμοποιω θεμα σου για καποια δουλεια, το πρωτο πραγμα που κανω ειναι να μειωνω τα margin και τα padding ανάμεσα στα row, χαχα, μαλλον ειναι στην φυση του backenά να θέλει πιο συμπυκνωμένο περιεχόμενο! Θα κοιτάξω να το διορθώσω και να μπω και στη νοοτροπία του απλού επισκέπτη.

[jimpap]

Γεράσιμε εξαιρετικός. Διδακτικός και ευχάριστος, αναφέρομαι στο σύνολο των παρουσιάσεών σου. Μιας και αναφέρεσαι σχετικά στο παρόν, μπορείς να δώσεις λινκ στοκάδικων φωτογραφίας;

[panosmargaris]

Έχω δει το κορυφαίο σε σελίδα επικοινωνίας, πάνω από τη φόρμα έναν τίτλο "Είμαστε όλοι αυτιά" χαχααχ
Να σημειώσω ότι η συγκεκριμένη σελίδα αναλάμβανε SEO και Web Promotion εταιρειών..
Ευχαριστούμε και γι΄αυτό το βίντεο..

[panagiotisioannidis]

Όπου το Bootstrap πλέον σου δίνει και μόνο το grid system του σε ξεχωριστό αρχείο ακριβώς για τον λόγο που το αναφέρεις ;)

[kalliopifountoulaki]

Εγώ έχω βρει κάτι θέματα, όμορφα και οικονομικά και με υποστήριξη (σι-ες-ες-ιγκνάιτερ αν το ξέρεις) και έχω δέσει τον γάιδαρό μου ;-)

[rixter]

Chrome : ""Και κλάααααμα η κυρια...""
OK κάποια πράγματα συμβαίνουν και στις καλύτερες οικογένειες...lol

[nickkaryxx]

Φόρμες αθλητικές χαχαχαχα μου βγήκε ο καφές από τη μύτη

[psaltakis]

Εγω που είμαι μόνο Designer να το δω το video ή οχι :P :P :P