search

putaindecode / putaindecode.io

Blog participatif de la communauté dev
https://putaindecode.io
MIT License
271 stars 112 forks source link

Design #9

Closed MoOx closed 11 years ago

MoOx commented 11 years ago

Bon c'est simple, j'ai pondu ça suite à un truc moche et quelques un de vos commentaires.

screen shot 2013-08-29 at 5 57 38 pm

Ca c'est commité

@justinmarsan a fait ca sous toshop

screenshot on 2013-08-29 at 17 55 10

Commentaires, tests etc sont bienvenue. On veut écrire.

Nyalab commented 11 years ago

Déjà merci à vous, deux :)

J'aimerais bien qu'on fasse un essai sur un truc que j'aime bien qui est la colonne de gauche (comme sur medium par ex.)

Pour avoir une idée : http://french-touch-web.fr/wp-content/uploads/2011/03/spleener.jpg, http://www.dmnsia.com/, http://www.lespingouins.com/, etc.

Je pense que l’association d'un header dans le style de celui de @justinmarsan et une colonne gauche (presque flat, ou avec une couleur de fond qui correspond à une du logo ou bien du noir tout simplement) pourrait être pas mal.

Et une autre chose, si on peut mettre une couleur de fond sur le body genre le gris clair (propal de @mlbli) ça combinerait bien (header, colonne gauche, content).

Je pensais qu'on partirait un peu plus sur du flat et des aplats de couleur vu notre logo.

Si y'a des motivés ou des gens pour me contredire, avec plaisir ;)

bloodyowl commented 11 years ago

bloodyowl commented 11 years ago

À noter, et je pense qu'on est tous d'accord là dessus, la seule image dans le design doit être le logo.

MoOx commented 11 years ago

SO OBVIOUS. Le reste CSS et wala.

Nyalab commented 11 years ago

Je pense même que ça peut être un défi de faire le logo en css

MoOx commented 11 years ago

Finger in the noise en fait. D'ailleurs je le ferais pour le fun. Avec un seul putain d'élement.

gyndav commented 11 years ago

C'est bon ça

On Thursday, August 29, 2013, Maxime Thirouin wrote:

Finger in the noise en fait. D'ailleurs je le ferais pour le fun. Avec un seul putain d'élement.

— Reply to this email directly or view it on GitHubhttps://github.com/putaindecode/website/issues/9#issuecomment-23503405 .

David Guyon

rhannequin commented 11 years ago

Je +:100: , merci les gars.

MoOx commented 11 years ago
justinmarsan commented 11 years ago

Petite update de ma propale de design avec les changements proposés par @Nyalab : http://d.pr/i/t5Rs

MoOx commented 11 years ago

Je suis complètement septique sur la sidebar. L'avoir sur TOUTES le pages comme ça je trouverais ça pénible à la longue je pense. Sinon la finition je trouve ça très propre, merci @justinmarsan pour ton travail ;)

justinmarsan commented 11 years ago

Avoir une sidebar ça pourra être utile si on veut lister des articles similaires, avoir une liste des différentes catégories, un lien vers des pages importantes (par exemple une page sur comment contribuer, de différentes façon que ce sit pour tous ceux qui veulent s'impliquer à leur échelle) etc etc...

Le 1-colonne c'cool mais perso je trouve ça super limitant au final, t'as très peu de leviers pour permettre à tes visiteurs de découvrir plus de ton contenu...

MoOx commented 11 years ago

focus sur l'article, on rebondit sur le contenu APRES la lecture pas pdt. Il y'a des tones de solutions comme en fin de post "articles similaires" ou encore un petit bout qui slide de la droite de la page avec "vous aimeriez aussi" etc. Pour moi faut laisser le focus pdt la lecture et ne pas divertir. Les sidebar ca fait de plus en plus bannière de pub à mon gout. Le 1 colonne ne limite que ton imagination dude ;)

madx commented 11 years ago

J'aime, mais

Sinon je plussoie, c'est clean, merci @justinmarsan

justinmarsan commented 11 years ago

@MoOx : En considérant que le mec qui tombe sur ton article le connaisse pas, et que le sujet l'intéresse et que ce soit une information qu'il veut consommer maintenant...

Autrement dit pas si souvent que ça IMO.

J'arrive sur un blog depuis Twitter, le titre a l'air intéressant je navigue, c'est pas un truc dont j'avais besoin, je cherchais rien, je navigue, je me ballade, si je finis par trouver un article qui correspond à un besoin, ou que je trouve que c'est de qualité, je m'abonne et/ou je reviens... Et une fois que je suis convaincu de la qualité, le layout des posts, je m'en tape un peu.

Par contre, j'arrive chez medium.com au bout de quelques lignes je constate que l'article ne m'intéresse absolument pas, y'a rien à des pixels à la ronde pour me garder dans le coin et m'inciter à découvrir un autre post qui pourrait me plaire.

Donc en gros on optimiserai, avec du 1-col, pour un cas plutôt rare au final pas si important, parce que sidebar ou pas si j'ai envie de lire je lis, c'pas comme si c'était un layout chelou avec des pubs cachées dans le contenu.

@madx : Le logo a était fait avec une version fond gris foncé, je peux tester ça comme couleur de fond de la sidebar pour voir ce que ça donne... Avec quelques minutes de recul, d'accord pour le manque d'espace.

Pour le fait que ce soit à gauche, je vois pas en quoi ça te choque ou que ça nique quoi que ce soit... Tu le mettrais à droite toi ? et le logo ? Vachement spécial comme layout de pas avoir ce genre de sidebar à gauche...

madx commented 11 years ago

Le sens de lecture occidental c'est de gauche à droite et de haut en bas. En mettant la sidebar à gauche tu lui donnes toute l'attention du visiteur. Le fait de mettre un fond gris pour faire ressortir le contenu n'est d'ailleurs qu'une ruse pour lui redonner plus de focus.

Y'a énormément de sites qui ont une sidebar à droite, rien de vachement spécial donc.

Tu poses une bonne question concernant le logo par contre, le mettre à droite ça peut casser l'identité.

Est-ce que tu peux essayer d'inverser les sidebars et de ne pas mettre une couleur de fond sur celle-ci ? Ou alors un gris plus léger.

MoOx commented 11 years ago

Merci à tous de donner votre avis et arguments sur le nombre de colonnes. Ceux qui ne donnerons pas leur avis d'ici une semaine se verront sodomiser à coup de fils barbelés.

madx commented 11 years ago

Mon vote : 2 colonnes

LOGO        | MENU
CONTENU     | SIDEBAR
Shahor commented 11 years ago

imho le contenu doit être centré sur la page, et :+1: pour le menu à droite pour ne pas être trop attiré par ça pendant la lecture

kud commented 11 years ago

2 colonnes itoo. J'aime bien ça : http://d.pr/i/t5Rs

justinmarsan commented 11 years ago

2 colonnes pour moi aussi. 1 colonne ça limite trop sans vrai avantage à mon goût.

Nyalab commented 11 years ago

2 colonnes (sidebar gauche + contenu) Pour continuer dans les améliorations, je pars de la propal de @justinmarsan avec : réduction de la taille de la sidebar, mettre une couleur de fond sur tout le contenu, et reprendre le style de contenu de la propal de @mlbli (pour l'aération et la taille du texte)

rhannequin commented 11 years ago

J'aime le travail de @justinmarsan , je suis pour une sidebar mais à droite. En gros le schéma de @madx me plaît pas mal.

OwlyCode commented 11 years ago

Hello,

Perso la proposition que je préfère est la première de _mlb. Une colonne bien épurée, qu'une seule image : le logo. Et en plus la faire en CSS c'est carrément sexy, un coté fun-fact : chez nous c'est que du code, on hoste 0 image.

lionelB commented 11 years ago

Perso, j'ai une préférence pour le un colonne et dans ce cas, on peut imaginer une home un peu sympa avec un layout un peu plus travaillé sinon le classique 2 colonnes centrées avec nav à droite ou 2 colonne, le tout ferrée à gauche mais dans ce cas il faut que les 2 blocs soient facilement identifiables.

bloodyowl commented 11 years ago

v2

bloodyowl commented 11 years ago

desktop 2x mobile 2x

MoOx commented 11 years ago

Oui un argument pour le 1 colonne, c'est sur le mobile ;) Puis on y met quoi dans la sidebar à part la nav hein ?

MoOx commented 11 years ago

Sinon on fait un bouton pour changer la nav de place :)

bloodyowl commented 11 years ago

Je verrais bien le header se caler en fixed à top:0 lorsque le scroll repart vers le haut.

Nyalab commented 11 years ago

Learn 2 Responsive design noob

Dans la sidebar on peut y mettre un lien vers les articles similaires, des catégories d'article, la bio de l'auteur, les liens sociaux, et tout ce à quoi on ne pense pas encore maintenant.

Tout ce qu'on repousse en bas de page d'habitude

bloodyowl commented 11 years ago

Tout ce qu'on repousse en bas de page d'habitude

Tout ce qui a sa place dans le footer. C'est pas pertinent de mettre ce contenu au même niveau que l'article.

kud commented 11 years ago

Je reste sur le design de @justinmarsan perso.

gyndav commented 11 years ago

+1 pour le dernier de @mlbli

MoOx commented 11 years ago

J'ai fais un petit mix de tout ça

screen shot 2013-09-05 at 8 42 08 am

Vu que je suis un bourrin, c'est déjà visible là http://putaindecode.fr/c-est-quoi-putaindecode/ DE RIEN

lionelB commented 11 years ago

Super Par contre j'ai du mal avec le calage du logo. Je vais essayer de faire un truc si je peux.

lionelB commented 11 years ago

Au fait, il est ou le gireworkq MoOx ?

MoOx commented 11 years ago

J'ai une tête à utiliser Fireworks ? haha.

Designed in da browser™

Le logo est en position absolute, j'ai fais ça à l'arrache, on peut arranger ça facilement

MoOx commented 11 years ago

J'avoue que ça me plait pas mal ça.

screen shot 2013-09-05 at 9 13 22 am

lionelB commented 11 years ago

Ouais bon ça roule Je vais enfin tester happyplan du coup :-)

madx commented 11 years ago

Ça me plaît pas mal aussi, mes remarques :

Sinon, beau boulot, en plus du coup on peut modifier directement le code pour faire des propositions :)

gyndav commented 11 years ago

Je suis d'accord avec les remarques de @madx sur le header rouge qui fait un peu "grossier" et doublon

MoOx commented 11 years ago

C'est a dire que sans ça, on sait pas trop ou placer le titre/baseline/logo. Apres il est clair que j'ai fais ca a l'arrache et qu'il manque clairement de finition. Mais le badeau rouge proposé initialement par @justinmarsan me plait pas mal. En tout cas la, niveau contenu ca fait pas doublon ?! J'attends des contre propositions sachant qu'a l'instant je suis en mode menuisier.

kud commented 11 years ago
rhannequin commented 11 years ago

J'aime bien le design de @MoOx mis à part le header (j'aime pas les header "barre sur toute la longueur collée au top). La sidebar est propre et aérée, contenu centré sans prendre trop de place. Ça me plaît. :)

Nyalab commented 11 years ago

ENORME, c'est sur que si @MoOx commence à pondre du design de fou, ça va me convaincre pour la colonne droite.

Je vote carrément pour la dernière propal de @MoOx , y'a juste cette histoire de logo un peu "isolé" qui reste à régler, mais sinon j'aime bien. Le header ne me choque pas personellement, même si j'aime pas spécialement ces header "à la boostrap", mais c'est pas un truc horrible non plus.

Bravo mec !

justinmarsan commented 11 years ago

En fait en regardant toutes les propositions (y compris les miennes) je trouve que ça fait trop light partout, ça ressemble rarement à un blog, et encore moins a un "hub" de gens qui bloguent ensemble... On dirait une page de doc de projet open-source...

Sinon pour la proposition de @MoOx :

MoOx commented 11 years ago

@justinmarsan cf là pour voir ce que fais "la concurrence" http://www.alsacreations.com/actu/lire/111-display-vous-connaissez.html Rien n'est putain de définitif sur la preview, ça me parait tellement logique que je l'ai pas putain de dit.

Shahor commented 11 years ago

C'est putain de bien ! Also, quelques fautes d'auretograffe mais c'est plutôt cool (also j'suis une bite en design donc =X)

bloodyowl commented 11 years ago

Le reste impec.