poptronics 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...
It's Not UX vs. UI, It's UX & UI How differentiating the two will improve them both Chris Bank of UXPin — the wireframing & prototyping app — compares and contrasts web UI and UX, explains why we sometimes default to building a UI, and how UI shapes UX. For analysis of examples from over 33 companies, feel free to check out Web UI Best Practices. The web user experience (UX) is the abstract feeling people get from using a website. The user interface (UI) is what people interact with as part of that experience. When designing a website, you want your UX to be as positive as possible — you want your users to enjoy being on your website, that’s kind of the whole point. Source: UX is not UI Typically for websites, a company’s design team works on the UI in order to heighten the UX. We’ll start by giving an overview of UI with some examples, explain strategies to help you understand why a good UX depends on a good UI, and dive into why it’s easier (but necessarily correct) to create a UI instead of UX. What Web UI Is… And Isn’t
[Dossier] Qu'est ce que le Flat Design ? Le Flat Design est un terme que l’on commence à entendre de plus en plus. Les tendances dans le web se font et se défont à une allure incroyable. C’est logique, cela va avec l’accélération de toutes les technologies et des outils qui sont à notre disposition (HTML5, CSS3, jquery et j’en passe). Je n’ai pas la prétention de vous rédiger un billet sur l’explication exacte du terme mais plutôt sur un état des lieux de ce que l’on entend, des utilisations, des tendances du Flat design. À proprement parler, il n’existe pas réellement de définition mais plutôt d’association de termes par rapport à une tendance. A contrario des années passées où les designers appliquaient à profusion le style « Web2.0 glossy ». Comment cette tendance commence à détrôner le Skeuomorphic Web Design ? Je pense qu’il existe ici 2 écoles. Il faut, je pense, adapter chaque design à chaque problématique. il n’y a pas de bonne ou mauvaise solution. Skeuomorphic vs flat design Exemples de Flat Design flat design twitter
Le musée du Luxembourg : une (ré)ouverture très numérique Après un an de fermeture pour des raisons juridiques, le musée du Luxembourg a réouvert ses porte le 9 février avec l’exposition Lucas Cranach et son temps, jusqu’au 23 mai 2011. Le musée, dont la gestion est désormais assurée par la RMN, accueillera au moin. Le nouveau musée du Luxembourg bénéficie d’un nouveau logo plus moderne mais également d’un nouveau site internet. Une pléiade de dispositifs numériques viennent également soutenir la réouverture de l’institution. Le musée du luxembourg mise le numérique Le site de l’institution, disponible en 4 langues, possède une structure graphique harmonieuse et efficace et ets totalement indépendant du site de la RMN. Dans cette rubrique, les internautes retrouve des vidéos, classées par thèmes ou selon la playlist de l’utilisateur. Un espace enfant : Mon luco Visible dès la page d’accueil avec sa typographie et couleurs différentes cet espace est totalement dédié à l’univers du jeune public. Un parcours numérique pour l’expo Cranach
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. 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. Lazy load the fonts, load on subsequent page loads after cached And how.
The Next Big Thing In Responsive Design Responsive design, which allows designers and developers to build websites that adapt to every screen size, is one of the most empowering web tools to be adopted in the last decade. But adapting to the screen is only the first frontier of a new, responsive web. Today, users expect online experiences that not only respond to what device they're using, but also their location, time of day, what they’ve already read, and events happening in real time. To capture a user’s attention for the next generation of the web, you’ll need more than just responsive design. What Print Newspapers Get Right When you look at the print version of any major print publication over time, you realize that they don’t just have a couple of templates. Somehow, we’ve lost that ability on the web. These limitations aren’t just stifling for readers. Websites should do more than respond to devices. Solutions For Adopting A Truly Responsive Design One example of this approach is the reuse of elements.
The History of Flat Design: Efficiency, Minimalism, Trendiness It seems as though any time you hear about Web design these days, you can’t help but come across the term “flat design.” While the flat Web design trend has been emerging in recent years, it seemed to have exploded in popularity thanks to large companies and organizations changing their design aesthetic to that of flat design. But where did flat design come from? And why are we seeing it on the Web? Let’s walk through what flat design is, its influences from previous design periods, and how flat design became so popular today. What exactly is “flat design?” For those of you who haven’t heard of the term, “flat design” is mainly the term given to the style of design in which elements lose any type of stylistic characters that make them appear as though they lift off the page. In laymen’s terms, this means removing stylistic characters such as drop shadows, gradients, textures, and any other type of design that is meant to make the element feel three-dimensional.
Le temps d'un trajet Thinking with Type | Home «UserOnBoard» : embarquement immédiat dans les coulisses des applis «Tout le confort et la simplicité de Gmail», nous promet la page d’accueil de… Gmail. Oui, d’accord, mais c’est quoi Gmail ? La page d’accueil est l’endroit où atterrissent les internautes qui n’ont jamais mis un pied dans la messagerie de Google, et qui veulent s’y créer un compte. Les remarques de Samuel Hulick sont toujours pertinentes. Test d’Instagram sur UserOnBoard : l’internaute vient de cliquer sur «Passer» et une pop-up lui demande de confirmer : «Ok» ou «Passer» ? Les tests de sites sont regroupés dans la rubrique «Teardowns» de UserOnBoard et joliment présentés par captures d’écrans successives. Si je clique sur le lien pour vérifier mon adresse e-mail, pourquoi réafficher le message m’avertissant que mon email n’est pas vérifié ? Et mention spéciale pour cette astuce de l’application Snapchat, qui affiche un petit logo de cadeau pour mieux nous convaincre de dévoiler notre date de naissance… Pour les professionnels comme pour les curieux, une mine d’informations.
Concevoir vos interfaces graphiques en flat design[ Usaddict: Ressources sur l’ergonomie des interfaces (le blog Usabilis)] La tendance actuelle du design graphique d’interface fait émerger de plus en plus de sites web ou d’applications mobiles en Flat Design. Pour rappel, le flat design est un style de design graphique appliqué aux interfaces. Son principe, basé sur le minimalisme, est d’enlever tout éléments graphiques superflus et ceux qui imiteraient la réalité (ex : une texture, un effet bombé sur un bouton). La sortie récente de l’IOS 7 renforce ce mouvement popularisé par l’audace des interfaces Metro de Microsoft et des applications web de Google. Applications Geckoboard en flat design Les raisons du flat design Plus qu’une tendance, ce revival du less is more semble faire converger plusieurs facteurs : Nos recommandations pour concevoir en flat design Voici 9 conseils pour créer une interface graphique en flat design. 1- Veillez à être compatible avec le produit et l’utilisateur 2- Utilisez une grille de mise en page Interface Metro du windows phone avec une grille très marquée 3- Aérez ! Faites une pause
Le Musée de la danse - Se déplacer L’image figée et silencieuse du musée, associée à un art vivant qui naturellement évoque spectacle, mouvement et corps pour certains, et ballerines pour d’autres. Des préjugés et des visions partielles qui volent en éclat dans la proposition de Boris Charmatz de faire du CCNRB un Musée de la danse. Musée et danse ? Non, pas de tutus sous vitrine ici, ni de petits textes en corps 8 nécessitant une lecture à une distance minimum de 15 centimètres pour un déchiffrage correct (prévoir de l’aspirine après deux heures de visite). Non, ce musée n’a rien à voir avec cela. C’est avant tout un lieu vivant, de circulation, d’échange, d’expérimentation. Depuis 2009, le Musée de la danse invente (des projets), accompagne (production et co-production), transmet (sensibilisation à la danse et à la culture chorégraphique au sens large) et danse bien sûr (ateliers, cours et dance-floor) ! Production In Situ Souvent posés dans la cuisine (Audrey, tu crois qu’on a goûté à tous les thés ?) Dualités Déplacer…