Bonjour,

Si je suis à mon aise sur Photoshop, Illustrator et InDesign, il n'en est pas de même pour le web...

Jusqu'à présent, j'avais réalisé un site qui tenait à peu près debout ou tout du moins dont la présentation me correspondait (bien qu'il n'a pas été très simple de réaliser la partie centrale droite). J'avais tâcher de prévoir à l'avance les besoins mais dans mon évolution, j'ai vu que mon site web était un peu petit peu casse pied dans sa navigation.

Ce dernier possède une petite douzaine de pages et j'en ai bien assez comme cela. Cela se résume principalement à 5 pages qui regroupe une thématique générale avec pour chaque page des petites rubriques présentant mon travail.

Ce sont ces petites rubriques que je souhaiterai moderniser si je puis dire. En effet, j'ai constaté que dans son utilisation, deux soucis se posaient :
* Le premier c'est que la navigation est fastidieuse et si elle l'est pour moi, elle l'est aussi pour les autres... surtout pour les autres.
* Et puis en améliorant la rubrique "Print", j'ai souhaité ajouté des petits fichiers *swf dans mes "diaporamas" qui représentent des petits journaux ou brochures que l'on peut feuilleter. Seulement, ces derniers se sont mal placés sur mes rubriques, qu'il y a un bug et que je ne sais absolument pas résoudre le problème.

J'aimerai donc le dépoussiérer un petit peu et lui donner un petit coup de jeune.
Et si j'ai les idées, la partie technique me fait sérieusement défaut...

Aussi, j'ai modifié mon webdesign et voici donc la page telle que je souhaiterai qu'elle soit (ou tout du moins la plus proche de se résultat là !).

upload/61932-page-00-20.jpg

A cette image, j'aimerai vous exposer les petites contraintes qui en découlent.
* Les flèches de navigation en bas à droite de l'image permettent de faire défiler les différentes images.
* En même temps, le carré évidé rouge bouge pour indiquer l'emplacement de l'image dans le petit "diaporama".Lorsqu'on change d'image, le carré évidé rouge redevient gris et le carré évidé rouge passe au carré suivant.
* De plus, si un utilisateur souhaite cliquer directement sur un carré évidé gris, qu'il puisse atteindre directement l'image concernée.
* Le nombre de carré évidés varient suivant les petites rubriques.
* Je souhaite placé dans la page "Print" pour certaines petites rubriques une icône "petit livre" qui remplacerait le dernier carré évidé dans la ligne pour indiquer qu'il y a une petite brochure à feuilleter. Le petit livre renverrait donc à un fichier *.swf à l'intérieur même de ce diaporama (à la place des images *.png).

A savoir que :
* Plusieurs fichiers *swf seront sur la même page "PRINT" (il pourra éventuellement y avoir 2 fichiers *.swf pour une même petite sous rubriques dans la page "Projets").
* La page "Print" n'aura pas obligatoirement un fichier *swf dans chaque petite sous-rubrique. Même chose pour la rubrique "Projets".

Interrogation personnelle :
Est ce que pour vous, vous trouvez que la navigation des petits rubriques est assez fluide. Je parle précisément des flèches qui se trouvent en bas et de part et d'autres de l'image. Pour moi, j'aurai le réflexe d'appuyer sur les petites flèches à gauche à droite, mais est ce le cas pour les autres, je ne sais pas. Les Diaporamas automatiques sont certes "à la mode" mais j'aurai plusieurs diaporamas automatique sur chaque page, quand on en regardera un, l'autre attirera automatiquement l'oeil en dessous, je ne pense pas que ça soit une bonne idée.

Je souhaiterai de fait savoir comment je pourrai arriver à ce résultat, comment m'y prendre (car je suis beaucoup perdue), de façon à avoir par la suite, simplement à faire de petits ajouts mais ne plus revenir sur la construction.
Quelqu'un pourrait il me guider et me prendre sous son aile.

J'en demande certes beaucoup mais je ne vois pas comment faire.

Je vous remercie beaucoup pour votre coup de pouce (ou vos 5 doigts).

Ah, j'ai failli oublié, l'adresse de mon site web, http://www.acbcreative.fr.

A bientôt.

Coeurs-de-Graphismes.
Smiley confus
Bonjour,

Coeurs-de-Graphismes a écrit :
Quelqu'un pourrait il me guider et me prendre sous son aile ?

Je ne serais pas ce Bon Samaritain car le travail à réaliser pour la refonte est assez conséquent. Mais voici tout de même quelques pistes :

Avant d'aller plus loin dans vos remaniements :
Coeurs-de-Graphismes a écrit :
j'ai souhaité ajouter des petits fichiers *swf dans mes "diaporamas" qui représentent des petits journaux ou brochures que l'on peut feuilleter.

Ce n'est pas une bonne idée car le Flash est en passe d'être déprécié sur tout le web. C'est déjà le cas pour tous les mobiles : donc, déjà d'emblée, 60% de consultations potentielles en moins.

De toute façon le site n'a pas été conçu pour être responsive, ce qui est dommage : vous devriez commencer votre refonte en commençant par là. Il faudrait donc repenser la structure de votre site. Mais attention : c'est un métier (quelque chose me dit que le site a été créé à l'aide d'un logiciel de mise en page...).

Pensez aussi à la typographie, et notamment à la taille de la police de caractère par défaut : le site est illisible (et j'ai de bons yeux). Il faudrait une taille de police au minimum de 14px (le top étant une correspondance en unités relatives (em, rem...).
Coeurs-de-Graphismes a écrit :
A cette image, j'aimerai vous exposer les petites contraintes qui en découlent.
* Les flèches de navigation en bas à droite de l'image permettent de faire défiler les différentes images.
* En même temps, le carré évidé rouge bouge pour indiquer l'emplacement de l'image dans le petit "diaporama".Lorsqu'on change d'image, le carré évidé rouge redevient gris et le carré évidé rouge passe au carré suivant.
* De plus, si un utilisateur souhaite cliquer directement sur un carré évidé gris, qu'il puisse atteindre directement l'image concernée.
* Le nombre de carré évidés varient suivant les petites rubriques.
* Je souhaite placé dans la page "Print" pour certaines petites rubriques une icône "petit livre" qui remplacerait le dernier carré évidé dans la ligne pour indiquer qu'il y a une petite brochure à feuilleter. Le petit livre renverrait donc à un fichier *.swf à l'intérieur même de ce diaporama (à la place des images *.png).

Il suffit alors de mettre un slideshow, un peu comme celui-là : La langue de chez nous. Celui-ci a été réalisé avec le plugin jQuery Cycle 2.

Je vous souhaite bon courage.

PS : l'expérience du formulaire de contact est assez éprouvante, avec des messages d'alerte s'ouvrant dans des boîtes de message intempestives, et on ne peut pas simplement "s'enfuir" en quittant simplement la page. À revoir aussi à l'occasion...
Je confirme le commentaire d'Olivier concernant l'aspect Responsive (ou plutôt non Responsive) du site et surtout la trop petite taille des zones de texte.
Totalement illisible sur un Smartphone sans devoir zoomer à fond.
Vu les critères actuels en matière d'ergonomie, je pense que ces deux points sont une priorité absolue pour la refonte, avant de revoir le contenu proprement dit.
Bonjour !

J'aime beaucoup l'univers graphique : pas révolutionnaire mais de la sensibilité, de la fraicheur...
Smiley smile

Mon avis est dans la lignée de ceux qui m'ont précédée : le graphisme et la conception de sites web, ce n'est pas le même métier...

Je pense qu'il vaut mieux que vous utilisiez des solutions "prêtes à l'emploi"... Vous pourrez faire la différence sur la qualité du contenu... ce qui est déjà beaucoup mieux que beaucoup de choses qui sont visibles sur le web...

Misez plutôt sur vos points forts (c'est ce qu'on m'a dit Smiley lol ).
Smiley smile
Modérateur
Zelena a écrit :
(ce clone est à supprimer, SVP.... Smiley sweatdrop )
Et encore une fan de Star Wars... Smiley rofl


Merci je connais la sortie :-P
Bonjour,

Je plussoie l'avis d'Olivier C. Flash en 2016, il faut oublier, pas compatible sur tablettes, smartphones et bloqué par de nombreux utilisateurs… Sauf cas spécifiques, on compte plus d'utilisateurs sur mobiles que sur desktop. Il faut passer en HTML5 + CSS3, ce qui en plus de répondre aux usages du moment, vous facilitera la déclinaison du site. Aussi, je comprends que pour un portfolio, la priorité soit donnée aux grands écrans, mais ils ne faut pas zapper le reste.

Pour ce faire, utilisez les media queries :
http://www.alsacreations.com/article/lire/930-css3-media-queries.html

La mise en page façon tableau est datée, limite siècle dernier. Elle me semble trop rigide et cloisonnée pour une déclinaison sur tous les supports (responsive design). D'une façon générale, le design du site est trop print et manque de structure, de style.

Aucun lien, présence vers les réseaux sociaux (professionnels… ), ce qui accentue l'aspect old school du site.

La maquette nécessite d'être mise au gout du jour : typographie engoncée et peu travaillée, logo, polices de caractères et graphisme désuets, filets inutiles, textes rikikis (sur un 23" !!), pictos peu lisibles dans un style glossy (démodé depuis des années, place au flat design), pas de structure adaptée aux usages actuels (responsive), couleurs pas web et trop bariolées, redondances (menu + pied de page), photo rikiki et dans un style image bank low cost, titres et paragraphes mal marqués, nuage de mots obsolète…

Dommage car il y a de la créativité et de jolies choses, mais déservies par le site actuel.
Attention de ne pas "tout" mettre. Montrer quelques réalisations, 3 peuvent suffire… Là pour chaque présentation, il y a trop de déclinaisons. Qui va cliquer tout ça ? Le niveau d'une réalisation à l'autre est trop inégal. Le dessin du canard façon "Picsou" était-il indispensable ? Non. De plus, inutile de coller le picto des logiciels utilisés, ça fait scolaire…

Il faut tout revoir en prenant en compte le design, la navigation, l'ergonomie, la sélection des travaux, leur présentation… pour faire un site actuel et pérenne. Inspirez-vous de ce qui se fait maintenant, un benchmark s'impose !
Pour ce faire, vous pouvez vous inspirer des tendances du moment :
http://www.alsacreations.com/article/lire/1696-tendances-web-design-2016.html

Un post dans la rubrique "Critiques de vos sites: code et design" aurait été plus adapté à votre demande. N'hésitez pas à y poster votre nouveau site. Je pense qu'il faut tout revoir en prenant en compte les remarques qui vous ont été apportées ici. Smiley cligne

Voilou pour moi. Smiley smile

MàJ : la proposition de Zelena pour des solutions prêtes à l'emploi me semble une possibilité. De nombreux graphistes optent pour des solutions comme Wix par exemple (moderne et responsive). Attention cependant de faire le bon choix de template. Sauf si vous tenez à montrer que vous avez créé votre site vous-même.
Modifié par spongebrain (11 May 2016 - 11:44)
Bonsoir,

Je vous remercie pour vos réponses et vos critiques sur l'aspect visuel.
Je vais tâcher d'effectuer d'après vos suggestions certains changements.

Concernant un site "responsive", là, je m'aventure dans un univers totalement inconnu. Je veux bien m'ouvrir à tous les écrans mais je galère déjà pour un, alors pour les autres... lol...

Je sais que pour la plupart d'entre vous, cela ne vous paraît pas insurmontable, mais à mon niveau... gloups...

Pour répondre à votre interrogation sur un éventuel logiciel, je me suis imposée strictement notepad ++. Je n'ai pas été très à mon aise lors de sa création et j'ai tâché au maximum de simplifier les choses pour être claire. Pour les scripts, une personne où j'avais effectué ma formation à l'époque nous avait filé à chacun quelques trucs. J'avais effectivement conscience que certaines choses étaient bancales et particulièrement le formulaire... lol... mais comme c'est indiqué dans le profil d'Olivier "Tant pis ça marche..." alors faute de mieux... pour l'instant...

Pour ce qui est de la mise en page dite "tableau", je souris car les quelques cours que j'ai eu datent de 2011 donc une décennie postérieure au siècle dernier et ce n'était voué à être une présentation obsolète...

C'est pour cela d'ailleurs que je tenais à reprendre les choses et les améliorer. Je sais que je m'engage dans une aventure délicate et musclée...

Concernant, les fichiers *swf, je veux bien les abandonner (je n'avais pas mieux jusqu'à lors, ni ne connaissais autre chose...). Je souhaiterai cependant trouver un "pageflip" (c'est le terme apparemment) équivalent que je puisse insérer sur une page web, que je puisse l'héberger sur mon propre site (et non un site proposant le service comme Issu), qu'il soit paramétrable (taille, présentation) et qu'on ne puisse uniquement consulter (et zoomer) mais sans le télécharger. Je trouve que ce format de consultation est beaucoup plus agréable.

Pour le slideshow, j'ai doucement commencé à regarder et c'est effectivement une solution qui est peut être mieux adaptée à mes attentes.

Petite question de curiosité Zelena, vous avez parlez de sites près à l'emploi, avez vous des sites à proposer, que jet puisse jeter un petit coup d'oeil...

Pour l'absence des liens vers les réseaux sociaux, c'est volontaire. Ces derniers sont créés officieusement mais inactifs de façon officielle (cela ne veut pas dire jamais"...) mais pour l'instant, pas dans l'immédiat...

De plus, et là, je vais surement en froisser plus d'un, je suis contre le phénomène de mode... y compris les réseaux sociaux (je trouve cela assez superflu...). L'on peut vivre très bien sans également. Pour être branchée, faire comme tout le monde ! Non, cela je m'y refuse !

Après, j'ai pris bonnes notes de vos remarques et vais tâcher de repenser à tout cela.

Je vous remercie pour votre aide et vos compléments d'informations à venir.

A bientôt.

P.S : Si, j'ai placé ce post dans la rubrique "Questions générales et questions de débutants", c'est que je considère que je suis également débutante, et ce n'est pas un site qui change grand chose... Smiley murf
Modifié par Coeurs-de-Graphismes (12 May 2016 - 03:12)
Re,
Coeurs-de-Graphismes a écrit :
Concernant un site "responsive", là, je m'aventure dans un univers totalement inconnu. Je veux bien m'ouvrir à tous les écrans mais je galère déjà pour un, alors pour les autres... lol...

Je sais que pour la plupart d'entre vous, cela ne vous paraît pas insurmontable, mais à mon niveau... gloups...

Moi aussi je m'en faisais une montagne. En fait, tout ça pour ça… Si vous savez appliquer quelques CSS, ce qui est le cas, appliquer des "media queries" simples sera un jeu d'enfant pour vous. Smiley smile
Surtout, ça vous permettra de repenser votre design de façon plus adaptable et donc moderne.
Votre design actuel fait daté et a un look tableau, parce qu'il est pensé comme tel, même si vous n'utilisez pas de tableaux. C'est trop figé et print. Le web design bouge et change de tailles, si vous n'intégrez pas cela, votre site gardera cet aspect figé, et du coup daté.

Coeurs-de-Graphismes a écrit :
De plus, et là, je vais surement en froisser plus d'un, je suis contre le phénomène de mode... y compris les réseaux sociaux (je trouve cela assez superflu...). L'on peut vivre très bien sans également. Pour être branchée, faire comme tout le monde ! Non, cela je m'y refuse !

OK pour les réseaux sociaux, ça peut être un choix…

Il y a des styles en design qui se veulent hors mode, comme le minimal design par exemple. Mais ce style est à la mode. En fait de tendances, soit vous les subissez, soit vous en intégrez les codes (à votre façon). C'est l'un ou l'autre, il n'y a pas de 3e option. Il n'y a pas de design « à l'abris de la mode », ou réellement hors mode. Ça n'existe pas, ou alors il faut créer votre propre tendance… Bon courage, il faut être très talentueux ou alors inconscient pour ça. Automatiquement, qu'on le veuille ou non, on s'inscrit dans un style, une époque par ses choix de design et d'ergonomie. Ça ne s'arrête pas à l'aspect graphique. Votre site s'inscrit à fond dans la mode et dans les tendances, mais qui ne sont plus d'actualités en terme de style et surtout d'expérience utilisateur.
Il ne s'agit pas de faire « comme tout le monde » (bien que pour un début, il faut modestement en passer par là), mais d'utiliser les outils et les codes qui permettent d'avoir un design qui s'adapte à l'utilisateur et passe le bon message. La toile est un tout dans le quel il faut se positionner, pas lutter contre…

Dépliez vos antennes et observez, analysez ce qui se fait, c'est une étape nécessaire pour s'affranchir à minima et saisir les codes. Que l'on intègre ensuite plus ou moins. Mais pour cela il faut d'abord les connaître et les comprendre, ce qui n'est pas le cas, quand on pense encore un design de façon figée et utilisant des technologies périmées (Flash), sans se soucier de l'expérience utilisateur.

Aussi, vouloir être « branché » est terriblement démodé. Il vaut mieux être ouvert… Smiley cligne

Coeurs-de-Graphismes a écrit :

Pour le slideshow, j'ai doucement commencé à regarder et c'est effectivement une solution qui est peut être mieux adaptée à mes attentes.

Un simple slider de type jQuery sera plus universel que du Flash, mais limiter à 3 slides environ. Les sliders sans fin sont contre productifs.
https://www.doisjeutiliser.fr/unCarrousel/

Coeurs-de-Graphismes a écrit :

Petite question de curiosité Zelena, vous avez parlez de sites près à l'emploi, avez vous des sites à proposer, que jet puisse jeter un petit coup d'oeil...

Pour les outils clés en main, Wix est parmi ce qui se fait de plus fiable, moderne, responsive… Des exemples de templates ici (vous pouvez même voir la déclinaison sur mobile) :
http://fr.wix.com/
Pour les différents outils en ligne :
http://www.dessinemoiunsite.com/choisir-outil-creer-son-site-internet/
(Éviter 1&1 et leurs templates vieillots)

Coeurs-de-Graphismes a écrit :

P.S : Si, j'ai placé ce post dans la rubrique "Questions générales et questions de débutants", c'est que je considère que je suis également débutante, et ce n'est pas un site qui change grand chose... Smiley murf

Votre site affiche un positionnement "pro", même si c'est à votre insu.
La rubrique "Critiques de vos sites: code et design" accueille les sites de tout le monde, pros comme amateurs qui y sont conseillés de la même façon. Avec un esprit d'entraide et de bienveillance. Smiley smile

Et de conclure par une citation extraite du film, "Le quart d'heure américain", quand le vendeur s'adresse à Gérard Jugnot (Ferdinand) :
http://fichtre.hautetfort.com/archive/2012/07/12/le-quart-d-heure-americain.html
Ferdinand : C'est peut-être un petit peu trop, non ?
Le vendeur : C'est classique.
Ferdinand : Justement...
Le vendeur : C'est très chic, et en même temps, vous êtes à l'abri de la mode.

Smiley lol
spongebrain a écrit :
Re,

Moi aussi je m'en faisais une montagne. En fait, tout ça pour ça… Si vous savez appliquer quelques CSS, ce qui est le cas, appliquer des "media queries" simples sera un jeu d'enfant pour vous. Smiley smile
Surtout, ça vous permettra de repenser votre design de façon plus adaptable et donc moderne.
Votre design actuel fait daté et a un look tableau, parce qu'il est pensé comme tel, même si vous n'utilisez pas de tableaux. C'est trop figé et print. Le web design bouge et change de tailles, si vous n'intégrez pas cela, votre site gardera cet aspect figé, et du coup daté.


OK pour les réseaux sociaux, ça peut être un choix…

Il y a des styles en design qui se veulent hors mode, comme le minimal design par exemple. Mais ce style est à la mode. En fait de tendances, soit vous les subissez, soit vous en intégrez les codes (à votre façon). C'est l'un ou l'autre, il n'y a pas de 3e option. Il n'y a pas de design « à l'abris de la mode », ou réellement hors mode. Ça n'existe pas, ou alors il faut créer votre propre tendance… Bon courage, il faut être très talentueux ou alors inconscient pour ça. Automatiquement, qu'on le veuille ou non, on s'inscrit dans un style, une époque par ses choix de design et d'ergonomie. Ça ne s'arrête pas à l'aspect graphique. Votre site s'inscrit à fond dans la mode et dans les tendances, mais qui ne sont plus d'actualités en terme de style et surtout d'expérience utilisateur.
Il ne s'agit pas de faire « comme tout le monde » (bien que pour un début, il faut modestement en passer par là), mais d'utiliser les outils et les codes qui permettent d'avoir un design qui s'adapte à l'utilisateur et passe le bon message. La toile est un tout dans le quel il faut se positionner, pas lutter contre…

Dépliez vos antennes et observez, analysez ce qui se fait, c'est une étape nécessaire pour s'affranchir à minima et saisir les codes. Que l'on intègre ensuite plus ou moins. Mais pour cela il faut d'abord les connaître et les comprendre, ce qui n'est pas le cas, quand on pense encore un design de façon figée et utilisant des technologies périmées (Flash), sans se soucier de l'expérience utilisateur.

Aussi, vouloir être « branché » est terriblement démodé. Il vaut mieux être ouvert… Smiley cligne


Un simple slider de type jQuery sera plus universel que du Flash, mais limiter à 3 slides environ. Les sliders sans fin sont contre productifs.
https://www.doisjeutiliser.fr/unCarrousel/


Pour les outils clés en main, Wix est parmi ce qui se fait de plus fiable, moderne, responsive… Des exemples de templates ici (vous pouvez même voir la déclinaison sur mobile) :
http://fr.wix.com/
Pour les différents outils en ligne :
http://www.dessinemoiunsite.com/choisir-outil-creer-son-site-internet/
(Éviter 1&1 et leurs templates vieillots)


Votre site affiche un positionnement "pro", même si c'est à votre insu.
La rubrique "Critiques de vos sites: code et design" accueille les sites de tout le monde, pros comme amateurs qui y sont conseillés de la même façon. Avec un esprit d'entraide et de bienveillance. Smiley smile

Et de conclure par une citation extraite du film, "Le quart d'heure américain", quand le vendeur s'adresse à Gérard Jugnot (Ferdinand) :
http://fichtre.hautetfort.com/archive/2012/07/12/le-quart-d-heure-americain.html
Ferdinand : C'est peut-être un petit peu trop, non ?
Le vendeur : C'est classique.
Ferdinand : Justement...
Le vendeur : C'est très chic, et en même temps, vous êtes à l'abri de la mode.

Smiley lol


Oui mais quel coup?