background preloader

Le Kit du parfait Webdesigner #1 - webdesign

Le Kit du parfait Webdesigner #1 - webdesign
Votre navigateur ne prend pas en charge Javascript, vous ne pourrez profiter de toutes les fonctionnalités de ce site web. Magazine Webdesign, Inspiration et tutoriels 9222Membres2043Articles9519Commentaires0Devenez fan8431Suivez-nous ! A la uneCatégoriesDossiers+ Le Kit du parfait Webdesigner #1 par Fabien Berthouxle 28/05/2010 Couleurs, Typographies, Architecture d'un site, Effets de styles, Boutons, Dégradés Web 2.0, Icônes, vous trouverez toutes les ressources nécessaires pour développer et créer vos webdesign. L'architecture ( WireFrame ) Grille de construction Créer son architecture en ligne Pencil Pidoco Protoshare Iplotz Mockflow Balsamiq Jgraph Hotgloo A connaître Wireframes.linowski Aller plus loin : Des WireFrame à imprimer 35 ressources de WireFrame 50 packs UI et Webdesign gratuits La Couleur Colorschemedesigner 0to255 Imageshack Colourlovers Kuler Colormunki Ilotresor Colorblender Colorotate Comment bien choisir ses couleurs pour céer une charte graphique 17 outils pour trouver ses couleurs La Typographie

Ultimate CSS Gradient Generator - ColorZilla.com background: #1e5799; /* Old browsers */ background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */ background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */

How to Select The Perfect Color for Your Website The Internet is an almost inexhaustible source of applications and sites and given the current trend the future will bring a steady growth both in numbers but also in importance. The winner of this avalanche of possibilities is definitely the Internet user who will decide who will thrive and who will require a rethinking or changing of strategy. One of the most important factors in attracting customers is the color; its eye-catching power can convert visitors into regular users or customers. Choosing a color scheme for a site is not easy, this being emphasized by the importance of color in the whole ensemble. Another advantage in choosing the right color layout is the power of suggestion, vision is color dominated, and in the absence of writing it will take certain meanings. This has applications not only in web design but also in everyday life, depending on the culture and tradition, for example white represents purity for Europeans whilst for some areas of China and Africa mourning.

Icon Font & SVG Icon Sets ❍ IcoMoon Apple-like Slideshow Gallery via Ad Packs Apple-like GallerySlideshow View the original tutorial » This is a tutorialzine demo. View the original tutorial to read and download the source files. The gallery features artwork from rambocre, pickupjojo and codenamebender Top 100 Tasty Palettes from Colourlovers We tend to think of color as a constant as an example if we see a green color our brain might automatically associate it with an apple. As Georgia O’Keeffe said, “Color interpretation is a complex process the taps into our sensations and moods, as well as our eyes, neurons, and brains.” The quest to find the perfect colors and color combinations is a common thread that runs from those who have painted great masterpieces and graphic artists to interior designers and landscapers. As French impressionist Claude Monet said, “Colour is my day-long obsession, joy and torment.” Today we are here to help you find that perfect color palette. In their own words, COLOURlovers is a creative community where people from around the world create and share colors, palettes and patterns, discuss the latest trends and explore colorful articles. Note: Simply click on the desired palette and you will be redirected to the page where you can get the exact Hex and RBG code for each color.

Juizy Slideshow - Full CSS3/HTML5 slideshow with transition and animation Download and share ⇩ Download .zip file of 126 ko already downloaded 86266 times Explanations The idea The idea comes from my two previous experiments : Webdesign and Slideshow full CSS3, and the Automatic Slideshow in CSS3, and the desire to merge the two techniques to create an automatic and manual slide show. Principle I wanted to present you a method to create a slide show using only HTML5 and CSS3 technologies. Technical details Technically, I just used some @keyframes animations with the same duration (here 32s, 8s per image). The play, stop and other control buttons are operated by a diversion of the :target pseudo-class. This slideshow only works for Firefox and Chrome (latest versions), but, as you can see, the click actions are working with an aditionnal element named div.c_slider which has all the images in CSS background. For more technical details, please visit the french tutorial on Creative Juiz blogYou want to improve this code ? Author & Contributors

Osez HTML5 et CSS3 ! Un site perso en fil rouge Pour étayer cet article, nous allons nous servir d'un fil rouge : mon site personnel Goetter.fr dont l'intégration a été réalisée en plusieurs étapes, et destiné à servir de passerelle entre mes différentes activités. Puisqu'il s'agit d'un site sans grande portée médiatique ni contraintes, j'ai pu en profiter pour tester HTML5 et moult règles CSS2 et CSS3 (border-radius, rgba, inline-block, transitions, rotations, @font-face, text-shadow, opacity, :before/:after et autres joyeusetés...). Voyons en détails le cheminement et les écueils de cette intégration... Les Grands Anciens Rappel historique Avant de nous lancer dans le vif du sujet, rappelons certains points essentiels. Fort heureusement, cela n'empêche pas les navigateurs récents de se lancer dans l'aventure en proposant des implémentations de propriétés considérées comme "sûres". A l'heure actuelle, quasiment tous les navigateurs modernes reconnaissent les propriétés CSS3 ou HTML5 employées dans cet article.

Signification des couleurs en E-marketing et en Ergonomie Web . Sur la demande de plusieurs clients et stagiaires, les consultants-rédacteurs de Trinity Advise se sont mobilisés pour vous proposer un dossier complet sur les codes couleurs web et la signification des couleurs pour Internet. Vecteurs de cohérence graphique, les couleurs dictent de nombreux comportements à l’inconscient de l’internaute. 1. 2. 3. 4. Annotations et explications complémentaires [x] En savoir plus ————————————————– . En complément d’études d’Eye Tracking (cf. notre dossier complet sur l’eyetracking en ergonomie, ici), deux, trois ou quatre maquettes au plus, sont présentées au responsable internet, qui décide au feeling du meilleur template et jette son dévolu sur ce qui sera le futur web-design. En tout état de cause, le choix de la colorimétrie demeure aujourd’hui très subjectif car il ne dépend souvent que des goûts d’un seul comité de décideurs. Enfin, notez que les couleurs possèdent une symbolique implicite et influent sur le comportement des visiteurs. Domaines :

Related: