Web design απορίες

[acid18]

Πως ακριβώς ο designer κατεβάζει ιδέες για μια σελίδα ? Κοιτάτε έτοιμα templates, με την εξάσκηση γίνεσαι καλύτερος, είναι ταλέντο ? 

 

Θέλω να κάνω το design κομμάτι μιας σελίδας και κοιτάω την οθόνη σαν χαζός δεν ξέρω από που να ξεκινήσω ? 

 

Το photoshop είναι must ? 

[Hambos19]

1) Ψάχνεις τα trends που είναι τώρα

2) Βλέπεις κάνα CSS Design Awards και τέτοιου είδους site

3) Δημιουργείς μια δική σου αισθητική αν μπορείς. Έτσι θα είναι σαν να βάζεις την υπογραφή σου σε καθε site που κάνεις

4) Εννοείται με την εξάσκηση γίνεσαι καλύτερος

5) Διαβάζεις κάνα άρθρο για User Experience Design και για Web Typography

6) Σε ότι σε βολεύει σχεδιάζεις. Άλλοι τα κάνουν Photoshop, άλλοι Illustrator, άλλοι στο Sketch της Bohemian Coding.

7) Εννοείται πως παίρνεις ιδέες αλλά δεν αντιγράφεις. Άλλο inspiration, άλλο κάνω κάτι ολόιδιο

 

τώρα πχ trends είναι το flat design, τα animations και το parallax (αν και το parallax έγινε τοοοοοσο σούπα, στην Ελλάδα το κοιτάνε και νομίζουν ότι είναι εξωγήινος). 

[acid18]

Ευχαριστώ για την απάντηση. Θα ήθελα αν μπορείς να μου εξηγήσεις με λίγα λόγια γιατί είναι απαραίτητο το Photoshop, δηλαδή γιατί να μην το κάνω σε html, css και να «δω τι βγαίνει» ; 

 

Υπάρχει κάποιο πλεονέκτημα να το κάνεις πρώτα σε ps ;

[Hambos19]

Γιατί να μπεις στον κόπο να γράφεις κώδικα μέχρι να σου βγει το εικαστικό; Κάνεις πρώτα το design σε photoshop ας πούμε και έπειτα κάνοντας μετρήσεις για αποστάσεις, κουτιά κτλ αρχίζεις και γράφεις κώδικα.

 

Είναι θέμα πρακτικότητας. Να σου δώσω ένα παράδειγμα: 

Έχεις στο site σου μια γραμματοσειρά στην οποία δεν σου αρέσει ούτε το μέγεθος της, ούτε το ύψος της γραμμής, ούτε η ίδια η γραμματοσειρά, ούτε το letter spacing αλλά ούτε και το style της. (όλα στα είπα )

Στο photoshop πατώντας κουμπάκια βλέπεις κατευθείαν τις αλλαγές. Σε CSS όμως θα πρέπει:

1) Να αλλάξεις το font-family

2) Να αλλάξεις το line-height

3) Να αλλάξεις το font-weight, το letter-spacing, το font-size

4) Να κάνεις save

5) Να κάνεις refresh την σελίδα να δεις τις αλλαγές

6) Αν δεν σου αρέσει κάτι πάλι αρχίζεις από την αρχή

 

Στο photoshop το κάνεις, το βλέπεις ότι σου αρέσει, το βάζεις στο CSS μετά και τέλος. Ούτε αλλαγές ούτε τίποτα. Επίσης στο photoshop κανονίζεις και την χωροταξία των αντικειμένων που έχει το site σου. Και πολλά ακόμα πλεονεκτήματα αλλά ελπίζω να έπιασες το point

[cyclo]

Ευχαριστώ για την απάντηση. Θα ήθελα αν μπορείς να μου εξηγήσεις με λίγα λόγια γιατί είναι απαραίτητο το Photoshop, δηλαδή γιατί να μην το κάνω σε html, css και να «δω τι βγαίνει» ; 

 

Υπάρχει κάποιο πλεονέκτημα να το κάνεις πρώτα σε ps ;

 

Είναι και διαχειριστικό το θέμα. πολλές φορές αυτό που σχεδιάζεις χρήζει έγκρισης από μία ομάδα ανθρώπων. επομένως είναι ταχύτερο να το σχεδιάσει ο designer στο photoshop, και μόλις λάβει πράσινο φως να προχωρήσει στο implementation.

[Hambos19]

Είναι και διαχειριστικό το θέμα. πολλές φορές αυτό που σχεδιάζεις χρήζει έγκρισης από μία ομάδα ανθρώπων. επομένως είναι ταχύτερο να το σχεδιάσει ο designer στο photoshop, και μόλις λάβει πράσινο φως να προχωρήσει στο implementation.

+1.. πως το ξέχασα αυτό. Υπερ σημαντικό. 

[acid18]

Είναι και διαχειριστικό το θέμα. πολλές φορές αυτό που σχεδιάζεις χρήζει έγκρισης από μία ομάδα ανθρώπων. επομένως είναι ταχύτερο να το σχεδιάσει ο designer στο photoshop, και μόλις λάβει πράσινο φως να προχωρήσει στο implementation.

 

Αυτό ακούγεται όντως λογικό, σαν δείγμα δηλαδή. 

[Hambos19]

Ναι αλλά είναι και θέματα πρακτικότητας και παραγωγικότητας. Γνωρίζεις photoshop γενικά; Γιατί από ότι βλέπω το αποφεύγεις πολύ

[acid18]

Γνωρίζω αρκετά είχα μάθει πριν 4-5 χρόνια αλλά θυμάμαι ακόμα τα πιο πολλά. Ναι το αποφεύγω επειδή μ'αρέσει πιο πολύ το development αλλά θέλω να μάθω και design γιατί τελική αυτό είναι που βλέπει ο πελάτης και κρίνει με αυτό. 

 

Πρέπει να το κάνω habbit και σιγά σιγά να εξοικειωθώ.

 

Tools σαν το velositey χρησιμοποιείς ? Το webZap αξίζει ? ($ 20 κάνει)

[Hambos19]

Όχι. Ότι κάνω χωρίς plugins. Μόνο το http://guideguide.me/χρησιμοποιώ για να φτιάχνω τα grids πάνω στα γούστα μου για να μην τραβάω rulers μόνος μου

[XPHSTOS_]

Προσωπικά μου αρέσει και η ιδέα των πρόχειρων mockup για μένα...

Χαρτί / μολύβι-στυλό και και δοκιμάζεις διαφορετικά layouts αν σου αρέσουν 1-2 τα περνάς στο photoshop και τα στρώνεις όμορφα για να γίνει παρουσίαση για τον πελάτη και αφού πάρεις έγκριση ξεκινάς το coding.
Αν δεν σου αρέσει το χαρτί υπάρχουν πολλά διαφορετικά προγράμματα που κάνουν στον υπολογιστή αυτή την προχειρο-σχεδίαση και είναι και πιο εμφανίσιμα. Ένα καλό δωρεάν είναι το Pencil το οποίο είναι offline αλλά ακούω αρκετά συχνά το moqups, αυτό είναι online tool.
Μέσα σε 5-10 λεπτά μπορείς να βγάλεις 2-3 layouts για να διαλέξεις.

CSS Awards, Awwwards και μερικά ακόμη είναι πολύ καλά για inspiration...

[acid18]

Τελικά έφαγα την μέρα και δημιούργησα κάτι στο PS (απαίσιο αλλά τέσπα). Θα ήθελα να μου εξηγήσει κάποιος τι ακριβώς είναι τα guide σε τι ακριβώς χρησιμεύουν ?

[XPHSTOS_]

Grids εννοείς...

Τα grids χωρίζουν την σελίδα σε στήλες και γραμμές.
Φαντάσου κάτι σαν τα tables που ήταν παλιά... που με ολόκληρα tables έφτιανες το layouts της σελίδας.
Έχουν ένα σύνολο από κανόνες CSS με τους οποίους χτίζεις τουβλάκι (divάκι) - τουβλάκι (divάκι) το layout της σελίδας σου.
Δες μερικά παραδείγματα από το Site: unsemantic.

Πλέον και τα grids έχουν εξελιχθεί σε κάτι παραπάνω, τα ποιο γνωστά frameworks είναι το Bootstrap και το Zurb Foundation τα οποία προσφέρουν περισσότερες δυνατότητες και έχουν έτοιμα styles για h1...h6, buttons, forms, modal windows και είναι responsive.

Ρίξε μια ματιά και στο Site: Bootstrap  
 

[Xvipes]

1140 και ξέγνιασες

 

Responsive 960px έχει βρει κανείς, αλλά όχι αυτό?

Το bootstrap με τσατίζει γιατί είναι όλα σε css3 και το compatibility γαμ..

[Hambos19]

Γιατί δεν κάνεις ένα responsive 960px μόνος σου; Θες να σου ετοιμάσω ένα; Απλά πες μου πόσα columns θες. Για τα breakpoints θα σου βάλω τα κλασσικά. Και επίσης πες μου τι ονομασία θες για τα columns. πχ col-1, column-1 κτλ κτλ