25 Techniques "Out of the box"

Salutation à tous! 

Tous peuvent créer une belle interface en suivant les 3 principes de design (tel qu'expliqué dans l'un de mes articles précédents): Contenu/Structure du contenu, Navigation, Présentation/Design. Néanmoins votre interface à de la difficulté à se faire remarquer. 

Alors voici 25 façons de rendre votre interface intriguant et tape-à-l'œil avec quelques sites en exemple. Commençons!

1. Ajouter une image explosive en arrière-plan 
• (http://www.ndesign-studio.com , http://tool.com.mk/index_v.html)
2. Faire déborder une image au-delà du carré 
• (http://www.clubmap.com.hk/, http://www.nexussr.com/)
• afin d'avoir un tel effet, utiliser un "Position: relative;" dans votre code CSS sur la division voulu.
3. Étendre un  <DIV> par-dessus un autre 
• (http://www.villa-zeljka.com/ , http://www.diecidecimi.tv/)
4. Laisser un cadre ouvert 
• (http://www.alma-design.it/ , http://www.telabags.net/ )
5. Utiliser un dégradé plutôt qu’un cadre plein
• (http://www.waldeckcapital.com/ , http://www.bungie.net/)
6. Surprendre en insérant une image irrégulière dans la composition
• (http://www.danceinbangkok.com/ , http://www.splintered.co.uk/)
7. Utiliser les masques pour modifier la forme d’une image
• (http://www.uliheckmann.com/ , http://www.benefica.it/)
8. Effacer le fond de la boite
• (http://www.peteredison.com/ , http://www.biosasfalti.it/)
9. Travailler en transparence
• (http://www.inkieto.com/ , http://www.bankofart.com/main_eng.html/)
10. Réutiliser la couleur de l’arrière-plan dans les images afin de tromper l’œil sur la forme du cadre
• (http://www.7shapes.com/ , http://www.micksmedia.com/)
11. Scinder ou multiplier une image en plusieurs parties
• (http://www.botticiniarchitetti.com/ , http://www.henrikbulow.com/)
12. Désaligner des éléments
• (http://www.lovebirdagency.com/ , http://www.coolmood.net/)
13. Travailler en diagonal
• (http://www.zen777.com/ , http://www.svizra.com/)
14. Traiter un ou plusieurs coins de cadre
• (http://www.ea.com/ , http://shoutreel.com/)
15. Styliser manuellement une bordure entre 2 zones
• (http://www.maria-ivanova.com/ , http://www.frekinglab.com/)
• Utilisez "Panneau de forme : pinceau" dans Photoshop ou dans un autre programme d'édition d'images et ensuite placez-les dans 2 divisions séparé afin de créer une sorte de "sandwich graphique" (DIV bordure, DIV contenu, DIV bordure)
16. Éclairer et ombré la sélection
• (http://www.flyer104.com/ , http://www.nastuh.com/ )
17. Travailler le flou de profondeur
• (http://www.agnelliniartemoderna.it/ , http://www.marcoszender.com/)
18. Ajouter des bruits visuels
• (http://www.newgrounds.com/ , http://clearmediawebsites.co.uk/)
19. Ajouter, numériser et/ou photographier des objets ou des textures réelles
• (http://www.13creative.com/portfolio.htm , http://www.gouramidesign.com/Index.aspx)
20. Incorporer des éléments manuscrits
• (http://www.mattdempsey.com/ , http://www.thcpolimedia.com/thc/)
• La table graphique peut être très utile pour créer de beaux effets visuels
21. Faire un collage, un graffiti
• (http://www.jasonsiu.com/, http://okaydave.com/)
22. Incurver un ou des segments de l’interface
• (http://adaptd.com/ , http://www.digitalbase.eu/)
23. Texturer l’arrière-plan
• (http://fortysevenmedia.com/ , http://www.newconcept.hu/)
• Privilégiez les textures naturelles
24. Assembler de façon irrégulière dans une grille
• (http://www.enila.fr/ , http://www.kunstdichte.com/)
25. Prolonger la perspective dans l’axe Z
• (http://aditshukla.com/ , http://www.cubescripts.com/)

 Hé voila! Grâce ces techniques, votre interface va mieux paraitre au près de vos visiteurs!

J'aimerais aussi remercier monsieur Dominic Girard pour son grand travail, son encouragement et son enseignement dévoué sur le design.

*les informations et la grande majorité des sites présenté dans cette article proviennent de la présentation "25 Techniques Design Out-of-The-Box" de Dominic Girard