AccueilCalendrierFAQRechercherS'enregistrerConnexion

Partagez | 
 

 [Mai] - Atelier Webdesign

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Aller à la page : 1, 2  Suivant
AuteurMessage
Hell Pix
Admin tentaculaire
avatar

Messages : 5642
Date d'inscription : 25/05/2011
Age : 30

MessageSujet: [Mai] - Atelier Webdesign   Ven 2 Mai - 12:08

Concours de mai - Atelier Webdesign

Pour le mois de mai je vous propose un petit atelier artistique qui abordera deux points de base du webdesign: le choix des couleurs et le choix des typographies.

Rien de bien compliqué, je vous rassure: cet atelier ne nécessite de maîtriser que les fonctions de base des logiciels graphiques, principalement l'outil texte, l'outil pipette et pot de peinture, il est donc accessible à tout le monde!

Si vous n'y connaissez rien mais que vous avez envie de participer, c'est tout à fait possible car ces fonctions sont extrêmement faciles à prendre en main, voici deux logiciels gratuits : Photofiltre (simple) et Gimp (plus élaboré).

L'atelier se déroulera de la façon suivante: un "exercice" par semaine, les deux premières semaines traiteront du choix des couleurs pour un design de forum, la 3e semaine du choix d'une typographie et la dernière sera une mise en application des trois précédents.
Revenir en haut Aller en bas
http://www.imaginannuaire.com
Hell Pix
Admin tentaculaire
avatar

Messages : 5642
Date d'inscription : 25/05/2011
Age : 30

MessageSujet: Re: [Mai] - Atelier Webdesign   Ven 2 Mai - 12:26

Exercice 1 - Le choix des couleurs à partir d'une image de base

Choisir des couleurs pour un design de forum, c'est compliqué, car il faut en sélectionner plusieurs, qu'elles aillent bien entre elles, mais aussi qu'elles s'accordent bien avec les images, que ça soit ni trop clair, ni trop sombre, tout en restant lisible et en faisant en sorte que ça ressorte bien sur tous les écrans...

Bref, mettre au point son nuancier n'est pas chose facile pour tout le monde, je ne sais pas pour vous, mais moi autant j'arrive toujours à en trouver une ou deux les doigts dans le nez, mais je galère toujours pour trouver les dernières parce que ça ne va jamais ^^

Je vous propose aujourd'hui la méthode la plus simple pour mettre au point son nuancier de forum, que vous utilisez peut-être déjà: le choix à partir d'une image de base.

Le concept est simple: vous choisissez une image de votre design (le header le plus souvent parce que c'est généralement la plus imposante et celle qu'on voit en premier, mais en pratique rien ne vous empêche d'en prendre une autre) qui va vous servir de palette de base, et vous sélectionnerez toutes vos couleurs sur elle à l'aide de l'outil pipette.
Ainsi, vous aurez un guide dans le choix de vos couleurs et votre design restera harmonieux car votre nuancier aura un fil directeur.

Mise en pratique

Imaginons que vous ayez choisi de prendre cette image pour header: vous devez désormais trouver les couleurs avec lesquelles vous allez décorer votre forum.

Pour cet exercice, je vous propose d'utiliser la méthode décrite précédemment pour remplir ce modèle de forum simplifié.

Vous devrez compléter les éléments suivants:
- Couleur de fond
- Couleur du cadre extérieur du forum
- Couleur intérieure du cadre du forum
- Couleur du fond en-tête catégorie
- Couleur des cellules du forum
- Couleur du texte: à l'endroit où sont placées les lignes, vous devrez rajouter du texte (peu importe le contenu, titre 1 / 2 / 3 feront l'affaire) pour montrer le coloris que vous avez choisi pour les titres.

A vos logiciels graphiques, n'hésitez pas à poser des questions s'il y a des choses qui vous semblent obscures Smile
Revenir en haut Aller en bas
http://www.imaginannuaire.com
Hell Pix
Admin tentaculaire
avatar

Messages : 5642
Date d'inscription : 25/05/2011
Age : 30

MessageSujet: Re: [Mai] - Atelier Webdesign   Sam 3 Mai - 19:28

Voici ma participation:
 
Revenir en haut Aller en bas
http://www.imaginannuaire.com
Tifet

avatar

Messages : 2786
Date d'inscription : 03/10/2011
Age : 30

MessageSujet: Re: [Mai] - Atelier Webdesign   Sam 3 Mai - 21:31

Ma participation:
 
Revenir en haut Aller en bas
Crimi

avatar

Messages : 31
Date d'inscription : 17/12/2013
Age : 24

MessageSujet: Re: [Mai] - Atelier Webdesign   Dim 4 Mai - 23:46

A mon tour !
Ma participation:
 
Revenir en haut Aller en bas
http://sephyrias.forumactif.org/
Acuité Loinvoyant

avatar

Messages : 316
Date d'inscription : 13/06/2013

MessageSujet: Re: [Mai] - Atelier Webdesign   Lun 5 Mai - 7:20

A moi!

Spoiler:
 

Je ne voulais pas un fond gris, car j'avais peur que ce soit trop sombre, alors je suis parti sur l'espèce de lie de vin que j'ai trouvé dans les fleurs.
Mais j'aimais bien le vert un peu pétant de l'herbe qui ressort beaucoup sur l'image, alors je fais un rappel avec le cadre. ( Initialement j'avais essayé en entête et tout mais c'était bien trop flashy à mon gout).

Je me suis servi des tons gris clair du fond de l'image pour le fond de texte (des cellules), et d'un ton gris plus soutenu pour le cadre intérieur.
Pour l'entête, je reprend mon lie de vin, parce que je pense qu'il ne faut pas s'éparpiller niveau couleur.
De la même façon, je reprend mon gris foncé pour la couleur des titres, pour lesquels j'utilise une typo italique pour l'aspect un peu romantique. (l'image me fait penser à ça ^^)
Ma palette finale ne se compose que de 3 couleurs + le cadre vert.

Je ne connaissais pas GIMP, j'ai toujours bossé sur photoshop, alors c'était une vrai découverte. ^^
Voilà voilà, désolée pour toutes les explications lol
Revenir en haut Aller en bas
http://laterredesanciens.forumactif.org/
Hell Pix
Admin tentaculaire
avatar

Messages : 5642
Date d'inscription : 25/05/2011
Age : 30

MessageSujet: Re: [Mai] - Atelier Webdesign   Jeu 8 Mai - 12:12

L'exercice suivant sera posté ce week-end, je précise que les participations par la suite seront toujours ouvertes et qu'il suffira de rattraper le "retard" en produisant tout de même l'intégralité des pièces demandées ^^
Revenir en haut Aller en bas
http://www.imaginannuaire.com
Invité
Invité
avatar


MessageSujet: Re: [Mai] - Atelier Webdesign   Jeu 8 Mai - 12:37

Je suis une totale novice, j'ai téléchargé Gimp exprès pour essayer de faire cet atelier et j'avoue que ça ne m'a pas déplu d'essayer de me dépatouiller avec !
Voici donc ma modeste participation !

Spoiler:
 
Revenir en haut Aller en bas
Hell Pix
Admin tentaculaire
avatar

Messages : 5642
Date d'inscription : 25/05/2011
Age : 30

MessageSujet: Re: [Mai] - Atelier Webdesign   Dim 11 Mai - 12:31

Ce que je trouve intéressant dans vos différentes participations, c’est qu’avec un schéma identique et une même image on arrive à avoir des ambiances complètement différentes avec le choix des couleurs : certaines compositions ont une ambiance plutôt poétique, d’autres mystérieuses…
Je trouve même que celle d’Acuité a un petit côté joyeux, alors qu’on part quand même avec une image de cimetière, comme quoi il ne faut jamais sous-estimer le pouvoir feng-shui de la couleur Very Happy

Avant de lancer l’exercice suivant, je vais exposer quelques généralités / conseils / astuces pour le choix des couleurs sur un forum ou un site web, je m'excuse d'avance pour le blabla, mais si la théorie ne vous intéresse pas je vous invite à passer directement à l'étape suivante Razz

Quelques généralités sur les couleurs web

- Il faut toujours garder en tête que les couleurs ressortent différemment selon les écrans, il faut donc prendre ses décisions avec beaucoup de précautions… Par exemple il vaut mieux jouer la sécurité avec un ensemble de couleurs classiques mais qui ont des chances de bien ressortir partout (par exemple un camaïeu d’une même couleur) que de vouloir tenter un cocktail « audacieux mais harmonieux » chez vous qui ressortira « kitsch comme la nappe de mémé Suzette » chez les autres Razz

Avant de publier un design, il est bien évidemment conseillé de le tester sur le maximum d’écrans possibles pour éviter les mauvaises surprises, sans négliger les smartphones et les tablettes.

- Les couleurs neutres ou non-couleurs sont vos amies : blanc/noir/gris/beige.
Elles ont plusieurs avantages : elles ressortent pareil sur tous les écrans, le blanc est toujours blanc, le noir toujours noir et le gris toujours gris (si vous prenez du vrai gris, composé uniquement de noir et de blanc et sans couleur).

Comment reconnaître un « vrai » gris ? En général le vrai gris a un code hexadécimal dans votre logiciel graphique composé d’une alternance de deux numéros uniquement.
Exemple : Un vrai gris en #525252, un faux gris en #434e51

Les beiges peuvent éventuellement jouer quelques tours, car ils peuvent ressortir plus ou moins gris / rosés suivant les écrans, mais globalement c’est une couleur qui ne bouge pas beaucoup car elle est très peu saturée.

Un autre avantage des neutres : personne ne les déteste, à la limite on trouvera certaines personnes qui ne sont pas fans, mais ces couleurs déclenchent généralement peu de réactions de rejet virulentes.

Inconvénients : les neutres sont neutres, c'est-à-dire qu’ils manquent un peu de personnalité. Si on choisit de réaliser un design uniquement à base de neutres, il va falloir être extrêmement précis sur son choix d’images et de codage pour insuffler une personnalité au forum et ne pas avoir un visuel fade.

- Les couleurs vives
Les goûts et les couleurs, ça ne se discute pas, donc peu importe les couleurs que vous choisirez, ça ne plaira pas à tout le monde ^^ Néanmoins, voici quelques petits conseils pêle-mêle pour limiter la casse :

• Les couleurs passent différemment sur les écrans, et plus elles seront saturées (vives) plus ce phénomène sera flagrant. Pour minimiser les écarts, vous pouvez miser sur des coloris plus pastels (qui tirent vers le blanc) ou « ternis » (qui tirent vers le gris), ou encore foncés (qui tirent vers le noir).
Ce phénomène s’explique tout simplement par celui décrit plus haut : le blanc, le gris et le noir ressortent pareil chez tout le monde, donc plus il y en aura dans votre couleur, plus elle sera « stable ».


• Certaines couleurs sont plus populaires que d’autres : le bleu plait à peu près à tout le monde, le jaune, le vert et le rose beaucoup moins (ceci n’est pas du tout une donnée scientifique, c’est le résultat de mes enquêtes personnelles ^^).
Une bonne alternative consiste à « diluer » la couleur choisie avec des neutres pour la rendre plus douce et moins omniprésente : un forum tout vert va faire dresser beaucoup de cheveux sur les têtes, tandis qu’un forum beige avec un cadre vert beaucoup moins… Au risque d’être plus classique, à vous de trouver le bon compris !

• A titre informatif, le violet est sans doute LA couleur la plus casse-gueule, parce que selon les écrans il peut ressortir rose ou marron, il faut donc avoir conscience de ces variations possibles si on choisit cette teinte.
- Les couleurs web-safe : il existe une palette de 216 couleurs spécialement travaillées pour le web et qui sont étudiées pour ressortir de la même façon sur tous les écrans. Ces couleurs sont à privilégier si vous avez un doute :
N.B : Sur Photoshop, ces couleurs sont directement accessibles dans la palette en cliquant sur « Couleurs web uniquement » (cf l'image ci-dessus). Je ne sais pas si cette fonctionnalité existe sur les autres, si c’est le cas dites-le moi Smile

Exercice de la semaine : Les sites de choix de couleur

Après le petit laïus théorique, venons-en aux faits : il existe sur le web quelques sites qui ont pour vocation de vous aider dans vos choix de couleurs. Dans le précédent exercice, on voyait comment établir sa palette à partir d’une image, là il s’agira de la démarche inverse : choisir sa palette de couleur en premier lieu pour adapter les images ensuite.

http://colorschemedesigner.com/

Ce site vous permet d’établir une palette à partir d’une couleur de base.
Il fonctionne selon le principe du cercle chromatique, voici donc un petit complément théorique sur les couleurs pour comprendre son fonctionnement :
Le cercle chromatique et ses applications:
 

Dans le menu en haut à droite, vous pouvez avoir accès à différentes fonctions:
- Une palette aléatoire (Random > Randomize palette)
- L’option « Colorblind » vous permet de sélectionner des couleurs en fonction des différentes pathologies concernant la vision des couleurs (daltonisme par exemple),
- Colorspace vous permet de sélectionner votre palette de base (si vous voulez toutes les couleurs, ou couleurs web uniquement)
- Export vous permet, une fois votre choix effectué, d’avoir le récapitulatif des codes de couleur en hexa en cliquant sur « html+css » (très pratique si on veut installer ces couleurs dans un design forumactif).

http://www.colourlovers.com

Ce site vous propose des palettes de couleurs déjà établies par les membres, avec les codes couleurs correspondants.

Vous pouvez effectuer des recherches par thème, et une fois la palette de vos rêves sélectionnée, vous pouvez créer un pattern (= motif répétitif pouvant servir de texture ou de fond ) entièrement personnalisable en cliquant sur « Create a pattern » (situé sous la palette). Vous aurez le choix parmi un bon nombre de motifs, classés par thèmes (possibilité de recherche par mots-clés) et vous pourrez customiser les couleurs unes par unes.

Un exemple de design réalisé à partir de la palette Victorian Chrismas (choix des couleurs + pattern du fond).

Exercice de la semaine

Vous avez décidé de faire des changements de design saisonniers pour votre forum. Mettez au point les différentes palettes de l’année 2015 en vous aidant des deux sites cités précédemment .
Vous pouvez utiliser les deux, ou un seul,  mais vous devrez expliquer brièvement la méthode qui vous a permis d’obtenir chaque nuancier.

Le modèle à compléter
Revenir en haut Aller en bas
http://www.imaginannuaire.com
Hell Pix
Admin tentaculaire
avatar

Messages : 5642
Date d'inscription : 25/05/2011
Age : 30

MessageSujet: Re: [Mai] - Atelier Webdesign   Dim 11 Mai - 13:01

Voici ma participation:
 
Revenir en haut Aller en bas
http://www.imaginannuaire.com
Acuité Loinvoyant

avatar

Messages : 316
Date d'inscription : 13/06/2013

MessageSujet: Re: [Mai] - Atelier Webdesign   Mar 13 Mai - 8:17

Ma particpation :
Spoiler:
 
Revenir en haut Aller en bas
http://laterredesanciens.forumactif.org/
Invité
Invité
avatar


MessageSujet: Re: [Mai] - Atelier Webdesign   Mar 13 Mai - 14:15

Et voici ma contribution :]

Spoiler:
 
Revenir en haut Aller en bas
Hell Pix
Admin tentaculaire
avatar

Messages : 5642
Date d'inscription : 25/05/2011
Age : 30

MessageSujet: Re: [Mai] - Atelier Webdesign   Dim 18 Mai - 14:21

Le texte sur les forums

Le texte sur les forums est à la fois une composante pratique et esthétique et on bénéficie d’un grand choix de polices pour pouvoir réaliser un site à la fois beau et lisible.

Sur les forums, il existe deux types de polices d’écriture :

- Les polices usuelles, celles qui forment le corps du forum et tous les écrits qui le composent
- Les polices décoratives que l’on peut utiliser sur le header et les diverses images du forum.

• Comment installer une police personnalisée ?

Le site le plus connu est Dafont, mais il en existe d’autres, comme la section "font" de Deviantart. Une fois la police de nos rêves sélectionnée, il suffit de la télécharger, de la dézipper et l’installer via un clic droit (sur pc du moins, je ne sais pas comment ça fonctionne sur mac ^^)

• Les polices usuelles

Elles se paramètrent via le panneau admin  Affichage > Images et Couleurs > Couleurs, et dans la partie « Couleur et taille du texte » on peut observer 3 champs : police titre (celle utilisée pour le titre de votre forum, si vous avez désactivé son affichage elle ne correspond plus à rien) / police principale (comme son nom l’indique, elle correspond à tous les textes du forum) / police code (la police pour le texte entré entre les balises code).

En théorie, on peut choisir n’importe quelle police, mais en pratique, il vaut mieux choisir des polices lisibles et surtout très classiques ; Arial, Times New Roman, Calibri par exemple.
En effet, si vous choisissez une police un peu originale et que cette dernière n’est pas installée chez un utilisateur, elle sera automatiquement remplacée par une autre de la même famille. C’est la raison pour laquelle vous pouvez lire, dans le panneau admin :


Comme ça, si la police que vous avez choisi en premier lieu n’est pas disponible chez l’utilisateur, vous pouvez choisir celle qui la remplacera, et ainsi de suite, d’où l’intérêt de choisir directement une police répandue : cela vous permettra de maîtriser votre affichage, d’autant que la combinaison police + taille est déterminante pour le confort de lecture.  
Prendre le risque d’être affiché avec une police différente de celle qu’on a choisie avec la taille qu’on a choisie (et qui restera la même indépendamment de la police affichée) expose au risque d’avoir un texte trop petit et pas lisible, ou trop gros et peu esthétique.

• Les polices décoratives

Lorsqu’on utilise un texte au format image, la question de la compatibilité avec le stock de polices de l’internaute ne se pose pas, on a donc une palette de choix beaucoup plus large.

Le facteur le plus important dans le choix d’une police décorative est qu’elle reste lisible, et de ne pas trop en abuser : on peut en mettre sur un header, sur la barre de navigation par exemple mais il faut éviter de s’en servir  pour remplacer du « vrai texte », pour présenter le contexte sur le message d’accueil par exemple.
En effet, les personnes ayant des troubles de la vision ne pourront pas lire ce qu’il y a marqué dessus, car elles ne pourront pas changer de mode d’affichage pour un qui leur conviendra mieux, et les images brutes ne sont pas prises en compte par les traducteurs en braille.

Exercice de la semaine

Vous devez choisir un cocktail de polices pour ce forum en suivant ce modèle-ci.
Bien entendu, le placement du titre et du sous-titre dans l'image est libre, vous devrez faire attention au choix des polices, mais aussi à leur taille et leur couleur!
Comme ce qui nous importe est le texte en lui-même et pas ce qu'il raconte, je vous invite à utiliser un générateur de faux texte si vous ne vous sentez pas l'âme créative pour inventer le contenu ^^

Je précise qu'il est possible pour les retardataires de prendre le train en cours de route s'ils fournissent les exos manquants Smile
Revenir en haut Aller en bas
http://www.imaginannuaire.com
Tifet

avatar

Messages : 2786
Date d'inscription : 03/10/2011
Age : 30

MessageSujet: Re: [Mai] - Atelier Webdesign   Lun 19 Mai - 16:59

Ma participation à l'exercice précédent

Spoiler:
 

Et du coup, le dernier exo
Spoiler:
 
Revenir en haut Aller en bas
Hell Pix
Admin tentaculaire
avatar

Messages : 5642
Date d'inscription : 25/05/2011
Age : 30

MessageSujet: Re: [Mai] - Atelier Webdesign   Lun 19 Mai - 17:33

Participation de la semaine:
 
Revenir en haut Aller en bas
http://www.imaginannuaire.com
Acuité Loinvoyant

avatar

Messages : 316
Date d'inscription : 13/06/2013

MessageSujet: Re: [Mai] - Atelier Webdesign   Mer 21 Mai - 8:35

Participation de la semaine :
Spoiler:
 
Revenir en haut Aller en bas
http://laterredesanciens.forumactif.org/
Hell Pix
Admin tentaculaire
avatar

Messages : 5642
Date d'inscription : 25/05/2011
Age : 30

MessageSujet: Re: [Mai] - Atelier Webdesign   Dim 25 Mai - 13:20

Synthèse : Relooker un forum

La dernière épreuve de ce concours va vous permettre de synthétiser les différents points abordés au sujet du webdesign: vous allez devoir relooker un forum.

• 1ère étape: Créer le forum en question

Pour cela c'est très simple, il vous suffit de créer un forum chez forumactif en version Phpbb2 avec le design de base suivant: http://fr.hitskin.com/?afolder=theme&id=185661

Pour cela deux méthodes s'offrent à vous: vous pouvez le créer puis installer le thème sur votre forum-concours à l'aide de l'option correspondante, ou bien le créer directement à partir de cette page.
A noter que pour créer ce forum de concours vous avez uniquement besoin d'une adresse mail qui n'a pas déjà servi à créer de forum et que vous pourrez tout à fait le supprimer une fois le concours terminé, ou bien le recycler en forum de test graphique, à vous de voir ^^

• 2e étape: Le choix des couleurs

A l'aide des méthodes exposées les semaines précédentes, vous allez revoir les couleurs somme toutes basiques de ce thème, en supprimant l'image de fond et les images des fonds de titres et de catégories pour les remplacer également par les couleurs de votre choix. Vous pouvez également supprimer les images de la barre de navigation si cela vous arrange.

Lieu des opérations: Panneau admin > Affichage > Images et couleurs > Couleurs > Sections Couleurs et taille du texte / Les couleurs de fond / Les contours (La galerie ne sera pas visible et la barre de défilement en l'est pas non plus sur tous les navigateurs, donc on s'en fiche)
Pour supprimer les images de base: Panneau admin > Affichage > Images et couleurs > Gestion des images > Mode avancé > Premier onglet.

• 3e étape: Le choix des polices

Pour peaufiner le relooking vous allez devoir choisir les polices de ce forum et leur taille, toujours sur la même page du panneau admin (vous pouvez laisser tomber ce qui concerne la partie code, les deux premières suffiront).
Vous devrez également rajouter un titre et un sous-titre de votre choix sur le header de ce forum pour finaliser le tout (comme pour la semaine dernière peu importe le texte, c'est le look qui compte!)

Vous avez jusqu'au jeudi 5 juin pour présenter votre forum, ainsi que les épreuves que vous avez manqué si vous êtes en retard.

Bon graphitage!  cheers
Revenir en haut Aller en bas
http://www.imaginannuaire.com
Hell Pix
Admin tentaculaire
avatar

Messages : 5642
Date d'inscription : 25/05/2011
Age : 30

MessageSujet: Re: [Mai] - Atelier Webdesign   Dim 25 Mai - 14:17

Ma participation: http://hellpix.jdrforum.com/

Couleurs: J'ai choisi les couleurs de la palette Medieval Luxuries, car j'ai trouvé que l'association des coloris marron/bleu s'accordait bien avec l'ambiance de l'image très terre/eau et était plus doux pour le regard que l'espèce de duo marron/vert pomme de départ.

Police: Pour la police du forum j'ai choisi Calibri parce que je l'aime bien, et j'ai gardé la couleur par défaut du design parce qu'il se trouve qu'elle se mariait bien avec les couleurs de fond.

Pour le header j'ai choisi la police Augusta car je trouve qu'un type d'écriture de style gothique se marie bien avec l'ambiance médiévale, et je l'ai inclinée en suivant une des lignes de l'image pour casser le côté un peu trop "strict".
Revenir en haut Aller en bas
http://www.imaginannuaire.com
Acuité Loinvoyant

avatar

Messages : 316
Date d'inscription : 13/06/2013

MessageSujet: Re: [Mai] - Atelier Webdesign   Dim 25 Mai - 18:19

Question : est-ce que je peux utiliser un forum que j'ai déjà en tant que brouillon graphique?
J'ai pas d'autres adresse mail pour créer un nouveau forum !
Revenir en haut Aller en bas
http://laterredesanciens.forumactif.org/
Hell Pix
Admin tentaculaire
avatar

Messages : 5642
Date d'inscription : 25/05/2011
Age : 30

MessageSujet: Re: [Mai] - Atelier Webdesign   Dim 25 Mai - 18:26

Tu peux mais il va falloir supprimer tous les templates personnalisés et le code CSS pour que ça sorte sans mise en forme "parasite" ^^
Revenir en haut Aller en bas
http://www.imaginannuaire.com
Invité
Invité
avatar


MessageSujet: Re: [Mai] - Atelier Webdesign   Mer 28 Mai - 17:00

Sorry pour mon retard, j'étais pas mal occupée   

Voici l'avant-dernier exercice et puis j'essaye de faire le dernier ce soir ou demain ♥️

Spoiler:
 


Edit : Et voilà le dernier exercice (enfin!).

http://concours-imaginarium.forumactif.org/

Couleurs : J'ai choisi la palette Dead City sur colourlovers.com, parce que je trouvais que les couleurs se mariaient particulièrement bien avec celles du header. C'est plutôt sombre, comme j'aime, mais avec des touches pastelles qui ajoutent un peu de douceur à l'ambiance calme de la ville.

Police : Pour le header, j'ai choisi la police 'Cartographer' pour le titre et 'Black knight' pour le sous-titre. Deux polices médiévales que j'ai trouvées sur Dafont en l’occurrence. Quant aux polices de texte, j'ai mis du 'Georgia' tout simplement, parce que c'est une de mes polices fétiches et qu'elle ne dénote pas avec le reste du forum. Au niveau de la couleur du texte, j'ai repris la couleurs la plus foncé de la palette de fond, en l'assombrissant un peu encore.

Voilà, voilà !

C'était très sympa en tout cas et j'ai beaucoup appris Wink
Merciii  révérence 
Revenir en haut Aller en bas
Hell Pix
Admin tentaculaire
avatar

Messages : 5642
Date d'inscription : 25/05/2011
Age : 30

MessageSujet: Re: [Mai] - Atelier Webdesign   Dim 1 Juin - 14:09

Petit rappel: vous avez jusqu'à jeudi pour terminer le concours!   
Revenir en haut Aller en bas
http://www.imaginannuaire.com
Tifet

avatar

Messages : 2786
Date d'inscription : 03/10/2011
Age : 30

MessageSujet: Re: [Mai] - Atelier Webdesign   Dim 1 Juin - 16:36

http://testtifet.super-forum.net/
(ne tenez pas compte des forums déjà présents, ainsi que des groupes, etc... ceci est un viiieux forum qui me sert de test maintenant)

Couleurs :
J'ai créé ma propre palette à partir de l'image de base :

Certaines couleurs (les roses surtout) sont des versions plus lumineuses de ce qui se trouve sur l'image (ma pipette me les donnait bien plus foncés)

Police
Pour le corps du texte, je reste sur le Verdana simple (taille 11 pour le texte simple, 13 pour les titres)
Pour le header, j'ai choisi la police Stonehenge pour son côté ancien et parce que j'aime bien la courbure des lettres. En deux tailles différentes et avec même des couleurs de bordure différentes pour accentuer.
J'ai utilisé les mêmes nuances de couleur que la palette : gris pour le texte et les roses pour les titres et liens.
Revenir en haut Aller en bas
Acuité Loinvoyant

avatar

Messages : 316
Date d'inscription : 13/06/2013

MessageSujet: Re: [Mai] - Atelier Webdesign   Mar 3 Juin - 9:41

Allez c'est parti! J'ai retrouvé mon photoshop adoré <3

http://testgraphiqueimagina.forumactif.org/

Bon finalement j'ai créée un nouveau forum pour le concours que je garderait pour mes test.

Couleurs : Alors niveau couleur, je dois avouer être un peu parti dans tous les sens.
Au début, je suis partie des couleurs de l'image, mais au final, ça ne me convenait pas. Le style me faisait penser à un univers un peu steampunk au début, alors j'ai cherché des palettes en ce sens. Puis en fait j'ai fait un peu un mix de tout ce que j'ai trouvé ( plusieurs palettes+ pipette image), et je trouve que cela fonctionne mieux comme ainsi.

Texte : Pour le header, j'ai utilisé PMingLiU-ExtB, je voulais un aspect "tappé à la machine vieillot", et j'ai gardé cet esprit bouquin avec la police Bookman Old Style pour le reste.

Voilà, que dire hormis que j'ai bien galéré XD mais que l'exercice était vraiment bien mené. On peut dire que cet atelier m'aura apprit beaucoup. Merci bien!
Revenir en haut Aller en bas
http://laterredesanciens.forumactif.org/
Hell Pix
Admin tentaculaire
avatar

Messages : 5642
Date d'inscription : 25/05/2011
Age : 30

MessageSujet: Re: [Mai] - Atelier Webdesign   Lun 9 Juin - 10:38

Atelier Webdesign - Les votes

Il est désormais temps de voter pour le book le plus convaincant!

Voici un petit récapitulatif des différents exercices imposés:

Épreuve 1: Choisir les couleurs pour ce modèle de forum à partir de l'image du header.
Épreuve 2: Mettre au point des palettes de couleurs pour des designs sur le thème "4 saisons" à partir de sites spécialisés
Épreuve 3: Choisir des polices pour ce modèle de forum
Épreuve 4: Relooker ce thème de base

Voici les différentes participations:

Book de Hell Pix

Epreuve 1:
 

Epreuve 2:
 

Epreuve 3:
 

Epreuve 4


Book de Tifet

Epreuve 1:
 

Epreuve 2:
 

Epreuve 3:
 

Epreuve 4


Book d'Acuité

Epreuve 1:
 

Epreuve 2:
 

Epreuve 3:
 

Epreuve 4


Book de Betty

Epreuve 1:
 

Epreuve 2:
 

Epreuve 3:
 

Epreuve 4
Revenir en haut Aller en bas
http://www.imaginannuaire.com
Contenu sponsorisé




MessageSujet: Re: [Mai] - Atelier Webdesign   

Revenir en haut Aller en bas
 
[Mai] - Atelier Webdesign
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 2Aller à la page : 1, 2  Suivant
 Sujets similaires
-
» [Mai] - Atelier Webdesign
» Vu sur Modelrailroader
» réparation garmin Canada
» Quand la Renault ZOE électrise l'usine De Flins
» L'atelier d'une banane qui se prend pour une carotte C: [1/2 libre]

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
L'Imaginarium :: LE MARCHE AUX PUCES :: 
Concours
 :: Concours 2014
-
Sauter vers: