Etapes de Création d'un Webdesign.
Page 1 sur 1 • Partager •
Etapes de Création d'un Webdesign.
Je vous propose de suivre la création d'un nouveau projet Webdesign (:
J'ai commencé ce soir et en deux heures j'ai déjà organisé un plan, il ne reste plus qu'à réaliser, changer... Modifier, évoluer.
http://img717.imageshack.us/img717/8999/sitev1.jpg
Donc démarrage avec une forme de site. J'essaie de faire quelque chose de moderne, centré et avec bords arrondis. " Outil rectangle arrondis ". L'arrondis du bas est fait avec la sélection ronde > Intervertir > effacer.
Je duplique ma forme pour faire le doublon du bas puis je coupe, toujours avec l'outil sélection, en haut à gauche pour faire très arrondis. Mon calque est noir, je le met en opacité avec un contour noir également en opacité sur un fond cuir que j'ai trouvé sur internet ( J'ai dupliqué la textures et bricolé un peu pour qu'elle remplisse entièrement la page afin de faire un fond ) et que j'ai mis en produit sur un fond gris.
Ensuite lueur verte et bleue des deux côtés de la page en superposition. Gérer l'opacité pour que la couleur ne soit pas trop forte.
Ensuite rajout des premiers cadres d'information avec texte et bannière, menu simple.
Prochaines étapes : Rendre le design moins sombre, avancer la mise en page et rendre le tout plus gai. Evolution du menu de gauche.
Si vous avez des questions, n'hésitez pas (:
Sinon qu'en pensez-vous ? Avez-vous des idées ou des conseils ?
J'ai commencé ce soir et en deux heures j'ai déjà organisé un plan, il ne reste plus qu'à réaliser, changer... Modifier, évoluer.
- Spoiler:

http://img717.imageshack.us/img717/8999/sitev1.jpg
Donc démarrage avec une forme de site. J'essaie de faire quelque chose de moderne, centré et avec bords arrondis. " Outil rectangle arrondis ". L'arrondis du bas est fait avec la sélection ronde > Intervertir > effacer.
Je duplique ma forme pour faire le doublon du bas puis je coupe, toujours avec l'outil sélection, en haut à gauche pour faire très arrondis. Mon calque est noir, je le met en opacité avec un contour noir également en opacité sur un fond cuir que j'ai trouvé sur internet ( J'ai dupliqué la textures et bricolé un peu pour qu'elle remplisse entièrement la page afin de faire un fond ) et que j'ai mis en produit sur un fond gris.
Ensuite lueur verte et bleue des deux côtés de la page en superposition. Gérer l'opacité pour que la couleur ne soit pas trop forte.
Ensuite rajout des premiers cadres d'information avec texte et bannière, menu simple.
Prochaines étapes : Rendre le design moins sombre, avancer la mise en page et rendre le tout plus gai. Evolution du menu de gauche.
Si vous avez des questions, n'hésitez pas (:
Sinon qu'en pensez-vous ? Avez-vous des idées ou des conseils ?


SIGNATURE BY ZEN
DÉCOUVRIR MA PAGE FACEBOOK CREATIONS

Neon'- I.A. Manager

-

Banque
Crédits:


(2/100) -

