Créez un design Web d'entreprise élégant (Série de vidéos HD Jour 3)

Dans cette série de vidéos, nous allons vous expliquer comment créer une conception Web élégante et professionnelle pour un site Web d'entreprise. Ceci est la partie 3 d'une série en 4 parties - nous allons également finir les pages de support et coder le tout en HTML / CSS!


À propos de cette série de tutoriels

Adi Purdila va nous guider à travers tout un projet - de la conception au codage - le tout sur Webdesigntuts cette semaine! Au cours de la première journée, il nous a montré comment définir le cadre de base pour la conception ainsi que la présentation de la page d'accueil. Au jour 2, il nous a montré comment créer les différentes pages de support (contact, galerie, etc.). Au cours de la troisième journée (aujourd’hui), il nous montrera comment convertir l’ensemble de la conception de Photoshop en un site HTML / CSS pleinement fonctionnel. Nous avons également un jour 4 programmé pour un codage supplémentaire, alors gardez un œil sur cela demain!

Juste pour vous donner une feuille de route générale pour le codage, voici le résumé de base de ce que nous allons faire au cours de ces 2 derniers jours:

  • Jour 3, Part1: Création du balisage pour la page d'accueil
  • Jour 3, Part2: Découper le PSD et écrire le fichier CSS (je l'ai divisé en Hour1 et Hour2)
  • Jour 3, Part3: (suite) Découper le PSD et écrire le fichier CSS (je l'ai divisé en Hour1 et Hour2)
  • Jour 4, Part1: Installation, personnalisation et fonctions de base de jQuery
  • Jour 4, Part2: Création et mise en forme des pages secondaires (Services, Galerie et Contact) + vérification du navigateur

De plus, j'aimerais partager des liens avec certaines des ressources que j'utiliserai aujourd'hui:

  • Plugin Slider: http://www.gmarwaha.com/jquery/jcarousellite/
  • Cufon: http://cufon.shoqolate.com/generate/
  • Sélecteur de navigateur CSS (pour créer des styles pour différents navigateurs dans le même fichier CSS): http://rafael.adm.br/css_browser_selector/
  • Réinitialiser CSS: http://meyerweb.com/eric/tools/css/reset/

Commençons!


Troisième jour: Conversion de PSD en HTML

Dans cette prochaine série de vidéos, Adi expliquera le processus de conversion de PSD en HTML / CSS. Assurez-vous de passer en visualisation HD si vous avez la bande passante!

Troisième jour: première partie

Excuses: le premier de ces? jour 3? les vidéos ne sont malheureusement plus disponibles.я

Troisième jour: 2e partie

Troisième jour: troisième partie


A propos de l'auteur

"Qu'il s'agisse de sites Web, de logos ou de supports imprimés, ma philosophie de travail est la même: ne prenez jamais de raccourcis et investissez toujours mon cœur et mon âme dans chaque projet car, au final, ce sont les petits détails qui comptent et les efforts que je déploie le plus. projet, mieux il me représente en tant que personne et concepteur et, en même temps, il représente mon client de manière adaptée à ses besoins.

Si vous êtes intéressé par les modèles HTML et les pages de renvoi que je développe, vous pouvez les consulter sur la page de mon portfolio sur ThemeForest. "- Adi