[Plan du site] Vous êtes ici --- > Le Site du Zéro > Les forums > Le Site du Zéro v3 > Designs du Site du Zéro > Design Console > Lecture du sujet

Design Console

Vous devez être inscrit pour pouvoir poster des messages

Page : 1 2 3 4 5 Suivante

Auteur

Message

1 visiteur sur ce sujet (1 anonyme)

Page : 1 2 3 4 5 Suivante

Philias

# Posté le 24/06/2006 à 10:14:32

Groupe : Membres

http://siteduzero.com/designs-394.html [...] .net/console/
Image utilisateur

Projet Console SdZ

Je ne sais pas si ça a déjà été proposé, mais enfin je me lance

Je suis en train de faire un design blanc sur noir, qui utiliserait le moins d'image possible et qui donnerait un look un peu de console.

Petit / Grand hic : Bien des images sont obligatoirement incluses

Surtout que je suis un piètre dessinateur alors...

M'enfin, j'envois ici une représentation du moment (vous comprendrez que ce que vous voyez en ce moment n'est pas exactement ce que ça donnera ^^).

Au tout début :

Le 16 Loup 2006 :

Vous me direz ce que vous pensez de l'idée

Historique

2006/06/24
Création du Design «Console»
- Fond noir, liens bleus Bluzaz;
- Disposition Calque de Bluzaz de la speedbarre, du menu et du contenu;
- Menu en pointillé, pui en noir;
- Texte en blanc Émaille, puis écaille;
- Bannière Zozor en effet "Vieil Écran", blanc sur bleu;
- Speedbarre en haut à droite, dans un carré;
2006/06/25
- Zozor version Ascii par enfant de 6 ans blanc sur bleu puis gris sur noir, à gauche;
- Beaucoup moins de bordures pour le Forum, menu et contenu;
- Titres de menus en blanc sur Auburn;
2006/06/26
- Zozor basé sur le favicon, première version;
- Icônes des menus enlevés;
- Ajout des images [Ferm/], [Nouveau] et autres pour le forum;
2006/07/06
- Menu émulant la console, séparant les ul, li, p et div avec des | ;
  <puce>Nouvelles images de posts, de tutos et autres;</puce>
- Fonds pour les Zremarques enlevés;
2006/07/08
- Titres de menus enlevés, puis remis, puis enlevés, puis remis;
- Bannière plus clair;
- Enlèvements de présentatifs un peu n'importe où;
- Speedbarre passe de l'aspect «boîte» à «l'onglet»;
- Speedbarre passe de l'aspect «onglet» à l'aspect «Boutons cliquables».
2006/07/09
- Tout est de la même taille;
- Les titres sont en demis-boîtes |____ avec un marge gauche de plus en plus large selon le niveau du titre;
- Le fil d'Arianne n'est plus blanc sur bleu mais bleu pâle sur noir;
- Meilleur aspect des boutons speedbarre;
2006/07/10
- Images presques toutes finies;
- [Ferm/] devient [Ferm/] (un peu plus rouge);
- Post : <g/> pour mettre en gras,<i/> pour mettre en italique, &c;
- Fil d'Arianne rouge sur noir;
- Meilleur aspect des boutons speedbarre;
2006/07/11
- Système d'upload à peu près terminé
- Ajout de la ligne #include <sdz.h> en haut
- Liens rapides rendus apparent, pour un peu plus de geeking
- Les anciennes Zremarques ont été remplacé par de gros [X] [I] [?] et [!] de couleur sur noir
2006/07/18
- Bord dur pour le bas des catégories dans le forum.
- Essai de plusieurs formes de prise en compte des titres du menu
2006/07/28
- Les textes surlignés sont maintenant en teintes de gris.
- Le include <sdz.h> est en propriété before par défaut (donc IE a encore l'image), ce qui rend la taille de la police égale à celle normale.
- J'ai essayer d'arrenger l'apparence des boutons de la speedbarre sous Internet Explorer 6, mais bon, c'est pas super mieux.
- Barre de _#X (Réduire-Aggrandire fermer) avec titres de fenêtres Windows 95 (blanc sur bleu), avec le le favicon comme image du programme (recyclage quand tu nous tiens ). Fixé pour les navigateurs à jour, simplement en haut pour les vieux.
2006/08/16
- Morte la barre bleue. Maintenant, un simlple _#X a été ajouté à la bannière.
- Les couleurs du geshis sont un peu plus normalisés entre langages. J'essairai de rendre le tout le plus homogène possible (tout en laissant des distinctions entre langages de types différents)
- Le titre de la publicité s'affiche en ce moment juste à gauche de "Communauté", et je ne sais vraiment pas comment m'en débarrasser sans utiliser d'images. Je serais d'avis de rajouter id="titre_pub", mais comme c'est interdit :/
- Il y a un petit cadeau-plus uniquement pour les Operaeux J'enlève si ça fait trop bordélique.
- Arbre en vert plutôt qu'en rouge
- Titre avec bord double au bas
2006/09/15
- Modification de la couleur des liens. Jaune normalement, or à l'hover, or sur noir à l'actif.
- GeSHi plus complet. Les couleurs sont toutes appliquées au mêmes éléments (commentaires, keyword, opérateurs). On reconnaîtrera les programmes par leurs différences de logique beaucoup plus facilement.
- Le menu et le contenu est séparé par une ligne verte beaucoup plus reconnaissable que le le niveau h1 habituel
- J'ai enlevé les titres de menus et je crois bien rendre ma décision définitive. Le menu est beaucoup moins bordellique ainsi.
- include <sdz.h|{titre de la page}> est revenu à include <sdz.h>
- Les liens de l'arbre ont étés remis de la couleur des liens normaux.
- Les titres ont la barre en haut et non en bas.
- Les informations du tutorial ne sont plus encadrées et ne flottent plus à droite
2006/10/28
- Essais de mise de lien sur la bannière. Il ne fait que recharger la page.
- Signatures : Elles sont dorénavant à gauche au lieu d'à droite
- Une traverse blanche se trouve entre thead et tbody pour les tableaux de messages
- Ajout d'une page d'essai d'envoi de mp
- Pour offline et pour online
2006/11/28
- Insertion de possibilité de gestion pour la pub du livre
- Liens du menu en jaune, reste en blanc (avant : tout en blanc)
- Complétion du trinome carré parfait de la page d'équipe
2006/11/30
- La speedbarre n'est plus sous forme de boutons : elle est maintenant bleu sur noir.
- Correction d'un petit porblème de position relative maintenant transformé en float.
- Les menus sont séparés d'une ligne blanche (tout comme la speedbarre d'ailleurs).
2006/12/01
- Les titres n'ont plus de lignes, mais sont tous de différentes teintes de bleu, et ont pour chaque "imbrication" de titre une valeur de graisse, d'italique et de soulignage différent.
- Les news sont semi-encadrées et rien ne flotte à droite (les commentaires sont à gauche)
- Les différentes sections de l'admin ne flotteront plus, mais seront l'un après l'autre (à savoir si c'est quand même viable, j'aimerais l'avis d'un admin)
- Je reviens avec l'avis de llouis : Les putains de titres en rouge pour le menu sont de retour. Le menu sera moins difficile à comprendre et je ne mettrai pas la pub google en flotte droit. Et ça paraît bien comme ça je trouve
2007/07/04
- Mise à jour des couleurs et des modules en page d'accueil
- Partie de la publicité modifiée, mais je ne peux empêcher qu'elle soit longue. À utiliser : la navbarre

Édité le 12/11/2008 à 00:34:07 par Philias

Mes musiques sur eSnips [En]

Design Console	Commentaire
Design Daily newZ	Commentaire

Vinchz

# Posté le 24/06/2006 à 10:21:43

Vinechaise koi.

Pour le moment, c'est plutôt le design de Bluzaz mais en noir

Essaies de trouver une idée qui pourrait démarquer ton design des autres. Bien que l'idée soit un peu saugrenue, tu peux tout de même te lancer dans ce design, à condition d'être original. Déjà, essaies d'utiliser le moins d'image possible, voir quasiment aucune à part le header

. Pour les bordures du menu, je verrais des bordures pleines, toutes simple et oldschool quoi

.

Après bon comme M@teo le dit dans son cours, les consoles sont très belles de nos jours (sauf sous Windows

) et tu pourrais faire quelque chose de très hestétique, peut-être en reprenant l'idée du design bureau Windows mais cette fois en console.

Pour l'instant, tu n'en est pas encore arrivé à ce stade et tu peux déjà effectuer quelques modifications telles que la police des menus comme celle de la console

Bonne chance

Edit :

J'ai une idée pour un header

!
En fait, il faudrait réussir à dessiner Zozor en ASCII, police courrier (comme dans la plupart des consoles qu'on peut voir). Si tu n'est pas bon dessinateur, c'est quelque chose d'envisageable.
Tu n'est pas non plus obligé de faire le Zozor en ASCII directement dans le code source de la page mais par exemple en image où tu auras un peu arrangé les caractères pour tricher.

Édité le 24/06/2006 à 10:24:58 par Vinchz

Mon blog
Une envie d'expression ? | Discutons des news

Philias

# Posté le 24/06/2006 à 10:28:40

Groupe : Membres

C'est sûr que ça n'est pas grand chose pour le moment, je viens à peine de commencer

Sinon, est-ce que ce serait trop lourd d'avoir tout le texte en courrier ?

Bordure pleine ? Peut-être, quoi que j'aime bien le pointillé. (EDIT : Après essai, j'adopte la bordure pleine)

Pour les balises d'informations, de danger et de questions, je compte ne pas me servir des images et simplement mettre une bordure, un fond et un texte de mêmes tons.

XD J'aime bien ton Ascii Zozor, Bonne idée !

Merci

Édité le 24/06/2006 à 10:35:02 par Philias

Mes musiques sur eSnips [En]

Design Console	Commentaire
Design Daily newZ	Commentaire

Vinchz

# Posté le 24/06/2006 à 11:08:55

Vinechaise koi.

Oui, ça serait trop lourd d'avoir tout le texte du site en courrier. Il faudrait juste mettre dans cette police les menus et la speedbarre parce que quand je lis un cours personnellement, j'aime bien que ce soit lisible. Il faudrait donc trouver quelque chose entre le courrier et une police classique (il faut essayer ... tentes l'Arial ou mieux le Verdana).
Tu devrais mettre ton design en ligne une fois que tu auras apporté des modifs

Mon blog
Une envie d'expression ? | Discutons des news

Philias

# Posté le 24/06/2006 à 11:29:53

Groupe : Membres

Verdanna... Je test et j'upload.

http://philias.mastaweb.com/sdz/news.html

Mes musiques sur eSnips [En]

Design Console	Commentaire
Design Daily newZ	Commentaire

Vinchz

# Posté le 24/06/2006 à 11:59:38

Vinechaise koi.

Faudrait prendre la même couleur de caractères que dans la console de Windows (un gris très pâle qui fait moins mal aux yeux que le blanc), je te laisse t'amuser avec la pipette !

Sinon, il faudrait que tu enlèves ce header mal découpé au profit du fameux Zozor ASCII

(si tu veux je peux t'aider)

C'est encore la police par défaut ! Essaies :
Pour les menus : courrier
Pour le corps : verdana

Les messages de zCode (attention, information, erreur et question) ne sont pas très agréables

... essaies de trouver des couleurs sobres et mets quand même une petite image (et pas de bordure éventuellement) parce que bon, on reconnait ces messages en partie grâce à l'image (minimaliste n'est pas synonyme de fénéantise de designer [2nd degré]

Mon blog
Une envie d'expression ? | Discutons des news

Philias

# Posté le 24/06/2006 à 12:55:22

Groupe : Membres

Voili voilou
-Plus gris
-Zozor Ascii (peut-être à changer, mais ça il est bien comme ça je trouve

)
-Speedbar en absolu à droite

Pour les images des messages, je verrai. Mais je compte peut-être mettre des simples X, ? et !, sans couleurs spécifiques. Peut-être en ascii.

Mes musiques sur eSnips [En]

Design Console	Commentaire
Design Daily newZ	Commentaire

Tchouboudou

# Posté le 24/06/2006 à 13:10:30

Tiens un éléphant rose !!!
Avatar

Groupe : Membres

Je pense qu'il faudrait un peu réduire la bannière, faire en sorte qu'elle se fonde dans le design et que la speedbare colle pas à la bannière (j'ai un petit écran, donc la speedbare est sur la bannière). Sinon, c'est un bon début.

Pour les icônes, il y a un très bon site : http://www.yellowicon.com

Bonne chance,
Tchouboudou

Contrepèterie : Il fait beau et chaud

Philias

# Posté le 24/06/2006 à 13:27:47

Groupe : Membres

J'ai réduit un peu la bannière et j'ai essayer d'arranger la speedbar, tu me montreras un screen si t'es pas encore content

Pour Yellow icon, ce ne semble pas être ce que je cherche.
Je vais plutôt opter pour des images très simple faites de caractères courrier.

Mes musiques sur eSnips [En]

Design Console	Commentaire
Design Daily newZ	Commentaire

czerca

# Posté le 24/06/2006 à 14:29:34

Couscous !!!
Avatar

Groupe : Membres

edit : oups! Trop de topics ouverts à la fois, je me trompe d'onglet :euh:

Édité le 24/06/2006 à 14:30:42 par czerca

Vinchz

# Posté le 24/06/2006 à 15:12:17

Vinechaise koi.

On a le droit de voir le résultat ?

Apparemment, t'as pas uploadé

Mon blog
Une envie d'expression ? | Discutons des news

Tchouboudou

# Posté le 24/06/2006 à 18:32:52

Tiens un éléphant rose !!!
Avatar

Groupe : Membres

La speedbare est mieux, mais les titres du menu dépassent. Mais la bannière est beaucoup trop haute à mon goût. Mais sinon, j'aime bien le Zozor…

Contrepèterie : Il fait beau et chaud

Philias

# Posté le 24/06/2006 à 19:18:23

Groupe : Membres

@czerca : Lol ça arrive

@Vinchz : T'as regardé au moins ?

La bannière est mois large qu'avant.

@tchoboudou : J'ai regardé le site en 800/600, c'est vrai que la speedbar cache un peu la bannière, et si je mettais la bannière de la largeur de la fenêtre, avec l'âne complètement à gauche ? Et je pourrais couper un peu les oreilles et les pattes de Zozor pour rendre moins haut...

Edit :
-Bannière à la largeur de l'écran
-Images de la speedbar placés à droite du texte

Edit 2 : Optimisation web : Déjà, Le chargement est bien moins dur et les images sont bien moins lourde qu'avec Bluzaz ou FiBlack

Édité le 24/06/2006 à 23:31:42 par Philias

Mes musiques sur eSnips [En]

Design Console	Commentaire
Design Daily newZ	Commentaire

n0delO

# Posté le 25/06/2006 à 20:06:47

[ViewMake - Codeur]

Groupe : Bannis

on se croirais sur un site de hack

ViewMake, service de création de site professionnel. A votre service.

Language pratiqué : PHP, Xhtml, SQL, C/C++, CSS
Webdesign : Oui (niveau : 14/20)

Philias

# Posté le 25/06/2006 à 20:10:49

Groupe : Membres

Amusante réflexion

Est-ce que tu crois qu'on peut exagérer ce sentiment d'une quelconque façon ?

Mes musiques sur eSnips [En]

Design Console	Commentaire
Design Daily newZ	Commentaire

Vinchz

# Posté le 25/06/2006 à 20:41:00

Vinechaise koi.

Non mais stoppes tout de suite

, ton design devient laid.
Déjà, je ne voyais pas du tout Zozor comme ça. Justement, il faut gagner de la place (en partant du principe que ton design est minimaliste) et ne pas faire une bannière de 500px de hauteur

! Là, ton zozor fait encore trop "image" ... fais-le entièrement en caractères et, je te le conseille, en écriture grise sur fond noir.

Méthode si tu as du mal :

Tu saisis sous Gimp ou Photoshop, ce que tu as les caractères dont tu as besoin (slash, point, deux points, parenthèses ...) et tu les déplace, copie/colle pour former (comme un puzzle) petit à petit ton Zozor. Si tu n'y arrives pas, j'essaierais de le faire, l'idée me plaît bien

Réduis un peu (beaucoup) la taille des caractères, surtout du côté du menu parce que c'est pas très agréable. Je te conseillerais aussi de changerles images du zCode qui ne sont pas très agréables à l'oeil. Il faudrait réussir à trouver le juste milieu entre l'original et le minimaliste.

Voilà, si tu as besoin de quoi que ce soit, ben n'hésites pas

Mon blog
Une envie d'expression ? | Discutons des news

Philias

# Posté le 25/06/2006 à 21:19:34

Groupe : Membres

Ancienne bannière
Nouvelle Bannière
J'aime bien le blanc sur bleu pour les bannières et le blanc sur rouge brun pour les sections de menus.

Pour les images de remarques (et du même coup les images de menus), qu'est-ce que tu me conseillerais qui serait minimaliste ainsi qu'original ? Je cherches. Je pensais mettre un simple caractère de la couleur approprié, sans le cercle autour...

Mes musiques sur eSnips [En]

Design Console	Commentaire
Design Daily newZ	Commentaire

Vinchz

# Posté le 25/06/2006 à 21:38:31

Vinechaise koi.

On ne reconnaît pas assez Zozor dans la deuxième bannière mais ça s'améliore. Pour le bleu, c'est quand même laid bleu sur noir ... Sinon, essaies de paufiner Zozor (t'y est presque) et de lisser la police sous ton logiciel de graphisme (Gimp, Photoshop ou autre).

Mon blog
Une envie d'expression ? | Discutons des news

Philias

# Posté le 25/06/2006 à 22:26:56

Groupe : Membres

Bannière désormais grise sur noir (t'as gagné En effet ça le fait bien)
Il n'y aura pas d'images pour la speedbar, qui est désormais un simple petit menu en haut à droite
J'enlève le plus de bordure que possible pour que ça ne charge pas trop l'espace visible
Des titres spécifiques seront emboîtés avec un fond auburn ou vert sombre

Mes musiques sur eSnips [En]

Design Console	Commentaire
Design Daily newZ	Commentaire

kimimarokun

# Posté le 25/06/2006 à 23:49:33

Omniscience partielle...

Groupe : Membres

Honnètement, je n'aime pas du tout le header (ou bannière si tu préfères).

Mais là où je suis scotché c'est que ton design parrait désorganisé, un bordel sans nom, des trucs dans tous les sens mais c'est fou : on s'y retrouve et tout est à sa place ! o_O

Franchement, j'aime beaucoup ton design, mais essaie d'accentuer le côté rustique, technique de la console.

Édité le 25/06/2006 à 23:50:27 par kimimarokun

Avant, j'avais des idées pour mes signatures... >>

Philias

# Posté le 26/06/2006 à 00:18:31

Groupe : Membres

Ouais bon c'est vrai qu'elle est moche la bannière :/ Faudrait que je puisse donné plus de détail à Zozor.

«Bordel sans non» XD C'est vrai que je suis moi-même encore déstabilisé quand je regarde. C'est presque décharné comme apparence.

Par côté rustique et technique, je ne vois pas ce que tu veux dire.

Et si j'alignais tous les titres à gauche ?

Edit : Bannière un peu moins moche (Basé sur le favicon.ico)
Est-ce que je laisse sans les icones de menus ?

Édité le 26/06/2006 à 00:52:20 par Philias

Mes musiques sur eSnips [En]

Design Console	Commentaire
Design Daily newZ	Commentaire

sloshy

# Posté le 26/06/2006 à 04:06:58

Groupe : Membres

Y a rien à dire, ton design j'adore.
Le dernier lien proposé sur le premier poste est exelent (avis perso)

Philias

# Posté le 26/06/2006 à 06:25:53

Groupe : Membres

Content que ça plaise

(Des fois je me demande comment c'est possible XD )

Par contre, je ne sais pas si ce que je viens de faire va plaire.
J'ai enlevé les bordures aux tableaux du forum et des MP...
Si ça fait trop lourd, je mettrai une bordure au dessous de chaque message pour pouvoir séparer chaque différent posts.

Sinon, pour ceux qui n'ont pas remarquer, j'ai modifié des images au forum.

Par exemple, pour écrire un nouveau topic, il faut cliquer sur [Nouveau], et pour signifiée un topic fermé, il y a [Ferm/] (Un slash à la place du é pour répéter un bug quand on utilise un très vieux logiciel avec un clavier qwerty -> la touche é donne un slash)

Mes musiques sur eSnips [En]

Design Console	Commentaire
Design Daily newZ	Commentaire

llouis

# Posté le 26/06/2006 à 09:46:24

Avec ou sans sucre ?
Groupe : Membres

Effectivement, j'avais déjà eu cet-te idée d'enlever les bordures des tableaux pour Summer Design, et je dois avouer que ça renda ssez bien sur ce design

Il s'est pas mal amélioré depuis la dernière fois où il était vriament moche, si tu continues sur ce rythme, tu as toutes tes chances

!

Un conseil en l'air : peut-être que la propriété letter-spacing pourrait t'être utile pour simler la console, après, c'est à toi de voir :-°

Plein de nouveaux smileys !

JALeX

# Posté le 26/06/2006 à 11:17:09

Rho rho bong !

Groupe : Membres

C'est marrant

Sinon, enlève le screen sur ton premier post, il n'est pas d'actualité

Sea, SDZ and fun :ici - là - Tuto - Détérage >_<

- fun

llouis

# Posté le 26/06/2006 à 14:02:12

Avec ou sans sucre ?
Groupe : Membres

Le menu est vraiment sympa

Plein de nouveaux smileys !

Philias

# Posté le 26/06/2006 à 17:30:57

Groupe : Membres

Il me faudrait des tests sous Safari, Opera, Netscape et quelques autres des navigateurs utilisés par peu de gens.
J'aimerais que ceux qui ont des navigateurs autre que IE et FF (parce que je ne peux tester que ceux là) postent ici leurs screens (en miniature liée vers la grandeur nature si possible).

Pour le letter-spacing, le problème c'est que dès que le texte est trop long, ça dépasse du bloc et ça fait pas très beau :/ Avec une police monospace, problème réglé

[Edit] J'aimerais savoir, est-ce que vous pensez que ce serait mieux d'avoir la bannière à droite et la speedbarre à gauche ?

Édité le 27/06/2006 à 07:26:30 par Philias

Mes musiques sur eSnips [En]

Design Console	Commentaire
Design Daily newZ	Commentaire

Tchouboudou

# Posté le 29/06/2006 à 09:24:04

Tiens un éléphant rose !!!
Avatar

Groupe : Membres

Ça passe sous Safari

Contrepèterie : Il fait beau et chaud

Philias

# Posté le 30/06/2006 à 01:53:08

Groupe : Membres

Merci Tchouboudou

Par contre, j'ai visionné sous IE en 800/600, le contenu passe sous le menu à cause du mot «Anniversaire» trop gros :/

Est-ce qu'il y aurait un moyen de contrer ce genre de problème ? Je prends en considération le fait de réduire un peu la largeur du contenu, mais bon, c'est pas très beau

Mes musiques sur eSnips [En]