Re: Etapes de Création d'un Webdesign.
Ca démarre bien.
Comme ça, vite fait, j'dirai ça :
- Rajoute de la couleur sur la typo de ton header. Et travaille la encore un peu, tu y es presque
- le choix des langues est trop bas : je dois scroller pour le voir. Un anglais qui tombera sur la page en français quittera sans scroller si il ne voit pas les boutons tout de suite.
- Le slogan "le cuir dans la peau" fait tâche là. Trouve lui une autre place
- La police des menus ne collent pas avec celle du header. Elles ont des styles trop différents.
- Tes zones de contenu ne ressortent pas assez du fond. Elles manquent de travail aussi, elles sont trop traditionnelles.
- Le site est ultra large.
- Retravaille les ombres de la zone principale de contenu, ça ne s'incruste pas super bien avec le fond...
- Ne touche surtout pas à ton fond, il est parfait
Bravo, excellent début. T'as énormément progressé ces derniers mois, c'est hallucinant. Continue comme ça mec
Comme ça, vite fait, j'dirai ça :
- Rajoute de la couleur sur la typo de ton header. Et travaille la encore un peu, tu y es presque
- le choix des langues est trop bas : je dois scroller pour le voir. Un anglais qui tombera sur la page en français quittera sans scroller si il ne voit pas les boutons tout de suite.
- Le slogan "le cuir dans la peau" fait tâche là. Trouve lui une autre place
- La police des menus ne collent pas avec celle du header. Elles ont des styles trop différents.
- Tes zones de contenu ne ressortent pas assez du fond. Elles manquent de travail aussi, elles sont trop traditionnelles.
- Le site est ultra large.
- Retravaille les ombres de la zone principale de contenu, ça ne s'incruste pas super bien avec le fond...
- Ne touche surtout pas à ton fond, il est parfait
Bravo, excellent début. T'as énormément progressé ces derniers mois, c'est hallucinant. Continue comme ça mec
Re: Etapes de Création d'un Webdesign.
Merci Linkyo (:
C'est vrai que j'ai vu un peu grand, je vais réduire tout ça.
C'est vrai que j'ai vu un peu grand, je vais réduire tout ça.


SIGNATURE BY ZEN
DÉCOUVRIR MA PAGE FACEBOOK CREATIONS

Neon'- I.A. Manager

-

Banque
Crédits:


(2/100) -

Re: Etapes de Création d'un Webdesign.
Bien, n'étant plus malade j'ai pu continuer ce webdesign.
Je poste donc la suite, avec les précieux conseils de Linkyo !
Lien : http://img130.imageshack.us/img130/779/site3d.png
Donc tout d'abord, restructuration du site. Réduction de la largeur et augmentation de la hauteur pour une meilleure navigation sur tous les écrans.
Ensuite j'ai éclaircis le bleu du fond pour rendre l'ensemble moins sombre et j'ai rajouté des ronds de couleur en densité couleur - qui donne un effet plus propre que la superposition etc...
Ensuite je ré-hausse les boutons Anglais et Français que j'ai mis de la même couleur que le reste. ( Une suite de menu est possible )
J'ajoute un bouton rechercher en haut à gauche, c'est le seul endroit ou il est bien je trouve...
Enfin je met une lueur externe bleue clair au texte de la bannière ainsi que deux touches de bleu sur les S et C pour éclaircir tout ça. J'utilise la plume pour la courbe et j'ajoute quelques traits à droite histoire de...
Enfin j'ajoute les droits en bas.
Qu'en pensez-vous ? (:
Perso je suis pas trop fan de ce que j'ai fait pour la bannière donc je pense la recommencer.
Je poste donc la suite, avec les précieux conseils de Linkyo !
- Spoiler:

Lien : http://img130.imageshack.us/img130/779/site3d.png
Donc tout d'abord, restructuration du site. Réduction de la largeur et augmentation de la hauteur pour une meilleure navigation sur tous les écrans.
Ensuite j'ai éclaircis le bleu du fond pour rendre l'ensemble moins sombre et j'ai rajouté des ronds de couleur en densité couleur - qui donne un effet plus propre que la superposition etc...
Ensuite je ré-hausse les boutons Anglais et Français que j'ai mis de la même couleur que le reste. ( Une suite de menu est possible )
J'ajoute un bouton rechercher en haut à gauche, c'est le seul endroit ou il est bien je trouve...
Enfin je met une lueur externe bleue clair au texte de la bannière ainsi que deux touches de bleu sur les S et C pour éclaircir tout ça. J'utilise la plume pour la courbe et j'ajoute quelques traits à droite histoire de...
Enfin j'ajoute les droits en bas.
Qu'en pensez-vous ? (:
Perso je suis pas trop fan de ce que j'ai fait pour la bannière donc je pense la recommencer.


SIGNATURE BY ZEN
DÉCOUVRIR MA PAGE FACEBOOK CREATIONS

Neon'- I.A. Manager

-

Banque
Crédits:


(2/100) -

Re: Etapes de Création d'un Webdesign.
Hey !
Beaucoup d'améliorations sur la version 2 je trouve !
Déjà au niveau de la typo, et puis au niveau du header.
J'aime beaucoup la forme principal, par contre en haut à droite du rectangle principal, pourquoi le rond vert bleue n'est pas coupé en arrondi en suivant la forme du corps principal ?
Et pour finir les quelques traits verts/bleue à droite du header, pourquoi ne passe t-il pas sous le gros trait blanc ? Je pense que ce serai mieux. Et celui ci ne devrait pas ainsi passer sur la typo de "Sellerie Cimes" je pense, enfin c'est mon avis.
Et c'est peut-être une histoire de goût mais je trouve que la typo du menu n'est pas très en accord avec le design général du site, si tu vois ce que j'veux dire !
Bonne continuation!
Beaucoup d'améliorations sur la version 2 je trouve !
Déjà au niveau de la typo, et puis au niveau du header.
J'aime beaucoup la forme principal, par contre en haut à droite du rectangle principal, pourquoi le rond vert bleue n'est pas coupé en arrondi en suivant la forme du corps principal ?
Et pour finir les quelques traits verts/bleue à droite du header, pourquoi ne passe t-il pas sous le gros trait blanc ? Je pense que ce serai mieux. Et celui ci ne devrait pas ainsi passer sur la typo de "Sellerie Cimes" je pense, enfin c'est mon avis.
Et c'est peut-être une histoire de goût mais je trouve que la typo du menu n'est pas très en accord avec le design général du site, si tu vois ce que j'veux dire !
Bonne continuation!

Wolf-Bless- I.A. Professionel

-

Re: Etapes de Création d'un Webdesign.
pourquoi le rond vert bleue n'est pas coupé en arrondi en suivant la forme du corps principal ?
J'avais envie de ne pas trop suivre les formes non plus, histoire que tout ne soit pas trop carré, avec des règles strictes...
Pour les traits du coup je les ai enlevés parce que ça faisait too much. J'ai mis les ronds en opacité et je ferais prochainement une prochaine version rouge / jaune comme le souhaite le créateur du site (:
Normalement le webdesign est terminé à moins que vous ayez d'autres idées ?
- Spoiler:

Lien : http://img848.imageshack.us/img848/4251/site4.png
Merci pour ton commentaire !


SIGNATURE BY ZEN
DÉCOUVRIR MA PAGE FACEBOOK CREATIONS

Neon'- I.A. Manager

-

Banque
Crédits:


(2/100) -

Re: Etapes de Création d'un Webdesign.
Perso je ne suis pas très fan de la texture du fond :/
Sinon c'est bien ^^
Sinon c'est bien ^^

Chromium-art.deviantart.com

Jeremiah ! Je la love ♥

Jeremiah ! Je la love ♥
- Spoiler:

♥ Emma
The Boss is H-S93

Nico'- I.A. Admin

-

Banque
Crédits:


(53/100) -

Re: Etapes de Création d'un Webdesign.
Moi, j'aime beaucoup! J'allais te dire d'enlever cette courbe sur le texte, mais tu l'as fait. x) La texture donne une touche en plus, quelque chose qui change des autres sites, j'adore.
Le seul truc que je trouve qui cloche, mais c'est du chipotage, c'est le mot "Français" qui est trop vers la droite, il touche le bord, je trouve ça dérangeant. x)
Le seul truc que je trouve qui cloche, mais c'est du chipotage, c'est le mot "Français" qui est trop vers la droite, il touche le bord, je trouve ça dérangeant. x)

Halfinger- I.A. Professionel

-

Banque
Crédits:


(4/100) -

Re: Etapes de Création d'un Webdesign.
Merci à tous les deux pour vos commentaires ^^'
Nico', j'ai testé plusieurs fonds cuirs parce que pour moi il était indispensable d'en mettre un, et c'était celui qui allait le mieux. Surtout que la plupart ne sont pas très beaux ou ne sont pas libres de droits.
Halfinger, je vais le décaler, t'as raison
Nico', j'ai testé plusieurs fonds cuirs parce que pour moi il était indispensable d'en mettre un, et c'était celui qui allait le mieux. Surtout que la plupart ne sont pas très beaux ou ne sont pas libres de droits.
Halfinger, je vais le décaler, t'as raison


SIGNATURE BY ZEN
DÉCOUVRIR MA PAGE FACEBOOK CREATIONS

Neon'- I.A. Manager

-

Banque
Crédits:


(2/100) -

Re: Etapes de Création d'un Webdesign.
Niveau couleurs, fond et organisations j'aime bien mais le seul truc qui me parait "tache" je dirais ces la typographie de Sellerie Crimes je trouve que sa fait pas très beau avec le fond je verrais plusse une typographie droite et un peu plus foncée, sinon appart ça sa rend plutôt bien.

Sparks- I.A. Maestro

-

Banque
Crédits:


(0/100)
Re: Etapes de Création d'un Webdesign.
Moi c'que j'chipoterais, c'est la forme en dessous "français", tu devrai redescendre français et anglais, de façon a ce que la forme épouse la ligne droite, et ne soit pas bancal comme sa.
Enfin j'sais pas si tu vois c'que j'veux dire.
Enfin j'sais pas si tu vois c'que j'veux dire.

Wolf-Bless- I.A. Professionel

-

Re: Etapes de Création d'un Webdesign.
Moi aussi, j'vais chipoter. En dessous, les crédits ("réalisé par Julien Poinas [...]") bah ça a même pas la forme du cadre prévu pour... Alors sors ton outil plume et place le texte le long de cette courbe ^^'
Sinon, c'est bien mais j'aime pas la texture du fond, m'enfin pour un site de cuir c'est bien !
Sinon, c'est bien mais j'aime pas la texture du fond, m'enfin pour un site de cuir c'est bien !

SugAr(t)- I.A. Amateur

-

Re: Etapes de Création d'un Webdesign.
Dragovitch a écrit:Niveau couleurs, fond et organisations j'aime bien mais le seul truc qui me parait "tache" je dirais ces la typographie de Sellerie Crimes je trouve que sa fait pas très beau avec le fond je verrais plusse une typographie droite et un peu plus foncée, sinon appart ça sa rend plutôt bien.
Le truc c'est que c'est la typographie de l'entreprise. Celle celle qui a été choisie donc on ne peut pas changer juste pour faire joli
C'est toute une image de marque qu'il y a derrière.
Moi c'que j'chipoterais, c'est la forme en dessous "français", tu devrai redescendre français et anglais, de façon a ce que la forme épouse la ligne droite, et ne soit pas bancal comme sa.
Enfin j'sais pas si tu vois c'que j'veux dire.
Je vois ce que tu veux dire mais je crois que de toute façon je vais modifier ce petit menu de gauche pour qu'il soit plus classe (:
Moi aussi, j'vais chipoter. En dessous, les crédits ("réalisé par Julien Poinas [...]") bah ça a même pas la forme du cadre prévu pour... Alors sors ton outil plume et place le texte le long de cette courbe ^^'
Sinon, c'est bien mais j'aime pas la texture du fond, m'enfin pour un site de cuir c'est bien !
Merci pour l'idée lol
Ca m'était complètement sortit de la tête. A la base j'avais fait la forme avec l'outil forme de PS et comme l'arc était à l'envers, mon texte était toujours à l'envers aussi et du coup je m'étais dit que c'était pas possible.
A en oublier l’intérêt de la plume ! Comme quoi !
Merci pour vos commentaires !


SIGNATURE BY ZEN
DÉCOUVRIR MA PAGE FACEBOOK CREATIONS

Neon'- I.A. Manager

-

Banque
Crédits:


(2/100) -

» 10 etapes pour apprendre le delphi en 7 jours[GARANTIS]
» Création d'un Portail
» Projet de création d'un magasin d'alimentation
» [Résolu] Problème avec un script de création de magazin de compétence
» Création dune boite email personnalisée ou d'une redirection après acquisition dun nom de domaine
» Création d'un Portail
» Projet de création d'un magasin d'alimentation
» [Résolu] Problème avec un script de création de magazin de compétence
» Création dune boite email personnalisée ou d'une redirection après acquisition dun nom de domaine
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum





