Design & Développement web - Le topic des canards qui mangent des cookies

[Tomaka17]

En fait là ça fait vraiment nu, c'est vrai que ça doit pas être simple de se faire une idée avec ce screen.

Après des sites à contenu similaire, j'en connais pas des masses, et ils sont tous soit assez mal foutus soit qui datent des années 2000.

[Skiant]

Bon alors : quel genre de contenu sur ton site, il s'adresse à qui, quel message tu veux faire passer ("on est sérieux", "on est trop cools", "notre produit c'est trop de la bombe de balle", ...) ?

[Tomaka17]

C'est tout bêtement le site d'une grosse association.

En page d'accueil je vais mettre en très gros un descriptif de ce qu'ils proposent (vu que la moitié des coups de fils qu'ils reçoivent c'est à propos de ça), mais sinon il y a quand même beaucoup de pages annexes un peu chiantes : nos valeurs, historique, les rapports d'AG qui sont publics, etc.
Evidemment ce qu'ils proposent c'est bien de le mettre en valeur, mais comme c'est à but non lucratif c'est pas nécessairement l'information principale.

Du coup je ne peux pas partir sur un site très orienté comme c'est à la mode en ce moment, il faut que je fasse un template qui ira sur chaque page. Et le screen plus haut c'est grosso-modo le template (il manque juste le footer).

[Tomaka17]

Par contre il y a un truc que je comprends pas : mon joli orange #ff8000 devient un horrible marron caca sur l'écran de mon laptop.
Je veux bien que les couleurs varient en fonction de l'écran, mais d'un côté j'ai de l'orange vif et de l'autre j'ai un truc tout terne dont on jurerait que c'est une couleur différente.

[elkoo]

@Tomaka, un peu d'inspiration :
http://designbeep.com/2012/05/11/ora...ring-examples/
http://www.cssmozaic.com/galerie-orange_8_1_col.html

Si je peux me permettre le leitmotiv orange clair sur fond orange, je doute.

[Skiant]

@Tomaka, un peu d'inspiration :
http://designbeep.com/2012/05/11/ora...ring-examples/
http://www.cssmozaic.com/galerie-orange_8_1_col.html

Si je peux me permettre le leitmotiv orange clair sur fond orange, je doute.

J'approuve et j'ajoute :
http://patterntap.com/tags/style/orange
http://dribbble.com/search?q=web+orange

[Tomaka17]

Oui, j'ai un peu bossé dessus.
J'en suis rendu à ça pour le moment :



Ça reste bien en dessous d'un design pro, mais c'est pas moche non plus.

[Skiant]

Ton vert et ton orange ne vont pas ensemble, ça clashe sérieusement. Essaie de taper dans un bleu qui tire sur le turquoise si tu veux une couleur de contraste qui aille avec ton orange (couleurs complémentaires, tout ça).

Exemple :


Sinon, j'suis pas super fan de l'effet dégradé, ça perturbe la lisibilité parce que ça manque d'intention. N'aie pas peur des formes géométriques si tu veux donner de l'impact à quelque chose.

[Tomaka17]

Ben justement le bleu c'est presque la pire couleur que je pourrais mettre d'après moi, c'est pour ça justement que je comprends pas ces histoires de couleur complémentaire.
Le vert ici n'est pas nécessairement le choix le plus judicieux (à la base je cherchais un jaune pas trop flashy mais suffisamment distinct du orange), mais quand tu me dis de mettre du bleu je suis en mode wtf.

(et non je ne poste pas de screen, parce que je suis obligé de modifier tous les textes pour mettre "blabla" à la place)

Après ouai le dégradé je pense que je vais soit l'enlever soit le rendre léger (par exemple vert foncé => vert un peu moins foncé), parce que là en plus ça déséquilibre la page vers la gauche.

[Skiant]

Justement c'est le principe d'une couleur de contraste, ça doit avoir du contraste.
Si tu veux mettre du jaune avec de l'orange, ça peut se faire aussi, ça s'appelle un thème analogue.



Par contre, attention à comment tu t'en sers, parce qu'elles risquent de se marier trop harmonieusement pour avoir un quelconque impact.

PS : Et regarde les exemples qu'on t'a cité, plus la troisième partie du tuto sur la couleur de Smashing Magazine, nom de nom.

[deathdigger]

J'utilise ça http://colorschemedesigner.com et ça marche plutôt bien

[Tomaka17]

Mais je cherche une couleur qui soit différente du orange (pas analogue), mais pas cet espèce d'horrible bleu flashy.

J'ai rapidement essayé de changer les couleurs pour mettre celles de kuler, et mon site joyeux et accueillant devient une sorte d'art moderne néo-punk.

[moimadmax]

Le problème du Orange et vert, c'est que ça fait Carotte.

[Tomaka17]

Là je suis arrivé à un résultat que personnellement je trouve pas mal.
Je vais voir s'ils aiment. Si oui, tant mieux. Si non, ils embaucheront leur artiste (j'ai vu ce qu'il fait, et pour le coup lui c'est un vrai pro) et je ferai juste l'intégrateur (et j'irai me pendre).

Mais je fear, parce que ce que je trouve beau est généralement moche et inversement.
Il y a quelques semaines on m'a même dit dans le topic des ratages du web que ce site n'était pas si moche que ça, ce qui confirme que je n'ai probablement aucun goût.

---------- Post added at 10h28 ---------- Previous post was at 10h14 ----------

Tiens par exemple ce site, un des exemples cités plus haut, je le trouve horriblement laid.

[elkoo]

Je pense que tu confonds goût et techniques de design dans ton approche. Girleffect dans les exemples c’était pour la skin orange, apparemment changée.
Ceci dit, je trouve ça réussi, en particulier la partie explore, quant au choix des couleurs ça reste personnel, mais c'est cohérent avec le message.

[moimadmax]

Bon ben c'était vrai, la vache, ça me la coupe.
http://my.opera.com/ODIN/blog/300-mi...move-to-webkit
Le plus marrant c'est cette enchainement d'articles sur clubic :
http://pro.clubic.com/creation-de-si...-css-html.html
http://www.clubic.com/navigateur-int...nt-webkit.html

Je pense que pour beaucoup de développeur chez Opera, ça sent la moquette moisi du pôle emploi.

[darkgrievous]

Moi je dirais que ça sent le rachat par google/apple.

Faut dire qu'opera était loin d'avoir les reins aussi solides que mozilla ou microsoft, du coup le passage à webkit n'est pas très surprenant.

[tenshu]

Oui, j'ai un peu bossé dessus.
J'en suis rendu à ça pour le moment :

http://tof.canardpc.com/view/ece2a74...fd14357598.jpg

Ça reste bien en dessous d'un design pro, mais c'est pas moche non plus.

Franchement en partant du thème par défaut de bootstrap (par exemple) tu devrais pouvoir faire beaucoup beaucoup mieux.

[Tomaka17]

Les bootstrap c'est très épuré, pas trop ce que je veux ici.

[moimadmax]

Moi je dirais que ça sent le rachat par google/apple.

Faut dire qu'opera était loin d'avoir les reins aussi solides que mozilla ou microsoft, du coup le passage à webkit n'est pas très surprenant.

Si on réfléchit bien, c'est même une bonne chose pour l'utilisateur et pour eux. (Avoir un navigateur plus compatible, ne pas se faire chier à recoder la roue).
Mais ça fait bizarre qu'ils abandonnent leur moteur de rendu et Javascript. Après comme Webkit est libre, c'est pas si mal, il s'améliorera encore en commençant par l'amélioration du multi-column layout par les dev opera. Malgrès qu'il soit libre ça fait quand même peur de retomber dans un monopole de browser comme du temps de ie6.

[elkoo]

Je plussoie tenshu, twitter bootstrap te permettra de refaire facilement ce que tu as commencé, et t'es direct responsive, multibrowser, un argument fort pour convaincre un client et un soucis de moins pour toi.
Et si tu l'intègres dans ton framework, promis, je le teste

[Tomaka17]

Le but de mon framework c'est de proposer des fonctions pour gérer proprement les entrées et sorties (ainsi que de simplifier la vie pour les autorisations, base de données, etc.), sans pour autant contraindre l'utilisateur.
Que le mec sorte du HTML ou du CSV, moi côté framework je m'en fiche.
Du coup intégrer bootstrap, ce serait un peu hors sujet, à part éventuellement dans un "skeleton" (c'est à dire un exemple de site utilisant le framework).

Mais sinon le screen plus haut, c'est vraiment si moche que ça ?
Et ce truc que j'ai fait l'autre jour, c'est moche aussi ?

[Anon26492]

http://24ways.org/2012/how-to-make-y...k-half-decent/


(et mon conseil perso : go flat. Flatter is easier.)

[tenshu]

Les bootstrap c'est très épuré, pas trop ce que je veux ici.

C'est rien de le dire

[Tomaka17]

Après il y a un truc que je pige pas concernant bootstrap et les grids de manière générale.

À l'époque où CSS s'est popularisé, tout le monde a commencé à gueuler "les tableaux HTML pour faire le design c'est de la merde, il faut séparer le code HTML et le design".

Et maintenant on a remplacé "<table><tr><td>Colonne 1</td><td>Colonne 2</td></tr></table>" par "<div class="grid6">Colonne 1</div><div class="grid6">Colonne 2</div><div style="clear:both"></div>".
Ça ne semble déranger personne, alors que pour moi il n'y a pas beaucoup de différences entre les deux (et en plus les tableaux c'est même mieux puisque c'est responsive par défaut).

[KiKine]

si... parce qu'au final tu ne charge qu'une fois ta CSS, celle-ci se retrouve dans le cache
et du coup allègement final du code

[Skiant]

Après il y a un truc que je pige pas concernant bootstrap et les grids de manière générale.

À l'époque où CSS s'est popularisé, tout le monde a commencé à gueuler "les tableaux HTML pour faire le design c'est de la merde, il faut séparer le code HTML et le design".

Et maintenant on a remplacé "<table><tr><td>Colonne 1</td><td>Colonne 2</td></tr></table>" par "<div class="grid6">Colonne 1</div><div class="grid6">Colonne 2</div><div style="clear:both"></div>".
Ça ne semble déranger personne, alors que pour moi il n'y a pas beaucoup de différences entre les deux.

Bah surtout les tableaux c'est on ne peut plus la merde niveau du box model, avec leur dimensions fluides et leur méthodes de rendu qui est totalement différente d'un browser à l'autre.
Et je ne parle même pas de la sémantique qui pue de la gueule.

Après, y'a pas de miracles, les divs imbriqués à l'infini c'est pas des masses plus propre, c'est juste plus prévisible. Et il faut bien un moyen d'avoir du contrôle sur sa grille en attendant que les normes de CSS Layouts soient finalisées (ce qui n'est pas pour demain, si je ne m'abuse).

---------- Post added at 17h45 ---------- Previous post was at 17h44 ----------

si... parce qu'au final tu ne charge qu'une fois ta CSS, celle-ci se retrouve dans le cache
et du coup allègement final du code

Non-argument, tu peux aussi charger ta CSS une seule fois avec des tableaux. Tableaux != styles inline (même si souvent les deux vont de pair parce que c'était la façon de faire y'a des années de ça).

[elkoo]

Les tableaux c’était surtout parce qu'il n'y avait pas encore les div, une fois apparus, effectivement les tableaux pour le design ont étés largement surpassé, d'ou "les tableaux c'est de la merde". Les tableaux c'est fait pour faire...
des tableaux, s'tout.
Et c'est pas responsive un tableau, c'est fluide.

Edit : grillé (haha) en beauté.

[tenshu]

C'est surtout que sémantiquement un tableau pour gérer de la présentation c'est MAAAAAAAAAAAAAAAAAAALLLLLLLLLLLLLLLL.

D'ailleurs les tableaux de Bootstrap sont fort biens et agréablement responsive : http://twitter.github.com/bootstrap/...ss.html#tables
Et je dis ça avec l'aisance d'un mec qui bosse sur un catalogue en ligne de 3-4K familles de produits x en moyenne 20 reférences.

[Alliante]

Pour le moment y a surtout un gros effet de mode minimal design, responsive, framework en tout genre, graceful degradation et compagnie qu'on met à toutes les sauces.

C'est malheureux mais on rentre dans des gros stéréotypes du genre il faut d'office intégrer bootstrap et puis aussi modernizr par exemple quand on fait un site.

http://designspartan.com/info_genera...ign-que-jaime/

C'était la minute vieux con, merci