Le Flat Design - Principe et utilité. En design web, comme dans la mode, les tendances vont et viennent. Hier on découvrait le responsive web design, aujourd’hui on nous parle de flat design. C’est LE trend topic du moment… Mais intéressons-nous à ce qui existe déjà : le flat design, ou le « design plat » en bon françois, est la nouvelle corde à l’arc des designers d’interfaces. Signes distinctifs : ce courant graphique et ergonomique prône des interfaces minimalistes et aux couleurs vives. Windows 8, le premier système d’exploitation en flat design – Source : windows.microsoft.com Le flat design, mais qu’est-ce donc ? Le flat design est en fait un design graphique minimaliste, débarrassé de tout ornement en relief, qui a pour but d’améliorer la lisibilité.
Ce courant est souvent comparé et mis en opposition au skeuomorphisme. L’exemple typique serait la corbeille à papier, que l’on retrouve tous au pied de notre bureau, et qui nous permet de jeter nos documents inutiles. L’horloge flat design, vue sur : blogoergosum.com. Performances et polices personnalisées - an. The issue is 1) custom fonts are awesome and we want to use them 2) custom fonts slow down our pages by being large additional resources. Dealing with this has been in the air recently so I thought I'd round up some of the ideas and add thoughts of my own.
Only load on large screens The first idea I saw was Dave Rupert's tests on only loading @font-face on large screens. Turns out if you use @font-face but don't ever apply that font-family, the font won't be downloaded. Pretty smart, browsers. Jordan Moore has an article on the Typekit Blog "Fallback Fonts on Mobile Devices" that uses the same thinking. I applied this thinking to my own project by producing two separate font kits: a “full” font kit containing all the typographical styles I originally intended to use, and a “light” kit containing fewer fonts (and, consequently, weighing significantly less).
Ajax in the fonts Making sure the font files have far expires headers is important too. On the front-end, we'll do the exact opposite. Polices de repli sur les appareils mobiles - an. Today’s guest post was written by Jordan Moore, a writer and web designer based in Northern Ireland. Recently, I was working on a project where the font kit was starting to get rather heavy due to the number of fonts we had painstakingly chosen to reflect the voice and tone of the brand. The kit was weighing in at around 300–400kb, which was a massive handicap on our target page weight before we had even added a single piece of content. This realisation forced me to rethink my approach to the typography in the project, especially for users on poor connections—who we generally assume to be mobile users.
My next plan was to use web fonts only as typographical flourishes, and the default system fonts would provide a stable baseline for the bulk of the typography. Headings would be web fonts served from Typekit to retain the link with the brand identity. This was before I discovered that relying on default system fonts in responsive design is a fool’s game. Like this: Like Loading... Fit To Scale. My site is now responsive. The more I work with flexible images & grids and media queries, the more I appreciate what can be achieved. Any apprehension I may have had about whether or not a responsive approach would harmonize with my design sensibilities and Paravel’s workflow was erased while working on the redesign of The Do Lectures website. We didn’t have to overhaul our process, were able to stay on budget, and ensured that the site hierarchy remained intact all the way from desktop down to mobile device views.
I had such a positive experience on the project that I decided to take what I learned and the opinions I formed to this site for an update. It’s been almost a year since Ethan Marcotte’s watershed A List Apart article on Responsive Web Design, and the horizontal scrollbar that showed when my site was viewed on my wife’s laptop has pained me ever since.
Structural Integrity Introducing FitText My Go-To Properties Ok, that’s enough outta me for now. Articles. Thinking with Type | Home.