-36%
Le deal à ne pas rater :
Nike Air Max Tailwind IV pour Femme en promotion
109 € 170 €
Voir le deal

WebDesign Communautaire

Aller en bas

WebDesign Communautaire Empty WebDesign Communautaire

Message par Aherys le 3/1/2010, 16:24

Bien le bonjours a vous,

Tout d'abord, sachez que le WebDesign de cette communauté est un travaille de longue haleine, ça doit être le ème/ème que je fait, et que je change. C'est un projet personnel.

Pour être profitable a tous, je vais essayer d'expliquer les différentes étapes du développement, c'est d'ailleurs pourquoi les premiers screen que vous aurais l'occasion de voir sont très minimalistes. Cela peu être également intéressant de voir le design de monter, étapes par étapes, et cela m'est de plus profitable, vu que vous pouvez me conseiller ou donner votre avis a chacune d'elle, pour avoir, dans tout les recoins, le meilleur possible.

Le design a pour objectif d'être simple, ergonomique et biensur l'attractif, le dernier point étant le plus difficile de toute évidence Very Happy

Voici les liens des anciens designs réalisé :
Tout Premier Design* - Beurk le logo Surprised

Etape Numero 1 :
Pour obtenir une forme fluide et sans pixélisation, j'ai décider de dessiner le gros de la forme sous illustrator, environs 10mn de boulot, aucune difficulté, le tout a la plume.

WebDesign Communautaire Img-172106j8gv3


Etape Numero 2 :

WebDesign Communautaire Img-172431b59f3

A vrais dire, c'est a la fin de cette etape que j'ai décider de faire un topique sur illusion', donc j'ai un peu trop avancé :s

Le fond est un dégradé, et le début comporte des scanlines, la forme principale a une simple ombre pour enjoliver les contours, et j'ai commencer l'espace membre, qui disposeras d'une version flash et une version fixe (html/css), celle que l'on peu voir est bien évidement, la flash.


Dernière édition par Aherys le 3/1/2010, 17:48, édité 2 fois
Aherys
Aherys
I.A. Professionel
I.A. Professionel

Système d'exploitation Navigateur Logiciel graphique


http://www.gamershield.com

Revenir en haut Aller en bas

WebDesign Communautaire Empty Re: WebDesign Communautaire

Message par Linkyo le 3/1/2010, 16:39

Pour l'instant, rien à redire... si ce n'est que je trouve bizarre ta manière de commencer un webdesign >> il y a déjà un avatar, mais rien ailleurs Oo Enfin, c'est une question de méthode, j'me doute que tu sais ce que tu vas faire pour la suite Smile
Pressé de voir la version flash :p
avatar
Linkyo
I.A. VIP
I.A. VIP

Système d'exploitation Navigateur Logiciel graphique


http://www.linkyo.eu

Revenir en haut Aller en bas

WebDesign Communautaire Empty Re: WebDesign Communautaire

Message par ERG. le 3/1/2010, 16:42

Ta façon de bosser fait pro, t'as l'air de bien réfléchir... Et pour l'instant ça marche !
Bon après si on pouvais savoir pour quelle sorte de communauté servira ce didiz, ce serait plus simple d'aider.
avatar
ERG.
Banni
Banni

Système d'exploitation Navigateur Logiciel graphique


Revenir en haut Aller en bas

WebDesign Communautaire Empty Re: WebDesign Communautaire

Message par Buldoz le 3/1/2010, 16:56

J'aurais bien vu un petit texte à ôté du machin en haut comme le nom du site pour que ça fasse un peu moins vide en bleu et glossy M'enfin ...
avatar
Buldoz
Banni
Banni

Windows Vista Google Chrome Photoshop


Revenir en haut Aller en bas

WebDesign Communautaire Empty Re: WebDesign Communautaire

Message par Aherys le 3/1/2010, 17:10

Merci a vous ^^

Oui Linkyo, cela peu paraitre étrange, mais je fait mes design de partie en partie, je met tout les petits détailles, une fois que je considère cela finit, je passe a autre par, et je n'y reviens souvent, qu'a la finalisation lorsque que quelque chose me chiffonne.

Lorsque je doit attaquer quelque chose de "complet" et que j'en est le temps, je fait même des grosses pauses, style je vais jouer un peu, je reviens, et souvent c'est la que je remarque les gros détailles fâcheux :p

Erg, la communauté est trés novatrice, tu pourras en savoir plus ici si tu a le courage de lire (Et l'optique du projet a quelque peu changer depuis se topique, jusqu'au nom de la communauté).


On va dire qu'elle se concentre sur le jeu vidéo, et en particulier a l'aide au groupes (guildes, clan, team... appelez cela comme vous le souhaitez)

Buldoz, c'est en effet la place du logo, et qui je sent sera un véritable casse tête.


Etape N°3

WebDesign Communautaire Img-180156zook6

Je vais faire passer les explications après, c'est plus logique je pense Very Happy

Bon le tout est basé sur des lignes de constructions, pour être parfaitement france, je n'aime que très peu le haut (nom + titre du membre), j'aime bien le petit halo mais je ne sais pas si le bleu ou si les soulignements sont convenables.

WebDesign Communautaire Img-180410xc9po

Je souhaite également éviter de surcharger cette zone, et pour ce faire je pense que je vais utiliser une ancienne idée possible uniquement grâce au flash, des boutons sur les coté, qui sortent lorsque la souris passe dessus :

WebDesign Communautaire 196508

En revanche, si on veux du positif, j'aime bien l'avatar et les boutons Very Happy

Note : Les icones proviennes de l'excellent pack de famfamfam
Aherys
Aherys
I.A. Professionel
I.A. Professionel

Système d'exploitation Navigateur Logiciel graphique


http://www.gamershield.com

Revenir en haut Aller en bas

WebDesign Communautaire Empty Re: WebDesign Communautaire

Message par Buldoz le 3/1/2010, 17:20

Là j'aime beaucoup. Mais je comprend pas bien où se situera la dernière partie
avatar
Buldoz
Banni
Banni

Windows Vista Google Chrome Photoshop


Revenir en haut Aller en bas

WebDesign Communautaire Empty Re: WebDesign Communautaire

Message par Oz' le 3/1/2010, 17:31

Ca c'est du WIP en bonne et due forme... Wink
J'aime beaucoup la manière de procéder, même si comme Link', je trouve cela bizarre de voire un avatar alors que le reste n'est pas encore placé ^^
J'aime cependant beaucoup la forme générale du webdiz et j'attends de voir le final...


WebDesign Communautaire Userbar
Oz'
Oz'
Fondateur
Fondateur

Windows 7 Firefox Photoshop


http://www.illusionart-gfx.com/

Revenir en haut Aller en bas

WebDesign Communautaire Empty Re: WebDesign Communautaire

Message par Linkyo le 3/1/2010, 17:34

Rien à redire au niveau du design pour l'instant.

J'ai lu l'explication sur SdZ. Sympa comme concept !
Mais il y a du boulot -_-'
Notamment pour la partie en Flash, ça m'intrigue beaucoup : l'interaction bdd/flash n'est pas terrible, voire compliquée pour peu de choses :s Tu comptes faire un WIP du codage en Flash ? :p
Bon courage !
avatar
Linkyo
I.A. VIP
I.A. VIP

Système d'exploitation Navigateur Logiciel graphique


http://www.linkyo.eu

Revenir en haut Aller en bas

WebDesign Communautaire Empty Re: WebDesign Communautaire

Message par Aherys le 3/1/2010, 17:46

La technologique majoritairement utilisé pour les interaction avec une SGBD sera le PHP. Le flash ne seras au finale présent que dans très peu de partie du site, dans l'espace membre, il n'a pour fonction de lire uniquement le contenue des choses, les variables lui sont transmis directement par le PHP, comme ça pas de risques de sécurités.

Oui, je m'en excuse encore Oz', c'est une manière bien spéciale de travailler je m'en excuse Very Happy

Buldoz la dernière partie se situeras tout simplement sur le coté, comme on peu le voir a cette étape.

Etape N°4

WebDesign Communautaire Img-184227rmd9o

Quelques correctifs, le nom + le titre on étais mieux placé, ou plutôt, je préfère cette emplacement, le fait que le coin supérieur droit sois libre, donne également a mon gout, plus d'espace pour respirer.

J'ai également ajouté des lien sur le coté, pas de grand soucis, la forme faite directement dans photoshop, une ombre, les icônes avec un léger dégradé + ombre, et le texte.
Aherys
Aherys
I.A. Professionel
I.A. Professionel

Système d'exploitation Navigateur Logiciel graphique


http://www.gamershield.com

Revenir en haut Aller en bas

WebDesign Communautaire Empty Re: WebDesign Communautaire

Message par Oz' le 3/1/2010, 17:49

Aherys a écrit:Oui, je m'en excuse encore Oz', c'est une manière bien spéciale de travailler je m'en excuse Very Happy
Ce n'était pas une critique...
Le principal, c'est que tu t'y retrouves. Après, les méthodes de bosser, c'est comme la façon de préparer les pâtes, il y en a un paquet...


WebDesign Communautaire Userbar
Oz'
Oz'
Fondateur
Fondateur

Windows 7 Firefox Photoshop


http://www.illusionart-gfx.com/

Revenir en haut Aller en bas

WebDesign Communautaire Empty Re: WebDesign Communautaire

Message par Aherys le 3/1/2010, 20:16

Je ne l'est pas pris comme une critique, ne t'en fait pas, j'exprimer juste que je m'excuser du fait de vous imposer mon mode de fonctionnement qui pourrais vous perturber quelque peu :p

Etape N°5

WebDesign Communautaire Img-21124040jmz

Ajouts du menu et du menu déroulant,
J'ai souhaiter un style plutôt sobre, et je suis satisfait du résultat, même si je n'exclut pas d'y revenir plus tard.

Le menu déroulant est a l'emplacement du logo, j'ai décider de le faire vers le haut pour éviter de gêner la lecture et surtout pour le flash, le logo disposeras de quelques animations, et le menu seras également codé en flash.

Pour que le tout sois extensible en largeur, l'espace membre et le menu/logo serons deux fichier flash différents.

J'ai également ajouter un lien "Speed Link" il s'agis d'un système qui permet d'avoir des liens en raccourcie, il est relativement discret pour ne pas imposer son utilisation.

Oh j'oublier, je pense que vous avez compris, mais ici, on simule un passage de la souris sur "jeux".
Aherys
Aherys
I.A. Professionel
I.A. Professionel

Système d'exploitation Navigateur Logiciel graphique


http://www.gamershield.com

Revenir en haut Aller en bas

WebDesign Communautaire Empty Re: WebDesign Communautaire

Message par Buldoz le 3/1/2010, 21:01

Ah. Là j'aime pas trop la façon dont sont présenté les catégories dans le menu déroulant là. J'aurais plus vu quelque chose en couleur et avec les catégories un peu séparées mais pas trop net ...
avatar
Buldoz
Banni
Banni

Windows Vista Google Chrome Photoshop


Revenir en haut Aller en bas

WebDesign Communautaire Empty Re: WebDesign Communautaire

Message par Aherys le 3/1/2010, 21:05

Quel menu déroulant ? celui au dessus de Jeu ? ou celui horizontale, a coté de l'espace membre ?
Aherys
Aherys
I.A. Professionel
I.A. Professionel

Système d'exploitation Navigateur Logiciel graphique


http://www.gamershield.com

Revenir en haut Aller en bas

WebDesign Communautaire Empty Re: WebDesign Communautaire

Message par Aherys le 4/1/2010, 00:29

Aherys a écrit:Quel menu déroulant ? celui au dessus de Jeu ? ou celui horizontale, a coté de l'espace membre ?

---------------------------------------------------

Etape N°6

