Le Deal du moment : -8%
Climatiseur réversible mobile BEKO BX112H (3400 ...
Voir le deal
599.99 €

Etapes de Création d'un Webdesign.

Aller en bas

Etapes de Création d'un Webdesign. Empty Etapes de Création d'un Webdesign.

Message par Neon' le 22/2/2011, 21:33

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.

Spoiler:
Etapes de Création d'un Webdesign. Sitev1

https://2img.net/r/ihimizer/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 ?
Neon'
Neon'
I.A. Manager
I.A. Manager

Windows 7 Google Chrome Photoshop


http://neonart74.deviantart.com/

Revenir en haut Aller en bas

Etapes de Création d'un Webdesign. Empty Re: Etapes de Création d'un Webdesign.

Message par Linkyo le 22/2/2011, 22:59

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 Wink

- 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 Wink

Bravo, excellent début. T'as énormément progressé ces derniers mois, c'est hallucinant. Continue comme ça mec Wink
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

Etapes de Création d'un Webdesign. Empty Re: Etapes de Création d'un Webdesign.

Message par Neon' le 23/2/2011, 14:48

Merci Linkyo (:
C'est vrai que j'ai vu un peu grand, je vais réduire tout ça.
Neon'
Neon'
I.A. Manager
I.A. Manager

Windows 7 Google Chrome Photoshop


http://neonart74.deviantart.com/

Revenir en haut Aller en bas

Etapes de Création d'un Webdesign. Empty Re: Etapes de Création d'un Webdesign.

Message par Neon' le 8/3/2011, 19:58

Bien, n'étant plus malade j'ai pu continuer ce webdesign.
Je poste donc la suite, avec les précieux conseils de Linkyo !

Spoiler:
Etapes de Création d'un Webdesign. Site3d

Lien : https://2img.net/r/ihimizer/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.
Neon'
Neon'
I.A. Manager
I.A. Manager

Windows 7 Google Chrome Photoshop


http://neonart74.deviantart.com/

Revenir en haut Aller en bas

Etapes de Création d'un Webdesign. Empty Re: Etapes de Création d'un Webdesign.

Message par Wolf-Bless le 9/3/2011, 21:33

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! Wink
Wolf-Bless
Wolf-Bless
I.A. Professionel
I.A. Professionel

Windows 7 Firefox Photoshop


Revenir en haut Aller en bas

Etapes de Création d'un Webdesign. Empty Re: Etapes de Création d'un Webdesign.

Message par Neon' le 12/3/2011, 17:14

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:
Etapes de Création d'un Webdesign. Site4

Lien : https://2img.net/r/ihimizer/img848/4251/site4.png
Merci pour ton commentaire !
Neon'
Neon'
I.A. Manager
I.A. Manager

Windows 7 Google Chrome Photoshop


http://neonart74.deviantart.com/

Revenir en haut Aller en bas

Etapes de Création d'un Webdesign. Empty Re: Etapes de Création d'un Webdesign.

Message par Nico' le 12/3/2011, 20:23

Perso je ne suis pas très fan de la texture du fond :/
Sinon c'est bien ^^
Nico'
Nico'
I.A. Admin
I.A. Admin

Windows Vista Opéra Photoshop


http://chromium-art.deviantart.com

Revenir en haut Aller en bas

Etapes de Création d'un Webdesign. Empty Re: Etapes de Création d'un Webdesign.

Message par Halfinger le 12/3/2011, 20:33

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)
Halfinger
Halfinger
I.A. Professionel
I.A. Professionel

Windows 7 Firefox Photoshop


http://twitter.com/#!/Halfinger_

Revenir en haut Aller en bas

Etapes de Création d'un Webdesign. Empty Re: Etapes de Création d'un Webdesign.

Message par Neon' le 13/3/2011, 10:31

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 Wink
Neon'
Neon'
I.A. Manager
I.A. Manager

Windows 7 Google Chrome Photoshop


http://neonart74.deviantart.com/

Revenir en haut Aller en bas

Etapes de Création d'un Webdesign. Empty Re: Etapes de Création d'un Webdesign.

Message par Sparks le 13/3/2011, 11:36

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
Sparks
I.A. Maestro
I.A. Maestro

Windows 7 Google Chrome Photoshop


Revenir en haut Aller en bas

Etapes de Création d'un Webdesign. Empty Re: Etapes de Création d'un Webdesign.

Message par Wolf-Bless le 13/3/2011, 13:04

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.
Wolf-Bless
Wolf-Bless
I.A. Professionel
I.A. Professionel

Windows 7 Firefox Photoshop


Revenir en haut Aller en bas

Etapes de Création d'un Webdesign. Empty Re: Etapes de Création d'un Webdesign.

Message par SugAr(t) le 13/3/2011, 13:51

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 ! Smile
SugAr(t)
SugAr(t)
I.A. Amateur
I.A. Amateur

Système d'exploitation Navigateur Logiciel graphique


Revenir en haut Aller en bas

Etapes de Création d'un Webdesign. Empty Re: Etapes de Création d'un Webdesign.

Message par Neon' le 13/3/2011, 14:18

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 Wink
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 !
Neon'
Neon'
I.A. Manager
I.A. Manager

Windows 7 Google Chrome Photoshop


http://neonart74.deviantart.com/

Revenir en haut Aller en bas

Etapes de Création d'un Webdesign. Empty Re: Etapes de Création d'un Webdesign.

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