Oui carrément. N’ayons pas peur des mots pour une fois !

Pas moins de :  5 tutoriels, 1 interview de ma pomme, 1 interview d’Alsacréations, le logo de « Brin de web » et une réalisation Alsacréations sur la page du sommaire…

Autant vous dire que je vais vider les stocks de tous les marchands de journaux de Strasbourg

Pour les curieux voici mes 5 tutoriels :

Tutoriel 1 : Création d’une Single Page avec défilement vertical

• Création du design :  Template + PSD réutilisable sous licence Creative Commons
• Intégration HTML 5 / CSS3
• Utilisation de JQuery

Tutoriel 2 : Drag and Drop avec JQuery

Tutoriel 3 : Créer plusieurs effets de « LightBox « avec JQuery et FancyBox

Tutoriel 4 : Créer des Boîtes & légendes coulissantes avec Jquery.

Tutoriel 5 : Utiliser n’importe quelle police (libre de droits) sur le web !

Plus de détails sur le site d’Alsacreations.com et webdesignmag.fr

3 mois sans nouvelles… Vous le devinez, il y a beaucoup (trop) de choses sur le feu. Mais on ne va surtout pas s’en plaindre !

En voici une :

Pour faire court, Raphaël (Goetter) et moi même, allons donner une formation d’une semaine à Paris. Si WordPress et HTML/CSS vous intéresse : on vous y attend fin juin

Peu de temps oblige voici le texte officiel :

Alsacréations, en partenariat avec Ranking Metrics, vient d’élaborer un nouveau cursus de formation WebDesign et WordPress qui aura lieu du 29 juin au 2 juillet 2010 à Paris.

Ce cursus se décline en 4 modules indépendants :

• 29 juin : HTML, XHTML et CSS (Raphaël)
• 30 juin : Programmation CSS niveau avancé) (Raphaël)
• 1er juillet : Wordpress pour les Webdesigners (Simon)
• 2 juillet : La rédaction web avec Wordpress (Simon)

Prix : 700 euros HT / journée (finançable par OPCA ou DIF)

Bien entendu, les formations Alsacréations sont toujours disponibles dans la capitale de la choucroute : Strasbourg !

24H d’affilées devant son écran à faire chauffer le cerveau et à picoler du jus de fruit (orange, ananas, pomme-kiwi).
Voilà, en gros, à quoi se résume ma participation aux Présélections du WIF 2010 !

Rappel du sujet : A travers une interface sensible, originale et poétique, proposer une application interactive  permettant de partager ses souvenirs.

Voici  Gronours, ma ptite réalisation (n’hésitez pas à laisser un mail – ça fonctionne vraiment ) :

http://www.webdesign-festival.com/2010/equipes/preselections/brin_de_web/

Bravo à tous les participants !

Vous trouverez ici la liste définitive des projets français.

Dernière création chez Alsacréations : le nouveau design pour le site perso de Raphaël Goetter
Déjà sélectionné par cssmania, cssloggia, mostinspired, footerfetish, footerama… chouette
site entièrement réalisé en HTML5 ET CSS3 – vive alsacréations !

EDIT : Voici l’article se basant sur ce site pour savoir le faire en HTML5 ET CSS3

]]> http://simon-k.com/brindweb_blog/nouveau-design-goetter-fr/feed/ 0 http://simon-k.com/brindweb_blog/au-fil-de-longle/ http://simon-k.com/brindweb_blog/au-fil-de-longle/#comments Wed, 20 Jan 2010 22:43:45 +0000 simon-k http://simon-k.com/brindweb_blog/?p=534 Logo + Carte de visite pour Isabelle : Indépendante dans le sud de la France.
(cliquez pour agrandir)

Voici mes premières impressions concernant ce fameux Smashing Book !

C’est quoi ce Smashing Book ?

• Les meilleures pratiques du Webdesign moderne
• 311 pages en couleur : de standing !
• Un livre publié par le site de référence : www.smashingmagazine.com
• En anglais

Ok mais c’est bien ou pas ?

Rien qu’en lisant la table des matières on comprend tout de suite que ce livre va répondre directement à la pratique.
C’est un livre avec lequel on va travailler et non ranger dans une bibliothèque. Il est censé nous aider concernant les interfaces, les couleurs, la typographie, les CSS, l’accessibilité et le design.

L’anglais utilisé est plutôt facile à comprendre : c’est rassurant. Le mix texte explicatif / Illustration est bien dosé.
Bien entendu je n’ai pas encore tout lu… j’espère sincèrement que ce n’est pas un résumé des meilleurs articles du site. Pour les premières pages ce n’est pas le cas… Pourvu que ça dur !

Conclusion

Un très beau cadeau ! On ne le trouve ni à la Fnac ni ailleurs… c’est donc un original ! Et rien que pour ça je ne regrette pas cet achat. C’est quand même sympa un bon bouquin, ça change de notre cher écran. Vos yeux vous diront merci !
Longue vie à Smashing Magazine

Et le voici ! Je vais le dévorer et je vous tiens très vite au courant

C’est le moment de faire un petit tour d’horizon des futurs tendances pour l’année prochaine.

I. One Page Layouts

Voici ce que j’adore !

Les sites « carte de visite » : tout le site est contenu en une seule et unique page avec une approche plutôt minimaliste. Puis avec un soupçon de javascript on peut en faire défiler le contenu.

II. Le minimalisme

Le minimalisme devient chaud, va contenir des couleurs fraîches et beaucoup d’espace.

III. La fin des sites Full Flash ?

Pourquoi utiliser du flash alors que du HTML/CSS/jQuery le fait tout aussi bien voir mieux.

Utiliser du Flash parce que c’est du Flash : c’est la pire des choses… Autant utiliser un bazooka pour tuer une mouche.

Attention : j’adoooore le Flash.

Bien entendu Flash offre un haut niveau d’interactivité avec l’utilisateur mais il est réservé pour des sites exclusifs (gros budget, gros rayonnement). Aujourd’hui javascript (Jquery, Mootools) permet de faire beaucoup de choses qui étaient réservé à flash.

Par contre utiliser le flash avec parcimonie (vidéo, diaporama…) dans un site HTML/CSS est nettement plus approprié.

IV. Des Headers qui en mettent plein la vue

Laisser les respirer, s’exprimer ! Quitte à prendre toute la largeur et la hauteur de la page.

La première impression étant la plus importante il faut en profiter : faites de la place pour au moins une illustration (photo, composition, dessins…) qui jette, un gros logo et le menu principal.Pour faire simple : c’est un mix d’un « splashcreen » et d’une page d’accueil. L’utilisateur n’a plus besoin de cliquer pour accéder au contenu du site.

Suivant le site, ce Header surdimensionné ne sera présent que dans la page d’accueil. Les pages internes ayants une version moins haute pour favoriser la lecture.

V. Les textures pour l’ambiance

Les sites texturés donnent une ambiance plus marquée. On pourra les utiliser autant pour des détails que pour l’ensemble du site.

Un élément incontournable si vous voulez ajouter une plus-value à votre site !

VI. Les Footers ne vont pas connaître la crise !

Comme les headers, ils vont devenir plus riches : réseaux sociaux, flickr, informations personnelles, formulaire de contact, newsletter…

On peut même se demander si ils ne vont carrément pas remplacer le contenu principal (on verra en 2012) !

VII. La typographie

N’hésiter plus à utiliser la typographie comme élément principal de votre site.

Placer là au bon endroit, respecter l’alignement, tester de nouvelles polices, amusez-vous avec : c’est le moment de les tordre dans tous les sens !

Ne pas hésiter à utiliser des outils spécialisés (Cufon,sIFR…) pour changer les polices des titres.

VIII. Des énormes images

Les grandes images vont être utilisées pour inviter le visiteur à faire une action. (Suivre un compte twitter, Mise en avant d’une rubrique…)

IX. La disposition « magazine »

Les magazines sur le web sont de plus en plus présents. La disposition simpliste des blogs disparaît.

Conséquence : les blogs vont ressembler de plus en plus aux magazines et c’est tant mieux.

X. Le dessin fait main

Apporter une touche authentique, de « fait-main » à votre design.

XI. Mix des perspectives

Mélanger les perspectives pour apporter de la profondeur.

Conclusion

En voyant tout ça… ben… je vais changer mon site !

Inspiré par WDL