LE Kit graphique français !

Future website

---

Description du kit graphique

Epoustouflant, voila le mot qui pourrait définir à merveille le kit graphique DarkCorporate, ce kit graphique dépasse les fonctions simples de la traditionnelle charte graphique puisque nous vous proposons aujourd’hui un site clé en main composé de 6 pages en HTML (exploitable en l’état) avec des fonctions comme menu CSS dynamique avec onglet de survol et de situation, page de contact et d’envois d’email (en PHP), une page lien et partenaire avec affichage des captures dynamiques avec le script lightbox, galerie de photo par effet glissant et reflet web2.0, un moteur de recherche Google … Mais surtout nous vous proposons un logo créé rien que pour vous, exploitable simplement, nous fournissons même les fichiers sources photoshop et un tutorial pour le personnaliser.

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é : 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 :

Votre site ne mérite-t-il pas d’être le plus beau ? Habillez votre site avec DarkCorporate 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 votre sérieux.

Description des fonctionnalités commune à chaque page

Un header contenant un logo à gauche (vous pourrez le personnaliser facilement car nous vous proposons les sources photoshop ainsi qu’un guide) et un moteur de recherche google à droite (intégré parfaite à le charte).
Dessous nous avons un menu horizontal entièrement codé sous forme de liste CSS ; au survol de la souris les onglets change de couleur, et sur chaque page l’onglet actif deviens blanc pour aider l’internaute à naviguer sur le site internet.
Ensuite nous avons sur la partie gauche un menu vertical textuel avec son header (effet de survol sur les liens) et enfin dessous trois bloc graphique (changeant de couleur au passage de la souris) pour y placer trois liens importants.
Pour le contenus le bloc seulement est présent sur chaque page et il est composé d’un titre graphique (la source photoshop de se titre se trouve dans le dossier).
Et en fin de page nous avons le bloc footer.

Description des fonctionnalités page par page

Page 1 : index.html
Cette page correspond à la page d’accueil du site, elle comprend deux espaces de contenus spécifiques : un premier sur fond noir pour afficher le titre des news par exemple (sur deux blocs étirables verticalement) et un bloc blanc pour y placer l’edito par exemple.

Page 2 : page2.html
Cette page est une page de contenus type, elle comprend les fonctionnalités complètes du site mais en intégrant à droite un bloc pour les contenus texte (long).

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

Page 4 : page4.html
Cette page est une page de contenus type, elle comprend les fonctionnalités complètes du site mais en intégrant à droite un bloc pour les contenus texte (long).

Page 5 : page5.html
Cette page liste vos futurs liens et partenaires, vous affichez un titre (nom du site) une description, une capture d’écran ; en cliquant sur celle-ci, la capture s’ouvre dynamiquement en grand avec une animation.

Page 6 : page6.html
Cette page contient un formulaire, vos internautes rempliront le formulaire et une fois validé vous recevrez un email contenant toutes les informations saisies.

Programmation de l’interface dark corporate

Full CSS
Toute l’interface est code en strict XHTML CSS
Les menus sont sous forme de liste / facilement paramétrable
Les styles de texte et de mise 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 vignette, celle-ci glisse et se présente avec un reflet à la web 2.0 ! Cette galerie est tout simplement délicieuse : vous pouvez voir un exemple sur http://www.wks.fr/

Image dynamique placer vos vignettes dans une balise div spécial et vos images s’ouvriront en grand grâce à une animation surprenante. Voir un exemple sur cette page : http://www.wks.fr/

Un formulaire de contact
Géré en JavaScript pour sécuriser le formulaire et en PHP pour traiter l’envoi du mail vers votre boite email. Ce script et paramétrable en deux minutes.

Un formulaire de recherche
Le moteur de recherche Google dans votre kit graphique ! Vos futurs internautes auront la possibilité de lancer une recherche google directement à partir de vos pages. Vous n'avez rien à programmer le moteur de recherche est déjà fonctionnel !

Information complémentaire 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 des images vierges : logo, header, bouton

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

Autres liens sur Internet en rapport avec l’interface graphique DarkCorporate

• Article de présentation de l’interface DarkCorporate


• Tutorial de personnalisation du kit DarkCorporate


• Tutorial de création du logo


• Exemple du script lightbox


• Exemple de la galerie glissante


• Site officiel du script lightview

Attention : les scripts ne sont pas à vendre, ils sont disponible gratuitement sur le net, ils sont intégrés dans cette charte à titre d’exemple. L’utilisation, la diffusion et entièrement gratuite via les sites des auteurs :

Aperçus du kit

Ce kit graphique a d'autres aperçus disponibles.