8 erreurs à éviter en webdesign Le Webdesign a considérablement évolué au cours des 10 dernières années. Certaines techniques de conception longtemps considérées comme des normes sont maintenant devenues des erreurs à ne pas commettre. Tout bon webdesigner et toute agence web digne de ce nom se doit d’anticiper ces changements pour éviter les impairs dans la conception de votre site internet. Voici les 8 erreurs à éviter en webdesign les plus courantes : 1. Si l’utilisateur ne peut pas naviguer facilement sur votre site celui-ci ne vous sera pas d’une grande utilité. 2. Beaucoup de designers oublient de faire des sites Web adaptés… même aujourd’hui ! 3. Des études ont démontré que des formulaires plus simples et plus courts obtiennent de meilleurs résultats en terme de conversion. 4. Les concepteurs se concentrent souvent sur les visuels, mais pas assez sur le choix de la typographie. 5. Bon ok, nous aimons tous les animations sur un site : ça le rend plus attrayant. 6. 7. 8.
Les 15 grandes tendances web design pour 2019 Le web design évolue constamment et chaque nouvelle année apporte son lot de nouveauté, donnant aux designers de nouvelles choses à essayer. 2018 a été pour nous l’occasion d’aborder de nombreux sujets et de vous faire découvrir des tendances émergentes. C’est donc sans surprise que certaines d’entre elles seront de la partie en 2019. Mais voici l’intégralité des tendances qui marqueront l’univers du web design au cours des prochains mois. 1. Les polices oublient les régimes et prennent du gras Le choix d’une typographie impacte la lecture d’un texte. Vous remarquerez d’ailleurs que ce sont souvent les titres principaux qui sont mis en gras afin de délivrer plus rapidement l’information. Vous pourrez même y ajouter un peu de couleurs pour encore plus les souligner. Il faudra cependant être attentif à ne pas surcharger la page de mots ainsi mis en évidence ! 2. La typographie continue de faire parler d’elle avec l’arrivée du serif sur vos écrans. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. À retenir 13.
Test du plugin wordpress AMP Accelerate Mobile Performance Qu’est ce que l’AMP ? Commençons par le début : L’AMP est l’acronyme pour Accelerate Mobile Performance. C’est un projet open source lancé par la firme Google qui a pour but le chargement plus rapide des pages sur mobile ( Aujourd’hui les sites en responsive web design n’offrent pas forcement un confort et une rapidité de chargement optimal pour les versions mobiles. La plupart du temps, un site internet est réalisé sur un template responsive mais les éléments qui le composent (graphisme,…) ne sont pas allégés pour le mobile, ce sont les mêmes. Que fait l’AMP techniquement ? Le système d’AMP va créer automatiquement une 2eme version de la page à afficher. Module WordPress AMP Depuis le départ de l’initiative de Google sur ce projet, WordPress ainsi que d’autres acteurs sont de la partie (Twitter, Adobe, Pinterest,…). Notre test du module AMP pour WordPress Résultats du chargement d’une page interne Résultats du chargement de la page avec AMP En conclusion
30 Awesome SVG Animation For Your Inspiration Designers used to create animations in HTML elements using CSS. However, due to the limitations of HTML elements in creating patterns, shapes, and others, they naturally turn to SVG, which offers more interesting capabilities. Working with SVG, we enjoy good browser supprot for SVG animation, and we have more ways to create new animation. You can use both the built-in SVG animation functionality or CSS3 animation (note that not everything can be done by CSS so there is still need for JavaScript). Here I have compiled some amazing animated SVG. Border Animation by Sean McCaffery Made only with CSS, a border forms smoothly around the text, when you hover over the “HOVER” instruction. Elastic SVG Sidebar by Nikolay Talanov The sidebar becomes elastic when you try to pull it away from the side. Pull Down to Refresh by Nikolay Talanov Most pages allow you to “pull down” on the page to refresh. Animated Gradient on Text by Patrick Young Heart Animation by Nikolay Talanov Clock by Mohamad Mohebifar
Optimisation mobile et responsive web design : mediaqueries, images et performance web Comme chaque année depuis 4 ans, je donne un cours aux étudiants de différentes filières en présentiel et à distance de l’Université de Strasbourg sur l’optimisation mobile et le responsive web design. Le cours se découpe en deux parties : une première partie consacrée au design et à l’ergonomie où les étudiants voient les bonnes pratiques accompagnés d’exercices concrets qui leur permettent de réaliser un concept de site responsive, de la première idée à la réalisation finale en passant par la création de personas, d’une architecture d’information cohérente, du contenu des différentes pages et vues au wireframe. Une seconde plus technique consacrée à comment construire un site responsive en HTML/CSS en prenant en compte la performance, les problématiques d’images, de médias complexes, etc.
Turntable.js : A Responsive JQuery Slider What's new in Version 2.0 Our goal with Turntable.js is to shake-up the standard approach to web sliders, JQuery sliders, and image viewers. The average JQuery slider is clunky and relys on the 'click' behavior. Knowing how precious user clicks are, our slider leverages gesture behaviors, requiring little 'commitment' from the viewers. Version 2.0 builds on the previous cursor/finger movements and add support for triggering the slider on scroll. Scroll down to see the example below in action. What is this? Turntable.js is a responsive JQuery slider that will let you rotate through a list of images as your mouse (or finger) sweeps across a container. It's a fresh alternative to the typical 'click-to-slide' JQuery gallery, plus the slider works on mobile! Installation Installing the slider is fairly simple. Also, while it might go without saying, since this is a JQuery slider, but you will need to make sure JQuery is properly installed. $('#myTurntable').turntable(); Settings Feedback
Les 10 tendances en design graphique pour 2019 En tant que graphiste et quel que soit votre médium de prédilection, vous devez bien évidemment connaître les principes de base du design graphique mais aussi être au fait de l’évolution des tendances design, de sorte à pouvoir offrir à vos clients des travaux efficaces et pertinents. En tant qu’entrepreneur, avoir une image en phase avec son temps permet à votre entreprise de toucher de nouveaux publics. Quelles tendances font rage cette année ? 10 tendances en design graphique qui vont faire rage en 2019 — 1. La 3D s’est faufilée partout ces derniers temps, et on voit régulièrement des compositions avec tellement de profondeur qu’on se perdrait presque à l’intérieur ! Au-delà de la typographie, on voit de plus en plus de superbes compositions réalisées en 3D qui semblent tout droit sorties d’un autre monde. 2. Voici donc, les designs asymétriques. 3. 4. Ce style, qui remonte aux affiches publicitaires emblématiques d’après guerre, est particulièrement proéminent en illustration. 5. 6.
Les 10 grandes tendances 2018 du web design La fin de l’année approche et 2018 est synonyme de grandes nouveautés dans le monde du web design, qui voit ses tendances évoluer à un rythme effréné. En 2018, certaines tendances pourraient bien occuper le devant de l’écran. Si vous n’avez pas encore planifié la refonte de votre site internet, c’est le moment de vous intéresser de près aux perspectives suivantes (estimez le budget nécessaire avec notre simulateur de prix de webdesign). Si vous avez suivi régulièrement nos articles, la plupart d’entre elles ne devraient pas vous surprendre. 1. Si le material design permet de gagner en temps de téléchargement, avec une iconographie simple, les interactions renforcent le lien avec l’internaute. Les barres latérales défilantes de partages sur les réseaux sociaux font également partie de ces micro-interactions de plus en plus bienvenues. Le nouveau format d’images le plus utilisé sur le web pourrait d’ailleurs bientôt être le SVG, très flexible et surtout léger à charger. Commander mon logo 2.
10 Free Must Download Free Programs Similar To Photoshop TimothyBlake • September 23rd, 2013 Articles Freebies Photoshop is the best application on the market for designing and editing photos, but comes with a hefty price tag if you’re starting out in the industry or if you’re an aspiring photographer, designer etc. Look no further this is a great compilation of free Photoshop alternatives, for you to create free web graphics and enhancing photos. The compilation is the best free web based and open source applications. We would love to hear your thoughts in the comments section below, on what’s your favourite tool featured within the blog post, or do you feel we may have missed a cool tool from the compilation. 1. It has many capabilities. 2. An Open Source vector graphics editor, with capabilities similar to Illustrator, CorelDraw, or Xara X, using the W3C standard Scalable Vector Graphics (SVG) file format. 3. 4. Create perfect photos with tools for removing red-eye, blemishes and adjusting brightness and colours. 5. 6. 7. 8. 9. 10.
Progressively - Load Images progressively .init() (options) The init() API takes a few options throttle Type: Number, Default: 300 The throttle is managed by an internal function that prevents performance issues from continuous firing of window.onscroll events. Using a throttle will set a small timeout when the user scrolls and will keep throttling until the user stops. The default is 300 milliseconds. delay Type: Number, Default: 100 The delay function sets the timout value for images to start load asynchronously. Ideally it's value should be low. onLoad Type: Function, Arguments: HTMLElement The imgload function is invoked whenever an image elements finishes loading.