Réaliser un WebDesign clean en étant débutant
-
Bonjour,
Aujourd'hui je décide de faire un tutoriel assez complet pour mieux vous expliquer les bases du WebDesign/Graphisme et de vous aider à vous lancer sur divers logiciels de PAO mais je vais parler plus précisement des deux logiciels les plus importants "Adobe Photoshop" & "Adobe Illustrator".
1- WebDesign ? Quesako ??
Le WebDesign comme vous pouvez le lire par vous même c'est la conception de l'interface web
Je m'explique mieux, avant de developper n'importe quel site il faut d'abord avoir fait la maquette et c'est le WebDesigner qui va s'en occuper il va constituer une maquette complète du site web en image.
C'est grace aux WebDesigners que tous les sites où vous naviguer actuellement ont un design exceptionnel, chaque sites web ont leurs structure personnelle.
2- L'organisations des calques
Déjà pour travailler je pense que le plus important a mes yeux c'est l'organisation des calques, s'ils sont mélangés et pas renommer il est impossible de travailler.
C'est pour cela que je vous conseille de les organisaient en créant des "groupes" sur photoshop ou bien "calques" sur illustrator.
Vous pouvez y voir un exemple d'une maquette que j'ai réaliser y'a quelques jours: http://imageswl.fr/i/BEABIHJHCFM
L'entête sera le haut du site (souvent appeler la bannière) > Le menu seras tous les textes où ont y place tes onglets comme "Accueil, Contact, Nos services, ..." le pied sera le bas du site (souvent appeler footer) > Puis après tout ce qui est expertise est autre ce sont les différents emplacements de divers widget.
Le plus important seras donc de faire un dossier où calque avec Entête > Menu > Pied c'est le strict minimum.
Si ce point et acquis alors vous pourrez travailler plus simplement et organiser.
3- Les couleurs
Il est aussi très important dès le début de votre maquette de choisir la bonne couleur, il en existe des millions c'est pour cela qu'il faut une couleur qui donne envie à l'oeil, donc surtout éviter les couleurs fluo (flash) et rester dans la simplicité.
Pour cela je vais vous donner mon pack de nuancier spécialement pour le web, dedans il y a 68 palettes de nuancier toutes différentes.
Aperçu des nuanciers: http://imageswl.fr/i/BEABIIAJHCM
Lien de téléchargement: http://ge.tt/2EJrowi1/v/0
4- Les ressources graphique
Débutant ? Ce n'est plus un souci maintenant nous pouvons créer un design très professionnel sans savoir trop utiliser les logiciels de PAO !
Mais comment ? Alors donc il existe des sites de "Ressources". C'est quoi sa ?
Des sites qui regroupent des tonnes de .psd ou .ai ou dedans y ai intégrer des menus, icons, enfin vraiment de tout qui est déjà fait, quelques modifications vous le mettez sur votre calque a vous il sa s'intègre parfaitement.
Voici un exemple de ressource: http://imageswl.fr/i/BEABIHJHJJM
Tous les différents modules comme le "Slider" "Top games" etc ... sont tous modifiables comme si c'était vous qui l'avait enregistrer en .psd pour le modifier au cas où.
Il y a des UI KIT 100% gratuit qui traînent sur le net, en gros des UI KIT sont des éléments comme je t'ai montrer sur la screen mais pour les sites web car sur les sites de ressources tu as vraiment de tout.
Voici des exemples:
www.365psd.com (Ils rajoutent une ressource tout les jours il est déjà très bien remplis, je l’utilise très souvent c'est le mieux pour moi)
www.smashfreakz.com/category/resources
www.ui-cloud.com/free-ui-elements
www.freebiesbug.com/psd-freebies
5- Les sources d'inspirations
Il y a des tonnes de sources d'inspirations sur le web ce n'est pas ce qu'il manque, heureusement que ce genre de sites est la pour nous quand ont a plus d'idées pour un concept on va faire un tour sur ces sites puis quelques minutes après on est repartis pour quelques heures de créations.
Voici des exemples:
www.webdesign-inspiration.com (Celui que je trouve le plus complet que j'utilise très souvent)
J'allais oublier voici une liste de 200 sites indispensables pour un Graphiste:
www.dubostbenoit.com/influences
Voilà j'espère que je vous aurais bien aider, et que maintenant vous êtes prêt pour votre première maquette !
Je tiens aussi à m'excuser des fautes que j'ai pu faire mais l'orthographe, la conjugaison c'est pas mon truc.
Tutoriel entièrement rédiger par Swan merci de respecter mon travail et de ne pas redistribuer ce tutoriel sans mon autorisation - 2014. -
Merci pour ce petit tuto ( et les ressources
), ça pourra me servir en tant que débutant. 
-
Merci pour ce petit tuto ( et les ressources
), ça pourra me servir en tant que débutant. Ce fut un plaisir B)
-
Très bon sujet, bien expliqué et utile.
Cependant, je ne sais pas si c'est toi ou pas, mais on a recopié ton sujet ici, malheureusement. -
Je suis un petit novice dans le web design, et j'ai réalisé moi même un petit site, que vous pourrez trouver dans ma signature, il s'agit d'un site que j'ai fais bien entendu de 0, grâce à photoshop cs6 et webweaver, et c'était assez simple
-
Bonjour ! Vous semblez intéressé par cette conversation, mais vous n’avez pas encore de compte.
Marre de refaire défiler les mêmes messages ? Créez un compte pour retrouver votre position, recevoir des notifications des nouvelles réponses, sauvegarder vos favoris et voter pour les messages que vous appréciez.
Grâce à votre participation, ce message peut devenir encore meilleur 💗
S'inscrire Se connecter