16 sites pour trouver des illustrations vectorielles gratuites - Pour tout designer / webmaster / auto entrepreneur web qui se respecte, le problème des images pour créer un site est récurrent. Il existe une multitude de sites pour trouver des photos stock, mais beaucoup sont malheureusement payants. Il existe heureusement quelques alternatives, qui feront l'objet d'un billet ultérieur Pour ce qui est des illustrations vectorielles, ou vector files, le problème devient un peu plus épineux. Faites chauffer les bookmarks ! Snap2Objects, propose des silhouettes de personnages, ainsi que bien d'autres ressourcesLogoTemplater : des illustrations pouvant servir de base à un logoDesigners Revolution : pas mal de packs IllustratorTHePixlPusherCreatSK8Vibr8Bros : pas mal de badges / stickersFree LogoTypes, pour retrouver les logos des grandes marques en format vectoCoolVectorsVector4Free, des vectoriels dans pas mal de catégoriesGoMediaZineGarcya.usDezignus une mine d'or. J'espère que vous trouverez votre bonheur dans cette liste.
Sémantique HTML et architecture côté client Par Nicolas Gallagher Voici quelques réflexions, quelques histoires et idées que j’aime bien et sur lesquelles je travaille depuis un an. Pour le HTML, cela recouvre la sémantique, les composants et différentes approches de l’architecture côté client (en front-end), mais je parle aussi des systèmes de nommage des classes, ainsi que de la compression HTTP. We shall not cease from explorationAnd the end of all our exploringWill be to arrive where we startedAnd know the place for the first time. Nous ne cesserons jamais d’explorerEt la fin de toutes nos explorationsSera de parvenir à notre point de départEt d’enfin savoir où nous sommes. T.S. De la sémantique La sémantique se définit par l’étude des relations entre les signes et symboles et ce qu’ils représentent. Savoir distinguer différents types de sémantique HTML L’une des bases du développement côté client moderne et professionnel réside dans l’écriture d’un « HTML sémantique ». Prenons cet exemple très simple : L’architecture côté client
10 sources d'images libres et gratuites pour illustrer son site De nombreuses plateformes hébergent des images librement utilisables par les éditeurs de sites web professionnels. Comment chercher des photos, cliparts et illustrations gratuites de qualité ? Quelles plateformes offrent une alternative aux banques d'images payantes ? Avant de réutiliser des images trouvées sur le web Vérifier les conditions de réutilisation de l'image sur le site d'origine : attribution de l'oeuvre, type de licence, restrictions particulières imposées par l'auteur. Trouver des images librement réutilisables Google Images Le moteur de recherche d'images de Google dispose d'un filtre de recherche « droits d'usage ». Pour activer ce filtre : - Aller sur la page de recherche avancée de Google Images- Entrer les mots-clés dans le champ de recherche correspondant - Au bas de la page, dans « droits d'usage », sélectionner le filtre « libres de droits d'usage ou de distribution, y compris à des fins commerciales » - Cliquer sur « Recherche avancée » A noter : Freerange Stock Pixabay
La grille infinie Par Chris Armstrong Aujourd’hui, nous créons pour un média dépourvu de dimensions fixes, un média qui peut et qui pourra s’adapter pour mieux coller à son environnement. Un média capable d’afficher une mise en page unique sur un smartphone, un panneau d’affichage dans Times Square et tout ce qui existe entre les deux. Nous concevons pour un canevas sans limites, qui nécessite un système de grilles infini. On pense souvent que pour faire un design réactif il faut prévoir plusieurs mises en page : mobile, tablette, ordinateur de bureau… Mais les supports de dimensions intermédiaires ont tendance à souffrir. À mesure qu’apparaissent des écrans de dimensions intermédiaires, focaliser notre attention sur quelques « dimensions clés » n’offrira qu’une expérience médiocre pour un nombre croissant d’utilisateurs. Qu’est-ce qu’un système de grille infini ? Les grilles sont simplement des outils pour résoudre visuellement des problèmes. Mark Boulton, A Richer Canvas Les états Composants Jeremy Keith
25 banques d'images et des millions de photos gratuites [+5 BONUS] Tous les acteurs du web doivent être conscient de l’importance d’utiliser les bons supports graphiques et les bonnes images. En effet, la réussite d’un projet web dépend en bonne partie du design et de l’ergonomie d’un site. Pas que bien sûr, mais un site avec de belles illustrations pourra naturellement mieux se démarquer de ses concurrents disposant d’images médiocres ou pas d’images du tout. En tant que professionnel du web, que vous soyez webdesigner, blogueur, référenceur, webmaster, développeur, chef de projet ou encore rédacteur, vous devez connaître les bonnes sources de photos pour enrichir vos contenus. Et si ça peut être gratuit, alors pourquoi s’en empêcher ! Plusieurs personnes m’ayant contacté par mail pour savoir où je trouve les photos pour illustrer mes sites, je me suis dit qu’il serait sympa de réaliser un récapitulatif complet des meilleures banques d’images libres de droits et gratuites que j’utilise régulièrement. 1. 2. 3. 4. Consultez le site :
Faites un site dynamique uniquement en HTML/CSS et gratuitement avec Mavo Attention gros coup de coeur aujourd'hui avec Mavo, une ressource absolument phénoménale vous permettant de créer des sites dynamiques et éditables uniquement en HTML et CSS, gratuitement et sans connaissances en programmation serveur. Faites un site dynamique uniquement en HTML/CSS et gratuitement avec Mavo Bien que cela soit réducteur de le considérer comme cela, Mavo est une ressource Javascript dont le but est de permettre à tous les intégrateurs de développer un site dynamique et editable, et ce même s'ils n'ont aucune connaissance de développeurs. Le fonctionnement de Mavo est vraiment très simple : pour commencer, téléchargez et linkez les fichiers JS et CSS (un de chaque) fourni par Mavo sur votre site. Une fois fait, déclarez votre application grace à quelques arguments HTML simplicimes et parametrez là en lui définissant un nom, une méthode de stockage pour les informations éditables, etc. Et le plus beau dans tout ça, c'est que c'est tout ce que vous avez à savoir.
Photl : plus de 500 000 photos gratuites et libres de droit Illustrer un site ou un article de blog avec de belles photos, gratuites, en respectant le droit d’auteur, ce n’est pas toujours facile. Heureusement, des sites web entiers répertorient les meilleures images libres de droit. Focus sur Photl, un outil bien pratique pour trouver des photos de qualité. Sur Photl, vous pouvez rechercher une photo gratuite et libre de droit avec un mot clé. Les keywords les plus recherchés sont indiqués en bas du site pour vous aider. Les conditions d’utilisation des photos présentes sur Photl sur plutôt claires : Les photos sont gratuites pour un usage non-commercial uniquementVous pouvez payer pour utiliser les images pour un usage commercialLa résolution des photos gratuite est de 1920x1280px ou 849x565pxVous pouvez payer pour télécharger les images en plus haute résolutionVous pouvez télécharger jusqu’à 10mb de photos par jour gratuitementVous n’avez pas le droit de revendre les images téléchargées sur Photl
Le plugin pour les curieux de la CSS ! – Graphisme & interactivité Je ne sais pas comment vous faites de votre côté, mais lorsque je suis intrigué par le code d’une page web (et notamment son CSS), je lance l’inspecteur d’éléments de Chrome ou de Firefox pour voir ce qui s’y cache. C’est parfois un peu laborieux mais je m’en sors toujours. Ce matin, sur Twitter, on m’a envoyé un lien vers CSS Peeper, une visionneuse CSS intelligente. Il s’agit d’un petit plugin que vous installez sur votre navigateur et qui vous permet d’inspecter les styles CSS de manière simple et plutôt bien organisée. la typola taille de la typola graisse de la typola hauteur de lignel’interligneles couleursles dimensionsle paddingetc. CSS Peeper vous permet aussi d’inspecter toute la palette de couleurs utilisée sur la page web en question, et ça c’est plutôt pratique ! Un petit outil bien pratique pour tous les curieux et curieuses de la feuille de style 😉
74 Banques d'images gratuites Toute image trouvée sur Internet et que vous pouvez télécharger est gratuite et vous pouvez en faire ce que vous voulez pour un usage privé, Il est donc inutile de se poser la question. Puis-je utiliser telle ou telle photo que j’ai trouvée sur Internet? Réponse : oui. Oui à partir du moment où l’usage de la photo est strictement totalement entièrement privé (répétition volontaire). En revanche, si vous commencez à bloguer, à vous servir d’une photo pour faire de la pub, créer des encarts publicitaires, les choses sont un peu moins évidentes et il ne s’agit donc pas de rigoler sous peine d’avoir quelques ennuis, même si la probabilité d’avoir des problèmes avec la justice est minime, je ne tenterais pas trop le diable. Pour utiliser des photos pour votre travail, il y a trois solutions : Fabriquer vos photos vous-même. En tout état de cause, l’usage d’une photo de façon publique doit être premièrement régi par le bon sens. . y a t’il une personne ou plusieurs personnes sur la photo?
CSS Grid Layout, les ressources indispensables pour apprendre - Alsacreations Cela ne vous aura sans doute pas échappé : ces derniers temps tout le monde parle de Grid Layout, le récent module de positionnement CSS par grilles, aujourd'hui adopté par la plupart des navigateurs. Et pour cause, combiné à Flexbox le positionnement Grid Layout nous promet de soigner tous les maux et bidouilles de nos intégrations de pages web. Cette révolution arrive à un rythme inOui et pour ne pas rater le train en marche (huhu), voici quelques ressources incontournables pour bien comprendre les subtilités de ce nouveau positionnement. En français Commençons par quelques liens rédigés dans la langue de Molière, où les ressources sont malheureusement assez rares. CSS Grid Layout, guide complet Les concepts de base des grilles CSS CSS3 Grid Layout Tutoriels et guides Cette partie regroupe les articles d'apprentissage généraux, les pense-bête et le site de référence (gridbyexample) qui propose tutoriels, vidéos et démos. Learn CSS Grid The CoffeeCup Guide to LIBERATING LAYOUT THROUGH CSS GRID
5 astuces pour trouver facilement des images libres de droits sur Internet Lorsque vous avez besoin d’illustrer vos contenus, vous vous retrouvez souvent confronté au problème des droits d’auteur. Alors, pour faciliter votre recherche, Le Blog du Modérateur vous fait découvrir 5 super astuces. 1. Google Images Google Images est très certainement le moteur de recherche de photographies le plus puissant. 2. Les photographies présentes sur ImageBase sont variées, d’extrêmement bonne qualité, totalement gratuites et vous pouvez les utiliser comme bon vous semble. 3. Pour bénéficier des images présentes sur Stock Photos for Free, vous devez dans un premier temps vous inscrire (gratuitement, bien sûr). 4. Tout comme ImageBase, les photographies proposées sur Bajstock sont de très bonne qualité, sur des thèmes divers et variés et libres de droits pour un projet commercial. 5. Grâce au moteur de recherche de photos libres de droits de Flickr, vous trouverez facilement les contenus gratuits qui vous intéressent.
Les navigateurs supportent Grid Layout - Alsacreations L'une des spécifications CSS les plus attendues du moment, le module Grid Layout, vient tout juste d'être implémentée sur la dernière version du navigateur Safari (10.1 sur bureau et 10.3 sur mobile). À ce jour, ce module est donc officiellement reconnu sur l'ensemble des navigateurs les plus courants : Internet Explorer 10+ et EdgeChrome 57+Firefox 52+Safari 10.1+Opera 44+ Bien évidemment, il est encore un peu prématuré de construire nos pages web à l'aide de ce module. Si vous souhaitez en savoir plus sur ce positionnement révolutionnaire, ses différences avec Flexbox, ses bugs connus (hello IE) et découvrir quelques ressources indispensables sur le sujet, je vous invite à parcourir un article récapitulatif posté il y a quelques semaines de cela : "Grid Layout arrive, préparez-vous !". Sachez également qu'un tutoriel de découverte de Grid Layout est disponible sur Alsacréations depuis belle lurette.
Ton sur ton, bleu sur bleu : comment photographier un paysage de mer - TENDANCE BLEUE Démarrage de la semaine sur les chapeaux de roue mais alors que la Provence ne bénéficie pas en ce moment, c’est le moins que l’on puisse dire, de la météo qui a fait sa légende, voici une image qui j’espère repeindra votre semaine en bleu. Cette photo n’est pas de moi, je précise mais elle fait partie de la plaquette de présentation d’un prestigieux hôtel de la « french riviera ». Bon autant doucher de suite vos espoirs, les tarifs restent assez dissuasifs pour ne pas dire complètement effrayants. L’exception a toujours un prix. Et pour tout dire, la proximité de Monaco n’arrange rien de ce coté-là… J’en profite pour rappeler que mon bouquin « Photographier la mer et la voile » comprend un chapitre entier consacré au paysage de mer dont vous pouvez lire un extrait ici.
Un bon Directeur Artistique est-il un bon UX Designer ? La réponse à cette question est plutôt non. Alors pourquoi ? Un bon DA est-il un bon UX ? Click To Tweet Il suffit de regarder les courbes de recherche dans Google Trends pour se rendre compte que le phénomène lié aux nouveaux métiers du design digital n’en est qu’à ses débuts : Qui dit tendance, dit recrutement. J’ai eu l’occasion de recruter de nombreux profils dernièrement, de type UX ou UI, et je constate un phénomène qui s’accélère, à savoir l’apparition soudaine d’un grand nombre de “Designers d’Expérience” qui se déclaraient jusque-là en tant que “Directeur Artistique” : “ Sur un profil LinkedIn par exemple, le ou la candidat(e) change soudainement d’expertise entre deux postes, en le justifiant par une première création d’une expérience digitale. ” Du storytelling au story playing* Historiquement, le Directeur Artistique a longtemps travaillé sur le message, le storytelling, et au final, l’émotionnel. Être amoureux VS être catalyseur Directeur d’expérience ou Designer artistique ?