Interface Graphique : Camera Shop

jeudi 19 juin 2008
Article écrit par : Wonka
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 !
WonkaStudio

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

La galerie des membres

Ajouter votre image dans la galerie
Si vous avez réussis ce tutorial vous avez la possibilité de poster votre dessin dans la galerie, vous pourrez ensuite le publier dans les commentaires (que vous trouverez en bas de page).
Attention votre fichier devra être en format JPG, et son poid inférieur a 200ko !

Vos commentaires ( 15 messages dans le forum)
Ajouter un commentaire à cet page

modération à priori

Ce forum est modéré à priori : votre contribution n'apparaîtra qu'après avoir été validée par un administrateur du site.

Ajouter un commentaire

Continuer la lecture sur wks.fr

Copyright

Les articles et images d'illustrations sont propriété de l'auteur et du réseau Grafik Network & Wks.fr.

Toute copie, reproduction ou diffusion sans autorisation sont interdites. Les images ainsi que les textes sont protégés par le droit français d'auteur ainsi que par un Copyright.