Dans cet article je vais illustrer la création d’un blog avec  web 2.0 style. Depuis la réunion d’information jusqu’au développement CSS.

Lignes directrices :

Le blog va être créé pour mon frère qui me l’avait demandé, d’ailleurs, il m’a donné quelques lignes directrices de certains aspects de la conception qu’il aimerait avoir dans son blog:

• Fond sombre;
  grande tailles de police;
  quelques coins ronds;
  un endroit pour mettre des logos;
• Aussi il m’indique des liens de sites qu’il trouve vraiment sympas, en dessous vous trouverez certains d’entre eux.

http://www.emaginacion.com.ar/cym/

http://abduzeedo.com/www.37signals.com/

http://abduzeedo.com/www.bartelme.at/

http://veerle.duoh.com/

Recherche :
Avec les lignes directrices et quelques références à l’esprit, j’ai commencé mes recherches et trouvé quelques bons liens sur la conception des sites Web 2.0 telles que ce Web 2.0 how-to design style guide, qui explique très bien les fonctions Web 2.0, montre des exemples de sites, des concepts et ce qu’il ne faut pas faire.
Après avoir lu beaucoup et obtenu quelques bonnes idées, j’ai commencé la création du schéma, d’abord l’idée de colonnes, où la navigation sera fera, le contenu principal, et des trucs comme ça. En parlant à mon frère, il me dit qu’il aimerait avoir une navigation verticale avec une barre latérale où il pourrait y ajouter ses liens favoris, de recherche, la navigation du blog, photos flickr, delicious bookmarks etc .. J’avais donc le fil directeur de ma trame, assez simple.

Mise en page de création :
Avec la structure filaire faite, je savais où mettre le contenu, donc j’ai dû commencer par ajouter du contenu  Loren ipsun à cet endroit. Une chose que je trouve vraiment cool sur tendance web 2.0 est l’effet Gradients, ils créent un effet visuel vraiment cool de la différencequ’on peut observer depuis un avion, l’élévation de certaines parties et d’autres à un niveau inférieur. Un autre effet cool que j’ai déjà utilisé sur un projet personnel, c’est  l’effet Emboss  dans les lignes, qui divisent le contenu comme Bartelme utilise sur son site. Leurs couleur sombre et leurs variation sont de bons exemples a  exploiter.

Pour l’en-tête, je pensais que ce serait agréable d’ajouter une illustration ou une photo comme Veerle le fait. Je commence à réfléchir à quelle photo serait cool, chercher le bon coup je me souviens que mon frère avait pris assez cool à Philadelphie, en face du Metropolitan Art Museum où Rocky Balboa finit toujours son entrainement, comme mon frère aime Rocky et avec le nouveau film à venir dans les salles obscures, je pensais que l’image irait comme un gant.

Après tout cela, et plusieurs heures devant mon ordinateur à l’aide de Macromedia Fireworks j’en suis à  la mise en page ci-dessous. Cliquez ici pour ouvrir la version taille réelle dans une nouvelle fenêtre : http://blog.redinteractiv.com/wp-content/uploads/articles/31/BLK.jpg

La mise en page, coin rond dans certaines régions, les dégradés avec les Gradients, et c’est à peu près tout.
Lorsque je l’ai montré à mon frère, il a dit qu’il aimait beaucoup, mais qu’il y avait quelques problèmes à corriger. Cependant, il ne m’a rien dit de plus pour le moment. Donc la seule chose que je puisse faire est d’attendre maintenant, et dès qu’il aura bien identifié ces  problèmes, je pourrais tenter de les réparer, je vais continuer cet article jusqu’à ce que le CSS soit terminé.
A propos de l’auteur :
Mon nom est Fabio Sasso, je suis un graphiste/web designer de Porto Alegre, au Brésil et je suis le fondateur de Abduzeedo. J’espère que nous pourrons partager beaucoup d’informations, des conseils et d’ idées par le biais d’ Abduzeedo. Aussi vous pouvez me suivre sur Twitter ou mon site personnel à http://fabiosasso.com.