WebDesign Communautaire Img-0129034f6pw

j'ai éclaircie la bar du menu, et rajouter des top, j'ai un peu peur de mélanger trop de style, pour l'instant j'essaye de faire des couleurs vives.

Vos Avis ?
Aherys
Aherys
I.A. Professionel
I.A. Professionel

Système d'exploitation Navigateur Logiciel graphique


http://www.gamershield.com

Revenir en haut Aller en bas

WebDesign Communautaire Empty Re: WebDesign Communautaire

Message par Buldoz le 4/1/2010, 18:34

Désolé de pas répondre ... C'EST LA FAUTE A LA RENTRÉÉÉÉÉ !!
J'aime beaucoup là mais j'aurais bien aimé voir ça avec le menu déroulant sur Jeux (celui dont je parlais Smile)

GO KiKoo2.0 <3 Razz
avatar
Buldoz
Banni
Banni

Windows Vista Google Chrome Photoshop


Revenir en haut Aller en bas

WebDesign Communautaire Empty Re: WebDesign Communautaire

Message par Aherys le 4/1/2010, 19:31

Pas de soucis, le menu déroulant arriveras dés que j'ai le logo, j'ai une nouvelle version, mieux présenter, et plus classe, mais il faut le logo.

En attendant, voici avec quelques rajouts, c'est encore loin d'être finit.

WebDesign Communautaire Img-184837w5h4x
Aherys
Aherys
I.A. Professionel
I.A. Professionel

Système d'exploitation Navigateur Logiciel graphique


http://www.gamershield.com

Revenir en haut Aller en bas

WebDesign Communautaire Empty Re: WebDesign Communautaire

Message par Buldoz le 4/1/2010, 19:33

J'aime beaucoup malgré les fautes d'orthographes Embarassed Le Jeux est mieu comme ça que en bleu je trouve
avatar
Buldoz
Banni
Banni

Windows Vista Google Chrome Photoshop


Revenir en haut Aller en bas

WebDesign Communautaire Empty Re: WebDesign Communautaire

Message par Aherys le 5/1/2010, 00:25

Oui, les fautes sont vraiment la parsque c'est juste des exemples, et que je doit faire du remplissage.

Ajouts du logo + Changements couleurs


WebDesign Communautaire Img-012524uguww

Le logo n'est qu'une remixe du logo officiel (http://www.gamershield.com) pour qu'il s'adapte au header, il n'est pas encore finaliser il manque pas mal de "trait" qui viendrons renforcer un charactere agressif.

j'ai changé les couleurs parsque le bleu étais franchement moche, la c'est plus sobre, peu être plus monotone, mais plus agréable a l'oeil je trouve, le flash viendras mettre un peu de vie dans tout cela Smile

Corrections + ajouts fond news

WebDesign Communautaire Img-0213363n80b

Corrections diverses notamment sur le logo, et les couleurs, ajouts d'un cadre pour la section news et ajouts de quelques sources lumineuses.

Corrections + ajout d'annonces

WebDesign Communautaire Img-134806ujikq

Tout plein de petits détailles ajoutés, une correction du logo pour lui rendre un aspect plus bouclier (on ma fait parvenir qu'on aurais dit une tente ouverte, de face).

J'ai bien travailler l'espace news, je pense que je vais refaire totalement le top des joueurs qui ne s'accorde au finale que trés peu avec le reste du design,

le logo reste un peu vide/peu lisible, je pense que je vais également devoir y rajouter quelques trucs
Aherys
Aherys
I.A. Professionel
I.A. Professionel

Système d'exploitation Navigateur Logiciel graphique


http://www.gamershield.com

Revenir en haut Aller en bas

WebDesign Communautaire Empty Re: WebDesign Communautaire

Message par Buldoz le 5/1/2010, 19:40

J'adore ! Par contre j'ai un petit problème avec la séparation du blanc et du gris entre la carte membre et la barre de menu
avatar
Buldoz
Banni
Banni

Windows Vista Google Chrome Photoshop


Revenir en haut Aller en bas

WebDesign Communautaire Empty Re: WebDesign Communautaire

Message par Aherys le 5/1/2010, 22:38

Quel problèmes ? Pourrais tu donner plus de détaille ?
Une idée pour l'améliorer ?

Etape N°15

WebDesign Communautaire Img-233350wina3

Beaucoup d'ajouts, et donc beaucoup de correction a venir,

Le logo dispose maintenant de petits cercles en forme abstraite pour rajouter un peu a cette zone que je trouve trop vide, le slogan "War Industry" s'integre a présent mieux, moins visible, mais je le préfère comme cela.

Refonte du classement, c'est pas encore ça, mais j'approche de quelque chose qui me satisfait.

Quelques corrections de couleurs/lumières, et des ajouts de "banderole" de dossier, interview...
celle ci sont a corrigé, j'étais au départ partie sur des fond unicolor, malheureusement, même si cela fait plus gai, c'est quelque peu... dérangeant, j'ai donc préférais mettre des images derrières, du coups, le texte est moins visible, mais c'est juste pour la présentation du design, donc bon...
Aherys
Aherys
I.A. Professionel
I.A. Professionel

Système d'exploitation Navigateur Logiciel graphique


http://www.gamershield.com

Revenir en haut Aller en bas

WebDesign Communautaire Empty Re: WebDesign Communautaire

Message par Buldoz le 6/1/2010, 13:08

Bah en fait je sais pas trop comment y remédier. Je parle de la séparation entre la carte du membre et la barre de menu là où il y a jeux etc... J'aurais peut-être vu la lueur externe noir sur la carte de membres à la place de baisser l'opacité m'enfin je sais pas comment t'as fais mais je trouve ça pas super
avatar
Buldoz
Banni
Banni

Windows Vista Google Chrome Photoshop


Revenir en haut Aller en bas

WebDesign Communautaire Empty Re: WebDesign Communautaire

Message par Aherys le 6/1/2010, 14:24

Cela ne fait pas suffisamment "ombre ?" je vais essayer d'y remédier manuellement.

Merci de ton suivie ^^
Aherys
Aherys
I.A. Professionel
I.A. Professionel

Système d'exploitation Navigateur Logiciel graphique


http://www.gamershield.com

Revenir en haut Aller en bas

WebDesign Communautaire Empty Re: WebDesign Communautaire

Message par Oz' le 15/1/2010, 09:59

On attend la suite Aherys Wink


WebDesign Communautaire Userbar
Oz'
Oz'
Fondateur
Fondateur

Windows 7 Firefox Photoshop


http://www.illusionart-gfx.com/

Revenir en haut Aller en bas

WebDesign Communautaire Empty Re: WebDesign Communautaire

Message par Nico' le 15/1/2010, 15:03

Très classe, le design. Sobre, clean Wink

La petite chose qui me choque, c'est la taille de la typo du menu (accueil, jeux, ...). J'aurai vu ça plus petit.
Nico'
Nico'
I.A. Admin
I.A. Admin

Windows Vista Opéra Photoshop


http://chromium-art.deviantart.com

Revenir en haut Aller en bas

WebDesign Communautaire Empty Re: WebDesign Communautaire

Message par Aherys le 15/1/2010, 18:14

Après une petite absence de quelques jours, je suis a nouveau la (travaille personnelle, etc etc..).

Le désign est bien finit, mais un autre designer est venu rajouter une petite retouche, on a donc plusieurs versions du design avec plusieurs elements.

Il est possible d'en voir une partie codés sur http://www.gamershield.com.
Et je la rep-présenterais une fois entièrement codé, avec le flash et le reste.
Aherys
Aherys
I.A. Professionel
I.A. Professionel

Système d'exploitation Navigateur Logiciel graphique


http://www.gamershield.com

Revenir en haut Aller en bas

WebDesign Communautaire Empty Re: WebDesign Communautaire

Message par Contenu sponsorisé


Contenu sponsorisé


Revenir en haut Aller en bas

Revenir en haut


 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum