Interface Graphique : Camera Shop

Acheter ce kit sur kitgrafik.com : 99 euros

Incroyable et multifonctions, voila les deux mots qui pourraient définir à merveille le Kitgraphique CameraShop. Ce kit graphique dépasse les fonctions simples de la traditionnelle charte graphique puisque nous vous proposons aujourd’hui un site clés en main composé de 6 pages en HTML (exploitables en l’état) avec des fonctions comme menu CSS dynamique, onglet de survol et de situation, page de contact et d’envoi d’emails (en PHP), une page produits avec spécificités, fiche technique et zoom de l’image via le script JS lightbox, galerie de photos par effet glissant et reflet Web2.0… Mais surtout nous vous proposons un logo créé rien que pour vous, exploitable avec simplicité. Nous fournissons même les fichiers sources Photoshop et un tutorial pour le personnaliser.

De plus CameraShop est tout à fait adapté aux sites de e-commerces (multidomaines), rien ne vous empêche d’utiliser ce kit pour un site autre qu’e-commerce (pour un blog par exemple). CameraShop est multifonctions et saura s’adapter à la publication de vos contenus.

Pas la peine d’être un as de l’informatique, ni même d’avoir de grandes connaissances en programmation pour adapter ce kit graphique. De plus une assistance vous ai proposée : pour les débutants nous proposons via le site wks.fr plusieurs tutoriaux pour vous aider à personnaliser les kits graphiques achetés dans notre galerie. Voyez par vous-même sur ces pages : http://www.wks.fr/kitgrafik/light2/

Votre site ne mérite-t-il pas d’être le plus beau ? Habillez le votre avec CameraShop, c’est acquérir un aspect professionnel, intuitif, et tendance. N’oubliez pas que c’est via l’aspect graphique de votre site que vos internautes jugeront de votre sérieux.

Présentation graphique du kit graphique Caméra Shop :

 Description des fonctionnalités communes à chaque page

Description de l’interface graphique CameraShop du haut vers la bas (page standard).

En haut à droite, un logo original et nouvellement créé pour l’interface graphique CameraShop (source et explication pour personnalisation avec le kitgraphique). Sur sa droite, un menu CSS par onglet avec état actif !

Dessous nous avons une side barre contenant des blocs qui s’affichent en glissant de gauche à droite, la navigation se fait avec les petits chiffres se trouvant en dessous (voir la description vidéo pour plus de détails sur cette fonctionnalité).

Ensuite, nous avons sur les parties gauche et droite un menu vertical textuel avec son header (effet de survol sur les liens) et enfin en dessous se trouve des blocs graphiques pour afficher les derniers produits ajoutés à la boutique (nous avons ajouté le fichier source Photoshop pour que vous puissiez vous aussi exporter vos propres images).

Pour les contenus il y a un header affichant le titre de l’article et en dessous le texte.

Et enfin, un footer pour appliquer vos copyright et autres crédits de créations. Rappel du logo en bas de page.

 Description des fonctionnalités page par page

Page 1 : index.html

Elle correspond très bien à une page d’accueil type e-commerce : affichage d’un produit en zoom, liste de nouveaux produits. Description des frais de ports etc…

JPG - 141.6 ko

Page 2 : page2.html

Cette page est une page dite standard.

JPG - 150 ko

Page 3 : page3.html

Cette page correspond à la galerie, elle s’affiche sous forme de plusieurs vignettes qui se suivent et s’affichent avec un effet glissant. Très facile d’utilisation, vous pourrez y placer autant d’images que vous le voudrez !

JPG - 95.9 ko

Page 4 : page4.html

Cette page est une page dite standard.

Page 5 : page5.html

Cette page est une page dite standard possédant une présentation Blog. Elle vous permet de constater à quelle point cette interface est flexible et adaptable à tout type de site internet.

JPG - 132.5 ko

Page 6 : page6.html

Page de contact : cette page contient un formulaire validé par JavaScript et envoyé via PHP, vous pourrez donc recevoir des messages de vos internautes / clients sans donner pour autant votre adresse email personnelle !

JPG - 103.4 ko

 Programmation de l’interface dark corporate

Full CSS :

Toute l’interface est codée en strict XHTML CSS

Les menus sont sous forme de listes / facilement paramétrables Les styles de textes et de mises en page sont placés sur une feuille css externe

Galerie effet glissant + miroir (type Apple)

Galerie CSS + PHP présentant plusieurs photos sous forme de vignettes, celles-ci glissent et se présentent avec un reflet à la Web 2.0 ! Cette galerie est tout simplement délicieuse : vous pouvez en voir un exemple sur http://www.wks.fr/kitgrafik/light2/

Zoom de vos images par surimpression de l’écran

Images dynamiques : placez vos vignettes dans une balise div spéciale et vos images s’ouvriront en grand grâce à une animation surprenante. Voir un exemple sur cette page : http://www.wks.fr/kitgrafik/light1/

Un formulaire de contact

Géré en JavaScript pour sécuriser le formulaire et en PHP pour traiter l’envoi du mail vers votre boîte mail. Ce script et paramétrable en deux minutes.

Une side bar de naviguation

Présentation de news ou produits par blocs qui défilent de gauche à droite selon le clic effectué sur les numéros de pagination ; effet très agréable et intéressant pour présenter beaucoup de contenus dans un espace restreint.

Informations complémentaires sur le design

Un header avec un logo original pour votre futur site internet (header vierge disponible + fichier PSD du logo)

Un menu horizontal avec effet de rollover + bouton onglet pour faciliter la navigation sur le site, chaque page à sa propre couleur !

Présence d’images vierges : logo, header, bouton.

Présence du fichier PSD de l’interface complète pour vous aidez à modifier en profondeur votre prochain site.

Ajout du script : Light box à l’interface : http://leandrovieira.com/projects/jquery/lightbox/

Acheter ce kit sur kitgrafik.com : 99 euros

Article publié par Wonka

Vous aimez cet article? Partagez le !

Je suis très humblement le webmaster et le créateur de ce site, vous êtes en ce moment sur ma fiche membre, vous avez la possibilité de m’’envoyer des messages, pour toutes questions n’hésitez pas une seule seconde !

Publiez une nouvelle image

Vous avez réussis à créer une belle image grâce à ce tutorial ? Soyez sympa, partagez la avec la communauté. Utilisez simplement ce formulaire :

Vous devez être connecté pour activer le bouton de validation !

La galerie des membres

Voici les images déjà publiées par les membres de ce site, merci à vous pour votre créativité !

    Questions et commentaires, Il y a 16 messages de forum.

    Vous avez besoin d’eclaircicemment sur un points évoqués dans cette leçon, dans ce cas laissez votre question en utilisant le formulaire ci dessous, notre équipe vous apportera rapidement un complètement d’information. Merci d’être le plus précis possible lors de la rédaction de votre demande.

    • 19 juin 2008 16:00

      Comme d’habitude c’est magnifique !

      J’admire ton travail !

      Répondre
      • 19 juin 2008 16:16

        Ou peut on le télécharger ?

        Répondre
        • 19 juin 2008 16:38, par Wonka

          Très bientôt sur notre site partenaire : http://www.kitgrafik.com/

          Merci pour vos messages ;)

          Répondre
    • 19 juin 2008 16:30, par IT1

      Wonka, toujours aussi balèze en ce qui concerne les interfaces graphiques !

      C’est superbe. Bravo ! ;-)

      Répondre
      • 19 juin 2008 16:38, par Wonka

        Merci IT1 ;)

        Répondre
    • 19 juin 2008 19:14, par MØG

      très jolie KitGraphique, et sympa la présentation vidéo mais chez moi j’ai des moments ou tout deviens blanc

      Répondre
      • 20 juin 2008 09:27, par Wonka

        Arf ce n’est pas normal ça ! Pourrais tu me dire à quel moment la vidéos devient blanche ?

        Répondre
        • 20 juin 2008 11:08, par MØG

          Alors j’ai un blanc à l’image 9-10-11/37 puis à 20-21/37

          voila si ça peux aider

          Répondre
          • 20 juin 2008 14:38, par Wonka

            Parfait j’ai tout de suite compris le problème et je viens de réparer la vidéo ;) Merci à toi pour ton aide !

            Répondre
    • 28 juin 2008 10:23, par milo13

      Bonjour Julien !

      Félicitations pour cette interface Camerashop. Du beau travail.

      Répondre
      • 28 juin 2008 12:17, par Wonka

        Merci beaucoup Milo ;) content de te revoir sur les commentaires wks :p

        Répondre
    • 24 juillet 2009 17:04, par stewan

      bonjour,

      Nous envisageons pour notre futur site de bricolage (que nous ne voulons pas trop ringard) d’acquérir votre template « camera shop ». Nous avons plusieurs questions : 1°) Peut-on changer les couleurs ? 2°) Peut-on changer les polices ? 3°) Il y a t-il un panier prévu ?(on ne le voit pas) 4°) dans la page standard, nous aurions des listes de produits avec une photo et un descriptif, qui seront évidemment triés dans les catégories, : peut-on mettre plusieurs photos. 5°) Dans la page standard, lorsque l’on aura cliqué dans une rubrique, il pourra y avoir 100 produits dans la catégorie : Pourra-t-on mettre deux produits cote a cote ? 6°) Notre logiciel permet de gérer 3 niveaux de catégories, comment cela va-t-il apparaître dans ce template ? 7°) Peut-on mettre autre chose que des chiffres dans le bloc de la side bar ?

      Merci pour vos réponses

      Salutations

      Répondre
      • 25 juillet 2009 12:04, par Wonka

        Ce produit est un kit graphique est non un site dynamique, exit donc toutes les fonctions comme le panier et autres. Pour un site de cette envergure -boutique par exemple- le tarif ne sera pas le même et dépassera sans mal les 2000 euros ! Si vous ne désirez que le thème graphique vous pouvez me contacter directement par mail à wonka @ wks.fr (sans les espaces).

        Merci !

        Répondre
    • 13 janvier 2010 11:04, par Pastedo

      Bonjour

      Avant tout éventuel achat, votre kit graphique peut-il être utilisé avec JOOMLA ?

      autre chose, un utilisateur débutant peut-il le menipuler aisément ?

      MERCI

      Répondre
      • 13 janvier 2010 11:25, par Wonka

        Ce kit est programmé en HTML donc pour le moment pas adapté pour Joomla, mais il est très clair pour être modifié et adapté pour Joomla !

        Répondre
    • 6 janvier 2011 15:28, par Domie

      Bonjour,

      Je suis une adepte de vos tutoriels et j’en ai déjà réalisé quelques uns :

      City blue : http://catsane.free.fr/photoshop/city_blue/cityblue.html

      Shadow pink : http://catsane.free.fr/photoshop/webdesign.html

      J’aimerais bien avoir le tutoriel pour réaliser cette interface. Et-ce possible ?

      Je vous remercie par avance pour votre réponse.

      Cordialement,

      Domie

      Répondre

    Laissez un commentaire

    Remplissez correctement le formulaire puis appuyez sur Validez.