Créer une interface

[Racktor]

A la rigueur pour mes menus je peux faire autrement alors.
Je prend une entête vierge, j'importe une police en CSS et pour le reste je cadre avec du CSS.

Après le milieux et le bas de mon menu bha je laisse comme cela ...

[Xenos]

Oui, on peut ne pas vouloir faire de responsive, mais je trouve que cela détruit l'approche "déclarative" que devrait avoir le web. Le photoshop-webdesign n'encourage pas les créateurs à bien voir que le site c'est le code HTML, que la présentation c'est le CSS (et non des classes bootstrap qui ne sont que des alias de @style...), et que le site doit "déclarer" au navigateur ce qu'il contient, et pas lui imposer une structure hyper précise et particulière qui a 1 chance sur 2 d'être totalement inadaptée au navigateur qui visite le site. Photoshop est un moyen "impératif": il impose la taille de l'image, la position des éléments, etc... Et c'est cet aspect qui me rebute dans photoshop. Après, si c'est utilisé pour faire le même type de brouillon que sur papier, dans une durée similaire, y'a pas de soucis

il existe des extensions de navigateurs qui permettent de voir directement le résultat du CSS (Firebug par exemple, mais d'autres extensions seraient surement encore plus adaptées), on retrouve ainsi le coté "instantané" de photoshop.

[Racktor]

oui j'en ai un qui m'aide beaucoup mais je ne sais même plus ce que c'est comme ext ...

perso moi le résultat de l'exportation web de photoshop me rebute un peu, c'est bourré de tableau bordélique par exemple, c'ets a s'y perdre pour moi.

Je ne sais pas si c'est académique de faire cela mais je mets a la place des div et le CSS fait le reste ...

[Racktor]

BHon voila ce que cela donne :


on peut comparer avec le screen du début ...
.

[Harparine]

Salut ! C'est beaucoup mieux : tu progresses vite et les textures améliorent considérablement le rendu.
Par contre, je trouve que ça manque de couleurs : personnellement, j'aime bien qu'une couleur soit associée à un "thème" du site. Tu pourrais par exemple choisir d'attribuer le rouge aux informations militaires, le jaune à l'économie, le bleu à la recherche, etc.
Autre chose : les quatre gros boutons dans les boucliers me semblent un peu trop imposants.
Enfin, un truc sous-estimé mais très important : le rythme vertical du texte. L'espacement vertical et le rapport entre taille de polices et hauteurs de lignes est important pour tout aligner.
Quelques articles intéressants : https://larlet.fr/david/biologeek/archiv...esign-css/ http://www.pompage.net/traduction/8-faco...e-dans-vos
La bonne nouvelle, c'est qu'il n'y a pas besoin d'être graphiste pour appliquer ces techniques (mon site n'est pas toujours respectueux de cette notion mais j'essaie d'en tenir compte).

[Arkhanz]

Le photoshop-webdesign n'encourage pas les créateurs à bien voir que le site c'est le code HTML, que la présentation c'est le CSS (et non des classes bootstrap qui ne sont que des alias de @style...)

Je ne suis pas du tout d'accord avec toi, et d'ailleurs j'aimerai bien savoir d'où tu tire ces conclusions ? :O

[Racktor]

Salut ! C'est beaucoup mieux : tu progresses vite et les textures améliorent considérablement le rendu.
Par contre, je trouve que ça manque de couleurs : personnellement, j'aime bien qu'une couleur soit associée à un "thème" du site. Tu pourrais par exemple choisir d'attribuer le rouge aux informations militaires, le jaune à l'économie, le bleu à la recherche, etc.
Autre chose : les quatre gros boutons dans les boucliers me semblent un peu trop imposants.
Enfin, un truc sous-estimé mais très important : le rythme vertical du texte. L'espacement vertical et le rapport entre taille de polices et hauteurs de lignes est important pour tout aligner.
Quelques articles intéressants : https://larlet.fr/david/biologeek/archiv...esign-css/ http://www.pompage.net/traduction/8-faco...e-dans-vos
La bonne nouvelle, c'est qu'il n'y a pas besoin d'être graphiste pour appliquer ces techniques (mon site n'est pas toujours respectueux de cette notion mais j'essaie d'en tenir compte).

Merci pas les idées ^^

Niveau alignement je ne vois que mon menu a droite qui est mal aligné si je comprends bien ...

[Xenos]

○ Si c'est le point "photoshop" sur lequel tu n'es pas d'accord:
Photoshop n'est que de la pure présentation ultra-statique spécifique à un ratio/taille de canvas (je parle de webdesign, pas des images faites sur toshop pour les mettre après sur le site: ça, c'est bien ). Donc, il n'est pas ami du HTML déclaratif (en). C'est comme fixer l'apparence du site pour un et un seul support donné (sans même savoir si ce support est tactile).



○ Si c'est le point "bootstrap", je citerai le W3C:

class = cdata-list [CS]
This attribute assigns a class name or set of class names to an element. Any number of elements may be assigned the same class name or names. [...]
The class attribute, on the other hand, assigns one or more class names to an element; the element may be said to belong to these classes. A class name may be shared by several element instances. The class attribute has several roles in HTML:
• As a style sheet selector (when an author wishes to assign style information to a set of elements).
• For general purpose processing by user agents.

Quand je vois des class="bootstrap-large-column" (à peu près, j'ai oublié la syntaxe... volontairement!) ou des class="texte-en-vert", cela me ferait presque hurler... Cela revient à écrire style="...". Donc, cela n'isole absolument pas la sémantique HTML de la présentation (avec des classes comme ça, impossible de changer proprement le CSS de présentation du site).


@class, c'est comme un héritage de classe PHP/C++ et non un alias de présentation qu'on pose rapidement sur une balise HTML (sauf si c'est du wordPress fait à la va vite).



Donc, à mon sens, le webdesign photoshopé n'aide pas à bien séparer les concepts de HTML (sémantique), de CSS (présentation), et du navigateur (aspect déclaratif du web et non impératif). Cela rejoins mon aversion pour les "Fais le en javascript" d'ailleurs (qui est un langage impératif)...


Je n'ai rien contre un brouillon pour se faire une idée globale du résultat et voir si on n'a rien oublié de sémantique (ce que je fais). A la limite, un webdesign photoshopé si on vise un et un seul type de support (ex: un joueur qui fait son skin perso), pourquoi pas, mais sinon, je suis contre le principe.
Un texte décrivant comment les éléments doivent s'agencer et quelle tronche ils ont me semble plus adapté: représenter "cet objet doit être au centre de l'écran et les autres objets sont dans le flot qui le suit, donc retournent à la ligne si besoin" via photoshop... c'est hard! En tous cas pour moi...

[niahoo]

Ben désormais Bootstrap c'est surtout une librairie Less/Sass, plus un simple script que tu balances dans ton site pour pourrir ensuite ton HTML avec, comme tu le dis, des attributs style déguisés en class.

Tu peux totalement utiliser bootstrap côté CSS uniquement, si tu disposes du compilateur.

[Racktor]

Vu de loin et en essayant de comprendre la discussion c'est vrai qu'avec photoshop le réglage doit être au poil de cul...

Moi pour l'instant je fais le candide : HTML pour le découpage le style pour CSS et photoshop pour le rendu graphique ...