background preloader

Tendances Web Design 2016

Tendances Web Design 2016
La fonction première du design est d’améliorer l’expérience que l’on a d’un produit ou d’un service. Le web design n’est pas (que) décoratif, il fait le lien entre les technologies et nous. Les nouveautés high-tech seraient plus difficiles d’accès sans l’ergonomie, le style, l’esthétique… Si les modes sont fugaces, les tendances répondent à des problématiques spécifiques. Les évolutions web design sont liées aux innovations technologiques qui induisent de nouveaux usages. En 2007, l’iPhone avait changé les habitudes avec iPhone OS, qui simplifiait la transition vers la mobilité en s’inspirant des objets de la vie réelle (skeuomorphisme*). Aujourd’hui, la relève est à chercher du côté des objets connectés. L’oeil humain ayant ses limites, les autres sens sont mis à profit, comme la perception haptique (toucher actif). * Skeuomorphisme : représentation réaliste de la fonction par l’objet qui la réalise dans la vie réelle. Je développerai les tendances web design 2016 en 10 points. UX first

Créez un Styleguide évolutif pour votre projet Aujourd'hui, je vous propose de découvrire une ressource qui vous permettra de créer un style guide qui pourra aussi vos servir de bac à sable pour vos projets : Styleguide Qu'est-ce qu'un Styleguide? Un styleguide est une page présentant les grands axes du style de votre projet de manière visuelle. Les styles guides ont aussi d'autres intérêts, comme par exemple présenter sa marque et son identité au public, ou (ce qui nous intéresse aujourd'hui) ce que l'on appelle des "Kitchen sink". Pour en savoir plus, je vous propose de découvrir cet article présentant 10 styles guides de grandes marques, ainsi que le kitchen sink de foundation pour bien comprendre l'aspect "aide pour intégrateurs". 10 Styles Guides qui donnent des idées pour présenter votre identité visuelle Foundation 6 kitcneh sink Documentez vos projets avec Styleguide L'aspect "kitchen sink" est bien présent avec la possibilité d'exporter en un simple click le HTML pour ensuite pouvoir le coller dans son intégration.

Images responsive, flexbox et souci de ratio d'affichage Sur plusieurs navigateurs (sauf Firefox) nous avons constaté au sein de différents projets à l'agence un petit bug concernant le module CSS3 Flexbox. Le constat est celui-ci : lorsque l'on place une image responsive directement dans un container en flexbox, l'image s'affiche avec un petit souci de proportions : Pour en savoir un peu plus sur l'explication de ce comportement (qui n'est en fait pas un bug) je vous laisse lire cet article. En résumé, la spécification Flexbox a changé il y a quelques temps et les flex-items bénéficient désormais d'un min-height / min-width de valeur auto (et non plus 0 comme avant), et ça change tout ! En effet, quand la valeur de min-height était 0, les éléments flex-items pouvaient (devaient) se réduire autant que nécessaire, notre image préservait donc son ratio en réduisant leur hauteur. À présent la taille intrinsèque des éléments tels que <img>.ou <input> est préservée par défaut. ajouter n'importe quel container, par exemple <div>, autour de l'image.

7 future web design trends Too many articles will tell you what is cool in web design. I’m going to take you past the obvious to make some real predictions. 1. Gestures are the new clicks We forget how hard scrolling webpages used to be. As a pro, you probably used a mouse wheel, cursor keys, or trackpad, but you were way ahead of most users. In 2015 it’s far easier to scroll than it is to click. As a result, we should expect more and more websites to be built around scrolling first, and clicking second. There’s every reason to expect this trend to continue as mobile takes over more of the market. Websites which spread their articles onto multiple pages will soon learn this lesson. It’s too early to know if the web will expand itself onto devices like watches, but if it ever does, you can bet it’ll be almost entirely driven by gestures. 2. Now scrolling is so cheap, and devices are so varied in size, ‘the fold’ is finally becoming irrelevant. 3. Today every young adult is an expert web user. 4. 5. 6. 7.

CSS3 Flexbox, plongez dans les CSS modernes « Flexible Box Layout Module », mieux connue sous le nom de « Flexbox », est une spécification CSS3 du W3C qui définit un nouveau modèle de boîte et de positionnement jusqu’alors inédit. À lui seul, ce mode de positionnement rend élémentaires tous les problèmes classiques rencontrés avec CSS depuis des décennies : les alignements rendus simplissimes ; le centrage vertical ; une fluidité naturelle des éléments ; des hauteurs identiques entre frères ; la modification de l’ordre d’affichage ; et ce n’est qu’un début ! Flexbox est déjà en train de révolutionner de manière profonde et pérenne notre façon de concevoir des designs et des composants en CSS. Cet ouvrage, sorti le 18 février 2016, vous permettra de découvrir et de tirer parti de toutes les nouveautés apportées par cette spécification CSS3, notamment à travers : 134 pages en couleurs, 6 travaux pratiques décortiqués, et plus de 110 illustrations et codes consultables en ligne. Au sommaire : À qui s’adresse ce livre ?

The Decade in Web Design Trends Get into the time machine to start a captivating journey from past to future of web design. All you wanted to know about the history of trends, you’ll find in Web Design Trends Infographic, the complete guide that will give you a close look at all changes happened during 2004-2014 years and a foolproof 2015 prediction. Let’s start and dive deeply into the versatile world of web design and its run through years. View Infographic Today I dare say that TemplateMonster designers have built the time machine, and now it's possible to learn more about web trends and the way the best designs looked in the past. Web Design Trends Infographic In Brief This interactive infographic offers you to browse the major trends of the latest 12 years (from 2004 to 2015) in web design industry. Being interactive, this infographic allows you intuitive browsing though all the data and thus a pleasant experience of working with it. Large Hero AreasMicro InteractionsMonochromatic ColorsMaterial Design

WebScaleSQL : projet collaboratif pour la gestion de base de données massives | Horizon Du Web WebScaleSQL a été annoncé par Facebook, Google, Twitter et LinkedIn comme un projet collaboratif. Le but de ce projet est de proposer une solution à la gestion d’énormes bases de données en partant d’une version améliorée de MySQL « We’re gonna need a bigger database » Les ingénieurs des compagnies fondatrices de WebScaleSQL travaillent déjà sur l’amélioration de MySQL via des branches différentes, le but étant de réunir ces améliorations dans un seul et même projet Sur un des posts du blog Facebook Code, la firme a annoncé que des ingénieurs avaient émis des idées pour le projet WebScaleSQL : Facebook est également entrain de travailler sur un client asynchrone pour MySQL. Les environnements de production-tests de Facebook sont en train d’être déplacés (tables, utilisateurs et statistiques de compression) vers WebScaleSQL au fur et à mesure que les derniers composants de compression finissent de passer en production-tests.

Related: